Fix no padding on results page; Add 'auto' layout when no/all options…

… are selected
pkpdapp-team · Nov 27, 2024 · 30005e7 · 30005e7
1 parent 833e78d
commit 30005e7
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 21 deletions.
diff --git a/frontend-v2/src/features/results/ResultsTab.tsx b/frontend-v2/src/features/results/ResultsTab.tsx
@@ -352,7 +352,7 @@ const ResultsTab: FC = () => {
             })}
           </Select>
         </FormControl>
-        <Typography variant="h5">{generateTableHeader()}</Typography>
+        <Typography sx={{ paddingTop: '.5rem', paddingBottom: '.5rem'}} variant="h5">{generateTableHeader()}</Typography>
         <ResultsTable
           groupIndex={groupIndex}
           variableIndex={variableIndex}

diff --git a/frontend-v2/src/features/simulation/SimulationPlotView.tsx b/frontend-v2/src/features/simulation/SimulationPlotView.tsx
@@ -267,10 +267,13 @@ interface SimulationPlotProps {
   model: CombinedModelRead;
   visibleGroups: string[];
   shouldShowLegend: boolean;
+  isVertical: boolean;
+  isHorizontal: boolean;
   layout: string;
   dimensions: {
     width: number;
-  }
+    height: number;
+  };
 }
 
 const SimulationPlotView: FC<SimulationPlotProps> = ({
@@ -287,6 +290,8 @@ const SimulationPlotView: FC<SimulationPlotProps> = ({
   model,
   visibleGroups,
   shouldShowLegend,
+  isVertical,
+  isHorizontal,
   dimensions,
 }) => {
   const projectId = useSelector(
@@ -463,21 +468,50 @@ const SimulationPlotView: FC<SimulationPlotProps> = ({
     ln: { type: "log", dtick: Math.log10(Math.E) },
   };
 
-  const getPlotWidth = () => {
+  const getPlotDimensions = () => {
     const buffor = 10;
     const columnCount = screen.width > 2500 ? 3 : 2;
-    if (screen.width > 1536) {
-      return dimensions.width / columnCount - buffor;
+    const layoutBreakpoint = 900;
+
+    if (isVertical && !isHorizontal) {
+      return dimensions.width > layoutBreakpoint
+        ? {
+            height: dimensions.height / 2 - buffor,
+            width: dimensions.width - buffor,
+          }
+        : {
+            height: dimensions.height / 1.5 - buffor,
+            width: dimensions.width - buffor,
+          };
     }
 
-    return dimensions.width - buffor;
-  };
+    if (!isVertical && isHorizontal) {
+      return dimensions.width > layoutBreakpoint
+        ? {
+            height: dimensions.height - buffor,
+            width: dimensions.width / columnCount - buffor,
+          }
+        : {
+            height: dimensions.height - buffor,
+            width: dimensions.width / 1.5 - buffor,
+          };
+    }
 
-  const plotWidth = getPlotWidth();
+    return dimensions.width > layoutBreakpoint
+      ? {
+          height: dimensions.height / 2 - buffor,
+          width: dimensions.width / columnCount - buffor,
+        }
+      : {
+          height: dimensions.height / 2 - buffor,
+          width: dimensions.width / columnCount - buffor,
+        };
+  };
 
   const plotLayout: Partial<Layout> = {
     autosize: false,
-    width: plotWidth,
+    width: getPlotDimensions()?.width,
+    height: getPlotDimensions()?.height,
     dragmode: "pan",
     showlegend: shouldShowLegend,
     shapes: icLines.map((icLine, i) => {

diff --git a/frontend-v2/src/features/simulation/Simulations.tsx b/frontend-v2/src/features/simulation/Simulations.tsx
@@ -39,7 +39,6 @@ import { getConstVariables } from "../model/resetToSpeciesDefaults";
 import useSubjectGroups from "../../hooks/useSubjectGroups";
 import useExportSimulation from "./useExportSimulation";
 import { SimulationsSidePanel } from "./SimulationsSidePanel";
-import { useCollapsibleSidebar } from "../../shared/contexts/CollapsibleSidebarContext";
 
 type SliderValues = { [key: number]: number };
 
@@ -219,8 +218,8 @@ const Simulations: FC = () => {
     { value: "vertical", label: "Vertical" },
     { value: "horizontal", label: "Horizontal" },
   ];
-  const defaultLayout = layoutOptions[0]?.value;
-  const [layout, setLayout] = useState<string>(defaultLayout);
+  const defaultLayout = [layoutOptions[0]?.value, layoutOptions[1]?.value];
+  const [layout, setLayout] = useState<string[]>(defaultLayout);
 
   // reset form and sliders if simulation changes
   useEffect(() => {
@@ -397,6 +396,7 @@ const Simulations: FC = () => {
 
   const [dimensions, setDimensions] = useState({
     width: window.innerWidth,
+    height: window.innerHeight
   });
 
   const containerRef: MutableRefObject<HTMLElement | null> = useRef(null);
@@ -405,6 +405,7 @@ const Simulations: FC = () => {
     const debouncedHandleResize = debounce(function handleResize() {
       setDimensions({
         width: containerRef?.current?.clientWidth || 0,
+        height: containerRef?.current?.clientHeight || 0
       });
     }, 1000);
 
@@ -419,6 +420,19 @@ const Simulations: FC = () => {
     };
   });
 
+  const isHorizontal = layout.includes('horizontal') || layout?.length === 0;
+  const isVertical = layout.includes('vertical') || layout?.length === 0;
+
+  const getXlLayout = () => {
+    if (isVertical && !isHorizontal) {
+      return 12
+    }
+
+    return screen.width > 2500 ? 4 : 6
+  }
+
+  const tableLayout = getXlLayout();
+
   const loading = [
     isProjectLoading,
     isSimulationsLoading,
@@ -474,13 +488,13 @@ const Simulations: FC = () => {
           container
           columns={{ xl: 12, md: 12, sm: 12 }}
           direction="row"
-          wrap={layout === "horizontal" ? "nowrap" : "wrap"}
+          wrap={isHorizontal && !isVertical ? "nowrap" : "wrap"}
         >
           {plots.map((plot, index) => (
             <Grid
-              xl={screen.width > 2500 ? 4 : 6}
-              md={12}
-              sm={12}
+              xl={tableLayout}
+              md={tableLayout}
+              sm={tableLayout}
               item
               key={index}
             >
@@ -499,7 +513,8 @@ const Simulations: FC = () => {
                   model={model}
                   visibleGroups={visibleGroups}
                   shouldShowLegend={shouldShowLegend}
-                  layout={layout}
+                  isVertical={isVertical}
+                  isHorizontal={isHorizontal}
                   dimensions={dimensions}
                 />
               ) : (

diff --git a/frontend-v2/src/features/simulation/SimulationsSidePanel.tsx b/frontend-v2/src/features/simulation/SimulationsSidePanel.tsx
@@ -44,7 +44,7 @@ type SimulationsSidePanelType = {
   isSharedWithMe: boolean;
   layoutOptions: { value: string; label: string }[];
   layout: string;
-  setLayout: (layout: string) => void;
+  setLayout: (layout: string[]) => void;
   plots: SimulationPlot[];
   control: Control<Simulation, any>;
   units: UnitRead[];
@@ -151,7 +151,15 @@ export const SimulationsSidePanel = ({
   const [collapseParameters, setCollapseParameters] = useState(false);
   const [collapseReference, setCollapseReference] = useState(false);
   const [collapseLegend, setCollapseLegend] = useState(false);
-  const { simulationAnimationClasses } = useCollapsibleSidebar(); 
+  const { simulationAnimationClasses } = useCollapsibleSidebar();
+
+  const onLayoutChange = (value: string) => {
+    if (layout.includes(value)) {
+      setLayout(layout.filter(layoutValue => value !== layoutValue))
+    } else {
+      setLayout([...layout, value]);
+    }
+  }
 
   if (!portalRoot || selectedPage !== PageName.SIMULATIONS) return null;
 
@@ -229,9 +237,9 @@ export const SimulationsSidePanel = ({
                         key={value}
                         control={
                           <Checkbox
-                            checked={layout === value}
+                            checked={layout.includes(value)}
                             onChange={() => {
-                              setLayout(value);
+                              onLayoutChange(value);
                             }}
                           />
                         }