From ace0a6693b591cff9f2cd8dc601969f725e7b0fb Mon Sep 17 00:00:00 2001
From: Daisie Huang <daisieh@gmail.com>
Date: Mon, 24 Jul 2023 11:07:21 -0700
Subject: [PATCH 01/51] Update stable_pr_template.md

---
 PULL_REQUEST_TEMPLATE/stable_pr_template.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/PULL_REQUEST_TEMPLATE/stable_pr_template.md b/PULL_REQUEST_TEMPLATE/stable_pr_template.md
index 80357313..3e0b320e 100644
--- a/PULL_REQUEST_TEMPLATE/stable_pr_template.md
+++ b/PULL_REQUEST_TEMPLATE/stable_pr_template.md
@@ -1,6 +1,6 @@
 ## vX.X.X: Description
 Add a summary description of the main user-facing changes made in this release, relative to the last stable release.
 
-- [] Tagged as a release in this repo
-- [] Passes integration tests on a development instance
-- [] Images pushed to Dockerhub
+- [ ] Tagged as a release in this repo
+- [ ] Passes integration tests on a development instance
+- [ ] Images pushed to Dockerhub

From c84596416a636d4e7029e1081a87e3ccd265ef79 Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Tue, 25 Jul 2023 09:53:42 -0400
Subject: [PATCH 02/51] CanDIG PR dispatch (test branch)

---
 .github/workflows/candig-dispatch.yml | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 .github/workflows/candig-dispatch.yml

diff --git a/.github/workflows/candig-dispatch.yml b/.github/workflows/candig-dispatch.yml
new file mode 100644
index 00000000..86a38be1
--- /dev/null
+++ b/.github/workflows/candig-dispatch.yml
@@ -0,0 +1,27 @@
+name: Dispatch
+on:
+    push:
+        branches: [add-dispatch]
+jobs:
+  CanDIG-dispatch:
+    runs-on: ubuntu-latest
+    env:
+      PARENT_REPOSITORY: 'CanDIG/CanDIGv2'
+      CHECKOUT_BRANCH: 'develop'
+      PR_AGAINST_BRANCH: 'develop'
+      OWNER: 'CanDIG'
+    steps:
+            - name: Check out repository code
+              uses: actions/checkout@v3
+            - name: Create PR in CanDIGv2
+              id: make_pr
+              uses: jman005/github-action-pr-expanded@v0
+              with:
+                  github_token: ${{ secrets.SUBMODULE_PR }}
+                  parent_repository: ${{ env.PARENT_REPOSITORY }}
+                  checkout_branch: ${{ env.CHECKOUT_BRANCH}}
+                  pr_against_branch: ${{ env.PR_AGAINST_BRANCH }}
+                  pr_description: "PR triggered by update to stable branch on ${{ github.repository }}. Commit hash: ${{ github.sha }} Commit message: ${{ github.event.head_commit.message }}"
+                  owner: ${{ env.OWNER }}
+                  submodule_path: lib/candig-data-portal/candig-data-portal
+                  label: Submodule update

From 62d822a46c0bd01962623054674e2a32a77b73b6 Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Tue, 25 Jul 2023 09:55:53 -0400
Subject: [PATCH 03/51] Stable branch for dispatch

---
 .github/workflows/candig-dispatch.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/candig-dispatch.yml b/.github/workflows/candig-dispatch.yml
index 86a38be1..f991cc8d 100644
--- a/.github/workflows/candig-dispatch.yml
+++ b/.github/workflows/candig-dispatch.yml
@@ -1,7 +1,7 @@
 name: Dispatch
 on:
     push:
-        branches: [add-dispatch]
+        branches: [stable]
 jobs:
   CanDIG-dispatch:
     runs-on: ubuntu-latest

From 91555047e81c38265a2d9c640cb4a4ce831230b8 Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Tue, 25 Jul 2023 10:11:44 -0400
Subject: [PATCH 04/51] Develop branch for PR dispatch

---
 .github/workflows/candig-dispatch.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/candig-dispatch.yml b/.github/workflows/candig-dispatch.yml
index f991cc8d..30c67aa7 100644
--- a/.github/workflows/candig-dispatch.yml
+++ b/.github/workflows/candig-dispatch.yml
@@ -1,7 +1,7 @@
 name: Dispatch
 on:
     push:
-        branches: [stable]
+        branches: [develop]
 jobs:
   CanDIG-dispatch:
     runs-on: ubuntu-latest

