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