fix option to setup LSL stream

neuromodulation · Sep 11, 2024 · e274f66 · e274f66
1 parent d36d855
commit e274f66
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 17 deletions.
diff --git a/gui_dev/bun.lockb b/gui_dev/bun.lockb
diff --git a/gui_dev/jsconfig.json b/gui_dev/jsconfig.json
@@ -6,6 +6,7 @@
     "moduleResolution": "node",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "jsx": "react-jsx",
   }
 }
diff --git a/gui_dev/package.json b/gui_dev/package.json
@@ -14,7 +14,7 @@
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",
     "immer": "^10.1.1",
-    "plotly.js-basic-dist-min": "^2.35.0",
+    "plotly.js-basic-dist-min": "^2.35.2",
     "react": "next",
     "react-dom": "next",
     "react-icons": "^5.3.0",
@@ -36,6 +36,6 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.11",
     "prettier": "^3.3.3",
-    "vite": "^5.4.3"
+    "vite": "^5.4.4"
   }
 }
diff --git a/gui_dev/src/pages/SourceSelection/SourceSelection.jsx b/gui_dev/src/pages/SourceSelection/SourceSelection.jsx
@@ -34,9 +34,10 @@ export const SourceSelection = () => {
     syncError,
     setWorkflowStage,
     isStageActive,
-    samplingRateValue,
-    lineNoiseValue,
-    samplingRateFeaturesValue,
+    //samplingRateValue,
+    //lineNoiseValue,
+    //samplingRateFeaturesValue,
+    streamParameters,
     setSamplingRateValue,
     setLineNoiseValue,
     setSamplingRateFeaturesValue,
@@ -62,17 +63,17 @@ export const SourceSelection = () => {
 
         <MyTextField
           label="sfreq"
-          value={samplingRateValue}
+          value={streamParameters.samplingRateValue}
           onChange={(event) => handleOnChange(event, setSamplingRateValue)}
         />
         <MyTextField
           label="line noise"
-          value={lineNoiseValue}
+          value={streamParameters.lineNoiseValue}
           onChange={(event) => handleOnChange(event, setLineNoiseValue)}
         />
         <MyTextField
           label="sfreq features"
-          value={samplingRateFeaturesValue}
+          value={streamParameters.samplingRateFeaturesValue}
           onChange={(event) =>
             handleOnChange(event, setSamplingRateFeaturesValue)
           }
@@ -140,7 +141,8 @@ export const SourceSelection = () => {
           color="primary"
           component={RouterLink}
           to="/channels"
-          disabled={canProceedToChannelSelection}
+          //disabled={canProceedToChannelSelection}  // TODO: This doesn't work with the current setup, no idea why... the state values are set correctly
+          // load here the channels and display them from the stream
         >
           Select Channels
         </Button>

diff --git a/gui_dev/src/pages/SourceSelection/StreamSelector.jsx b/gui_dev/src/pages/SourceSelection/StreamSelector.jsx
@@ -20,12 +20,19 @@ export const StreamSelector = () => {
   const [searchingStreams, setSearchingStreams] = useState(false);
   const [selectedStreamName, setSelectedStreamName] = useState("");
   const [isStreamNameValid, setIsStreamNameValid] = useState(false);
-  const { lslSource, selectLSLStream, fetchLSLStreams, connectToLSLStream } =
+  const { lslSource, selectLSLStream, fetchLSLStreams, initializeLSLStream,
+    streamParameters, setLineNoiseValue, setSamplingRateFeaturesValue,
+    setSamplingRateValue, setStreamParametersAllValid} =
     useSessionStore((state) => ({
       lslSource: state.lslSource,
       selectLSLStream: state.selectLSLStream,
       fetchLSLStreams: state.fetchLSLStreams,
-      connectToLSLStream: state.connectToLSLStream,
+      initializeLSLStream: state.initializeLSLStream,
+      streamParameters: state.streamParameters,
+      setLineNoiseValue: state.setLineNoiseValue,
+      setSamplingRateFeaturesValue: state.setSamplingRateFeaturesValue,
+      setSamplingRateValue: state.setSamplingRateValue,
+      setStreamParametersAllValid: state.setStreamParametersAllValid,
     }));
 
   const validateStreamName = (name) => {
@@ -40,8 +47,18 @@ export const StreamSelector = () => {
     return () => clearTimeout(timer);
   }, [selectedStreamName, validateStreamName]);
 
-  const handleSelectStream = (streamName) => {
+  const handleSelectStream = (streamName, sfreq) => {
     setSelectedStreamName(streamName);
+    // set the samplingRateValue of the streamParameters
+    //streamParameters.samplingRateValue = sfreq;
+    // streamParameters.samplingRateFeaturesValue = 10;
+    // streamParameters.lineNoiseValue = 50;
+    // streamParameters.allValid = true;
+    setLineNoiseValue(50);
+    setSamplingRateFeaturesValue(10);
+    setSamplingRateValue(sfreq);
+    setStreamParametersAllValid(true);
+
     setIsStreamNameValid(true);
   };
 
@@ -69,7 +86,10 @@ export const StreamSelector = () => {
           {lslSource.availableStreams.map((stream, index) => (
             <TableRow
               key={index}
-              onClick={() => handleSelectStream(stream.name)}
+              onClick={() => handleSelectStream(
+                stream.name,
+                stream.sfreq
+              )}
               sx={{
                 cursor: "pointer",
                 "&:hover": { backgroundColor: "#505050" },
@@ -101,7 +121,7 @@ export const StreamSelector = () => {
 
   const handleConnectStream = async () => {
     if (isStreamNameValid) {
-      await connectToLSLStream(selectedStreamName);
+      await initializeLSLStream();  // selectedStreamName
     }
   };
 

diff --git a/gui_dev/src/stores/sessionStore.js b/gui_dev/src/stores/sessionStore.js
@@ -62,6 +62,28 @@ export const useSessionStore = create(
       allValid: false,
     },
 
+    // write function to set streamParameters
+    setSamplingRateValue: (value) => {
+      set((state) => {
+        state.streamParameters.samplingRateValue = value;
+      });
+    },
+    setLineNoiseValue: (value) => {
+      set((state) => {
+        state.streamParameters.lineNoiseValue = value;
+      });
+    },
+    setSamplingRateFeaturesValue: (value) => {
+      set((state) => {
+        state.streamParameters.samplingRateFeaturesValue = value;
+      });
+    },
+    setStreamParametersAllValid: (value) => {
+      set((state) => {
+        state.streamParameters.allValid = value;
+      });
+    },
+
     // Channel selection
     channels: null,
     selectedChannels: [],
@@ -217,15 +239,23 @@ export const useSessionStore = create(
           "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          stream_name: lslSource.selectedStream.name,
+          stream_name: lslSource.availableStreams[0].name,
           sampling_rate_features: streamParameters.samplingRateValue,
-          line_noise: streamParameters.linenoiseValue,
+          line_noise: streamParameters.lineNoiseValue,
         }),
       });
 
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
+
+      // enable the next button
+      set({
+        sourceType: "lsl",
+        isSourceValid: true,
+      })
+
+      // make a alert that says that the stream is initialized in js
     },
 
     // Computed properties