PKPDX-32 trial design changes

pkpdapp-team · Nov 26, 2024 · d683425 · d683425
1 parent 281306e
commit d683425
Show file tree

Hide file tree

Showing 7 changed files with 206 additions and 105 deletions.
diff --git a/frontend-v2/src/components/FloatField.tsx b/frontend-v2/src/components/FloatField.tsx
@@ -10,6 +10,7 @@ type Props<T extends FieldValues> = {
   control: Control<T>;
   rules?: Record<string, unknown>;
   textFieldProps?: TextFieldProps;
+  size?: "small" | "medium";
   data_cy?: string;
   sx?: Record<string, string>;
 };
@@ -33,6 +34,7 @@ function FloatField<T extends FieldValues>({
   rules,
   textFieldProps,
   data_cy,
+  size = "medium",
   sx,
 }: Props<T>): ReactElement {
   const [fieldValue, setFieldValue] = useFieldState({ name, control });
@@ -60,6 +62,7 @@ function FloatField<T extends FieldValues>({
         };
         return (
           <TextField
+            size={size}
             label={
               !error
                 ? getLabel(label || "", Boolean(rules?.required))

diff --git a/frontend-v2/src/components/IntegerField.tsx b/frontend-v2/src/components/IntegerField.tsx
@@ -7,6 +7,7 @@ type Props<T extends FieldValues> = {
   label?: string;
   name: FieldPath<T>;
   control: Control<T>;
+  size?: 'small' | 'medium',
   rules?: Object;
   textFieldProps?: TextFieldProps;
 };
@@ -24,6 +25,7 @@ function IntegerField<T extends FieldValues>({
   name,
   control,
   rules,
+  size = 'medium',
   textFieldProps,
 }: Props<T>): ReactElement {
   const [fieldValue, setFieldValue] = useFieldState({ name, control });
@@ -57,6 +59,7 @@ function IntegerField<T extends FieldValues>({
                   (error?.type === "required" ? "Required" : "")
             }
             name={name}
+            size={size}
             id={name}
             variant="outlined"
             value={

diff --git a/frontend-v2/src/components/SelectField.tsx b/frontend-v2/src/components/SelectField.tsx
@@ -25,6 +25,7 @@ type Props<T extends FieldValues> = {
   rules?: Record<string, unknown>;
   selectProps?: SelectProps;
   formControlProps?: FormControlProps;
+  size?: 'small' | 'medium'
   sx?: SxProps;
 };
 
@@ -36,6 +37,7 @@ function SelectField<T extends FieldValues>({
   rules,
   selectProps,
   formControlProps,
+  size = 'medium',
   sx,
 }: Props<T>): ReactElement {
   const labelId = `${name}-label`;
@@ -61,6 +63,7 @@ function SelectField<T extends FieldValues>({
             {getLabel(label || "", Boolean(rules?.required))}
           </InputLabel>
           <Select
+            size={size}
             labelId={labelId}
             name={name}
             id={name}

diff --git a/frontend-v2/src/components/UnitField.tsx b/frontend-v2/src/components/UnitField.tsx
@@ -12,6 +12,7 @@ type Props<T extends FieldValues> = {
   rules?: Record<string, unknown>;
   selectProps?: SelectProps;
   compound?: Compound;
+  size?: 'small' | 'medium'
   isPreclinicalPerKg?: boolean;
   sx?: SxProps;
 };
@@ -24,6 +25,7 @@ function UnitField<T extends FieldValues>({
   rules,
   selectProps,
   isPreclinicalPerKg,
+  size = 'medium',
   sx,
 }: Props<T>): ReactElement {
   if (!isPreclinicalPerKg) {
@@ -47,6 +49,7 @@ function UnitField<T extends FieldValues>({
 
   return (
     <SelectField
+      size={size}
       sx={sx}
       label={label}
       name={name}

diff --git a/frontend-v2/src/features/results/Results.tsx b/frontend-v2/src/features/results/Results.tsx
@@ -58,7 +58,7 @@ const Results: FC = () => {
       <TableHeader label="Results" key="results-header" />
       <Box
         sx={{
-          display: "flex ",
+          display: "flex",
           justifyContent: "space-between",
           borderBottom: "1px solid #c2bab5",
         }}

diff --git a/frontend-v2/src/features/trial/Doses.tsx b/frontend-v2/src/features/trial/Doses.tsx
@@ -6,6 +6,8 @@ import {
   Button,
   Stack,
   Typography,
+  Box,
+  Tooltip,
 } from "@mui/material";
 import {
   ProjectRead,
@@ -27,7 +29,8 @@ import HelpButton from "../../components/HelpButton";
 import { useSelector } from "react-redux";
 import { RootState } from "../../app/store";
 import { selectIsProjectShared } from "../login/loginSlice";
-
+import { TableHeader } from "../../components/TableHeader";
+import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 interface Props {
   onChange: () => void;
   project: ProjectRead;
@@ -51,6 +54,7 @@ const Doses: FC<Props> = ({ onChange, project, protocol, units }) => {
     handleSubmit,
     reset,
     formState: { isDirty },
+    getValues,
   } = useForm<Protocol>({
     defaultValues: protocol,
   });
@@ -130,13 +134,66 @@ const Doses: FC<Props> = ({ onChange, project, protocol, units }) => {
     removeDose(index);
   };
 
+  const selectedAmountId = getValues("amount_unit");
+  const selectedAmountLabel =
+    baseUnit?.compatible_units?.find(({ id }) => id === selectedAmountId)
+      ?.symbol || "";
+
   return (
     <>
+      <TableRow>
+        <TableCell colSpan={8} sx={{ height: "2rem", padding: "5px" }}>
+          <Box
+            sx={{
+              paddingLeft: "16px",
+              display: "flex",
+              textWrap: "nowrap",
+              alignItems: "center",
+            }}
+          >
+            <TableHeader
+              variant="subtitle1"
+              label={`Specimen Parameters of ${mappedVariable}`}
+              tooltip="Defines the site of drug administration. A1/A1_t/A1_f =
+                      IV, Aa = SC or PO. The site of drug administration can be
+                      selected under Model/ Map Variables"
+            />{" "}
+            <Stack
+              sx={{ paddingLeft: "1rem", alignItems: "center" }}
+              direction="row"
+              width="max-content"
+            >
+              <Button
+                size="small"
+                onClick={handleAddRow}
+                variant="contained"
+                sx={{
+                  width: "fit-content",
+                  textWrap: "nowrap",
+                  height: "2rem",
+                }}
+                disabled={false}
+              >
+                Add New Row
+              </Button>
+              <Tooltip
+                title="Adding an additional dosing line allows defining complex dosing
+                regimens (e.g. changing dosing frequency and/or dosing levels)"
+                arrow
+                placement="right"
+                PopperProps={{ sx: { marginLeft: "4px" } }}
+              >
+                <HelpOutlineIcon sx={{ marginLeft: "8px", color: "dimgray",  transform: "scale(0.85)", }} />
+              </Tooltip>
+            </Stack>
+          </Box>
+        </TableCell>
+      </TableRow>
       {doses.map((dose, index) => (
         <TableRow key={dose.id}>
-          <TableCell>{mappedVariable}</TableCell>
           <TableCell>
             <FloatField
+              size="small"
               label={"Dose"}
               name={`doses.${index}.amount`}
               control={control}
@@ -148,19 +205,23 @@ const Doses: FC<Props> = ({ onChange, project, protocol, units }) => {
             />
           </TableCell>
           <TableCell>
-            {protocol.amount_unit && index === 0 && (
+            {protocol.amount_unit && index === 0 ? (
               <UnitField
+                size="small"
                 label={"Unit"}
                 name={`amount_unit`}
                 control={control}
                 baseUnit={baseUnit}
                 isPreclinicalPerKg={isPreclinical}
                 selectProps={defaultProps}
               />
+            ) : (
+              <Typography>{selectedAmountLabel}</Typography>
             )}
           </TableCell>
           <TableCell>
             <IntegerField
+              size="small"
               label={"Number of Doses"}
               name={`doses.${index}.repeats`}
               control={control}
@@ -173,6 +234,7 @@ const Doses: FC<Props> = ({ onChange, project, protocol, units }) => {
           </TableCell>
           <TableCell>
             <FloatField
+              size="small"
               label="Start Time"
               name={`doses.${index}.start_time`}
               control={control}
@@ -182,6 +244,7 @@ const Doses: FC<Props> = ({ onChange, project, protocol, units }) => {
           </TableCell>
           <TableCell>
             <FloatField
+              size="small"
               label={"Dosing Duration"}
               name={`doses.${index}.duration`}
               control={control}
@@ -197,6 +260,7 @@ const Doses: FC<Props> = ({ onChange, project, protocol, units }) => {
           </TableCell>
           <TableCell>
             <FloatField
+              size="small"
               label={"Dosing Interval"}
               name={`doses.${index}.repeat_interval`}
               control={control}
@@ -211,11 +275,9 @@ const Doses: FC<Props> = ({ onChange, project, protocol, units }) => {
             />
           </TableCell>
           <TableCell>
-            {protocol.time_unit && index === 0 && (
-              <Typography>
-                {units.find((u) => u.id === protocol.time_unit)?.symbol}
-              </Typography>
-            )}
+            <Typography>
+              {units.find((u) => u.id === protocol.time_unit)?.symbol}
+            </Typography>
           </TableCell>
           <TableCell align="center">
             {index !== 0 && (
@@ -229,20 +291,6 @@ const Doses: FC<Props> = ({ onChange, project, protocol, units }) => {
           </TableCell>
         </TableRow>
       ))}
-      <Stack direction="row" width="max-content">
-        <Button
-          onClick={handleAddRow}
-          variant="outlined"
-          sx={{ fontSize: ".5rem" }}
-          disabled={isSharedWithMe}
-        >
-          Add New Row
-        </Button>
-        <HelpButton title="Add Dose Line">
-          Adding an additional dosing line allows defining complex dosing
-          regimens (e.g. changing dosing frequency and/or dosing levels)
-        </HelpButton>
-      </Stack>
     </>
   );
 };