debugging channels, first draft decoding layout, added graphs

gui_dev/src/components/HeatmapGraph.jsx

@@ -0,0 +1,87 @@
+import { useEffect, useRef, useState } from 'react';
+import { useSocketStore } from '@/stores';
+import Plotly from 'plotly.js-basic-dist-min';
+import {
+  Box,
+  Typography,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+} from '@mui/material';
+
+export const HeatmapGraph = () => {
+  const [selectedChannel, setSelectedChannel] = useState('channel1');
+  const heatmapData = useSocketStore((state) => state.heatmapData[selectedChannel] || { x: [], y: [], z: [] });
+  const graphRef = useRef(null);
+  const plotlyRef = useRef(null);
+
+  const handleChannelChange = (event) => {
+    setSelectedChannel(event.target.value);
+  };
+
+  useEffect(() => {
+    const layout = {
+      title: { text: 'Heatmap', font: { color: '#f4f4f4' } },
+      autosize: true,
+      height: 400,
+      paper_bgcolor: '#333',
+      plot_bgcolor: '#333',
+      xaxis: {
+        title: { text: 'Time', font: { color: '#f4f4f4' } },
+        color: '#cccccc',
+      },
+      yaxis: {
+        title: { text: 'Features', font: { color: '#f4f4f4' } },
+        color: '#cccccc',
+      },
+      margin: { l: 50, r: 50, b: 50, t: 50 },
+      font: { color: '#f4f4f4' },
+    };
+
+    if (graphRef.current) {
+      Plotly.react(
+        graphRef.current,
+        [
+          {
+            z: heatmapData.z,
+            x: heatmapData.x,
+            y: heatmapData.y,
+            type: 'heatmap',
+            colorscale: 'Viridis',
+          },
+        ],
+        layout,
+        { responsive: true, displayModeBar: false }
+      ).then((gd) => {
+        plotlyRef.current = gd;
+      });
+    }
+  }, [heatmapData]);
+
+  return (
+    <Box>
+      <Box display="flex" alignItems="center" mb={2}>
+        <Typography variant="h6" sx={{ flexGrow: 1 }}>
+          Heatmap
+        </Typography>
+        <FormControl variant="outlined" size="small">
+          <InputLabel id="heatmap-channel-select-label">
+            Channel Selection
+          </InputLabel>
+          <Select
+            labelId="heatmap-channel-select-label"
+            value={selectedChannel}
+            onChange={handleChannelChange}
+            label="Channel Selection"
+          >
+            <MenuItem value="channel1">Channel 1</MenuItem>
+            <MenuItem value="channel2">Channel 2</MenuItem>
+            {/* TODO: bind channels */}
+          </Select>
+        </FormControl>
+      </Box>
+      <div ref={graphRef} />
+    </Box>
+  );
+};

gui_dev/src/components/PSDGraph.jsx

@@ -0,0 +1,87 @@
+import { useEffect, useRef, useState } from 'react';
+import { useSocketStore } from '@/stores';
+import Plotly from 'plotly.js-basic-dist-min';
+import {
+  Box,
+  Typography,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+} from '@mui/material';
+
+export const PSDGraph = () => {
+  const [selectedChannel, setSelectedChannel] = useState('channel1');
+  const psdData = useSocketStore((state) => state.psdData[selectedChannel] || { frequencies: [], powers: [] });
+  const graphRef = useRef(null);
+  const plotlyRef = useRef(null);
+
+  const handleChannelChange = (event) => {
+    setSelectedChannel(event.target.value);
+  };
+
+  useEffect(() => {
+    const layout = {
+      title: { text: 'PSD Trace', font: { color: '#f4f4f4' } },
+      autosize: true,
+      height: 400,
+      paper_bgcolor: '#333',
+      plot_bgcolor: '#333',
+      xaxis: {
+        title: { text: 'Frequency (Hz)', font: { color: '#f4f4f4' } },
+        color: '#cccccc',
+      },
+      yaxis: {
+        title: { text: 'Power', font: { color: '#f4f4f4' } },
+        color: '#cccccc',
+      },
+      margin: { l: 50, r: 50, b: 50, t: 50 },
+      font: { color: '#f4f4f4' },
+    };
+
+    if (graphRef.current) {
+      Plotly.react(
+        graphRef.current,
+        [
+          {
+            x: psdData.frequencies,
+            y: psdData.powers,
+            type: 'scatter',
+            mode: 'lines',
+            line: { simplify: false, color: '#1a73e8' },
+          },
+        ],
+        layout,
+        { responsive: true, displayModeBar: false }
+      ).then((gd) => {
+        plotlyRef.current = gd;
+      });
+    }
+  }, [psdData]);
+
+  return (
+    <Box>
+      <Box display="flex" alignItems="center" mb={2}>
+        <Typography variant="h6" sx={{ flexGrow: 1 }}>
+          PSD Trace
+        </Typography>
+        <FormControl variant="outlined" size="small">
+          <InputLabel id="psd-channel-select-label">
+            Channel Selection
+          </InputLabel>
+          <Select
+            labelId="psd-channel-select-label"
+            value={selectedChannel}
+            onChange={handleChannelChange}
+            label="Channel Selection"
+          >
+            <MenuItem value="channel1">Channel 1</MenuItem>
+            <MenuItem value="channel2">Channel 2</MenuItem>
+            {/* TODO Bind Channels */}
+          </Select>
+        </FormControl>
+      </Box>
+      <div ref={graphRef} />
+    </Box>
+  );
+};

