Merge branch 'ui-enhancements' into PKPDX-29

pkpdapp-team · Nov 20, 2024 · 4c330b4 · 4c330b4
2 parents 2bd9dda + 04ca571
commit 4c330b4
Show file tree

Hide file tree

Showing 12 changed files with 134 additions and 121 deletions.
diff --git a/frontend-v2/src/components/DropdownButton.tsx b/frontend-v2/src/components/DropdownButton.tsx
@@ -21,7 +21,8 @@ type Props = {
   disabled?: boolean;
   data_cy?: string;
   useIcon?: boolean;
-  sx?: SxProps
+  sx?: SxProps;
+  variant?: "text" | "outlined" | "contained";
 };
 
 const DropdownButton: FC<Props> = ({
@@ -32,7 +33,7 @@ const DropdownButton: FC<Props> = ({
   disabled,
   useIcon,
   sx,
-  variant = 'contained'
+  variant = "contained",
 }) => {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 

diff --git a/frontend-v2/src/features/model/VariableRow.tsx b/frontend-v2/src/features/model/VariableRow.tsx
@@ -250,7 +250,10 @@ const VariableRow: FC<Props> = ({
     if (type === "AUC") {
       setThresholds({
         ...thresholds,
-        [variable.name]: 0,
+        [variable.name]: {
+          lower: 0,
+          upper: Infinity,
+        },
       });
     }
   };

diff --git 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
@@ -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
@@ -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>

diff --git a/frontend-v2/src/features/simulation/SimulationSliderView.tsx b/frontend-v2/src/features/simulation/SimulationSliderView.tsx
@@ -64,9 +64,13 @@ const SimulationSliderView: FC<SimulationSliderProps> = ({
   const [value, setValue] = useState<number>(defaultValue);
 
   useEffect(() => {
-    setValue(defaultValue);
-    onChange(slider.variable, defaultValue);
-  }, [defaultValue, onChange, slider.variable]);
+    // don't set the value of the slider until the variable is loaded
+    if (variable) {
+      const defaultValue = variable.default_value || 1.0;
+      setValue(defaultValue);
+      onChange(slider.variable, defaultValue);
+    }
+  }, [onChange, variable]);
 
   const handleSliderChange = (
     event: Event | SyntheticEvent<Element, Event>,
@@ -78,8 +82,10 @@ const SimulationSliderView: FC<SimulationSliderProps> = ({
   };
 
   const handleReset = () => {
-    setValue(defaultValue);
-    onChange(slider.variable, defaultValue);
+    if (variable) {
+      setValue(defaultValue);
+      onChange(slider.variable, defaultValue);
+    }
   };
 
   const handleSave = () => {
@@ -145,9 +151,9 @@ const SimulationSliderView: FC<SimulationSliderProps> = ({
           </Typography>
         </Tooltip>
       </Stack>
-      <Box sx={{ display: 'flex', justifyContent: 'flex-end'}}>
+      <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
         <Tooltip title={"Reset to saved default value"} placement="top">
-          <IconButton aria-label="reset" onClick={handleReset} sx={{ padding: '2px'}}>
+          <IconButton aria-label="reset" onClick={handleReset} sx={{ padding: '2px' }}>
             <Replay fontSize="small" />
           </IconButton>
         </Tooltip>
@@ -156,18 +162,18 @@ const SimulationSliderView: FC<SimulationSliderProps> = ({
             aria-label="save"
             onClick={handleSave}
             disabled={isSharedWithMe}
-            sx={{ padding: '2px'}}
+            sx={{ padding: '2px' }}
           >
             <Save fontSize="small" />
           </IconButton>
         </Tooltip>
         <Tooltip title={"Widen range"} placement="top">
-          <IconButton aria-label="widen" onClick={handleWider} sx={{ padding: '2px'}}>
+          <IconButton aria-label="widen" onClick={handleWider} sx={{ padding: '2px' }}>
             <OpenInFull fontSize="small" />
           </IconButton>
         </Tooltip>
         <Tooltip title={"Narrow range"} placement="top">
-          <IconButton aria-label="restrict" onClick={handleNarrow} sx={{ padding: '2px'}}>
+          <IconButton aria-label="restrict" onClick={handleNarrow} sx={{ padding: '2px' }}>
             <CloseFullscreen fontSize="small" />
           </IconButton>
         </Tooltip>
@@ -176,7 +182,7 @@ const SimulationSliderView: FC<SimulationSliderProps> = ({
             aria-label="delete"
             onClick={handleDelete}
             disabled={isSharedWithMe}
-            sx={{ padding: '2px'}}
+            sx={{ padding: '2px' }}
           >
             <Delete fontSize="small" />
           </IconButton>

diff --git a/frontend-v2/src/features/simulation/Simulations.tsx b/frontend-v2/src/features/simulation/Simulations.tsx
@@ -1,9 +1,4 @@
-import {
-  Alert,
-  Grid,
-  Snackbar,
-  Box
-} from "@mui/material";
+import { Alert, Grid, Snackbar, Box } from "@mui/material";
 import { useSelector } from "react-redux";
 import { RootState } from "../../app/store";
 import {
@@ -35,7 +30,6 @@ import {
 import SimulationPlotView from "./SimulationPlotView";
 import useSimulation from "./useSimulation";
 import useSimulationInputs from "./useSimulationInputs";
-import useSimulatedVariables from "./useSimulatedVariables";
 import useDirty from "../../hooks/useDirty";
 import paramPriority from "../model/paramPriority";
 import { selectIsProjectShared } from "../login/loginSlice";
@@ -164,12 +158,11 @@ const Simulations: FC = () => {
     variables,
     timeMax,
   );
-  const simulatedVariables = useSimulatedVariables(variables, sliderValues);
   const {
     loadingSimulate,
     data,
     error: simulateError,
-  } = useSimulation(simInputs, simulatedVariables, model);
+  } = useSimulation(simInputs, model);
 
   const refSimInputs = useSimulationInputs(
     model,
@@ -178,11 +171,9 @@ const Simulations: FC = () => {
     variables,
     timeMax,
   );
-  const referenceVariables = useSimulatedVariables(variables, EMPTY_OBJECT);
   const { data: dataReference } = useSimulation(
     refSimInputs,
-    referenceVariables,
-    showReference ? model : undefined
+    showReference ? model : undefined,
   );
 
   const {
@@ -236,7 +227,6 @@ const Simulations: FC = () => {
   const [exportSimulation, { error: exportSimulateErrorBase }] =
     useExportSimulation({
       simInputs,
-      simulatedVariables,
       model,
       project,
     });
@@ -340,7 +330,7 @@ const Simulations: FC = () => {
   };
 
   const orderedSliders = sliders.map((slider, i) => {
-    const variable = variables.find((v) => v.id === slider.variable);
+    const variable = variables?.find((v) => v.id === slider.variable);
     return {
       ...slider,
       priority: variable ? paramPriority(variable) : 0,