Merge branch 'develop' into show-run

src/components/robot/RecordingsTable.tsx

@@ -189,23 +189,39 @@ export const RecordingsTable = ({
     setPage(0);
   }, []);
 
+  const parseDateString = (dateStr: string): Date => {
+    try {
+      if (dateStr.includes('PM') || dateStr.includes('AM')) {
+        return new Date(dateStr);
+      }
+      
+      return new Date(dateStr.replace(/(\d+)\/(\d+)\//, '$2/$1/'))
+    } catch {
+      return new Date(0);
+    }
+  };
+
   const fetchRecordings = useCallback(async () => {
     setIsLoading(true);
     try {
       const recordings = await getStoredRecordings();
       if (recordings) {
         const parsedRows = recordings
-          .map((recording: any, index: number) => {
+        .map((recording: any, index: number) => {
-            if (recording?.recording_meta) {
+          if (recording?.recording_meta) {
-              return {
+            const parsedDate = parseDateString(recording.recording_meta.createdAt);
-                id: index,
+            
-                ...recording.recording_meta,
+            return {
-                content: recording.recording
+              id: index,
-              };
+              ...recording.recording_meta,
-            }
+              content: recording.recording,
-            return null;
+              parsedDate
-          })
+            };
-          .filter(Boolean);
+          }
+          return null;
+        })
+        .filter(Boolean) 
+        .sort((a, b) => b.parsedDate.getTime() - a.parsedDate.getTime());
 
         setRecordings(parsedRows.map((recording) => recording.name));
         setRows(parsedRows);

src/components/run/RunsTable.tsx

@@ -70,6 +70,13 @@ interface RunsTableProps {
   runningRecordingName: string;
 }
 
+interface PaginationState {
+  [robotMetaId: string]: {
+    page: number;
+    rowsPerPage: number;
+  };
+}
+
 export const RunsTable: React.FC<RunsTableProps> = ({
   currentInterpretationLog,
   abortRunHandler,
@@ -94,6 +101,8 @@ export const RunsTable: React.FC<RunsTableProps> = ({
     return currentRobotMetaId === urlRobotMetaId;
   }, [urlRobotMetaId]);
 
+  const [accordionPage, setAccordionPage] = useState(0);
+  const [accordionsPerPage, setAccordionsPerPage] = useState(10);
   const [accordionSortConfigs, setAccordionSortConfigs] = useState<AccordionSortConfig>({});
 
   const handleSort = useCallback((columnId: keyof Data, robotMetaId: string) => {
@@ -122,27 +131,62 @@ export const RunsTable: React.FC<RunsTableProps> = ({
     [t]
   );
 
-  const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(10);
   const [rows, setRows] = useState<Data[]>([]);
   const [searchTerm, setSearchTerm] = useState('');
   const [isLoading, setIsLoading] = useState(true);
 
+  const [paginationStates, setPaginationStates] = useState<PaginationState>({});
+
   const { notify, rerenderRuns, setRerenderRuns } = useGlobalInfoStore();
 
   const handleAccordionChange = useCallback((robotMetaId: string, isExpanded: boolean) => {
     navigate(isExpanded ? `/runs/${robotMetaId}` : '/runs');
   }, [navigate]);
 
-  const handleChangePage = useCallback((event: unknown, newPage: number) => {
+  const handleAccordionPageChange = useCallback((event: unknown, newPage: number) => {
-    setPage(newPage);
+    setAccordionPage(newPage);
+  }, []);
+  
+  const handleAccordionsPerPageChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setAccordionsPerPage(+event.target.value);
+    setAccordionPage(0); 
   }, []);
 
-  const handleChangeRowsPerPage = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChangePage = useCallback((robotMetaId: string, newPage: number) => {
-    setRowsPerPage(+event.target.value);
+    setPaginationStates(prev => ({
-    setPage(0);
+      ...prev,
+      [robotMetaId]: {
+        ...prev[robotMetaId],
+        page: newPage
+      }
+    }));
   }, []);
 
+  const handleChangeRowsPerPage = useCallback((robotMetaId: string, newRowsPerPage: number) => {
+    setPaginationStates(prev => ({
+      ...prev,
+      [robotMetaId]: {
+        page: 0, // Reset to first page when changing rows per page
+        rowsPerPage: newRowsPerPage
+      }
+    }));
+  }, []);
+
+  const getPaginationState = useCallback((robotMetaId: string) => {
+    const defaultState = { page: 0, rowsPerPage: 10 };
+    
+    if (!paginationStates[robotMetaId]) {
+      setTimeout(() => {
+        setPaginationStates(prev => ({
+          ...prev,
+          [robotMetaId]: defaultState
+        }));
+      }, 0);
+      return defaultState;
+    }
+    return paginationStates[robotMetaId];
+  }, [paginationStates]);
+
   const debouncedSearch = useCallback((fn: Function, delay: number) => {
     let timeoutId: NodeJS.Timeout;
     return (...args: any[]) => {
@@ -154,7 +198,14 @@ export const RunsTable: React.FC<RunsTableProps> = ({
   const handleSearchChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     const debouncedSetSearch = debouncedSearch((value: string) => {
       setSearchTerm(value);
-      setPage(0);
+      setAccordionPage(0);
+      setPaginationStates(prev => {
+        const reset = Object.keys(prev).reduce((acc, robotId) => ({
+          ...acc,
+          [robotId]: { ...prev[robotId], page: 0 }
+        }), {});
+        return reset;
+      });
     }, 300);
     debouncedSetSearch(event.target.value);
   }, [debouncedSearch]);
@@ -209,18 +260,6 @@ export const RunsTable: React.FC<RunsTableProps> = ({
     return result;
   }, [rows, searchTerm]);
 
-  // Group filtered rows by robot meta id
-  const groupedRows = useMemo(() => 
-    filteredRows.reduce((acc, row) => {
-      if (!acc[row.robotMetaId]) {
-        acc[row.robotMetaId] = [];
-      }
-      acc[row.robotMetaId].push(row);
-      return acc;
-    }, {} as Record<string, Data[]>),
-    [filteredRows]
-  );
-
   const parseDateString = (dateStr: string): Date => {
     try {
       if (dateStr.includes('PM') || dateStr.includes('AM')) {
@@ -233,7 +272,37 @@ export const RunsTable: React.FC<RunsTableProps> = ({
     }
   };
 
+  const groupedRows = useMemo(() => {
+    const groupedData = filteredRows.reduce((acc, row) => {
+      if (!acc[row.robotMetaId]) {
+        acc[row.robotMetaId] = [];
+      }
+      acc[row.robotMetaId].push(row);
+      return acc;
+    }, {} as Record<string, Data[]>);
+  
+    Object.keys(groupedData).forEach(robotId => {
+      groupedData[robotId].sort((a, b) => 
+        parseDateString(b.startedAt).getTime() - parseDateString(a.startedAt).getTime()
+      );
+    });
+  
+    const robotEntries = Object.entries(groupedData).map(([robotId, runs]) => ({
+      robotId,
+      runs,
+      latestRunDate: parseDateString(runs[0].startedAt).getTime()
+    }));
+  
+    robotEntries.sort((a, b) => b.latestRunDate - a.latestRunDate);
+  
+    return robotEntries.reduce((acc, { robotId, runs }) => {
+      acc[robotId] = runs;
+      return acc;
+    }, {} as Record<string, Data[]>);
+  }, [filteredRows]);
+
   const renderTableRows = useCallback((data: Data[], robotMetaId: string) => {
+    const { page, rowsPerPage } = getPaginationState(robotMetaId);
     const start = page * rowsPerPage;
     const end = start + rowsPerPage;
 
@@ -267,7 +336,7 @@ export const RunsTable: React.FC<RunsTableProps> = ({
           urlRunId={urlRunId}
         />
       ));
-  }, [page, rowsPerPage, runId, runningRecordingName, currentInterpretationLog, abortRunHandler, handleDelete, accordionSortConfigs, urlRunId]);
+  }, [paginationStates, runId, runningRecordingName, currentInterpretationLog, abortRunHandler, handleDelete, accordionSortConfigs]);
 
   const renderSortIcon = useCallback((column: Column, robotMetaId: string) => {
     const sortConfig = accordionSortConfigs[robotMetaId];
@@ -321,83 +390,99 @@ export const RunsTable: React.FC<RunsTableProps> = ({
       </Box>
 
       <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}>
-        {Object.entries(groupedRows).map(([robotMetaId, data]) => (
+        {Object.entries(groupedRows)
-          <Accordion 
+          .slice(
-            key={robotMetaId} 
+            accordionPage * accordionsPerPage,
-            expanded={isAccordionExpanded(robotMetaId)}
+            accordionPage * accordionsPerPage + accordionsPerPage
-            onChange={(event, isExpanded) => handleAccordionChange(robotMetaId, isExpanded)}
+          )
-            TransitionProps={{ unmountOnExit: true }} // Optimize accordion rendering
+          .map(([robotMetaId, data]) => (
-          >
+            <Accordion 
-            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+              key={robotMetaId} 
-              <Typography variant="h6">{data[data.length - 1].name}</Typography>
+              onChange={(event, isExpanded) => handleAccordionChange(robotMetaId, isExpanded)}
-            </AccordionSummary>
+              TransitionProps={{ unmountOnExit: true }} // Optimize accordion rendering
-            <AccordionDetails>
+            >
-              <Table stickyHeader aria-label="sticky table">
+              <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-                <TableHead>
+                <Typography variant="h6">{data[data.length - 1].name}</Typography>
-                  <TableRow>
+              </AccordionSummary>
-                    <TableCell />
+              <AccordionDetails>
-                    {translatedColumns.map((column) => (
+                <Table stickyHeader aria-label="sticky table">
-                      <TableCell
+                  <TableHead>
-                        key={column.id}
+                    <TableRow>
-                        align={column.align}
+                      <TableCell />
-                        style={{ 
+                      {translatedColumns.map((column) => (
-                          minWidth: column.minWidth,
+                        <TableCell
-                          cursor: column.id === 'startedAt' || column.id === 'finishedAt' ? 'pointer' : 'default'
+                          key={column.id}
-                        }}
+                          align={column.align}
-                        onClick={() => {
+                          style={{ 
-                          if (column.id === 'startedAt' || column.id === 'finishedAt') {
+                            minWidth: column.minWidth,
-                            handleSort(column.id, robotMetaId);
+                            cursor: column.id === 'startedAt' || column.id === 'finishedAt' ? 'pointer' : 'default'
-                          }
+                          }}
-                        }}
+                          onClick={() => {
-                      >
+                            if (column.id === 'startedAt' || column.id === 'finishedAt') {
-                        <Tooltip 
+                              handleSort(column.id, robotMetaId);
-                          title={
-                            (column.id === 'startedAt' || column.id === 'finishedAt')
-                              ? t('runstable.sort_tooltip')
-                              : ''
-                          }
-                        >
-                          <Box sx={{ 
-                            display: 'flex', 
-                            alignItems: 'center', 
-                            gap: 1,
-                            '&:hover': {
-                              '& .sort-icon': {
-                                opacity: 1
-                              }
                             }
-                          }}>
+                          }}
-                            {column.label}
+                        >
-                            <Box className="sort-icon" sx={{ 
+                          <Tooltip 
-                              display: 'flex',
+                            title={
-                              alignItems: 'center',
+                              (column.id === 'startedAt' || column.id === 'finishedAt')
-                              opacity: accordionSortConfigs[robotMetaId]?.field === column.id ? 1 : 0.3,
+                                ? t('runstable.sort_tooltip')
-                              transition: 'opacity 0.2s'
+                                : ''
+                            }
+                          >
+                            <Box sx={{ 
+                              display: 'flex', 
+                              alignItems: 'center', 
+                              gap: 1,
+                              '&:hover': {
+                                '& .sort-icon': {
+                                  opacity: 1
+                                }
+                              }
                             }}>
-                              {renderSortIcon(column, robotMetaId)}
+                              {column.label}
+                              <Box className="sort-icon" sx={{ 
+                                display: 'flex',
+                                alignItems: 'center',
+                                opacity: accordionSortConfigs[robotMetaId]?.field === column.id ? 1 : 0.3,
+                                transition: 'opacity 0.2s'
+                              }}>
+                                {renderSortIcon(column, robotMetaId)}
+                              </Box>
                             </Box>
-                          </Box>
+                          </Tooltip>
-                        </Tooltip>
+                        </TableCell>
-                      </TableCell>
+                      ))}
-                    ))}
+                    </TableRow>
-                  </TableRow>
+                  </TableHead>
-                </TableHead>
+                  <TableBody>
-                <TableBody>
+                    {renderTableRows(data, robotMetaId)}
-                  {renderTableRows(data, robotMetaId)}
+                  </TableBody>
-                </TableBody>
+                </Table>
-              </Table>
+
-            </AccordionDetails>
+                <TablePagination
-          </Accordion>
+                  component="div"
-        ))}
+                  count={data.length}
+                  rowsPerPage={getPaginationState(robotMetaId).rowsPerPage}
+                  page={getPaginationState(robotMetaId).page}
+                  onPageChange={(_, newPage) => handleChangePage(robotMetaId, newPage)}
+                  onRowsPerPageChange={(event) => 
+                    handleChangeRowsPerPage(robotMetaId, +event.target.value)
+                  }
+                  rowsPerPageOptions={[10, 25, 50, 100]}
+                />
+              </AccordionDetails>
+            </Accordion>
+          ))}
       </TableContainer>
 
       <TablePagination
         component="div"
-        count={filteredRows.length}
+        count={Object.keys(groupedRows).length}
-        rowsPerPage={rowsPerPage}
+        page={accordionPage}
-        page={page}
+        rowsPerPage={accordionsPerPage}
-        onPageChange={handleChangePage}
+        onPageChange={handleAccordionPageChange}
-        onRowsPerPageChange={handleChangeRowsPerPage}
+        onRowsPerPageChange={handleAccordionsPerPageChange}
         rowsPerPageOptions={[10, 25, 50, 100]}
       />
     </React.Fragment>