From 9af82721c0b58b3220935049b04ced4beb1e9c34 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Mon, 9 Sep 2024 08:00:48 +0530
Subject: [PATCH] feat: group runs of same recording

---
 src/components/molecules/RunsTable.tsx | 95 +++++++++++++++-----------
 1 file changed, 55 insertions(+), 40 deletions(-)

diff --git a/src/components/molecules/RunsTable.tsx b/src/components/molecules/RunsTable.tsx
index d6489cff..578f8140 100644
--- a/src/components/molecules/RunsTable.tsx
+++ b/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" >
-          <TableHead>
-            <TableRow>
-              <TableCell />
-              {columns.map((column) => (
-                <TableCell
-                  key={column.id}
-                  align={column.align}
-                  style={{ minWidth: column.minWidth }}
-                >
-                  {column.label}
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.length !== 0 ? rows
-                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                .map((row, index) =>
-                  <CollapsibleRow
-                    row={row}
-                    handleDelete={handleDelete}
-                    key={`row-${row.id}`}
-                    isOpen={runId === row.runId && runningRecordingName === row.name}
-                    currentLog={currentInterpretationLog}
-                    abortRunHandler={abortRunHandler}
-                    runningRecordingName={runningRecordingName}
-                  />
-                )
-              : null }
-          </TableBody>
-        </Table>
+        {Object.entries(groupedRows).map(([name, group]) => (
+          <Accordion key={name}>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+              <Typography variant="h6">{name}</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              <Table stickyHeader aria-label="sticky table">
+                <TableHead>
+                  <TableRow>
+                    <TableCell />
+                    {columns.map((column) => (
+                      <TableCell
+                        key={column.id}
+                        align={column.align}
+                        style={{ minWidth: column.minWidth }}
+                      >
+                        {column.label}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {group.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => (
+                    <CollapsibleRow
+                      row={row}
+                      handleDelete={handleDelete}
+                      key={`row-${row.id}`}
+                      isOpen={runId === row.runId && runningRecordingName === row.name}
+                      currentLog={currentInterpretationLog}
+                      abortRunHandler={abortRunHandler}
+                      runningRecordingName={runningRecordingName}
+                    />
+                  ))}
+                </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>
   );
-}
+};