Feedback changes and fixes

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"
                         >

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}

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

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

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 ? (

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"

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,
@@ -308,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 = () => {
@@ -475,34 +476,34 @@ 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,
           };
     }
 
     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,
         };
   };

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
+    });
+  }, [plots?.length])
+
   const isHorizontal = layout.includes('horizontal') || layout?.length === 0;
   const isVertical = layout.includes('vertical') || layout?.length === 0;
 
@@ -431,7 +437,7 @@ const Simulations: FC = () => {
     return screen.width > 2500 ? 4 : 6
   }
 
-  const tableLayout = getXlLayout();
+  const tableLayout = getXlLayout(); 
 
   const loading = [
     isProjectLoading,
@@ -449,7 +455,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}

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",
   },
 ];
 
@@ -157,7 +165,7 @@ export const SimulationsSidePanel = ({
     if (layout.includes(value)) {
       setLayout(layout.filter(layoutValue => value !== layoutValue))
     } else {
-      setLayout([...layout, value]);
+      setLayout(layout?.length ? [] : [value]);
     }
   }
 
@@ -171,6 +179,7 @@ export const SimulationsSidePanel = ({
         flexDirection: "column",
         justifyContent: "space-between",
         height: "100%",
+        maxHeight: '100%',
         paddingBottom: "1rem",
         backgroundColor: "#FBFBFA",
         borderRight: "1px solid #DBD6D1"