feat: group runs of same recording

src/components/molecules/RunsTable.tsx

@@ -12,6 +12,8 @@ import { useGlobalInfoStore } from "../../context/globalInfo";
 import { getStoredRuns } from "../../api/storage";
 import { RunSettings } from "./RunSettings";
 import { CollapsibleRow } from "./ColapsibleRow";
+import { Accordion, AccordionSummary, AccordionDetails, Typography } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 interface Column {
   id: 'status' | 'name' | 'startedAt' | 'finishedAt' | 'duration' | 'task' | 'runId' | 'delete';
@@ -86,68 +88,81 @@ export const RunsTable = (
     } else {
       console.log('No runs found.');
     }
-  }
+  };
 
-  useEffect( () => {
+  useEffect(() => {
     if (rows.length === 0 || rerenderRuns) {
       fetchRuns();
       setRerenderRuns(false);
     }
-
   }, [rerenderRuns]);
 
-
   const handleDelete = () => {
     setRows([]);
     notify('success', 'Run deleted successfully');
     fetchRuns();
-  }
+  };
+
+  // Group runs by recording name
+  const groupedRows = rows.reduce((acc, row) => {
+    if (!acc[row.name]) {
+      acc[row.name] = [];
+    }
+    acc[row.name].push(row);
+    return acc;
+  }, {} as Record<string, Data[]>);
 
   return (
     <React.Fragment>
       <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}>
-        <Table stickyHeader aria-label="sticky table" >
+        {Object.entries(groupedRows).map(([name, group]) => (
-          <TableHead>
+          <Accordion key={name}>
-            <TableRow>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-              <TableCell />
+              <Typography variant="h6">{name}</Typography>
-              {columns.map((column) => (
+            </AccordionSummary>
-                <TableCell
+            <AccordionDetails>
-                  key={column.id}
+              <Table stickyHeader aria-label="sticky table">
-                  align={column.align}
+                <TableHead>
-                  style={{ minWidth: column.minWidth }}
+                  <TableRow>
-                >
+                    <TableCell />
-                  {column.label}
+                    {columns.map((column) => (
-                </TableCell>
+                      <TableCell
-              ))}
+                        key={column.id}
-            </TableRow>
+                        align={column.align}
-          </TableHead>
+                        style={{ minWidth: column.minWidth }}
-          <TableBody>
+                      >
-            {rows.length !== 0 ? rows
+                        {column.label}
-                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                      </TableCell>
-                .map((row, index) =>
+                    ))}
-                  <CollapsibleRow
+                  </TableRow>
-                    row={row}
+                </TableHead>
-                    handleDelete={handleDelete}
+                <TableBody>
-                    key={`row-${row.id}`}
+                  {group.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => (
-                    isOpen={runId === row.runId && runningRecordingName === row.name}
+                    <CollapsibleRow
-                    currentLog={currentInterpretationLog}
+                      row={row}
-                    abortRunHandler={abortRunHandler}
+                      handleDelete={handleDelete}
-                    runningRecordingName={runningRecordingName}
+                      key={`row-${row.id}`}
-                  />
+                      isOpen={runId === row.runId && runningRecordingName === row.name}
-                )
+                      currentLog={currentInterpretationLog}
-              : null }
+                      abortRunHandler={abortRunHandler}
-          </TableBody>
+                      runningRecordingName={runningRecordingName}
-        </Table>
+                    />
+                  ))}
+                </TableBody>
+              </Table>
+            </AccordionDetails>
+          </Accordion>
+        ))}
       </TableContainer>
       <TablePagination
         rowsPerPageOptions={[10, 25, 50]}
         component="div"
-        count={rows ? rows.length : 0}
+        count={rows.length}
         rowsPerPage={rowsPerPage}
         page={page}
         onPageChange={handleChangePage}
         onRowsPerPageChange={handleChangeRowsPerPage}
       />
-  </React.Fragment>
+    </React.Fragment>
   );
-}
+};