Feedback changes and fixes (#615)

* Simulations sidebar - no layout options selected by default * Simulations sidebar - selecting both layouts deselects both options * Fix pkpd version overlap navigation buttons on high scales * 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 * Simulation page - fix plots box having wrong dimensions on first plot render * Input width and table height adjustments for scales up to 200% * Disable edit button on shared projects * Simulation page - Add confirmation box to removing plot * Fix plot buttons being overlapped * Remove unintentional prop pass * Add Ref prefix to reference plot lines; Fix plots not resize on initial load --------- Co-authored-by: Martin Robinson <[email protected]>
pkpdapp-team · Dec 3, 2024 · 579a09c · 579a09c
1 parent 0a1369f
commit 579a09c
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 31 deletions.
diff --git 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
@@ -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/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>
   );
 

diff --git 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>
@@ -327,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>
@@ -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
@@ -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
@@ -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"

diff --git 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,
@@ -167,6 +166,7 @@ function generatePlotData(
   model: CombinedModelRead,
   variables: VariableRead[],
   xconversionFactor: number,
+  isReference?: boolean
 ) {
   const visible =
     index === 0
@@ -200,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,
@@ -213,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",
     };
   }
@@ -273,6 +273,7 @@ interface SimulationPlotProps {
     width: number;
     height: number;
   };
+  plotCount: number;
 }
 
 const SimulationPlotView: FC<SimulationPlotProps> = ({
@@ -292,6 +293,7 @@ const SimulationPlotView: FC<SimulationPlotProps> = ({
   isVertical,
   isHorizontal,
   dimensions,
+  plotCount
 }) => {
   const projectId = useSelector(
     (state: RootState) => state.main.selectedProject,
@@ -308,7 +310,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 = () => {
@@ -406,6 +410,7 @@ const SimulationPlotView: FC<SimulationPlotProps> = ({
               model,
               variables,
               xconversionFactor,
+              true
             );
             ({ minY, maxY, minY2, maxY2 } = minMaxAxisLimits(
               plotDataReference.y,
@@ -469,40 +474,40 @@ 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) {
       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,
           };
     }
 
     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
@@ -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(() => {
@@ -420,6 +419,13 @@ const Simulations: FC = () => {
     };
   });
 
+  useEffect(() => {
+    setDimensions({
+      width: containerRef?.current?.clientWidth || 0,
+      height: containerRef?.current?.clientHeight || 0
+    });
+  }, [data?.length, model, plots?.length])
+
   const isHorizontal = layout.includes('horizontal') || layout?.length === 0;
   const isVertical = layout.includes('vertical') || layout?.length === 0;
 
@@ -428,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
   }
 
@@ -449,7 +458,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}
@@ -516,6 +525,7 @@ const Simulations: FC = () => {
                   isVertical={isVertical}
                   isHorizontal={isHorizontal}
                   dimensions={dimensions}
+                  plotCount={plots?.length}
                 />
               ) : (
                 <div>Loading...</div>