feat: dont simulate if there are no plots or secondary params (#574)

* feat: if no plots don't simulate * feat: don't simulate if there is no plots and no secondary params * remove unneccesary useEffect
pkpdapp-team · Nov 21, 2024 · daa80f2 · daa80f2
1 parent 50b7eed
commit daa80f2
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 20 deletions.
diff --git a/frontend-v2/src/features/main/Sidebar.tsx b/frontend-v2/src/features/main/Sidebar.tsx
@@ -403,20 +403,19 @@ export default function Sidebar() {
           {drawer}
         </Drawer>
       </Box>
-      {selectedPage === PageName.SIMULATIONS && (
-        <Box
-          component="nav"
-          sx={{
-            width: { sm: drawerWidth },
-            flexShrink: { sm: 0 },
-            height: "100vh",
-            backgroundColor: '#FBFBFA',
-            borderRight: '1px solid #DBD6D1'
-          }}
-          aria-label="mailbox folders"
-          id='simulations-portal'
-        />
-      )}
+      <Box
+        component="nav"
+        sx={{
+          width: { sm: selectedPage === PageName.SIMULATIONS ? drawerWidth : 0 },
+          flexShrink: { sm: 0 },
+          height: "100vh",
+          backgroundColor: '#FBFBFA',
+          borderRight: '1px solid #DBD6D1'
+        }}
+        aria-label="mailbox folders"
+        id='simulations-portal'
+        zIndex={0}
+      />
       <Box
         component="main"
         sx={{

diff --git a/frontend-v2/src/features/simulation/SimulationSliderView.tsx b/frontend-v2/src/features/simulation/SimulationSliderView.tsx
@@ -62,15 +62,13 @@ const SimulationSliderView: FC<SimulationSliderProps> = ({
   // update the slider value if the variable default value changes
   const defaultValue = variable?.default_value || 1.0;
   const [value, setValue] = useState<number>(defaultValue);
-
   useEffect(() => {
     // 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]);
+  }, [onChange, defaultValue, variable]);
 
   const handleSliderChange = (
     event: Event | SyntheticEvent<Element, Event>,

diff --git a/frontend-v2/src/features/simulation/Simulations.tsx b/frontend-v2/src/features/simulation/Simulations.tsx
@@ -190,11 +190,16 @@ const Simulations: FC = () => {
     variables,
     timeMax,
   );
+  const hasPlots = simulation ? simulation.plots.length > 0 : false;
+  const hasSecondaryParameters = model ?
+    model.derived_variables.reduce((acc, dv) => { return acc || dv.type === "AUC"; }, false) :
+    false;
+
   const {
     loadingSimulate,
     data,
     error: simulateError,
-  } = useSimulation(simInputs, model);
+  } = useSimulation(simInputs, model, hasPlots || hasSecondaryParameters);
 
   const refSimInputs = useSimulationInputs(
     model,

diff --git a/frontend-v2/src/features/simulation/SimulationsSidePanel.tsx b/frontend-v2/src/features/simulation/SimulationsSidePanel.tsx
@@ -19,6 +19,9 @@ import HelpButton from "../../components/HelpButton";
 import { ExpandLess, ExpandMore } from "@mui/icons-material";
 import { ChangeEvent, useState } from "react";
 import { getTableHeight } from "../../shared/calculateTableHeights";
+import { useSelector } from "react-redux";
+import { RootState } from "../../app/store";
+import { PageName } from "../main/mainSlice";
 import {
   Simulation,
   SimulationPlot,
@@ -136,6 +139,9 @@ export const SimulationsSidePanel = ({
   shouldShowLegend,
   setShouldShowLegend,
 }: SimulationsSidePanelType) => {
+  const selectedPage = useSelector(
+    (state: RootState) => state.main.selectedPage,
+  );
   const portalRoot = document.getElementById(portalId);
   const [collapseLayout, setCollapseLayout] = useState(true);
   const [collapseOptions, setCollapseOptions] = useState(true);
@@ -144,7 +150,7 @@ export const SimulationsSidePanel = ({
   const [collapseReference, setCollapseReference] = useState(true);
   const [collapseLegend, setCollapseLegend] = useState(true);
 
-  if (!portalRoot) return null;
+  if (!portalRoot || selectedPage !== PageName.SIMULATIONS) return null;
 
   return ReactDOM.createPortal(
     <Box

diff --git a/frontend-v2/src/features/simulation/useSimulation.ts b/frontend-v2/src/features/simulation/useSimulation.ts
@@ -20,11 +20,13 @@ const SIMULATION_PAGES = [PageName.SIMULATIONS, PageName.RESULTS];
 export default function useSimulation(
   simInputs: Simulate,
   model: CombinedModelRead | undefined,
+  runSimulation: boolean = true
 ) {
   const { compound, protocols } = useProtocols();
   const { setSimulations } = useContext(SimulationContext);
   const [loadingSimulate, setLoadingSimulate] = useState<boolean>(false);
   const [data, setData] = useState<SimulateResponse[]>([]);
+  const [lastSimulate, setLastSimulate] = useState<Simulate | undefined>();
   const [simulate, { error: simulateErrorBase }] =
     useCombinedModelSimulateCreateMutation();
   const simulateError: ErrorObject | undefined = simulateErrorBase
@@ -36,13 +38,16 @@ export default function useSimulation(
 
   useEffect(() => {
     let ignore = false;
+    const simulateInputsDifferent = JSON.stringify(simInputs) !== JSON.stringify(lastSimulate);
     if (
+      runSimulation &&
       simInputs.outputs?.length > 1 &&
       simInputs.time_max &&
       model &&
       protocols &&
       compound &&
-      SIMULATION_PAGES.includes(page)
+      SIMULATION_PAGES.includes(page) &&
+      simulateInputsDifferent
     ) {
       setLoadingSimulate(true);
       console.log("Simulating with params", simInputs.variables);
@@ -56,6 +61,7 @@ export default function useSimulation(
             const responseData = response.data as SimulateResponse[];
             setData(responseData);
             setSimulations(responseData);
+            setLastSimulate(simInputs);
           }
         }
       });
@@ -70,6 +76,7 @@ export default function useSimulation(
     simulate,
     JSON.stringify(simInputs),
     page,
+    runSimulation,
   ]);
 
   return {