From 27be8df6263c729c6f7c0dfed06c19d0b74c5bc6 Mon Sep 17 00:00:00 2001
From: Courtney <37649170+CourtneyGosselin@users.noreply.github.com>
Date: Thu, 27 Jul 2023 12:29:30 -0700
Subject: [PATCH 05/51] Change from cookies to localstorage (#91)

* Change from cookies to localstorage
* Change cookie function name to local storage
Signed-off-by: Courtney Gosselin <courtney@gosselin.io>
---
 package.json                                  |  1 -
 .../widgets/dataVisualization.js              | 39 ++++++++++---------
 src/views/summary/CustomOfflineChart.js       | 33 ++++++++--------
 3 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/package.json b/package.json
index df271a86..978d67f2 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,6 @@
         "highcharts": "^10.0.0",
         "highcharts-react-official": "^3.1.0",
         "history": "^5.0.0",
-        "js-cookie": "^3.0.5",
         "material-ui-popup-state": "^1.8.0",
         "npm": "^8.6.0",
         "papaparse": "^5.3.2",
diff --git a/src/views/clinicalGenomic/widgets/dataVisualization.js b/src/views/clinicalGenomic/widgets/dataVisualization.js
index b1bd6cea..953c4843 100644
--- a/src/views/clinicalGenomic/widgets/dataVisualization.js
+++ b/src/views/clinicalGenomic/widgets/dataVisualization.js
@@ -11,7 +11,6 @@ import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 
 // Third-party libraries
-import Cookies from 'js-cookie';
 import { IconEdit, IconX, IconPlus } from '@tabler/icons';
 
 // Custom Components and context
@@ -69,26 +68,30 @@ function DataVisualization(props) {
     // Top 4 keys from dataVis
     const topKeys = Object.keys(dataVis).slice(0, 4);
 
-    // Cookies
+    // LocalStorage
     const [dataValue, setDataValue] = useState(
-        Cookies.get('dataVisData') ? JSON.parse(Cookies.get('dataVisData'))[0] : 'patients_per_cohort'
+        localStorage.getItem('dataVisData') ? JSON.parse(localStorage.getItem('dataVisData'))[0] : 'patients_per_cohort'
+    );
+    const [chartType, setChartType] = useState(
+        localStorage.getItem('dataVisChartType') ? JSON.parse(localStorage.getItem('dataVisChartType'))[0] : 'bar'
+    );
+    const [dataVisData, setdataVisData] = useState(
+        localStorage.getItem('dataVisData') ? JSON.parse(localStorage.getItem('dataVisData')) : topKeys
     );
-    const [chartType, setChartType] = useState(Cookies.get('dataVisChartType') ? JSON.parse(Cookies.get('dataVisChartType'))[0] : 'bar');
-    const [dataVisData, setdataVisData] = useState(Cookies.get('dataVisData') ? JSON.parse(Cookies.get('dataVisData')) : topKeys);
     const [dataVisChartType, setDataVisChartType] = useState(
-        Cookies.get('dataVisChartType') ? JSON.parse(Cookies.get('dataVisChartType')) : ['bar', 'line', 'column', 'bar']
+        localStorage.getItem('dataVisChartType') ? JSON.parse(localStorage.getItem('dataVisChartType')) : ['bar', 'line', 'column', 'bar']
     );
     const [dataVisTrim, setDataVisTrim] = useState(
-        Cookies.get('dataVisTrim') ? JSON.parse(Cookies.get('dataVisTrim')) : [false, false, false, false]
+        localStorage.getItem('dataVisTrim') ? JSON.parse(localStorage.getItem('dataVisTrim')) : [false, false, false, false]
     );
 
-    // Intial cookie setting if there are none
+    // Intial localStorage setting if there are none
     useEffect(() => {
-        if (!Cookies.get('dataVisData') && !Cookies.get('dataVisChartType')) {
+        if (!localStorage.getItem('dataVisData') && !localStorage.getItem('dataVisChartType')) {
             const charts = topKeys.map(() => 'bar');
-            Cookies.set('dataVisChartType', JSON.stringify(charts), { expires: 365 });
-            Cookies.set('dataVisData', JSON.stringify(topKeys), { expires: 365 });
-            Cookies.set('dataVisTrim', JSON.stringify([false, false, false, false]), { expires: 365 });
+            localStorage.setItem('dataVisChartType', JSON.stringify(charts), { expires: 365 });
+            localStorage.setItem('dataVisData', JSON.stringify(topKeys), { expires: 365 });
+            localStorage.setItem('dataVisTrim', JSON.stringify([false, false, false, false]), { expires: 365 });
         }
     }, []);
 
@@ -103,9 +106,9 @@ function DataVisualization(props) {
         setDataVisChartType(newDataVisChartType);
         setdataVisData(newdataVisData);
         setDataVisTrim(newDataVisTrim);
-        Cookies.set('dataVisData', JSON.stringify(newdataVisData), { expires: 365 });
-        Cookies.set('dataVisChartType', JSON.stringify(newDataVisChartType), { expires: 365 });
-        Cookies.set('dataVisTrim', JSON.stringify(newDataVisTrim), { expires: 365 });
+        localStorage.setItem('dataVisData', JSON.stringify(newdataVisData), { expires: 365 });
+        localStorage.setItem('dataVisChartType', JSON.stringify(newDataVisChartType), { expires: 365 });
+        localStorage.setItem('dataVisTrim', JSON.stringify(newDataVisTrim), { expires: 365 });
     }
 
     function AddChart(data, chartType) {
@@ -116,9 +119,9 @@ function DataVisualization(props) {
         setDataVisChartType(newDataVisChartType);
         setdataVisData(newdataVisData);
         setDataVisTrim(newDataVisTrim);
-        Cookies.set('dataVisData', JSON.stringify(newdataVisData), { expires: 365 });
-        Cookies.set('dataVisChartType', JSON.stringify(newDataVisChartType), { expires: 365 });
-        Cookies.set('dataVisTrim', JSON.stringify(newDataVisTrim), { expires: 365 });
+        localStorage.setItem('dataVisChartType', JSON.stringify(newDataVisChartType), { expires: 365 });
+        localStorage.setItem('dataVisTrim', JSON.stringify(newDataVisTrim), { expires: 365 });
+        localStorage.setItem('dataVisData', JSON.stringify(newdataVisData), { expires: 365 });
     }
     /* eslint-disable jsx-a11y/no-onchange */
     function returnChartDialog() {
diff --git a/src/views/summary/CustomOfflineChart.js b/src/views/summary/CustomOfflineChart.js
index 85262bef..b9e436bb 100644
--- a/src/views/summary/CustomOfflineChart.js
+++ b/src/views/summary/CustomOfflineChart.js
@@ -9,7 +9,6 @@ import { Box, IconButton } from '@mui/material';
 import { useSelector } from 'react-redux';
 
 // Third-party libraries
-import Cookies from 'js-cookie';
 import Highcharts, { map } from 'highcharts';
 import HighchartsReact from 'highcharts-react-official';
 import NoDataToDisplay from 'highcharts/modules/no-data-to-display';
@@ -257,25 +256,25 @@ function CustomOfflineChart(props) {
         createChart();
     }, [dataVis, chart, chartData, JSON.stringify(dataObject), trim]);
 
-    function setCookieDataVisChart(event) {
-        // Set cookie for Data Visualization Chart Type
-        const dataVisChart = JSON.parse(Cookies.get('dataVisChartType'));
+    function setLocalStorageDataVisChart(event) {
+        // Set LocalStorage for Data Visualization Chart Type
+        const dataVisChart = JSON.parse(localStorage.getItem('dataVisChartType'));
         dataVisChart[index] = event.target.value;
-        Cookies.set('dataVisChartType', JSON.stringify(dataVisChart), { expires: 365 });
+        localStorage.setItem('dataVisChartType', JSON.stringify(dataVisChart), { expires: 365 });
     }
 
-    function setCookieDataVisData(event) {
-        // Set Cookie for Data Visualization Data
-        const dataVisData = JSON.parse(Cookies.get('dataVisData'));
+    function setLocalStorageDataVisData(event) {
+        // Set LocalStorage for Data Visualization Data
+        const dataVisData = JSON.parse(localStorage.getItem('dataVisData'));
         dataVisData[index] = event.target.value;
-        Cookies.set('dataVisData', JSON.stringify(dataVisData), { expires: 365 });
+        localStorage.setItem('dataVisData', JSON.stringify(dataVisData), { expires: 365 });
     }
 
-    function setCookieDataVisTrim(value) {
-        // Set Cookie for Data Visualization Trim status
-        const dataVisTrim = JSON.parse(Cookies.get('dataVisTrim'));
+    function setLocalStorageDataVisTrim(value) {
+        // Set LocalStorage for Data Visualization Trim status
+        const dataVisTrim = JSON.parse(localStorage.getItem('dataVisTrim'));
         dataVisTrim[index] = value;
-        Cookies.set('dataVisTrim', JSON.stringify(dataVisTrim), { expires: 365 });
+        localStorage.setItem('dataVisTrim', JSON.stringify(dataVisTrim), { expires: 365 });
     }
 
     /* eslint-disable jsx-a11y/no-onchange */
@@ -329,7 +328,7 @@ function CustomOfflineChart(props) {
                                     id="types"
                                     onChange={(event) => {
                                         setChartData(event.target.value);
-                                        setCookieDataVisData(event);
+                                        setLocalStorageDataVisData(event);
                                     }}
                                 >
                                     {Object.keys(dataVis).map((key) => (
@@ -350,7 +349,7 @@ function CustomOfflineChart(props) {
                                         id="types"
                                         onChange={(event) => {
                                             setChart(event.target.value);
-                                            setCookieDataVisChart(event);
+                                            setLocalStorageDataVisChart(event);
                                         }}
                                     >
                                         <option value="bar">Stacked Bar</option>
@@ -365,7 +364,7 @@ function CustomOfflineChart(props) {
                                         id="types"
                                         onChange={(event) => {
                                             setChart(event.target.value);
-                                            setCookieDataVisChart(event);
+                                            setLocalStorageDataVisChart(event);
                                         }}
                                     >
                                         <option value="bar">Bar</option>
@@ -382,7 +381,7 @@ function CustomOfflineChart(props) {
                                         type="checkbox"
                                         id="trim"
                                         onChange={() => {
-                                            setCookieDataVisTrim(!trim);
+                                            setLocalStorageDataVisTrim(!trim);
                                             setTrim((old) => !old);
                                         }}
                                         checked={trim}

From 6149ff915d188e306bbad9af437afa8f755675b5 Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Thu, 27 Jul 2023 15:27:37 -0400
Subject: [PATCH 06/51] Fix a bug where consuming all data from an endpoint
 would fail if one server had a lot more data than the other

---
 src/views/clinicalGenomic/search/SearchHandler.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/clinicalGenomic/search/SearchHandler.js b/src/views/clinicalGenomic/search/SearchHandler.js
index b120fb25..c9eb103a 100644
--- a/src/views/clinicalGenomic/search/SearchHandler.js
+++ b/src/views/clinicalGenomic/search/SearchHandler.js
@@ -18,11 +18,11 @@ function ConsumeAllPages(url, resultConsumer, service = 'katsu') {
                 parsedData[loc.location.name] = [];
             }
 
-            if (loc.results.next) {
+            if (loc.results?.next) {
                 nextQuery = `${url}${url.includes('?') ? '&' : '?'}page=${idx + 1}`;
             }
 
-            if (loc.results.results) {
+            if (loc.results?.results) {
                 parsedData[loc.location.name] = parsedData[loc.location.name].concat(loc.results.results.map(resultConsumer));
             }
         });
@@ -102,7 +102,7 @@ function SearchHandler() {
         }
 
         searchParams.append('page_size', 100);
-        const url = `v2/authorized/donors?${searchParams}`;
+        const url = `v2/authorized/donors/?${searchParams}`;
 
         const donorQueryPromise = () =>
             trackPromise(

From 91f8167d00d16bf1b9e3ba08f17fd281882e4b69 Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Thu, 3 Aug 2023 14:05:58 -0400
Subject: [PATCH 07/51] Fix a bug where clinical results wouldn't properly
 filter down genomic results

---
 src/views/clinicalGenomic/search/SearchHandler.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/clinicalGenomic/search/SearchHandler.js b/src/views/clinicalGenomic/search/SearchHandler.js
index c9eb103a..22dcfc56 100644
--- a/src/views/clinicalGenomic/search/SearchHandler.js
+++ b/src/views/clinicalGenomic/search/SearchHandler.js
@@ -316,7 +316,7 @@ function SearchHandler() {
                                                     return caseData;
                                                 })
                                                 .filter((caseData) => {
-                                                    if (reader.query && Object.keys(reader.query).length > 0 && caseData.donorID) {
+                                                    if (reader.donorLists && Object.keys(reader.donorLists).length > 0 && caseData.donorID) {
                                                         return finalList.includes(caseData.donorID);
                                                     }
                                                     return true;

From abc6f368ca912b683563472d5a5ca7345236c716 Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Tue, 15 Aug 2023 14:29:17 -0400
Subject: [PATCH 08/51] Remove commit description from dispach

---
 .github/workflows/candig-dispatch.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/candig-dispatch.yml b/.github/workflows/candig-dispatch.yml
index 30c67aa7..82467322 100644
--- a/.github/workflows/candig-dispatch.yml
+++ b/.github/workflows/candig-dispatch.yml
@@ -21,7 +21,7 @@ jobs:
                   parent_repository: ${{ env.PARENT_REPOSITORY }}
                   checkout_branch: ${{ env.CHECKOUT_BRANCH}}
                   pr_against_branch: ${{ env.PR_AGAINST_BRANCH }}
-                  pr_description: "PR triggered by update to stable branch on ${{ github.repository }}. Commit hash: ${{ github.sha }} Commit message: ${{ github.event.head_commit.message }}"
+                  pr_description: "PR triggered by update to develop branch on ${{ github.repository }}. Commit hash: ${{ github.sha }}"
                   owner: ${{ env.OWNER }}
                   submodule_path: lib/candig-data-portal/candig-data-portal
                   label: Submodule update

From 7a1ec14a0247876031f9fa45dada06970597b5e6 Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Mon, 18 Sep 2023 13:49:38 -0400
Subject: [PATCH 09/51] Add linter

---
 .github/workflows/lint.yml | 40 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 .github/workflows/lint.yml

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
new file mode 100644
index 00000000..0a4a842a
--- /dev/null
+++ b/.github/workflows/lint.yml
@@ -0,0 +1,40 @@
+name: Lint
+
+on:
+  # Trigger the workflow on push or pull request,
+  # but only for the main branch
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+# Down scope as necessary via https://docs.github.com/en/actions/security-guides/automatic-token-authentication#modifying-the-permissions-for-the-github_token
+permissions:
+  checks: write
+  contents: write
+
+jobs:
+  run-linters:
+    name: Run linters
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+
+
+      - name: Install Node.js dependencies
+        run: npm ci
+
+      - name: Run linters
+        uses: wearerequired/lint-action@v2
+        with:
+          eslint: true
+          prettier: true

From cfbdd9ba4b86a2955a153f16810ba829a533437d Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Mon, 18 Sep 2023 13:51:28 -0400
Subject: [PATCH 10/51] The PR should be to develop, not main

---
 .github/workflows/lint.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index 0a4a842a..b466e241 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -5,10 +5,10 @@ on:
   # but only for the main branch
   push:
     branches:
-      - main
+      - develop
   pull_request:
     branches:
-      - main
+      - develop
 
 # Down scope as necessary via https://docs.github.com/en/actions/security-guides/automatic-token-authentication#modifying-the-permissions-for-the-github_token
 permissions:

From 6427493d07a423689604e6758aacd5c3d8a4d7a2 Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Tue, 19 Sep 2023 11:38:49 -0400
Subject: [PATCH 11/51] Linter fixes

---
 .eslintrc                                     |  3 +
 package-lock.json                             | 16 ++--
 package.json                                  |  1 -
 .../NotificationSection/NotificationList.js   |  2 -
 .../Header/ProfileSection/UpgradePlanCard.js  |  2 -
 .../MainLayout/Header/SearchSection/index.js  |  2 +-
 .../MainLayout/Sidebar/SidebarContext.js      |  7 ++
 src/layout/NavMotion.js                       |  1 -
 src/ui-component/cards/CardSecondaryAction.js |  1 -
 .../cards/Skeleton/ImagePlaceholder.js        |  2 -
 .../cards/Skeleton/PopularCard.js             |  1 -
 .../cards/Skeleton/TotalGrowthBarChart.js     |  2 -
 src/ui-component/extended/Avatar.js           |  1 -
 src/views/clinical/mcode.js                   |  3 +
 .../clinicalGenomic/clinicalGenomicSearch.js  |  9 +-
 .../clinicalGenomic/search/SearchHandler.js   | 11 ++-
 .../clinicalGenomic/widgets/clinicalData.js   | 34 +-------
 .../widgets/dataVisualization.js              |  4 +-
 .../clinicalGenomic/widgets/genomicData.js    | 34 +-------
 .../widgets/patientCountSingle.js             |  8 +-
 .../clinicalGenomic/widgets/patientCounts.js  |  2 +-
 .../clinicalGenomic/widgets/patientView.js    | 85 ++++++++++---------
 src/views/clinicalGenomic/widgets/sidebar.js  | 35 ++++++--
 .../dashboard/Default/TotalIncomeDarkCard.js  |  1 -
 .../dashboard/Default/datasetIdSelect.js      | 12 +--
 src/views/dashboard/Default/index.js          |  2 +-
 src/views/genomicsData/HtsgetBrowser.js       |  6 +-
 src/views/genomicsData/IGViewer.js            | 34 +++++---
 src/views/genomicsData/VariantsSearch.js      | 16 ++--
 src/views/summary/CustomOfflineChart.js       | 38 +++++++--
 src/views/summary/TreatingCentreMap.js        |  3 -
 src/views/summary/summary.js                  |  2 +-
 src/views/utilities/Color.js                  |  1 -
 src/views/utilities/MaterialIcons.js          |  2 -
 src/views/utilities/Shadow.js                 |  1 -
 src/views/utilities/TablerIcons.js            |  2 -
 src/views/utilities/Typography.js             |  1 -
 37 files changed, 202 insertions(+), 185 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 46f55f4c..a294a621 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -44,6 +44,9 @@
         "no-unused-vars": [
             1,
             {
+                "argsIgnorePattern": "^_",
+                "varsIgnorePattern": "^_",
+                "caughtErrorsIgnorePattern": "^_",
                 "ignoreRestSiblings": false
             }
         ],
diff --git a/package-lock.json b/package-lock.json
index 1fa64919..22b5f7fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6663,9 +6663,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001343",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001343.tgz",
-            "integrity": "sha512-8KeCrAtPMabo/XW14B+R9sZYoClx1n0b+WYgwDKZPtWR3TcdvWzdSy7mPyFEmR5WU1St9v1PW6sdO5dkFOEzfA==",
+            "version": "1.0.30001535",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001535.tgz",
+            "integrity": "sha512-48jLyUkiWFfhm/afF7cQPqPjaUmSraEhK4j+FCTJpgnGGEZHqyLe3hmWH7lIooZdSzXL0ReMvHz0vKDoTBsrwg==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -6674,6 +6674,10 @@
                 {
                     "type": "tidelift",
                     "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
                 }
             ]
         },
@@ -27891,9 +27895,9 @@
             }
         },
         "caniuse-lite": {
-            "version": "1.0.30001343",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001343.tgz",
-            "integrity": "sha512-8KeCrAtPMabo/XW14B+R9sZYoClx1n0b+WYgwDKZPtWR3TcdvWzdSy7mPyFEmR5WU1St9v1PW6sdO5dkFOEzfA=="
+            "version": "1.0.30001535",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001535.tgz",
+            "integrity": "sha512-48jLyUkiWFfhm/afF7cQPqPjaUmSraEhK4j+FCTJpgnGGEZHqyLe3hmWH7lIooZdSzXL0ReMvHz0vKDoTBsrwg=="
         },
         "case-sensitive-paths-webpack-plugin": {
             "version": "2.4.0",
diff --git a/package.json b/package.json
index 978d67f2..c2a43107 100644
--- a/package.json
+++ b/package.json
@@ -96,4 +96,3 @@
         "webpack-cli": "^4.9.2"
     }
 }
-
diff --git a/src/layout/MainLayout/Header/NotificationSection/NotificationList.js b/src/layout/MainLayout/Header/NotificationSection/NotificationList.js
index de2983fe..25a29b56 100644
--- a/src/layout/MainLayout/Header/NotificationSection/NotificationList.js
+++ b/src/layout/MainLayout/Header/NotificationSection/NotificationList.js
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { makeStyles } from '@mui/styles';
 import {
     Avatar,
diff --git a/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.js b/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.js
index 1dee2001..9484637d 100644
--- a/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.js
+++ b/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.js
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { makeStyles } from '@mui/styles';
 import { Button, Card, CardContent, Grid, Stack, Typography } from '@mui/material';
 
diff --git a/src/layout/MainLayout/Header/SearchSection/index.js b/src/layout/MainLayout/Header/SearchSection/index.js
index e8de0428..2f9eb180 100644
--- a/src/layout/MainLayout/Header/SearchSection/index.js
+++ b/src/layout/MainLayout/Header/SearchSection/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 // material-ui
 import { makeStyles } from '@mui/styles';
diff --git a/src/layout/MainLayout/Sidebar/SidebarContext.js b/src/layout/MainLayout/Sidebar/SidebarContext.js
index 557b4aca..d87e6d66 100644
--- a/src/layout/MainLayout/Sidebar/SidebarContext.js
+++ b/src/layout/MainLayout/Sidebar/SidebarContext.js
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import PropTypes from 'prop-types';
+
 const DEFAULT_STATE = false;
 
 const SidebarReaderContext = React.createContext(DEFAULT_STATE);
@@ -20,6 +22,11 @@ export function SidebarProvider(props) {
     );
 }
 
+SidebarProvider.propTypes = {
+    data: PropTypes.object,
+    setData: PropTypes.func
+};
+
 /**
  * Obtain the context reader of the federation sites query.
  * @returns {Object} a React context of the sidebar DOM component
diff --git a/src/layout/NavMotion.js b/src/layout/NavMotion.js
index 0daa894c..f513d5f1 100644
--- a/src/layout/NavMotion.js
+++ b/src/layout/NavMotion.js
@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 // third-party
 import { motion } from 'framer-motion';
diff --git a/src/ui-component/cards/CardSecondaryAction.js b/src/ui-component/cards/CardSecondaryAction.js
index 4f0aa9f2..ed5166f0 100644
--- a/src/ui-component/cards/CardSecondaryAction.js
+++ b/src/ui-component/cards/CardSecondaryAction.js
@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 // mui
 import { useTheme } from '@mui/styles';
diff --git a/src/ui-component/cards/Skeleton/ImagePlaceholder.js b/src/ui-component/cards/Skeleton/ImagePlaceholder.js
index 94aef7ee..40f2e50f 100644
--- a/src/ui-component/cards/Skeleton/ImagePlaceholder.js
+++ b/src/ui-component/cards/Skeleton/ImagePlaceholder.js
@@ -1,5 +1,3 @@
-import React from 'react';
-
 // mui
 import Skeleton from '@mui/material/Skeleton';
 
diff --git a/src/ui-component/cards/Skeleton/PopularCard.js b/src/ui-component/cards/Skeleton/PopularCard.js
index d0965147..19ca6f3f 100644
--- a/src/ui-component/cards/Skeleton/PopularCard.js
+++ b/src/ui-component/cards/Skeleton/PopularCard.js
@@ -1,4 +1,3 @@
-import React from 'react';
 // mui
 import { makeStyles } from '@mui/styles';
 import { Card, CardContent, Grid, Skeleton } from '@mui/material';
diff --git a/src/ui-component/cards/Skeleton/TotalGrowthBarChart.js b/src/ui-component/cards/Skeleton/TotalGrowthBarChart.js
index a0ea7b92..ab758bb0 100644
--- a/src/ui-component/cards/Skeleton/TotalGrowthBarChart.js
+++ b/src/ui-component/cards/Skeleton/TotalGrowthBarChart.js
@@ -1,5 +1,3 @@
-import React from 'react';
-
 // mui
 import { Card, CardContent, Grid } from '@mui/material';
 import Skeleton from '@mui/material/Skeleton';
diff --git a/src/ui-component/extended/Avatar.js b/src/ui-component/extended/Avatar.js
index 2e89a895..96891ee9 100644
--- a/src/ui-component/extended/Avatar.js
+++ b/src/ui-component/extended/Avatar.js
@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 // mui
 import { makeStyles } from '@mui/styles';
diff --git a/src/views/clinical/mcode.js b/src/views/clinical/mcode.js
index b6dd9569..b4b74d64 100644
--- a/src/views/clinical/mcode.js
+++ b/src/views/clinical/mcode.js
@@ -66,6 +66,8 @@ const useStyles = makeStyles({
     }
 });
 
+// NB: This function isn't really used anywhere and it's messing with the linter
+/* eslint-disable react-hooks/exhaustive-deps */
 function MCodeView() {
     const theme = useTheme();
     const classes = useStyles();
@@ -635,5 +637,6 @@ function MCodeView() {
         </MainCard>
     );
 }
+/* eslint-enable react-hooks/exhaustive-deps */
 
 export default MCodeView;
diff --git a/src/views/clinicalGenomic/clinicalGenomicSearch.js b/src/views/clinicalGenomic/clinicalGenomicSearch.js
index bda5ddb0..37b67827 100644
--- a/src/views/clinicalGenomic/clinicalGenomicSearch.js
+++ b/src/views/clinicalGenomic/clinicalGenomicSearch.js
@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
-import { AppBar, Button, Divider, Toolbar, Typography } from '@mui/material';
+import { AppBar, Button, Toolbar, Typography } from '@mui/material';
 
-import { makeStyles, useTheme } from '@mui/styles';
+import { makeStyles } from '@mui/styles';
 import MainCard from 'ui-component/cards/MainCard';
 import VariantsSearch from '../genomicsData/VariantsSearch';
 import PatientCounts from './widgets/patientCounts';
@@ -16,7 +16,7 @@ import { COHORTS } from 'store/constant';
 import SearchHandler from './search/SearchHandler';
 import GenomicData from './widgets/genomicData';
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles((_) => ({
     stickytop: {
         position: 'fixed',
         backgroundColor: 'white',
@@ -81,12 +81,11 @@ function ClinicalGenomicSearch() {
     const classes = useStyles();
     const sidebarWriter = useSidebarWriterContext();
     const sidebarOpened = useSelector((state) => state.customization.opened);
-    const theme = useTheme();
 
     // When we load, set the sidebar component
     useEffect(() => {
         sidebarWriter(<Sidebar sites={['BCGSC', 'UHN']} cohorts={COHORTS} />);
-    }, []);
+    }, [sidebarWriter]);
 
     return (
         <>
diff --git a/src/views/clinicalGenomic/search/SearchHandler.js b/src/views/clinicalGenomic/search/SearchHandler.js
index 22dcfc56..6c521bf1 100644
--- a/src/views/clinicalGenomic/search/SearchHandler.js
+++ b/src/views/clinicalGenomic/search/SearchHandler.js
@@ -37,6 +37,10 @@ function ConsumeAllPages(url, resultConsumer, service = 'katsu') {
     return fetchFederation(url, service).then((data) => RecursiveQuery(data, 1));
 }
 
+// NB: I assign to lastPromise a bunch to keep track of whether or not we need to chain promises together
+// However, the linter really dislikes this, and assumes I want to put everything inside one useEffect?
+/* eslint-disable react-hooks/exhaustive-deps */
+
 // This handles transforming queries in the SearchResultsContext to actual search queries
 function SearchHandler() {
     const reader = useSearchQueryReaderContext();
@@ -316,7 +320,11 @@ function SearchHandler() {
                                                     return caseData;
                                                 })
                                                 .filter((caseData) => {
-                                                    if (reader.donorLists && Object.keys(reader.donorLists).length > 0 && caseData.donorID) {
+                                                    if (
+                                                        reader.donorLists &&
+                                                        Object.keys(reader.donorLists).length > 0 &&
+                                                        caseData.donorID
+                                                    ) {
                                                         return finalList.includes(caseData.donorID);
                                                     }
                                                     return true;
@@ -357,5 +365,6 @@ function SearchHandler() {
     // NB: This might be a good reason to have this be a function call instead of what it currently is.
     return <></>;
 }
+/* eslint-enable react-hooks/exhaustive-deps */
 
 export default SearchHandler;
diff --git a/src/views/clinicalGenomic/widgets/clinicalData.js b/src/views/clinicalGenomic/widgets/clinicalData.js
index 71cf02d9..1862c40c 100644
--- a/src/views/clinicalGenomic/widgets/clinicalData.js
+++ b/src/views/clinicalGenomic/widgets/clinicalData.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 // mui
-import { useTheme, makeStyles } from '@mui/styles';
+import { useTheme } from '@mui/styles';
 import { DataGrid } from '@mui/x-data-grid';
 import { Box, Typography } from '@mui/material';
 
@@ -10,38 +10,6 @@ import { Box, Typography } from '@mui/material';
 // project imports
 import { useSearchQueryWriterContext, useSearchResultsReaderContext } from '../SearchResultsContext';
 
-// Styles
-const useStyles = makeStyles({
-    dropdownItem: {
-        background: 'white',
-        paddingRight: '1.25em',
-        paddingLeft: '1.25em',
-        border: 'none',
-        width: 'fit-content(5em)',
-        '&:hover': {
-            background: '#2196f3',
-            color: 'white'
-        }
-    },
-    mobileRow: {
-        width: '800px'
-    },
-    scrollbar: {
-        scrollbarWidth: 'thin',
-        '&::-webkit-scrollbar': {
-            height: '0.4em',
-            width: '0.4em'
-        },
-        '&::-webkit-scrollbar-track': {
-            boxShadow: 'inset 0 0 4px rgba(0,0,0,0.00)',
-            webkitBoxShadow: 'inset 0 0 4px rgba(0,0,0,0.00)'
-        },
-        '&::-webkit-scrollbar-thumb': {
-            backgroundColor: 'rgba(0,0,0,.1)'
-        }
-    }
-});
-
 function ClinicalView() {
     const theme = useTheme();
 
diff --git a/src/views/clinicalGenomic/widgets/dataVisualization.js b/src/views/clinicalGenomic/widgets/dataVisualization.js
index 953c4843..c04e7d4a 100644
--- a/src/views/clinicalGenomic/widgets/dataVisualization.js
+++ b/src/views/clinicalGenomic/widgets/dataVisualization.js
@@ -20,7 +20,7 @@ import { useSearchResultsReaderContext } from '../SearchResultsContext';
 // Constants
 import { validStackedCharts, DataVisualizationChartInfo } from 'store/constant';
 
-function DataVisualization(props) {
+function DataVisualization() {
     // Hooks
     const resultsContext = useSearchResultsReaderContext().counts;
     // Plan for context below see current dataVis for expected shape
@@ -93,7 +93,7 @@ function DataVisualization(props) {
             localStorage.setItem('dataVisData', JSON.stringify(topKeys), { expires: 365 });
             localStorage.setItem('dataVisTrim', JSON.stringify([false, false, false, false]), { expires: 365 });
         }
-    }, []);
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
     const handleToggleDialog = () => {
         setOpen((prevOpen) => !prevOpen);
diff --git a/src/views/clinicalGenomic/widgets/genomicData.js b/src/views/clinicalGenomic/widgets/genomicData.js
index d0ad1310..3658cdcc 100644
--- a/src/views/clinicalGenomic/widgets/genomicData.js
+++ b/src/views/clinicalGenomic/widgets/genomicData.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 // mui
-import { useTheme, makeStyles } from '@mui/styles';
+import { useTheme } from '@mui/styles';
 import { DataGrid } from '@mui/x-data-grid';
 import { Box, Typography } from '@mui/material';
 
@@ -10,38 +10,6 @@ import { Box, Typography } from '@mui/material';
 // project imports
 import { useSearchQueryReaderContext, useSearchResultsReaderContext } from '../SearchResultsContext';
 
-// Styles
-const useStyles = makeStyles({
-    dropdownItem: {
-        background: 'white',
-        paddingRight: '1.25em',
-        paddingLeft: '1.25em',
-        border: 'none',
-        width: 'fit-content(5em)',
-        '&:hover': {
-            background: '#2196f3',
-            color: 'white'
-        }
-    },
-    mobileRow: {
-        width: '800px'
-    },
-    scrollbar: {
-        scrollbarWidth: 'thin',
-        '&::-webkit-scrollbar': {
-            height: '0.4em',
-            width: '0.4em'
-        },
-        '&::-webkit-scrollbar-track': {
-            boxShadow: 'inset 0 0 4px rgba(0,0,0,0.00)',
-            webkitBoxShadow: 'inset 0 0 4px rgba(0,0,0,0.00)'
-        },
-        '&::-webkit-scrollbar-thumb': {
-            backgroundColor: 'rgba(0,0,0,.1)'
-        }
-    }
-});
-
 function GenomicData() {
     const theme = useTheme();
 
diff --git a/src/views/clinicalGenomic/widgets/patientCountSingle.js b/src/views/clinicalGenomic/widgets/patientCountSingle.js
index b5a420ce..ecb2e4ba 100644
--- a/src/views/clinicalGenomic/widgets/patientCountSingle.js
+++ b/src/views/clinicalGenomic/widgets/patientCountSingle.js
@@ -1,9 +1,10 @@
-import { Fragment, useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { Avatar, Box, Button, CardHeader, Divider, Grid, Typography } from '@mui/material';
 import { useTheme, makeStyles } from '@mui/styles';
 import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
 import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
+import PropTypes from 'prop-types';
 
 const useStyles = makeStyles((theme) => ({
     patientEntry: {
@@ -138,4 +139,9 @@ function PatientCountSingle(props) {
     );
 }
 
+PatientCountSingle.propTypes = {
+    site: PropTypes.string,
+    counts: PropTypes.object
+};
+
 export default PatientCountSingle;
diff --git a/src/views/clinicalGenomic/widgets/patientCounts.js b/src/views/clinicalGenomic/widgets/patientCounts.js
index 2f2481d9..4af074a8 100644
--- a/src/views/clinicalGenomic/widgets/patientCounts.js
+++ b/src/views/clinicalGenomic/widgets/patientCounts.js
@@ -14,7 +14,7 @@ const useStyles = makeStyles((theme) => ({
     }
 }));
 
-function PatientCounts(props) {
+function PatientCounts() {
     const classes = useStyles();
     const context = useSearchResultsReaderContext();
     const sites = context?.federation;
diff --git a/src/views/clinicalGenomic/widgets/patientView.js b/src/views/clinicalGenomic/widgets/patientView.js
index 6cdb7d91..91b8f950 100644
--- a/src/views/clinicalGenomic/widgets/patientView.js
+++ b/src/views/clinicalGenomic/widgets/patientView.js
@@ -5,10 +5,11 @@ import { makeStyles, useTheme } from '@mui/styles';
 import { TreeView, TreeItem } from '@mui/lab';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import PropTypes from 'prop-types';
 
 import { useSearchResultsReaderContext } from '../SearchResultsContext';
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles((_theme) => ({
     label: {
         textTransform: 'capitalize',
         display: 'inline-flex'
@@ -96,7 +97,49 @@ const JSONTree = (props) => {
     );
 };
 
-function PatientView(props) {
+JSONTree.propTypes = {
+    id: PropTypes.string,
+    label: PropTypes.string,
+    json: PropTypes.object,
+    searchExp: PropTypes.string
+};
+
+// Prune the patient entry according to search
+const recursivePrune = (json, searchTerm) => {
+    if (Array.isArray(json)) {
+        // Create a new array with pruned children
+        const retVal = json.map((child) => recursivePrune(child, searchTerm)).filter((child) => child !== undefined);
+        return retVal.length <= 0 ? undefined : retVal;
+    }
+
+    if (isObject(json)) {
+        // Find any key that matches the search
+        const retVal = {};
+        Object.keys(json).forEach((key) => {
+            if (key.toLowerCase().indexOf(searchTerm) >= 0) {
+                // include all children of a matching parent
+                retVal[key] = json[key];
+                return;
+            }
+
+            // For all non-valid keys, there might be a valid child -- recurse downwards and prune
+            const childObj = recursivePrune(json[key], searchTerm);
+            if (childObj !== undefined) {
+                retVal[key] = childObj;
+            }
+        });
+        return Object.keys(retVal).length > 0 ? retVal : undefined;
+    }
+
+    if (typeof json === 'string' && json.toLowerCase().indexOf(searchTerm) >= 0) {
+        // Check if we're a match of the search
+        return json;
+    }
+
+    return undefined;
+};
+
+function PatientView() {
     const resultsContext = useSearchResultsReaderContext();
     const patient = resultsContext.donor?.map((loc) => loc?.results?.results?.[0])?.filter((donor) => donor)?.[0];
     const [expanded, setExpanded] = useState(['.']);
@@ -116,41 +159,6 @@ function PatientView(props) {
         return includeValues ? [`${prefix}:${typeof json === 'string' ? json.toLowerCase() : json}`] : [];
     };
 
-    // Prune the patient entry according to search
-    const recursivePrune = (json, searchTerm) => {
-        if (Array.isArray(json)) {
-            // Create a new array with pruned children
-            const retVal = json.map((child) => recursivePrune(child, searchTerm)).filter((child) => child !== undefined);
-            return retVal.length <= 0 ? undefined : retVal;
-        }
-
-        if (isObject(json)) {
-            // Find any key that matches the search
-            const retVal = {};
-            Object.keys(json).forEach((key) => {
-                if (key.toLowerCase().indexOf(searchTerm) >= 0) {
-                    // include all children of a matching parent
-                    retVal[key] = json[key];
-                    return;
-                }
-
-                // For all non-valid keys, there might be a valid child -- recurse downwards and prune
-                const childObj = recursivePrune(json[key], searchTerm);
-                if (childObj !== undefined) {
-                    retVal[key] = childObj;
-                }
-            });
-            return Object.keys(retVal).length > 0 ? retVal : undefined;
-        }
-
-        if (typeof json === 'string' && json.toLowerCase().indexOf(searchTerm) >= 0) {
-            // Check if we're a match of the search
-            return json;
-        }
-
-        return undefined;
-    };
-
     const handleExpandAll = () => {
         setExpanded((old) => (old.length <= 1 ? getAllChildIDs(prunedPatient, '.', false) : ['.']));
     };
@@ -199,6 +207,7 @@ function PatientView(props) {
     };
 
     // When the patient changes, we need to update the pruned view according to search
+    const patientString = JSON.stringify(patient);
     useEffect(() => {
         if (search !== '') {
             setPrunedPatient(recursivePrune(patient, search));
@@ -206,7 +215,7 @@ function PatientView(props) {
             // Otherwise, just reset the prunedPatient view to the patient view
             setPrunedPatient(patient);
         }
-    }, [JSON.stringify(patient)]);
+    }, [patientString]); // eslint-disable-line react-hooks/exhaustive-deps
 
     const noResultsMessage = !patient ? (
         'Please select a patient from the above table'
diff --git a/src/views/clinicalGenomic/widgets/sidebar.js b/src/views/clinicalGenomic/widgets/sidebar.js
index 2f5544fd..4d13a202 100644
--- a/src/views/clinicalGenomic/widgets/sidebar.js
+++ b/src/views/clinicalGenomic/widgets/sidebar.js
@@ -15,11 +15,12 @@ import {
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import { makeStyles, useTheme } from '@mui/styles';
+import PropTypes from 'prop-types';
 
 import { useSearchQueryWriterContext, useSearchResultsReaderContext } from '../SearchResultsContext';
 import { fetchFederation } from '../../../store/api';
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles((_) => ({
     tab: {
         minWidth: 40
     },
@@ -73,6 +74,12 @@ function SidebarGroup(props) {
     );
 }
 
+SidebarGroup.propTypes = {
+    name: PropTypes.string,
+    children: PropTypes.node,
+    hide: PropTypes.bool
+};
+
 function StyledCheckboxList(props) {
     const { groupName, isDonorList, isFilterList, remap, onWrite, options, useAutoComplete, hide } = props;
     const [checked, setChecked] = useState({});
@@ -205,15 +212,26 @@ function StyledCheckboxList(props) {
         ))
     );
 }
+
+StyledCheckboxList.propTypes = {
+    groupName: PropTypes.string,
+    hide: PropTypes.bool,
+    isDonorList: PropTypes.bool,
+    isFilterList: PropTypes.bool,
+    remap: PropTypes.func,
+    onWrite: PropTypes.func,
+    options: PropTypes.array,
+    useAutoComplete: PropTypes.bool
+};
+
 // A group of genomics data
 // Keeping this separate from the rest as it's all somewhat self-contained
 // NB: Should maybe go into a separate .js file
 function GenomicsGroup(props) {
     const { chromosomes, genes, onWrite, hide } = props;
-    const classes = useStyles();
     // Genomic data
-    const referenceGenomes = ['hg38'];
-    const [selectedGenome, setSelectedGenome] = useState('hg38');
+    // const referenceGenomes = ['hg38'];
+    const [selectedGenome, _setSelectedGenome] = useState('hg38');
     const [selectedChromosomes, setSelectedChromosomes] = useState('');
     const [selectedGenes, setSelectedGenes] = useState('');
     const [startPos, setStartPos] = useState(0);
@@ -300,7 +318,14 @@ function GenomicsGroup(props) {
     );
 }
 
-function Sidebar(props) {
+GenomicsGroup.propTypes = {
+    chromosomes: PropTypes.array,
+    genes: PropTypes.array,
+    hide: PropTypes.bool,
+    onWrite: PropTypes.func
+};
+
+function Sidebar() {
     const [selectedtab, setSelectedTab] = useState('All');
     const readerContext = useSearchResultsReaderContext();
     const writerContext = useSearchQueryWriterContext();
diff --git a/src/views/dashboard/Default/TotalIncomeDarkCard.js b/src/views/dashboard/Default/TotalIncomeDarkCard.js
index c8a6abf4..62e0a2a4 100644
--- a/src/views/dashboard/Default/TotalIncomeDarkCard.js
+++ b/src/views/dashboard/Default/TotalIncomeDarkCard.js
@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 // mui
 import { makeStyles } from '@mui/styles';
diff --git a/src/views/dashboard/Default/datasetIdSelect.js b/src/views/dashboard/Default/datasetIdSelect.js
index fac49806..f8cbec01 100644
--- a/src/views/dashboard/Default/datasetIdSelect.js
+++ b/src/views/dashboard/Default/datasetIdSelect.js
@@ -1,9 +1,9 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import Box from '@mui/material/Box';
 import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
 import Select from '@mui/material/Select';
-import { fetchDatasets } from '../../../store/api';
+// import { fetchDatasets } from '../../../store/api';
 import AlertComponent from 'ui-component/AlertComponent';
 
 // REDUX
@@ -15,15 +15,16 @@ export default function DatasetIdSelect() {
 
     // STATES
     const [selectedDataset, setSelectedDataset] = useState(events.customization.selectedDataset);
-    const [datasets, setDatasets] = useState(events.customization.datasets);
+    const [datasets, _setDatasets] = useState(events.customization.datasets);
     const [open, setOpen] = useState(false);
-    const [alertMessage, setAlertMessage] = useState('');
-    const [alertSeverity, setAlertSeverity] = useState('');
+    const [alertMessage, _setAlertMessage] = useState('');
+    const [alertSeverity, _setAlertSeverity] = useState('');
 
     function updateParentState(datasetName, datasetId) {
         dispatch({ type: 'SET_UPDATE_STATE', payload: { datasetName, datasetId } });
     }
 
+    /* 
     function setFirstDataset(datasetsList) {
         const firstDataset = datasetsList[Object.keys(datasetsList)[0]];
         setSelectedDataset(firstDataset.name);
@@ -57,6 +58,7 @@ export default function DatasetIdSelect() {
                 });
         }
     });
+    */
 
     const handleChange = (id, name) => {
         setSelectedDataset(name);
diff --git a/src/views/dashboard/Default/index.js b/src/views/dashboard/Default/index.js
index c40d70f2..56e12752 100644
--- a/src/views/dashboard/Default/index.js
+++ b/src/views/dashboard/Default/index.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 // mui
 import { Grid } from '@mui/material';
diff --git a/src/views/genomicsData/HtsgetBrowser.js b/src/views/genomicsData/HtsgetBrowser.js
index 703f9fd6..2728ab63 100644
--- a/src/views/genomicsData/HtsgetBrowser.js
+++ b/src/views/genomicsData/HtsgetBrowser.js
@@ -28,8 +28,8 @@ function HtsgetBrowser() {
     const [open, setOpen] = useState(false);
     const [selectedBamIds, setSelectedBamIds] = useState([]);
     const [selectedVcfIds, setSelectedVcfIds] = useState([]);
-    const [alertMessage, setAlertMessage] = useState('');
-    const [alertSeverity, setAlertSeverity] = useState('');
+    const [alertMessage, _setAlertMessage] = useState('');
+    const [alertSeverity, _setAlertSeverity] = useState('');
 
     useEffect(() => {
         setSelected([]);
@@ -41,7 +41,7 @@ function HtsgetBrowser() {
         // Get a list of genomics files available
         trackPromise(
             fetchKatsu('/api/genomicsreports')
-                .then((data) => {
+                .then((_data) => {
                     // TODO: get a list of ids of genomics files from API above
                     // Or any other APIs that can provide a list of IDs
                     // Note: if only VCF files are served, then the following TODOs concerning BAM files
diff --git a/src/views/genomicsData/IGViewer.js b/src/views/genomicsData/IGViewer.js
index 08b7a287..ecfa29f2 100644
--- a/src/views/genomicsData/IGViewer.js
+++ b/src/views/genomicsData/IGViewer.js
@@ -1,24 +1,36 @@
+import { useState } from 'react';
+
+import { Alert, Snackbar } from '@mui/material';
+
 import NewWindow from 'react-new-window';
 import CramVcfInstance from 'ui-component/IGV/CramVcfInstance';
 import PropTypes from 'prop-types';
 
 const IGViewer = ({ closeWindow, options }) => {
+    const [open, setOpen] = useState(false);
     const onClosed = () => {
         closeWindow();
     };
 
     return (
-        <NewWindow
-            title="Integrative Genomics Viewer"
-            onUnload={onClosed}
-            onBlock={() => alert('Please allow popups for this website')}
-            features={{
-                outerHeight: '100%',
-                outerWidth: '100%'
-            }}
-        >
-            <CramVcfInstance options={options} />
-        </NewWindow>
+        <>
+            <Snackbar open={open} autoHideDuration={6000} onClose={() => setOpen(false)}>
+                <Alert onClose={() => setOpen(false)} severity="error" sx={{ width: '100%' }}>
+                    Please allow popups for this website
+                </Alert>
+            </Snackbar>
+            <NewWindow
+                title="Integrative Genomics Viewer"
+                onUnload={onClosed}
+                onBlock={() => setOpen(true)}
+                features={{
+                    outerHeight: '100%',
+                    outerWidth: '100%'
+                }}
+            >
+                <CramVcfInstance options={options} />
+            </NewWindow>
+        </>
     );
 };
 
diff --git a/src/views/genomicsData/VariantsSearch.js b/src/views/genomicsData/VariantsSearch.js
index fb037e46..aa5cac0f 100644
--- a/src/views/genomicsData/VariantsSearch.js
+++ b/src/views/genomicsData/VariantsSearch.js
@@ -7,11 +7,11 @@ import VariantsTable from 'ui-component/Tables/VariantsTable';
 import { SearchIndicator } from 'ui-component/LoadingIndicator/SearchIndicator';
 import AlertComponent from 'ui-component/AlertComponent';
 import { ListOfReferenceNames } from 'store/constant';
-import { trackPromise, usePromiseTracker } from 'ui-component/LoadingIndicator/LoadingIndicator';
+import { trackPromise } from 'ui-component/LoadingIndicator/LoadingIndicator';
 import 'assets/css/VariantsSearch.css';
 import { searchVariant, fetchFederationClinicalData, htsget } from 'store/api';
 import IGViewer from './IGViewer';
-import DropDown from '../../ui-component/DropDown';
+// import DropDown from '../../ui-component/DropDown';
 import {
     processMCodeMainData,
     processMedicationListData,
@@ -26,6 +26,10 @@ import { useTheme } from '@mui/styles';
 import Stack from '@mui/material/Stack';
 import Divider from '@mui/material/Divider';
 
+// NB: This VariantsSearch is currently unused, but is throwing linter errors
+// Disabling it for now
+/* eslint-disable no-unused-vars */
+/* eslint-disable react-hooks/exhaustive-deps */
 function VariantsSearch() {
     const [isLoading, setLoading] = useState(true);
     const theme = useTheme();
@@ -34,12 +38,12 @@ function VariantsSearch() {
 
     const [rowData, setRowData] = useState([]);
     const [displayVariantsTable, setDisplayVariantsTable] = useState(false);
-    const { promiseInProgress } = usePromiseTracker();
+    // const { promiseInProgress } = usePromiseTracker();
     const [open, setOpen] = useState(false);
     const [alertMessage, setAlertMessage] = useState('');
     const [alertSeverity, setAlertSeverity] = useState('warning');
     const [isIGVWindowOpen, setIsIGVWindowOpen] = useState(false);
-    const [showIGVButton, setShowIGVButton] = useState(false);
+    const [_showIGVButton, setShowIGVButton] = useState(false);
     const [IGVOptions, setIGVOptions] = useState({});
     const [variantSearchOptions, setVariantSearchOptions] = useState({});
     const [patientList, setPatientList] = useState([]);
@@ -48,7 +52,7 @@ function VariantsSearch() {
     // Clinical Search Filter
     const clinicalSearchPatients = useSelector((state) => state.customization.clinicalSearchResultPatients);
     const clinicalSearch = useSelector((state) => state.customization.clinicalSearch);
-    const [cancerType, setCancerType] = React.useState([]);
+    const [cancerType, _setCancerType] = React.useState([]);
 
     // Dropdown patient table open/closed
     const [isListOpenMedications, setListOpenMedications] = React.useState(false);
@@ -567,5 +571,7 @@ function VariantsSearch() {
         </>
     );
 }
+/* eslint-enable no-unused-vars */
+/* eslint-enable react-hooks/exhaustive-deps */
 
 export default VariantsSearch;
diff --git a/src/views/summary/CustomOfflineChart.js b/src/views/summary/CustomOfflineChart.js
index b9e436bb..f1aeaa2c 100644
--- a/src/views/summary/CustomOfflineChart.js
+++ b/src/views/summary/CustomOfflineChart.js
@@ -1,4 +1,4 @@
-import { createRef, useCallback, useState, useEffect } from 'react';
+import { createRef, useState, useEffect } from 'react';
 
 // MUI
 import PropTypes from 'prop-types';
@@ -9,7 +9,7 @@ import { Box, IconButton } from '@mui/material';
 import { useSelector } from 'react-redux';
 
 // Third-party libraries
-import Highcharts, { map } from 'highcharts';
+import Highcharts from 'highcharts';
 import HighchartsReact from 'highcharts-react-official';
 import NoDataToDisplay from 'highcharts/modules/no-data-to-display';
 import { IconTrash } from '@tabler/icons';
@@ -197,7 +197,7 @@ function CustomOfflineChart(props) {
                     series: [{ data, colorByPoint: true, showInLegend: false }],
                     tooltip: {
                         useHTML: true,
-                        formatter: function () {
+                        formatter: () => {
                             let dataSum = 0;
                             this.series.points.forEach((point) => {
                                 dataSum += point.y;
@@ -254,7 +254,22 @@ function CustomOfflineChart(props) {
         }
 
         createChart();
-    }, [dataVis, chart, chartData, JSON.stringify(dataObject), trim]);
+    }, [
+        dataVis,
+        chart,
+        chartData,
+        trim,
+        cutoff,
+        dataObject,
+        grayscale,
+        height,
+        orderAlphabetically,
+        orderByFrequency,
+        theme.palette.grey,
+        theme.palette.primary,
+        theme.palette.secondary,
+        theme.palette.tertiary
+    ]);
 
     function setLocalStorageDataVisChart(event) {
         // Set LocalStorage for Data Visualization Chart Type
@@ -288,7 +303,7 @@ function CustomOfflineChart(props) {
         } else {
             chartObj?.hideLoading();
         }
-    }, [loading]);
+    }, [chartRef, loading]);
 
     const showTrim = (dataObject || dataVis[chartData]) && Object.entries(dataObject === '' ? dataVis[chartData] : dataObject).length > 15;
 
@@ -397,15 +412,20 @@ function CustomOfflineChart(props) {
 }
 
 CustomOfflineChart.propTypes = {
+    chartType: PropTypes.string,
+    cutoff: PropTypes.number,
+    data: PropTypes.string,
+    dataObject: PropTypes.any,
+    dataVis: PropTypes.any,
     dropDown: PropTypes.bool,
+    edit: PropTypes.bool,
+    grayscale: PropTypes.bool,
     height: PropTypes.string,
-    dataVis: PropTypes.any,
-    dataObject: PropTypes.any,
+    index: PropTypes.number,
+    loading: PropTypes.bool,
     onRemoveChart: PropTypes.func,
-    grayscale: PropTypes.bool,
     orderByFrequency: PropTypes.bool,
     orderAlphabetically: PropTypes.bool,
-    cutoff: PropTypes.number,
     trimByDefault: PropTypes.bool
 };
 
diff --git a/src/views/summary/TreatingCentreMap.js b/src/views/summary/TreatingCentreMap.js
index 70607cb7..c8ccb716 100644
--- a/src/views/summary/TreatingCentreMap.js
+++ b/src/views/summary/TreatingCentreMap.js
@@ -5,9 +5,6 @@ import HighchartsMap from 'highcharts/modules/map';
 import mapDataCanada from '@highcharts/map-collection/countries/ca/ca-all.geo.json';
 import PropTypes from 'prop-types';
 
-// mui
-import { useTheme } from '@mui/styles';
-
 import { LoadingIndicator, usePromiseTracker, trackPromise } from 'ui-component/LoadingIndicator/LoadingIndicator';
 import MainCard from 'ui-component/cards/MainCard';
 
diff --git a/src/views/summary/summary.js b/src/views/summary/summary.js
index ea60bb7d..af33c0eb 100644
--- a/src/views/summary/summary.js
+++ b/src/views/summary/summary.js
@@ -44,7 +44,7 @@ function Summary() {
     const sidebarWriter = useSidebarWriterContext();
     useEffect(() => {
         sidebarWriter(null);
-    }, []);
+    }, [sidebarWriter]);
 
     /* Aggregated count of federated data */
     function federationStatCount(data, endpoint) {
diff --git a/src/views/utilities/Color.js b/src/views/utilities/Color.js
index d92b9206..d41e88b3 100644
--- a/src/views/utilities/Color.js
+++ b/src/views/utilities/Color.js
@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 // mui
 import { useTheme } from '@mui/styles';
diff --git a/src/views/utilities/MaterialIcons.js b/src/views/utilities/MaterialIcons.js
index b4674af1..538369d8 100644
--- a/src/views/utilities/MaterialIcons.js
+++ b/src/views/utilities/MaterialIcons.js
@@ -1,5 +1,3 @@
-import React from 'react';
-
 // mui
 import { makeStyles } from '@mui/styles';
 import { Card } from '@mui/material';
diff --git a/src/views/utilities/Shadow.js b/src/views/utilities/Shadow.js
index 442e9d61..3603760c 100644
--- a/src/views/utilities/Shadow.js
+++ b/src/views/utilities/Shadow.js
@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 // mui
 import { useTheme } from '@mui/styles';
diff --git a/src/views/utilities/TablerIcons.js b/src/views/utilities/TablerIcons.js
index 61b3bff0..3b9a965a 100644
--- a/src/views/utilities/TablerIcons.js
+++ b/src/views/utilities/TablerIcons.js
@@ -1,5 +1,3 @@
-import React from 'react';
-
 // mui
 import { makeStyles } from '@mui/styles';
 import { Card } from '@mui/material';
diff --git a/src/views/utilities/Typography.js b/src/views/utilities/Typography.js
index 56fa8bf3..54cd234b 100644
--- a/src/views/utilities/Typography.js
+++ b/src/views/utilities/Typography.js
@@ -1,4 +1,3 @@
-import React from 'react';
 // mui
 import { Grid, Link } from '@mui/material';
 import MuiTypography from '@mui/material/Typography';

From 070076bd26b4d68c12afedd1149c4b00432b18a6 Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Tue, 19 Sep 2023 11:43:29 -0400
Subject: [PATCH 12/51] Prettier fixes

---
 .github/workflows/candig-dispatch.yml       | 18 +++---
 .github/workflows/lint.yml                  | 63 ++++++++++-----------
 .prettierrc                                 |  3 +-
 PULL_REQUEST_TEMPLATE/stable_pr_template.md |  7 ++-
 4 files changed, 45 insertions(+), 46 deletions(-)

diff --git a/.github/workflows/candig-dispatch.yml b/.github/workflows/candig-dispatch.yml
index 82467322..a5df4832 100644
--- a/.github/workflows/candig-dispatch.yml
+++ b/.github/workflows/candig-dispatch.yml
@@ -3,14 +3,14 @@ on:
     push:
         branches: [develop]
 jobs:
-  CanDIG-dispatch:
-    runs-on: ubuntu-latest
-    env:
-      PARENT_REPOSITORY: 'CanDIG/CanDIGv2'
-      CHECKOUT_BRANCH: 'develop'
-      PR_AGAINST_BRANCH: 'develop'
-      OWNER: 'CanDIG'
-    steps:
+    CanDIG-dispatch:
+        runs-on: ubuntu-latest
+        env:
+            PARENT_REPOSITORY: 'CanDIG/CanDIGv2'
+            CHECKOUT_BRANCH: 'develop'
+            PR_AGAINST_BRANCH: 'develop'
+            OWNER: 'CanDIG'
+        steps:
             - name: Check out repository code
               uses: actions/checkout@v3
             - name: Create PR in CanDIGv2
@@ -21,7 +21,7 @@ jobs:
                   parent_repository: ${{ env.PARENT_REPOSITORY }}
                   checkout_branch: ${{ env.CHECKOUT_BRANCH}}
                   pr_against_branch: ${{ env.PR_AGAINST_BRANCH }}
-                  pr_description: "PR triggered by update to develop branch on ${{ github.repository }}. Commit hash: ${{ github.sha }}"
+                  pr_description: 'PR triggered by update to develop branch on ${{ github.repository }}. Commit hash: ${{ github.sha }}'
                   owner: ${{ env.OWNER }}
                   submodule_path: lib/candig-data-portal/candig-data-portal
                   label: Submodule update
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index b466e241..c392bca7 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -1,40 +1,39 @@
 name: Lint
 
 on:
-  # Trigger the workflow on push or pull request,
-  # but only for the main branch
-  push:
-    branches:
-      - develop
-  pull_request:
-    branches:
-      - develop
+    # Trigger the workflow on push or pull request,
+    # but only for the main branch
+    push:
+        branches:
+            - develop
+    pull_request:
+        branches:
+            - develop
 
 # Down scope as necessary via https://docs.github.com/en/actions/security-guides/automatic-token-authentication#modifying-the-permissions-for-the-github_token
 permissions:
-  checks: write
-  contents: write
+    checks: write
+    contents: write
 
 jobs:
-  run-linters:
-    name: Run linters
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v3
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12
-
-
-      - name: Install Node.js dependencies
-        run: npm ci
-
-      - name: Run linters
-        uses: wearerequired/lint-action@v2
-        with:
-          eslint: true
-          prettier: true
+    run-linters:
+        name: Run linters
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Check out Git repository
+              uses: actions/checkout@v3
+
+            - name: Set up Node.js
+              uses: actions/setup-node@v1
+              with:
+                  node-version: 12
+
+            - name: Install Node.js dependencies
+              run: npm ci
+
+            - name: Run linters
+              uses: wearerequired/lint-action@v2
+              with:
+                  eslint: true
+                  prettier: true
diff --git a/.prettierrc b/.prettierrc
index 2eeeb745..c6905b15 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -5,6 +5,5 @@
     "trailingComma": "none",
     "tabWidth": 4,
     "useTabs": false,
-    "endOfLine": "auto",
-    "camelcase": "off"
+    "endOfLine": "auto"
 }
diff --git a/PULL_REQUEST_TEMPLATE/stable_pr_template.md b/PULL_REQUEST_TEMPLATE/stable_pr_template.md
index 3e0b320e..1fdb79fe 100644
--- a/PULL_REQUEST_TEMPLATE/stable_pr_template.md
+++ b/PULL_REQUEST_TEMPLATE/stable_pr_template.md
@@ -1,6 +1,7 @@
 ## vX.X.X: Description
+
 Add a summary description of the main user-facing changes made in this release, relative to the last stable release.
 
-- [ ] Tagged as a release in this repo
-- [ ] Passes integration tests on a development instance
-- [ ] Images pushed to Dockerhub
+-   [ ] Tagged as a release in this repo
+-   [ ] Passes integration tests on a development instance
+-   [ ] Images pushed to Dockerhub

From 19c714930bbcddfff1ad87dd656f37f4bd4bf64e Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Tue, 19 Sep 2023 11:45:31 -0400
Subject: [PATCH 13/51] Missed a prettier fix

---
 .github/pull_request_template.md | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index f44ce857..45d1647f 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -1,33 +1,33 @@
 ## Ticket(s)
 
-
 ## Description
 
-
 ## Expected Behaviour
 
-
 ## Related Issues (if appropriate)
 
-
 ## Screenshots (if appropriate)
+
 ### Before PR
 
 ### After PR
 
 ## To do/Tickets to be made before merging branch
-- 
+
+-
 
 ## Types of Change(s)
-- [ ] 🪲 Bug fix (non-breaking change that fixes an issue)
-- [ ] ✨ New feature (non-breaking change that adds functionality)
-- [ ] 💥 Breaking change (fix or feature that would cause existing functionality to change)
+
+-   [ ] 🪲 Bug fix (non-breaking change that fixes an issue)
+-   [ ] ✨ New feature (non-breaking change that adds functionality)
+-   [ ] 💥 Breaking change (fix or feature that would cause existing functionality to change)
 
 ## Has it been tested for:
-- [ ] My change requires a change to the documentation
-- [ ] I have updated the documentation accordingly
-- [ ] Prettier linter doesn't return errors
-- [ ] Production branch PR browser testing: Chrome, Firefox, Edge, etc. 
-- [ ] Locally tested
-- [ ] Dev server tested
-- [ ] Production tested when merging into stable/production branch
\ No newline at end of file
+
+-   [ ] My change requires a change to the documentation
+-   [ ] I have updated the documentation accordingly
+-   [ ] Prettier linter doesn't return errors
+-   [ ] Production branch PR browser testing: Chrome, Firefox, Edge, etc.
+-   [ ] Locally tested
+-   [ ] Dev server tested
+-   [ ] Production tested when merging into stable/production branch

From b17045bc1779a72c3ab9dd367d3450b621dd2bf1 Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Tue, 19 Sep 2023 11:46:52 -0400
Subject: [PATCH 14/51] Prettier was overzealous with the overwriting

---
 .github/pull_request_template.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 45d1647f..3f5680fa 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -1,11 +1,19 @@
 ## Ticket(s)
 
+-
+
 ## Description
 
+-
+
 ## Expected Behaviour
 
+-
+
 ## Related Issues (if appropriate)
 
+-
+
 ## Screenshots (if appropriate)
 
 ### Before PR

From 230364d211882ef49c88961b9dd9d8305692c389 Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Tue, 19 Sep 2023 13:09:19 -0400
Subject: [PATCH 15/51] Apply suggestions by @CourtneyGosselin

---
 .github/workflows/lint.yml                    |   2 +-
 .../dashboard/Default/datasetIdSelect.js      | 114 ----
 src/views/genomicsData/VariantsSearch.js      | 577 ------------------
 3 files changed, 1 insertion(+), 692 deletions(-)
 delete mode 100644 src/views/dashboard/Default/datasetIdSelect.js
 delete mode 100644 src/views/genomicsData/VariantsSearch.js

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index c392bca7..c2e26e23 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -2,7 +2,7 @@ name: Lint
 
 on:
     # Trigger the workflow on push or pull request,
-    # but only for the main branch
+    # but only for the develop branch
     push:
         branches:
             - develop
diff --git a/src/views/dashboard/Default/datasetIdSelect.js b/src/views/dashboard/Default/datasetIdSelect.js
deleted file mode 100644
index f8cbec01..00000000
--- a/src/views/dashboard/Default/datasetIdSelect.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import { useState } from 'react';
-import Box from '@mui/material/Box';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-// import { fetchDatasets } from '../../../store/api';
-import AlertComponent from 'ui-component/AlertComponent';
-
-// REDUX
-import { useSelector, useDispatch } from 'react-redux';
-
-export default function DatasetIdSelect() {
-    const events = useSelector((state) => state);
-    const dispatch = useDispatch();
-
-    // STATES
-    const [selectedDataset, setSelectedDataset] = useState(events.customization.selectedDataset);
-    const [datasets, _setDatasets] = useState(events.customization.datasets);
-    const [open, setOpen] = useState(false);
-    const [alertMessage, _setAlertMessage] = useState('');
-    const [alertSeverity, _setAlertSeverity] = useState('');
-
-    function updateParentState(datasetName, datasetId) {
-        dispatch({ type: 'SET_UPDATE_STATE', payload: { datasetName, datasetId } });
-    }
-
-    /* 
-    function setFirstDataset(datasetsList) {
-        const firstDataset = datasetsList[Object.keys(datasetsList)[0]];
-        setSelectedDataset(firstDataset.name);
-        updateParentState(firstDataset.name, firstDataset.id);
-        dispatch({ type: 'SET_SELECTED_DATASET', payload: firstDataset.name });
-    }
-
-    function processDatasetJson(datasetJson) {
-        const datasetsList = {};
-        datasetJson.forEach((dataset) => {
-            datasetsList[dataset.id] = dataset;
-        });
-        return datasetsList;
-    }
-
-    useEffect(() => {
-        if (!selectedDataset) {
-            fetchDatasets()
-                .then((data) => {
-                    if (data.results) {
-                        const datasetsList = processDatasetJson(data.results.datasets);
-                        setDatasets(datasetsList);
-                        setFirstDataset(datasetsList);
-                        dispatch({ type: 'SET_DATASETS', payload: datasetsList });
-                    }
-                })
-                .catch(() => {
-                    setOpen(true);
-                    setAlertMessage('No datasets are currently available. If this issue persists, contact your sysadmin for assistance');
-                    setAlertSeverity('error');
-                });
-        }
-    });
-    */
-
-    const handleChange = (id, name) => {
-        setSelectedDataset(name);
-        updateParentState(name, id); // Suppose tp be id
-        dispatch({ type: 'SET_SELECTED_DATASET', payload: name });
-    };
-
-    const datasetList = Object.keys(datasets).map((key) => (
-        <MenuItem key={datasets[key].id} value={datasets[key].name} onClick={() => handleChange(datasets[key].id, datasets[key].name)}>
-            {datasets[key].name}
-        </MenuItem>
-    ));
-
-    return (
-        <Box>
-            <Box
-                sx={{
-                    border: 1,
-                    borderRadius: events.customization.borderRadius * 0.25,
-                    position: 'absolute',
-                    top: 12,
-                    right: 10,
-                    pr: 1,
-                    pl: 1
-                }}
-            >
-                {selectedDataset && (
-                    <FormControl sx={{ minWidth: 125 }}>
-                        {/* <InputLabel id="demo-simple-select-label">Dataset ID</InputLabel> */}
-                        <Select
-                            labelId="demo-simple-select-label"
-                            id="demo-simple-select"
-                            value={selectedDataset}
-                            name="POG"
-                            variant="standard"
-                            sx={{ fontsize: '0.25rem', height: '1.75rem' }}
-                        >
-                            {datasetList}
-                        </Select>
-                    </FormControl>
-                )}
-            </Box>
-            <AlertComponent
-                open={open}
-                setOpen={setOpen}
-                text={alertMessage}
-                severity={alertSeverity}
-                variant="filled"
-                fontColor={alertSeverity === 'error' ? 'white' : 'black'}
-            />
-        </Box>
-    );
-}
diff --git a/src/views/genomicsData/VariantsSearch.js b/src/views/genomicsData/VariantsSearch.js
deleted file mode 100644
index aa5cac0f..00000000
--- a/src/views/genomicsData/VariantsSearch.js
+++ /dev/null
@@ -1,577 +0,0 @@
-import * as React from 'react';
-
-import { useState, useEffect } from 'react';
-import { Grid, Button, FormControl, InputLabel, Input, NativeSelect, Box } from '@mui/material';
-import { useSelector, useDispatch } from 'react-redux';
-import VariantsTable from 'ui-component/Tables/VariantsTable';
-import { SearchIndicator } from 'ui-component/LoadingIndicator/SearchIndicator';
-import AlertComponent from 'ui-component/AlertComponent';
-import { ListOfReferenceNames } from 'store/constant';
-import { trackPromise } from 'ui-component/LoadingIndicator/LoadingIndicator';
-import 'assets/css/VariantsSearch.css';
-import { searchVariant, fetchFederationClinicalData, htsget } from 'store/api';
-import IGViewer from './IGViewer';
-// import DropDown from '../../ui-component/DropDown';
-import {
-    processMCodeMainData,
-    processMedicationListData,
-    processCondtionsListData,
-    processSexListData,
-    processCancerTypeListData,
-    processHistologicalTypeListData
-} from 'store/mcode';
-
-// mui
-import { useTheme } from '@mui/styles';
-import Stack from '@mui/material/Stack';
-import Divider from '@mui/material/Divider';
-
-// NB: This VariantsSearch is currently unused, but is throwing linter errors
-// Disabling it for now
-/* eslint-disable no-unused-vars */
-/* eslint-disable react-hooks/exhaustive-deps */
-function VariantsSearch() {
-    const [isLoading, setLoading] = useState(true);
-    const theme = useTheme();
-    const dispatch = useDispatch();
-    const events = useSelector((state) => state);
-
-    const [rowData, setRowData] = useState([]);
-    const [displayVariantsTable, setDisplayVariantsTable] = useState(false);
-    // const { promiseInProgress } = usePromiseTracker();
-    const [open, setOpen] = useState(false);
-    const [alertMessage, setAlertMessage] = useState('');
-    const [alertSeverity, setAlertSeverity] = useState('warning');
-    const [isIGVWindowOpen, setIsIGVWindowOpen] = useState(false);
-    const [_showIGVButton, setShowIGVButton] = useState(false);
-    const [IGVOptions, setIGVOptions] = useState({});
-    const [variantSearchOptions, setVariantSearchOptions] = useState({});
-    const [patientList, setPatientList] = useState([]);
-    const [IGVBaseUrl, setIGVBaseUrl] = useState(`${htsget}/htsget/v1/variants/`);
-
-    // Clinical Search Filter
-    const clinicalSearchPatients = useSelector((state) => state.customization.clinicalSearchResultPatients);
-    const clinicalSearch = useSelector((state) => state.customization.clinicalSearch);
-    const [cancerType, _setCancerType] = React.useState([]);
-
-    // Dropdown patient table open/closed
-    const [isListOpenMedications, setListOpenMedications] = React.useState(false);
-    const [isListOpenConditions, setListOpenConditions] = React.useState(false);
-    const [isListOpenSex, setListOpenSex] = React.useState(false);
-    const [isListOpenCancerType, setListOpenCancerType] = React.useState(false);
-    const [isListOpenHistological, setListOpenHistological] = React.useState(false);
-
-    // Dropdown patient table filtering current selection in dropdown
-    const [selectedMedications, setSelectedMedications] = React.useState(clinicalSearch.clinicalSearchDropDowns.selectedMedications);
-    const [selectedConditions, setSelectedConditions] = React.useState(clinicalSearch.clinicalSearchDropDowns.selectedConditions);
-    const [selectedSex, setSelectedSex] = React.useState(clinicalSearch.clinicalSearchDropDowns.selectedSex);
-    const [selectedCancerType, setSelectedCancerType] = React.useState(clinicalSearch.clinicalSearchDropDowns.selectedCancerType);
-    const [selectedHistologicalType, setSelectedHistologicalType] = React.useState(
-        clinicalSearch.clinicalSearchDropDowns.selectedHistologicalType
-    );
-
-    // Dropdown patient table list for filtering
-    const [medicationList, setMedicationList] = React.useState(clinicalSearch.clinicalSearchDropDowns.medicationList);
-    const [conditionList, setConditionList] = React.useState(clinicalSearch.clinicalSearchDropDowns.conditionList);
-    const [sexList, setSexList] = React.useState(clinicalSearch.clinicalSearchDropDowns.sexList);
-    const [cancerTypeList, setCancerTypeList] = React.useState(clinicalSearch.clinicalSearchDropDowns.cancerTypeList);
-    const [HistologicalList, setHistologicalList] = React.useState(clinicalSearch.clinicalSearchDropDowns.HistologicalList);
-
-    /*
-    Build the dropdown for chromosome
-    * @param {None}
-    * Return a list of options with chromosome
-    */
-    function chrSelectBuilder() {
-        const refNameList = [];
-        ListOfReferenceNames.forEach((refName) => {
-            refNameList.push(
-                <option key={refName} value={refName}>
-                    {refName}
-                </option>
-            );
-        });
-        return refNameList;
-    }
-
-    function setClincalSearchPatients(data) {
-        dispatch({
-            type: 'SET_CLINICAL_SEARCH_PATIENTS',
-            payload: {
-                data
-            }
-        });
-    }
-
-    function setRedux(rows) {
-        const tempClinicalSearchResults = [];
-        rows.forEach((patient) => {
-            tempClinicalSearchResults.push({ id: patient.id, genomicId: patient.genomic_id });
-        });
-        dispatch({
-            type: 'SET_SELECTED_CLINICAL_SEARCH_RESULTS',
-            payload: {
-                selectedClinicalSearchResults: tempClinicalSearchResults,
-                clinicalSearchDropDowns: {
-                    medicationList,
-                    selectedMedications,
-                    conditionList,
-                    selectedConditions,
-                    sexList,
-                    selectedSex,
-                    cancerTypeList,
-                    selectedCancerType,
-                    HistologicalList,
-                    selectedHistologicalType
-                }
-            }
-        });
-    }
-
-    const dropDownSelection = (dropDownGroup, selected) => {
-        if (dropDownGroup === 'CONDITIONS') {
-            setSelectedConditions(selected);
-            setListOpenConditions(false);
-        } else if (dropDownGroup === 'MEDICATIONS') {
-            setSelectedMedications(selected);
-            setListOpenMedications(false);
-        } else if (dropDownGroup === 'SEX') {
-            setSelectedSex(selected);
-            setListOpenSex(false);
-        } else if (dropDownGroup === 'CANCER TYPE') {
-            setSelectedCancerType(selected);
-            setListOpenCancerType(false);
-        } else if (dropDownGroup === 'HISTOLOGICAL') {
-            setSelectedHistologicalType(selected);
-            setListOpenHistological(false);
-        }
-    };
-
-    // Filtering on cache
-    useEffect(() => {
-        if (Object.keys(clinicalSearchPatients.data).length !== 0) {
-            const tempRows = [];
-            const response = clinicalSearchPatients.data;
-
-            for (let j = 0; j < response.results.length; j += 1) {
-                for (let i = 0; i < response.results[j].count; i += 1) {
-                    // Patient table filtering
-                    if (
-                        selectedConditions === 'All' &&
-                        selectedMedications === 'All' &&
-                        selectedSex === 'All' &&
-                        selectedCancerType === 'All' &&
-                        selectedHistologicalType === 'All'
-                    ) {
-                        // All patients
-                        if (processMCodeMainData(response.results[j].results[i], response.results[j].location[0]).id !== null) {
-                            tempRows.push(processMCodeMainData(response.results[j].results[i], response.results[j].location[0]));
-                        }
-                    } else {
-                        // Filtered patients
-                        let patientCondition = false;
-                        response?.results[j]?.results[i]?.cancer_condition?.body_site?.every((bodySite) => {
-                            if (selectedConditions === 'All' || selectedConditions === bodySite.label) {
-                                patientCondition = true;
-                                return false;
-                            }
-                            return true;
-                        });
-                        let patientMedication = false;
-                        response?.results[j]?.results[i]?.medication_statement.every((medication) => {
-                            if (selectedMedications === 'All' || selectedMedications === medication?.medication_code.label) {
-                                patientMedication = true;
-                                return false;
-                            }
-                            return true;
-                        });
-                        let patientSex = false;
-                        if (selectedSex === 'All' || selectedSex === response?.results[j]?.results[i]?.subject.sex) {
-                            patientSex = true;
-                        }
-                        let patientCancerType = false;
-                        if (selectedCancerType === 'All') {
-                            patientCancerType = true;
-                        } else {
-                            for (let k = 0; k < cancerType.length; k += 1) {
-                                if (
-                                    response?.results[j]?.results[i]?.cancer_condition?.code?.id !== undefined &&
-                                    response?.results[j]?.results[i]?.cancer_condition?.code?.id === cancerType[k]['Cancer type code']
-                                ) {
-                                    if (
-                                        selectedCancerType ===
-                                            `${cancerType[k]['Cancer type label']} ${cancerType[k]['Cancer type code']}` ||
-                                        selectedCancerType === 'NA'
-                                    ) {
-                                        patientCancerType = true;
-                                    }
-                                }
-                            }
-                        }
-                        let patientHistologicalType = false;
-                        if (selectedHistologicalType === 'All') {
-                            patientHistologicalType = true;
-                        } else {
-                            for (let k = 0; k < cancerType.length; k += 1) {
-                                if (
-                                    response?.results[j]?.results[i]?.cancer_condition?.histology_morphology_behavior?.id !== undefined &&
-                                    response?.results[j]?.results[i]?.cancer_condition?.histology_morphology_behavior?.id ===
-                                        cancerType[k]['Tumour histological type code']
-                                ) {
-                                    if (
-                                        selectedHistologicalType ===
-                                            `${cancerType[k]['Tumour histological type label']} ${cancerType[k]['Tumour histological type code']}` ||
-                                        selectedHistologicalType === 'NA'
-                                    ) {
-                                        patientHistologicalType = true;
-                                    }
-                                }
-                            }
-                        }
-                        if (
-                            patientCondition &&
-                            patientMedication &&
-                            patientSex &&
-                            patientCancerType &&
-                            patientHistologicalType &&
-                            processMCodeMainData(response.results[j].results[i]).id !== null
-                        ) {
-                            tempRows.push(processMCodeMainData(response.results[j].results[i], response.results[j].location[0]));
-                        }
-                    }
-                }
-            }
-            const tempClinicalSearchResults = [];
-            tempRows.forEach((patient) => {
-                tempClinicalSearchResults.push({ id: patient.id, genomicId: patient.genomic_id });
-            });
-
-            setPatientList(tempClinicalSearchResults);
-            // Dropdown patient table list for filtering
-            setMedicationList(processMedicationListData(response.results));
-            setConditionList(processCondtionsListData(response.results));
-            setSexList(processSexListData(response.results));
-            setCancerTypeList(processCancerTypeListData(response.results));
-            setHistologicalList(processHistologicalTypeListData(response.results));
-            setLoading(false);
-
-            setRedux(tempRows);
-        }
-    }, [selectedSex, selectedConditions, selectedMedications, selectedCancerType, selectedHistologicalType]);
-
-    useEffect(() => {
-        setLoading(true);
-        setDisplayVariantsTable(false);
-        // get patient data from redux store or fetch it
-        if (Object.keys(clinicalSearch.selectedClinicalSearchResults).length !== 0) {
-            setPatientList(clinicalSearch.selectedClinicalSearchResults);
-        }
-        trackPromise(
-            fetchFederationClinicalData('/api/mcodepackets').then((response) => {
-                const patientData = [];
-                setClincalSearchPatients(response);
-                response.results.forEach((result) => {
-                    result.results.forEach((patient) => {
-                        patientData.push({
-                            id: patient.id,
-                            genomicId: patient.genomics_report?.extra_properties?.genomic_id ?? 'NA'
-                        });
-                    });
-                });
-
-                const tempRows = [];
-                for (let j = 0; j < response.results.length; j += 1) {
-                    for (let i = 0; i < response.results[j].count; i += 1) {
-                        // Patient table filtering
-                        if (
-                            selectedConditions === 'All' &&
-                            selectedMedications === 'All' &&
-                            selectedSex === 'All' &&
-                            selectedCancerType === 'All' &&
-                            selectedHistologicalType === 'All'
-                        ) {
-                            // All patients
-                            if (processMCodeMainData(response.results[j].results[i], response.results[j].location[0]).id !== null) {
-                                tempRows.push(processMCodeMainData(response.results[j].results[i], response.results[j].location[0]));
-                            }
-                        } else {
-                            // Filtered patients
-                            let patientCondition = false;
-                            response?.results[j]?.results[i]?.cancer_condition?.body_site?.every((bodySite) => {
-                                if (selectedConditions === 'All' || selectedConditions === bodySite.label) {
-                                    patientCondition = true;
-                                    return false;
-                                }
-                                return true;
-                            });
-                            let patientMedication = false;
-                            response?.results[j]?.results[i]?.medication_statement.every((medication) => {
-                                if (selectedMedications === 'All' || selectedMedications === medication?.medication_code.label) {
-                                    patientMedication = true;
-                                    return false;
-                                }
-                                return true;
-                            });
-                            let patientSex = false;
-                            if (selectedSex === 'All' || selectedSex === response?.results[j]?.results[i]?.subject.sex) {
-                                patientSex = true;
-                            }
-                            let patientCancerType = false;
-                            if (selectedCancerType === 'All') {
-                                patientCancerType = true;
-                            } else {
-                                for (let k = 0; k < cancerType.length; k += 1) {
-                                    if (
-                                        response?.results[j]?.results[i]?.cancer_condition?.code?.id !== undefined &&
-                                        response?.results[j]?.results[i]?.cancer_condition?.code?.id === cancerType[k]['Cancer type code']
-                                    ) {
-                                        if (
-                                            selectedCancerType ===
-                                                `${cancerType[k]['Cancer type label']} ${cancerType[k]['Cancer type code']}` ||
-                                            selectedCancerType === 'NA'
-                                        ) {
-                                            patientCancerType = true;
-                                        }
-                                    }
-                                }
-                            }
-                            let patientHistologicalType = false;
-                            if (selectedHistologicalType === 'All') {
-                                patientHistologicalType = true;
-                            } else {
-                                for (let k = 0; k < cancerType.length; k += 1) {
-                                    if (
-                                        response?.results[j]?.results[i]?.cancer_condition?.histology_morphology_behavior?.id !==
-                                            undefined &&
-                                        response?.results[j]?.results[i]?.cancer_condition?.histology_morphology_behavior?.id ===
-                                            cancerType[k]['Tumour histological type code']
-                                    ) {
-                                        if (
-                                            selectedHistologicalType ===
-                                                `${cancerType[k]['Tumour histological type label']} ${cancerType[k]['Tumour histological type code']}` ||
-                                            selectedHistologicalType === 'NA'
-                                        ) {
-                                            patientHistologicalType = true;
-                                        }
-                                    }
-                                }
-                            }
-                            if (
-                                patientCondition &&
-                                patientMedication &&
-                                patientSex &&
-                                patientCancerType &&
-                                patientHistologicalType &&
-                                processMCodeMainData(response.results[j].results[i]).id !== null
-                            ) {
-                                tempRows.push(processMCodeMainData(response.results[j].results[i], response.results[j].location[0]));
-                            }
-                        }
-                    }
-                }
-                const tempClinicalSearchResults = [];
-                tempRows.forEach((patient) => {
-                    tempClinicalSearchResults.push({ id: patient.id, genomicId: patient.genomic_id });
-                });
-
-                setPatientList(tempClinicalSearchResults ?? patientData);
-                // Dropdown patient table list for filtering
-                setMedicationList(processMedicationListData(response.results));
-                setConditionList(processCondtionsListData(response.results));
-                setSexList(processSexListData(response.results));
-                setCancerTypeList(processCancerTypeListData(response.results));
-                setHistologicalList(processHistologicalTypeListData(response.results));
-                setLoading(false);
-
-                setRedux(tempRows);
-            }),
-            'patientBox'
-        );
-    }, []);
-
-    /**
-     * This function handles the Search button
-     * It calls the searchVariant function from api.js according to the chromosome and position
-     * then compares the result with the patientList genomicID to find the matching patient
-     */
-    const formHandler = (e) => {
-        e.preventDefault(); // Prevent form submission
-        setDisplayVariantsTable(false);
-        const referenceName = e.target.genome.value;
-        const chromosome = e.target.chromosome.value;
-        const start = e.target.start.value;
-        const end = e.target.end.value;
-        setVariantSearchOptions({ referenceName, chromosome, start, end });
-        trackPromise(
-            searchVariant(chromosome, start, end)
-                .then((response) => {
-                    const locationObjs = response.results;
-                    if (Object.keys(locationObjs).length === 0) {
-                        setAlertMessage('No variants found');
-                        setAlertSeverity('warning');
-                        setOpen(true);
-                    } else {
-                        const variantList = [];
-                        locationObjs.forEach((location) => {
-                            location.results.forEach((item) =>
-                                variantList.push({
-                                    id: item.id,
-                                    genomicId: item.genomic_id,
-                                    locationName: location.location[0],
-                                    referenceName: item.reference_genome,
-                                    variantCount: item.variantcount,
-                                    samples: item.samples,
-                                    url: item.urls[0] // only one url unless the requirement changes
-                                })
-                            );
-                        });
-                        // Build display table
-                        const displayData = [];
-                        for (let i = 0; i < variantList.length; i += 1) {
-                            for (let j = 0; j < patientList.length; j += 1) {
-                                if (variantList[i].genomicId === patientList[j].genomicId) {
-                                    displayData.push({
-                                        patientId: patientList[j].id,
-                                        locationName: variantList[i].locationName,
-                                        genomicSampleId: variantList[i].genomicId,
-                                        variantCount: variantList[i].variantCount,
-                                        samples: variantList[i].samples,
-                                        VCFFile: variantList[i].id
-                                    });
-                                    // get the url part before the file name for IGV
-                                    const url = variantList[i].url;
-                                    const urlParts = url.substring(0, url.lastIndexOf('/') + 1);
-                                    setIGVBaseUrl(urlParts);
-                                    break; // should have only 1 match, so we can break here
-                                }
-                            }
-                        }
-                        setRowData(displayData);
-                        setDisplayVariantsTable(true);
-                    }
-                })
-                .catch((error) => {
-                    setAlertMessage(error.message);
-                    setAlertSeverity('error');
-                    setOpen(true);
-                }),
-            'table'
-        );
-    };
-
-    const toggleIGVWindow = () => {
-        setIsIGVWindowOpen(!isIGVWindowOpen);
-    };
-
-    /**
-     * This function keeps track of the selected row in the table
-     * then it creates the IGV options to send to the IGV window
-     */
-    const onCheckboxSelectionChanged = (value) => {
-        if (value.length === 0) {
-            setShowIGVButton(false);
-        } else {
-            setShowIGVButton(true);
-        }
-        const trackList = [];
-        for (let i = 0; i < value.length; i += 1) {
-            trackList.push({
-                name: value[i]['Patient ID'],
-                type: 'variant',
-                format: 'vcf',
-                sourceType: 'htsget',
-                url: `${IGVBaseUrl}${value[i]['VCF File']}`
-            });
-        }
-        const options = {
-            genome: 'hg38',
-            locus: `${variantSearchOptions.chromosome}:${variantSearchOptions.start}-${variantSearchOptions.end}`,
-            tracks: trackList
-        };
-        setIGVOptions(options);
-    };
-
-    return (
-        <>
-            <AlertComponent
-                open={open}
-                setOpen={setOpen}
-                text={alertMessage}
-                severity={alertSeverity}
-                variant="filled"
-                fontColor={alertSeverity === 'error' ? 'white' : 'black'}
-            />
-            {!isLoading ? (
-                <Grid container direction="row">
-                    <Stack direction="row" divider={<Divider orientation="vertical" flexItem />} spacing={2}>
-                        <Box mr={2} ml={1} p={1} pr={5} sx={{ border: 1, borderRadius: 2 }}>
-                            <span style={{ color: theme.palette.primary.main }}>
-                                <b>Total Patients</b>
-                            </span>
-                            <br />
-                            <span>{patientList.length}</span>
-                        </Box>
-                        <form onSubmit={formHandler} style={{ justifyContent: 'center' }}>
-                            <Stack direction="row" divider={<Divider orientation="vertical" flexItem />} spacing={2}>
-                                <Box mr={2} ml={1} p={1} pr={5}>
-                                    <FormControl fullWidth variant="standard">
-                                        <InputLabel id="ref-gene-label">Reference Genome</InputLabel>
-                                        <NativeSelect required id="genome">
-                                            <option value="gh38">gh38</option>
-                                            <option value="gh37">gh37</option>
-                                        </NativeSelect>
-                                    </FormControl>
-                                </Box>
-                                <Box mr={2} ml={1} p={1} pr={5}>
-                                    <FormControl fullWidth variant="standard">
-                                        <InputLabel id="chr-label">Chromosome</InputLabel>
-                                        <NativeSelect required id="chromosome">
-                                            {chrSelectBuilder()}
-                                        </NativeSelect>
-                                    </FormControl>
-                                </Box>
-                                <Box mr={2} ml={1} p={1} pr={5}>
-                                    <FormControl variant="standard">
-                                        <InputLabel>Start</InputLabel>
-                                        <Input required type="number" id="start" />
-                                    </FormControl>
-                                </Box>
-                                <Box mr={2} ml={1} p={1} pr={5}>
-                                    <FormControl variant="standard">
-                                        <InputLabel>End</InputLabel>
-                                        <Input required type="number" id="end" />
-                                    </FormControl>
-                                </Box>
-                                <Box mr={2} ml={1} p={1} pr={5}>
-                                    <FormControl variant="standard">
-                                        <Button
-                                            type="submit"
-                                            variant="contained"
-                                            sx={{ borderRadius: events.customization.borderRadius * 0.15 }}
-                                        >
-                                            Search
-                                        </Button>
-                                    </FormControl>
-                                </Box>
-                            </Stack>
-                        </form>
-                    </Stack>
-                </Grid>
-            ) : (
-                <SearchIndicator area="patientBox" />
-            )}
-
-            {displayVariantsTable ? (
-                <VariantsTable rowData={rowData} onChange={onCheckboxSelectionChanged} />
-            ) : (
-                <SearchIndicator area="table" />
-            )}
-
-            {isIGVWindowOpen && <IGViewer closeWindow={toggleIGVWindow} options={IGVOptions} />}
-        </>
-    );
-}
-/* eslint-enable no-unused-vars */
-/* eslint-enable react-hooks/exhaustive-deps */
-
-export default VariantsSearch;

From 7ec3814fe54ec483c4e4b56c8d89171ef449c5d0 Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Tue, 19 Sep 2023 13:09:47 -0400
Subject: [PATCH 16/51] Remove extra code

---
 src/views/clinical/mcode.js | 642 ------------------------------------
 1 file changed, 642 deletions(-)
 delete mode 100644 src/views/clinical/mcode.js

diff --git a/src/views/clinical/mcode.js b/src/views/clinical/mcode.js
deleted file mode 100644
index b4b74d64..00000000
--- a/src/views/clinical/mcode.js
+++ /dev/null
@@ -1,642 +0,0 @@
-import * as React from 'react';
-
-// npm installs
-import ReactJson from 'react-json-view';
-import cancerTypeCSV from '../../assets/data_files/cancer_histological_codes_labels.csv';
-import papa from 'papaparse';
-
-// mui
-import { useTheme, makeStyles } from '@mui/styles';
-import { DataGrid, GridToolbar } from '@mui/x-data-grid';
-import { Grid, Box } from '@mui/material';
-
-// REDUX
-import { useSelector, useDispatch } from 'react-redux';
-
-// project imports
-import MainCard from 'ui-component/cards/MainCard';
-import { fetchFederationClinicalData } from 'store/api';
-import {
-    subjectColumns,
-    processMCodeMainData,
-    processMedicationListData,
-    processCondtionsListData,
-    processSexListData,
-    processCancerTypeListData,
-    processHistologicalTypeListData
-} from 'store/mcode';
-import SingleRowTable from 'ui-component/SingleRowTable';
-import { trackPromise } from 'react-promise-tracker';
-import Stack from '@mui/material/Stack';
-import Divider from '@mui/material/Divider';
-import TableContainer from '@mui/material/TableContainer';
-import Table from '@mui/material/Table';
-import DropDown from '../../ui-component/DropDown';
-import { SearchIndicator } from 'ui-component/LoadingIndicator/SearchIndicator';
-
-// Styles
-const useStyles = makeStyles({
-    dropdownItem: {
-        background: 'white',
-        paddingRight: '1.25em',
-        paddingLeft: '1.25em',
-        border: 'none',
-        width: 'fit-content(5em)',
-        '&:hover': {
-            background: '#2196f3',
-            color: 'white'
-        }
-    },
-    mobileRow: {
-        width: '800px'
-    },
-    scrollbar: {
-        scrollbarWidth: 'thin',
-        '&::-webkit-scrollbar': {
-            height: '0.4em',
-            width: '0.4em'
-        },
-        '&::-webkit-scrollbar-track': {
-            boxShadow: 'inset 0 0 4px rgba(0,0,0,0.00)',
-            webkitBoxShadow: 'inset 0 0 4px rgba(0,0,0,0.00)'
-        },
-        '&::-webkit-scrollbar-thumb': {
-            backgroundColor: 'rgba(0,0,0,.1)'
-        }
-    }
-});
-
-// NB: This function isn't really used anywhere and it's messing with the linter
-/* eslint-disable react-hooks/exhaustive-deps */
-function MCodeView() {
-    const theme = useTheme();
-    const classes = useStyles();
-    const events = useSelector((state) => state);
-    const dispatch = useDispatch();
-    const clinicalSearch = useSelector((state) => state.customization.clinicalSearch);
-    const clinicalSearchPatients = useSelector((state) => state.customization.clinicalSearchResultPatients);
-
-    const [isLoading, setIsLoading] = React.useState(true);
-    const [mcodeData, setMcodeData] = React.useState([]);
-    const [rows, setRows] = React.useState([]);
-    const [selectedPatient, setSelectedPatient] = React.useState('');
-    const [selectedPatientMobileInfo, setSelectedPatientMobileInfo] = React.useState({});
-    const [cancerType, setCancerType] = React.useState([]);
-
-    // Mobile
-    const [desktopResolution, setdesktopResolution] = React.useState(window.innerWidth > 1200);
-    const [isListOpen, setListOpen] = React.useState(false);
-
-    // Dropdown patient table open/closed
-    const [isListOpenMedications, setListOpenMedications] = React.useState(false);
-    const [isListOpenConditions, setListOpenConditions] = React.useState(false);
-    const [isListOpenSex, setListOpenSex] = React.useState(false);
-    const [isListOpenCancerType, setListOpenCancerType] = React.useState(false);
-    const [isListOpenHistological, setListOpenHistological] = React.useState(false);
-
-    // Dropdown patient table filtering current selection in dropdown
-    const [selectedMedications, setSelectedMedications] = React.useState(clinicalSearch.clinicalSearchDropDowns.selectedMedications);
-    const [selectedConditions, setSelectedConditions] = React.useState(clinicalSearch.clinicalSearchDropDowns.selectedConditions);
-    const [selectedSex, setSelectedSex] = React.useState(clinicalSearch.clinicalSearchDropDowns.selectedSex);
-    const [selectedCancerType, setSelectedCancerType] = React.useState(clinicalSearch.clinicalSearchDropDowns.selectedCancerType);
-    const [selectedHistologicalType, setSelectedHistologicalType] = React.useState(
-        clinicalSearch.clinicalSearchDropDowns.selectedHistologicalType
-    );
-    const [patientJSON, setPatientJSON] = React.useState([]);
-
-    // Dropdown patient table list for filtering
-    const [medicationList, setMedicationList] = React.useState(clinicalSearch.clinicalSearchDropDowns.medicationList);
-    const [conditionList, setConditionList] = React.useState(clinicalSearch.clinicalSearchDropDowns.conditionList);
-    const [sexList, setSexList] = React.useState(clinicalSearch.clinicalSearchDropDowns.sexList);
-    const [cancerTypeList, setCancerTypeList] = React.useState(clinicalSearch.clinicalSearchDropDowns.cancerTypeList);
-    const [HistologicalList, setHistologicalList] = React.useState(clinicalSearch.clinicalSearchDropDowns.HistologicalList);
-
-    const jsonTheme = {
-        base00: 'white',
-        base01: '#ddd',
-        base02: '#ddd',
-        base03: 'black',
-        base04: '#0E3E17',
-        base05: 'black',
-        base06: 'black',
-        base07: '#252525',
-        base08: '#252525',
-        base09: '#00418A',
-        base0A: '#00418A',
-        base0B: '#00418A',
-        base0C: '#00418A',
-        base0D: '#00418A',
-        base0E: '#00418A',
-        base0F: '#00418A'
-    };
-
-    function setClincalSearchPatients(data) {
-        dispatch({
-            type: 'SET_CLINICAL_SEARCH_PATIENTS',
-            payload: {
-                data
-            }
-        });
-    }
-
-    function setRedux(rows) {
-        const tempClinicalSearchResults = [];
-        rows.forEach((patient) => {
-            tempClinicalSearchResults.push({ id: patient.id, genomicId: patient.genomic_id });
-        });
-        dispatch({
-            type: 'SET_SELECTED_CLINICAL_SEARCH_RESULTS',
-            payload: {
-                selectedClinicalSearchResults: tempClinicalSearchResults,
-                clinicalSearchDropDowns: {
-                    medicationList,
-                    selectedMedications,
-                    conditionList,
-                    selectedConditions,
-                    sexList,
-                    selectedSex,
-                    cancerTypeList,
-                    selectedCancerType,
-                    HistologicalList,
-                    selectedHistologicalType
-                }
-            }
-        });
-    }
-    // Parsing CancerType CSV into Dictionary
-    React.useEffect(
-        () =>
-            papa.parse(cancerTypeCSV, {
-                header: true,
-                download: true,
-                skipEmptyLines: true,
-                // eslint-disable-next-line
-                complete: function (results) {
-                    setCancerType(results.data);
-                }
-            }),
-        []
-    );
-    // Subtable selection of patient
-    const handleRowClick = (row) => {
-        let index;
-        mcodeData.results.forEach((federatedResults) => {
-            index = federatedResults.results.findIndex((item) => item.id === row.id);
-            if (index !== -1) {
-                setSelectedPatient(federatedResults.results[index].id);
-                setSelectedPatientMobileInfo({
-                    Ethnicity: federatedResults?.results[index]?.subject?.ethnicity
-                        ? federatedResults?.results[index]?.subject?.ethnicity
-                        : 'NA',
-                    Sex: (federatedResults?.results[index]?.subject?.sex).toLowerCase()
-                        ? (federatedResults?.results[index]?.subject?.sex).toLowerCase()
-                        : 'NA',
-                    Deceased: federatedResults?.results[index]?.subject?.deceased
-                        ? federatedResults?.results[index]?.subject?.deceased
-                        : 'NA',
-                    Birthday: federatedResults?.results[index]?.subject?.date_of_birth
-                        ? federatedResults?.results[index]?.subject?.date_of_birth
-                        : 'NA',
-                    DeathDate: federatedResults?.results[index]?.date_of_death ? federatedResults?.results[index]?.date_of_death : 'NA'
-                });
-
-                // Set patient JSON
-                setPatientJSON(federatedResults?.results[index], selectedPatient);
-            }
-        });
-
-        setListOpen(false);
-    };
-
-    const dropDownSelection = (dropDownGroup, selected) => {
-        if (dropDownGroup === 'CONDITIONS') {
-            setSelectedConditions(selected);
-            setListOpenConditions(false);
-        } else if (dropDownGroup === 'MEDICATIONS') {
-            setSelectedMedications(selected);
-            setListOpenMedications(false);
-        } else if (dropDownGroup === 'SEX') {
-            setSelectedSex(selected);
-            setListOpenSex(false);
-        } else if (dropDownGroup === 'CANCER TYPE') {
-            setSelectedCancerType(selected);
-            setListOpenCancerType(false);
-        } else if (dropDownGroup === 'HISTOLOGICAL') {
-            setSelectedHistologicalType(selected);
-            setListOpenHistological(false);
-        }
-    };
-
-    // Filtering Data
-    React.useEffect(() => {
-        if (Object.keys(clinicalSearchPatients.data).length !== 0) {
-            const tempRows = [];
-            const data = clinicalSearchPatients.data;
-            for (let j = 0; j < data.results.length; j += 1) {
-                for (let i = 0; i < data.results[j].count; i += 1) {
-                    // Patient table filtering
-                    if (
-                        selectedConditions === 'All' &&
-                        selectedMedications === 'All' &&
-                        selectedSex === 'All' &&
-                        selectedCancerType === 'All' &&
-                        selectedHistologicalType === 'All'
-                    ) {
-                        // All patients
-                        if (processMCodeMainData(data.results[j].results[i], data.results[j].location[0]).id !== null) {
-                            tempRows.push(processMCodeMainData(data.results[j].results[i], data.results[j].location[0]));
-                        }
-                    } else {
-                        // Filtered patients
-                        let patientCondition = false;
-                        data?.results[j]?.results[i]?.cancer_condition?.body_site?.every((bodySite) => {
-                            if (selectedConditions === 'All' || selectedConditions === bodySite.label) {
-                                patientCondition = true;
-                                return false;
-                            }
-                            return true;
-                        });
-                        let patientMedication = false;
-                        data?.results[j]?.results[i]?.medication_statement.every((medication) => {
-                            if (selectedMedications === 'All' || selectedMedications === medication?.medication_code.label) {
-                                patientMedication = true;
-                                return false;
-                            }
-                            return true;
-                        });
-                        let patientSex = false;
-                        if (selectedSex === 'All' || selectedSex === (data?.results[j]?.results[i]?.subject.sex).toLowerCase()) {
-                            patientSex = true;
-                        }
-                        let patientCancerType = false;
-                        if (selectedCancerType === 'All') {
-                            patientCancerType = true;
-                        } else {
-                            for (let k = 0; k < cancerType.length; k += 1) {
-                                if (
-                                    data?.results[j]?.results[i]?.cancer_condition?.code?.id !== undefined &&
-                                    data?.results[j]?.results[i]?.cancer_condition?.code?.id === cancerType[k]['Cancer type code']
-                                ) {
-                                    if (
-                                        selectedCancerType ===
-                                            `${cancerType[k]['Cancer type label']} ${cancerType[k]['Cancer type code']}` ||
-                                        selectedCancerType === 'NA'
-                                    ) {
-                                        patientCancerType = true;
-                                    }
-                                }
-                            }
-                        }
-                        let patientHistologicalType = false;
-                        if (selectedHistologicalType === 'All') {
-                            patientHistologicalType = true;
-                        } else {
-                            for (let k = 0; k < cancerType.length; k += 1) {
-                                if (
-                                    data?.results[j]?.results[i]?.cancer_condition?.histology_morphology_behavior?.id !== undefined &&
-                                    data?.results[j]?.results[i]?.cancer_condition?.histology_morphology_behavior?.id ===
-                                        cancerType[k]['Tumour histological type code']
-                                ) {
-                                    if (
-                                        selectedHistologicalType ===
-                                            `${cancerType[k]['Tumour histological type label']} ${cancerType[k]['Tumour histological type code']}` ||
-                                        selectedHistologicalType === 'NA'
-                                    ) {
-                                        patientHistologicalType = true;
-                                    }
-                                }
-                            }
-                        }
-                        if (
-                            patientCondition &&
-                            patientMedication &&
-                            patientSex &&
-                            patientCancerType &&
-                            patientHistologicalType &&
-                            processMCodeMainData(data.results[j].results[i]).id !== null
-                        ) {
-                            tempRows.push(processMCodeMainData(data.results[j].results[i], data.results[j].location[0]));
-                        }
-                    }
-                }
-            }
-            setRows(tempRows);
-            // Subtables
-            if (tempRows.length !== 0) {
-                let index;
-                data.results.forEach((federatedResults) => {
-                    index = federatedResults.results.findIndex((item) => item.id === tempRows[0].id);
-                    if (index !== -1) {
-                        setSelectedPatient(federatedResults.results[index].id);
-                        setPatientJSON(federatedResults.results[index], selectedPatient);
-                        if (tempRows[0].id !== null) {
-                            setSelectedPatientMobileInfo({
-                                Ethnicity: tempRows[0]?.ethnicity ? tempRows[0]?.ethnicity : 'NA',
-                                Sex: tempRows[0]?.sex ? tempRows[0]?.sex : 'NA',
-                                Deceased: tempRows[0]?.deceased ? tempRows[0]?.deceased : 'NA',
-                                Birthday: tempRows[0]?.date_of_birth ? tempRows[0]?.date_of_birth : 'NA',
-                                DeathDate: tempRows[0]?.date_of_death ? tempRows[0]?.date_of_death : 'NA'
-                            });
-                        }
-                    }
-                });
-            } else {
-                setSelectedPatient('None');
-                setPatientJSON({});
-            }
-
-            setListOpen(false);
-            // Dropdown patient table list for filtering
-            setMedicationList(processMedicationListData(data.results));
-            setConditionList(processCondtionsListData(data.results));
-            setSexList(processSexListData(data.results));
-            setCancerTypeList(processCancerTypeListData(data.results));
-            setHistologicalList(processHistologicalTypeListData(data.results));
-            setIsLoading(false);
-
-            setRedux(tempRows);
-        }
-    }, [selectedSex, selectedConditions, selectedMedications, selectedCancerType, selectedHistologicalType]);
-
-    // Tracks Screensize
-    React.useEffect(() => {
-        window.addEventListener('resize', () => setdesktopResolution(window.innerWidth > 1200));
-    }, [desktopResolution, setdesktopResolution]);
-
-    React.useEffect(() => {
-        setIsLoading(true);
-        const tempRows = [];
-        trackPromise(
-            fetchFederationClinicalData().then((data) => {
-                setMcodeData(data);
-                setClincalSearchPatients(data);
-                for (let j = 0; j < data.results.length; j += 1) {
-                    for (let i = 0; i < data.results[j].count; i += 1) {
-                        // Patient table filtering
-                        if (
-                            selectedConditions === 'All' &&
-                            selectedMedications === 'All' &&
-                            selectedSex === 'All' &&
-                            selectedCancerType === 'All' &&
-                            selectedHistologicalType === 'All'
-                        ) {
-                            // All patients
-                            if (processMCodeMainData(data.results[j].results[i], data.results[j].location[0]).id !== null) {
-                                tempRows.push(processMCodeMainData(data.results[j].results[i], data.results[j].location[0]));
-                            }
-                        } else {
-                            // Filtered patients
-                            let patientCondition = false;
-                            data?.results[j]?.results[i]?.cancer_condition?.body_site?.every((bodySite) => {
-                                if (selectedConditions === 'All' || selectedConditions === bodySite.label) {
-                                    patientCondition = true;
-                                    return false;
-                                }
-                                return true;
-                            });
-                            let patientMedication = false;
-                            data?.results[j]?.results[i]?.medication_statement.every((medication) => {
-                                if (selectedMedications === 'All' || selectedMedications === medication?.medication_code.label) {
-                                    patientMedication = true;
-                                    return false;
-                                }
-                                return true;
-                            });
-                            let patientSex = false;
-                            if (selectedSex === 'All' || selectedSex === (data?.results[j]?.results[i]?.subject.sex).toLowerCase()) {
-                                patientSex = true;
-                            }
-                            let patientCancerType = false;
-                            if (selectedCancerType === 'All') {
-                                patientCancerType = true;
-                            } else {
-                                for (let k = 0; k < cancerType.length; k += 1) {
-                                    if (
-                                        data?.results[j]?.results[i]?.cancer_condition?.code?.id !== undefined &&
-                                        data?.results[j]?.results[i]?.cancer_condition?.code?.id === cancerType[k]['Cancer type code']
-                                    ) {
-                                        if (
-                                            selectedCancerType ===
-                                                `${cancerType[k]['Cancer type label']} ${cancerType[k]['Cancer type code']}` ||
-                                            selectedCancerType === 'NA'
-                                        ) {
-                                            patientCancerType = true;
-                                        }
-                                    }
-                                }
-                            }
-                            let patientHistologicalType = false;
-                            if (selectedHistologicalType === 'All') {
-                                patientHistologicalType = true;
-                            } else {
-                                for (let k = 0; k < cancerType.length; k += 1) {
-                                    if (
-                                        data?.results[j]?.results[i]?.cancer_condition?.histology_morphology_behavior?.id !== undefined &&
-                                        data?.results[j]?.results[i]?.cancer_condition?.histology_morphology_behavior?.id ===
-                                            cancerType[k]['Tumour histological type code']
-                                    ) {
-                                        if (
-                                            selectedHistologicalType ===
-                                                `${cancerType[k]['Tumour histological type label']} ${cancerType[k]['Tumour histological type code']}` ||
-                                            selectedHistologicalType === 'NA'
-                                        ) {
-                                            patientHistologicalType = true;
-                                        }
-                                    }
-                                }
-                            }
-                            if (
-                                patientCondition &&
-                                patientMedication &&
-                                patientSex &&
-                                patientCancerType &&
-                                patientHistologicalType &&
-                                processMCodeMainData(data.results[j].results[i]).id !== null
-                            ) {
-                                tempRows.push(processMCodeMainData(data.results[j].results[i], data.results[j].location[0]));
-                            }
-                        }
-                    }
-                }
-                setRows(tempRows);
-                // Subtables
-                if (tempRows.length !== 0) {
-                    let index;
-                    data.results.forEach((federatedResults) => {
-                        index = federatedResults.results.findIndex((item) => item.id === tempRows[0].id);
-                        if (index !== -1) {
-                            setSelectedPatient(federatedResults.results[index].id);
-                            setPatientJSON(federatedResults.results[index], selectedPatient);
-                            if (tempRows[0].id !== null) {
-                                setSelectedPatientMobileInfo({
-                                    Ethnicity: tempRows[0]?.ethnicity ? tempRows[0]?.ethnicity : 'NA',
-                                    Sex: tempRows[0]?.sex ? tempRows[0]?.sex : 'NA',
-                                    Deceased: tempRows[0]?.deceased ? tempRows[0]?.deceased : 'NA',
-                                    Birthday: tempRows[0]?.date_of_birth ? tempRows[0]?.date_of_birth : 'NA',
-                                    DeathDate: tempRows[0]?.date_of_death ? tempRows[0]?.date_of_death : 'NA'
-                                });
-                            }
-                        }
-                    });
-                } else {
-                    setSelectedPatient('None');
-                    setPatientJSON({});
-                }
-
-                setListOpen(false);
-                // Dropdown patient table list for filtering
-                setMedicationList(processMedicationListData(data.results));
-                setConditionList(processCondtionsListData(data.results));
-                setSexList(processSexListData(data.results));
-                setCancerTypeList(processCancerTypeListData(data.results));
-                setHistologicalList(processHistologicalTypeListData(data.results));
-                setIsLoading(false);
-
-                setRedux(tempRows);
-            }),
-            'table'
-        );
-    }, []);
-
-    // JSON on bottom now const screenWidth = desktopResolution ? '48%' : '100%';
-    const headerLabels = {
-        Ethnicity: 'Ethnicity',
-        Sex: 'Sex',
-        Deceased: 'Deceased',
-        Birthday: 'Date of Birth',
-        DeathDate: 'Date of Death'
-    };
-    const headerWidths = {
-        Ethnicity: '85px',
-        Sex: '85px',
-        Deceased: '85px',
-        Birthday: '100px',
-        DeathDate: '110px'
-    };
-
-    return (
-        <MainCard title="mCode Data" sx={{ borderRadius: events.customization.borderRadius * 0.25 }}>
-            <Grid container direction="row">
-                {selectedPatient && desktopResolution && (
-                    <TableContainer className={[classes.mobileRow, classes.scrollbar]}>
-                        <Table>
-                            <Stack direction="row" divider={<Divider orientation="vertical" flexItem />}>
-                                <DropDown
-                                    setListOpen={setListOpenSex}
-                                    isListOpen={isListOpenSex}
-                                    dropDownLabel="Sex"
-                                    currentSelection={selectedSex}
-                                    dropDownItems={sexList}
-                                    selectOption={dropDownSelection}
-                                    dropDownGroup="SEX"
-                                />
-                                <DropDown
-                                    setListOpen={setListOpenCancerType}
-                                    isListOpen={isListOpenCancerType}
-                                    dropDownLabel="Cancer Type"
-                                    currentSelection={selectedCancerType}
-                                    dropDownItems={cancerTypeList}
-                                    selectOption={dropDownSelection}
-                                    dropDownGroup="CANCER TYPE"
-                                />
-                                <DropDown
-                                    setListOpen={setListOpenConditions}
-                                    isListOpen={isListOpenConditions}
-                                    dropDownLabel="Body Site"
-                                    currentSelection={selectedConditions}
-                                    dropDownItems={conditionList}
-                                    selectOption={dropDownSelection}
-                                    dropDownGroup="CONDITIONS"
-                                />
-                                <DropDown
-                                    setListOpen={setListOpenMedications}
-                                    isListOpen={isListOpenMedications}
-                                    dropDownLabel="Medications"
-                                    currentSelection={selectedMedications}
-                                    dropDownItems={medicationList}
-                                    selectOption={dropDownSelection}
-                                    dropDownGroup="MEDICATIONS"
-                                />
-                                <DropDown
-                                    setListOpen={setListOpenHistological}
-                                    isListOpen={isListOpenHistological}
-                                    dropDownLabel="Histological Type"
-                                    currentSelection={selectedHistologicalType}
-                                    dropDownItems={HistologicalList}
-                                    selectOption={dropDownSelection}
-                                    dropDownGroup="HISTOLOGICAL"
-                                />
-                            </Stack>
-                        </Table>
-                    </TableContainer>
-                )}
-                {!desktopResolution && selectedPatient && (
-                    <SingleRowTable
-                        dropDownLabel="Patient Id"
-                        dropDownSelection={selectedPatient}
-                        headerLabels={headerLabels}
-                        headerWidths={headerWidths}
-                        stackCells={selectedPatientMobileInfo}
-                        handleRowClick={handleRowClick}
-                        isListOpen={isListOpen}
-                        setListOpen={setListOpen}
-                        rows={rows}
-                        dropDownGroup="PATIENT"
-                    />
-                )}
-
-                {!isLoading ? (
-                    <Grid container direction="column" pt={6} justifyContent="center" alignItems="center">
-                        {desktopResolution && (
-                            <Grid item mr={2} sx={{ height: 600, width: '100%' }}>
-                                <DataGrid
-                                    rows={rows}
-                                    columns={subjectColumns}
-                                    pageSize={7}
-                                    rowsPerPageOptions={[7]}
-                                    components={{ Toolbar: GridToolbar }}
-                                    onRowClick={(rowData) => handleRowClick(rowData.row)}
-                                    className={classes.scrollbar}
-                                    disableSelectionOnClick
-                                />
-                            </Grid>
-                        )}
-                        <Grid item sx={{ width: '100%', position: 'relative' }}>
-                            <Box
-                                mr={2}
-                                ml={1}
-                                p={1}
-                                pr={5}
-                                sx={{ width: '125px', border: 1, borderRadius: 2, position: 'absolute', zIndex: 100, right: 15, top: 30 }}
-                            >
-                                <span style={{ color: theme.palette.primary.main }}>
-                                    <b>Patient Id</b>
-                                </span>
-                                <br />
-                                <span>{selectedPatient}</span>
-                            </Box>
-                            <Box
-                                sx={{
-                                    border: 1,
-                                    borderColor: '#D3D3D3',
-                                    height: '800px',
-                                    width: '100% ',
-                                    overflow: 'auto'
-                                }}
-                                p={2}
-                                mt={2}
-                            >
-                                <ReactJson src={patientJSON} theme={jsonTheme} onDelete={false} onAdd={false} onEdit={false} />
-                            </Box>
-                        </Grid>
-                    </Grid>
-                ) : (
-                    <SearchIndicator area="table" />
-                )}
-            </Grid>
-        </MainCard>
-    );
-}
-/* eslint-enable react-hooks/exhaustive-deps */
-
-export default MCodeView;

From 78c118a8568e752ad3228ecfe4c7b123f8c4be35 Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Tue, 19 Sep 2023 14:04:30 -0400
Subject: [PATCH 17/51] Remove unneeded dependency

---
 src/views/clinicalGenomic/clinicalGenomicSearch.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/views/clinicalGenomic/clinicalGenomicSearch.js b/src/views/clinicalGenomic/clinicalGenomicSearch.js
index 37b67827..49334472 100644
--- a/src/views/clinicalGenomic/clinicalGenomicSearch.js
+++ b/src/views/clinicalGenomic/clinicalGenomicSearch.js
@@ -5,7 +5,6 @@ import { AppBar, Button, Toolbar, Typography } from '@mui/material';
 
 import { makeStyles } from '@mui/styles';
 import MainCard from 'ui-component/cards/MainCard';
-import VariantsSearch from '../genomicsData/VariantsSearch';
 import PatientCounts from './widgets/patientCounts';
 import DataVisualization from './widgets/dataVisualization';
 import ClinicalData from './widgets/clinicalData';
@@ -120,11 +119,6 @@ function ClinicalGenomicSearch() {
             <MainCard
                 sx={{ minHeight: 830, position: 'relative', borderRadius: events.customization.borderRadius * 0.25, marginTop: '2.5em' }}
             >
-                <div id="searchbar">
-                    {/* Genomic Searchbar */}
-                    <VariantsSearch />
-                    {/* For now, until I figure out how to make it its own card */}
-                </div>
                 {sections.map((section) => (
                     <div key={section.id}>
                         <a id={section.id} className={classes.anchor} aria-hidden="true">

From 726c928ac29ecc77c591018231a4b6fcbeb31066 Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Wed, 6 Sep 2023 16:50:10 -0400
Subject: [PATCH 18/51] [wip]

---
 package.json                                  |   1 +
 src/store/api.js                              |  28 ++
 .../clinicalGenomic/search/SearchHandler.js   | 320 ++++--------------
 src/views/clinicalGenomic/widgets/sidebar.js  | 113 ++-----
 4 files changed, 131 insertions(+), 331 deletions(-)

diff --git a/package.json b/package.json
index c2a43107..96ed34f4 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
     "name": "candig-data-portal",
     "version": "0.1.0",
     "private": true,
+    "homepage": "/portal",
     "dependencies": {
         "@candig/igv": "^2.10.5-c.1",
         "@emotion/cache": "^11.4.0",
diff --git a/src/store/api.js b/src/store/api.js
index 999634f8..437dffa1 100644
--- a/src/store/api.js
+++ b/src/store/api.js
@@ -194,3 +194,31 @@ export function searchVariantByGene(geneName) {
             return 'error';
         });
 }
+
+export function query(parameters, abort) {
+    const payload = {
+        ...parameters
+    };
+
+    return fetch(`${federation}/fanout`, {
+        method: 'post',
+        signal: abort,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            method: 'GET',
+            path: 'query',
+            service: 'query',
+            payload
+        })
+    })
+        .then((response) => {
+            if (response.ok) {
+                return response.json();
+            }
+            return [];
+        })
+        .catch((error) => {
+            console.log('Error:', error);
+            return 'error';
+        });
+}
diff --git a/src/views/clinicalGenomic/search/SearchHandler.js b/src/views/clinicalGenomic/search/SearchHandler.js
index 6c521bf1..e63bfc03 100644
--- a/src/views/clinicalGenomic/search/SearchHandler.js
+++ b/src/views/clinicalGenomic/search/SearchHandler.js
@@ -1,9 +1,9 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import { trackPromise } from 'react-promise-tracker';
 
 import { useSearchResultsWriterContext, useSearchQueryReaderContext } from '../SearchResultsContext';
-import { fetchFederationStat, fetchFederation, searchVariant, searchVariantByGene } from 'store/api';
+import { fetchFederationStat, fetchFederation, searchVariant, searchVariantByGene, query } from 'store/api';
 
 // This will grab all of the results from a query, but continue to consume all "next" from the pagination until we are complete
 // This defeats the purpose of pagination, and is frowned upon, but... deadlines
@@ -45,6 +45,7 @@ function ConsumeAllPages(url, resultConsumer, service = 'katsu') {
 function SearchHandler() {
     const reader = useSearchQueryReaderContext();
     const writer = useSearchResultsWriterContext();
+    const [controller, _] = useState(new AbortController());
 
     // Query 1: always have the federation sites and authorized programs query results available
     let lastPromise = null;
@@ -74,271 +75,82 @@ function SearchHandler() {
     // Query 2: when the search query changes, re-query the server
     useEffect(() => {
         const searchParams = new URLSearchParams();
-        /*
-        // Parse out search parameters according to what they are:
-        if (reader.query) {
-            Object.keys(reader.query).forEach((key) => {
-                searchParams.append(key, Array.isArray(reader.query[key]) ? reader.query[key].join(',') : reader.query[key]);
-            });
-        } */
 
-        // Queries now return lists of donors(??? Why is it like this?) so we need to AND/OR them as needed
-        if (reader.query) {
-            Object.keys(reader.query).forEach((key) => {
-                searchParams.append(key, Array.isArray(reader.query[key]) ? reader.query[key].join(',') : reader.query[key]);
-            });
-        }
+        console.log(reader.query);
 
-        // From the donorLists, AND/OR them as needed until we have just one final list of acceptable donors
-        let finalList = null;
-        if (reader.donorLists && Object.keys(reader.donorLists).length > 0) {
-            const allLists = Object.keys(reader.donorLists)?.map((key) =>
-                // Lists from the same queries are OR'd together
-                [...new Set(Object.values(reader?.donorLists[key])?.flat(1))]
-            );
+        // First, we abort any currently-running search promises
+        // controller.abort();
 
-            // Lists from different queries are AND'd together
-            const toQuery = allLists[0];
-            finalList = toQuery.filter((donor) => allLists.every((list) => list.includes(donor)));
-
-            // TODO: Figure out pagination (again)
-            searchParams.append('donors', finalList.join(','));
-        }
+        const CollateSummary = (data, statName) => {
+            const summaryStat = {};
+            data.forEach((site) => {
+                const thisStat = site.results?.summary?.[statName];
+                if (!thisStat) {
+                    return;
+                }
 
-        searchParams.append('page_size', 100);
-        const url = `v2/authorized/donors/?${searchParams}`;
+                Object.keys(thisStat).forEach((key) => {
+                    if (key in summaryStat) {
+                        summaryStat[key] += thisStat[key];
+                    } else {
+                        summaryStat[key] = thisStat[key];
+                    }
+                });
+            });
+            return summaryStat;
+        };
 
         const donorQueryPromise = () =>
-            trackPromise(
-                ConsumeAllPages(url, (donor) => donor, 'katsu').then((data) => {
-                    // We need to do two things:
-                    // 1. Push the raw data into the context
-                    // 2. Go through the data and fill out our pseudo-discovery queries for data vis
-                    const discoveryCounts = {
-                        diagnosis_age_count: {},
-                        treatment_type_count: {},
-                        cancer_type_count: {},
-                        patients_per_cohort: {},
-
-                        // Below is test data
-                        full_clinical_data: {
-                            BCGSC: {
-                                POG: 30
-                            },
-                            UHN: {
-                                POG: 14,
-                                Inspire: 20,
-                                Biocan: 20,
-                                Biodiva: 10
-                            },
-                            C3G: {
-                                MOCK: 30
-                            }
+            query(reader.query, controller.signal).then((data) => {
+                // We need to collate the discovery statistics from each site
+                console.log(data);
+                const discoveryCounts = {
+                    diagnosis_age_count: CollateSummary(data, 'age_at_diagnosis'),
+                    treatment_type_count: CollateSummary(data, 'treatment_type_count'),
+                    cancer_type_count: CollateSummary(data, 'cancer_type_count'),
+                    patients_per_cohort: {},
+
+                    // Below is test data
+                    full_clinical_data: {
+                        BCGSC: {
+                            POG: 30
                         },
-                        full_genomic_data: {
-                            BCGSC: {
-                                POG: 10
-                            },
-                            UHN: {
-                                POG: 4,
-                                Inspire: 10,
-                                Biocan: 12,
-                                Biodiva: 12
-                            },
-                            C3G: {
-                                MOCK: 3
-                            }
-                        }
-                    };
-
-                    // Add to a dictionary, or increment its value if it already exists
-                    const addOrReplace = (dict, value) => {
-                        if (value in dict) {
-                            dict[value] += 1;
-                        } else {
-                            dict[value] = 1;
-                        }
-                    };
-
-                    // Go through the donors we have, fill out our data visualization counts
-                    const donorToDOB = {};
-                    Object.keys(data).forEach((locName) => {
-                        if (reader.filter?.node?.includes(locName)) {
-                            // Don't process filtered-out nodes
-                            return;
+                        UHN: {
+                            POG: 14,
+                            Inspire: 20,
+                            Biocan: 20,
+                            Biodiva: 10
+                        },
+                        C3G: {
+                            MOCK: 30
                         }
-
-                        discoveryCounts.patients_per_cohort[locName] = {};
-                        donorToDOB[locName] = {};
-                        data[locName].forEach((donor) => {
-                            if (reader.filter?.program_id?.includes(donor.program_id)) {
-                                // Don't process filtered-out programs
-                                return;
-                            }
-
-                            if (donor.date_of_birth) {
-                                donorToDOB[locName][donor.submitter_donor_id] = donor.date_of_birth;
-                            }
-                            donor.primary_site.forEach((site) => addOrReplace(discoveryCounts.cancer_type_count, site));
-                            addOrReplace(discoveryCounts.patients_per_cohort[locName], donor.program_id);
-                        });
-                    });
-
-                    // Finally, to finish out our counts, we need to query the primary diagnoses
-                    return ConsumeAllPages(
-                        'v2/authorized/treatments/?page_size=100',
-                        (treatment) => [treatment.submitter_donor_id, treatment.treatment_type],
-                        'katsu'
-                    )
-                        .then((treatments) => {
-                            Object.keys(treatments).forEach((locName) => {
-                                if (reader.filter?.node?.includes(locName)) {
-                                    // Don't process filtered-out nodes
-                                    return;
-                                }
-
-                                treatments[locName]?.forEach(([donorID, treatmentTypes]) => {
-                                    if (donorID in donorToDOB[locName]) {
-                                        treatmentTypes.forEach((treatmentType) => {
-                                            addOrReplace(discoveryCounts.treatment_type_count, treatmentType);
-                                        });
-                                    }
-                                });
-                            });
-                        })
-                        .then(() =>
-                            ConsumeAllPages(
-                                'v2/authorized/primary_diagnoses/?page_size=100',
-                                (diagnosis) => [diagnosis.submitter_donor_id, diagnosis.date_of_diagnosis, diagnosis.program_id],
-                                'katsu'
-                            )
-                        )
-                        .then((diagnoses) => {
-                            Object.keys(diagnoses).forEach((locName) => {
-                                if (reader.filter?.node?.includes(locName)) {
-                                    // Don't process filtered-out nodes
-                                    return;
-                                }
-
-                                diagnoses[locName]?.forEach(([donorID, dateOfDiagnosis, programID]) => {
-                                    if (reader.filter?.program_id?.includes(programID)) {
-                                        // Don't process filtered-out programs
-                                        return;
-                                    }
-
-                                    if (donorID in donorToDOB[locName] && dateOfDiagnosis) {
-                                        // Convert this to an age range
-                                        const diagDate = dateOfDiagnosis.split('-');
-                                        const birthDate = donorToDOB[locName][donorID].split('-');
-                                        let ageAtDiagnosis = diagDate[0] - birthDate[0] + (diagDate[1] >= birthDate[1] ? 1 : 0);
-                                        ageAtDiagnosis -= ageAtDiagnosis % 10;
-
-                                        if (ageAtDiagnosis < 20) {
-                                            ageAtDiagnosis = '0-19 Years';
-                                        } else if (ageAtDiagnosis > 79) {
-                                            ageAtDiagnosis = '80+ Years';
-                                        } else {
-                                            ageAtDiagnosis = `${ageAtDiagnosis}-${ageAtDiagnosis + 9} Years`;
-                                        }
-                                        addOrReplace(discoveryCounts.diagnosis_age_count, ageAtDiagnosis);
-
-                                        delete donorToDOB[locName][donorID];
-                                    }
-                                });
-                            });
-                            writer((old) => ({ ...old, clinical: data, counts: discoveryCounts }));
-                        });
-                }),
-                'clinical'
-            )
-                .then(
-                    // Grab the specimens from the backend
-                    () =>
-                        ConsumeAllPages(
-                            'v2/authorized/sample_registrations/?page_size=100',
-                            (sample) => [sample.submitter_sample_id, sample.submitter_donor_id, sample.tumour_normal_designation],
-                            'katsu'
-                        )
-                )
-                .then((data) => {
-                    // First, we need to parse out all of the samples that exist inside of our finalList (if any)
-                    const specimenToDonor = {};
-                    const specimenType = {};
-                    Object.keys(data).forEach((locName) => {
-                        if (reader.filter?.node?.includes(locName)) {
-                            // Don't process filtered-out nodes
-                            return;
+                    },
+                    full_genomic_data: {
+                        BCGSC: {
+                            POG: 10
+                        },
+                        UHN: {
+                            POG: 4,
+                            Inspire: 10,
+                            Biocan: 12,
+                            Biodiva: 12
+                        },
+                        C3G: {
+                            MOCK: 3
                         }
-
-                        specimenToDonor[locName] = {};
-                        specimenType[locName] = {};
-                        data[locName]?.forEach(([sampleID, donorID, tumourNormalDesignation]) => {
-                            specimenToDonor[locName][sampleID] = donorID;
-                            specimenType[locName][sampleID] = tumourNormalDesignation;
-                        });
-                    });
-
-                    // We may need to query the HTSGet portion in order to do genomics search.
-                    let htsgetPromise = null;
-                    if (reader.genomic?.gene) {
-                        htsgetPromise = searchVariantByGene(reader.genomic.gene);
-                    } else if (reader.genomic?.referenceName) {
-                        htsgetPromise = searchVariant(
-                            reader.genomic?.referenceName,
-                            reader.genomic?.start,
-                            reader.genomic?.end,
-                            reader.genomic?.assemblyId
-                        );
                     }
+                };
 
-                    if (htsgetPromise) {
-                        htsgetPromise.then((htsgetData) => {
-                            // Parse out the response from Beacon
-                            const htsgetFilteredData = htsgetData
-                                .map((loc) => {
-                                    const handovers = loc.results?.beaconHandovers;
-                                    return (
-                                        loc.results.response?.map((response) =>
-                                            response.caseLevelData
-                                                .map((caseData) => {
-                                                    // We need to map before filtering because we need to parse out the program & donor ID
-                                                    const id = caseData.biosampleId.split('~');
-                                                    if (id.length > 1) {
-                                                        caseData.program_id = id[0];
-                                                        caseData.submitter_specimen_id = id[1];
-                                                        caseData.donorID =
-                                                            specimenToDonor[loc.location.name]?.[caseData.submitter_specimen_id];
-                                                        caseData.tumour_normal_designation =
-                                                            specimenType[loc.location.name]?.[caseData.submitter_specimen_id];
-                                                    } else {
-                                                        caseData.submitter_specimen_id = caseData.biosampleId;
-                                                    }
-
-                                                    caseData.beaconHandover = handovers[0];
-                                                    caseData.location = loc.location;
-                                                    caseData.position = response.variation.location.interval.start.value;
-                                                    return caseData;
-                                                })
-                                                .filter((caseData) => {
-                                                    if (
-                                                        reader.donorLists &&
-                                                        Object.keys(reader.donorLists).length > 0 &&
-                                                        caseData.donorID
-                                                    ) {
-                                                        return finalList.includes(caseData.donorID);
-                                                    }
-                                                    return true;
-                                                })
-                                        ) || []
-                                    );
-                                })
-                                .flat(2);
-
-                            writer((old) => ({ ...old, genomic: htsgetFilteredData }));
-                        });
-                    }
+                // Reorder the data, and fill outu the patients per cohort
+                const clinicalData = {};
+                data.forEach((site) => {
+                    discoveryCounts.patients_per_cohort[site.location.name] = site.results?.summary?.patients_per_cohort;
+                    clinicalData[site.location.name] = site?.results?.results;
                 });
 
+                writer((old) => ({ ...old, clinical: clinicalData, counts: discoveryCounts }));
+            });
+
         if (lastPromise === null) {
             lastPromise = donorQueryPromise();
         } else {
diff --git a/src/views/clinicalGenomic/widgets/sidebar.js b/src/views/clinicalGenomic/widgets/sidebar.js
index 4d13a202..17c31f90 100644
--- a/src/views/clinicalGenomic/widgets/sidebar.js
+++ b/src/views/clinicalGenomic/widgets/sidebar.js
@@ -81,7 +81,7 @@ SidebarGroup.propTypes = {
 };
 
 function StyledCheckboxList(props) {
-    const { groupName, isDonorList, isFilterList, remap, onWrite, options, useAutoComplete, hide } = props;
+    const { groupName, isFilterList, onWrite, options, useAutoComplete, hide } = props;
     const [checked, setChecked] = useState({});
     const [initialized, setInitialized] = useState(false);
     const classes = useStyles();
@@ -103,76 +103,48 @@ function StyledCheckboxList(props) {
     const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
     const checkedIcon = <CheckBoxIcon fontSize="small" />;
 
-    const HandleChange = (option, isChecked) => {
-        // If we need to call some mapping function, do so
-        let getID = new Promise((resolve) => resolve(option));
-        if (remap) {
-            getID = remap(option);
+    const HandleChange = (ids, isChecked) => {
+        // Remove duplicates
+        if (Array.isArray(ids)) {
+            ids = Array.from(new Set(ids?.flat(1)));
         }
 
-        getID.then((ids) => {
-            // Remove duplicates
-            if (Array.isArray(ids)) {
-                ids = Array.from(new Set(ids?.flat(1)));
-            }
-
-            if (isChecked) {
-                setChecked((old) => ({ ...old, [option]: true }));
-                onWrite((old) => {
-                    const retVal = { donorLists: {}, filter: {}, query: {}, ...old };
+        if (isChecked) {
+            setChecked((old) => ({ ...old, [ids]: true }));
+            onWrite((old) => {
+                const retVal = { donorLists: {}, filter: {}, query: {}, ...old };
+
+                // The following appends ourselves to the write context under 'query': {group: [list]} or 'donorList': {group: [list]}
+                if (isFilterList) {
+                    // Filter lists operate differently: you _remove_ the option when you check it
+                    retVal.filter[groupName].splice(retVal.filter[groupName].indexOf(ids));
+                } else {
+                    retVal.query[groupName] = ids;
+                }
 
-                    // The following appends ourselves to the write context under 'query': {group: [list]} or 'donorList': {group: [list]}
-                    if (isDonorList) {
-                        if (!(groupName in retVal.donorLists)) {
-                            retVal.donorLists[groupName] = { [option]: ids };
-                        } else {
-                            retVal.donorLists[groupName][option] = ids;
-                        }
-                    } else if (isFilterList) {
-                        // Filter lists operate differently: you _remove_ the option when you check it
-                        retVal.filter[groupName].splice(retVal.filter[groupName].indexOf(option));
+                return retVal;
+            });
+        } else {
+            setChecked((old) => {
+                const { [ids]: _, ...rest } = old;
+                return rest;
+            });
+            onWrite((old) => {
+                const retVal = { filter: {}, ...old };
+                if (isFilterList) {
+                    if (groupName in retVal.filter) {
+                        retVal.filter[groupName].push(ids);
                     } else {
-                        retVal.query[groupName] = ids;
+                        retVal.filter[groupName] = [ids];
                     }
-
                     return retVal;
-                });
-            } else {
-                setChecked((old) => {
-                    const { [option]: _, ...rest } = old;
-                    return rest;
-                });
-                onWrite((old) => {
-                    const retVal = { filter: {}, ...old };
-                    if (isFilterList) {
-                        if (groupName in retVal.filter) {
-                            retVal.filter[groupName].push(ids);
-                        } else {
-                            retVal.filter[groupName] = [ids];
-                        }
-                        return retVal;
-                    }
-                    if (!isDonorList) {
-                        const newList = Object.fromEntries(Object.entries(old.query).filter(([name, _]) => name !== groupName));
-                        retVal.query = newList;
-                        return retVal;
-                    }
-
-                    const newList = Object.entries(old.donorLists[groupName] || {}).filter(([key]) => key !== option);
-
-                    // Remove the list entirely if we are the last one
-                    if (newList.length <= 0) {
-                        const { [groupName]: _, ...rest } = old.donorLists || {};
-                        retVal.donorLists = rest;
-                        return retVal;
-                    }
+                }
 
-                    // Otherwise remove just our entry from the list
-                    retVal.donorLists[groupName] = Object.fromEntries(newList);
-                    return retVal;
-                });
-            }
-        });
+                const newList = Object.fromEntries(Object.entries(old.query).filter(([name, _]) => name !== groupName));
+                retVal.query = newList;
+                return retVal;
+            });
+        }
     };
 
     return useAutoComplete ? (
@@ -362,11 +334,6 @@ function Sidebar() {
     const hideGenomic = selectedtab !== 'All' && selectedtab !== 'Genomic';
     const hideClinical = selectedtab !== 'All' && selectedtab !== 'Clinical';
 
-    const remap = (url, returnName) =>
-        fetchFederation(url, 'katsu').then(
-            (data) => data?.map((loc) => loc?.results?.results?.map((result) => result[returnName]) || []) || []
-        );
-
     return (
         <>
             <Tabs value={selectedtab} onChange={(_, value) => setSelectedTab(value)}>
@@ -386,8 +353,6 @@ function Sidebar() {
                     options={treatmentTypes}
                     onWrite={writerContext}
                     groupName="treatment"
-                    remap={(id) => remap(`v2/authorized/treatments?treatment_type=${id}`, 'submitter_donor_id')}
-                    isDonorList
                     useAutoComplete={treatmentTypes.length >= 10}
                     hide={hideClinical}
                 />
@@ -406,8 +371,6 @@ function Sidebar() {
                     options={chemotherapyDrugNames}
                     onWrite={writerContext}
                     groupName="chemotherapy"
-                    remap={(id) => remap(`v2/authorized/chemotherapies?drug_name=${id}`, 'submitter_donor_id')}
-                    isDonorList
                     useAutoComplete={chemotherapyDrugNames.length >= 10}
                     hide={hideClinical}
                 />
@@ -417,8 +380,6 @@ function Sidebar() {
                     options={immunotherapyDrugNames}
                     onWrite={writerContext}
                     groupName="immunotherapy"
-                    remap={(id) => remap(`v2/authorized/immunotherapies?drug_name=${id}`, 'submitter_donor_id')}
-                    isDonorList
                     useAutoComplete={immunotherapyDrugNames.length >= 10}
                     hide={hideClinical}
                 />
@@ -428,8 +389,6 @@ function Sidebar() {
                     options={hormoneTherapyDrugNames}
                     onWrite={writerContext}
                     groupName="hormone_therapy"
-                    remap={(id) => remap(`v2/authorized/hormone_therapies?drug_name=${id}`, 'submitter_donor_id')}
-                    isDonorList
                     useAutoComplete={hormoneTherapyDrugNames.length >= 10}
                     hide={hideClinical}
                 />

From f42d7c0a68133e360a5cea629ef518178e664c56 Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Wed, 13 Sep 2023 12:34:49 -0400
Subject: [PATCH 19/51] Rework clinical&genomic data to work with the new query
 microservice

---
 src/layout/MainLayout/index.js                |  2 -
 .../clinicalGenomic/search/SearchHandler.js   | 20 ++++++----
 .../clinicalGenomic/widgets/clinicalData.js   | 10 ++---
 .../clinicalGenomic/widgets/genomicData.js    | 20 +++++-----
 src/views/clinicalGenomic/widgets/sidebar.js  | 38 +++++++++++++------
 5 files changed, 55 insertions(+), 35 deletions(-)

diff --git a/src/layout/MainLayout/index.js b/src/layout/MainLayout/index.js
index bc5b0a42..7b7ca87e 100644
--- a/src/layout/MainLayout/index.js
+++ b/src/layout/MainLayout/index.js
@@ -91,8 +91,6 @@ const MainLayout = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [matchDownMd]);
 
-    console.log(leftDrawerOpened);
-
     return (
         <div className={classes.root}>
             <SidebarProvider data={sidebarContent} setData={setSidebarContent}>
diff --git a/src/views/clinicalGenomic/search/SearchHandler.js b/src/views/clinicalGenomic/search/SearchHandler.js
index e63bfc03..8eb7acd2 100644
--- a/src/views/clinicalGenomic/search/SearchHandler.js
+++ b/src/views/clinicalGenomic/search/SearchHandler.js
@@ -74,12 +74,10 @@ function SearchHandler() {
 
     // Query 2: when the search query changes, re-query the server
     useEffect(() => {
-        const searchParams = new URLSearchParams();
-
-        console.log(reader.query);
-
         // First, we abort any currently-running search promises
         // controller.abort();
+        console.log('Query re-initiated');
+        console.log(reader.query);
 
         const CollateSummary = (data, statName) => {
             const summaryStat = {};
@@ -103,7 +101,6 @@ function SearchHandler() {
         const donorQueryPromise = () =>
             query(reader.query, controller.signal).then((data) => {
                 // We need to collate the discovery statistics from each site
-                console.log(data);
                 const discoveryCounts = {
                     diagnosis_age_count: CollateSummary(data, 'age_at_diagnosis'),
                     treatment_type_count: CollateSummary(data, 'treatment_type_count'),
@@ -141,14 +138,23 @@ function SearchHandler() {
                     }
                 };
 
-                // Reorder the data, and fill outu the patients per cohort
+                // Reorder the data, and fill out the patients per cohort
                 const clinicalData = {};
                 data.forEach((site) => {
                     discoveryCounts.patients_per_cohort[site.location.name] = site.results?.summary?.patients_per_cohort;
                     clinicalData[site.location.name] = site?.results?.results;
                 });
 
-                writer((old) => ({ ...old, clinical: clinicalData, counts: discoveryCounts }));
+                const genomicData = data
+                    .map((site) =>
+                        site.results.genomic?.map((caseData) => {
+                            caseData.location = site.location;
+                            return caseData;
+                        })
+                    )
+                    .flat(1);
+
+                writer((old) => ({ ...old, clinical: clinicalData, counts: discoveryCounts, genomic: genomicData }));
             });
 
         if (lastPromise === null) {
diff --git a/src/views/clinicalGenomic/widgets/clinicalData.js b/src/views/clinicalGenomic/widgets/clinicalData.js
index 1862c40c..977d6152 100644
--- a/src/views/clinicalGenomic/widgets/clinicalData.js
+++ b/src/views/clinicalGenomic/widgets/clinicalData.js
@@ -45,11 +45,11 @@ function ClinicalView() {
 
     // JSON on bottom now const screenWidth = desktopResolution ? '48%' : '100%';
     const columns = [
-        { field: 'submitter_donor_id', headerName: 'Donor ID', minWidth: 220 },
-        { field: 'sex_at_birth', headerName: 'Sex At Birth', minWidth: 170 },
-        { field: 'deceased', headerName: 'Deceased', minWidth: 170 },
-        { field: 'date_of_birth', headerName: 'Date of Birth', minWidth: 200 },
-        { field: 'date_of_death', headerName: 'Date of Death', minWidth: 220 }
+        { field: 'submitter_donor_id', headerName: 'Donor ID', minWidth: 220, sortable: false },
+        { field: 'sex_at_birth', headerName: 'Sex At Birth', minWidth: 170, sortable: false },
+        { field: 'deceased', headerName: 'Deceased', minWidth: 170, sortable: false },
+        { field: 'date_of_birth', headerName: 'Date of Birth', minWidth: 200, sortable: false },
+        { field: 'date_of_death', headerName: 'Date of Death', minWidth: 220, sortable: false }
     ];
 
     return (
diff --git a/src/views/clinicalGenomic/widgets/genomicData.js b/src/views/clinicalGenomic/widgets/genomicData.js
index 3658cdcc..c8df639f 100644
--- a/src/views/clinicalGenomic/widgets/genomicData.js
+++ b/src/views/clinicalGenomic/widgets/genomicData.js
@@ -17,7 +17,7 @@ function GenomicData() {
     const [desktopResolution, setdesktopResolution] = React.useState(window.innerWidth > 1200);
 
     const searchResults = useSearchResultsReaderContext().genomic;
-    const query = useSearchQueryReaderContext().genomic;
+    const query = useSearchQueryReaderContext().query;
 
     // Flatten the search results so that we are filling in the rows
     let rows = [];
@@ -47,17 +47,17 @@ function GenomicData() {
 
     // JSON on bottom now const screenWidth = desktopResolution ? '48%' : '100%';
     const columns = [
-        { field: 'location', headerName: 'Node', minWidth: 150 },
-        { field: 'donorID', headerName: 'Donor ID', minWidth: 150 },
-        { field: 'position', headerName: 'Position', minWidth: 200 },
-        { field: 'tumour_normal_designation', headerName: 'Tumour/Normal', minWidth: 200 },
-        { field: 'submitter_specimen_id', headerName: 'Tumour Specimen ID', minWidth: 200 },
-        { field: 'genotypeLabel', headerName: 'Genotype', minWidth: 300 },
-        { field: 'zygosityLabel', headerName: 'Zygosity', minWidth: 200 }
+        { field: 'location', headerName: 'Node', minWidth: 120, sortable: false },
+        { field: 'donor_id', headerName: 'Donor ID', minWidth: 150, sortable: false },
+        { field: 'position', headerName: 'Position', minWidth: 150, sortable: false },
+        { field: 'tumour_normal_designation', headerName: 'Tumour/Normal', minWidth: 200, sortable: false },
+        { field: 'submitter_specimen_id', headerName: 'Tumour Specimen ID', minWidth: 300, sortable: false },
+        { field: 'genotypeLabel', headerName: 'Genotype', minWidth: 300, sortable: false },
+        { field: 'zygosityLabel', headerName: 'Zygosity', minWidth: 200, sortable: false }
     ];
 
-    const queryParams = query?.gene || `${query?.referenceName}:${query?.start}-${query?.end}`;
-    const hasValidQuery = (query?.referenceName && query?.start && query?.end) || query?.gene;
+    const queryParams = query?.gene || query?.chrom;
+    const hasValidQuery = (query?.assembly && query?.chrom) || query?.gene;
 
     return (
         <Box mr={2} ml={1} p={1} sx={{ border: 1, borderRadius: 2, boxShadow: 2, borderColor: theme.palette.primary[200] + 75 }}>
diff --git a/src/views/clinicalGenomic/widgets/sidebar.js b/src/views/clinicalGenomic/widgets/sidebar.js
index 17c31f90..522e308e 100644
--- a/src/views/clinicalGenomic/widgets/sidebar.js
+++ b/src/views/clinicalGenomic/widgets/sidebar.js
@@ -208,24 +208,40 @@ function GenomicsGroup(props) {
     const [selectedGenes, setSelectedGenes] = useState('');
     const [startPos, setStartPos] = useState(0);
     const [endPos, setEndPos] = useState(0);
+    const [timeout, setNewTimeout] = useState(null);
 
     if (hide) {
         return <></>;
     }
 
     const HandleChange = (value, changer, toChange) => {
-        changer(value);
-        onWrite((old) => ({
-            ...old,
-            genomic: {
-                assemblyId: selectedGenome,
-                referenceName: selectedChromosomes,
-                start: startPos,
-                end: endPos,
-                gene: selectedGenes,
-                [toChange]: value
+        setNewTimeout((oldTimeout) => {
+            if (oldTimeout != null) {
+                clearTimeout(oldTimeout);
             }
-        }));
+
+            return setTimeout(() => {
+                const newQuery = {
+                    referenceName: selectedChromosomes,
+                    gene: selectedGenes,
+                    start: startPos,
+                    end: endPos,
+                    assembly: selectedGenome,
+                    [toChange]: value
+                };
+
+                onWrite((old) => ({
+                    ...old,
+                    query: {
+                        ...old.query,
+                        chrom: newQuery.referenceName ? `chr${newQuery.referenceName}:${newQuery.start}-${newQuery.end}` : undefined,
+                        gene: newQuery.gene || undefined,
+                        assembly: newQuery.assembly
+                    }
+                }));
+            }, 1000);
+        });
+        changer(value);
     };
 
     return (

From 4a78974ae5650f8c4c7e0126a485f36db063e26b Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Wed, 27 Sep 2023 15:13:14 -0400
Subject: [PATCH 20/51] Fix the positioning of the profile menu

---
 .../MainLayout/Header/ProfileSection/index.js | 22 ++++---------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/src/layout/MainLayout/Header/ProfileSection/index.js b/src/layout/MainLayout/Header/ProfileSection/index.js
index 2ec415df..3a46a50f 100644
--- a/src/layout/MainLayout/Header/ProfileSection/index.js
+++ b/src/layout/MainLayout/Header/ProfileSection/index.js
@@ -77,6 +77,9 @@ const useStyles = makeStyles((theme) => ({
     cardContent: {
         padding: '16px !important'
     },
+    showOnTop: {
+        zIndex: 11001
+    },
     card: {
         backgroundColor: theme.palette.primary.light,
         marginBottom: '16px',
@@ -118,7 +121,6 @@ const ProfileSection = () => {
     const theme = useTheme();
     const customization = useSelector((state) => state.customization);
 
-    const [value, setValue] = React.useState('');
     const [selectedIndex] = React.useState(1);
 
     const [open, setOpen] = React.useState(false);
@@ -185,7 +187,7 @@ const ProfileSection = () => {
                 anchorEl={anchorRef.current}
                 role={undefined}
                 transition
-                disablePortal
+                className={classes.showOnTop}
                 popperOptions={{
                     modifiers: [
                         {
@@ -214,22 +216,6 @@ const ProfileSection = () => {
                                                 <Typography variant="subtitle2">{SITE}</Typography>
                                             </Grid>
                                         </Grid>
-                                        <OutlinedInput
-                                            className={classes.searchControl}
-                                            id="input-search-profile"
-                                            value={value}
-                                            onChange={(e) => setValue(e.target.value)}
-                                            placeholder="Search profile options"
-                                            startAdornment={
-                                                <InputAdornment position="start">
-                                                    <IconSearch stroke={1.5} size="1.3rem" className={classes.startAdornment} />
-                                                </InputAdornment>
-                                            }
-                                            aria-describedby="search-helper-text"
-                                            inputProps={{
-                                                'aria-label': 'weight'
-                                            }}
-                                        />
                                         <Divider />
                                         <PerfectScrollbar className={classes.ScrollHeight}>
                                             <Divider />

From eefab3a3357f8ff8c2532db2e4cd5b7f14119f87 Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Wed, 27 Sep 2023 15:15:54 -0400
Subject: [PATCH 21/51] eslint fix

---
 src/layout/MainLayout/Header/ProfileSection/index.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/layout/MainLayout/Header/ProfileSection/index.js b/src/layout/MainLayout/Header/ProfileSection/index.js
index 3a46a50f..138cf489 100644
--- a/src/layout/MainLayout/Header/ProfileSection/index.js
+++ b/src/layout/MainLayout/Header/ProfileSection/index.js
@@ -9,11 +9,9 @@ import {
     ClickAwayListener,
     Divider,
     Grid,
-    InputAdornment,
     List,
     ListItemIcon,
     ListItemText,
-    OutlinedInput,
     Paper,
     Popper,
     Typography
@@ -29,7 +27,7 @@ import Transitions from 'ui-component/extended/Transitions';
 import { SITE } from 'store/constant';
 
 // assets
-import { IconLogout, IconSearch, IconSettings } from '@tabler/icons';
+import { IconLogout, IconSettings } from '@tabler/icons';
 import User1 from 'assets/images/users/user-round.svg';
 import BCGSC from 'assets/images/users/bcgsc.svg';
 import UHN from 'assets/images/users/UHN.svg';

From 59ac436c8e6d999333dac340579ca86a0175d238 Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Wed, 27 Sep 2023 15:49:49 -0400
Subject: [PATCH 22/51] Fix padding below username

---
 src/layout/MainLayout/Header/ProfileSection/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/layout/MainLayout/Header/ProfileSection/index.js b/src/layout/MainLayout/Header/ProfileSection/index.js
index 138cf489..98d3345e 100644
--- a/src/layout/MainLayout/Header/ProfileSection/index.js
+++ b/src/layout/MainLayout/Header/ProfileSection/index.js
@@ -109,6 +109,9 @@ const useStyles = makeStyles((theme) => ({
     badgeWarning: {
         backgroundColor: theme.palette.warning.dark,
         color: '#fff'
+    },
+    usernamePadding: {
+        paddingBottom: '1em'
     }
 }));
 
@@ -210,7 +213,7 @@ const ProfileSection = () => {
                                                     First Name Last Name
                                                 </Typography> */}
                                             </Grid>
-                                            <Grid item>
+                                            <Grid item className={classes.usernamePadding}>
                                                 <Typography variant="subtitle2">{SITE}</Typography>
                                             </Grid>
                                         </Grid>

From 1a1fc23fba697cb1ab332843fd984e38788f804b Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Fri, 13 Oct 2023 14:07:17 -0400
Subject: [PATCH 23/51] Fix Cohort/node filtering

---
 .../clinicalGenomic/search/SearchHandler.js   |  4 ++++
 src/views/clinicalGenomic/widgets/sidebar.js  | 21 +++++++++++++------
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/views/clinicalGenomic/search/SearchHandler.js b/src/views/clinicalGenomic/search/SearchHandler.js
index 8eb7acd2..2e66a01b 100644
--- a/src/views/clinicalGenomic/search/SearchHandler.js
+++ b/src/views/clinicalGenomic/search/SearchHandler.js
@@ -100,6 +100,10 @@ function SearchHandler() {
 
         const donorQueryPromise = () =>
             query(reader.query, controller.signal).then((data) => {
+                if (reader.filter?.node) {
+                    data = data.filter((site) => !reader.filter.node.includes(site.location.name));
+                }
+
                 // We need to collate the discovery statistics from each site
                 const discoveryCounts = {
                     diagnosis_age_count: CollateSummary(data, 'age_at_diagnosis'),
diff --git a/src/views/clinicalGenomic/widgets/sidebar.js b/src/views/clinicalGenomic/widgets/sidebar.js
index 522e308e..e4de7211 100644
--- a/src/views/clinicalGenomic/widgets/sidebar.js
+++ b/src/views/clinicalGenomic/widgets/sidebar.js
@@ -18,7 +18,6 @@ import { makeStyles, useTheme } from '@mui/styles';
 import PropTypes from 'prop-types';
 
 import { useSearchQueryWriterContext, useSearchResultsReaderContext } from '../SearchResultsContext';
-import { fetchFederation } from '../../../store/api';
 
 const useStyles = makeStyles((_) => ({
     tab: {
@@ -81,7 +80,7 @@ SidebarGroup.propTypes = {
 };
 
 function StyledCheckboxList(props) {
-    const { groupName, isFilterList, onWrite, options, useAutoComplete, hide } = props;
+    const { isExclusion, groupName, isFilterList, onWrite, options, useAutoComplete, hide } = props;
     const [checked, setChecked] = useState({});
     const [initialized, setInitialized] = useState(false);
     const classes = useStyles();
@@ -109,7 +108,7 @@ function StyledCheckboxList(props) {
             ids = Array.from(new Set(ids?.flat(1)));
         }
 
-        if (isChecked) {
+        if (isExclusion ? !isChecked : isChecked) {
             setChecked((old) => ({ ...old, [ids]: true }));
             onWrite((old) => {
                 const retVal = { donorLists: {}, filter: {}, query: {}, ...old };
@@ -122,6 +121,7 @@ function StyledCheckboxList(props) {
                     retVal.query[groupName] = ids;
                 }
 
+                console.log(retVal);
                 return retVal;
             });
         } else {
@@ -137,11 +137,13 @@ function StyledCheckboxList(props) {
                     } else {
                         retVal.filter[groupName] = [ids];
                     }
+                    console.log(retVal);
                     return retVal;
                 }
 
                 const newList = Object.fromEntries(Object.entries(old.query).filter(([name, _]) => name !== groupName));
                 retVal.query = newList;
+                console.log(retVal);
                 return retVal;
             });
         }
@@ -156,7 +158,13 @@ function StyledCheckboxList(props) {
             disableCloseOnSelect
             renderOption={(props, option, { selected }) => (
                 <li {...props} value={option}>
-                    <Checkbox icon={icon} checkedIcon={checkedIcon} style={{ marginRight: 8 }} checked={selected} value={option} />
+                    <Checkbox
+                        icon={icon}
+                        checkedIcon={checkedIcon}
+                        style={{ marginRight: 8 }}
+                        checked={isExclusion ? !selected : selected}
+                        value={option}
+                    />
                     {option}
                 </li>
             )}
@@ -174,7 +182,7 @@ function StyledCheckboxList(props) {
                 control={
                     <Checkbox
                         className={classes.checkbox}
-                        checked={option in checked}
+                        checked={isExclusion ? !(option in checked) : option in checked}
                         onChange={(event) => HandleChange(option, event.target.checked)}
                     />
                 }
@@ -186,6 +194,7 @@ function StyledCheckboxList(props) {
 }
 
 StyledCheckboxList.propTypes = {
+    isExclusion: PropTypes.bool,
     groupName: PropTypes.string,
     hide: PropTypes.bool,
     isDonorList: PropTypes.bool,
@@ -361,7 +370,7 @@ function Sidebar() {
                 <StyledCheckboxList options={sites} onWrite={writerContext} groupName="node" isFilterList />
             </SidebarGroup>
             <SidebarGroup name="Cohort">
-                <StyledCheckboxList options={cohorts} onWrite={writerContext} groupName="program_id" isFilterList />
+                <StyledCheckboxList options={cohorts} onWrite={writerContext} groupName="exclude_cohorts" isExclusion />
             </SidebarGroup>
             <GenomicsGroup chromosomes={chromosomes} genes={genes} onWrite={writerContext} hide={hideGenomic} />
             <SidebarGroup name="Treatment" hide={hideClinical}>

From 2b59f8e038223faf45a9f076a3907ee4795aae8f Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Fri, 13 Oct 2023 14:09:37 -0400
Subject: [PATCH 24/51] Remove debugging logs

---
 src/views/clinicalGenomic/widgets/sidebar.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/views/clinicalGenomic/widgets/sidebar.js b/src/views/clinicalGenomic/widgets/sidebar.js
index e4de7211..1e003393 100644
--- a/src/views/clinicalGenomic/widgets/sidebar.js
+++ b/src/views/clinicalGenomic/widgets/sidebar.js
@@ -121,7 +121,6 @@ function StyledCheckboxList(props) {
                     retVal.query[groupName] = ids;
                 }
 
-                console.log(retVal);
                 return retVal;
             });
         } else {
@@ -137,13 +136,11 @@ function StyledCheckboxList(props) {
                     } else {
                         retVal.filter[groupName] = [ids];
                     }
-                    console.log(retVal);
                     return retVal;
                 }
 
                 const newList = Object.fromEntries(Object.entries(old.query).filter(([name, _]) => name !== groupName));
                 retVal.query = newList;
-                console.log(retVal);
                 return retVal;
             });
         }

From 6931fd316814ebc3980f83de21475b0c94c075d4 Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Tue, 8 Aug 2023 16:44:23 -0400
Subject: [PATCH 25/51] Ingest menu button

---
 package-lock.json        | 14 ++++++++++++++
 src/menu-items/index.js  |  3 ++-
 src/menu-items/ingest.js | 32 ++++++++++++++++++++++++++++++++
 3 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 src/menu-items/ingest.js

diff --git a/package-lock.json b/package-lock.json
index 22b5f7fc..3db92af6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,6 +35,7 @@
                 "highcharts": "^10.0.0",
                 "highcharts-react-official": "^3.1.0",
                 "history": "^5.0.0",
+                "js-cookie": "^3.0.5",
                 "material-ui-popup-state": "^1.8.0",
                 "npm": "^8.6.0",
                 "papaparse": "^5.3.2",
@@ -13469,6 +13470,14 @@
                 "url": "https://github.com/chalk/supports-color?sponsor=1"
             }
         },
+        "node_modules/js-cookie": {
+            "version": "3.0.5",
+            "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+            "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+            "engines": {
+                "node": ">=14"
+            }
+        },
         "node_modules/js-sdsl": {
             "version": "4.1.4",
             "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.4.tgz",
@@ -32968,6 +32977,11 @@
                 }
             }
         },
+        "js-cookie": {
+            "version": "3.0.5",
+            "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+            "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw=="
+        },
         "js-sdsl": {
             "version": "4.1.4",
             "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.4.tgz",
diff --git a/src/menu-items/index.js b/src/menu-items/index.js
index 072bdc66..7bf71ba3 100644
--- a/src/menu-items/index.js
+++ b/src/menu-items/index.js
@@ -1,5 +1,6 @@
 import clinicalGenomicSearch from './clinicalGenomicSearch';
 import summary from './summary';
+import ingest from './ingest';
 
 // import pages from './pages';
 // import utilities from './utilities';
@@ -8,7 +9,7 @@ import summary from './summary';
 // ===========================|| MENU ITEMS ||=========================== //
 
 const menuItems = {
-    items: [summary, clinicalGenomicSearch /* pages, utilities, other */]
+    items: [summary, clinicalGenomicSearch, ingest /* pages, utilities, other */]
 };
 
 export default menuItems;
diff --git a/src/menu-items/ingest.js b/src/menu-items/ingest.js
new file mode 100644
index 00000000..5ddca28f
--- /dev/null
+++ b/src/menu-items/ingest.js
@@ -0,0 +1,32 @@
+// assets
+import { IconUpload } from '@tabler/icons';
+
+// import project config
+import config from 'config';
+
+// constant
+const { basename } = config;
+
+const icons = {
+    IconUpload
+};
+
+// ===========================|| Ingest MENU ITEMS ||=========================== //
+
+const ingest = {
+    id: 'ingest',
+    title: 'Data Ingest',
+    type: 'group',
+    children: [
+        {
+            id: 'Data Ingest',
+            title: 'Data Ingest',
+            type: 'item',
+            url: `${basename}/ingest`,
+            icon: icons.IconUpload,
+            breadcrumbs: false
+        }
+    ]
+};
+
+export default ingest;

From a48ebe3171caf98c5a30f1e1054563d1f9f61c08 Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Thu, 10 Aug 2023 14:04:15 -0400
Subject: [PATCH 26/51] Basic ingest page tab navigation

---
 .env.development                          |  8 +--
 src/routes/MainRoutes.js                  |  7 +++
 src/ui-component/ingest/ClinicalIngest.js | 17 ++++++
 src/ui-component/ingest/IngestTab.js      | 71 +++++++++++++++++++++++
 src/views/ingest/ingest.js                | 40 +++++++++++++
 5 files changed, 139 insertions(+), 4 deletions(-)
 create mode 100644 src/ui-component/ingest/ClinicalIngest.js
 create mode 100644 src/ui-component/ingest/IngestTab.js
 create mode 100644 src/views/ingest/ingest.js

diff --git a/.env.development b/.env.development
index 25fe55b6..4716849c 100644
--- a/.env.development
+++ b/.env.development
@@ -1,6 +1,6 @@
-REACT_APP_KATSU_API_SERVER=''
-REACT_APP_FEDERATION_API_SERVER=''
+REACT_APP_KATSU_API_SERVER='candig.docker.internal:5080/katsu/v2/'
+REACT_APP_FEDERATION_API_SERVER='candig.docker.internal:5080'
 REACT_APP_BASE_NAME=''
 REACT_APP_SITE_LOCATION = ''
-REACT_APP_HTSGET_SERVER = ''
-GENERATE_SOURCEMAP=false
+REACT_APP_HTSGET_SERVER = 'candig.docker.internal:5080/genomics/ga4gh/drs/v1/'
+GENERATE_SOURCEMAP=false
\ No newline at end of file
diff --git a/src/routes/MainRoutes.js b/src/routes/MainRoutes.js
index 363cabeb..a80d044f 100644
--- a/src/routes/MainRoutes.js
+++ b/src/routes/MainRoutes.js
@@ -16,6 +16,9 @@ const Summary = Loadable(lazy(() => import('views/summary/summary')));
 // Clinical & Genomic Search
 const ClinicalGenomicSearch = Loadable(lazy(() => import('views/clinicalGenomic/clinicalGenomicSearch')));
 
+// Ingest Portal
+const IngestPortal = Loadable(lazy(() => import('views/ingest/ingest')));
+
 // Error Pages
 const ErrorNotFoundPage = Loadable(lazy(() => import('views/errorPages/ErrorNotFoundPage')));
 
@@ -41,6 +44,10 @@ const MainRoutes = {
             path: `${basename}/clinicalGenomicSearch`,
             element: <ClinicalGenomicSearch />
         },
+        {
+            path: `${basename}/ingest`,
+            element: <IngestPortal />
+        },
         {
             path: '*',
             element: <ErrorNotFoundPage />
diff --git a/src/ui-component/ingest/ClinicalIngest.js b/src/ui-component/ingest/ClinicalIngest.js
new file mode 100644
index 00000000..fb0cdec9
--- /dev/null
+++ b/src/ui-component/ingest/ClinicalIngest.js
@@ -0,0 +1,17 @@
+import { Box } from '@mui/material';
+
+export default function ClinicalIngestPage() {
+    return (
+        <Box
+            sx={{
+                width: '100%',
+                height: '100%',
+                borderBottomLeftRadius: '0.75em',
+                borderBottomRightRadius: '0.75em',
+                marginTop: 0,
+                border: '0.15vw #2196F3 solid',
+                borderTop: 'none'
+            }}
+        />
+    );
+}
diff --git a/src/ui-component/ingest/IngestTab.js b/src/ui-component/ingest/IngestTab.js
new file mode 100644
index 00000000..40bd1d87
--- /dev/null
+++ b/src/ui-component/ingest/IngestTab.js
@@ -0,0 +1,71 @@
+import { styled } from '@mui/styles';
+import { Box, Tab, Tabs } from '@mui/material';
+import { useState } from 'react';
+
+import ClinicalIngestPage from 'ui-component/ingest/ClinicalIngest';
+
+const tabs = ['Permissions', 'Clinical Ingest', 'Genomic Ingest'];
+
+const IngestTab = styled(Tab)({
+    height: '2.75em',
+    paddingLeft: '0.77em',
+    paddingRight: '0.77em',
+    marginBottom: 0,
+    borderTopLeftRadius: '0.55em',
+    borderTopRightRadius: '0.55em',
+    overflow: 'hidden',
+    justifyContent: 'flex-start',
+    alignItems: 'start',
+    gap: '0.59em',
+    display: 'flex',
+    textAlign: 'left',
+    color: '#686969',
+    fontSize: '1.5em',
+    fontFamily: 'Roboto',
+    fontWeight: '700',
+    wordWrap: 'break-word',
+    textTransform: 'none',
+    verticalAlign: 'center'
+});
+
+export default function IngestMenu() {
+    const [value, setValue] = useState(0);
+    const setTab = (event, val) => {
+        setValue(val);
+    };
+
+    function getPage(val) {
+        if (val === 1) return <ClinicalIngestPage />;
+        if (val === 2) return <ClinicalIngestPage />;
+        if (val === 3) return <ClinicalIngestPage />;
+        return <ClinicalIngestPage />;
+    }
+
+    return (
+        <Box sx={{ width: '100%' }}>
+            <Tabs
+                value={value}
+                onChange={setTab}
+                variant="fullWidth"
+                sx={{ width: '100%' }}
+                TabIndicatorProps={{
+                    style: { display: 'none' }
+                }}
+                centered
+            >
+                {tabs.map((name, idx) => (
+                    <IngestTab
+                        label={name}
+                        key={name}
+                        sx={{
+                            border: idx === value ? '0.15vw #2196F3 solid' : '0.1vw #2196F3 solid',
+                            borderBottom: idx === value ? 'none' : '0.15vw #2196F3 solid',
+                            background: idx === value ? '#FFFFFF' : '#F4FAFF'
+                        }}
+                    />
+                ))}
+            </Tabs>
+            {getPage(value)}
+        </Box>
+    );
+}
diff --git a/src/views/ingest/ingest.js b/src/views/ingest/ingest.js
new file mode 100644
index 00000000..3f2c3685
--- /dev/null
+++ b/src/views/ingest/ingest.js
@@ -0,0 +1,40 @@
+import IngestMenu from 'ui-component/ingest/IngestTab';
+import { Grid } from '@mui/material';
+import { makeStyles } from '@mui/styles';
+
+function IngestPage() {
+    const useStyles = makeStyles({
+        container: {
+            color: 'white',
+            width: '100%',
+            paddingTop: '0.8em',
+            borderRadius: '1em',
+            overflow: 'hidden',
+            flexDirection: 'column',
+            justifyContent: 'flex-start',
+            alignItems: 'flex-start',
+            display: 'inline-flex'
+        },
+        label: {
+            color: 'black',
+            fontSize: 24,
+            fontFamily: 'Roboto',
+            fontWeight: '700',
+            wordWrap: 'break-word',
+            marginLeft: '0.65em',
+            marginBottom: '1em',
+            marginTop: '0.51em'
+        }
+    });
+    const classes = useStyles();
+    return (
+        <Grid container sx={{ height: '100%', width: '100%' }}>
+            <Grid item sx={{ background: 'white' }} className={classes.container}>
+                <div className={classes.label}>Ingest Data</div>
+                <IngestMenu />
+            </Grid>
+        </Grid>
+    );
+}
+
+export default IngestPage;

From f7abadb38ae677b80f2e864aeceb0e3501a66208 Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Mon, 14 Aug 2023 14:52:33 -0400
Subject: [PATCH 27/51] Update package-lock.json

---
 package-lock.json | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3db92af6..22b5f7fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,7 +35,6 @@
                 "highcharts": "^10.0.0",
                 "highcharts-react-official": "^3.1.0",
                 "history": "^5.0.0",
-                "js-cookie": "^3.0.5",
                 "material-ui-popup-state": "^1.8.0",
                 "npm": "^8.6.0",
                 "papaparse": "^5.3.2",
@@ -13470,14 +13469,6 @@
                 "url": "https://github.com/chalk/supports-color?sponsor=1"
             }
         },
-        "node_modules/js-cookie": {
-            "version": "3.0.5",
-            "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
-            "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
-            "engines": {
-                "node": ">=14"
-            }
-        },
         "node_modules/js-sdsl": {
             "version": "4.1.4",
             "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.4.tgz",
@@ -32977,11 +32968,6 @@
                 }
             }
         },
-        "js-cookie": {
-            "version": "3.0.5",
-            "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
-            "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw=="
-        },
         "js-sdsl": {
             "version": "4.1.4",
             "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.4.tgz",

From 92e693a3d820846e031a451fefd50909211031f6 Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Mon, 14 Aug 2023 15:14:22 -0400
Subject: [PATCH 28/51] Ingest page code style fixes

---
 src/ui-component/ingest/ClinicalIngest.js     |  1 +
 .../ingest/{IngestTab.js => IngestMenu.js}    | 31 ++++++++++++-------
 src/views/ingest/ingest.js                    |  8 +++--
 3 files changed, 26 insertions(+), 14 deletions(-)
 rename src/ui-component/ingest/{IngestTab.js => IngestMenu.js} (72%)

diff --git a/src/ui-component/ingest/ClinicalIngest.js b/src/ui-component/ingest/ClinicalIngest.js
index fb0cdec9..d914facc 100644
--- a/src/ui-component/ingest/ClinicalIngest.js
+++ b/src/ui-component/ingest/ClinicalIngest.js
@@ -6,6 +6,7 @@ export default function ClinicalIngestPage() {
             sx={{
                 width: '100%',
                 height: '100%',
+                minHeight: 100,
                 borderBottomLeftRadius: '0.75em',
                 borderBottomRightRadius: '0.75em',
                 marginTop: 0,
diff --git a/src/ui-component/ingest/IngestTab.js b/src/ui-component/ingest/IngestMenu.js
similarity index 72%
rename from src/ui-component/ingest/IngestTab.js
rename to src/ui-component/ingest/IngestMenu.js
index 40bd1d87..60276d5b 100644
--- a/src/ui-component/ingest/IngestTab.js
+++ b/src/ui-component/ingest/IngestMenu.js
@@ -1,4 +1,4 @@
-import { styled } from '@mui/styles';
+import { makeStyles, styled } from '@mui/styles';
 import { Box, Tab, Tabs } from '@mui/material';
 import { useState } from 'react';
 
@@ -28,12 +28,27 @@ const IngestTab = styled(Tab)({
     verticalAlign: 'center'
 });
 
-export default function IngestMenu() {
+function IngestMenu() {
     const [value, setValue] = useState(0);
     const setTab = (event, val) => {
         setValue(val);
     };
 
+    const useStyles = makeStyles({
+        tabActive: {
+            border: '0.15vw #2196F3 solid',
+            borderBottom: 'none',
+            background: '#FFFFFF'
+        },
+        tabInactive: {
+            border: '0.1vw #2196F3 solid',
+            borderBottom: '0.15vw #2196F3 solid',
+            background: '#F4FAFF'
+        }
+    });
+
+    const classes = useStyles();
+
     function getPage(val) {
         if (val === 1) return <ClinicalIngestPage />;
         if (val === 2) return <ClinicalIngestPage />;
@@ -54,18 +69,12 @@ export default function IngestMenu() {
                 centered
             >
                 {tabs.map((name, idx) => (
-                    <IngestTab
-                        label={name}
-                        key={name}
-                        sx={{
-                            border: idx === value ? '0.15vw #2196F3 solid' : '0.1vw #2196F3 solid',
-                            borderBottom: idx === value ? 'none' : '0.15vw #2196F3 solid',
-                            background: idx === value ? '#FFFFFF' : '#F4FAFF'
-                        }}
-                    />
+                    <IngestTab label={name} key={name} className={idx === value ? classes.tabActive : classes.tabInactive} />
                 ))}
             </Tabs>
             {getPage(value)}
         </Box>
     );
 }
+
+export default IngestMenu;
diff --git a/src/views/ingest/ingest.js b/src/views/ingest/ingest.js
index 3f2c3685..8c9341e9 100644
--- a/src/views/ingest/ingest.js
+++ b/src/views/ingest/ingest.js
@@ -1,4 +1,4 @@
-import IngestMenu from 'ui-component/ingest/IngestTab';
+import IngestMenu from 'ui-component/ingest/IngestMenu';
 import { Grid } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 
@@ -6,6 +6,8 @@ function IngestPage() {
     const useStyles = makeStyles({
         container: {
             color: 'white',
+            background: 'white',
+            height: '100%',
             width: '100%',
             paddingTop: '0.8em',
             borderRadius: '1em',
@@ -28,8 +30,8 @@ function IngestPage() {
     });
     const classes = useStyles();
     return (
-        <Grid container sx={{ height: '100%', width: '100%' }}>
-            <Grid item sx={{ background: 'white' }} className={classes.container}>
+        <Grid container className={classes.container}>
+            <Grid item sx={{ height: '100%', width: '100%' }}>
                 <div className={classes.label}>Ingest Data</div>
                 <IngestMenu />
             </Grid>

From 51efd4d4a453a20ce6fa42fb6b141d464935dba6 Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Mon, 14 Aug 2023 15:18:52 -0400
Subject: [PATCH 29/51] Remove permissions tab

---
 src/ui-component/ingest/IngestMenu.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/ui-component/ingest/IngestMenu.js b/src/ui-component/ingest/IngestMenu.js
index 60276d5b..98ead736 100644
--- a/src/ui-component/ingest/IngestMenu.js
+++ b/src/ui-component/ingest/IngestMenu.js
@@ -4,7 +4,7 @@ import { useState } from 'react';
 
 import ClinicalIngestPage from 'ui-component/ingest/ClinicalIngest';
 
-const tabs = ['Permissions', 'Clinical Ingest', 'Genomic Ingest'];
+const tabs = ['Clinical Ingest', 'Genomic Ingest'];
 
 const IngestTab = styled(Tab)({
     height: '2.75em',
@@ -52,7 +52,6 @@ function IngestMenu() {
     function getPage(val) {
         if (val === 1) return <ClinicalIngestPage />;
         if (val === 2) return <ClinicalIngestPage />;
-        if (val === 3) return <ClinicalIngestPage />;
         return <ClinicalIngestPage />;
     }
 

From 45ccce171d11b1250f530075caa29f9d89cafcb5 Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Tue, 15 Aug 2023 10:57:59 -0400
Subject: [PATCH 30/51] Add navigation button

---
 src/ui-component/ingest/ClinicalIngest.js | 31 ++++++++++-------------
 src/ui-component/ingest/IngestMenu.js     | 10 ++++----
 src/ui-component/ingest/IngestTabPage.js  | 29 +++++++++++++++++++++
 3 files changed, 48 insertions(+), 22 deletions(-)
 create mode 100644 src/ui-component/ingest/IngestTabPage.js

diff --git a/src/ui-component/ingest/ClinicalIngest.js b/src/ui-component/ingest/ClinicalIngest.js
index d914facc..89bc3e91 100644
--- a/src/ui-component/ingest/ClinicalIngest.js
+++ b/src/ui-component/ingest/ClinicalIngest.js
@@ -1,18 +1,15 @@
-import { Box } from '@mui/material';
+import { Button } from '@mui/material';
+import PropTypes from 'prop-types';
 
-export default function ClinicalIngestPage() {
-    return (
-        <Box
-            sx={{
-                width: '100%',
-                height: '100%',
-                minHeight: 100,
-                borderBottomLeftRadius: '0.75em',
-                borderBottomRightRadius: '0.75em',
-                marginTop: 0,
-                border: '0.15vw #2196F3 solid',
-                borderTop: 'none'
-            }}
-        />
-    );
-}
+const ClinicalIngest = ({ setTab }) => (
+    // setTab should be a function that sets the tab to the genomic ingest page
+    <Button sx={{ position: 'absolute', right: '0.2em', bottom: '0.2em' }} onClick={setTab} variant="contained">
+        Next
+    </Button>
+);
+
+ClinicalIngest.propTypes = {
+    setTab: PropTypes.func.isRequired
+};
+
+export default ClinicalIngest;
diff --git a/src/ui-component/ingest/IngestMenu.js b/src/ui-component/ingest/IngestMenu.js
index 98ead736..78b40885 100644
--- a/src/ui-component/ingest/IngestMenu.js
+++ b/src/ui-component/ingest/IngestMenu.js
@@ -2,7 +2,8 @@ import { makeStyles, styled } from '@mui/styles';
 import { Box, Tab, Tabs } from '@mui/material';
 import { useState } from 'react';
 
-import ClinicalIngestPage from 'ui-component/ingest/ClinicalIngest';
+import IngestTabPage from 'ui-component/ingest/IngestTabPage';
+import ClinicalIngest from 'ui-component/ingest/ClinicalIngest';
 
 const tabs = ['Clinical Ingest', 'Genomic Ingest'];
 
@@ -50,9 +51,8 @@ function IngestMenu() {
     const classes = useStyles();
 
     function getPage(val) {
-        if (val === 1) return <ClinicalIngestPage />;
-        if (val === 2) return <ClinicalIngestPage />;
-        return <ClinicalIngestPage />;
+        if (val === 0) return <ClinicalIngest setTab={() => setValue(1)} />;
+        return <ClinicalIngest setTab={() => {}} />;
     }
 
     return (
@@ -71,7 +71,7 @@ function IngestMenu() {
                     <IngestTab label={name} key={name} className={idx === value ? classes.tabActive : classes.tabInactive} />
                 ))}
             </Tabs>
-            {getPage(value)}
+            <IngestTabPage> {getPage(value)} </IngestTabPage>
         </Box>
     );
 }
diff --git a/src/ui-component/ingest/IngestTabPage.js b/src/ui-component/ingest/IngestTabPage.js
new file mode 100644
index 00000000..3228fc6c
--- /dev/null
+++ b/src/ui-component/ingest/IngestTabPage.js
@@ -0,0 +1,29 @@
+import { Grid } from '@mui/material';
+import { makeStyles } from '@mui/styles';
+import PropTypes from 'prop-types';
+
+const IngestTabPage = ({ children }) => {
+    const useStyles = makeStyles({
+        ingestTabPage: {
+            position: 'relative',
+            width: '100%',
+            height: '100%',
+            minHeight: 100,
+            borderBottomLeftRadius: '0.75em',
+            borderBottomRightRadius: '0.75em',
+            marginTop: 0,
+            border: '0.15vw #2196F3 solid',
+            borderTop: 'none'
+        }
+    });
+
+    const classes = useStyles();
+
+    return <Grid className={classes.ingestTabPage}>{children}</Grid>;
+};
+
+IngestTabPage.propTypes = {
+    children: PropTypes.node
+};
+
+export default IngestTabPage;

From c43bc7403aa98ccfbbbbd37ce781d694bc91a042 Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Wed, 16 Aug 2023 17:59:13 -0400
Subject: [PATCH 31/51] Basic clinical ingest page skeleton

---
 public/index.html                         |   2 +-
 src/ui-component/DataRow.js               | 112 ++++++++++++++++++++++
 src/ui-component/ingest/ClinicalIngest.js |  92 ++++++++++++++++--
 src/ui-component/ingest/IngestTabPage.js  |   3 +-
 4 files changed, 200 insertions(+), 9 deletions(-)
 create mode 100644 src/ui-component/DataRow.js

diff --git a/public/index.html b/public/index.html
index 806160a8..d72179fa 100644
--- a/public/index.html
+++ b/public/index.html
@@ -22,7 +22,7 @@
 
         <link rel="preconnect" href="https://fonts.gstatic.com" />
         <link
-            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap&family=Catamaran:wght@400&display=swap"
             rel="stylesheet"
         />
     </head>
diff --git a/src/ui-component/DataRow.js b/src/ui-component/DataRow.js
new file mode 100644
index 00000000..8887ac27
--- /dev/null
+++ b/src/ui-component/DataRow.js
@@ -0,0 +1,112 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Box, Divider, Grid, Typography } from '@mui/material';
+import { useTheme, makeStyles } from '@mui/styles';
+
+const useStyles = makeStyles((theme) => ({
+    rowText: {
+        color: 'black'
+    },
+    container: {
+        minHeight: 40,
+        marginRight: 0
+    },
+    locked: {
+        backgroundColor: theme.palette.action.disabledBackground
+    },
+    button: {
+        // Right-aligned
+        float: 'right',
+        marginLeft: 'auto'
+    },
+    divider: {
+        borderColor: theme.palette.primary.main,
+        marginTop: '0.25em',
+        marginBottom: '0.25em'
+    },
+    dataBox: {
+        maxHeight: 'none',
+        height: 'fit-content',
+        paddingTop: '0.75em',
+        paddingBottom: '0.75em',
+        marginTop: '3em'
+    },
+    label: {
+        marginTop: '-3.5em',
+        paddingBottom: '1.75em',
+        color: 'black'
+    }
+}));
+
+function DataRow(props) {
+    const { fields, itemSize, rowWidth } = props;
+    const theme = useTheme();
+    const classes = useStyles();
+    const primaryField = fields.shift();
+
+    /* const avatarProps = locked
+        ? {
+              // If we're locked out, gray out the avatar
+              sx: { bgcolor: theme.palette.action.disabled }
+          }
+        : {}; */
+
+    return (
+        <Box
+            className={classes.dataBox}
+            sx={{
+                // These properties aren't working in useStyles for some reason...
+                border: 1,
+                borderRadius: 2,
+                boxShadow: 2,
+                borderColor: theme.palette.primary.main,
+                display: 'flex',
+                width: rowWidth
+            }}
+            pr={2}
+        >
+            <Grid container justifyContent="flex-start" alignItems="center" className={classes.container}>
+                <Grid item xs>
+                    <Typography className={classes.label} align="center">
+                        <b>{primaryField.label}</b>
+                    </Typography>
+                    <Typography align="center" variant="h6" className={classes.rowText} sx={{ fontSize: itemSize }}>
+                        {primaryField.value}
+                    </Typography>
+                </Grid>
+                {fields.map((field, idx) => (
+                    <React.Fragment key={idx}>
+                        <Divider flexItem orientation="vertical" className={classes.divider} />
+                        <Grid item xs>
+                            <Typography className={classes.label} align="center">
+                                <b>{field.label}</b>
+                            </Typography>
+                            <Typography align="center" variant="body1" className={classes.rowText} sx={{ fontSize: itemSize }}>
+                                {field.value}
+                            </Typography>
+                        </Grid>
+                    </React.Fragment>
+                ))}
+            </Grid>
+        </Box>
+    );
+}
+
+DataRow.defaultProps = {
+    itemSize: '16px',
+    rowWidth: '100%'
+};
+
+DataRow.propTypes = {
+    fields: PropTypes.arrayOf(
+        PropTypes.shape({
+            label: PropTypes.string.isRequired,
+            value: PropTypes.string.isRequired
+        })
+    ).isRequired,
+    itemSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    rowWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+
+export default DataRow;
diff --git a/src/ui-component/ingest/ClinicalIngest.js b/src/ui-component/ingest/ClinicalIngest.js
index 89bc3e91..2c701360 100644
--- a/src/ui-component/ingest/ClinicalIngest.js
+++ b/src/ui-component/ingest/ClinicalIngest.js
@@ -1,12 +1,90 @@
-import { Button } from '@mui/material';
+import { Button, Grid, TextField, Typography } from '@mui/material';
 import PropTypes from 'prop-types';
+import DataRow from 'ui-component/DataRow';
+import { makeStyles } from '@mui/styles';
 
-const ClinicalIngest = ({ setTab }) => (
-    // setTab should be a function that sets the tab to the genomic ingest page
-    <Button sx={{ position: 'absolute', right: '0.2em', bottom: '0.2em' }} onClick={setTab} variant="contained">
-        Next
-    </Button>
-);
+function makeField(lab, val) {
+    return {
+        label: lab,
+        value: val
+    };
+}
+
+const ClinicalIngest = ({ setTab }) => {
+    const dataRowFields = [
+        [makeField('Cohort', 'MOCK COHORT'), makeField('Clinical Patients', '850'), makeField('Read Access', '3')],
+        [makeField('Cohort', 'MOCK COHORT 2'), makeField('Clinical Patients', '325'), makeField('Read Access', '1')],
+        [makeField('Cohort', 'MOCK COHORT 2'), makeField('Clinical Patients', '78'), makeField('Read Access', '2')]
+    ];
+
+    const useStyles = makeStyles({
+        titleText: {
+            color: 'black',
+            fontSize: '1.5em',
+            fontFamily: 'Roboto'
+        },
+        bodyText: {
+            color: 'black',
+            fontSize: '1em',
+            fontFamily: 'Catamaran'
+        }
+    });
+    const classes = useStyles();
+
+    return (
+        // setTab should be a function that sets the tab to the genomic ingest page
+        <>
+            <Grid container direction="column" sx={{ flexGrow: 1 }} spacing={4}>
+                <Grid item>
+                    <Typography align="left" className={classes.titleText}>
+                        <b>Active cohorts</b>
+                    </Typography>
+                    <Grid direction="row" spacing={3} container>
+                        {dataRowFields.map((fields, index) => (
+                            <Grid item xs={5} key={index}>
+                                <DataRow rowWidth="100%" itemSize="0.9em" fields={fields} />
+                            </Grid>
+                        ))}
+                    </Grid>
+                </Grid>
+                <Grid item>
+                    <Typography align="left" className={classes.titleText}>
+                        <b>Choose a cohort for validation</b>
+                    </Typography>
+                    <Grid container sx={{ marginTop: '0.5em', marginLeft: '1em' }} direction="row" alignItems="center" spacing={2}>
+                        <Grid item>
+                            <Typography align="left" className={classes.bodyText}>
+                                <b>Clinical data:</b>
+                            </Typography>
+                        </Grid>
+                        <Grid item xs={4}>
+                            <TextField sx={{ width: '100%' }} id="clinical-file" variant="outlined" type="file" />
+                        </Grid>
+                    </Grid>
+                </Grid>
+                <Grid item>
+                    <Typography align="left" className={classes.titleText}>
+                        <b>Live Preview Summary</b>
+                    </Typography>
+                    <Typography sx={{ color: 'grey' }} align="left" className={classes.bodyText}>
+                        Waiting for upload...
+                    </Typography>
+                </Grid>
+                <Grid item>
+                    <Typography align="left" className={classes.titleText}>
+                        <b>Validation</b>
+                    </Typography>
+                    <Typography sx={{ color: 'grey' }} align="left" className={classes.bodyText}>
+                        Waiting for upload...
+                    </Typography>
+                </Grid>
+            </Grid>
+            <Button sx={{ position: 'absolute', right: '0.2em', bottom: '0.2em' }} onClick={setTab} variant="contained">
+                Next
+            </Button>
+        </>
+    );
+};
 
 ClinicalIngest.propTypes = {
     setTab: PropTypes.func.isRequired
diff --git a/src/ui-component/ingest/IngestTabPage.js b/src/ui-component/ingest/IngestTabPage.js
index 3228fc6c..ac18c890 100644
--- a/src/ui-component/ingest/IngestTabPage.js
+++ b/src/ui-component/ingest/IngestTabPage.js
@@ -13,7 +13,8 @@ const IngestTabPage = ({ children }) => {
             borderBottomRightRadius: '0.75em',
             marginTop: 0,
             border: '0.15vw #2196F3 solid',
-            borderTop: 'none'
+            borderTop: 'none',
+            padding: '1em'
         }
     });
 

From fd8810a5d5574da13ed4373cff93b20b8a71be8b Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Wed, 16 Aug 2023 21:48:59 -0400
Subject: [PATCH 32/51] Basic genomic ingest page skeleton

---
 src/ui-component/DataRow.js              |  2 +-
 src/ui-component/ingest/GenomicIngest.js | 74 ++++++++++++++++++++++++
 src/ui-component/ingest/IngestMenu.js    |  3 +-
 3 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 src/ui-component/ingest/GenomicIngest.js

diff --git a/src/ui-component/DataRow.js b/src/ui-component/DataRow.js
index 8887ac27..7abcf32d 100644
--- a/src/ui-component/DataRow.js
+++ b/src/ui-component/DataRow.js
@@ -34,7 +34,7 @@ const useStyles = makeStyles((theme) => ({
     },
     label: {
         marginTop: '-3.5em',
-        paddingBottom: '1.75em',
+        paddingBottom: '2em',
         color: 'black'
     }
 }));
diff --git a/src/ui-component/ingest/GenomicIngest.js b/src/ui-component/ingest/GenomicIngest.js
new file mode 100644
index 00000000..412e7fd6
--- /dev/null
+++ b/src/ui-component/ingest/GenomicIngest.js
@@ -0,0 +1,74 @@
+import { Button, Grid, TextField, Typography } from '@mui/material';
+import PropTypes from 'prop-types';
+import DataRow from 'ui-component/DataRow';
+import { makeStyles } from '@mui/styles';
+
+function makeField(lab, val) {
+    return {
+        label: lab,
+        value: val
+    };
+}
+
+const GenomicIngest = ({ beginIngest }) => {
+    const cohort = [makeField('Cohort', 'MOCK COHORT'), makeField('Clinical Patients', '850'), makeField('Read Access', '3')];
+
+    const useStyles = makeStyles({
+        titleText: {
+            color: 'black',
+            fontSize: '1.5em',
+            fontFamily: 'Roboto'
+        },
+        bodyText: {
+            color: 'black',
+            fontSize: '1em',
+            fontFamily: 'Catamaran'
+        },
+        ingestButton: {
+            backgroundColor: '#37CA50',
+            width: '7em',
+            height: '3em'
+        }
+    });
+    const classes = useStyles();
+
+    return (
+        // setTab should be a function that sets the tab to the genomic ingest page
+        <>
+            <Grid container direction="column" sx={{ flexGrow: 1 }} spacing={4}>
+                <Grid item>
+                    <Typography align="left" className={classes.titleText}>
+                        <b>Cohort for ingestion</b>
+                    </Typography>
+                    <DataRow rowWidth="100%" itemSize="0.9em" fields={cohort} />
+                </Grid>
+                <Grid item>
+                    <Typography align="left" className={classes.titleText}>
+                        <b>Upload genomic sample info</b>
+                    </Typography>
+                    <Grid container sx={{ marginTop: '0.5em', marginLeft: '1em' }} direction="row" alignItems="center" spacing={2}>
+                        <Grid item>
+                            <Typography align="left" className={classes.bodyText}>
+                                <b>Genomic data:</b>
+                            </Typography>
+                        </Grid>
+                        <Grid item xs={4}>
+                            <TextField sx={{ width: '100%' }} id="clinical-file" variant="outlined" type="file" />
+                        </Grid>
+                    </Grid>
+                </Grid>
+                <Grid item align="center">
+                    <Button className={classes.ingestButton} onClick={beginIngest} variant="contained">
+                        Ingest
+                    </Button>
+                </Grid>
+            </Grid>
+        </>
+    );
+};
+
+GenomicIngest.propTypes = {
+    beginIngest: PropTypes.func.isRequired
+};
+
+export default GenomicIngest;
diff --git a/src/ui-component/ingest/IngestMenu.js b/src/ui-component/ingest/IngestMenu.js
index 78b40885..ebd62848 100644
--- a/src/ui-component/ingest/IngestMenu.js
+++ b/src/ui-component/ingest/IngestMenu.js
@@ -4,6 +4,7 @@ import { useState } from 'react';
 
 import IngestTabPage from 'ui-component/ingest/IngestTabPage';
 import ClinicalIngest from 'ui-component/ingest/ClinicalIngest';
+import GenomicIngest from 'ui-component/ingest/GenomicIngest';
 
 const tabs = ['Clinical Ingest', 'Genomic Ingest'];
 
@@ -52,7 +53,7 @@ function IngestMenu() {
 
     function getPage(val) {
         if (val === 0) return <ClinicalIngest setTab={() => setValue(1)} />;
-        return <ClinicalIngest setTab={() => {}} />;
+        return <GenomicIngest beginIngest={() => {}} />;
     }
 
     return (

From 7e5438ee3686672571b42a4ebe25b65d6808502e Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Wed, 16 Aug 2023 21:54:33 -0400
Subject: [PATCH 33/51] File upload only accept JSON

---
 src/ui-component/ingest/ClinicalIngest.js | 8 +++++++-
 src/ui-component/ingest/GenomicIngest.js  | 9 +++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/ui-component/ingest/ClinicalIngest.js b/src/ui-component/ingest/ClinicalIngest.js
index 2c701360..32122feb 100644
--- a/src/ui-component/ingest/ClinicalIngest.js
+++ b/src/ui-component/ingest/ClinicalIngest.js
@@ -58,7 +58,13 @@ const ClinicalIngest = ({ setTab }) => {
                             </Typography>
                         </Grid>
                         <Grid item xs={4}>
-                            <TextField sx={{ width: '100%' }} id="clinical-file" variant="outlined" type="file" />
+                            <TextField
+                                sx={{ width: '100%' }}
+                                id="clinical-file"
+                                variant="outlined"
+                                type="file"
+                                inputProps={{ accept: 'application/json' }}
+                            />
                         </Grid>
                     </Grid>
                 </Grid>
diff --git a/src/ui-component/ingest/GenomicIngest.js b/src/ui-component/ingest/GenomicIngest.js
index 412e7fd6..114b722f 100644
--- a/src/ui-component/ingest/GenomicIngest.js
+++ b/src/ui-component/ingest/GenomicIngest.js
@@ -33,7 +33,6 @@ const GenomicIngest = ({ beginIngest }) => {
     const classes = useStyles();
 
     return (
-        // setTab should be a function that sets the tab to the genomic ingest page
         <>
             <Grid container direction="column" sx={{ flexGrow: 1 }} spacing={4}>
                 <Grid item>
@@ -53,7 +52,13 @@ const GenomicIngest = ({ beginIngest }) => {
                             </Typography>
                         </Grid>
                         <Grid item xs={4}>
-                            <TextField sx={{ width: '100%' }} id="clinical-file" variant="outlined" type="file" />
+                            <TextField
+                                sx={{ width: '100%' }}
+                                id="genomic-file"
+                                variant="outlined"
+                                type="file"
+                                inputProps={{ accept: 'application/json' }}
+                            />
                         </Grid>
                     </Grid>
                 </Grid>

From f158dd7b9f1d4066aefda45491105a802223bf57 Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Thu, 17 Aug 2023 13:51:18 -0400
Subject: [PATCH 34/51] Persistent file dialogs

---
 src/ui-component/DataRow.js               |  9 ++++++-
 src/ui-component/PersistentFile.js        | 32 +++++++++++++++++++++++
 src/ui-component/ingest/ClinicalIngest.js | 26 +++++-------------
 src/ui-component/ingest/GenomicIngest.js  | 24 +++++------------
 src/ui-component/ingest/IngestMenu.js     | 10 +++++--
 5 files changed, 61 insertions(+), 40 deletions(-)
 create mode 100644 src/ui-component/PersistentFile.js

diff --git a/src/ui-component/DataRow.js b/src/ui-component/DataRow.js
index 7abcf32d..068540c1 100644
--- a/src/ui-component/DataRow.js
+++ b/src/ui-component/DataRow.js
@@ -4,6 +4,13 @@ import PropTypes from 'prop-types';
 import { Box, Divider, Grid, Typography } from '@mui/material';
 import { useTheme, makeStyles } from '@mui/styles';
 
+function makeField(lab, val) {
+    return {
+        label: lab,
+        value: val
+    };
+}
+
 const useStyles = makeStyles((theme) => ({
     rowText: {
         color: 'black'
@@ -109,4 +116,4 @@ DataRow.propTypes = {
     rowWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 
-export default DataRow;
+export { makeField, DataRow };
diff --git a/src/ui-component/PersistentFile.js b/src/ui-component/PersistentFile.js
new file mode 100644
index 00000000..aa12401a
--- /dev/null
+++ b/src/ui-component/PersistentFile.js
@@ -0,0 +1,32 @@
+import { useEffect, useRef } from 'react';
+import { TextField } from '@mui/material';
+import PropTypes from 'prop-types';
+
+const PersistentFile = ({ file, setFile }) => {
+    const fileRef = useRef(null);
+
+    useEffect(() => {
+        if (file && fileRef.current) {
+            const dataTransfer = new DataTransfer();
+            dataTransfer.items.add(file);
+            fileRef.current.files = dataTransfer.files;
+        }
+    });
+
+    return (
+        <TextField
+            sx={{ width: '100%' }}
+            variant="outlined"
+            type="file"
+            inputProps={{ accept: 'application/json', ref: fileRef }}
+            onChange={(event) => setFile(event.target.files[0])}
+        />
+    );
+};
+
+PersistentFile.propTypes = {
+    file: PropTypes.instanceOf(File).isRequired,
+    setFile: PropTypes.func.isRequired
+};
+
+export default PersistentFile;
diff --git a/src/ui-component/ingest/ClinicalIngest.js b/src/ui-component/ingest/ClinicalIngest.js
index 32122feb..a068cd1e 100644
--- a/src/ui-component/ingest/ClinicalIngest.js
+++ b/src/ui-component/ingest/ClinicalIngest.js
@@ -1,16 +1,10 @@
-import { Button, Grid, TextField, Typography } from '@mui/material';
+import { Button, Grid, Typography } from '@mui/material';
 import PropTypes from 'prop-types';
-import DataRow from 'ui-component/DataRow';
+import { makeField, DataRow } from 'ui-component/DataRow';
 import { makeStyles } from '@mui/styles';
 
-function makeField(lab, val) {
-    return {
-        label: lab,
-        value: val
-    };
-}
-
-const ClinicalIngest = ({ setTab }) => {
+const ClinicalIngest = ({ setTab, fileUpload }) => {
+    // setTab should be a function that sets the tab to the genomic ingest page
     const dataRowFields = [
         [makeField('Cohort', 'MOCK COHORT'), makeField('Clinical Patients', '850'), makeField('Read Access', '3')],
         [makeField('Cohort', 'MOCK COHORT 2'), makeField('Clinical Patients', '325'), makeField('Read Access', '1')],
@@ -32,7 +26,6 @@ const ClinicalIngest = ({ setTab }) => {
     const classes = useStyles();
 
     return (
-        // setTab should be a function that sets the tab to the genomic ingest page
         <>
             <Grid container direction="column" sx={{ flexGrow: 1 }} spacing={4}>
                 <Grid item>
@@ -58,13 +51,7 @@ const ClinicalIngest = ({ setTab }) => {
                             </Typography>
                         </Grid>
                         <Grid item xs={4}>
-                            <TextField
-                                sx={{ width: '100%' }}
-                                id="clinical-file"
-                                variant="outlined"
-                                type="file"
-                                inputProps={{ accept: 'application/json' }}
-                            />
+                            {fileUpload}
                         </Grid>
                     </Grid>
                 </Grid>
@@ -93,7 +80,8 @@ const ClinicalIngest = ({ setTab }) => {
 };
 
 ClinicalIngest.propTypes = {
-    setTab: PropTypes.func.isRequired
+    setTab: PropTypes.func.isRequired,
+    fileUpload: PropTypes.element
 };
 
 export default ClinicalIngest;
diff --git a/src/ui-component/ingest/GenomicIngest.js b/src/ui-component/ingest/GenomicIngest.js
index 114b722f..6a846abc 100644
--- a/src/ui-component/ingest/GenomicIngest.js
+++ b/src/ui-component/ingest/GenomicIngest.js
@@ -1,16 +1,9 @@
-import { Button, Grid, TextField, Typography } from '@mui/material';
+import { Button, Grid, Typography } from '@mui/material';
 import PropTypes from 'prop-types';
-import DataRow from 'ui-component/DataRow';
+import { makeField, DataRow } from 'ui-component/DataRow';
 import { makeStyles } from '@mui/styles';
 
-function makeField(lab, val) {
-    return {
-        label: lab,
-        value: val
-    };
-}
-
-const GenomicIngest = ({ beginIngest }) => {
+const GenomicIngest = ({ beginIngest, fileUpload }) => {
     const cohort = [makeField('Cohort', 'MOCK COHORT'), makeField('Clinical Patients', '850'), makeField('Read Access', '3')];
 
     const useStyles = makeStyles({
@@ -52,13 +45,7 @@ const GenomicIngest = ({ beginIngest }) => {
                             </Typography>
                         </Grid>
                         <Grid item xs={4}>
-                            <TextField
-                                sx={{ width: '100%' }}
-                                id="genomic-file"
-                                variant="outlined"
-                                type="file"
-                                inputProps={{ accept: 'application/json' }}
-                            />
+                            {fileUpload}
                         </Grid>
                     </Grid>
                 </Grid>
@@ -73,7 +60,8 @@ const GenomicIngest = ({ beginIngest }) => {
 };
 
 GenomicIngest.propTypes = {
-    beginIngest: PropTypes.func.isRequired
+    beginIngest: PropTypes.func.isRequired,
+    fileUpload: PropTypes.element
 };
 
 export default GenomicIngest;
diff --git a/src/ui-component/ingest/IngestMenu.js b/src/ui-component/ingest/IngestMenu.js
index ebd62848..7b505b32 100644
--- a/src/ui-component/ingest/IngestMenu.js
+++ b/src/ui-component/ingest/IngestMenu.js
@@ -5,6 +5,7 @@ import { useState } from 'react';
 import IngestTabPage from 'ui-component/ingest/IngestTabPage';
 import ClinicalIngest from 'ui-component/ingest/ClinicalIngest';
 import GenomicIngest from 'ui-component/ingest/GenomicIngest';
+import PersistentFile from 'ui-component/PersistentFile';
 
 const tabs = ['Clinical Ingest', 'Genomic Ingest'];
 
@@ -32,6 +33,8 @@ const IngestTab = styled(Tab)({
 
 function IngestMenu() {
     const [value, setValue] = useState(0);
+    const [clinicalFile, setClinicalFile] = useState(undefined);
+    const [genomicFile, setGenomicFile] = useState(undefined);
     const setTab = (event, val) => {
         setValue(val);
     };
@@ -52,8 +55,11 @@ function IngestMenu() {
     const classes = useStyles();
 
     function getPage(val) {
-        if (val === 0) return <ClinicalIngest setTab={() => setValue(1)} />;
-        return <GenomicIngest beginIngest={() => {}} />;
+        if (val === 0)
+            return (
+                <ClinicalIngest setTab={() => setValue(1)} fileUpload={<PersistentFile file={clinicalFile} setFile={setClinicalFile} />} />
+            );
+        return <GenomicIngest beginIngest={() => {}} fileUpload={<PersistentFile file={genomicFile} setFile={setGenomicFile} />} />;
     }
 
     return (

From 866b75c716806e514ca8e9347852980a4cedb903 Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Fri, 18 Aug 2023 11:31:33 -0400
Subject: [PATCH 35/51] Validate JSON upload

---
 src/ui-component/PersistentFile.js        | 55 ++++++++++++++++++-----
 src/ui-component/ingest/ClinicalIngest.js | 30 +++++++------
 src/ui-component/ingest/IngestMenu.js     |  2 +-
 src/ui-component/ingest/IngestTabPage.js  |  2 +-
 4 files changed, 61 insertions(+), 28 deletions(-)

diff --git a/src/ui-component/PersistentFile.js b/src/ui-component/PersistentFile.js
index aa12401a..04759db2 100644
--- a/src/ui-component/PersistentFile.js
+++ b/src/ui-component/PersistentFile.js
@@ -1,10 +1,33 @@
-import { useEffect, useRef } from 'react';
-import { TextField } from '@mui/material';
+import { useEffect, useRef, useState } from 'react';
+import { Alert, TextField } from '@mui/material';
 import PropTypes from 'prop-types';
 
-const PersistentFile = ({ file, setFile }) => {
+const PersistentFile = ({ file, setFile, validate = true }) => {
+    // A JSON file input dialog which can maintain its state after unmounting. Optionally validates before upload.
+    const [error, setError] = useState(null);
     const fileRef = useRef(null);
 
+    async function loadFile(file) {
+        try {
+            if (validate) {
+                const result = await file.text().then((data) => JSON.parse(data) && data !== null && data !== undefined);
+                if (!result) {
+                    console.log(`Error parsing uploaded JSON file ${file.name}`);
+                    setError(`Error parsing uploaded JSON "${file.name}`);
+                    return;
+                }
+            }
+        } catch (error) {
+            console.log(`Error parsing JSON ${file.name}`);
+            console.log(error);
+            setError(`Error parsing JSON "${file.name}": ${error.message}`);
+            fileRef.current.value = '';
+            return;
+        }
+        setFile(file);
+        setError(null);
+    }
+
     useEffect(() => {
         if (file && fileRef.current) {
             const dataTransfer = new DataTransfer();
@@ -14,19 +37,27 @@ const PersistentFile = ({ file, setFile }) => {
     });
 
     return (
-        <TextField
-            sx={{ width: '100%' }}
-            variant="outlined"
-            type="file"
-            inputProps={{ accept: 'application/json', ref: fileRef }}
-            onChange={(event) => setFile(event.target.files[0])}
-        />
+        <div>
+            <TextField
+                sx={{ width: '100%' }}
+                variant="outlined"
+                type="file"
+                inputProps={{ accept: 'application/json', ref: fileRef }}
+                onChange={(event) => loadFile(event.target.files[0])}
+            />
+            {error !== null && (
+                <Alert sx={{ marginBottom: 0 }} severity="error">
+                    {error}
+                </Alert>
+            )}
+        </div>
     );
 };
 
 PersistentFile.propTypes = {
-    file: PropTypes.instanceOf(File).isRequired,
-    setFile: PropTypes.func.isRequired
+    setFile: PropTypes.func.isRequired,
+    file: PropTypes.instanceOf(File),
+    validate: PropTypes.bool
 };
 
 export default PersistentFile;
diff --git a/src/ui-component/ingest/ClinicalIngest.js b/src/ui-component/ingest/ClinicalIngest.js
index a068cd1e..e6019903 100644
--- a/src/ui-component/ingest/ClinicalIngest.js
+++ b/src/ui-component/ingest/ClinicalIngest.js
@@ -27,7 +27,7 @@ const ClinicalIngest = ({ setTab, fileUpload }) => {
 
     return (
         <>
-            <Grid container direction="column" sx={{ flexGrow: 1 }} spacing={4}>
+            <Grid container direction="column" spacing={4}>
                 <Grid item>
                     <Typography align="left" className={classes.titleText}>
                         <b>Active cohorts</b>
@@ -40,20 +40,22 @@ const ClinicalIngest = ({ setTab, fileUpload }) => {
                         ))}
                     </Grid>
                 </Grid>
-                <Grid item>
-                    <Typography align="left" className={classes.titleText}>
-                        <b>Choose a cohort for validation</b>
-                    </Typography>
-                    <Grid container sx={{ marginTop: '0.5em', marginLeft: '1em' }} direction="row" alignItems="center" spacing={2}>
-                        <Grid item>
-                            <Typography align="left" className={classes.bodyText}>
-                                <b>Clinical data:</b>
-                            </Typography>
-                        </Grid>
-                        <Grid item xs={4}>
-                            {fileUpload}
+                <Grid item xs={2} md={2} sm={2}>
+                    <div>
+                        <Typography align="left" className={classes.titleText}>
+                            <b>Choose a cohort for validation</b>
+                        </Typography>
+                        <Grid container sx={{ marginTop: '0.5em', marginLeft: '1em' }} direction="row" alignItems="center" spacing={2}>
+                            <Grid item>
+                                <Typography align="left" className={classes.bodyText}>
+                                    <b>Clinical data:</b>
+                                </Typography>
+                            </Grid>
+                            <Grid item xs={4}>
+                                {fileUpload}
+                            </Grid>
                         </Grid>
-                    </Grid>
+                    </div>
                 </Grid>
                 <Grid item>
                     <Typography align="left" className={classes.titleText}>
diff --git a/src/ui-component/ingest/IngestMenu.js b/src/ui-component/ingest/IngestMenu.js
index 7b505b32..72085933 100644
--- a/src/ui-component/ingest/IngestMenu.js
+++ b/src/ui-component/ingest/IngestMenu.js
@@ -41,7 +41,7 @@ function IngestMenu() {
 
     const useStyles = makeStyles({
         tabActive: {
-            border: '0.15vw #2196F3 solid',
+            border: '0.125vw #2196F3 solid',
             borderBottom: 'none',
             background: '#FFFFFF'
         },
diff --git a/src/ui-component/ingest/IngestTabPage.js b/src/ui-component/ingest/IngestTabPage.js
index ac18c890..edf7425b 100644
--- a/src/ui-component/ingest/IngestTabPage.js
+++ b/src/ui-component/ingest/IngestTabPage.js
@@ -12,7 +12,7 @@ const IngestTabPage = ({ children }) => {
             borderBottomLeftRadius: '0.75em',
             borderBottomRightRadius: '0.75em',
             marginTop: 0,
-            border: '0.15vw #2196F3 solid',
+            border: '0.125vw #2196F3 solid',
             borderTop: 'none',
             padding: '1em'
         }

From ece85b909fea1aa71845469205ed9712f2fa8f27 Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Fri, 18 Aug 2023 12:09:51 -0400
Subject: [PATCH 36/51] File upload extra height fix

---
 src/ui-component/PersistentFile.js        | 4 ++--
 src/ui-component/ingest/ClinicalIngest.js | 2 +-
 src/ui-component/ingest/GenomicIngest.js  | 6 ++----
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/ui-component/PersistentFile.js b/src/ui-component/PersistentFile.js
index 04759db2..81d5da10 100644
--- a/src/ui-component/PersistentFile.js
+++ b/src/ui-component/PersistentFile.js
@@ -37,7 +37,7 @@ const PersistentFile = ({ file, setFile, validate = true }) => {
     });
 
     return (
-        <div>
+        <>
             <TextField
                 sx={{ width: '100%' }}
                 variant="outlined"
@@ -50,7 +50,7 @@ const PersistentFile = ({ file, setFile, validate = true }) => {
                     {error}
                 </Alert>
             )}
-        </div>
+        </>
     );
 };
 
diff --git a/src/ui-component/ingest/ClinicalIngest.js b/src/ui-component/ingest/ClinicalIngest.js
index e6019903..46c4fb4e 100644
--- a/src/ui-component/ingest/ClinicalIngest.js
+++ b/src/ui-component/ingest/ClinicalIngest.js
@@ -40,7 +40,7 @@ const ClinicalIngest = ({ setTab, fileUpload }) => {
                         ))}
                     </Grid>
                 </Grid>
-                <Grid item xs={2} md={2} sm={2}>
+                <Grid item sx={{ width: '100%' }}>
                     <div>
                         <Typography align="left" className={classes.titleText}>
                             <b>Choose a cohort for validation</b>
diff --git a/src/ui-component/ingest/GenomicIngest.js b/src/ui-component/ingest/GenomicIngest.js
index 6a846abc..87c162bf 100644
--- a/src/ui-component/ingest/GenomicIngest.js
+++ b/src/ui-component/ingest/GenomicIngest.js
@@ -34,7 +34,7 @@ const GenomicIngest = ({ beginIngest, fileUpload }) => {
                     </Typography>
                     <DataRow rowWidth="100%" itemSize="0.9em" fields={cohort} />
                 </Grid>
-                <Grid item>
+                <Grid item width="100%">
                     <Typography align="left" className={classes.titleText}>
                         <b>Upload genomic sample info</b>
                     </Typography>
@@ -44,9 +44,7 @@ const GenomicIngest = ({ beginIngest, fileUpload }) => {
                                 <b>Genomic data:</b>
                             </Typography>
                         </Grid>
-                        <Grid item xs={4}>
-                            {fileUpload}
-                        </Grid>
+                        <Grid item>{fileUpload}</Grid>
                     </Grid>
                 </Grid>
                 <Grid item align="center">

From 43f4d09962ccbd32ecf9eca8ed877f433585ef47 Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Fri, 18 Aug 2023 13:20:26 -0400
Subject: [PATCH 37/51] Cohort preview on upload

---
 src/ui-component/PersistentFile.js        | 25 ++++++++++-------------
 src/ui-component/ingest/ClinicalIngest.js | 25 +++++++++++++++++------
 src/ui-component/ingest/IngestMenu.js     | 15 +++++++++++++-
 3 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/src/ui-component/PersistentFile.js b/src/ui-component/PersistentFile.js
index 81d5da10..b9211bd2 100644
--- a/src/ui-component/PersistentFile.js
+++ b/src/ui-component/PersistentFile.js
@@ -2,30 +2,28 @@ import { useEffect, useRef, useState } from 'react';
 import { Alert, TextField } from '@mui/material';
 import PropTypes from 'prop-types';
 
-const PersistentFile = ({ file, setFile, validate = true }) => {
+const PersistentFile = ({ file, fileLoader }) => {
     // A JSON file input dialog which can maintain its state after unmounting. Optionally validates before upload.
+    // Calls "fileLoader" with the file object as argument #1 and the JSON data as argument #2.
     const [error, setError] = useState(null);
     const fileRef = useRef(null);
 
     async function loadFile(file) {
         try {
-            if (validate) {
-                const result = await file.text().then((data) => JSON.parse(data) && data !== null && data !== undefined);
-                if (!result) {
-                    console.log(`Error parsing uploaded JSON file ${file.name}`);
-                    setError(`Error parsing uploaded JSON "${file.name}`);
-                    return;
-                }
+            const data = await file.text().then((data) => JSON.parse(data));
+            if (!(data || data !== undefined)) {
+                console.log(`Error parsing uploaded JSON file ${file.name}`);
+                setError(`Error parsing uploaded JSON "${file.name}`);
+                return;
             }
+            fileLoader(file, data);
+            setError(null);
         } catch (error) {
             console.log(`Error parsing JSON ${file.name}`);
             console.log(error);
             setError(`Error parsing JSON "${file.name}": ${error.message}`);
             fileRef.current.value = '';
-            return;
         }
-        setFile(file);
-        setError(null);
     }
 
     useEffect(() => {
@@ -55,9 +53,8 @@ const PersistentFile = ({ file, setFile, validate = true }) => {
 };
 
 PersistentFile.propTypes = {
-    setFile: PropTypes.func.isRequired,
-    file: PropTypes.instanceOf(File),
-    validate: PropTypes.bool
+    fileLoader: PropTypes.func.isRequired,
+    file: PropTypes.instanceOf(File)
 };
 
 export default PersistentFile;
diff --git a/src/ui-component/ingest/ClinicalIngest.js b/src/ui-component/ingest/ClinicalIngest.js
index 46c4fb4e..17d9ae71 100644
--- a/src/ui-component/ingest/ClinicalIngest.js
+++ b/src/ui-component/ingest/ClinicalIngest.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { makeField, DataRow } from 'ui-component/DataRow';
 import { makeStyles } from '@mui/styles';
 
-const ClinicalIngest = ({ setTab, fileUpload }) => {
+const ClinicalIngest = ({ setTab, fileUpload, clinicalData }) => {
     // setTab should be a function that sets the tab to the genomic ingest page
     const dataRowFields = [
         [makeField('Cohort', 'MOCK COHORT'), makeField('Clinical Patients', '850'), makeField('Read Access', '3')],
@@ -61,16 +61,28 @@ const ClinicalIngest = ({ setTab, fileUpload }) => {
                     <Typography align="left" className={classes.titleText}>
                         <b>Live Preview Summary</b>
                     </Typography>
-                    <Typography sx={{ color: 'grey' }} align="left" className={classes.bodyText}>
-                        Waiting for upload...
-                    </Typography>
+                    {clinicalData === undefined ? (
+                        <Typography sx={{ color: 'grey' }} align="left" className={classes.bodyText}>
+                            Waiting for upload...
+                        </Typography>
+                    ) : (
+                        <DataRow
+                            rowWidth="100%"
+                            itemSize="0.9em"
+                            fields={[
+                                makeField('Cohort', clinicalData.donors[0].program_id),
+                                makeField('Clinical Patients', clinicalData.donors.length),
+                                makeField('Read Access', '1')
+                            ]}
+                        />
+                    )}
                 </Grid>
                 <Grid item>
                     <Typography align="left" className={classes.titleText}>
                         <b>Validation</b>
                     </Typography>
                     <Typography sx={{ color: 'grey' }} align="left" className={classes.bodyText}>
-                        Waiting for upload...
+                        Waiting for validation...
                     </Typography>
                 </Grid>
             </Grid>
@@ -83,7 +95,8 @@ const ClinicalIngest = ({ setTab, fileUpload }) => {
 
 ClinicalIngest.propTypes = {
     setTab: PropTypes.func.isRequired,
-    fileUpload: PropTypes.element
+    fileUpload: PropTypes.element,
+    clinicalData: PropTypes.object
 };
 
 export default ClinicalIngest;
diff --git a/src/ui-component/ingest/IngestMenu.js b/src/ui-component/ingest/IngestMenu.js
index 72085933..433f491d 100644
--- a/src/ui-component/ingest/IngestMenu.js
+++ b/src/ui-component/ingest/IngestMenu.js
@@ -34,6 +34,7 @@ const IngestTab = styled(Tab)({
 function IngestMenu() {
     const [value, setValue] = useState(0);
     const [clinicalFile, setClinicalFile] = useState(undefined);
+    const [clinicalData, setClinicalData] = useState(undefined);
     const [genomicFile, setGenomicFile] = useState(undefined);
     const setTab = (event, val) => {
         setValue(val);
@@ -54,10 +55,22 @@ function IngestMenu() {
 
     const classes = useStyles();
 
+    function loadClinicalFile(file, data) {
+        if (!('donors' in data && Array.isArray(data.donors))) {
+            throw Error('Donors key not found in clinical file');
+        }
+        setClinicalData(data);
+        setClinicalFile(file);
+    }
+
     function getPage(val) {
         if (val === 0)
             return (
-                <ClinicalIngest setTab={() => setValue(1)} fileUpload={<PersistentFile file={clinicalFile} setFile={setClinicalFile} />} />
+                <ClinicalIngest
+                    setTab={() => setValue(1)}
+                    fileUpload={<PersistentFile file={clinicalFile} fileLoader={(file, data) => loadClinicalFile(file, data)} />}
+                    clinicalData={clinicalData}
+                />
             );
         return <GenomicIngest beginIngest={() => {}} fileUpload={<PersistentFile file={genomicFile} setFile={setGenomicFile} />} />;
     }

From 1facc8e8008fe9b11a32010bf678d4f220b5428a Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Fri, 18 Aug 2023 14:06:39 -0400
Subject: [PATCH 38/51] Disable genomic ingest if clinical not finished

---
 src/ui-component/ingest/ClinicalIngest.js | 26 ++++++++++++++++++++---
 src/ui-component/ingest/IngestMenu.js     | 14 ++++++------
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/ui-component/ingest/ClinicalIngest.js b/src/ui-component/ingest/ClinicalIngest.js
index 17d9ae71..7dc32a8d 100644
--- a/src/ui-component/ingest/ClinicalIngest.js
+++ b/src/ui-component/ingest/ClinicalIngest.js
@@ -21,6 +21,20 @@ const ClinicalIngest = ({ setTab, fileUpload, clinicalData }) => {
             color: 'black',
             fontSize: '1em',
             fontFamily: 'Catamaran'
+        },
+        buttonEnabled: {
+            position: 'absolute',
+            right: '0.2em',
+            bottom: '0.2em'
+        },
+        buttonDisabled: {
+            position: 'absolute',
+            right: '0.2em',
+            bottom: '0.2em',
+            backgroundColor: 'grey',
+            '&:hover': {
+                backgroundColor: 'grey'
+            }
         }
     });
     const classes = useStyles();
@@ -86,9 +100,15 @@ const ClinicalIngest = ({ setTab, fileUpload, clinicalData }) => {
                     </Typography>
                 </Grid>
             </Grid>
-            <Button sx={{ position: 'absolute', right: '0.2em', bottom: '0.2em' }} onClick={setTab} variant="contained">
-                Next
-            </Button>
+            {clinicalData === undefined ? (
+                <Button className={classes.buttonDisabled} variant="contained">
+                    Next
+                </Button>
+            ) : (
+                <Button className={classes.buttonEnabled} onClick={setTab} variant="contained">
+                    Next
+                </Button>
+            )}
         </>
     );
 };
diff --git a/src/ui-component/ingest/IngestMenu.js b/src/ui-component/ingest/IngestMenu.js
index 433f491d..8d704f5b 100644
--- a/src/ui-component/ingest/IngestMenu.js
+++ b/src/ui-component/ingest/IngestMenu.js
@@ -7,8 +7,6 @@ import ClinicalIngest from 'ui-component/ingest/ClinicalIngest';
 import GenomicIngest from 'ui-component/ingest/GenomicIngest';
 import PersistentFile from 'ui-component/PersistentFile';
 
-const tabs = ['Clinical Ingest', 'Genomic Ingest'];
-
 const IngestTab = styled(Tab)({
     height: '2.75em',
     paddingLeft: '0.77em',
@@ -72,7 +70,7 @@ function IngestMenu() {
                     clinicalData={clinicalData}
                 />
             );
-        return <GenomicIngest beginIngest={() => {}} fileUpload={<PersistentFile file={genomicFile} setFile={setGenomicFile} />} />;
+        return <GenomicIngest beginIngest={() => {}} fileUpload={<PersistentFile file={genomicFile} fileLoader={setGenomicFile} />} />;
     }
 
     return (
@@ -87,9 +85,13 @@ function IngestMenu() {
                 }}
                 centered
             >
-                {tabs.map((name, idx) => (
-                    <IngestTab label={name} key={name} className={idx === value ? classes.tabActive : classes.tabInactive} />
-                ))}
+                <IngestTab label="Clinical Ingest" key={0} className={value === 0 ? classes.tabActive : classes.tabInactive} />
+                <IngestTab
+                    label="Genomic Ingest"
+                    key={0}
+                    className={value === 1 ? classes.tabActive : classes.tabInactive}
+                    disabled={clinicalData === undefined}
+                />
             </Tabs>
             <IngestTabPage> {getPage(value)} </IngestTabPage>
         </Box>

From 664ca4ce3c9ab62b4207bccf6516a172c41bafbd Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Fri, 18 Aug 2023 14:20:22 -0400
Subject: [PATCH 39/51] Genomic file validation

---
 src/ui-component/ingest/GenomicIngest.js | 24 ++++++++++++++++++++----
 src/ui-component/ingest/IngestMenu.js    | 17 ++++++++++++++++-
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/ui-component/ingest/GenomicIngest.js b/src/ui-component/ingest/GenomicIngest.js
index 87c162bf..e3ecaac8 100644
--- a/src/ui-component/ingest/GenomicIngest.js
+++ b/src/ui-component/ingest/GenomicIngest.js
@@ -3,8 +3,12 @@ import PropTypes from 'prop-types';
 import { makeField, DataRow } from 'ui-component/DataRow';
 import { makeStyles } from '@mui/styles';
 
-const GenomicIngest = ({ beginIngest, fileUpload }) => {
-    const cohort = [makeField('Cohort', 'MOCK COHORT'), makeField('Clinical Patients', '850'), makeField('Read Access', '3')];
+const GenomicIngest = ({ beginIngest, fileUpload, clinicalData, genomicData }) => {
+    const cohort = [
+        makeField('Cohort', clinicalData.donors[0].program_id),
+        makeField('Clinical Patients', clinicalData.donors.length),
+        makeField('Read Access', '1')
+    ];
 
     const useStyles = makeStyles({
         titleText: {
@@ -21,6 +25,12 @@ const GenomicIngest = ({ beginIngest, fileUpload }) => {
             backgroundColor: '#37CA50',
             width: '7em',
             height: '3em'
+        },
+        ingestButtonDisabled: {
+            backgroundColor: 'grey',
+            '&:hover': {
+                backgroundColor: 'grey'
+            }
         }
     });
     const classes = useStyles();
@@ -48,7 +58,11 @@ const GenomicIngest = ({ beginIngest, fileUpload }) => {
                     </Grid>
                 </Grid>
                 <Grid item align="center">
-                    <Button className={classes.ingestButton} onClick={beginIngest} variant="contained">
+                    <Button
+                        className={classes.ingestButton + (genomicData === undefined ? ` ${classes.ingestButtonDisabled}` : '')}
+                        onClick={beginIngest}
+                        variant="contained"
+                    >
                         Ingest
                     </Button>
                 </Grid>
@@ -59,7 +73,9 @@ const GenomicIngest = ({ beginIngest, fileUpload }) => {
 
 GenomicIngest.propTypes = {
     beginIngest: PropTypes.func.isRequired,
-    fileUpload: PropTypes.element
+    fileUpload: PropTypes.element,
+    clinicalData: PropTypes.object,
+    genomicData: PropTypes.object
 };
 
 export default GenomicIngest;
diff --git a/src/ui-component/ingest/IngestMenu.js b/src/ui-component/ingest/IngestMenu.js
index 8d704f5b..67d099ff 100644
--- a/src/ui-component/ingest/IngestMenu.js
+++ b/src/ui-component/ingest/IngestMenu.js
@@ -33,6 +33,7 @@ function IngestMenu() {
     const [value, setValue] = useState(0);
     const [clinicalFile, setClinicalFile] = useState(undefined);
     const [clinicalData, setClinicalData] = useState(undefined);
+    const [genomicData, setGenomicData] = useState(undefined);
     const [genomicFile, setGenomicFile] = useState(undefined);
     const setTab = (event, val) => {
         setValue(val);
@@ -60,6 +61,13 @@ function IngestMenu() {
         setClinicalData(data);
         setClinicalFile(file);
     }
+    function loadGenomicFile(file, data) {
+        if (!('donors' in data && Array.isArray(data.donors))) {
+            throw Error('Donors key not found in clinical file');
+        }
+        setGenomicData(data);
+        setGenomicFile(file);
+    }
 
     function getPage(val) {
         if (val === 0)
@@ -70,7 +78,14 @@ function IngestMenu() {
                     clinicalData={clinicalData}
                 />
             );
-        return <GenomicIngest beginIngest={() => {}} fileUpload={<PersistentFile file={genomicFile} fileLoader={setGenomicFile} />} />;
+        return (
+            <GenomicIngest
+                beginIngest={() => {}}
+                fileUpload={<PersistentFile file={genomicFile} fileLoader={(file, data) => loadGenomicFile(file, data)} />}
+                clinicalData={clinicalData}
+                genomicData={genomicData}
+            />
+        );
     }
 
     return (

From 2213a1cec86b7e1334089d55784bb07f4ffc674b Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Mon, 21 Aug 2023 12:20:46 -0400
Subject: [PATCH 40/51] Display cohorts from Katsu

---
 src/ui-component/ingest/ClinicalIngest.js | 55 +++++++++++++++++------
 1 file changed, 42 insertions(+), 13 deletions(-)

diff --git a/src/ui-component/ingest/ClinicalIngest.js b/src/ui-component/ingest/ClinicalIngest.js
index 7dc32a8d..20cf8ab1 100644
--- a/src/ui-component/ingest/ClinicalIngest.js
+++ b/src/ui-component/ingest/ClinicalIngest.js
@@ -2,14 +2,36 @@ import { Button, Grid, Typography } from '@mui/material';
 import PropTypes from 'prop-types';
 import { makeField, DataRow } from 'ui-component/DataRow';
 import { makeStyles } from '@mui/styles';
+import { useEffect, useState } from 'react';
+import { fetchFederation } from 'store/api';
 
 const ClinicalIngest = ({ setTab, fileUpload, clinicalData }) => {
     // setTab should be a function that sets the tab to the genomic ingest page
-    const dataRowFields = [
-        [makeField('Cohort', 'MOCK COHORT'), makeField('Clinical Patients', '850'), makeField('Read Access', '3')],
-        [makeField('Cohort', 'MOCK COHORT 2'), makeField('Clinical Patients', '325'), makeField('Read Access', '1')],
-        [makeField('Cohort', 'MOCK COHORT 2'), makeField('Clinical Patients', '78'), makeField('Read Access', '2')]
-    ];
+
+    const [authorizedCohorts, setAuthorizedCohorts] = useState([]);
+
+    useEffect(() => {
+        function fetchPrograms() {
+            return fetchFederation('v2/discovery/donors/', 'katsu')
+                .then((result) => {
+                    result.forEach((site) => {
+                        const programs = site.results.discovery_donor;
+                        const fields = [];
+                        Object.keys(programs).forEach((program) => {
+                            const field = [
+                                makeField('Cohort', program),
+                                makeField('Clinical Patients', programs[program].toString()),
+                                makeField('Read Access', 'Unknown')
+                            ];
+                            fields.push(field);
+                        });
+                        setAuthorizedCohorts(fields);
+                    });
+                })
+                .catch((error) => console.log(error));
+        }
+        fetchPrograms();
+    });
 
     const useStyles = makeStyles({
         titleText: {
@@ -37,6 +59,7 @@ const ClinicalIngest = ({ setTab, fileUpload, clinicalData }) => {
             }
         }
     });
+
     const classes = useStyles();
 
     return (
@@ -44,15 +67,21 @@ const ClinicalIngest = ({ setTab, fileUpload, clinicalData }) => {
             <Grid container direction="column" spacing={4}>
                 <Grid item>
                     <Typography align="left" className={classes.titleText}>
-                        <b>Active cohorts</b>
+                        <b>Your authorized cohorts</b>
                     </Typography>
-                    <Grid direction="row" spacing={3} container>
-                        {dataRowFields.map((fields, index) => (
-                            <Grid item xs={5} key={index}>
-                                <DataRow rowWidth="100%" itemSize="0.9em" fields={fields} />
-                            </Grid>
-                        ))}
-                    </Grid>
+                    {authorizedCohorts.length > 0 ? (
+                        <Grid direction="row" spacing={3} container>
+                            {authorizedCohorts.map((fields, index) => (
+                                <Grid item xs={5} key={index}>
+                                    <DataRow rowWidth="100%" itemSize="0.9em" fields={fields} />
+                                </Grid>
+                            ))}
+                        </Grid>
+                    ) : (
+                        <Typography align="left" className={classes.bodyText}>
+                            No cohorts found.
+                        </Typography>
+                    )}
                 </Grid>
                 <Grid item sx={{ width: '100%' }}>
                     <div>

From ad67940f1b84ee47169822d08617d383184aaa62 Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Mon, 21 Aug 2023 14:08:55 -0400
Subject: [PATCH 41/51] Change ingest page url to /ingest-data

---
 src/menu-items/ingest.js | 2 +-
 src/routes/MainRoutes.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/menu-items/ingest.js b/src/menu-items/ingest.js
index 5ddca28f..f257acd1 100644
--- a/src/menu-items/ingest.js
+++ b/src/menu-items/ingest.js
@@ -22,7 +22,7 @@ const ingest = {
             id: 'Data Ingest',
             title: 'Data Ingest',
             type: 'item',
-            url: `${basename}/ingest`,
+            url: `${basename}/ingest-data`,
             icon: icons.IconUpload,
             breadcrumbs: false
         }
diff --git a/src/routes/MainRoutes.js b/src/routes/MainRoutes.js
index a80d044f..93581f5f 100644
--- a/src/routes/MainRoutes.js
+++ b/src/routes/MainRoutes.js
@@ -45,7 +45,7 @@ const MainRoutes = {
             element: <ClinicalGenomicSearch />
         },
         {
-            path: `${basename}/ingest`,
+            path: `${basename}/ingest-data`,
             element: <IngestPortal />
         },
         {

From 3658345ccfa35e9312e7acdddc618c42c876d650 Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Mon, 21 Aug 2023 14:11:09 -0400
Subject: [PATCH 42/51] Fix genomic ingest upload

---
 src/ui-component/ingest/IngestMenu.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/ui-component/ingest/IngestMenu.js b/src/ui-component/ingest/IngestMenu.js
index 67d099ff..ac42b894 100644
--- a/src/ui-component/ingest/IngestMenu.js
+++ b/src/ui-component/ingest/IngestMenu.js
@@ -62,9 +62,6 @@ function IngestMenu() {
         setClinicalFile(file);
     }
     function loadGenomicFile(file, data) {
-        if (!('donors' in data && Array.isArray(data.donors))) {
-            throw Error('Donors key not found in clinical file');
-        }
         setGenomicData(data);
         setGenomicFile(file);
     }

From d574b681253869f18c6e4a33c4f9edad2fbef84f Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Mon, 21 Aug 2023 21:45:34 -0400
Subject: [PATCH 43/51] Connect to ingest microservice

---
 .env.development                         |  7 ++--
 src/store/api.js                         | 30 ++++++++++++++
 src/ui-component/ingest/GenomicIngest.js | 15 ++++++-
 src/ui-component/ingest/IngestMenu.js    | 53 ++++++++++++++++++++++--
 4 files changed, 97 insertions(+), 8 deletions(-)

diff --git a/.env.development b/.env.development
index 4716849c..f0fc2042 100644
--- a/.env.development
+++ b/.env.development
@@ -1,6 +1,7 @@
-REACT_APP_KATSU_API_SERVER='candig.docker.internal:5080/katsu/v2/'
-REACT_APP_FEDERATION_API_SERVER='candig.docker.internal:5080'
+REACT_APP_KATSU_API_SERVER=''
+REACT_APP_FEDERATION_API_SERVER=''
 REACT_APP_BASE_NAME=''
 REACT_APP_SITE_LOCATION = ''
-REACT_APP_HTSGET_SERVER = 'candig.docker.internal:5080/genomics/ga4gh/drs/v1/'
+REACT_APP_HTSGET_SERVER = ''
+REACT_APP_INGEST_SERVER = ''
 GENERATE_SOURCEMAP=false
\ No newline at end of file
diff --git a/src/store/api.js b/src/store/api.js
index 437dffa1..d6ee0d7f 100644
--- a/src/store/api.js
+++ b/src/store/api.js
@@ -5,6 +5,7 @@ export const federation = `${process.env.REACT_APP_FEDERATION_API_SERVER}/v1`;
 export const BASE_URL = process.env.REACT_APP_CANDIG_SERVER;
 export const htsget = process.env.REACT_APP_HTSGET_SERVER;
 export const TYK_URL = process.env.REACT_APP_TYK_SERVER;
+export const INGEST_URL = process.env.REACT_APP_INGEST_SERVER;
 
 // API Calls
 /* 
@@ -221,4 +222,33 @@ export function query(parameters, abort) {
             console.log('Error:', error);
             return 'error';
         });
+
+/*
+Post a clinical data JSON to Katsu
+ * @param {string}... Name of a gene
+*/
+export function ingestClinicalData(data) {
+    return fetch(`${INGEST_URL}/ingest/clinical_donors`, {
+        method: 'post',
+        headers: { 'Content-Type': 'application/json' },
+        body: data
+    })
+        .then((response) => response.json())
+        .catch((error) => {
+            console.log('Error:', error);
+            return error;
+        });
+}
+
+export function ingestGenomicData(data, program_id) {
+    return fetch(`${INGEST_URL}/ingest/moh_variants/${program_id}`, {
+        method: 'post',
+        headers: { 'Content-Type': 'application/json' },
+        body: data
+    })
+        .then((response) => response)
+        .catch((error) => {
+            console.log('Error:', error);
+            return error;
+        });
 }
diff --git a/src/ui-component/ingest/GenomicIngest.js b/src/ui-component/ingest/GenomicIngest.js
index e3ecaac8..16e5f24d 100644
--- a/src/ui-component/ingest/GenomicIngest.js
+++ b/src/ui-component/ingest/GenomicIngest.js
@@ -2,8 +2,11 @@ import { Button, Grid, Typography } from '@mui/material';
 import PropTypes from 'prop-types';
 import { makeField, DataRow } from 'ui-component/DataRow';
 import { makeStyles } from '@mui/styles';
+import { useEffect, useState } from 'react';
 
 const GenomicIngest = ({ beginIngest, fileUpload, clinicalData, genomicData }) => {
+    const [ingestButtonEnabled, setIngestButtonEnabled] = useState(false);
+
     const cohort = [
         makeField('Cohort', clinicalData.donors[0].program_id),
         makeField('Clinical Patients', clinicalData.donors.length),
@@ -35,6 +38,8 @@ const GenomicIngest = ({ beginIngest, fileUpload, clinicalData, genomicData }) =
     });
     const classes = useStyles();
 
+    useEffect(() => genomicData !== undefined && genomicData !== null && setIngestButtonEnabled(true), [genomicData]);
+
     return (
         <>
             <Grid container direction="column" sx={{ flexGrow: 1 }} spacing={4}>
@@ -59,9 +64,15 @@ const GenomicIngest = ({ beginIngest, fileUpload, clinicalData, genomicData }) =
                 </Grid>
                 <Grid item align="center">
                     <Button
-                        className={classes.ingestButton + (genomicData === undefined ? ` ${classes.ingestButtonDisabled}` : '')}
-                        onClick={beginIngest}
+                        className={classes.ingestButton + (ingestButtonEnabled ? '' : ` ${classes.ingestButtonDisabled}`)}
+                        onClick={() => {
+                            if (ingestButtonEnabled) {
+                                setIngestButtonEnabled(false);
+                                beginIngest();
+                            }
+                        }}
                         variant="contained"
+                        disabled={!ingestButtonEnabled}
                     >
                         Ingest
                     </Button>
diff --git a/src/ui-component/ingest/IngestMenu.js b/src/ui-component/ingest/IngestMenu.js
index ac42b894..d0d2e283 100644
--- a/src/ui-component/ingest/IngestMenu.js
+++ b/src/ui-component/ingest/IngestMenu.js
@@ -1,11 +1,12 @@
 import { makeStyles, styled } from '@mui/styles';
-import { Box, Tab, Tabs } from '@mui/material';
-import { useState } from 'react';
+import { Alert, Box, Tab, Tabs } from '@mui/material';
+import { useEffect, useState } from 'react';
 
 import IngestTabPage from 'ui-component/ingest/IngestTabPage';
 import ClinicalIngest from 'ui-component/ingest/ClinicalIngest';
 import GenomicIngest from 'ui-component/ingest/GenomicIngest';
 import PersistentFile from 'ui-component/PersistentFile';
+import { ingestClinicalData, ingestGenomicData } from 'store/api';
 
 const IngestTab = styled(Tab)({
     height: '2.75em',
@@ -30,11 +31,20 @@ const IngestTab = styled(Tab)({
 });
 
 function IngestMenu() {
+    const IngestStates = {
+        PENDING: 0,
+        STARTED_CLINICAL: 1,
+        STARTED_GENOMIC: 2,
+        ERROR: 3,
+        SUCCESS: 4
+    };
     const [value, setValue] = useState(0);
     const [clinicalFile, setClinicalFile] = useState(undefined);
     const [clinicalData, setClinicalData] = useState(undefined);
     const [genomicData, setGenomicData] = useState(undefined);
     const [genomicFile, setGenomicFile] = useState(undefined);
+    const [ingestState, setIngestState] = useState(IngestStates.PENDING);
+    const [ingestError, setIngestError] = useState('');
     const setTab = (event, val) => {
         setValue(val);
     };
@@ -54,6 +64,21 @@ function IngestMenu() {
 
     const classes = useStyles();
 
+    function getIngestStatusComponent(status) {
+        switch (status) {
+            case IngestStates.STARTED_CLINICAL:
+                return <Alert severity="info">Ingesting clinical data...</Alert>;
+            case IngestStates.SUCCESS:
+                return <Alert severity="success">Ingest complete!</Alert>;
+            case IngestStates.ERROR:
+                return <Alert severity="error">Ingest encountered the following error: {ingestError}</Alert>;
+            case IngestStates.STARTED_GENOMIC:
+                return <Alert severity="info">Clinical ingest complete. Beginning genomic ingest...</Alert>;
+            default:
+                return <Alert severity="info">Nothing to show. (You probably should not be seeing this...)</Alert>;
+        }
+    }
+
     function loadClinicalFile(file, data) {
         if (!('donors' in data && Array.isArray(data.donors))) {
             throw Error('Donors key not found in clinical file');
@@ -66,6 +91,27 @@ function IngestMenu() {
         setGenomicFile(file);
     }
 
+    function beginIngest() {
+        console.log('Beginning ingest...');
+        setIngestState(IngestStates.STARTED_CLINICAL);
+        ingestClinicalData(JSON.stringify(clinicalData)).then((result) => {
+            if (result.response_code === 0) {
+                setIngestState(IngestStates.STARTED_GENOMIC);
+                ingestGenomicData(JSON.stringify(genomicData), clinicalData.donors[0].program_id).then((response) => {
+                    if (response.status === 200) {
+                        setIngestState(IngestStates.SUCCESS);
+                    } else {
+                        setIngestError(result.json.result);
+                    }
+                });
+            } else {
+                setIngestError(result.result);
+            }
+        });
+    }
+
+    useEffect(() => ingestError && setIngestState(IngestStates.ERROR), [ingestError]);
+
     function getPage(val) {
         if (val === 0)
             return (
@@ -77,7 +123,7 @@ function IngestMenu() {
             );
         return (
             <GenomicIngest
-                beginIngest={() => {}}
+                beginIngest={() => beginIngest()}
                 fileUpload={<PersistentFile file={genomicFile} fileLoader={(file, data) => loadGenomicFile(file, data)} />}
                 clinicalData={clinicalData}
                 genomicData={genomicData}
@@ -106,6 +152,7 @@ function IngestMenu() {
                 />
             </Tabs>
             <IngestTabPage> {getPage(value)} </IngestTabPage>
+            {ingestState !== IngestStates.PENDING && getIngestStatusComponent(ingestState)}
         </Box>
     );
 }

From aea153e40c0e15f2b75b8bb0b6cf33e039fcd70f Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Mon, 21 Aug 2023 22:57:31 -0400
Subject: [PATCH 44/51] Loading bar for ingest status

---
 src/ui-component/ingest/IngestMenu.js | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/ui-component/ingest/IngestMenu.js b/src/ui-component/ingest/IngestMenu.js
index d0d2e283..e4a2f785 100644
--- a/src/ui-component/ingest/IngestMenu.js
+++ b/src/ui-component/ingest/IngestMenu.js
@@ -1,5 +1,5 @@
 import { makeStyles, styled } from '@mui/styles';
-import { Alert, Box, Tab, Tabs } from '@mui/material';
+import { Alert, Box, CircularProgress, Grid, Tab, Tabs } from '@mui/material';
 import { useEffect, useState } from 'react';
 
 import IngestTabPage from 'ui-component/ingest/IngestTabPage';
@@ -65,15 +65,28 @@ function IngestMenu() {
     const classes = useStyles();
 
     function getIngestStatusComponent(status) {
+        function progressRow(component) {
+            return (
+                <Grid container direction="row">
+                    <Grid item>
+                        <CircularProgress sx={{ padding: '0.35em' }} />
+                    </Grid>
+                    <Grid item xs>
+                        {component}
+                    </Grid>
+                </Grid>
+            );
+        }
+
         switch (status) {
             case IngestStates.STARTED_CLINICAL:
-                return <Alert severity="info">Ingesting clinical data...</Alert>;
+                return progressRow(<Alert severity="info">Ingesting clinical data...</Alert>);
             case IngestStates.SUCCESS:
                 return <Alert severity="success">Ingest complete!</Alert>;
             case IngestStates.ERROR:
                 return <Alert severity="error">Ingest encountered the following error: {ingestError}</Alert>;
             case IngestStates.STARTED_GENOMIC:
-                return <Alert severity="info">Clinical ingest complete. Beginning genomic ingest...</Alert>;
+                return progressRow(<Alert severity="info">Clinical ingest complete. Beginning genomic ingest...</Alert>);
             default:
                 return <Alert severity="info">Nothing to show. (You probably should not be seeing this...)</Alert>;
         }

From 5b6c6666c75236191f0f64aec4c531a321f3c09a Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Tue, 22 Aug 2023 09:40:53 -0400
Subject: [PATCH 45/51] Stop repeatedly making Katsu queries

---
 src/ui-component/ingest/ClinicalIngest.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui-component/ingest/ClinicalIngest.js b/src/ui-component/ingest/ClinicalIngest.js
index 20cf8ab1..e4857c5b 100644
--- a/src/ui-component/ingest/ClinicalIngest.js
+++ b/src/ui-component/ingest/ClinicalIngest.js
@@ -31,7 +31,7 @@ const ClinicalIngest = ({ setTab, fileUpload, clinicalData }) => {
                 .catch((error) => console.log(error));
         }
         fetchPrograms();
-    });
+    }, []);
 
     const useStyles = makeStyles({
         titleText: {
@@ -130,7 +130,7 @@ const ClinicalIngest = ({ setTab, fileUpload, clinicalData }) => {
                 </Grid>
             </Grid>
             {clinicalData === undefined ? (
-                <Button className={classes.buttonDisabled} variant="contained">
+                <Button className={classes.buttonDisabled} variant="contained" disabled>
                     Next
                 </Button>
             ) : (

From c93d9395bc84e2620d1c433e81d6f670d1ed3562 Mon Sep 17 00:00:00 2001
From: Justin <justin106@protonmail.com>
Date: Tue, 22 Aug 2023 10:55:54 -0400
Subject: [PATCH 46/51] Change ingest URL to /data-ingest

---
 src/menu-items/ingest.js | 2 +-
 src/routes/MainRoutes.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/menu-items/ingest.js b/src/menu-items/ingest.js
index f257acd1..97fdf2a3 100644
--- a/src/menu-items/ingest.js
+++ b/src/menu-items/ingest.js
@@ -22,7 +22,7 @@ const ingest = {
             id: 'Data Ingest',
             title: 'Data Ingest',
             type: 'item',
-            url: `${basename}/ingest-data`,
+            url: `${basename}/data-ingest`,
             icon: icons.IconUpload,
             breadcrumbs: false
         }
diff --git a/src/routes/MainRoutes.js b/src/routes/MainRoutes.js
index 93581f5f..11237c15 100644
--- a/src/routes/MainRoutes.js
+++ b/src/routes/MainRoutes.js
@@ -45,7 +45,7 @@ const MainRoutes = {
             element: <ClinicalGenomicSearch />
         },
         {
-            path: `${basename}/ingest-data`,
+            path: `${basename}/data-ingest`,
             element: <IngestPortal />
         },
         {

From 3b8963f3637a965e406f57fb8a4d25fc7c69b01e Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Wed, 25 Oct 2023 11:23:25 -0400
Subject: [PATCH 47/51] Fix up compile error during rebase

---
 src/store/api.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/store/api.js b/src/store/api.js
index d6ee0d7f..a4f403ae 100644
--- a/src/store/api.js
+++ b/src/store/api.js
@@ -222,6 +222,7 @@ export function query(parameters, abort) {
             console.log('Error:', error);
             return 'error';
         });
+}
 
 /*
 Post a clinical data JSON to Katsu

From b19243712b4fa486986cd14c8db920e309e88cbc Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Wed, 25 Oct 2023 11:38:09 -0400
Subject: [PATCH 48/51] (Temproarily disable ingest page from frontend for
 stable release)

---
 src/menu-items/index.js               | 4 ++--
 src/routes/MainRoutes.js              | 6 +++---
 src/ui-component/ingest/IngestMenu.js | 5 +----
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/menu-items/index.js b/src/menu-items/index.js
index 7bf71ba3..0b14f72b 100644
--- a/src/menu-items/index.js
+++ b/src/menu-items/index.js
@@ -1,6 +1,6 @@
 import clinicalGenomicSearch from './clinicalGenomicSearch';
 import summary from './summary';
-import ingest from './ingest';
+// import ingest from './ingest';
 
 // import pages from './pages';
 // import utilities from './utilities';
@@ -9,7 +9,7 @@ import ingest from './ingest';
 // ===========================|| MENU ITEMS ||=========================== //
 
 const menuItems = {
-    items: [summary, clinicalGenomicSearch, ingest /* pages, utilities, other */]
+    items: [summary, clinicalGenomicSearch /* , ingest, pages, utilities, other */]
 };
 
 export default menuItems;
diff --git a/src/routes/MainRoutes.js b/src/routes/MainRoutes.js
index 11237c15..4268863b 100644
--- a/src/routes/MainRoutes.js
+++ b/src/routes/MainRoutes.js
@@ -17,7 +17,7 @@ const Summary = Loadable(lazy(() => import('views/summary/summary')));
 const ClinicalGenomicSearch = Loadable(lazy(() => import('views/clinicalGenomic/clinicalGenomicSearch')));
 
 // Ingest Portal
-const IngestPortal = Loadable(lazy(() => import('views/ingest/ingest')));
+// const IngestPortal = Loadable(lazy(() => import('views/ingest/ingest')));
 
 // Error Pages
 const ErrorNotFoundPage = Loadable(lazy(() => import('views/errorPages/ErrorNotFoundPage')));
@@ -44,10 +44,10 @@ const MainRoutes = {
             path: `${basename}/clinicalGenomicSearch`,
             element: <ClinicalGenomicSearch />
         },
-        {
+        /* {
             path: `${basename}/data-ingest`,
             element: <IngestPortal />
-        },
+        }, */
         {
             path: '*',
             element: <ErrorNotFoundPage />
diff --git a/src/ui-component/ingest/IngestMenu.js b/src/ui-component/ingest/IngestMenu.js
index e4a2f785..e9ebe568 100644
--- a/src/ui-component/ingest/IngestMenu.js
+++ b/src/ui-component/ingest/IngestMenu.js
@@ -45,9 +45,6 @@ function IngestMenu() {
     const [genomicFile, setGenomicFile] = useState(undefined);
     const [ingestState, setIngestState] = useState(IngestStates.PENDING);
     const [ingestError, setIngestError] = useState('');
-    const setTab = (event, val) => {
-        setValue(val);
-    };
 
     const useStyles = makeStyles({
         tabActive: {
@@ -148,7 +145,7 @@ function IngestMenu() {
         <Box sx={{ width: '100%' }}>
             <Tabs
                 value={value}
-                onChange={setTab}
+                onChange={(_, value) => setValue(value)}
                 variant="fullWidth"
                 sx={{ width: '100%' }}
                 TabIndicatorProps={{

From 2fed9af63dcea167b5eb59402376fafbfc979db5 Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Fri, 10 Nov 2023 14:58:08 -0500
Subject: [PATCH 49/51] Fixes for the tooltips on the graphs that are no longer
 working (?)

---
 src/views/summary/CustomOfflineChart.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/views/summary/CustomOfflineChart.js b/src/views/summary/CustomOfflineChart.js
index f1aeaa2c..40b7d159 100644
--- a/src/views/summary/CustomOfflineChart.js
+++ b/src/views/summary/CustomOfflineChart.js
@@ -157,7 +157,7 @@ function CustomOfflineChart(props) {
                     legend: { enabled: false },
                     series: stackSeries,
                     tooltip: {
-                        pointFormat: '<b>{point.name}:</b> {point.y}'
+                        pointFormat: '<b>{series.name}:</b> {point.y}'
                     }
                 });
             } else if (validCharts.includes(chart)) {
@@ -197,14 +197,18 @@ function CustomOfflineChart(props) {
                     series: [{ data, colorByPoint: true, showInLegend: false }],
                     tooltip: {
                         useHTML: true,
-                        formatter: () => {
+                        // Anonymous functions don't appear to work with highcharts for some reason?
+                        /* eslint-disable func-names */
+                        formatter: function () {
                             let dataSum = 0;
                             this.series.points.forEach((point) => {
                                 dataSum += point.y;
                             });
                             const pcnt = (this.y / dataSum) * 100;
-                            return `<b> ${this.point.category}</b><br> - ${this.y} (${Highcharts.numberFormat(pcnt)}%) total patient(s)`;
+                            console.log(this);
+                            return `<b> ${this.key}</b><br> - ${this.y} (${Highcharts.numberFormat(pcnt)}%) total patient(s)`;
                         }
+                        /* eslint-enable func-names */
                     }
                 });
             } else {

From ade5fa2f7597a5a45a18b63a505aa732aaf71539 Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Fri, 10 Nov 2023 15:50:42 -0500
Subject: [PATCH 50/51] Linter fixes

---
 src/ui-component/ingest/IngestMenu.js             | 2 +-
 src/views/clinicalGenomic/search/SearchHandler.js | 6 +++---
 src/views/clinicalGenomic/widgets/sidebar.js      | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/ui-component/ingest/IngestMenu.js b/src/ui-component/ingest/IngestMenu.js
index e9ebe568..bc84b3dc 100644
--- a/src/ui-component/ingest/IngestMenu.js
+++ b/src/ui-component/ingest/IngestMenu.js
@@ -120,7 +120,7 @@ function IngestMenu() {
         });
     }
 
-    useEffect(() => ingestError && setIngestState(IngestStates.ERROR), [ingestError]);
+    useEffect(() => ingestError && setIngestState(IngestStates.ERROR), [ingestError, IngestStates.ERROR]);
 
     function getPage(val) {
         if (val === 0)
diff --git a/src/views/clinicalGenomic/search/SearchHandler.js b/src/views/clinicalGenomic/search/SearchHandler.js
index 2e66a01b..acb1a43c 100644
--- a/src/views/clinicalGenomic/search/SearchHandler.js
+++ b/src/views/clinicalGenomic/search/SearchHandler.js
@@ -3,11 +3,11 @@ import { useEffect, useState } from 'react';
 import { trackPromise } from 'react-promise-tracker';
 
 import { useSearchResultsWriterContext, useSearchQueryReaderContext } from '../SearchResultsContext';
-import { fetchFederationStat, fetchFederation, searchVariant, searchVariantByGene, query } from 'store/api';
+import { fetchFederationStat, fetchFederation, query } from 'store/api';
 
 // This will grab all of the results from a query, but continue to consume all "next" from the pagination until we are complete
 // This defeats the purpose of pagination, and is frowned upon, but... deadlines
-function ConsumeAllPages(url, resultConsumer, service = 'katsu') {
+/* function ConsumeAllPages(url, resultConsumer, service = 'katsu') {
     const parsedData = {};
     const RecursiveQuery = (data, idx) => {
         let nextQuery = null;
@@ -35,7 +35,7 @@ function ConsumeAllPages(url, resultConsumer, service = 'katsu') {
     };
 
     return fetchFederation(url, service).then((data) => RecursiveQuery(data, 1));
-}
+} */
 
 // NB: I assign to lastPromise a bunch to keep track of whether or not we need to chain promises together
 // However, the linter really dislikes this, and assumes I want to put everything inside one useEffect?
diff --git a/src/views/clinicalGenomic/widgets/sidebar.js b/src/views/clinicalGenomic/widgets/sidebar.js
index 1e003393..6ac5a076 100644
--- a/src/views/clinicalGenomic/widgets/sidebar.js
+++ b/src/views/clinicalGenomic/widgets/sidebar.js
@@ -214,7 +214,7 @@ function GenomicsGroup(props) {
     const [selectedGenes, setSelectedGenes] = useState('');
     const [startPos, setStartPos] = useState(0);
     const [endPos, setEndPos] = useState(0);
-    const [timeout, setNewTimeout] = useState(null);
+    const [_timeout, setNewTimeout] = useState(null);
 
     if (hide) {
         return <></>;

From 9e1acab5bb0fc1414f6bab53b93351a767e0c1ec Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Fri, 10 Nov 2023 16:20:17 -0500
Subject: [PATCH 51/51] Fix console log

---
 src/views/summary/CustomOfflineChart.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/summary/CustomOfflineChart.js b/src/views/summary/CustomOfflineChart.js
index 40b7d159..6e3eccaf 100644
--- a/src/views/summary/CustomOfflineChart.js
+++ b/src/views/summary/CustomOfflineChart.js
@@ -205,7 +205,6 @@ function CustomOfflineChart(props) {
                                 dataSum += point.y;
                             });
                             const pcnt = (this.y / dataSum) * 100;
-                            console.log(this);
                             return `<b> ${this.key}</b><br> - ${this.y} (${Highcharts.numberFormat(pcnt)}%) total patient(s)`;
                         }
                         /* eslint-enable func-names */