fix LSL stream plot by getting channels from session and export to utils

gui_dev/src/components/PSDGraph.jsx

@@ -9,6 +9,7 @@ import {
   Checkbox,
 } from "@mui/material";
 import { CollapsibleBox } from "./CollapsibleBox"; 
+import { getChannelAndFeature } from "./utils";
 
 const defaultPsdData = { frequencies: [], powers: [] };
 
@@ -35,6 +36,8 @@ export const PSDGraph = () => {
 
   const [selectedChannels, setSelectedChannels] = useState([]);
 
+  const availableChannels = channels.map((channel) => channel.name);
+
   const hasInitialized = useRef(false);
 
   const socketPsdData = useSocketStore((state) => state.graphData);
@@ -45,11 +48,8 @@ export const PSDGraph = () => {
     const dataByChannel = {};
 
     Object.entries(socketPsdData).forEach(([key, value]) => {
-      const parts = key.split('_');
-      if (parts.length < 4) return;
-
-      const channelName = parts.slice(0, 3).join('_');
-      const featureName = parts.slice(3).join('_');
+      const { channelName = '', featureName = '' } = getChannelAndFeature(availableChannels, key);
+      if (!channelName) return;
 
       if (!fftFeatures.includes(featureName)) return; 
 

gui_dev/src/components/RawDataGraph.jsx

@@ -9,7 +9,7 @@ import {
   Checkbox,
 } from "@mui/material";
 import { CollapsibleBox } from "./CollapsibleBox";
-
+import { getChannelAndFeature } from "./utils";
 
 // TODO redundant and might be candidate for refactor
 const generateColors = (numColors) => {
@@ -29,6 +29,7 @@ export const RawDataGraph = ({
 }) => {
   const graphData = useSocketStore((state) => state.graphData);
   const channels = useSessionStore((state) => state.channels);
+  const availableChannels = channels.map((channel) => channel.name);
   const [selectedChannels, setSelectedChannels] = useState([]);
   const hasInitialized = useRef(false);
   const [rawData, setRawData] = useState({});
@@ -93,15 +94,13 @@ export const RawDataGraph = ({
     if (!graphData || Object.keys(graphData).length === 0) return;
 
     const latestData = graphData;
-
     const updatedRawData = { ...rawData };
 
     Object.entries(latestData).forEach(([key, value]) => {
-      const parts = key.split('_');
-      if (parts.length < 4) return;
 
-      const channelName = parts.slice(0, 3).join('_');
-      const featureName = parts.slice(3).join('_');
+      const { channelName = '', featureName = '' } = getChannelAndFeature(availableChannels, key);
+
+      if (!channelName) return;
 
       if (featureName !== 'raw') return;
 

gui_dev/src/components/utils.jsx

@@ -30,3 +30,14 @@ export const LinkButton = ({ to, children, ...props }) => {
     </Button>
   );
 };
+
+export const getChannelAndFeature = (availableChannels, keystr) => {
+  const channelName = availableChannels.find((channel) => keystr.startsWith(channel + "_"));
+
+  if (!channelName) return {};
+
+  const restofstring = keystr.slice(channelName.length + 1);
+
+  return { channelName, restofstring };
+};
+