neuromodulation · toni-neurosc · Sep 19, 2024 · Jul 10, 2024 · Jul 11, 2024 · Jul 22, 2024
diff --git a/.gitignore b/.gitignore
@@ -191,6 +191,17 @@ out_per
 # Profiler files
 /*.prof
 /profiling/*
-
+# Test output
+test_data/
+# various lock files
+package-lock.json
+package-lock.json.bak
+uv.lock
+# temporarily ignore the frontend build
+/gui_dev/dist
+/gui/frontend
+# Node modules
 gui_dev/node_modules/*
-test/data/*
+
+# LSL log file
+lsllog.txt
diff --git a/gui_dev/.eslintrc.cjs b/gui_dev/.eslintrc.cjs
@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/gui_dev/.gitattributes b/gui_dev/.gitattributes
@@ -0,0 +1,3 @@
+*.lockb binary diff=lockb
+*.lockb diff=lockb
+*.lockb textconv=bun
diff --git a/gui_dev/.gitignore b/gui_dev/.gitignore
@@ -0,0 +1,17 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# JS
+node_modules
+dist
+dist-ssr
+*.local
+
+# Dev-scripts
+gui_startup.py
diff --git a/gui_dev/bun.lockb b/gui_dev/bun.lockb
diff --git a/gui_dev/eslint.config.js b/gui_dev/eslint.config.js
@@ -0,0 +1,51 @@
+import globals from "globals";
+import js from "@eslint/js";
+import jsdoc from "eslint-plugin-jsdoc";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import reactCompiler from "eslint-plugin-react-compiler";
+import babelParser from "@babel/eslint-parser";
+
+export default [
+  js.configs.recommended,
+  jsdoc.configs["flat/recommended-typescript-flavor"],
+  { files: ["**/*.{js,mjs,cjs,jsx}"] },
+  { languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },
+  { languageOptions: { globals: globals.browser } },
+  {
+    files: ["**/*.{js,jsx,mjs,cjs,ts,tsx}"],
+    plugins: {
+      jsdoc,
+      react,
+      reactHooks,
+      "react-refresh": reactRefresh,
+      "react-compiler": reactCompiler,
+    },
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      parser: babelParser,
+      parserOptions: {
+        requireConfigFile: false,
+        babelOptions: {
+          babelrc: false,
+          configFile: false,
+          presets: ["@babel/preset-env", "@babel/preset-react"],
+        },
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    rules: {
+      "react/jsx-uses-react": "error",
+      "react/jsx-uses-vars": "error",
+    },
+    settings: {
+      react: {
+        version: "19",
+      },
+    },
+  },
+];
diff --git a/gui_dev/index.html b/gui_dev/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/charite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PyNeuromodulation</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/gui_dev/jsconfig.json b/gui_dev/jsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "target": "ES6",
+    "checkJs": true,
+    "module": "ES6",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "jsx": "react-jsx"
+  }
+}
diff --git a/gui_dev/package.json b/gui_dev/package.json
@@ -0,0 +1,43 @@
+{
+  "license": "MIT",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "latest",
+    "@mui/material": "latest",
+    "immer": "^10.1.1",
+    "plotly.js-basic-dist-min": "^2.35.2",
+    "react": "next",
+    "react-dom": "next",
+    "react-icons": "^5.3.0",
+    "react-router-dom": "^6.26.2",
+    "zustand": "next"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/eslint-parser": "^7.25.1",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
+    "@eslint/compat": "^1.1.1",
+    "@vitejs/plugin-react": "^4.3.2",
+    "@welldone-software/why-did-you-render": "^8.0.3",
+    "babel-plugin-react-compiler": "latest",
+    "eslint": "^9.11.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jsdoc": "^50.3.1",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react-compiler": "latest",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.12",
+    "prettier": "^3.3.3",
+    "vite": "^5.4.8"
+  }
+}
diff --git a/gui_dev/public/charite.svg b/gui_dev/public/charite.svg
diff --git a/gui_dev/scripts/wdyr.js b/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,
+  });
+}
diff --git a/gui_dev/src/App.jsx b/gui_dev/src/App.jsx
@@ -0,0 +1,90 @@
+import { useEffect } from "react";
+import {
+  useSocketStore,
+  useFetchSettings,
+  useInitPyWebView,
+  useFetchAppInfo,
+} from "@/stores";
+import {
+  BrowserRouter as Router,
+  Route,
+  Routes,
+  Navigate,
+} from "react-router-dom";
+import { Box, Stack, ThemeProvider } from "@mui/material";
+import CssBaseline from "@mui/material/CssBaseline";
+import { AppBar, StatusBar } from "@/components";
+import {
+  Dashboard,
+  SourceSelection,
+  Channels,
+  Settings,
+  Decoding,
+} from "@/pages";
+import { theme } from "./theme";
+import { StreamSelector } from "@/pages/SourceSelection/StreamSelector";
+import { FileSelector } from "@/pages/SourceSelection/FileSelector";
+
+/**
+ *
+ * @returns {JSX.Element} The rendered App component
+ */
+export const App = () => {
+  // Get settings from backend on start-up and check for PyWebView
+  const initPyWebView = useInitPyWebView();
+  const fetchSettingsWithDelay = useFetchSettings();
+  const fetchAppInfo = useFetchAppInfo();
+
+  useEffect(() => {
+    fetchSettingsWithDelay();
+    initPyWebView();
+    fetchAppInfo();
+  }, [fetchSettingsWithDelay, initPyWebView, fetchAppInfo]);
+
+  // Connect to web-socket
+  const connectSocket = useSocketStore((state) => state.connectSocket);
+  const disconnectSocket = useSocketStore((state) => state.disconnectSocket);
+
+  useEffect(() => {
+    console.log("Connecting socket from App component...");
+    connectSocket();
+    return () => {
+      console.log("Disconnecting socket from App component...");
+      disconnectSocket();
+    };
+  }, [connectSocket, disconnectSocket]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Router>
+        <Stack height="100vh" width="100vw" overflow="hidden">
+          <AppBar />
+          <Box
+            sx={{
+              height: "100%",
+              overflow: "auto",
+              width: "100%",
+              p: 0,
+              m: 0,
+            }}
+          >
+            <Routes>
+              <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>
+          </Box>
+          <StatusBar />
+        </Stack>
+      </Router>
+    </ThemeProvider>
+  );
+};
diff --git a/gui_dev/src/assets/fonts/figtree/Figtree-Italic-VariableFont_wght.ttf b/gui_dev/src/assets/fonts/figtree/Figtree-Italic-VariableFont_wght.ttf
diff --git a/gui_dev/src/assets/fonts/figtree/Figtree-VariableFont_wght.ttf b/gui_dev/src/assets/fonts/figtree/Figtree-VariableFont_wght.ttf