Merge remote-tracking branch 'origin/ui-enhancements' into PKPDX-31

# Conflicts: # frontend-v2/src/App.tsx # frontend-v2/src/features/simulation/Simulations.tsx
pkpdapp-team · Nov 26, 2024 · d4eeb10 · d4eeb10
2 parents 69273d7 + 589a3bb
commit d4eeb10
Show file tree

Hide file tree

Showing 41 changed files with 1,443 additions and 645 deletions.
diff --git a/.github/workflows/copyright-test.yml b/.github/workflows/copyright-test.yml
@@ -15,10 +15,10 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
 
       - name: Set up Python 3.10
-        uses: actions/setup-python@v1
+        uses: actions/setup-python@v5
         with:
           python-version: '3.10'
           architecture: x64

diff --git a/.github/workflows/coverage-test.yml b/.github/workflows/coverage-test.yml
@@ -15,10 +15,10 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
 
       - name: Set up Python 3.10
-        uses: actions/setup-python@v1
+        uses: actions/setup-python@v5
         with:
           python-version: '3.10'
           architecture: x64

diff --git a/.github/workflows/frontend-build.yml b/.github/workflows/frontend-build.yml
@@ -0,0 +1,28 @@
+name: Frontend build
+
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+      - ui-enhancements
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./frontend-v2
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: "lts/iron"
+          cache: "yarn"
+          cache-dependency-path: ./frontend-v2/yarn.lock
+      - name: Install dependencies
+        run: yarn install --immutable
+      - name: Build
+        run: npm run build
diff --git a/.github/workflows/style-test.yml b/.github/workflows/style-test.yml
@@ -16,10 +16,10 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
 
       - name: Set up Python 3.10
-        uses: actions/setup-python@v1
+        uses: actions/setup-python@v5
         with:
           python-version: '3.10'
           architecture: x64

diff --git a/.github/workflows/unit-test-os-versions.yml b/.github/workflows/unit-test-os-versions.yml
@@ -17,10 +17,10 @@ jobs:
         os: [ubuntu-latest]
 
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
 
       - name: Set up Python 3.10
-        uses: actions/setup-python@v1
+        uses: actions/setup-python@v5
         with:
           python-version: '3.10'
           architecture: x64

diff --git a/.github/workflows/unit-test-python-versions.yml b/.github/workflows/unit-test-python-versions.yml
@@ -17,10 +17,10 @@ jobs:
         python-version: ['3.10']
 
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
 
       - name: Set up Python ${{ matrix.python-version }}
-        uses: actions/setup-python@v1
+        uses: actions/setup-python@v5
         with:
           python-version: ${{ matrix.python-version }}
           architecture: x64

diff --git a/frontend-v2/package.json b/frontend-v2/package.json
@@ -4,27 +4,27 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
     "@fontsource/comfortaa": "^5.1.0",
-    "@mui/icons-material": "^6.1.1",
-    "@mui/material": "^6.1.1",
-    "@mui/x-data-grid": "^7.18.0",
-    "@reduxjs/toolkit": "^2.2.7",
+    "@mui/icons-material": "^6.1.8",
+    "@mui/material": "^6.1.8",
+    "@mui/x-data-grid": "^7.22.3",
+    "@reduxjs/toolkit": "^2.3.0",
     "papaparse": "^5.4.1",
     "plotly.js-basic-dist-min": "^2.35.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-dropzone": "^14.2.3",
-    "react-hook-form": "^7.53.0",
+    "react-dropzone": "^14.3.5",
+    "react-hook-form": "^7.53.2",
     "react-player": "^2.16.0",
     "react-plotly.js": "^2.6.0",
     "react-redux": "^9.1.2",
     "react-toastify": "^9.1.3"
   },
   "scripts": {
-    "start": "vite",
-    "build": "vite build",
+    "start": "npx tsc && vite",
+    "build": "npx tsc && vite build",
     "serve": "vite preview",
     "lint": "eslint src",
     "format": "prettier --write ./src",
@@ -50,40 +50,40 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
+    "@babel/core": "^7.26.0",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/plugin-syntax-flow": "^7.24.7",
-    "@babel/plugin-transform-react-jsx": "^7.25.2",
-    "@cypress/request": "^3.0.5",
+    "@babel/plugin-syntax-flow": "^7.26.0",
+    "@babel/plugin-transform-react-jsx": "^7.25.9",
+    "@cypress/request": "^3.0.6",
     "@rtk-query/codegen-openapi": "^1.2.0",
     "@svgr/rollup": "^8.1.0",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.13",
-    "@types/node": "^20.16.5",
-    "@types/papaparse": "^5.3.14",
-    "@types/react": "^18.3.8",
-    "@types/react-dom": "^18.3.0",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^20.17.7",
+    "@types/papaparse": "^5.3.15",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/react-plotly.js": "^2.6.3",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
     "cypress": "^12.17.4",
     "env-cmd": "^10.1.0",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-jsx-a11y": "^6.10.0",
-    "eslint-plugin-react": "^7.36.1",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "openapi-types": "^12.1.3",
     "prettier": "^3.3.3",
     "start-server-and-test": "^2.0.8",
-    "typescript": "^5.6.2",
+    "typescript": "^5.7.2",
     "typescript-eslint": "^7.18.0",
-    "vite": "^5.4.7",
+    "vite": "^5.4.11",
     "vite-bundle-visualizer": "^1.2.1",
     "vite-plugin-radar": "^0.9.6",
-    "vite-tsconfig-paths": "^5.0.1",
+    "vite-tsconfig-paths": "^5.1.3",
     "web-vitals": "^2.1.4"
   },
   "packageManager": "[email protected]"

