From 9bd0094753ea9fca7bbc8cceea212f0701bc782f Mon Sep 17 00:00:00 2001
From: niestrow <wojciech.niestroj@contractors.roche.com>
Date: Mon, 2 Dec 2024 11:35:22 +0100
Subject: [PATCH 01/11] Simulations sidebar - no layout options selected by
 default

---
 frontend-v2/src/features/simulation/Simulations.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend-v2/src/features/simulation/Simulations.tsx b/frontend-v2/src/features/simulation/Simulations.tsx
index 70deb949..29b1ac68 100644
--- a/frontend-v2/src/features/simulation/Simulations.tsx
+++ b/frontend-v2/src/features/simulation/Simulations.tsx
@@ -218,8 +218,7 @@ const Simulations: FC = () => {
     { value: "vertical", label: "Vertical" },
     { value: "horizontal", label: "Horizontal" },
   ];
-  const defaultLayout = [layoutOptions[0]?.value, layoutOptions[1]?.value];
-  const [layout, setLayout] = useState<string[]>(defaultLayout);
+  const [layout, setLayout] = useState<string[]>([]);
 
   // reset form and sliders if simulation changes
   useEffect(() => {

From 0bf8e7bb9f114fd1b922912f1714420d1384ec36 Mon Sep 17 00:00:00 2001
From: niestrow <wojciech.niestroj@contractors.roche.com>
Date: Mon, 2 Dec 2024 11:37:30 +0100
Subject: [PATCH 02/11] Simulations sidebar - selecting both layouts deselects
 both options

---
 frontend-v2/src/features/simulation/SimulationsSidePanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend-v2/src/features/simulation/SimulationsSidePanel.tsx b/frontend-v2/src/features/simulation/SimulationsSidePanel.tsx
index 0782b11a..56e90839 100644
--- a/frontend-v2/src/features/simulation/SimulationsSidePanel.tsx
+++ b/frontend-v2/src/features/simulation/SimulationsSidePanel.tsx
@@ -157,7 +157,7 @@ export const SimulationsSidePanel = ({
     if (layout.includes(value)) {
       setLayout(layout.filter(layoutValue => value !== layoutValue))
     } else {
-      setLayout([...layout, value]);
+      setLayout(layout?.length ? [] : [value]);
     }
   }
 

From ac6007cf245f5a745eac3ec39b220ef7fd7c5a0f Mon Sep 17 00:00:00 2001
From: niestrow <wojciech.niestroj@contractors.roche.com>
Date: Mon, 2 Dec 2024 12:11:53 +0100
Subject: [PATCH 03/11] Fix pkpd version overlap navigation buttons on high
 scales

---
 frontend-v2/src/features/main/Sidebar.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend-v2/src/features/main/Sidebar.tsx b/frontend-v2/src/features/main/Sidebar.tsx
index 1caa5b97..88435f6c 100644
--- a/frontend-v2/src/features/main/Sidebar.tsx
+++ b/frontend-v2/src/features/main/Sidebar.tsx
@@ -301,7 +301,8 @@ export default function Sidebar() {
   );
 
   const drawer = (
-    <div style={{ marginTop: "7rem", transition: "all .35s linear" }}>
+    <div style={{ marginTop: "7rem", transition: "all .35s linear", display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: '100%' }}>
+      <div>
       {isExpanded ? (
         <IconButton
           aria-label="collapse-navigation"
@@ -376,10 +377,12 @@ export default function Sidebar() {
           </List>
         </>
       )}
+      </div>
+      <div>
       {isExpanded && (
         <Typography
           sx={{
-            position: "absolute",
+            position: "",
             bottom: 0,
             margin: ".5rem",
             color: "gray",
@@ -389,6 +392,8 @@ export default function Sidebar() {
           pkpdx version {import.meta.env.VITE_APP_VERSION?.slice(0, 7) || "dev"}
         </Typography>
       )}
+      </div>
+
     </div>
   );
 

From c79c6e0d3433257b2c55ad4248ecf4cbce44452e Mon Sep 17 00:00:00 2001
From: niestrow <wojciech.niestroj@contractors.roche.com>
Date: Mon, 2 Dec 2024 12:14:00 +0100
Subject: [PATCH 04/11] Simulation page - fix plots get smaller after each
 resize/sidebar collapse; Fix height of plots on ultra wide resolutions; Fix
 Simulation Sidebar view for high scales

---
 .../src/features/simulation/SimulationPlotView.tsx  | 13 ++++++-------
 frontend-v2/src/features/simulation/Simulations.tsx |  2 +-
 .../features/simulation/SimulationsSidePanel.tsx    | 11 ++++++++++-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/frontend-v2/src/features/simulation/SimulationPlotView.tsx b/frontend-v2/src/features/simulation/SimulationPlotView.tsx
index 9b3e3a35..2b0312e8 100644
--- a/frontend-v2/src/features/simulation/SimulationPlotView.tsx
+++ b/frontend-v2/src/features/simulation/SimulationPlotView.tsx
@@ -22,7 +22,6 @@ import {
 import Plotly from "plotly.js-basic-dist-min";
 import {
   Button,
-  debounce,
   Dialog,
   DialogActions,
   DialogContent,
@@ -475,11 +474,11 @@ const SimulationPlotView: FC<SimulationPlotProps> = ({
     if (isVertical && !isHorizontal) {
       return dimensions.width > layoutBreakpoint
         ? {
-            height: dimensions.height / 2 - buffor,
+            height: dimensions.height / 2 ,
             width: dimensions.width - buffor,
           }
         : {
-            height: dimensions.height / 1.5 - buffor,
+            height: dimensions.height / 1.5,
             width: dimensions.width - buffor,
           };
     }
@@ -487,22 +486,22 @@ const SimulationPlotView: FC<SimulationPlotProps> = ({
     if (!isVertical && isHorizontal) {
       return dimensions.width > layoutBreakpoint
         ? {
-            height: dimensions.height - buffor,
+            height: dimensions.height,
             width: dimensions.width / columnCount - buffor,
           }
         : {
-            height: dimensions.height - buffor,
+            height: dimensions.height,
             width: dimensions.width / 1.5 - buffor,
           };
     }
 
     return dimensions.width > layoutBreakpoint
       ? {
-          height: dimensions.height / 2 - buffor,
+          height: dimensions.height / 2,
           width: dimensions.width / columnCount - buffor,
         }
       : {
-          height: dimensions.height / 2 - buffor,
+          height: dimensions.height / 2,
           width: dimensions.width / columnCount - buffor,
         };
   };
diff --git a/frontend-v2/src/features/simulation/Simulations.tsx b/frontend-v2/src/features/simulation/Simulations.tsx
index 29b1ac68..b1355163 100644
--- a/frontend-v2/src/features/simulation/Simulations.tsx
+++ b/frontend-v2/src/features/simulation/Simulations.tsx
@@ -448,7 +448,7 @@ const Simulations: FC = () => {
   }
 
   return (
-    <Box sx={{ display: "flex" }} ref={containerRef}>
+    <Box sx={{ display: "flex", minHeight: '60vh', height: 'calc(80vh - 24px)' }} ref={containerRef}>
       <SimulationsSidePanel
         portalId="simulations-portal"
         addPlotOptions={addPlotOptions}
diff --git a/frontend-v2/src/features/simulation/SimulationsSidePanel.tsx b/frontend-v2/src/features/simulation/SimulationsSidePanel.tsx
index 56e90839..d6f02c21 100644
--- a/frontend-v2/src/features/simulation/SimulationsSidePanel.tsx
+++ b/frontend-v2/src/features/simulation/SimulationsSidePanel.tsx
@@ -110,7 +110,15 @@ const SidePanelSteps = [
   },
   {
     minHeight: 500,
-    tableHeight: "53vh",
+    tableHeight: "50vh",
+  },
+  {
+    minHeight: 400,
+    tableHeight: "40vh",
+  },
+  {
+    minHeight: 300,
+    tableHeight: "30vh",
   },
 ];
 
@@ -171,6 +179,7 @@ export const SimulationsSidePanel = ({
         flexDirection: "column",
         justifyContent: "space-between",
         height: "100%",
+        maxHeight: '100%',
         paddingBottom: "1rem",
         backgroundColor: "#FBFBFA",
         borderRight: "1px solid #DBD6D1"

From bae390cbc78b56ec1e8aee9cd6453e911bb6e87b Mon Sep 17 00:00:00 2001
From: niestrow <wojciech.niestroj@contractors.roche.com>
Date: Mon, 2 Dec 2024 12:19:36 +0100
Subject: [PATCH 05/11] Simulation page - fix plots box having wrong dimensions
 on first plot render

---
 frontend-v2/src/features/simulation/Simulations.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend-v2/src/features/simulation/Simulations.tsx b/frontend-v2/src/features/simulation/Simulations.tsx
index b1355163..80a824d2 100644
--- a/frontend-v2/src/features/simulation/Simulations.tsx
+++ b/frontend-v2/src/features/simulation/Simulations.tsx
@@ -419,6 +419,13 @@ const Simulations: FC = () => {
     };
   });
 
+  useEffect(() => {
+    setDimensions({
+      width: containerRef?.current?.clientWidth || 0,
+      height: containerRef?.current?.clientHeight || 0
+    });
+  }, [plots?.length])
+
   const isHorizontal = layout.includes('horizontal') || layout?.length === 0;
   const isVertical = layout.includes('vertical') || layout?.length === 0;
 
@@ -430,7 +437,7 @@ const Simulations: FC = () => {
     return screen.width > 2500 ? 4 : 6
   }
 
-  const tableLayout = getXlLayout();
+  const tableLayout = getXlLayout(); 
 
   const loading = [
     isProjectLoading,

From 4d8a3275332b39a5d2ba9fc0e75540a55d7a9667 Mon Sep 17 00:00:00 2001
From: niestrow <wojciech.niestroj@contractors.roche.com>
Date: Mon, 2 Dec 2024 13:15:58 +0100
Subject: [PATCH 06/11] Input width and table height adjustments for scales up
 to 200%

---
 .../src/features/data/DosingProtocols.tsx     |  1 +
 frontend-v2/src/features/drug/Drug.tsx        |  7 ++--
 frontend-v2/src/features/projects/Project.tsx | 13 ++++--
 .../src/features/projects/Projects.tsx        | 42 ++++++++++++++++++-
 .../src/features/results/ResultsTab.tsx       |  8 ++--
 5 files changed, 59 insertions(+), 12 deletions(-)

diff --git a/frontend-v2/src/features/data/DosingProtocols.tsx b/frontend-v2/src/features/data/DosingProtocols.tsx
index d77554c4..d1dddf7f 100644
--- a/frontend-v2/src/features/data/DosingProtocols.tsx
+++ b/frontend-v2/src/features/data/DosingProtocols.tsx
@@ -236,6 +236,7 @@ const DosingProtocols: FC<IDosingProtocols> = ({
                           label="Units"
                           value={adminUnit}
                           onChange={handleAmountUnitChange(adminId)}
+                          sx={{ maxWidth: '10rem'}}
                           size="small"
                           margin="dense"
                         >
diff --git a/frontend-v2/src/features/drug/Drug.tsx b/frontend-v2/src/features/drug/Drug.tsx
index 3fbc1f0c..6b4ba9a1 100644
--- a/frontend-v2/src/features/drug/Drug.tsx
+++ b/frontend-v2/src/features/drug/Drug.tsx
@@ -317,7 +317,7 @@ const Drug: FC = () => {
       </Grid>
       <TableContainer
         sx={{
-          width: "70%",
+          width: window.innerWidth > 1300 ? "70%" : "100%",
           maxHeight: getTableHeight({ steps: DOUBLE_TABLE_SECOND_BREAKPOINTS }),
         }}
       >
@@ -359,7 +359,7 @@ const Drug: FC = () => {
                   {isEditIndex === index ? (
                     <TextField
                       size="small"
-                      sx={{ flex: "1" }}
+                      sx={{ flex: "1", minWidth: '10rem' }}
                       label="Name"
                       name={`efficacy_experiments.${index}.name`}
                       control={control}
@@ -379,7 +379,7 @@ const Drug: FC = () => {
                   {isEditIndex === index ? (
                     <FloatField
                       size="small"
-                      sx={{ flex: "1" }}
+                      sx={{ flex: "1", minWidth: '5rem' }}
                       label="C50"
                       name={`efficacy_experiments.${index}.c50`}
                       control={control}
@@ -417,6 +417,7 @@ const Drug: FC = () => {
                   {isEditIndex === index ? (
                     <FloatField
                       size="small"
+                      sx={{ minWidth: '5rem' }}
                       label="Hill-coefficient"
                       name={`efficacy_experiments.${index}.hill_coefficient`}
                       control={control}
diff --git a/frontend-v2/src/features/projects/Project.tsx b/frontend-v2/src/features/projects/Project.tsx
index 7db9a7fe..6bcd21ce 100644
--- a/frontend-v2/src/features/projects/Project.tsx
+++ b/frontend-v2/src/features/projects/Project.tsx
@@ -44,7 +44,6 @@ import EditIcon from "@mui/icons-material/Edit";
 import CheckIcon from "@mui/icons-material/Check";
 import CloseIcon from "@mui/icons-material/Close";
 import { DescriptionModal } from "./Description";
-import { useFieldState } from "../../app/hooks";
 
 interface Props {
   project: ProjectRead;
@@ -245,6 +244,12 @@ const ProjectRow: FC<Props> = ({
     ? "Remove shared project from your list"
     : "Delete Project";
 
+  const getRowNumber = () => {
+    if (window.innerHeight < 800) return Math.ceil(window.innerHeight / 100);
+
+    return 15;
+  }
+
   return (
     <>
       <TableRow
@@ -271,7 +276,7 @@ const ProjectRow: FC<Props> = ({
               textFieldProps={defaultProps}
               size="small"
               rules={{ required: true, validate: validateName }}
-              sx={{ ...defaultSx }}
+              sx={{ ...defaultSx, minWidth: '10rem' }}
             />
           ) : (
             <label htmlFor={`project-${project.id}`}>
@@ -287,7 +292,7 @@ const ProjectRow: FC<Props> = ({
               textFieldProps={defaultProps}
               size="small"
               rules={{ required: true }}
-              sx={defaultSx}
+              sx={{ ...defaultSx, minWidth: '10rem'}}
             />
           ) : (
             <Typography>{compound?.name}</Typography>
@@ -425,7 +430,7 @@ const ProjectRow: FC<Props> = ({
             sx={{ width: "50vw" }}
             disabled={!isEditMode}
             multiline
-            rows={15}
+            rows={getRowNumber()}
           />
         </DescriptionModal>
       )}
diff --git a/frontend-v2/src/features/projects/Projects.tsx b/frontend-v2/src/features/projects/Projects.tsx
index f718938f..9f4c6b44 100644
--- a/frontend-v2/src/features/projects/Projects.tsx
+++ b/frontend-v2/src/features/projects/Projects.tsx
@@ -34,6 +34,46 @@ import { defaultHeaderSx } from "../../shared/tableHeadersSx";
 import useDataset from "../../hooks/useDataset";
 import { TableHeader } from "../../components/TableHeader";
 import DnsIcon from "@mui/icons-material/Dns";
+import { getTableHeight } from "../../shared/calculateTableHeights";
+
+const PROJECT_TABLE_BREAKPOINTS = [
+  {
+    minHeight: 1100,
+    tableHeight: "80vh",
+  },
+  {
+    minHeight: 1000,
+    tableHeight: "80vh",
+  },
+  {
+    minHeight: 900,
+    tableHeight: "78vh",
+  },
+  {
+    minHeight: 800,
+    tableHeight: "75vh",
+  },
+  {
+    minHeight: 700,
+    tableHeight: "70vh",
+  },
+  {
+    minHeight: 600,
+    tableHeight: "65vh",
+  },
+  {
+    minHeight: 500,
+    tableHeight: "60vh",
+  },
+  {
+    minHeight: 400,
+    tableHeight: "55vh",
+  },
+  {
+    minHeight: 300,
+    tableHeight: "50vh",
+  },
+];
 
 enum SortOptions {
   CREATED = "created",
@@ -212,7 +252,7 @@ const ProjectTable: FC = () => {
       </Box>
       <TableContainer
         sx={{
-          height: "70vh",
+          height: getTableHeight({ steps: PROJECT_TABLE_BREAKPOINTS }),
         }}
       >
         {projects?.length === 0 ? (
diff --git a/frontend-v2/src/features/results/ResultsTab.tsx b/frontend-v2/src/features/results/ResultsTab.tsx
index 493c1665..ee3ac7cd 100644
--- a/frontend-v2/src/features/results/ResultsTab.tsx
+++ b/frontend-v2/src/features/results/ResultsTab.tsx
@@ -277,7 +277,7 @@ const ResultsTab: FC<{ table: ResultsTableRead }> = ({ table }) => {
   try {
     return (
       <>
-        <FormControl size="small">
+        <FormControl size="small" sx={{ marginTop: '.5rem'}}>
           <InputLabel id="columns-label">Columns</InputLabel>
           <Select
             value={columns}
@@ -297,7 +297,7 @@ const ResultsTab: FC<{ table: ResultsTableRead }> = ({ table }) => {
               })}
           </Select>
         </FormControl>
-        <FormControl size="small">
+        <FormControl size="small" sx={{ marginTop: '.5rem'}}>
           <InputLabel id="rows-label">Rows</InputLabel>
           <Select
             value={rows}
@@ -317,7 +317,7 @@ const ResultsTab: FC<{ table: ResultsTableRead }> = ({ table }) => {
               })}
           </Select>
         </FormControl>
-        <FormControl size="small">
+        <FormControl size="small" sx={{ marginTop: '.5rem'}}>
           <InputLabel id="filter1-label">{rowFilter1?.label}</InputLabel>
           <Select
             labelId="filter1-label"
@@ -335,7 +335,7 @@ const ResultsTab: FC<{ table: ResultsTableRead }> = ({ table }) => {
             })}
           </Select>
         </FormControl>
-        <FormControl size="small">
+        <FormControl size="small" sx={{ marginTop: '.5rem'}}>
           <InputLabel id="filter2-label">{rowFilter2?.label}</InputLabel>
           <Select
             labelId="filter2-label"

From b415afa9b67dab0e723fe4937cfb966907555302 Mon Sep 17 00:00:00 2001
From: niestrow <wojciech.niestroj@contractors.roche.com>
Date: Mon, 2 Dec 2024 13:18:46 +0100
Subject: [PATCH 07/11] Disable edit button on shared projects

---
 frontend-v2/src/features/projects/Project.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend-v2/src/features/projects/Project.tsx b/frontend-v2/src/features/projects/Project.tsx
index 6bcd21ce..51882e02 100644
--- a/frontend-v2/src/features/projects/Project.tsx
+++ b/frontend-v2/src/features/projects/Project.tsx
@@ -332,7 +332,7 @@ const ProjectRow: FC<Props> = ({
           {!isEditMode ? (
             <Stack component="span" direction="row" spacing={0.0}>
               <Tooltip title="Edit project">
-                <IconButton onClick={() => setIsEditMode(true)}>
+                <IconButton disabled={isSharedWithMe} onClick={() => setIsEditMode(true)}>
                   <EditIcon />
                 </IconButton>
               </Tooltip>

From b5d16b6f213d35514729a53bc2ec0180132ca06b Mon Sep 17 00:00:00 2001
From: niestrow <wojciech.niestroj@contractors.roche.com>
Date: Mon, 2 Dec 2024 13:24:45 +0100
Subject: [PATCH 08/11] Simulation page - Add confirmation box to removing plot

---
 frontend-v2/src/features/simulation/SimulationPlotView.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend-v2/src/features/simulation/SimulationPlotView.tsx b/frontend-v2/src/features/simulation/SimulationPlotView.tsx
index 2b0312e8..d4392d20 100644
--- a/frontend-v2/src/features/simulation/SimulationPlotView.tsx
+++ b/frontend-v2/src/features/simulation/SimulationPlotView.tsx
@@ -307,7 +307,9 @@ const SimulationPlotView: FC<SimulationPlotProps> = ({
   };
 
   const handleRemovePlot = () => {
-    remove(index);
+    if (window.confirm("Are you sure you want to delete this plot?")) {
+      remove(index);
+    }
   };
 
   const handleClose = () => {

From 4ae1e41e5453c657e067552ff40eb9a83426e4b4 Mon Sep 17 00:00:00 2001
From: niestrow <wojciech.niestroj@contractors.roche.com>
Date: Tue, 3 Dec 2024 12:16:26 +0100
Subject: [PATCH 09/11] Fix plot buttons being overlapped

---
 frontend-v2/src/features/simulation/SimulationPlotView.tsx | 4 +++-
 frontend-v2/src/features/simulation/Simulations.tsx        | 5 +++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend-v2/src/features/simulation/SimulationPlotView.tsx b/frontend-v2/src/features/simulation/SimulationPlotView.tsx
index d4392d20..f5c155fa 100644
--- a/frontend-v2/src/features/simulation/SimulationPlotView.tsx
+++ b/frontend-v2/src/features/simulation/SimulationPlotView.tsx
@@ -272,6 +272,7 @@ interface SimulationPlotProps {
     width: number;
     height: number;
   };
+  plotCount: number;
 }
 
 const SimulationPlotView: FC<SimulationPlotProps> = ({
@@ -291,6 +292,7 @@ const SimulationPlotView: FC<SimulationPlotProps> = ({
   isVertical,
   isHorizontal,
   dimensions,
+  plotCount
 }) => {
   const projectId = useSelector(
     (state: RootState) => state.main.selectedProject,
@@ -470,7 +472,7 @@ const SimulationPlotView: FC<SimulationPlotProps> = ({
 
   const getPlotDimensions = () => {
     const buffor = 10;
-    const columnCount = screen.width > 2500 ? 3 : 2;
+    const columnCount = Math.min(plotCount, screen.width > 2500 ? 3 : 2);
     const layoutBreakpoint = 900;
 
     if (isVertical && !isHorizontal) {
diff --git a/frontend-v2/src/features/simulation/Simulations.tsx b/frontend-v2/src/features/simulation/Simulations.tsx
index 80a824d2..23770386 100644
--- a/frontend-v2/src/features/simulation/Simulations.tsx
+++ b/frontend-v2/src/features/simulation/Simulations.tsx
@@ -434,6 +434,9 @@ const Simulations: FC = () => {
       return 12
     }
 
+    if (plots?.length === 1) return 12;
+    if (plots?.length === 2) return 6;
+
     return screen.width > 2500 ? 4 : 6
   }
 
@@ -482,6 +485,7 @@ const Simulations: FC = () => {
         setShowReference={setShowReference}
         shouldShowLegend={shouldShowLegend}
         setShouldShowLegend={setShouldShowLegend}
+        plotCount={plots?.length}
       />
       <Box
         sx={{
@@ -522,6 +526,7 @@ const Simulations: FC = () => {
                   isVertical={isVertical}
                   isHorizontal={isHorizontal}
                   dimensions={dimensions}
+                  plotCount={plots?.length}
                 />
               ) : (
                 <div>Loading...</div>

From f5ec1b5bf9b1f150adcd45e6191a674553ca7566 Mon Sep 17 00:00:00 2001
From: niestrow <wojciech.niestroj@contractors.roche.com>
Date: Tue, 3 Dec 2024 12:34:15 +0100
Subject: [PATCH 10/11] Remove unintentional prop pass

---
 frontend-v2/src/features/simulation/Simulations.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend-v2/src/features/simulation/Simulations.tsx b/frontend-v2/src/features/simulation/Simulations.tsx
index 23770386..e0848e72 100644
--- a/frontend-v2/src/features/simulation/Simulations.tsx
+++ b/frontend-v2/src/features/simulation/Simulations.tsx
@@ -485,7 +485,6 @@ const Simulations: FC = () => {
         setShowReference={setShowReference}
         shouldShowLegend={shouldShowLegend}
         setShouldShowLegend={setShouldShowLegend}
-        plotCount={plots?.length}
       />
       <Box
         sx={{

From 98241df1bd257b805ca42172b7547cc728cad31d Mon Sep 17 00:00:00 2001
From: niestrow <wojciech.niestroj@contractors.roche.com>
Date: Tue, 3 Dec 2024 13:08:13 +0100
Subject: [PATCH 11/11] Add Ref prefix to reference plot lines; Fix plots not
 resize on initial load

---
 frontend-v2/src/features/simulation/SimulationPlotView.tsx | 6 ++++--
 frontend-v2/src/features/simulation/Simulations.tsx        | 4 ++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend-v2/src/features/simulation/SimulationPlotView.tsx b/frontend-v2/src/features/simulation/SimulationPlotView.tsx
index f5c155fa..519b3082 100644
--- a/frontend-v2/src/features/simulation/SimulationPlotView.tsx
+++ b/frontend-v2/src/features/simulation/SimulationPlotView.tsx
@@ -166,6 +166,7 @@ function generatePlotData(
   model: CombinedModelRead,
   variables: VariableRead[],
   xconversionFactor: number,
+  isReference?: boolean
 ) {
   const visible =
     index === 0
@@ -199,7 +200,7 @@ function generatePlotData(
       yaxis: y_axis.right ? "y2" : undefined,
       x: d.time.map((t) => t * xconversionFactor),
       y: variableValues.map((v) => v * yconversionFactor),
-      name: `${variableName} ${group?.name || "project"}`,
+      name: `${isReference ? 'REF' : ''} ${variableName} ${group?.name || "project"}`,
       visible: visible ? true : "legendonly",
       line: {
         color: colour,
@@ -212,7 +213,7 @@ function generatePlotData(
       x: [],
       y: [],
       type: "scatter",
-      name: `${y_axis.variable} ${group?.name || "project"}`,
+      name: `${isReference ? 'REF' : ''} ${y_axis.variable} ${group?.name || "project"}`,
       visible: visible ? true : "legendonly",
     };
   }
@@ -409,6 +410,7 @@ const SimulationPlotView: FC<SimulationPlotProps> = ({
               model,
               variables,
               xconversionFactor,
+              true
             );
             ({ minY, maxY, minY2, maxY2 } = minMaxAxisLimits(
               plotDataReference.y,
diff --git a/frontend-v2/src/features/simulation/Simulations.tsx b/frontend-v2/src/features/simulation/Simulations.tsx
index e0848e72..194f78be 100644
--- a/frontend-v2/src/features/simulation/Simulations.tsx
+++ b/frontend-v2/src/features/simulation/Simulations.tsx
@@ -424,7 +424,7 @@ const Simulations: FC = () => {
       width: containerRef?.current?.clientWidth || 0,
       height: containerRef?.current?.clientHeight || 0
     });
-  }, [plots?.length])
+  }, [data?.length, model, plots?.length])
 
   const isHorizontal = layout.includes('horizontal') || layout?.length === 0;
   const isVertical = layout.includes('vertical') || layout?.length === 0;
@@ -440,7 +440,7 @@ const Simulations: FC = () => {
     return screen.width > 2500 ? 4 : 6
   }
 
-  const tableLayout = getXlLayout(); 
+  const tableLayout = getXlLayout();
 
   const loading = [
     isProjectLoading,