Changes to Settings page

gui_dev/package.json

@@ -20,7 +20,7 @@
     "react-dom": "next",
     "react-icons": "^5.3.0",
     "react-plotly.js": "^2.6.0",
-    "react-router-dom": "^6.28.0",
+    "react-router-dom": "^7.0.1",
     "zustand": "latest"
   },
   "devDependencies": {

gui_dev/src/App.jsx

@@ -45,8 +45,6 @@ export const App = () => {
   const connectSocket = useSocketStore((state) => state.connectSocket);
   const disconnectSocket = useSocketStore((state) => state.disconnectSocket);
 
-  connectSocket();
-
   useEffect(() => {
     console.log("Connecting socket from App component...");
     connectSocket();

gui_dev/src/components/FileBrowser/FileBrowser.jsx

@@ -1,5 +1,5 @@
 import { useReducer, useEffect } from "react";
-import { getBackendURL } from "@/utils/getBackendURL";
+import { getBackendURL } from "@/utils";
 import {
   Box,
   Button,
@@ -36,7 +36,7 @@ import {
 import { QuickAccessSidebar } from "./QuickAccess";
 import { FileManager } from "@/utils/FileManager";
 
-const fileManager = new FileManager("");
+const fileManager = new FileManager(getBackendURL("/api/files"));
 
 const ALLOWED_EXTENSIONS = [".npy", ".vhdr", ".fif", ".edf", ".bdf"];
 

gui_dev/src/components/FileBrowser/QuickAccess.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { getBackendURL } from "@/utils/getBackendURL";
+import { getBackendURL } from "@/utils";
 import {
   Paper,
   Typography,

gui_dev/src/components/StatusBar/StatusBar.jsx

@@ -2,12 +2,14 @@ import { ResizeHandle } from "./ResizeHandle";
 import { SocketStatus } from "./SocketStatus";
 import { WebviewStatus } from "./WebviewStatus";
 
-import { useWebviewStore } from "@/stores";
-
+import { useUiStore, useWebviewStore } from "@/stores";
 import { Stack } from "@mui/material";
 
 export const StatusBar = () => {
-  const { isWebView } = useWebviewStore((state) => state.isWebView);
+  const isWebView = useWebviewStore((state) => state.isWebView);
+  const getStatusBarContent = useUiStore((state) => state.getStatusBarContent);
+
+  const StatusBarContent = getStatusBarContent();
 
   return (
     <Stack
@@ -17,8 +19,11 @@ export const StatusBar = () => {
       bgcolor="background.level1"
       borderTop="2px solid"
       borderColor="background.level3"
+      height="2rem"
     >
-      <WebviewStatus />
+      {StatusBarContent && <StatusBarContent />}
+
+      {/* <WebviewStatus /> */}
       {/* Current experiment */}
       {/* Current stream */}
       {/* Current activity */}

gui_dev/src/components/TitledBox.jsx

@@ -1,4 +1,4 @@
-import { Container } from "@mui/material";
+import { Box, Container } from "@mui/material";
 
 /**
  * Component that uses the Box component to render an HTML fieldset element
@@ -13,14 +13,14 @@ export const TitledBox = ({
   children,
   ...props
 }) => (
-  <Container
+  <Box
     component="fieldset"
     {...props}
     sx={{
       borderRadius: 5,
       border: "1px solid #555",
       backgroundColor: "#424242",
-      padding: 2,
+      padding: 1,
       width: "100%",
       gap: 2,
       display: "flex",
@@ -31,5 +31,5 @@ export const TitledBox = ({
   >
     <legend>{title}</legend>
     {children}
-  </Container>
+  </Box>
 );

gui_dev/src/main.jsx

@@ -1,7 +1,15 @@
+// import { scan } from "react-scan";
+// scan({
+//   enabled: true,
+//   log: true, // logs render info to console
+// });
+
 import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
 import { App } from "./App.jsx";
 
+// Set up react-scan
+
 // Ignore React 19 warning about accessing element.ref
 const originalConsoleError = console.error;
 console.error = (message, ...messageArgs) => {