fix(frontend): fix TS errors in Simulations

Author: eatyourgreens

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);
 

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 {
@@ -46,31 +41,31 @@ import { getTableHeight } from "../../shared/calculateTableHeights";
 
 const PlotsWidthSteps = [
   {
-    minHeight: "1100",
+    minHeight: 1100,
     tableHeight: "75vw",
   },
   {
-    minHeight: "1000",
+    minHeight: 1000,
     tableHeight: "72vw",
   },
   {
-    minHeight: "900",
+    minHeight: 900,
     tableHeight: "70vw",
   },
   {
-    minHeight: "800",
+    minHeight: 800,
     tableHeight: "65vw",
   },
   {
-    minHeight: "700",
+    minHeight: 700,
     tableHeight: "60vw",
   },
   {
-    minHeight: "600",
+    minHeight: 600,
     tableHeight: "55vw",
   },
   {
-    minHeight: "500",
+    minHeight: 500,
     tableHeight: "53vw",
   },
 ];
@@ -150,9 +145,7 @@ const Simulations: FC = () => {
   const [sliderValues, setSliderValues] = useState<SliderValues | undefined>(
     undefined,
   );
-  console.log('sliderValues', sliderValues);
   const handleChangeSlider = useCallback((variable: number, value: number) => {
-    console.log('handleChangeSlider', variable, value);
     setSliderValues((prevSliderValues) => ({
       ...prevSliderValues,
       [variable]: value,
@@ -212,7 +205,7 @@ const Simulations: FC = () => {
   );
   const { data: dataReference } = useSimulation(
     refSimInputs,
-    showReference ? model : undefined
+    showReference ? model : undefined,
   );
 
   const {
@@ -254,7 +247,6 @@ const Simulations: FC = () => {
   // reset form and sliders if simulation changes
   useEffect(() => {
     if (simulation && variables) {
-      console.log('reset form and sliders if simulation changes');
       setSliderValues((s) => {
         const initialValues = getSliderInitialValues(simulation, s, variables);
         return initialValues;
@@ -370,7 +362,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,

frontend-v2/src/features/simulation/SimulationsSidePanel.tsx

@@ -19,8 +19,15 @@ import HelpButton from "../../components/HelpButton";
 import { ExpandLess, ExpandMore } from "@mui/icons-material";
 import { ChangeEvent, useState } from "react";
 import { getTableHeight } from "../../shared/calculateTableHeights";
-import { Simulation, SimulationPlot, SimulationRead, SimulationSlider, SubjectGroupRead, UnitRead } from "../../app/backendApi";
-import { UseFormReset } from "react-hook-form";
+import {
+  Simulation,
+  SimulationPlot,
+  SimulationRead,
+  SimulationSlider,
+  SubjectGroupRead,
+  UnitRead,
+} from "../../app/backendApi";
+import { Control } from "react-hook-form";
 
 type SimulationsSidePanelType = {
   portalId: string;
@@ -30,11 +37,11 @@ type SimulationsSidePanelType = {
   }[];
   handleAddPlot: (plot: number) => void;
   isSharedWithMe: boolean;
-  layoutOptions: { value: string, label: string }[];
+  layoutOptions: { value: string; label: string }[];
   layout: string;
   setLayout: (layout: string) => void;
   plots: SimulationPlot[];
-  control: UseFormReset<Simulation>;
+  control: Control<Simulation, any>;
   units: UnitRead[];
   simulation: SimulationRead;
   groups?: SubjectGroupRead[];
@@ -45,15 +52,15 @@ type SimulationsSidePanelType = {
     label: string;
   }[];
   handleAddSlider: (slider: number) => void;
-  orderedSliders: SimulationSlider[];
+  orderedSliders: (SimulationSlider & { fieldArrayIndex: number })[];
   handleChangeSlider: (variable: number, value: number) => void;
-  handleRemoveSlider: (index: number) => void;
-  handleSaveSlider: (slider: SimulationSlider) => void;
+  handleRemoveSlider: (index: number) => () => void;
+  handleSaveSlider: (slider: SimulationSlider) => (value: number) => void;
   exportSimulation: () => void;
   showReference: boolean;
   setShowReference: (reference: boolean) => void;
   shouldShowLegend: boolean;
-  setShouldShowLegend: (value: boolean) => void
+  setShouldShowLegend: (value: boolean) => void;
 };
 
 const ButtonSx = {
@@ -73,31 +80,31 @@ const ButtonSx = {
 
 const SidePanelSteps = [
   {
-    minHeight: "1100",
+    minHeight: 1100,
     tableHeight: "75vh",
   },
   {
-    minHeight: "1000",
+    minHeight: 1000,
     tableHeight: "72vh",
   },
   {
-    minHeight: "900",
+    minHeight: 900,
     tableHeight: "70vh",
   },
   {
-    minHeight: "800",
+    minHeight: 800,
     tableHeight: "65vh",
   },
   {
-    minHeight: "700",
+    minHeight: 700,
     tableHeight: "60vh",
   },
   {
-    minHeight: "600",
+    minHeight: 600,
     tableHeight: "55vh",
   },
   {
-    minHeight: "500",
+    minHeight: 500,
     tableHeight: "53vh",
   },
 ];
@@ -127,7 +134,7 @@ export const SimulationsSidePanel = ({
   showReference,
   setShowReference,
   shouldShowLegend,
-  setShouldShowLegend
+  setShouldShowLegend,
 }: SimulationsSidePanelType) => {
   const portalRoot = document.getElementById(portalId);
   const [collapseLayout, setCollapseLayout] = useState(true);