From 029bc704774b814a402c4aa315c60bea85f785d3 Mon Sep 17 00:00:00 2001
From: Jim O'Donnell <james.odonnell@dtc.ox.ac.uk>
Date: Wed, 20 Nov 2024 15:36:28 +0000
Subject: [PATCH] fix(frontend): TypeScript errors in Results (#570)

---
 frontend-v2/src/features/results/Results.tsx  | 10 +++---
 .../src/features/results/ResultsTab.tsx       | 28 +++++++++++-----
 .../src/features/results/ResultsTable.tsx     | 32 ++++++++++++-------
 3 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/frontend-v2/src/features/results/Results.tsx b/frontend-v2/src/features/results/Results.tsx
index c79d188b..49615b87 100644
--- a/frontend-v2/src/features/results/Results.tsx
+++ b/frontend-v2/src/features/results/Results.tsx
@@ -32,10 +32,8 @@ const Results: FC = () => {
     setTab(newValue);
   };
 
-  const handleTabRemove = async (table) => {
-    if (
-      window.confirm("Are you sure you want to delete the current Table?")
-    ) {
+  const handleTabRemove = async (table: Table) => {
+    if (window.confirm("Are you sure you want to delete the current Table?")) {
       const removedIndex = tables.map(({ id }) => id).indexOf(table.id);
       setTables(tables.filter(({ id }) => id !== table.id));
 
@@ -79,9 +77,9 @@ const Results: FC = () => {
                 key={table.id}
                 label={table.name}
                 {...a11yProps(index)}
-                sx={{ maxHeight: '48px', minHeight: 0}}
+                sx={{ maxHeight: "48px", minHeight: 0 }}
                 icon={
-                  index === 0 ? null : (
+                  index === 0 ? undefined : (
                     <IconButton
                       onClick={(e) => {
                         e.stopPropagation();
diff --git a/frontend-v2/src/features/results/ResultsTab.tsx b/frontend-v2/src/features/results/ResultsTab.tsx
index dfcf5963..76889d6f 100644
--- a/frontend-v2/src/features/results/ResultsTab.tsx
+++ b/frontend-v2/src/features/results/ResultsTab.tsx
@@ -31,6 +31,18 @@ export type RowData =
   | TimeInterval[]
   | VariableRead[];
 
+type Item =
+  | { name: string }
+  | Parameter
+  | (TimeInterval & { name: string })
+  | VariableRead;
+type RowFilter = {
+  filter: (event: SelectChangeEvent) => void;
+  value: number;
+  items: Item[];
+  label: string;
+};
+
 const ResultsTab: FC = () => {
   const { groups = [] } = useSubjectGroups();
   const { intervals } = useContext(SimulationContext);
@@ -102,8 +114,8 @@ const ResultsTab: FC = () => {
     setParameter(newValue);
   }
 
-  let rowFilter1;
-  let rowFilter2;
+  let rowFilter1: RowFilter | undefined;
+  let rowFilter2: RowFilter | undefined;
 
   const groupSelect = {
     filter: handleGroupChange,
@@ -155,23 +167,23 @@ const ResultsTab: FC = () => {
         <div>
           All Secondary PK parameters of all selected {var1} of{" "}
           {rowFilter1?.label?.toLowerCase()} &apos;
-          {rowFilter1?.items?.[rowFilter1?.value.toString()]?.name}&apos; and{" "}
+          {rowFilter1?.items?.[rowFilter1?.value]?.name}&apos; and{" "}
           {rowFilter2?.label.toLowerCase()} &apos;
-          {rowFilter2?.items?.[rowFilter2?.value.toString()]?.name}&apos;
+          {rowFilter2?.items?.[rowFilter2?.value]?.name}&apos;
         </div>
       );
     }
 
     const var1 =
       rowFilter1?.label === "Parameter"
-        ? rowFilter1?.items?.[rowFilter1?.value.toString()]?.name
-        : rowFilter2?.items?.[rowFilter2?.value.toString()]?.name;
+        ? rowFilter1?.items?.[rowFilter1?.value]?.name
+        : rowFilter2?.items?.[rowFilter2?.value]?.name;
     const var2 =
       rowFilter1?.label === "Parameter" ? rowFilter2?.label : rowFilter1?.label;
     const var3 =
       rowFilter1?.label === "Parameter"
-        ? rowFilter2?.items?.[rowFilter2?.value.toString()]?.name
-        : rowFilter1?.items?.[rowFilter1?.value.toString()]?.name;
+        ? rowFilter2?.items?.[rowFilter2?.value]?.name
+        : rowFilter1?.items?.[rowFilter1?.value]?.name;
 
     const desc1 = () => {
       if (var2 === "Interval") return "and time interval";
diff --git a/frontend-v2/src/features/results/ResultsTable.tsx b/frontend-v2/src/features/results/ResultsTable.tsx
index aa1f2d34..046d9573 100644
--- a/frontend-v2/src/features/results/ResultsTable.tsx
+++ b/frontend-v2/src/features/results/ResultsTable.tsx
@@ -20,31 +20,31 @@ import { getTableHeight } from "../../shared/calculateTableHeights";
 
 const RESULTS_TABLE_HEIGHTS = [
   {
-    minHeight: "1100",
+    minHeight: 1100,
     tableHeight: "70vh",
   },
   {
-    minHeight: "1000",
+    minHeight: 1000,
     tableHeight: "65vh",
   },
   {
-    minHeight: "900",
+    minHeight: 900,
     tableHeight: "60vh",
   },
   {
-    minHeight: "800",
+    minHeight: 800,
     tableHeight: "58vh",
   },
   {
-    minHeight: "700",
+    minHeight: 700,
     tableHeight: "53vh",
   },
   {
-    minHeight: "600",
+    minHeight: 600,
     tableHeight: "40vh",
   },
   {
-    minHeight: "500",
+    minHeight: 500,
     tableHeight: "40vh",
   },
 ];
@@ -55,9 +55,11 @@ const IntervalRow: FC<{
 }> = ({ header, values }) => {
   return (
     <TableRow>
-      <TableCell sx={{ textWrap: 'nowrap'}}  scope="row">{header}</TableCell>
+      <TableCell sx={{ textWrap: "nowrap" }} scope="row">
+        {header}
+      </TableCell>
       {values.map((value, i) => (
-        <TableCell  key={i}>{value}</TableCell>
+        <TableCell key={i}>{value}</TableCell>
       ))}
     </TableRow>
   );
@@ -127,13 +129,21 @@ export const ResultsTable: FC<ResultsTableProps> = ({
               : [];
 
     return (
-      <TableContainer sx={{ width: 'fit-content', maxWidth: '100%', maxHeight: getTableHeight({ steps: RESULTS_TABLE_HEIGHTS })}}>
+      <TableContainer
+        sx={{
+          width: "fit-content",
+          maxWidth: "100%",
+          maxHeight: getTableHeight({ steps: RESULTS_TABLE_HEIGHTS }),
+        }}
+      >
         <Table stickyHeader size="small">
           <TableHead>
             <TableRow>
               <TableCell>{rowColumn}</TableCell>
               {columnHeadings.map((column, i) => (
-                <TableCell sx={{ textWrap: 'nowrap' }} key={i}>{column}</TableCell>
+                <TableCell sx={{ textWrap: "nowrap" }} key={i}>
+                  {column}
+                </TableCell>
               ))}
             </TableRow>
           </TableHead>