diff --git a/frontend-v2/src/features/results/ResultsTab.tsx b/frontend-v2/src/features/results/ResultsTab.tsx index 7dd6c66b..fb77358c 100644 --- a/frontend-v2/src/features/results/ResultsTab.tsx +++ b/frontend-v2/src/features/results/ResultsTab.tsx @@ -352,7 +352,7 @@ const ResultsTab: FC = () => { })} - {generateTableHeader()} + {generateTableHeader()} = ({ @@ -287,6 +290,8 @@ const SimulationPlotView: FC = ({ model, visibleGroups, shouldShowLegend, + isVertical, + isHorizontal, dimensions, }) => { const projectId = useSelector( @@ -463,21 +468,50 @@ const SimulationPlotView: FC = ({ 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 = { 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 index a7351c4c..70deb949 100644 --- 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(defaultLayout); + const defaultLayout = [layoutOptions[0]?.value, layoutOptions[1]?.value]; + const [layout, setLayout] = useState(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 = 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) => ( 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 index a82bd4cd..cc85c946 100644 --- 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; 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={ { - setLayout(value); + onLayoutChange(value); }} /> }