diff --git a/frontend-v2/src/App.test.tsx b/frontend-v2/src/App.test.tsx
@@ -11,5 +11,6 @@ test("renders learn react link", () => {
     </Provider>,
   );
 
+  // @ts-expect-error toBeInTheDocument doesn't exist in recent versions of Jest.
   expect(getByText(/learn/i)).toBeInTheDocument();
 });
diff --git a/frontend-v2/src/App.tsx b/frontend-v2/src/App.tsx
@@ -18,32 +18,14 @@ import { SimulationContext } from "./contexts/SimulationContext";
 import { SimulateResponse } from "./app/backendApi";
 import { CollapsibleSidebarProvider } from "./shared/contexts/CollapsibleSidebarContext";
 
-export type TimeInterval = {
-  start: number;
-  end: number;
-  unit: { [key: string]: string };
-};
-type Threshold = { lower: number; upper: number };
-export type Thresholds = { [key: string]: Threshold };
-
-const TIME_INTERVALS: TimeInterval[] = [];
-
-const THRESHOLDS: Thresholds = {};
-
 function App() {
   const dispatch = useAppDispatch();
   const isAuth = useSelector(isAuthenticated);
   const error = useSelector((state: RootState) => state.login.error);
   const [simulations, setSimulations] = useState<SimulateResponse[]>([]);
-  const [intervals, setIntervals] = useState<TimeInterval[]>(TIME_INTERVALS);
-  const [thresholds, setThresholds] = useState<Thresholds>(THRESHOLDS);
   const simulationContext = {
     simulations,
     setSimulations,
-    intervals,
-    setIntervals,
-    thresholds,
-    setThresholds,
   };
 
   const onLogin = (username: string, password: string) => {

diff --git a/frontend-v2/src/app/backendApi.ts b/frontend-v2/src/app/backendApi.ts
@@ -1959,10 +1959,40 @@ export type DerivedVariableRead = {
   /** base variable in PK part of model */
   pk_variable: number;
 };
+export type TimeInterval = {
+  /** true if object has been stored */
+  read_only?: boolean;
+  /** datetime the object was stored. */
+  datetime?: string | null;
+  /** start time of interval */
+  start_time: number;
+  /** end time of interval */
+  end_time: number;
+  /** PKPD model that this time interval is for */
+  pkpd_model: number;
+  /** unit of interval */
+  unit: number;
+};
+export type TimeIntervalRead = {
+  id: number;
+  /** true if object has been stored */
+  read_only?: boolean;
+  /** datetime the object was stored. */
+  datetime?: string | null;
+  /** start time of interval */
+  start_time: number;
+  /** end time of interval */
+  end_time: number;
+  /** PKPD model that this time interval is for */
+  pkpd_model: number;
+  /** unit of interval */
+  unit: number;
+};
 export type CombinedModelSpeciesEnum = "H" | "R" | "N" | "M";
 export type CombinedModel = {
   mappings: PkpdMapping[];
   derived_variables: DerivedVariable[];
+  time_intervals: TimeInterval[];
   /** true if object has been stored */
   read_only?: boolean;
   /** datetime the object was stored. */
@@ -2001,6 +2031,7 @@ export type CombinedModelRead = {
   id: number;
   mappings: PkpdMappingRead[];
   derived_variables: DerivedVariableRead[];
+  time_intervals: TimeIntervalRead[];
   components: string;
   variables: number[];
   mmt: string;
@@ -2043,6 +2074,7 @@ export type CombinedModelRead = {
 export type PatchedCombinedModel = {
   mappings?: PkpdMapping[];
   derived_variables?: DerivedVariable[];
+  time_intervals?: TimeInterval[];
   /** true if object has been stored */
   read_only?: boolean;
   /** datetime the object was stored. */
@@ -2081,6 +2113,7 @@ export type PatchedCombinedModelRead = {
   id?: number;
   mappings?: PkpdMappingRead[];
   derived_variables?: DerivedVariableRead[];
+  time_intervals?: TimeIntervalRead[];
   components?: string;
   variables?: number[];
   mmt?: string;
@@ -3474,6 +3507,10 @@ export type Variable = {
   upper_bound?: number | null;
   /** default value for this variable */
   default_value?: number;
+  /** lower threshold for this variable */
+  lower_threshold?: number | null;
+  /** upper threshold for this variable */
+  upper_threshold?: number | null;
   /** True if default_value is stored as the log of this value */
   is_log?: boolean;
   /** name of the variable */
@@ -3496,6 +3533,8 @@ export type Variable = {
   display?: boolean;
   /** False/True if biomarker type displayed on LHS/RHS axis */
   axis?: boolean;
+  /** unit for the threshold values */
+  threshold_unit?: number | null;
   /** variable values are in this unit (note this might be different from the unit in the stored sbml) */
   unit?: number | null;
   /** pharmacodynamic model */
@@ -3520,6 +3559,10 @@ export type VariableRead = {
   upper_bound?: number | null;
   /** default value for this variable */
   default_value?: number;
+  /** lower threshold for this variable */
+  lower_threshold?: number | null;
+  /** upper threshold for this variable */
+  upper_threshold?: number | null;
   /** True if default_value is stored as the log of this value */
   is_log?: boolean;
   /** name of the variable */
@@ -3542,6 +3585,8 @@ export type VariableRead = {
   display?: boolean;
   /** False/True if biomarker type displayed on LHS/RHS axis */
   axis?: boolean;
+  /** unit for the threshold values */
+  threshold_unit?: number | null;
   /** variable values are in this unit (note this might be different from the unit in the stored sbml) */
   unit?: number | null;
   /** pharmacodynamic model */
@@ -3565,6 +3610,10 @@ export type PatchedVariable = {
   upper_bound?: number | null;
   /** default value for this variable */
   default_value?: number;
+  /** lower threshold for this variable */
+  lower_threshold?: number | null;
+  /** upper threshold for this variable */
+  upper_threshold?: number | null;
   /** True if default_value is stored as the log of this value */
   is_log?: boolean;
   /** name of the variable */
@@ -3587,6 +3636,8 @@ export type PatchedVariable = {
   display?: boolean;
   /** False/True if biomarker type displayed on LHS/RHS axis */
   axis?: boolean;
+  /** unit for the threshold values */
+  threshold_unit?: number | null;
   /** variable values are in this unit (note this might be different from the unit in the stored sbml) */
   unit?: number | null;
   /** pharmacodynamic model */
@@ -3611,6 +3662,10 @@ export type PatchedVariableRead = {
   upper_bound?: number | null;
   /** default value for this variable */
   default_value?: number;
+  /** lower threshold for this variable */
+  lower_threshold?: number | null;
+  /** upper threshold for this variable */
+  upper_threshold?: number | null;
   /** True if default_value is stored as the log of this value */
   is_log?: boolean;
   /** name of the variable */
@@ -3633,6 +3688,8 @@ export type PatchedVariableRead = {
   display?: boolean;
   /** False/True if biomarker type displayed on LHS/RHS axis */
   axis?: boolean;
+  /** unit for the threshold values */
+  threshold_unit?: number | null;
   /** variable values are in this unit (note this might be different from the unit in the stored sbml) */
   unit?: number | null;
   /** pharmacodynamic model */

diff --git a/frontend-v2/src/contexts/SimulationContext.ts b/frontend-v2/src/contexts/SimulationContext.ts
@@ -1,12 +1,7 @@
 import { createContext } from "react";
 import { SimulateResponse } from "../app/backendApi";
-import { TimeInterval, Thresholds } from "../App";
 
 export const SimulationContext = createContext({
   simulations: [] as SimulateResponse[],
   setSimulations: (simulations: SimulateResponse[]) => {},
-  intervals: [] as TimeInterval[],
-  setIntervals: (intervals: TimeInterval[]) => {},
-  thresholds: {} as Thresholds,
-  setThresholds: (thresholds: Thresholds) => {},
 });
diff --git a/frontend-v2/src/features/model/Model.tsx b/frontend-v2/src/features/model/Model.tsx
@@ -86,6 +86,7 @@ const Model: FC = () => {
     project: projectIdOrZero,
     mappings: [],
     derived_variables: [],
+    time_intervals: [],
     components: "",
     variables: [],
     mmt: "",