From 69fbf1a88d7abb36ad0281de165e4769b69e1f44 Mon Sep 17 00:00:00 2001
From: niestrow <wojciech.niestroj@contractors.roche.com>
Date: Fri, 29 Nov 2024 16:23:22 +0100
Subject: [PATCH 1/2] PKPDX-34

---
 frontend-v2/src/components/DynamicTabs.tsx    |   4 +-
 frontend-v2/src/components/SelectField.tsx    |   1 +
 .../model/AdditionalParametersRow.tsx         | 371 ++++++++++++++++++
 frontend-v2/src/features/model/CodeModal.tsx  |  56 +++
 .../src/features/model/MapVariablesTab.tsx    | 256 ++++++++----
 frontend-v2/src/features/model/Model.tsx      |  81 ++--
 .../src/features/model/PKPDModelTab.tsx       |  55 ++-
 .../src/features/model/ParameterRow.tsx       |  23 +-
 .../src/features/model/ParametersTab.tsx      |  70 ++--
 .../src/features/model/VariableRow.tsx        | 194 +--------
 .../model/secondary/SecondaryParameters.tsx   |   5 +-
 .../model/secondary/ThresholdsTable.tsx       |  93 +++--
 .../model/secondary/TimeIntervalsTable.tsx    | 106 +++--
 13 files changed, 892 insertions(+), 423 deletions(-)
 create mode 100644 frontend-v2/src/features/model/AdditionalParametersRow.tsx
 create mode 100644 frontend-v2/src/features/model/CodeModal.tsx