gui_dev/src/components/Graph.jsx → gui_dev/src/components/RawDataGraph.jsx

@@ -2,7 +2,7 @@ import { useEffect, useRef } from "react";
 import { useSocketStore } from "@/stores";
 import { newPlot, react } from "plotly.js-basic-dist-min";
 
-export const Graph = ({
+export const RawDataGraph = ({
   title = "EEG Data",
   xAxisTitle = "Sample",
   yAxisTitle = "Value",

gui_dev/src/components/index.js

@@ -2,7 +2,9 @@ export { AppBar } from "./AppBar";
 export { AppInfoModal } from "./AppInfoModal";
 export { CollapsibleBox } from "./CollapsibleBox";
 export { FileBrowser } from "./FileBrowser/FileBrowser";
-export { Graph } from "./Graph";
+export { RawDataGraph } from "./RawDataGraph";
 export { Sidebar, SidebarDrawer } from "./Sidebar/Sidebar";
 export { StatusBar } from "./StatusBar/StatusBar";
 export { TitledBox } from "./TitledBox";
+export { HeatmapGraph } from "./HeatmapGraph";
+export { PSDGraph } from "./PSDGraph";

gui_dev/src/pages/Channels/Channels.jsx

@@ -127,13 +127,13 @@ const ChannelsTable = () => {
   const updateChannel = useSessionStore((state) => state.updateChannel);
 
   const handleChange = (event, index, field) => {
-    updateChannel(
-      index,
-      field,
-      event.target.type === "checkbox"
-        ? event.target.checked
-        : event.target.value
-    );
+    let value;
+    if (event.target.type === "checkbox") {
+      value = event.target.checked ? 1 : 0;
+    } else {
+      value = event.target.value;
+    }
+    updateChannel(index, field, value);
   };
 
   return (
@@ -171,20 +171,33 @@ const ChannelsTable = () => {
                   backgroundColor: index % 2 ? "background.main" : "#666666",
                 }}
               >
-                {columns.map((column) => (
-                  <TableCell
-                    key={column.id}
-                    sx={{
-                      py: 1,
-                    }}
-                  >
-                    <column.component
-                      value={channel[column.id]}
-                      onChange={(e) => handleChange(e, index, column.id)}
-                      {...column.props}
-                    />
-                  </TableCell>
-                ))}
+                {columns.map((column) => {
+                  const Component = column.component;
+
+                  if (Component === Switch) {
+                    const switchProps = {
+                      onChange: (e) => handleChange(e, index, column.id),
+                      checked: channel[column.id] === 1,
+                      ...column.props,
+                    };
+                    return (
+                      <TableCell key={column.id} sx={{ py: 1 }}>
+                        <Component {...switchProps} />
+                      </TableCell>
+                    );
+                  } else {
+                    const otherProps = {
+                      onChange: (e) => handleChange(e, index, column.id),
+                      value: channel[column.id],
+                      ...column.props,
+                    };
+                    return (
+                      <TableCell key={column.id} sx={{ py: 1 }}>
+                        <Component {...otherProps} />
+                      </TableCell>
+                    );
+                  }
+                })}
               </TableRow>
             ))}
         </TableBody>

gui_dev/src/pages/Dashboard.jsx

@@ -1,8 +1,20 @@
-import { Graph } from "@/components";
-import { Box } from "@mui/material";
+import { RawDataGraph } from '@/components/RawDataGraph';
+import { PSDGraph } from '@/components/PSDGraph';
+import { HeatmapGraph } from '@/components/HeatmapGraph';
+import { Box, Grid } from '@mui/material';
 
 export const Dashboard = () => (
-  <Box>
-    <Graph />
+  <Box p={2}>
+    <Grid container spacing={4}>
+      <Grid item xs={12}>
+        <RawDataGraph />
+      </Grid>
+      <Grid item xs={12}>
+        <PSDGraph />
+      </Grid>
+      <Grid item xs={12}>
+        <HeatmapGraph />
+      </Grid>
+    </Grid>
   </Box>
 );