- Migrate many components to MUI

- Remove most module.css files
- Add recursively rendering Settings component
- Temporarily emove Sidebar from layout (component remains in codebase)
- Reorganize component and page file structure with less subfolders

gui_dev/jsconfig.json

@@ -3,10 +3,11 @@
     "baseUrl": "./",
     "target": "ES6",
     "checkJs": true,
+    "module": "ES6",
     "moduleResolution": "node",
     "paths": {
       "@/*": ["./src/*"]
     },
-    "jsx": "react-jsx",
+    "jsx": "react-jsx"
   }
 }

gui_dev/package.json

@@ -14,7 +14,7 @@
     "@mui/icons-material": "latest",
     "@mui/material": "latest",
     "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",
@@ -31,11 +31,12 @@
     "babel-plugin-react-compiler": "latest",
     "eslint": "^9.10.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react": "^7.35.2",
+    "eslint-plugin-jsdoc": "^50.2.3",
+    "eslint-plugin-react": "^7.36.1",
     "eslint-plugin-react-compiler": "latest",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.11",
+    "eslint-plugin-react-refresh": "^0.4.12",
     "prettier": "^3.3.3",
-    "vite": "^5.4.4"
+    "vite": "^5.4.6"
   }
 }

gui_dev/scripts/wdyr.js

@@ -0,0 +1,9 @@
+import React from "react";
+import whyDidYouRender from "@welldone-software/why-did-you-render";
+if (process.env.NODE_ENV === "development") {
+  whyDidYouRender(React, {
+    trackAllPureComponents: true,
+    logOnDifferentValues: true,
+    collapseGroups: false,
+  });
+}

gui_dev/src/App.jsx

@@ -11,12 +11,19 @@ import {
   Routes,
   Navigate,
 } from "react-router-dom";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { Box, Stack, ThemeProvider } from "@mui/material";
 import CssBaseline from "@mui/material/CssBaseline";
 import { AppBar, StatusBar } from "@/components";
-import { Dashboard, SourceSelection, Channels, Settings } from "@/pages";
-import styles from "./App.module.css";
-import theme from "./theme";
+import {
+  Dashboard,
+  SourceSelection,
+  Channels,
+  Settings,
+  Decoding,
+} from "@/pages";
+import { theme } from "./theme";
+import { StreamSelector } from "@/pages/SourceSelection/StreamSelector";
+import { FileSelector } from "@/pages/SourceSelection/FileSelector";
 
 /**
  *
@@ -50,52 +57,36 @@ export const App = () => {
     };
   }, [connectSocket, disconnectSocket]);
 
-  const theme = createTheme({
-    palette: {
-      mode: "dark", // This sets the overall theme to dark mode
-      primary: {
-        main: "#1a73e8", // Change this to your preferred primary color
-      },
-      secondary: {
-        main: "#f4f4f4", // Light color for secondary elements
-      },
-      background: {
-        default: "#333", // Background color
-        paper: "#424242", // Background color for Paper components
-      },
-      text: {
-        primary: "#f4f4f4", // Text color
-        secondary: "#cccccc", // Slightly lighter text color
-      },
-    },
-    typography: {
-      fontFamily: '"Figtree", sans-serif', // Use the Figtree font globally
-    },
-  });
-
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-
       <Router>
-        <div className={styles.appContainer}>
+        <Stack height="100vh" width="100vw" overflow="hidden">
           <AppBar />
-          <div className={styles.appContent}>
+          <Box
+            sx={{
+              height: "100%",
+              overflow: "auto",
+              width: "100%",
+              p: 0,
+              m: 0,
+            }}
+          >
             <Routes>
-              <Route path="/" element={<Navigate to="/source" replace />} />
-              <Route
-                path="/source/"
-                element={<Navigate to="/source/file" replace />}
-              />
-              <Route exact path="/source/*" element={<SourceSelection />} />
-              <Route exact path="/channels" element={<Channels />} />
-              <Route exact path="/settings" element={<Settings />} />
-              <Route exact path="/dashboard" element={<Dashboard />} />
-              <Route exact path="/decoding" element={<Dashboard />} />
+              <Route index element={<Navigate to="/source" replace />} />
+              <Route path="source" element={<SourceSelection />}>
+                <Route index element={<Navigate to="/source/file" replace />} />
+                <Route path="file" element={<FileSelector />} />
+                <Route path="lsl" element={<StreamSelector />} />
+              </Route>
+              <Route path="channels" element={<Channels />} />
+              <Route path="settings" element={<Settings />} />
+              <Route path="dashboard" element={<Dashboard />} />
+              <Route path="decoding" element={<Decoding />} />
             </Routes>
-          </div>
+          </Box>
           <StatusBar />
-        </div>
+        </Stack>
       </Router>
     </ThemeProvider>
   );

gui_dev/src/components/AppBar.jsx

@@ -0,0 +1,66 @@
+import { useState } from "react";
+import { WindowButtons } from "./WindowButtons";
+import { AppInfoModal } from "@/components";
+import { Button, Stack, Typography } from "@mui/material";
+import { Link, useLocation } from "react-router-dom";
+import {
+  Dataset,
+  Settings,
+  Dashboard,
+  BarChart,
+  Dvr,
+} from "@mui/icons-material";
+import { useWebviewStore } from "@/stores";
+
+const ToolbarButton = ({ to, label, icon }) => {
+  const location = useLocation();
+  const isSelected = location.pathname.includes(to);
+  return (
+    <Button
+      component={Link}
+      to={isSelected ? null : to}
+      startIcon={icon}
+      sx={isSelected ? { color: "primary.main" } : { color: "text.primary" }}
+    >
+      {label}
+    </Button>
+  );
+};
+
+const Toolbar = () => (
+  <Stack direction="row" justifyContent="space-around" p={0.5}>
+    <ToolbarButton to="/source" icon={<Dataset />} label="Source Selection" />
+    <ToolbarButton to="/channels" icon={<Dvr />} label="Channels" />
+    <ToolbarButton to="/settings" icon={<Settings />} label="Settings" />
+    <ToolbarButton to="/dashboard" icon={<Dashboard />} label="Dashboard" />
+    <ToolbarButton to="/decoding" icon={<BarChart />} label="Decoding" />
+  </Stack>
+);
+
+export const AppBar = () => {
+  // In your JSX:
+  const { isWebView } = useWebviewStore((state) => state.isWebView);
+  const [showModal, setShowModal] = useState(false);
+
+  return (
+    <Stack
+      className="pywebview-drag-region"
+      direction="row"
+      justifyContent="space-between"
+      borderBottom="2px solid"
+      borderColor="background.level3"
+      bgcolor="background.paper"
+    >
+      <Typography
+        onClick={() => setShowModal(true)}
+        variant="h4"
+        sx={{ cursor: "pointer", ml: 2, "&:hover": { color: "primary.main" } }}
+      >
+        PyNeuromodulation
+      </Typography>
+      <Toolbar />
+      {isWebView && <WindowButtons />}
+      <AppInfoModal open={showModal} onClose={() => setShowModal(false)} />
+    </Stack>
+  );
+};