Setup biome.js and remove runtime errors

.github/workflows/biome.yml

@@ -0,0 +1,17 @@
+name: Check JS/TS/TSX/JSX format
+
+on: [push, pull_request]
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
+        with:
+          version: 1.8.3
+
+      - name: Run Biome format check
+        working-directory: applications/visualizer/frontend
+        run: biome format .

.github/workflows/black.yml

@@ -1,4 +1,4 @@
-name: Python Lint
+name: Python Format
 
 on: [push, pull_request]
 

applications/visualizer/frontend/additional.d.ts

@@ -1,6 +1,6 @@
-declare module '*.svg' {
-    import React = require('react');
-    export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
-    const src: string;
-    export default src;
-}
+declare module "*.svg" {
+  import React = require("react");
+  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}

applications/visualizer/frontend/package.json

@@ -6,9 +6,10 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "lint-fix": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
     "preview": "vite preview",
+    "format": "biome format --write .",
+    "lint": "biome lint .",
+    "lint-fix": "biome lint --write .",
     "generate-client": "openapi --input ../backend/openapi/openapi.json --output ./src/rest --useOptions --useUnionTypes --client xhr",
     "start": "DOMAIN=http://localhost:8000 vite",
     "start:dev": "DOMAIN=https://visualizer.celegans.metacell.us vite",
@@ -20,32 +21,29 @@
     "@metacell/geppetto-meta-client": "^1.2.8",
     "@metacell/geppetto-meta-core": "^1.2.8",
     "@metacell/geppetto-meta-ui": "^1.2.8",
-    "@mui/icons-material": "^5.15.15",
-    "@mui/material": "^5.15.15",
+    "@mui/base": "^5.0.0-beta.40",
+    "@mui/icons-material": "^5.16.4",
+    "@mui/material": "^5.16.4",
     "@react-three/drei": "^9.105.4",
     "@react-three/fiber": "^8.16.2",
     "@reduxjs/toolkit": "^2.2.3",
     "@types/cytoscape": "^3.21.1",
-    "@types/three": "^0.164.0",
+    "@types/three": "^0.166.0",
     "cytoscape": "^3.29.2",
     "cytoscape-dagre": "^2.5.0",
     "cytoscape-fcose": "^2.2.0",
     "file-saver": "^2.0.5",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-color": "^2.19.3",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-redux": "^9.1.1",
-    "three": "^0.163.0"
+    "three": "^0.166.1"
   },
   "devDependencies": {
+    "@biomejs/biome": "1.8.3",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.6",
     "openapi-typescript-codegen": "^0.29.0",
     "sass": "^1.75.0",
     "typescript": "^5.2.2",

applications/visualizer/frontend/src/App.tsx

@@ -1,48 +1,42 @@
-import { Provider } from "react-redux";
-import { ThemeProvider } from "@mui/material/styles";
 import { Box, CssBaseline } from "@mui/material";
+import { ThemeProvider } from "@mui/material/styles";
+import { Provider } from "react-redux";
 import theme from "./theme/index.tsx";
 import "./App.css";
-import { useGlobalContext } from "./contexts/GlobalContext.tsx";
 import AppLauncher from "./components/AppLauncher.tsx";
 import WorkspaceComponent from "./components/WorkspaceComponent.tsx";
+import { useGlobalContext } from "./contexts/GlobalContext.tsx";
 import { ViewMode } from "./models";
 
 function App() {
-    const {
-        workspaces,
-        currentWorkspaceId,
-        viewMode,
-        selectedWorkspacesIds,
-    } = useGlobalContext();
-
-
-    const hasLaunched = currentWorkspaceId != undefined
-
-    return (
-        <>
-            <ThemeProvider theme={theme}>
-                <CssBaseline />
-                {hasLaunched ? (
-                    <Box className={"layout-manager-container"}>
-                        {viewMode === ViewMode.Compare ?
-                            Array.from(selectedWorkspacesIds).map(id => (
-                                <Provider key={id} store={workspaces[id].store}>
-                                    <WorkspaceComponent />
-                                </Provider>
-                            ))
-                            :
-                            <Provider store={workspaces[currentWorkspaceId].store}>
-                                <WorkspaceComponent />
-                            </Provider>
-                        }
+  const { workspaces, currentWorkspaceId, viewMode, selectedWorkspacesIds } = useGlobalContext();
 
-                    </Box>
+  const hasLaunched = currentWorkspaceId !== undefined;
 
-                ) : <AppLauncher />}
-            </ThemeProvider>
-        </>
-    )
+  return (
+    <>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        {hasLaunched ? (
+          <Box className={"layout-manager-container"}>
+            {viewMode === ViewMode.Compare ? (
+              Array.from(selectedWorkspacesIds).map((id) => (
+                <Provider key={id} store={workspaces[id].store}>
+                  <WorkspaceComponent />
+                </Provider>
+              ))
+            ) : (
+              <Provider store={workspaces[currentWorkspaceId].store}>
+                <WorkspaceComponent />
+              </Provider>
+            )}
+          </Box>
+        ) : (
+          <AppLauncher />
+        )}
+      </ThemeProvider>
+    </>
+  );
 }
 
 export default App;