refactor(frontend): Results table

- Change secondary parameters to take an interval, rather than an array index, in order to match how other table cell parameters are passed around. - Remove the unit selects from the `ResultsTable` component, so that units are set under Model > Secondary Parameters. - Only allow one selected time unit for all time intervals.
pkpdapp-team · Nov 27, 2024 · 396bef2 · 396bef2
1 parent 29f74ec
commit 396bef2
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 155 deletions.
diff --git a/frontend-v2/src/features/model/secondary/TimeIntervalsTable.tsx b/frontend-v2/src/features/model/secondary/TimeIntervalsTable.tsx
@@ -46,10 +46,12 @@ function useTimeUnits() {
   return hourUnit?.compatible_units || [];
 }
 
-function TimeUnitSelect({ interval, onChange }: TimeUnitSelectProps) {
+function TimeUnitSelect({ onChange }: TimeUnitSelectProps) {
   const defaultTimeUnit = 9; // set hours by default
+  const [intervals, setIntervals] = useModelTimeIntervals();
+  const interval = intervals[0];
   const [selectedUnit, setSelectedUnit] = useState(
-    interval.unit || defaultTimeUnit,
+    interval?.unit || defaultTimeUnit,
   );
   const timeUnits = useTimeUnits();
   const timeUnitOptions =
@@ -59,7 +61,7 @@ function TimeUnitSelect({ interval, onChange }: TimeUnitSelectProps) {
     const unit = timeUnits?.find((unit) => unit.id === event.target.value);
     if (unit) {
       setSelectedUnit(+unit.id);
-      onChange({ ...interval, unit: +unit.id });
+      setIntervals(intervals.map((i) => ({ ...i, unit: +unit.id })));
     }
   }
 
@@ -80,11 +82,20 @@ type IntervalRowProps = {
   interval: TimeIntervalRead;
   onDelete: () => void;
   onUpdate: (interval: TimeIntervalRead) => void;
+  editUnits: boolean;
 };
 
-function IntervalRow({ interval, onDelete, onUpdate }: IntervalRowProps) {
+function IntervalRow({
+  interval,
+  onDelete,
+  onUpdate,
+  editUnits = false,
+}: IntervalRowProps) {
   const [start, setStart] = useState(interval.start_time);
   const [end, setEnd] = useState(interval.end_time);
+  const units = useTimeUnits();
+  const intervalUnit = units?.find((unit) => +unit.id === interval.unit);
+
   function onChangeStart(event: React.ChangeEvent<HTMLInputElement>) {
     const newStartTime = parseFloat(event.target.value);
     setStart(newStartTime);
@@ -105,7 +116,11 @@ function IntervalRow({ interval, onDelete, onUpdate }: IntervalRowProps) {
         <TextField type="number" value={end} onChange={onChangeEnd} />
       </TableCell>
       <TableCell>
-        <TimeUnitSelect interval={interval} onChange={onUpdate} />
+        {editUnits ? (
+          <TimeUnitSelect interval={interval} onChange={onUpdate} />
+        ) : (
+          intervalUnit?.symbol
+        )}
       </TableCell>
       <TableCell>
         <IconButton onClick={onDelete}>
@@ -153,6 +168,7 @@ const TimeIntervalsTable: FC<TableProps> = (props) => {
 
   return (
     <>
+      <Button onClick={addInterval}>Add interval</Button>
       <Table {...props}>
         <TableHead>
           <TableCell>Start time</TableCell>
@@ -161,17 +177,17 @@ const TimeIntervalsTable: FC<TableProps> = (props) => {
           <TableCell>Remove</TableCell>
         </TableHead>
         <TableBody>
-          {intervals.map((interval) => (
+          {intervals.map((interval, index) => (
             <IntervalRow
               key={interval.start_time}
               interval={interval}
               onDelete={onDelete(interval.id)}
               onUpdate={onUpdate(interval.id)}
+              editUnits={index === 0}
             />
           ))}
         </TableBody>
       </Table>
-      <Button onClick={addInterval}>Add time interval</Button>
     </>
   );
 };

diff --git a/frontend-v2/src/features/results/ResultsTab.tsx b/frontend-v2/src/features/results/ResultsTab.tsx
@@ -1,6 +1,5 @@
 import { FC, useState } from "react";
 import {
-  Box,
   FormControl,
   InputLabel,
   MenuItem,
@@ -16,65 +15,6 @@ import { useConcentrationVariables } from "./useConcentrationVariables";
 import { useParameters, Parameter } from "./useParameters";
 import { ResultsTable } from "./ResultsTable";
 import { useModelTimeIntervals } from "../../hooks/useModelTimeIntervals";
-import { useUnits } from "./useUnits";
-
-function TimeUnitSelect({
-  timeUnit,
-  onChangeTimeUnit,
-}: {
-  timeUnit: string;
-  onChangeTimeUnit: (event: SelectChangeEvent) => void;
-}) {
-  const units = useUnits();
-  const timeUnits = units?.find(
-    (unit) => unit.symbol === "h",
-  )?.compatible_units;
-  return (
-    <FormControl size="small">
-      <InputLabel id="time-unit-label">Time Unit</InputLabel>
-      <Select
-        labelId="time-unit-label"
-        value={timeUnit}
-        onChange={onChangeTimeUnit}
-      >
-        {timeUnits?.map((unit) => (
-          <MenuItem key={unit.id} value={unit.symbol}>
-            {unit.symbol}
-          </MenuItem>
-        ))}
-      </Select>
-    </FormControl>
-  );
-}
-
-function ConcentrationUnitSelect({
-  concentrationUnit,
-  onChangeConcentrationUnit,
-}: {
-  concentrationUnit: string;
-  onChangeConcentrationUnit: (event: SelectChangeEvent) => void;
-}) {
-  const units = useUnits();
-  const concentrationUnits = units?.find(
-    (unit) => unit.symbol === "pmol/L",
-  )?.compatible_units;
-  return (
-    <FormControl size="small">
-      <InputLabel id="conc-unit-label">Concentration Unit</InputLabel>
-      <Select
-        labelId="conc-unit-label"
-        value={concentrationUnit}
-        onChange={onChangeConcentrationUnit}
-      >
-        {concentrationUnits?.map((unit) => (
-          <MenuItem key={unit.id} value={unit.symbol}>
-            {unit.symbol}
-          </MenuItem>
-        ))}
-      </Select>
-    </FormControl>
-  );
-}
 
 const options = [
   { name: "Parameters", value: "parameters" },
@@ -103,22 +43,10 @@ type RowFilter = {
 };
 
 const ResultsTab: FC = () => {
-  const [timeUnit, setTimeUnit] = useState("h");
-  const [concentrationUnit, setConcentrationUnit] = useState("pmol/L");
-  function onChangeTimeUnit(event: SelectChangeEvent) {
-    setTimeUnit(event.target.value);
-  }
-  function onChangeConcentrationUnit(event: SelectChangeEvent) {
-    setConcentrationUnit(event.target.value);
-  }
-
   const { groups = [] } = useSubjectGroups();
   const [intervals] = useModelTimeIntervals();
   const concentrationVariables = useConcentrationVariables();
-  const parameters = useParameters({
-    variableUnit: concentrationUnit,
-    timeUnit,
-  });
+  const parameters = useParameters();
 
   const [columns, setColumns] = useState("parameters");
   const [rows, setRows] = useState("variables");
@@ -360,27 +288,7 @@ const ResultsTab: FC = () => {
           intervalIndex={intervalIndex}
           rows={rowData}
           rowColumn={rowColumn}
-          concentrationUnit={concentrationUnit}
-          timeUnit={timeUnit}
-        >
-          <Box
-            sx={{
-              justifyContent: "flex-end",
-              display: "flex",
-              mt: "1rem",
-              gap: "0.5rem",
-            }}
-          >
-            <ConcentrationUnitSelect
-              concentrationUnit={concentrationUnit}
-              onChangeConcentrationUnit={onChangeConcentrationUnit}
-            />
-            <TimeUnitSelect
-              timeUnit={timeUnit}
-              onChangeTimeUnit={onChangeTimeUnit}
-            />
-          </Box>
-        </ResultsTable>
+        />
       </>
     );
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

diff --git a/frontend-v2/src/features/results/ResultsTable.tsx b/frontend-v2/src/features/results/ResultsTable.tsx
@@ -6,11 +6,11 @@ import {
   TableHead,
   TableRow,
 } from "@mui/material";
-import { FC, ReactElement } from "react";
+import { FC } from "react";
 
 import useSubjectGroups from "../../hooks/useSubjectGroups";
 
-import { useParameters } from "./useParameters";
+import { useParameterNames } from "./useParameters";
 import { useConcentrationVariables } from "./useConcentrationVariables";
 
 import { FilterIndex, RowData } from "./ResultsTab";
@@ -77,9 +77,6 @@ interface ResultsTableProps {
   parameterIndex: FilterIndex;
   rows: RowData;
   rowColumn: string;
-  concentrationUnit: string;
-  timeUnit: string;
-  children?: ReactElement;
 }
 
 /**
@@ -92,8 +89,6 @@ interface ResultsTableProps {
  * @param parameterIndex "rows" or "columns" or the index of the parameter to display in the table.
  * @param rows an array of row data.
  * @param rowColumn The name of the row column.
- * @param concentrationUnit The unit of the displayed concentration values.
- * @param timeUnit The unit of the displayed time values.
  */
 export const ResultsTable: FC<ResultsTableProps> = ({
   groupIndex,
@@ -102,15 +97,9 @@ export const ResultsTable: FC<ResultsTableProps> = ({
   parameterIndex,
   rows = [],
   rowColumn = "",
-  concentrationUnit = "pmol/L",
-  timeUnit = "h",
-  children,
 }) => {
   const { groups } = useSubjectGroups();
-  const parameters = useParameters({
-    variableUnit: concentrationUnit,
-    timeUnit,
-  });
+  const parameterNames = useParameterNames();
   const concentrationVariables = useConcentrationVariables();
   const [intervals] = useModelTimeIntervals();
   const tableRows = useTableRows({
@@ -119,8 +108,6 @@ export const ResultsTable: FC<ResultsTableProps> = ({
     intervalIndex,
     variableIndex,
     parameterIndex,
-    concentrationUnit,
-    timeUnit,
   });
 
   if (!rows[0]) {
@@ -130,7 +117,7 @@ export const ResultsTable: FC<ResultsTableProps> = ({
   try {
     const columnHeadings =
       parameterIndex === "columns"
-        ? parameters.map((parameter) => parameter.name)
+        ? parameterNames
         : variableIndex === "columns"
           ? concentrationVariables.map((variable) => variable.name)
           : intervalIndex === "columns"
@@ -168,7 +155,6 @@ export const ResultsTable: FC<ResultsTableProps> = ({
             ))}
           </TableBody>
         </Table>
-        {children}
       </TableContainer>
     );
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

diff --git a/frontend-v2/src/features/results/columns.tsx b/frontend-v2/src/features/results/columns.tsx
@@ -57,8 +57,8 @@ export function columns({
     return parameters.map((parameter) => {
       return {
         header: parameter.name,
-        value: (intervalIndex: number) =>
-          parameter.value(intervalIndex, simulation, variable, aucVariable),
+        value: (interval: TimeIntervalRead) =>
+          parameter.value(interval, simulation, variable, aucVariable),
       };
     });
   }