Experiment viewer interface update

cypress/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "types": ["cypress", "node"]
+  },
+  "include": ["./**/*.ts", "./**/*.tsx"]
+}

package.json

@@ -74,8 +74,8 @@
     "build": "vite build",
     "build:standalone": "cross-env BUNDLE_REACT=true vite build",
     "preview": "vite preview --port 5001",
-    "test": "react-scripts test --testPathIgnorePatterns=src/h5web/ --env=jsdom --coverage --watchAll=false",
-    "test:watch": "react-scripts test --env=jsdom --watch",
+    "test": "vitest run --coverage",
+    "test:watch": "vitest",
     "serve:build": "yarn build && vite preview --port 5001",
     "serve:backend": "node server/server.js",
     "analyze": "yarn build && source-map-explorer build/main.*",
@@ -100,22 +100,14 @@
     "not ie <= 11",
     "not op_mini all"
   ],
-  "jest": {
-    "collectCoverageFrom": [
-      "src/**/*.{tsx,js,jsx}",
-      "!src/index.tsx",
-      "!src/serviceWorker.ts",
-      "!src/setupTests.js",
-      "!src/testbed/**/*"
-    ]
-  },
   "devDependencies": {
     "@cypress/react": "^7.0.3",
     "@cypress/webpack-dev-server": "^3.11.0",
     "@types/react-router-dom": "5.3.3",
     "@typescript-eslint/eslint-plugin": "8.16.0",
     "@typescript-eslint/parser": "8.16.0",
     "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^3.2.4",
     "cross-env": "^7.0.3",
     "cypress": "^13.16.0",
     "cypress-real-events": "^1.13.0",
@@ -129,7 +121,8 @@
     "lint-staged": "15.2.10",
     "prettier": "3.4.1",
     "serve": "14.2.4",
-    "vite": "^6.4.2"
+    "vite": "^6.4.2",
+    "vitest": "^3.2.4"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/components/experimentViewer/ExperimentSearch.tsx

@@ -9,6 +9,7 @@ import {
   ToggleButtonGroup,
   ToggleButton,
 } from '@mui/material';
+import { alpha, useTheme } from '@mui/material/styles';
 import SearchIcon from '@mui/icons-material/Search';
 import ClearIcon from '@mui/icons-material/Clear';
 import { instruments } from '../../lib/instrumentData';
@@ -30,6 +31,7 @@ const ExperimentSearch: React.FC<ExperimentSearchProps> = ({
   isLoading = false,
   isSearchActive = false,
 }): JSX.Element => {
+  const theme = useTheme();
   const [selectedInstrument, setSelectedInstrument] = useState<string | null>(initialInstrument || null);
   const [experimentNumber, setExperimentNumber] = useState<string>(
     initialExperimentNumber ? initialExperimentNumber.toString() : ''
@@ -55,7 +57,6 @@ const ExperimentSearch: React.FC<ExperimentSearchProps> = ({
 
   // Get instrument names for autocomplete
   const instrumentNames = instruments.map((instrument) => instrument.name);
-
   return (
     <Paper elevation={2} sx={{ p: 2, mb: 2 }}>
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
@@ -69,20 +70,19 @@ const ExperimentSearch: React.FC<ExperimentSearchProps> = ({
           options={instrumentNames}
           sx={{ width: 200 }}
           size="small"
-          renderInput={(params) => <TextField {...params} label="Instrument" placeholder="Select instrument" />}
+          renderInput={(params) => <TextField {...params} label="Instrument" />}
           disabled={isLoading}
         />
 
         <TextField
-          label="Experiment Number"
+          label="Experiment number"
           value={experimentNumber}
           slotProps={{ htmlInput: { min: 0 } }}
           onChange={(e) => setExperimentNumber(e.target.value)}
           onKeyPress={handleKeyPress}
           type="number"
           size="small"
           sx={{ width: 175 }}
-          placeholder="Enter number"
           disabled={isLoading}
         />
 
@@ -102,7 +102,22 @@ const ExperimentSearch: React.FC<ExperimentSearchProps> = ({
             startIcon={<ClearIcon />}
             onClick={handleClear}
             disabled={isLoading}
-            sx={{ height: 40 }}
+            sx={{
+              height: 40,
+              color: theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.text.primary,
+              borderColor:
+                theme.palette.mode === 'dark'
+                  ? alpha(theme.palette.common.white, 0.28)
+                  : alpha(theme.palette.text.primary, 0.18),
+              bgcolor:
+                theme.palette.mode === 'dark'
+                  ? alpha(theme.palette.common.white, 0.06)
+                  : alpha(theme.palette.background.paper, 0.95),
+              '&:hover': {
+                borderColor: theme.palette.primary.main,
+                bgcolor: alpha(theme.palette.primary.main, theme.palette.mode === 'dark' ? 0.18 : 0.08),
+              },
+            }}
           >
             Clear
           </Button>
@@ -121,23 +136,25 @@ const ExperimentSearch: React.FC<ExperimentSearchProps> = ({
           onChange={(_, newLimit) => newLimit !== null && setResultLimit(newLimit)}
           size="small"
           disabled={isLoading}
+          sx={{
+            borderRadius: 0,
+            '& .MuiToggleButtonGroup-grouped': {
+              borderRadius: 0,
+              width: 56,
+              minWidth: 56,
+              height: 36,
+              px: 0,
+              justifyContent: 'center',
+              fontVariantNumeric: 'tabular-nums',
+            },
+          }}
         >
           <ToggleButton value={10}>10</ToggleButton>
           <ToggleButton value={25}>25</ToggleButton>
           <ToggleButton value={50}>50</ToggleButton>
           <ToggleButton value={100}>100</ToggleButton>
         </ToggleButtonGroup>
       </Box>
-
-      {isSearchActive && (selectedInstrument || experimentNumber) && (
-        <Box sx={{ mt: 1 }}>
-          <Typography variant="body2" color="text.secondary">
-            Searching for: {selectedInstrument && <strong>Instrument: {selectedInstrument}</strong>}
-            {selectedInstrument && experimentNumber && ' | '}
-            {experimentNumber && <strong>Experiment: {experimentNumber}</strong>}
-          </Typography>
-        </Box>
-      )}
     </Paper>
   );
 };

src/components/experimentViewer/FileCard.tsx

@@ -196,7 +196,7 @@ const FileCard: React.FC<FileCardProps> = ({
                 {/* Mode toggle */}
                 <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
                   <Typography variant="body2" fontWeight="500">
-                    Slice Selection (2D → 1D)
+                    Slice selection (2D → 1D)
                   </Typography>
                   <ToggleButtonGroup
                     size="small"

src/components/experimentViewer/FileTree.tsx

@@ -100,7 +100,7 @@ const FileTree: React.FC<FileTreeProps> = ({
     >
       <Box sx={{ mb: 2 }}>
         <Typography variant="h5" fontWeight="bold" sx={{ mb: 1 }}>
-          File Tree
+          File tree
         </Typography>
 
         {/* Settings */}