diff --git a/frontend-v2/src/components/DynamicTabs.tsx b/frontend-v2/src/components/DynamicTabs.tsx
index b83e674ba..c8319b830 100644
--- a/frontend-v2/src/components/DynamicTabs.tsx
+++ b/frontend-v2/src/components/DynamicTabs.tsx
@@ -37,6 +37,7 @@ interface DynamicTabsProps {
   tabErrors?: { [key: string]: string };
   isOtherSpeciesSelected?: boolean;
   tumourModelWithNoKillModel?: boolean;
+  marginBottom?: number;
 }
 
 interface TabPanelProps {
@@ -58,6 +59,7 @@ export const DynamicTabs: FC<PropsWithChildren<DynamicTabsProps>> = ({
   tabErrors,
   isOtherSpeciesSelected,
   tumourModelWithNoKillModel,
+  marginBottom = 5,
   children,
 }) => {
   const [currentTab, setCurrentTab] = useState(0);
@@ -113,7 +115,7 @@ export const DynamicTabs: FC<PropsWithChildren<DynamicTabsProps>> = ({
   return (
     <TabContext.Provider value={{ currentTab, setCurrentTab }}>
       <Box sx={{ width: "100%" }}>
-        <Box sx={{ borderBottom: 1, borderColor: "divider", marginBottom: 5 }}>
+        <Box sx={{ borderBottom: 1, borderColor: "divider", marginBottom: marginBottom }}>
           <Tabs
             value={currentTab}
             onChange={handleChange}
diff --git a/frontend-v2/src/components/SelectField.tsx b/frontend-v2/src/components/SelectField.tsx
index af0de5510..aab56d602 100644
--- a/frontend-v2/src/components/SelectField.tsx
+++ b/frontend-v2/src/components/SelectField.tsx
@@ -63,6 +63,7 @@ function SelectField<T extends FieldValues>({
             {getLabel(label || "", Boolean(rules?.required))}
           </InputLabel>
           <Select
+            sx={sx}
             size={size}
             labelId={labelId}
             name={name}
diff --git a/frontend-v2/src/features/model/AdditionalParametersRow.tsx b/frontend-v2/src/features/model/AdditionalParametersRow.tsx
new file mode 100644
index 000000000..46bcf25dd
--- /dev/null
+++ b/frontend-v2/src/features/model/AdditionalParametersRow.tsx
@@ -0,0 +1,371 @@
+// src/components/ProjectTable.tsx
+import { FC, useEffect } from "react";
+import { Control, useFieldArray, useForm } from "react-hook-form";
+import {
+  TableCell,
+  TableRow,
+  Checkbox as MuiCheckbox,
+  FormControlLabel,
+  Tooltip,
+  Typography,
+  Radio,
+} from "@mui/material";
+import {
+  Variable,
+  useVariableUpdateMutation,
+  CombinedModelRead,
+  CompoundRead,
+  ProjectRead,
+  UnitRead,
+  VariableRead,
+} from "../../app/backendApi";
+import useDirty from "../../hooks/useDirty";
+import { FormData } from "./Model";
+import { useSelector } from "react-redux";
+import { RootState } from "../../app/store";
+import { selectIsProjectShared } from "../login/loginSlice";
+import useEditProtocol from "./useEditProtocol";
+
+interface Props {
+  project: ProjectRead;
+  compound: CompoundRead;
+  model: CombinedModelRead;
+  variable: VariableRead;
+  control: Control<FormData>;
+  effectVariable: VariableRead | undefined;
+  units: UnitRead[];
+  timeVariable: VariableRead | undefined;
+  updateDosings: (key: number, value: boolean) => void;
+  updateLinksToPd: (key: number, value: boolean) => void;
+  isAnyLinkToPdSelected: boolean;
+  updateLagTimes: (key: number, value: boolean) => void;
+  isAnyLagTimeSelected: boolean;
+}
+
+type DerivedVariableType = "AUC" | "RO" | "FUP" | "BPR" | "TLG";
+
+const derivedVariableRegex = /calc_.*_(f|bl|RO)/;
+
+const AdditionalParametersRow: FC<Props> = ({
+  project,
+  compound,
+  model,
+  variable,
+  control,
+  effectVariable,
+  units,
+  timeVariable,
+  updateDosings,
+  updateLinksToPd,
+  isAnyLinkToPdSelected,
+  updateLagTimes,
+  isAnyLagTimeSelected,
+}) => {
+  const {
+    fields: mappings,
+    append: appendMapping,
+    remove: removeMapping,
+  } = useFieldArray({
+    control,
+    name: "model.mappings",
+  });
+  const {
+    fields: derivedVariables,
+    append: derivedVariablesAppend,
+    remove: derivedVariablesRemove,
+  } = useFieldArray({
+    control,
+    name: "model.derived_variables",
+  });
+
+  const {
+    handleSubmit,
+    reset,
+    formState: { isDirty: isDirtyForm },
+    watch,
+  } = useForm<Variable>({ defaultValues: variable || { id: 0, name: "" } });
+  const watchProtocolId = watch("protocol");
+  const isDirty = watchProtocolId !== variable?.protocol || isDirtyForm;
+  useDirty(isDirty);
+  const [updateVariable] = useVariableUpdateMutation();
+  const { hasProtocol } = useEditProtocol({
+    compound,
+    project,
+    units,
+    timeVariable,
+    variable,
+    watchProtocolId,
+  });
+
+  const isSharedWithMe = useSelector((state: RootState) =>
+    selectIsProjectShared(state, project),
+  );
+
+  useEffect(() => {
+    reset(variable);
+  }, [variable, reset]);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      if (isDirty) {
+        handleSubmit((data) => {
+          // @ts-expect-error - lower_bound and upper_bound can be null
+          if (data.lower_bound === "") {
+            data.lower_bound = null;
+          }
+          // @ts-expect-error - lower_bound and upper_bound can be null
+          if (data.upper_bound === "") {
+            data.upper_bound = null;
+          }
+          updateVariable({ id: variable.id, variable: data });
+        })();
+      }
+    }, 1000);
+    return () => clearInterval(intervalId);
+  }, [handleSubmit, isDirty, updateVariable, variable.id]);
+
+  const isPD = variable.qname.startsWith("PD");
+  const linkToPD = isPD
+    ? false
+    : mappings.find((mapping) => mapping.pk_variable === variable.id) !==
+      undefined;
+
+  const onClickDerived = (type: DerivedVariableType) => () => {
+    const index = derivedIndex(type);
+    return index >= 0 ? removeDerived(index) : addDerived(type);
+  };
+
+  const derivedIndex = (type: DerivedVariableType) => {
+    return derivedVariables.findIndex(
+      (ro) => ro.pk_variable === variable.id && ro.type === type,
+    );
+  };
+
+  const isLinkedTo = (type: DerivedVariableType) => {
+    return derivedIndex(type) >= 0;
+  };
+
+  useEffect(() => {
+    updateDosings(variable.id, hasProtocol);
+  }, [variable.id, hasProtocol, updateDosings]);
+
+  useEffect(() => {
+    updateLinksToPd(variable.id, linkToPD);
+  }, [variable.id, linkToPD, updateLinksToPd]);
+
+  const isLinkedToTLG = derivedIndex("TLG") >= 0;
+  useEffect(() => {
+    updateLagTimes(variable.id, isLinkedToTLG);
+  }, [variable.id, isLinkedToTLG, updateLagTimes]);
+
+  if (
+    variable.constant ||
+    variable.name === "t" ||
+    variable.name === "C_Drug"
+  ) {
+    return null;
+  }
+
+  const concentrationUnit = units.find((unit) => unit.symbol === "pmol/L");
+  const isClinical = project.species === "H";
+  const amountUnit = units.find(
+    (unit) => unit.symbol === (isClinical ? "pmol" : "pmol/kg"),
+  );
+  const variableUnit = units.find((unit) => unit.id === variable.unit);
+  if (concentrationUnit === undefined || amountUnit === undefined) {
+    return <>No concentration or amount unit found</>;
+  }
+
+  const isConcentration =
+    concentrationUnit?.compatible_units.find(
+      (unit) => parseInt(unit.id) === variable.unit,
+    ) !== undefined;
+  const isAmount =
+    variableUnit?.symbol !== "" &&
+    amountUnit?.compatible_units.find(
+      (unit) => parseInt(unit.id) === variable.unit,
+    ) !== undefined;
+
+  const addPDMapping = () => {
+    if (effectVariable) {
+      if (mappings.length > 0) {
+        removeMapping(0);
+      }
+      appendMapping({
+        pk_variable: variable.id,
+        pd_variable: effectVariable.id,
+        pkpd_model: model.id,
+      });
+    }
+  };
+
+  const removePDMapping = () => {
+    const mapping_index = mappings.findIndex(
+      (mapping) => mapping.pk_variable === variable.id,
+    );
+    if (mapping_index >= 0) {
+      removeMapping(mapping_index);
+    }
+  };
+
+  const addDerived = (type: DerivedVariableType) => {
+    // can only be one 'FUP' and one 'BPR' across all variables
+    const sameType = derivedVariables
+      .map((d, i) => ({ ...d, index: i }))
+      .filter((ro) => ro.type === type)
+      .map((ro) => ro.index);
+
+    const onlyOne = type === "FUP" || type === "BPR";
+    if (onlyOne && sameType.length > 0) {
+      removeDerived(sameType);
+    }
+
+    derivedVariablesAppend({
+      pk_variable: variable.id,
+      pkpd_model: model.id,
+      type,
+    });
+  };
+
+  const removeDerived = (index: number | number[]) => {
+    derivedVariablesRemove(index);
+  };
+
+  const noMapToPD = isPD || effectVariable === undefined || !isConcentration;
+  const noDerivedVariables = !isConcentration || isPD;
+  const isC1 = model.is_library_model && variable.qname.endsWith(".C1");
+  const disableAuc = false;
+  const disableRo =
+    !compound.dissociation_constant || !compound.target_concentration;
+  const disableFUP =
+    !compound.fraction_unbound_plasma || compound.compound_type === "LM";
+  const disableBPR =
+    !compound.blood_to_plasma_ratio || compound.compound_type === "LM";
+  const noDosing = !isAmount;
+
+  const isDerivedVariable = variable.name.match(derivedVariableRegex) !== null;
+
+  if (noMapToPD && noDerivedVariables && noDosing) {
+    return null;
+  }
+
+  const modelHaveTLag = model.has_lag;
+
+  return !modelHaveTLag && noMapToPD && noDerivedVariables ? null : (
+    <TableRow>
+      <TableCell size="small" width="5rem">
+        <Tooltip title={variable.description}>
+          <Typography>{variable.name}</Typography>
+        </Tooltip>
+      </TableCell>
+      {modelHaveTLag && (
+        <TableCell size="small" sx={{ width: "5rem" }}>
+          {!noDosing && (
+            <FormControlLabel
+              control={
+                <MuiCheckbox
+                  sx={{
+                    "& .MuiSvgIcon-root": {
+                      color: isAnyLagTimeSelected ? "inherit" : "red",
+                    },
+                  }}
+                  checked={isLinkedTo("TLG")}
+                  onClick={onClickDerived("TLG")}
+                  data-cy={`checkbox-tlag-${variable.name}`}
+                  disabled={isSharedWithMe}
+                />
+              }
+              label=""
+            />
+          )}
+        </TableCell>
+      )}
+      {model.pd_model && (
+        <TableCell size="small" sx={{ width: "8rem" }}>
+          {!noMapToPD && (
+            <FormControlLabel
+              control={
+                <Radio
+                  sx={{
+                    "& .MuiSvgIcon-root": {
+                      color: isAnyLinkToPdSelected ? "inherit" : "red",
+                    },
+                  }}
+                  checked={linkToPD}
+                  disabled={isSharedWithMe}
+                  onClick={() =>
+                    linkToPD ? removePDMapping() : addPDMapping()
+                  }
+                  data-cy={`checkbox-map-to-pd-${variable.name}`}
+                />
+              }
+              label=""
+            />
+          )}
+        </TableCell>
+      )}
+      <TableCell size="small" sx={{ width: "15rem" }}>
+        {!noDerivedVariables && (
+          <FormControlLabel
+            disabled={disableAuc || isSharedWithMe}
+            control={
+              <MuiCheckbox
+                checked={isLinkedTo("AUC")}
+                onClick={onClickDerived("AUC")}
+              />
+            }
+            label=""
+          />
+        )}
+      </TableCell>
+      <TableCell size="small">
+        {!noDerivedVariables && (
+          <FormControlLabel
+            disabled={disableRo || isSharedWithMe}
+            control={
+              <MuiCheckbox
+                checked={isLinkedTo("RO")}
+                onClick={onClickDerived("RO")}
+              />
+            }
+            label=""
+          />
+        )}
+      </TableCell>
+      {compound.compound_type === "SM" && (
+        <>
+          <TableCell size="small" sx={{ width: "15rem" }}>
+            {isC1 && !noDerivedVariables && !isDerivedVariable && (
+              <FormControlLabel
+                disabled={disableFUP || isSharedWithMe}
+                control={
+                  <Radio
+                    checked={isLinkedTo("FUP")}
+                    onClick={onClickDerived("FUP")}
+                  />
+                }
+                label=""
+              />
+            )}
+          </TableCell>
+          <TableCell size="small" sx={{ width: "15rem" }}>
+            {isC1 && !noDerivedVariables && !isDerivedVariable && (
+              <FormControlLabel
+                disabled={disableBPR || isSharedWithMe}
+                control={
+                  <Radio
+                    checked={isLinkedTo("BPR")}
+                    onClick={onClickDerived("BPR")}
+                  />
+                }
+                label=""
+              />
+            )}
+          </TableCell>
+        </>
+      )}
+    </TableRow>
+  );
+};
+
+export default AdditionalParametersRow;
diff --git a/frontend-v2/src/features/model/CodeModal.tsx b/frontend-v2/src/features/model/CodeModal.tsx
new file mode 100644
index 000000000..894d2e7b3
--- /dev/null
+++ b/frontend-v2/src/features/model/CodeModal.tsx
@@ -0,0 +1,56 @@
+import {
+  Box,
+  Modal,
+  Typography,
+  IconButton,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { TableHeader } from "../../components/TableHeader";
+
+export const CodeModal = ({ isOpen, onClose, code }: { isOpen: boolean, onClose: () => void, code: string }) => {
+  return (
+    <Modal onClose={onClose} open={isOpen}>
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100%",
+          flexDirection: "column",
+        }}
+      >
+        <Box
+          sx={{
+            width: "50wh",
+            backgroundColor: "white",
+            display: "flex",
+            flexDirection: "column",
+            padding: "1rem",
+            justifyItems: "center",
+          }}
+        >
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
+
+          <TableHeader label="Code" />
+          <IconButton onClick={onClose}>
+            <CloseIcon />
+          </IconButton>
+            </Box>
+          <Typography
+            sx={{
+              whiteSpace: "pre-wrap",
+              maxHeight: "50vh",
+              overflow: "auto",
+              marginTop: '1rem',
+              backgroundColor: 'WhiteSmoke',
+              padding: '6px',
+              border: '1px solid dimgray'
+            }}
+          >
+            {code}
+          </Typography>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
diff --git a/frontend-v2/src/features/model/MapVariablesTab.tsx b/frontend-v2/src/features/model/MapVariablesTab.tsx
index fc369f42e..4617b7199 100644
--- a/frontend-v2/src/features/model/MapVariablesTab.tsx
+++ b/frontend-v2/src/features/model/MapVariablesTab.tsx
@@ -9,6 +9,7 @@ import {
 } from "../../app/backendApi";
 import { Control } from "react-hook-form";
 import {
+  Box,
   Table,
   TableBody,
   TableCell,
@@ -21,6 +22,36 @@ import VariableRow from "./VariableRow";
 import HelpButton from "../../components/HelpButton";
 import { FormData } from "./Model";
 import { defaultHeaderSx } from "../../shared/tableHeadersSx";
+import { TableHeader } from "../../components/TableHeader";
+import AdditionalParametersRow from "./AdditionalParametersRow";
+import { getTableHeight } from "../../shared/calculateTableHeights";
+
+export const TABLE_BREAKPOINTS = [
+  {
+    minHeight: 1100,
+    tableHeight: "38uvh",
+  },
+  {
+    minHeight: 1000,
+    tableHeight: "36vh",
+  },
+  {
+    minHeight: 900,
+    tableHeight: "32vh",
+  },
+  {
+    minHeight: 800,
+    tableHeight: "30vh",
+  },
+  {
+    minHeight: 700,
+    tableHeight: "27vh",
+  },
+  {
+    minHeight: 600,
+    tableHeight: "23vh",
+  },
+];
 
 interface Props {
   model: CombinedModelRead;
@@ -258,34 +289,95 @@ const MapVariablesTab: FC<Props> = ({
   };
 
   return (
-    <TableContainer sx={{ width: "90%" }}>
-      <Table>
-        <TableHead>
-          <TableRow>
+    <>
+      <TableHeader variant="h5" label="Select Dosing Route(s)" />
+      <TableContainer
+        sx={{
+          width: "90%",
+          marginTop: 0,
+          maxHeight: getTableHeight({ steps: TABLE_BREAKPOINTS }),
+        }}
+      >
+        <Table
+          stickyHeader
+          size="small"
+          sx={{ "& .MuiTableCell-head": { lineHeight: 1 } }}
+        >
+          <TableHead>
+            <TableRow>
+              <TableCell size="small">
+                <div style={{ ...defaultHeaderSx }}>Name</div>
+              </TableCell>
+              <TableCell size="small">
+                <div style={{ ...defaultHeaderSx }}>
+                  Unit
+                  <HelpButton title={"Unit"}>{unitsHelp}</HelpButton>
+                </div>
+              </TableCell>
+              <TableCell size="small">
+                <div style={{ ...defaultHeaderSx }}>Type</div>
+              </TableCell>
+              <Tooltip placement="top-start" title="Select dosing compartment">
+                <TableCell size="small">
+                  <div ref={iconRef} style={{ ...defaultHeaderSx }}>
+                    <p>
+                      Dosing Compartment <span style={{ color: "red" }}>*</span>
+                    </p>
+                    <HelpButton title={"Dosing Compartment"}>
+                      {dosingCompartmentHelp}
+                    </HelpButton>
+                  </div>
+                </TableCell>
+              </Tooltip>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {variables.length === 0 && (
+              <TableRow>
+                <TableCell colSpan={5}>No variables found</TableCell>
+              </TableRow>
+            )}
+            {timeVaryingVariables.sort(sortVariables).map((variable) => (
+              <VariableRow
+                key={variable.id}
+                variable={variable}
+                model={model}
+                control={control}
+                project={project}
+                compound={compound}
+                effectVariable={effectVariable}
+                units={units}
+                timeVariable={timeVariable}
+                updateDosings={updateDosings}
+                isAnyDosingSelected={isAnyDosingSelected}
+                updateLinksToPd={updateLinksToPd}
+                isAnyLinkToPdSelected={isAnyLinkToPdSelected}
+                updateLagTimes={updateLagTimes}
+                isAnyLagTimeSelected={isAnyLagTimeSelected}
+              />
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <Box sx={{ marginTop: ".5rem" }}>
+        <TableHeader
+          variant="h5"
+          label="Map RO, PD and secondary parameters"
+          sx={{ marginTop: ".5rem" }}
+        />
+      </Box>
+      <TableContainer
+        sx={{
+          width: "90%",
+          marginTop: "1rem",
+          maxHeight: getTableHeight({ steps: TABLE_BREAKPOINTS }),
+        }}
+      >
+        <Table stickyHeader sx={{ "& .MuiTableCell-head": { lineHeight: 1 } }}>
+          <TableHead>
             <TableCell>
               <div style={{ ...defaultHeaderSx }}>Name</div>
             </TableCell>
-            <TableCell>
-              <div style={{ ...defaultHeaderSx }}>
-                Unit
-                <HelpButton title={"Unit"}>{unitsHelp}</HelpButton>
-              </div>
-            </TableCell>
-            <TableCell>
-              <div style={{ ...defaultHeaderSx }}>Type</div>
-            </TableCell>
-            <Tooltip placement="top-start" title="Select dosing compartment">
-              <TableCell>
-                <div ref={iconRef} style={{ ...defaultHeaderSx }}>
-                  <p>
-                    Dosing Compartment <span style={{ color: "red" }}>*</span>
-                  </p>
-                  <HelpButton title={"Dosing Compartment"}>
-                    {dosingCompartmentHelp}
-                  </HelpButton>
-                </div>
-              </TableCell>
-            </Tooltip>
             {haveTLag && (
               <TableCell>
                 <div style={{ ...defaultHeaderSx }}>
@@ -337,64 +429,62 @@ const MapVariablesTab: FC<Props> = ({
                 </div>
               </TableCell>
             </Tooltip>
-            <Tooltip
-              placement="top-start"
-              title="Unbound concentration is calculated"
-            >
-              <TableCell>
-                <div style={{ ...defaultHeaderSx }}>
-                  {" "}
-                  Unbound Concentration
-                  <HelpButton title={"Unbound Concentration"}>
-                    {unboundHelp}
-                  </HelpButton>
-                </div>
-              </TableCell>
-            </Tooltip>
-            <Tooltip
-              placement="top-start"
-              title="Blood concentration is calculated"
-            >
-              <TableCell>
-                <div style={{ ...defaultHeaderSx }}>
-                  {" "}
-                  Blood Concentration
-                  <HelpButton title={"Blood concentration"}>
-                    {bloodHelp}
-                  </HelpButton>
-                </div>
-              </TableCell>
-            </Tooltip>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {variables.length === 0 && (
-            <TableRow>
-              <TableCell colSpan={5}>No variables found</TableCell>
-            </TableRow>
-          )}
-          {timeVaryingVariables.sort(sortVariables).map((variable) => (
-            <VariableRow
-              key={variable.id}
-              variable={variable}
-              model={model}
-              control={control}
-              project={project}
-              compound={compound}
-              effectVariable={effectVariable}
-              units={units}
-              timeVariable={timeVariable}
-              updateDosings={updateDosings}
-              isAnyDosingSelected={isAnyDosingSelected}
-              updateLinksToPd={updateLinksToPd}
-              isAnyLinkToPdSelected={isAnyLinkToPdSelected}
-              updateLagTimes={updateLagTimes}
-              isAnyLagTimeSelected={isAnyLagTimeSelected}
-            />
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
+            {compound.compound_type === "SM" && (
+              <>
+                <Tooltip
+                  placement="top-start"
+                  title="Unbound concentration is calculated"
+                >
+                  <TableCell>
+                    <div style={{ ...defaultHeaderSx }}>
+                      {" "}
+                      Unbound Concentration
+                      <HelpButton title={"Unbound Concentration"}>
+                        {unboundHelp}
+                      </HelpButton>
+                    </div>
+                  </TableCell>
+                </Tooltip>
+                <Tooltip
+                  placement="top-start"
+                  title="Blood concentration is calculated"
+                >
+                  <TableCell>
+                    <div style={{ ...defaultHeaderSx }}>
+                      {" "}
+                      Blood Concentration
+                      <HelpButton title={"Blood concentration"}>
+                        {bloodHelp}
+                      </HelpButton>
+                    </div>
+                  </TableCell>
+                </Tooltip>
+              </>
+            )}
+          </TableHead>
+          <TableBody>
+            {timeVaryingVariables.sort(sortVariables).map((variable) => (
+              <AdditionalParametersRow
+                key={variable.id}
+                variable={variable}
+                model={model}
+                control={control}
+                project={project}
+                compound={compound}
+                effectVariable={effectVariable}
+                units={units}
+                timeVariable={timeVariable}
+                updateDosings={updateDosings}
+                updateLinksToPd={updateLinksToPd}
+                isAnyLinkToPdSelected={isAnyLinkToPdSelected}
+                updateLagTimes={updateLagTimes}
+                isAnyLagTimeSelected={isAnyLagTimeSelected}
+              />
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </>
   );
 };
 
diff --git a/frontend-v2/src/features/model/Model.tsx b/frontend-v2/src/features/model/Model.tsx
index 1ef365c4c..b2ffd429e 100644
--- a/frontend-v2/src/features/model/Model.tsx
+++ b/frontend-v2/src/features/model/Model.tsx
@@ -26,6 +26,7 @@ import SecondaryParametersTab from "./secondary/SecondaryParameters";
 import ParametersTab from "./ParametersTab";
 import useDirty from "../../hooks/useDirty";
 import { SubPageName } from "../main/mainSlice";
+import { TableHeader } from "../../components/TableHeader";
 
 export type FormData = {
   project: ProjectRead;
@@ -238,44 +239,48 @@ const Model: FC = () => {
   const isOtherSpeciesSelected = project.species === "O";
 
   return (
-    <DynamicTabs
-      tabNames={tabKeys}
-      tabErrors={tabErrors}
-      isOtherSpeciesSelected={isOtherSpeciesSelected}
-      tumourModelWithNoKillModel={isTumourModel && noKillModel}
-    >
-      <TabPanel>
-        <PKPDModelTab
-          model={model}
-          project={project}
-          control={control}
-          updateModel={updateModel}
-        />
-      </TabPanel>
-      <TabPanel>
-        <MapVariablesTab
-          model={model}
-          project={project}
-          control={control}
-          variables={variables}
-          units={units}
-          compound={compound}
-        />
-      </TabPanel>
-      <TabPanel>
-        <ParametersTab
-          model={model}
-          project={project}
-          control={control}
-          variables={variables}
-          units={units}
-          compound={compound}
-        />
-      </TabPanel>
-      <TabPanel>
-        <SecondaryParametersTab />
-      </TabPanel>
-    </DynamicTabs>
+    <>
+      <TableHeader variant="h4" label="Model" />
+      <DynamicTabs
+        tabNames={tabKeys}
+        tabErrors={tabErrors}
+        isOtherSpeciesSelected={isOtherSpeciesSelected}
+        tumourModelWithNoKillModel={isTumourModel && noKillModel}
+        marginBottom={0}
+      >
+        <TabPanel>
+          <PKPDModelTab
+            model={model}
+            project={project}
+            control={control}
+            updateModel={updateModel}
+          />
+        </TabPanel>
+        <TabPanel>
+          <MapVariablesTab
+            model={model}
+            project={project}
+            control={control}
+            variables={variables}
+            units={units}
+            compound={compound}
+          />
+        </TabPanel>
+        <TabPanel>
+          <ParametersTab
+            model={model}
+            project={project}
+            control={control}
+            variables={variables}
+            units={units}
+            compound={compound}
+          />
+        </TabPanel>
+        <TabPanel>
+          <SecondaryParametersTab />
+        </TabPanel>
+      </DynamicTabs>
+    </>
   );
 };
 
diff --git a/frontend-v2/src/features/model/PKPDModelTab.tsx b/frontend-v2/src/features/model/PKPDModelTab.tsx
index b7cb86588..4f3c783c3 100644
--- a/frontend-v2/src/features/model/PKPDModelTab.tsx
+++ b/frontend-v2/src/features/model/PKPDModelTab.tsx
@@ -9,9 +9,7 @@ import {
   usePharmacokineticListQuery,
 } from "../../app/backendApi";
 import { Control } from "react-hook-form";
-import { Stack, Typography, Grid, Tooltip, Box } from "@mui/material";
-import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight";
-import KeyboardDoubleArrowDownIcon from "@mui/icons-material/KeyboardDoubleArrowDown";
+import { Stack, Grid, Tooltip, Box, Button } from "@mui/material";
 import SelectField from "../../components/SelectField";
 import Checkbox from "../../components/Checkbox";
 import { FormData } from "./Model";
@@ -19,6 +17,8 @@ import { speciesOptions } from "../projects/Project";
 import { useSelector } from "react-redux";
 import { RootState } from "../../app/store";
 import { selectIsProjectShared } from "../login/loginSlice";
+import { CodeModal } from "./CodeModal";
+import CodeOutlinedIcon from "@mui/icons-material/CodeOutlined";
 
 interface Props {
   model: CombinedModelRead;
@@ -69,10 +69,10 @@ const PKPDModelTab: FC<Props> = ({ model, project, control }: Props) => {
     usePharmacodynamicListQuery();
   const { data: pkModels, isLoading: pkModelLoading } =
     usePharmacokineticListQuery();
-  const [showCode, setShowCode] = useState(false);
   const isSharedWithMe = useSelector((state: RootState) =>
     selectIsProjectShared(state, project),
   );
+  const [isCodeModalOpen, setIsCodeModalOpen] = useState(false);
 
   const loading = [pdModelLoading, pkModelLoading];
   if (loading.some((l) => l)) {
@@ -149,10 +149,11 @@ const PKPDModelTab: FC<Props> = ({ model, project, control }: Props) => {
   };
 
   return (
-    <Grid container spacing={2}>
-      <Grid item xl={5} md={8} xs={10}>
+    <Grid container spacing={2} marginTop={5}>
+      <Grid item xl={4} md={8} xs={10}>
         <Stack direction="row" alignItems="center" spacing={1}>
           <SelectField
+            size="small"
             label="Species"
             name="project.species"
             control={control}
@@ -163,9 +164,10 @@ const PKPDModelTab: FC<Props> = ({ model, project, control }: Props) => {
         </Stack>
       </Grid>
       <Grid container item spacing={2}>
-        <Grid item xl={5} md={8} xs={10}>
+        <Grid item xl={4} md={8} xs={10}>
           <Stack direction="row" alignItems="center" spacing={1}>
             <SelectField
+              size="small"
               label="PK Model"
               name="model.pk_model"
               control={control}
@@ -188,6 +190,7 @@ const PKPDModelTab: FC<Props> = ({ model, project, control }: Props) => {
               <Tooltip title="Includes Michaelis-Menten parameters (CLmax and Km)">
                 <div>
                   <Checkbox
+                    size="small"
                     label="Saturation"
                     name="model.has_saturation"
                     control={control}
@@ -238,9 +241,10 @@ const PKPDModelTab: FC<Props> = ({ model, project, control }: Props) => {
         </Grid>
       </Grid>
       <Grid container item spacing={2}>
-        <Grid item xl={5} md={8} xs={10}>
+        <Grid item xl={4} md={8} xs={10}>
           <Stack direction="row" alignItems="center" spacing={1}>
             <SelectField
+              size="small"
               label="PD Model"
               name="model.pd_model"
               control={control}
@@ -254,9 +258,10 @@ const PKPDModelTab: FC<Props> = ({ model, project, control }: Props) => {
         <Box width="100%" />
         {pdIsTumourGrowth && (
           <>
-            <Grid item xl={5} md={8} xs={10}>
+            <Grid item xl={4} md={8} xs={10}>
               <Stack direction="row" alignItems="center" spacing={1}>
                 <SelectField
+                  size="small"
                   label="Secondary PD Model"
                   name="model.pd_model2"
                   control={control}
@@ -297,29 +302,23 @@ const PKPDModelTab: FC<Props> = ({ model, project, control }: Props) => {
                 </Tooltip>
               )}
             </Stack>
+            <Button
+              variant="outlined"
+              onClick={() => setIsCodeModalOpen(true)}
+              sx={{ marginTop: "1rem" }}
+              endIcon={<CodeOutlinedIcon />}
+            >
+              Show code
+            </Button>
           </Grid>
         </Grid>
         <Box width="100%" height="0" />
-        <Grid item xs={5} sx={{ paddingTop: "1rem" }}>
-          <Stack
-            direction="row"
-            sx={{ cursor: "pointer" }}
-            onClick={() => setShowCode(!showCode)}
-          >
-            {showCode ? (
-              <KeyboardDoubleArrowDownIcon sx={{ color: "blue" }} />
-            ) : (
-              <KeyboardDoubleArrowRightIcon sx={{ color: "blue" }} />
-            )}
-            <Typography paddingLeft=".5rem">Show code</Typography>
-          </Stack>
-        </Grid>
-        {showCode && (
-          <Grid item xs={12}>
-            <Typography sx={{ whiteSpace: "pre-wrap" }}>{model.mmt}</Typography>
-          </Grid>
-        )}
       </Grid>
+      <CodeModal
+        isOpen={isCodeModalOpen}
+        onClose={() => setIsCodeModalOpen(false)}
+        code={model.mmt}
+      />
     </Grid>
   );
 };
diff --git a/frontend-v2/src/features/model/ParameterRow.tsx b/frontend-v2/src/features/model/ParameterRow.tsx
index 8c91bd0c6..7a66cf1ff 100644
--- a/frontend-v2/src/features/model/ParameterRow.tsx
+++ b/frontend-v2/src/features/model/ParameterRow.tsx
@@ -4,7 +4,6 @@ import { TableCell, TableRow, Tooltip, Typography } from "@mui/material";
 import {
   Variable,
   useVariableUpdateMutation,
-  CombinedModelRead,
   ProjectRead,
   UnitRead,
   VariableRead,
@@ -19,12 +18,11 @@ import { RootState } from "../../app/store";
 
 interface Props {
   project: ProjectRead;
-  model: CombinedModelRead;
   variable: VariableRead;
   units: UnitRead[];
 }
 
-const ParameterRow: FC<Props> = ({ project, model, variable, units }) => {
+const ParameterRow: FC<Props> = ({ project, variable, units }) => {
   const {
     control,
     handleSubmit,
@@ -81,22 +79,26 @@ const ParameterRow: FC<Props> = ({ project, model, variable, units }) => {
 
   return (
     <TableRow>
-      <TableCell>
+      <TableCell size="small" sx={{ width: "5rem" }}>
         <Tooltip title={variable.description}>
           <Typography>{variable.name}</Typography>
         </Tooltip>
       </TableCell>
-      <TableCell>{type}</TableCell>
-      <TableCell>
+      <TableCell size="small" sx={{ width: "5rem" }}>
+        {type}
+      </TableCell>
+      <TableCell size="small" sx={{ width: "10rem" }}>
         <FloatField
+          size="small"
           name="lower_bound"
           control={control}
           label="Lower"
           textFieldProps={defaultProps}
         />
       </TableCell>
-      <TableCell>
+      <TableCell size="small" sx={{ width: "10rem" }}>
         <FloatField
+          size="small"
           name="default_value"
           control={control}
           label="Value"
@@ -105,16 +107,19 @@ const ParameterRow: FC<Props> = ({ project, model, variable, units }) => {
           textFieldProps={defaultProps}
         />
       </TableCell>
-      <TableCell>
+      <TableCell size="small" sx={{ width: "10rem" }}>
         <FloatField
+          size="small"
           name="upper_bound"
           control={control}
           label="Upper"
           textFieldProps={defaultProps}
         />
       </TableCell>
-      <TableCell>
+      <TableCell size="small">
         <UnitField
+          size="small"
+          sx={{ minWidth: "8rem" }}
           label={"Unit"}
           name={"unit"}
           control={control}
diff --git a/frontend-v2/src/features/model/ParametersTab.tsx b/frontend-v2/src/features/model/ParametersTab.tsx
index 1fc5f7afd..b05044f0a 100644
--- a/frontend-v2/src/features/model/ParametersTab.tsx
+++ b/frontend-v2/src/features/model/ParametersTab.tsx
@@ -18,6 +18,7 @@ import {
   Stack,
   Button,
   Tooltip,
+  Box,
 } from "@mui/material";
 import ParameterRow from "./ParameterRow";
 import HelpButton from "../../components/HelpButton";
@@ -27,6 +28,11 @@ import { defaultHeaderSx } from "../../shared/tableHeadersSx";
 import { useSelector } from "react-redux";
 import { RootState } from "../../app/store";
 import { selectIsProjectShared } from "../login/loginSlice";
+import {
+  getTableHeight,
+  SINGLE_TABLE_BREAKPOINTS,
+} from "../../shared/calculateTableHeights";
+import { TableHeader } from "../../components/TableHeader";
 
 interface Props {
   model: CombinedModelRead;
@@ -61,32 +67,43 @@ const ParametersTab: FC<Props> = ({
 
   return (
     <Stack spacing={2}>
-      {noReset ? (
-        <Tooltip title='No default parameters as "Other" has been selected as species (in "Projects")'>
-          <span>
-            <Button
-              variant="contained"
-              color="primary"
-              onClick={myResetToSpeciesDefaults}
-              disabled={noReset || isSharedWithMe}
-              sx={{ width: 270 }}
-            >
-              Reset to Species Defaults
-            </Button>
-          </span>
-        </Tooltip>
-      ) : (
-        <Button
-          variant="contained"
-          color="primary"
-          onClick={myResetToSpeciesDefaults}
-          disabled={noReset || isSharedWithMe}
-          sx={{ width: 270 }}
-        >
-          Reset to Species Defaults
-        </Button>
-      )}
-      <TableContainer sx={{ width: "90%" }}>
+      <Box sx={{ display: "flex" }}>
+        <TableHeader variant="h5" label="Set Parameters" />
+        {noReset ? (
+          <Tooltip title='No default parameters as "Other" has been selected as species (in "Projects")'>
+            <span>
+              <Button
+                size="small"
+                variant="contained"
+                color="primary"
+                onClick={myResetToSpeciesDefaults}
+                disabled={noReset || isSharedWithMe}
+                sx={{ marginLeft: "1rem" }}
+              >
+                Reset to Species Defaults
+              </Button>
+            </span>
+          </Tooltip>
+        ) : (
+          <Button
+            size="small"
+            variant="contained"
+            color="primary"
+            onClick={myResetToSpeciesDefaults}
+            disabled={noReset || isSharedWithMe}
+            sx={{ marginLeft: "1rem" }}
+          >
+            Reset to Species Defaults
+          </Button>
+        )}
+      </Box>
+
+      <TableContainer
+        sx={{
+          width: "90%",
+          maxHeight: getTableHeight({ steps: SINGLE_TABLE_BREAKPOINTS }),
+        }}
+      >
         <Table>
           <TableHead>
             <TableRow>
@@ -128,7 +145,6 @@ const ParametersTab: FC<Props> = ({
               <ParameterRow
                 key={variable.id}
                 variable={variable}
-                model={model}
                 project={project}
                 units={units}
               />
diff --git a/frontend-v2/src/features/model/VariableRow.tsx b/frontend-v2/src/features/model/VariableRow.tsx
index d84c3b47a..8aaab0cd2 100644
--- a/frontend-v2/src/features/model/VariableRow.tsx
+++ b/frontend-v2/src/features/model/VariableRow.tsx
@@ -38,9 +38,7 @@ interface Props {
   updateDosings: (key: number, value: boolean) => void;
   isAnyDosingSelected: boolean;
   updateLinksToPd: (key: number, value: boolean) => void;
-  isAnyLinkToPdSelected: boolean;
   updateLagTimes: (key: number, value: boolean) => void;
-  isAnyLagTimeSelected: boolean;
 }
 
 type DerivedVariableType = "AUC" | "RO" | "FUP" | "BPR" | "TLG";
@@ -59,22 +57,16 @@ const VariableRow: FC<Props> = ({
   updateDosings,
   isAnyDosingSelected,
   updateLinksToPd,
-  isAnyLinkToPdSelected,
   updateLagTimes,
-  isAnyLagTimeSelected,
 }) => {
   const {
-    fields: mappings,
-    append: appendMapping,
-    remove: removeMapping,
+    fields: mappings
   } = useFieldArray({
     control,
     name: "model.mappings",
   });
   const {
-    fields: derivedVariables,
-    append: derivedVariablesAppend,
-    remove: derivedVariablesRemove,
+    fields: derivedVariables
   } = useFieldArray({
     control,
     name: "model.derived_variables",
@@ -149,21 +141,12 @@ const VariableRow: FC<Props> = ({
     : mappings.find((mapping) => mapping.pk_variable === variable.id) !==
       undefined;
 
-  const onClickDerived = (type: DerivedVariableType) => () => {
-    const index = derivedIndex(type);
-    return index >= 0 ? removeDerived(index) : addDerived(type);
-  };
-
   const derivedIndex = (type: DerivedVariableType) => {
     return derivedVariables.findIndex(
       (ro) => ro.pk_variable === variable.id && ro.type === type,
     );
   };
 
-  const isLinkedTo = (type: DerivedVariableType) => {
-    return derivedIndex(type) >= 0;
-  };
-
   useEffect(() => {
     updateDosings(variable.id, hasProtocol);
   }, [variable.id, hasProtocol, updateDosings]);
@@ -205,81 +188,28 @@ const VariableRow: FC<Props> = ({
       (unit) => parseInt(unit.id) === variable.unit,
     ) !== undefined;
 
-  const addPDMapping = () => {
-    if (effectVariable) {
-      if (mappings.length > 0) {
-        removeMapping(0);
-      }
-      appendMapping({
-        pk_variable: variable.id,
-        pd_variable: effectVariable.id,
-        pkpd_model: model.id,
-      });
-    }
-  };
-
-  const removePDMapping = () => {
-    const mapping_index = mappings.findIndex(
-      (mapping) => mapping.pk_variable === variable.id,
-    );
-    if (mapping_index >= 0) {
-      removeMapping(mapping_index);
-    }
-  };
-
-  const addDerived = (type: DerivedVariableType) => {
-    // can only be one 'FUP' and one 'BPR' across all variables
-    const sameType = derivedVariables
-      .map((d, i) => ({ ...d, index: i }))
-      .filter((ro) => ro.type === type)
-      .map((ro) => ro.index);
-
-    const onlyOne = type === "FUP" || type === "BPR";
-    if (onlyOne && sameType.length > 0) {
-      removeDerived(sameType);
-    }
-
-    derivedVariablesAppend({
-      pk_variable: variable.id,
-      pkpd_model: model.id,
-      type,
-    });
-  };
-
-  const removeDerived = (index: number | number[]) => {
-    derivedVariablesRemove(index);
-  };
-
   const noMapToPD = isPD || effectVariable === undefined || !isConcentration;
   const noDerivedVariables = !isConcentration || isPD;
-  const isC1 = model.is_library_model && variable.qname.endsWith(".C1");
-  const disableAuc = false;
-  const disableRo =
-    !compound.dissociation_constant || !compound.target_concentration;
-  const disableFUP =
-    !compound.fraction_unbound_plasma || compound.compound_type === "LM";
-  const disableBPR =
-    !compound.blood_to_plasma_ratio || compound.compound_type === "LM";
   const noDosing = !isAmount;
 
-  const isDerivedVariable = variable.name.match(derivedVariableRegex) !== null;
-
   if (noMapToPD && noDerivedVariables && noDosing) {
     return null;
   }
 
-  const modelHaveTLag = model.has_lag;
-
-  return (
+  return noDosing ? null : (
     <TableRow>
-      <TableCell>
+      <TableCell size="small" width="5rem">
         <Tooltip title={variable.description}>
           <Typography>{variable.name}</Typography>
         </Tooltip>
       </TableCell>
-      <TableCell>{variableUnit?.symbol}</TableCell>
-      <TableCell>{isPD ? "PD" : "PK"}</TableCell>
-      <TableCell>
+      <TableCell size="small" width="5rem">
+        {variableUnit?.symbol}
+      </TableCell>
+      <TableCell size="small" width="5rem">
+        {isPD ? "PD" : "PK"}
+      </TableCell>
+      <TableCell size="small">
         {!noDosing && (
           <FormControlLabel
             control={
@@ -299,108 +229,6 @@ const VariableRow: FC<Props> = ({
           />
         )}
       </TableCell>
-      {modelHaveTLag && (
-        <TableCell>
-          {!noDosing && (
-            <FormControlLabel
-              control={
-                <MuiCheckbox
-                  sx={{
-                    "& .MuiSvgIcon-root": {
-                      color: isAnyLagTimeSelected ? "inherit" : "red",
-                    },
-                  }}
-                  checked={isLinkedTo("TLG")}
-                  onClick={onClickDerived("TLG")}
-                  data-cy={`checkbox-tlag-${variable.name}`}
-                  disabled={isSharedWithMe}
-                />
-              }
-              label=""
-            />
-          )}
-        </TableCell>
-      )}
-      {model.pd_model && (
-        <TableCell>
-          {!noMapToPD && (
-            <FormControlLabel
-              control={
-                <Radio
-                  sx={{
-                    "& .MuiSvgIcon-root": {
-                      color: isAnyLinkToPdSelected ? "inherit" : "red",
-                    },
-                  }}
-                  checked={linkToPD}
-                  disabled={isSharedWithMe}
-                  onClick={() =>
-                    linkToPD ? removePDMapping() : addPDMapping()
-                  }
-                  data-cy={`checkbox-map-to-pd-${variable.name}`}
-                />
-              }
-              label=""
-            />
-          )}
-        </TableCell>
-      )}
-      <TableCell>
-        {!noDerivedVariables && (
-          <FormControlLabel
-            disabled={disableAuc || isSharedWithMe}
-            control={
-              <MuiCheckbox
-                checked={isLinkedTo("AUC")}
-                onClick={onClickDerived("AUC")}
-              />
-            }
-            label=""
-          />
-        )}
-      </TableCell>
-      <TableCell>
-        {!noDerivedVariables && (
-          <FormControlLabel
-            disabled={disableRo || isSharedWithMe}
-            control={
-              <MuiCheckbox
-                checked={isLinkedTo("RO")}
-                onClick={onClickDerived("RO")}
-              />
-            }
-            label=""
-          />
-        )}
-      </TableCell>
-      <TableCell>
-        {isC1 && !noDerivedVariables && !isDerivedVariable && (
-          <FormControlLabel
-            disabled={disableFUP || isSharedWithMe}
-            control={
-              <Radio
-                checked={isLinkedTo("FUP")}
-                onClick={onClickDerived("FUP")}
-              />
-            }
-            label=""
-          />
-        )}
-      </TableCell>
-      <TableCell>
-        {isC1 && !noDerivedVariables && !isDerivedVariable && (
-          <FormControlLabel
-            disabled={disableBPR || isSharedWithMe}
-            control={
-              <Radio
-                checked={isLinkedTo("BPR")}
-                onClick={onClickDerived("BPR")}
-              />
-            }
-            label=""
-          />
-        )}
-      </TableCell>
     </TableRow>
   );
 };
diff --git a/frontend-v2/src/features/model/secondary/SecondaryParameters.tsx b/frontend-v2/src/features/model/secondary/SecondaryParameters.tsx
index e3c1706a0..2c3a6f5ad 100644
--- a/frontend-v2/src/features/model/secondary/SecondaryParameters.tsx
+++ b/frontend-v2/src/features/model/secondary/SecondaryParameters.tsx
@@ -7,12 +7,9 @@ import ThresholdsTable from "./ThresholdsTable";
 const SecondaryParameters: FC = () => {
   return (
     <Stack direction="column" spacing={2} useFlexGap>
-      <Typography variant="h5" component="h2">
-        Define time intervals
-      </Typography>
       <TimeIntervalsTable size="small" />
       <Typography variant="h5" component="h2">
-        Define thresholds
+        Define thresholds and Variable Units
       </Typography>
       <ThresholdsTable size="small" stickyHeader />
     </Stack>
diff --git a/frontend-v2/src/features/model/secondary/ThresholdsTable.tsx b/frontend-v2/src/features/model/secondary/ThresholdsTable.tsx
index 2eb7fd2a6..0bc009f60 100644
--- a/frontend-v2/src/features/model/secondary/ThresholdsTable.tsx
+++ b/frontend-v2/src/features/model/secondary/ThresholdsTable.tsx
@@ -6,6 +6,7 @@ import {
   Table,
   TableBody,
   TableCell,
+  TableContainer,
   TableHead,
   TableProps,
   TableRow,
@@ -13,7 +14,6 @@ import {
   Tooltip,
 } from "@mui/material";
 import { useSelector } from "react-redux";
-
 import { RootState } from "../../../app/store";
 import {
   UnitRead,
@@ -24,6 +24,38 @@ import {
   useVariableUpdateMutation,
   VariableRead,
 } from "../../../app/backendApi";
+import { getTableHeight } from "../../../shared/calculateTableHeights";
+
+const TABLE_BREAKPOINTS = [
+  {
+    minHeight: 1100,
+    tableHeight: "35vh",
+  },
+  {
+    minHeight: 1000,
+    tableHeight: "32vh",
+  },
+  {
+    minHeight: 900,
+    tableHeight: "28vh",
+  },
+  {
+    minHeight: 800,
+    tableHeight: "26vh",
+  },
+  {
+    minHeight: 700,
+    tableHeight: "23vh",
+  },
+  {
+    minHeight: 600,
+    tableHeight: "19vh",
+  },
+  {
+    minHeight: 500,
+    tableHeight: "16vh",
+  },
+];
 
 function useModel() {
   const projectId = useSelector(
@@ -114,12 +146,12 @@ function VariableRow({
 
   return (
     <TableRow>
-      <TableCell>
+      <TableCell sx={{ width: "5rem" }}>
         <Tooltip title={`${variable.name}: ${variable.description}`}>
           <span>{variable.name}</span>
         </Tooltip>
       </TableCell>
-      <TableCell>
+      <TableCell sx={{ width: "20rem" }}>
         <TextField
           type="number"
           defaultValue={variable.lower_threshold || 0}
@@ -127,7 +159,7 @@ function VariableRow({
           size="small"
         />
       </TableCell>
-      <TableCell>
+      <TableCell sx={{ width: "20rem" }}>
         <TextField
           type="number"
           defaultValue={variable.upper_threshold || Infinity}
@@ -136,7 +168,12 @@ function VariableRow({
         />
       </TableCell>
       <TableCell>
-        <Select value={unitSymbol} onChange={onChangeUnit} size="small">
+        <Select
+          sx={{ minWidth: "8rem" }}
+          value={unitSymbol}
+          onChange={onChangeUnit}
+          size="small"
+        >
           {unit?.compatible_units?.map((unit) => (
             <MenuItem key={unit.id} value={unit.symbol}>
               {unit.symbol}
@@ -158,26 +195,34 @@ const ThresholdsTable: FC<TableProps> = (props) => {
       (dv) => dv.pk_variable === variable.id && dv.type === "AUC",
     ),
   );
+
   return (
-    <Table {...props}>
-      <TableHead>
-        <TableCell>Variable</TableCell>
-        <TableCell>Lower Threshold</TableCell>
-        <TableCell>Upper Threshold</TableCell>
-        <TableCell>Unit</TableCell>
-      </TableHead>
-      <TableBody>
-        {concentrationVariables?.map((variable) => (
-          <VariableRow
-            key={variable.id}
-            variable={variable}
-            unit={units?.find(
-              (unit) => unit.id === (variable.threshold_unit || variable.unit),
-            )}
-          />
-        ))}
-      </TableBody>
-    </Table>
+    <TableContainer
+      sx={{
+        maxHeight: getTableHeight({ steps: TABLE_BREAKPOINTS }),
+      }}
+    >
+      <Table {...props} stickyHeader>
+        <TableHead>
+          <TableCell>Variable</TableCell>
+          <TableCell>Lower Threshold</TableCell>
+          <TableCell>Upper Threshold</TableCell>
+          <TableCell>Unit</TableCell>
+        </TableHead>
+        <TableBody>
+          {concentrationVariables?.map((variable) => (
+            <VariableRow
+              key={variable.id}
+              variable={variable}
+              unit={units?.find(
+                (unit) =>
+                  unit.id === (variable.threshold_unit || variable.unit),
+              )}
+            />
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
   );
 };
 
diff --git a/frontend-v2/src/features/model/secondary/TimeIntervalsTable.tsx b/frontend-v2/src/features/model/secondary/TimeIntervalsTable.tsx
index d2364a5e4..29f031343 100644
--- a/frontend-v2/src/features/model/secondary/TimeIntervalsTable.tsx
+++ b/frontend-v2/src/features/model/secondary/TimeIntervalsTable.tsx
@@ -1,5 +1,6 @@
 import { FC, useState } from "react";
 import {
+  Box,
   Button,
   FormControl,
   IconButton,
@@ -9,14 +10,16 @@ import {
   Table,
   TableBody,
   TableCell,
+  TableContainer,
   TableHead,
   TableProps,
   TableRow,
   TextField,
+  Typography,
 } from "@mui/material";
 import Delete from "@mui/icons-material/Delete";
 import { useSelector } from "react-redux";
-
+import AddCircleOutlineOutlinedIcon from "@mui/icons-material/AddCircleOutlineOutlined";
 import {
   TimeIntervalRead,
   useProjectRetrieveQuery,
@@ -24,6 +27,40 @@ import {
 } from "../../../app/backendApi";
 import { RootState } from "../../../app/store";
 import { useModelTimeIntervals } from "../../../hooks/useModelTimeIntervals";
+import {
+  getTableHeight,
+} from "../../../shared/calculateTableHeights";
+
+const TABLE_BREAKPOINTS = [
+  {
+    minHeight: 1100,
+    tableHeight: "35vh",
+  },
+  {
+    minHeight: 1000,
+    tableHeight: "32vh",
+  },
+  {
+    minHeight: 900,
+    tableHeight: "28vh",
+  },
+  {
+    minHeight: 800,
+    tableHeight: "26vh",
+  },
+  {
+    minHeight: 700,
+    tableHeight: "23vh",
+  },
+  {
+    minHeight: 600,
+    tableHeight: "19vh",
+  },
+  {
+    minHeight: 500,
+    tableHeight: "16vh",
+  },
+];
 
 function useTimeUnits() {
   const projectId = useSelector(
@@ -66,6 +103,7 @@ function TimeUnitSelect() {
         value={selectedUnit.toString()}
         onChange={onChangeUnit}
         size="small"
+        sx={{ minWidth: "6rem" }}
       >
         {timeUnitOptions.map((option) => (
           <MenuItem key={option.label} value={option.value}>
@@ -108,27 +146,27 @@ function IntervalRow({
 
   return (
     <TableRow>
-      <TableCell>
+      <TableCell sx={{ width: "20rem" }}>
         <TextField
+          size="small"
           type="number"
           value={start}
           onChange={onChangeStart}
-          size="small"
           error={start > end}
           helperText={start > end ? "Start time must be before end time" : ""}
         />
       </TableCell>
-      <TableCell>
+      <TableCell sx={{ width: "20rem" }}>
         <TextField
+          size="small"
           type="number"
           value={end}
           onChange={onChangeEnd}
-          size="small"
           error={end < start}
           helperText={end < start ? "End time must be after start time" : ""}
         />
       </TableCell>
-      <TableCell>
+      <TableCell sx={{ width: "10rem" }}>
         {editUnits ? <TimeUnitSelect /> : intervalUnit?.symbol}
       </TableCell>
       <TableCell>
@@ -177,26 +215,42 @@ const TimeIntervalsTable: FC<TableProps> = (props) => {
 
   return (
     <>
-      <Button onClick={addInterval}>Add interval</Button>
-      <Table {...props}>
-        <TableHead>
-          <TableCell>Start time</TableCell>
-          <TableCell>End time</TableCell>
-          <TableCell>Unit</TableCell>
-          <TableCell>Remove</TableCell>
-        </TableHead>
-        <TableBody>
-          {intervals.map((interval, index) => (
-            <IntervalRow
-              key={interval.id}
-              interval={interval}
-              onDelete={onDelete(interval.id)}
-              onUpdate={onUpdate(interval.id)}
-              editUnits={index === 0}
-            />
-          ))}
-        </TableBody>
-      </Table>
+      <Box sx={{ display: "flex" }}>
+        <Typography variant="h5" component="h2" sx={{ marginRight: "1rem" }}>
+          Define time intervals
+        </Typography>
+        <Button
+          size="small"
+          variant="contained"
+          startIcon={<AddCircleOutlineOutlinedIcon />}
+          onClick={addInterval}
+        >
+          Add
+        </Button>
+      </Box>
+      <TableContainer
+        sx={{ maxHeight: getTableHeight({ steps: TABLE_BREAKPOINTS }) }}
+      >
+        <Table {...props} stickyHeader>
+          <TableHead>
+            <TableCell sx={{ width: "20rem" }}>Start time</TableCell>
+            <TableCell sx={{ width: "20rem" }}>End time</TableCell>
+            <TableCell sx={{ width: "10rem" }}>Unit</TableCell>
+            <TableCell>Remove</TableCell>
+          </TableHead>
+          <TableBody>
+            {intervals.map((interval, index) => (
+              <IntervalRow
+                key={interval.id}
+                interval={interval}
+                onDelete={onDelete(interval.id)}
+                onUpdate={onUpdate(interval.id)}
+                editUnits={index === 0}
+              />
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
     </>
   );
 };

From 35a09e6fa9cb9f060bc4b1f456eafd8f3a81739f Mon Sep 17 00:00:00 2001
From: niestrow <wojciech.niestroj@contractors.roche.com>
Date: Fri, 29 Nov 2024 16:27:23 +0100
Subject: [PATCH 2/2] Fix typescript errors

---
 frontend-v2/src/features/model/MapVariablesTab.tsx | 3 ---
 frontend-v2/src/features/model/PKPDModelTab.tsx    | 1 -
 2 files changed, 4 deletions(-)

diff --git a/frontend-v2/src/features/model/MapVariablesTab.tsx b/frontend-v2/src/features/model/MapVariablesTab.tsx
index 4617b7199..f3a31e1fa 100644
--- a/frontend-v2/src/features/model/MapVariablesTab.tsx
+++ b/frontend-v2/src/features/model/MapVariablesTab.tsx
@@ -351,9 +351,7 @@ const MapVariablesTab: FC<Props> = ({
                 updateDosings={updateDosings}
                 isAnyDosingSelected={isAnyDosingSelected}
                 updateLinksToPd={updateLinksToPd}
-                isAnyLinkToPdSelected={isAnyLinkToPdSelected}
                 updateLagTimes={updateLagTimes}
-                isAnyLagTimeSelected={isAnyLagTimeSelected}
               />
             ))}
           </TableBody>
@@ -363,7 +361,6 @@ const MapVariablesTab: FC<Props> = ({
         <TableHeader
           variant="h5"
           label="Map RO, PD and secondary parameters"
-          sx={{ marginTop: ".5rem" }}
         />
       </Box>
       <TableContainer
diff --git a/frontend-v2/src/features/model/PKPDModelTab.tsx b/frontend-v2/src/features/model/PKPDModelTab.tsx
index 4f3c783c3..833d256d3 100644
--- a/frontend-v2/src/features/model/PKPDModelTab.tsx
+++ b/frontend-v2/src/features/model/PKPDModelTab.tsx
@@ -190,7 +190,6 @@ const PKPDModelTab: FC<Props> = ({ model, project, control }: Props) => {
               <Tooltip title="Includes Michaelis-Menten parameters (CLmax and Km)">
                 <div>
                   <Checkbox
-                    size="small"
                     label="Saturation"
                     name="model.has_saturation"
                     control={control}