From 11f6bc1dfda72c706b5acade868907c5e45abe6c Mon Sep 17 00:00:00 2001
From: Moe Darrah <41540288+moedarrah@users.noreply.github.com>
Date: Wed, 25 Sep 2024 14:08:22 +0200
Subject: [PATCH 1/9] Add QualityControl page

---
 frontend/src/pages/About.tsx          |   5 -
 frontend/src/pages/Home.tsx           |   5 -
 frontend/src/pages/QualityControl.tsx | 167 ++++++++++++++++++++++++++
 frontend/src/routes/AppRouter.tsx     |  10 +-
 4 files changed, 173 insertions(+), 14 deletions(-)
 delete mode 100644 frontend/src/pages/About.tsx
 delete mode 100644 frontend/src/pages/Home.tsx
 create mode 100644 frontend/src/pages/QualityControl.tsx

diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx
deleted file mode 100644
index ee929d1..0000000
--- a/frontend/src/pages/About.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-export const About = () => {
-  return (
-    <div>About</div>
-  )
-}
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
deleted file mode 100644
index 5b1c9f6..0000000
--- a/frontend/src/pages/Home.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-export const Home = () => {
-  return (
-    <div>Home</div>
-  )
-}
\ No newline at end of file
diff --git a/frontend/src/pages/QualityControl.tsx b/frontend/src/pages/QualityControl.tsx
new file mode 100644
index 0000000..a221805
--- /dev/null
+++ b/frontend/src/pages/QualityControl.tsx
@@ -0,0 +1,167 @@
+import { Button, message, Table } from "antd"
+import { DownloadOutlined } from '@ant-design/icons'; 
+
+
+export const QualityControl = () => {
+
+  const data = [
+    {
+      key: '1',
+      totalBases: 18000000,
+      rawReads: 120000,
+      trimmedReads: 115000,
+      filteredReads: 110000,
+      mappedToHost: 85000,
+      inputReads: 100000,
+      unclassifiedReads: 12000,
+      assignedTo: {
+        homoSapiens: 55000,
+        fungi: 25000,
+        archaea: 8000,
+        bacteria: 17000,
+        viruses: 12000,
+      },
+      analysisDate: '2024-09-20',
+      sampleID: 'SAMPLE123',
+      projectID: 'PROJ001',
+    },
+    {
+      key: '2',
+      totalBases: 15000000,
+      rawReads: 95000,
+      trimmedReads: 90000,
+      filteredReads: 85000,
+      mappedToHost: 60000,
+      inputReads: 80000,
+      unclassifiedReads: 4000,
+      assignedTo: {
+        homoSapiens: 25000,
+        fungi: 10000,
+        archaea: 5000,
+        bacteria: 15000,
+        viruses: 5000,
+      },
+      analysisDate: '2024-09-22',
+      sampleID: 'SAMPLE456',
+      projectID: 'PROJ002',
+    },
+    {
+      key: '3',
+      totalBases: 20000000,
+      rawReads: 140000,
+      trimmedReads: 135000,
+      filteredReads: 130000,
+      mappedToHost: 95000,
+      inputReads: 120000,
+      unclassifiedReads: 15000,
+      assignedTo: {
+        homoSapiens: 70000,
+        fungi: 30000,
+        archaea: 10000,
+        bacteria: 20000,
+        viruses: 25000,
+      },
+      analysisDate: '2024-09-23',
+      sampleID: 'SAMPLE789',
+      projectID: 'PROJ003',
+    },
+    {
+      key: '4',
+      totalBases: 16000000,
+      rawReads: 110000,
+      trimmedReads: 105000,
+      filteredReads: 100000,
+      mappedToHost: 80000,
+      inputReads: 90000,
+      unclassifiedReads: 3000,
+      assignedTo: {
+        homoSapiens: 40000,
+        fungi: 15000,
+        archaea: 6000,
+        bacteria: 12000,
+        viruses: 10000,
+      },
+      analysisDate: '2024-09-24',
+      sampleID: 'SAMPLE012',
+      projectID: 'PROJ004',
+    },
+  ];
+
+  
+  const columns = [
+    {
+      title: 'Total Bases',
+      dataIndex: 'totalBases',
+      key: 'totalBases',
+    },
+    {
+      title: 'Number of Raw Reads',
+      dataIndex: 'rawReads',
+      key: 'rawReads',
+    },
+    {
+      title: 'Trimmed Reads',
+      dataIndex: 'trimmedReads',
+      key: 'trimmedReads',
+    },
+    {
+      title: 'Filtered Reads',
+      dataIndex: 'filteredReads',
+      key: 'filteredReads',
+    },
+    {
+      title: 'Reads Mapped to Host Genome (Human)',
+      dataIndex: 'mappedToHost',
+      key: 'mappedToHost',
+    },
+    {
+      title: 'Input Reads for Classifiers',
+      dataIndex: 'inputReads',
+      key: 'inputReads',
+    },
+    {
+      title: 'Unclassified Reads',
+      dataIndex: 'unclassifiedReads',
+      key: 'unclassifiedReads',
+    },
+    {
+      title: 'Reads Assigned to Homo Sapiens',
+      dataIndex: ['assignedTo', 'homoSapiens'],
+      key: 'homoSapiens',
+    },
+    {
+      title: 'Reads Assigned to Fungi',
+      dataIndex: ['assignedTo', 'fungi'],
+      key: 'fungi',
+    },
+    {
+      title: 'Reads Assigned to Archaea',
+      dataIndex: ['assignedTo', 'archaea'],
+      key: 'archaea',
+    },
+    {
+      title: 'Reads Assigned to Bacteria',
+      dataIndex: ['assignedTo', 'bacteria'],
+      key: 'bacteria',
+    },
+    {
+      title: 'Reads Assigned to Viruses',
+      dataIndex: ['assignedTo', 'viruses'],
+      key: 'viruses',
+    },
+    {
+      title: 'Action',
+      key: 'action',
+      render: () => (
+        <Button icon={<DownloadOutlined />} onClick={() => message.success('Download')} />
+      ),
+    },
+  ];
+  
+
+
+
+  return (
+    <Table dataSource={data} columns={columns} bordered/>
+  )
+}
\ No newline at end of file
diff --git a/frontend/src/routes/AppRouter.tsx b/frontend/src/routes/AppRouter.tsx
index 0c8ee03..400fcb1 100644
--- a/frontend/src/routes/AppRouter.tsx
+++ b/frontend/src/routes/AppRouter.tsx
@@ -1,14 +1,16 @@
 import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from 'react-router-dom';
-import { Home } from '../pages/Home';
-import { About } from '../pages/About';
+import { QualityControl } from '../pages/QualityControl';
+import { ClassificationResults } from '../pages/ClassificationResults';
 import { AppLayout } from '../appLayout/AppLayout';
+import { Metadata } from '../pages/Metadata';
 
 
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route element={<AppLayout />}> 
-      <Route path="/" element={<Home />} />
-      <Route path="/about" element={<About />} />
+      <Route path="/" element={<QualityControl />} />
+      <Route path="/classification-results" element={<ClassificationResults />} />
+      <Route path="/metadata" element={<Metadata />} />
       <Route path="*" element={<div>404 Not Found</div>} />
     </Route>
   )

From 9af6f8b59c3587b855585de65a993098ade8a83b Mon Sep 17 00:00:00 2001
From: Moe Darrah <41540288+moedarrah@users.noreply.github.com>
Date: Wed, 25 Sep 2024 14:08:44 +0200
Subject: [PATCH 2/9] Add ClassificationResults page

---
 frontend/src/appLayout/AppLayout.tsx         | 12 +++++++++---
 frontend/src/pages/ClassificationResults.tsx |  9 +++++++++
 2 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/pages/ClassificationResults.tsx

diff --git a/frontend/src/appLayout/AppLayout.tsx b/frontend/src/appLayout/AppLayout.tsx
index 555c9ef..d744d36 100644
--- a/frontend/src/appLayout/AppLayout.tsx
+++ b/frontend/src/appLayout/AppLayout.tsx
@@ -7,11 +7,15 @@ const { Header, Content, Footer } = Layout;
 const appMenuItems = () => [
     {
         key: '/',
-        label: <Link to="/">Home</Link>,
+        label: <Link to="/">Quality Control</Link>,
     },
     {
-        key: '/about',
-        label: <Link to="/about">About</Link>,
+        key: '/classification-results',
+        label: <Link to="/classification-results">Classification Results</Link>,
+    },
+    {
+        key: '/metadata',
+        label: <Link to="/metadata">Metadata</Link>,
     }
 ];
 
@@ -23,7 +27,9 @@ export const AppLayout = () => {
         <Layout>
             <Header className="header">
                 <div className="logo">
+                <Link to="/">
                         <img src="/meta-vis-logo.svg" alt="logo" />
+                    </Link>
                 </div>
                 <Menu
                     theme="dark"
diff --git a/frontend/src/pages/ClassificationResults.tsx b/frontend/src/pages/ClassificationResults.tsx
new file mode 100644
index 0000000..bdb47ae
--- /dev/null
+++ b/frontend/src/pages/ClassificationResults.tsx
@@ -0,0 +1,9 @@
+export const ClassificationResults = () => {
+  return (
+    <>
+   <h2>Visualization of classification results</h2> 
+   <li>Individual Krona plots for each classifier.</li>
+    <li>Visualization of the number of reads per hit from different classifiers based on Taxpasta outputs.</li>
+    </>
+  )
+}

From 16d0ced9c0d39863cbf4ae1b8af751bc19347f03 Mon Sep 17 00:00:00 2001
From: Moe Darrah <41540288+moedarrah@users.noreply.github.com>
Date: Wed, 25 Sep 2024 14:09:03 +0200
Subject: [PATCH 3/9] Add Metadata page

---
 frontend/src/pages/Metadata.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 frontend/src/pages/Metadata.tsx

diff --git a/frontend/src/pages/Metadata.tsx b/frontend/src/pages/Metadata.tsx
new file mode 100644
index 0000000..420cc06
--- /dev/null
+++ b/frontend/src/pages/Metadata.tsx
@@ -0,0 +1,10 @@
+export const Metadata = () => {
+  return (
+    <>
+    <h2>Metadata</h2>
+   <li> A table including sample information, sample source, batch, ticket number, priority, accreditation, library preparation, CT values, wet-lab methods, Taxprofiler version, and software versions.</li>
+   <li>A brief description, a few sentences, of the taxprofiler pipeline analysis used to produce the results.</li>
+   <li> A summary table of tickets, sample information, key QC metrics, pass or fail status (?), and the number of reads assigned to viruses.</li>
+   </>
+  )
+}

From e203e5839ffb544371e0081ddc6884748d5e52c0 Mon Sep 17 00:00:00 2001
From: Moe Darrah <41540288+moedarrah@users.noreply.github.com>
Date: Wed, 25 Sep 2024 14:39:27 +0200
Subject: [PATCH 4/9] Add axios package

---
 frontend/package.json |  4 ++-
 frontend/yarn.lock    | 64 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/frontend/package.json b/frontend/package.json
index d5b0729..1c4af3f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,16 +11,18 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@types/axios": "^0.14.0",
+    "axios": "^1.7.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.1"
   },
   "devDependencies": {
-    "@types/react-router-dom": "^5.3.3",
     "@ant-design/icons": "^5.4.0",
     "@eslint/js": "^9.9.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^4.3.1",
     "antd": "^5.20.5",
     "eslint": "^9.9.0",
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index c529f4d..c1b5155 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -657,6 +657,13 @@
   resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.21.2.tgz#e4291e3c1bc637083f87936c333cdbcad22af63b"
   integrity sha512-6UUxd0+SKomjdzuAcp+HAmxw1FlGBnl1v2yEPSabtx4lBfdXHDVsW7+lQkgz9cNFJGY3AWR7+V8P5BqkD9L9nA==
 
+"@types/axios@^0.14.0":
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/@types/axios/-/axios-0.14.0.tgz#ec2300fbe7d7dddd7eb9d3abf87999964cafce46"
+  integrity sha512-KqQnQbdYE54D7oa/UmYVMZKq7CO4l8DEENzOKc4aBRwxCXSlJXGz83flFx5L7AWrOQnmuN3kVsRdt+GZPPjiVQ==
+  dependencies:
+    axios "*"
+
 "@types/babel__core@^7.20.5":
   version "7.20.5"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.5.tgz#3df15f27ba85319caa07ba08d0721889bb39c017"
@@ -933,6 +940,20 @@ array-tree-filter@^2.1.0:
   resolved "https://registry.yarnpkg.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz#873ac00fec83749f255ac8dd083814b4f6329190"
   integrity sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+axios@*, axios@^1.7.7:
+  version "1.7.7"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.7.tgz#2f554296f9892a72ac8d8e4c5b79c14a91d0a47f"
+  integrity sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -1026,6 +1047,13 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 compute-scroll-into-view@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz#753f11d972596558d8fe7c6bcbc8497690ab4c87"
@@ -1079,6 +1107,11 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
 electron-to-chromium@^1.5.4:
   version "1.5.13"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.13.tgz#1abf0410c5344b2b829b7247e031f02810d442e6"
@@ -1297,6 +1330,20 @@ flatted@^3.2.9:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
   integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
 
+follow-redirects@^1.15.6:
+  version "1.15.9"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
+  integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
+
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
@@ -1494,6 +1541,18 @@ micromatch@^4.0.4:
     braces "^3.0.3"
     picomatch "^2.3.1"
 
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
 minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
@@ -1595,6 +1654,11 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 punycode@^2.1.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"

From 4057f720fd86f4bc44d626ccd9695fbb595a0760 Mon Sep 17 00:00:00 2001
From: Moe Darrah <41540288+moedarrah@users.noreply.github.com>
Date: Wed, 25 Sep 2024 14:45:16 +0200
Subject: [PATCH 5/9] Edit gitignore

---
 frontend/.gitignore | 42 +++++++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/frontend/.gitignore b/frontend/.gitignore
index a547bf3..dd6bbb1 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -1,24 +1,24 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-node_modules
-dist
-dist-ssr
-*.local
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
 
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
+# testing
+/coverage
+
+# production
+/build
+
+# misc
 .DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.idea
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
\ No newline at end of file

From e568cfeace324304239ff28b95afde25e279d7fd Mon Sep 17 00:00:00 2001
From: Moe Darrah <41540288+moedarrah@users.noreply.github.com>
Date: Thu, 26 Sep 2024 08:38:08 +0200
Subject: [PATCH 6/9] Edit the data and columns

---
 frontend/src/pages/QualityControl.tsx | 190 ++++++++++++--------------
 1 file changed, 86 insertions(+), 104 deletions(-)

diff --git a/frontend/src/pages/QualityControl.tsx b/frontend/src/pages/QualityControl.tsx
index a221805..265f326 100644
--- a/frontend/src/pages/QualityControl.tsx
+++ b/frontend/src/pages/QualityControl.tsx
@@ -7,147 +7,128 @@ export const QualityControl = () => {
   const data = [
     {
       key: '1',
-      totalBases: 18000000,
-      rawReads: 120000,
-      trimmedReads: 115000,
-      filteredReads: 110000,
-      mappedToHost: 85000,
-      inputReads: 100000,
-      unclassifiedReads: 12000,
-      assignedTo: {
-        homoSapiens: 55000,
-        fungi: 25000,
-        archaea: 8000,
-        bacteria: 17000,
-        viruses: 12000,
-      },
-      analysisDate: '2024-09-20',
-      sampleID: 'SAMPLE123',
-      projectID: 'PROJ001',
+      totalReads: 180000,
+      totalReadsAfterFiltering: 175000,
+      humanMappedReads: 85000,
+      humanKrakenReads: 5000,
+      totalHumanReadsPercent: '48.57%', 
+      bacterialReadsPercent: '22.86%',  
+      virusReadsPercent: '1.71%',     
+      eukaryoteReadsPercent: '4%',      
+      otherReadsPercent: '1.71%',       
+      unclassifiedReadsPercent: '4%',  
+      spikeReadsPercent: '2.29%',       
+      spike: 'Emesvirus zinderi',
     },
     {
       key: '2',
-      totalBases: 15000000,
-      rawReads: 95000,
-      trimmedReads: 90000,
-      filteredReads: 85000,
-      mappedToHost: 60000,
-      inputReads: 80000,
-      unclassifiedReads: 4000,
-      assignedTo: {
-        homoSapiens: 25000,
-        fungi: 10000,
-        archaea: 5000,
-        bacteria: 15000,
-        viruses: 5000,
-      },
-      analysisDate: '2024-09-22',
-      sampleID: 'SAMPLE456',
-      projectID: 'PROJ002',
+      totalReads: 150000,
+      totalReadsAfterFiltering: 140000,
+      humanMappedReads: 60000,
+      humanKrakenReads: 4000,
+      totalHumanReadsPercent: '45.71%',
+      bacterialReadsPercent: '25.71%', 
+      virusReadsPercent: '2.14%',      
+      eukaryoteReadsPercent: '5%',    
+      otherReadsPercent: '2.14%',       
+      unclassifiedReadsPercent: '2.86%',
+      spikeReadsPercent: '1.43%',     
+      spike: 'Emesvirus zinderi',
     },
     {
       key: '3',
-      totalBases: 20000000,
-      rawReads: 140000,
-      trimmedReads: 135000,
-      filteredReads: 130000,
-      mappedToHost: 95000,
-      inputReads: 120000,
-      unclassifiedReads: 15000,
-      assignedTo: {
-        homoSapiens: 70000,
-        fungi: 30000,
-        archaea: 10000,
-        bacteria: 20000,
-        viruses: 25000,
-      },
-      analysisDate: '2024-09-23',
-      sampleID: 'SAMPLE789',
-      projectID: 'PROJ003',
+      totalReads: 200000,
+      totalReadsAfterFiltering: 190000,
+      humanMappedReads: 90000,
+      humanKrakenReads: 7000,
+      totalHumanReadsPercent: '50.53%',
+      bacterialReadsPercent: '26.32%', 
+      virusReadsPercent: '3.16%',       
+      eukaryoteReadsPercent: '4.74%',   
+      otherReadsPercent: '1.58%',       
+      unclassifiedReadsPercent: '2.11%',
+      spikeReadsPercent: '1.58%',       
+      spike: 'Emesvirus zinderi',
     },
     {
       key: '4',
-      totalBases: 16000000,
-      rawReads: 110000,
-      trimmedReads: 105000,
-      filteredReads: 100000,
-      mappedToHost: 80000,
-      inputReads: 90000,
-      unclassifiedReads: 3000,
-      assignedTo: {
-        homoSapiens: 40000,
-        fungi: 15000,
-        archaea: 6000,
-        bacteria: 12000,
-        viruses: 10000,
-      },
-      analysisDate: '2024-09-24',
-      sampleID: 'SAMPLE012',
-      projectID: 'PROJ004',
+      totalReads: 160000,
+      totalReadsAfterFiltering: 155000,
+      humanMappedReads: 70000,
+      humanKrakenReads: 4000,
+      totalHumanReadsPercent: '47.74%', 
+      bacterialReadsPercent: '22.58%',  
+      virusReadsPercent: '1.94%',       
+      eukaryoteReadsPercent: '3.87%',   
+      otherReadsPercent: '1.94%',      
+      unclassifiedReadsPercent: '3.23%',
+      spikeReadsPercent: '2.58%',       
+      spike: 'Emesvirus zinderi',
     },
   ];
+  
 
   
   const columns = [
     {
-      title: 'Total Bases',
-      dataIndex: 'totalBases',
-      key: 'totalBases',
+      title: 'Total Reads',
+      dataIndex: 'totalReads',
+      key: 'totalReads',
     },
     {
-      title: 'Number of Raw Reads',
-      dataIndex: 'rawReads',
-      key: 'rawReads',
+      title: 'Total Reads After Filtering',
+      dataIndex: 'totalReadsAfterFiltering',
+      key: 'totalReadsAfterFiltering',
     },
     {
-      title: 'Trimmed Reads',
-      dataIndex: 'trimmedReads',
-      key: 'trimmedReads',
+      title: 'Human Mapped Reads',
+      dataIndex: 'humanMappedReads',
+      key: 'humanMappedReads',
     },
     {
-      title: 'Filtered Reads',
-      dataIndex: 'filteredReads',
-      key: 'filteredReads',
+      title: 'Human Kraken Reads',
+      dataIndex: 'humanKrakenReads',
+      key: 'humanKrakenReads',
     },
     {
-      title: 'Reads Mapped to Host Genome (Human)',
-      dataIndex: 'mappedToHost',
-      key: 'mappedToHost',
+      title: '% Total Human Reads',
+      dataIndex: 'totalHumanReadsPercent',
+      key: 'totalHumanReadsPercent',
     },
     {
-      title: 'Input Reads for Classifiers',
-      dataIndex: 'inputReads',
-      key: 'inputReads',
+      title: '% Bacterial Reads',
+      dataIndex: 'bacterialReadsPercent',
+      key: 'bacterialReadsPercent',
     },
     {
-      title: 'Unclassified Reads',
-      dataIndex: 'unclassifiedReads',
-      key: 'unclassifiedReads',
+      title: '% Virus Reads',
+      dataIndex: 'virusReadsPercent',
+      key: 'virusReadsPercent',
     },
     {
-      title: 'Reads Assigned to Homo Sapiens',
-      dataIndex: ['assignedTo', 'homoSapiens'],
-      key: 'homoSapiens',
+      title: '% Eukaryote Reads',
+      dataIndex: 'eukaryoteReadsPercent',
+      key: 'eukaryoteReadsPercent',
     },
     {
-      title: 'Reads Assigned to Fungi',
-      dataIndex: ['assignedTo', 'fungi'],
-      key: 'fungi',
+      title: '% Other Reads',
+      dataIndex: 'otherReadsPercent',
+      key: 'otherReadsPercent',
     },
     {
-      title: 'Reads Assigned to Archaea',
-      dataIndex: ['assignedTo', 'archaea'],
-      key: 'archaea',
+      title: '% Unclassified Reads',
+      dataIndex: 'unclassifiedReadsPercent',
+      key: 'unclassifiedReadsPercent',
     },
     {
-      title: 'Reads Assigned to Bacteria',
-      dataIndex: ['assignedTo', 'bacteria'],
-      key: 'bacteria',
+      title: '% Spike Reads',
+      dataIndex: 'spikeReadsPercent',
+      key: 'spikeReadsPercent',
     },
     {
-      title: 'Reads Assigned to Viruses',
-      dataIndex: ['assignedTo', 'viruses'],
-      key: 'viruses',
+      title: 'Spike Used',
+      dataIndex: 'spike',
+      key: 'spike',
     },
     {
       title: 'Action',
@@ -158,6 +139,7 @@ export const QualityControl = () => {
     },
   ];
   
+  
 
 
 

From 98569da18e6d5195b3c878e0ffbad03d7d492624 Mon Sep 17 00:00:00 2001
From: Moe Darrah <41540288+moedarrah@users.noreply.github.com>
Date: Thu, 26 Sep 2024 08:38:58 +0200
Subject: [PATCH 7/9] Edit the data and columns

---
 frontend/src/pages/QualityControl.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/QualityControl.tsx b/frontend/src/pages/QualityControl.tsx
index 265f326..6bd6084 100644
--- a/frontend/src/pages/QualityControl.tsx
+++ b/frontend/src/pages/QualityControl.tsx
@@ -91,37 +91,37 @@ export const QualityControl = () => {
       key: 'humanKrakenReads',
     },
     {
-      title: '% Total Human Reads',
+      title: 'Total Human Reads',
       dataIndex: 'totalHumanReadsPercent',
       key: 'totalHumanReadsPercent',
     },
     {
-      title: '% Bacterial Reads',
+      title: 'Bacterial Reads',
       dataIndex: 'bacterialReadsPercent',
       key: 'bacterialReadsPercent',
     },
     {
-      title: '% Virus Reads',
+      title: 'Virus Reads',
       dataIndex: 'virusReadsPercent',
       key: 'virusReadsPercent',
     },
     {
-      title: '% Eukaryote Reads',
+      title: 'Eukaryote Reads',
       dataIndex: 'eukaryoteReadsPercent',
       key: 'eukaryoteReadsPercent',
     },
     {
-      title: '% Other Reads',
+      title: 'Other Reads',
       dataIndex: 'otherReadsPercent',
       key: 'otherReadsPercent',
     },
     {
-      title: '% Unclassified Reads',
+      title: 'Unclassified Reads',
       dataIndex: 'unclassifiedReadsPercent',
       key: 'unclassifiedReadsPercent',
     },
     {
-      title: '% Spike Reads',
+      title: 'Spike Reads',
       dataIndex: 'spikeReadsPercent',
       key: 'spikeReadsPercent',
     },

From 38ee6e2936b5b72ebe017fd0188fe98bbe5fbdf9 Mon Sep 17 00:00:00 2001
From: Moe Darrah <41540288+moedarrah@users.noreply.github.com>
Date: Tue, 1 Oct 2024 14:41:58 +0200
Subject: [PATCH 8/9] Add Axios

---
 frontend/src/api.ts                   | 38 +++++++++++++++++++++++++++
 frontend/src/interfaces.ts            | 15 +++++++++++
 frontend/src/pages/QualityControl.tsx | 36 ++++++++++++++++++++++---
 3 files changed, 85 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/api.ts
 create mode 100644 frontend/src/interfaces.ts

diff --git a/frontend/src/api.ts b/frontend/src/api.ts
new file mode 100644
index 0000000..c339046
--- /dev/null
+++ b/frontend/src/api.ts
@@ -0,0 +1,38 @@
+import axios from 'axios';
+import { QualityControlData } from './interfaces';
+const API_URL = import.meta.env.API_URL;
+
+
+const axiosGET = (endPoint: string, token?: string) => {
+  const headers = token ? { Authorization: `Bearer ${token}` } : {};
+  return axios
+    .get(endPoint, { headers })
+    .then((response) => response.data)
+    .catch((error) => {
+      console.error('GET error:', error);
+    });
+};
+
+
+const axiosPOST = (endPoint: string, data: unknown) => {
+  return axios
+    .post(endPoint, data)
+    .then((response) => response.data)
+    .catch((error) => {
+      console.error('POST error:', error);
+    });
+};
+
+
+export const getQualityControl = async (): Promise<QualityControlData[]> => {
+  const endPoint = `${API_URL}/quality_control`;
+  return axiosGET(endPoint);
+};
+
+
+export const postCall = async (data: string): Promise<unknown> => {
+  const endPoint = `${API_URL}/post_call`;
+  return axiosPOST(endPoint, data);
+};
+
+
diff --git a/frontend/src/interfaces.ts b/frontend/src/interfaces.ts
new file mode 100644
index 0000000..eef8ac5
--- /dev/null
+++ b/frontend/src/interfaces.ts
@@ -0,0 +1,15 @@
+export interface QualityControlData {
+    key: string;
+    totalReads: number;
+    totalReadsAfterFiltering: number;
+    humanMappedReads: number;
+    humanKrakenReads: number;
+    totalHumanReadsPercent: string;
+    bacterialReadsPercent: string;
+    virusReadsPercent: string;
+    eukaryoteReadsPercent: string;
+    otherReadsPercent: string;
+    unclassifiedReadsPercent: string;
+    spikeReadsPercent: string;
+    spike: string;
+  }
\ No newline at end of file
diff --git a/frontend/src/pages/QualityControl.tsx b/frontend/src/pages/QualityControl.tsx
index 6bd6084..197f302 100644
--- a/frontend/src/pages/QualityControl.tsx
+++ b/frontend/src/pages/QualityControl.tsx
@@ -1,10 +1,34 @@
-import { Button, message, Table } from "antd"
+import { useEffect, useState } from "react";
+import { Button, message, notification, Table } from "antd"
 import { DownloadOutlined } from '@ant-design/icons'; 
+import { QualityControlData } from "../interfaces";
+import { getQualityControl } from "../api";
 
 
-export const QualityControl = () => {
+export const QualityControl: React.FC = () => {
+  const [qualityControlData, setQualityControlData] = useState<QualityControlData[]>([]);
 
-  const data = [
+  useEffect(() => {
+    getQualityControl()
+      .then((data) => {
+        if (Array.isArray(data)) {
+          setQualityControlData(data);
+        } else {
+          notification.error({
+            message: "Data Error",
+            description: "Invalid data format from API",
+          });
+        }
+      })
+      .catch(() => {
+        notification.error({
+          message: "Fetch Error",
+          description: "Failed to fetch quality control data",
+        });
+      });
+  }, []);
+
+  const mockData: QualityControlData[] = [
     {
       key: '1',
       totalReads: 180000,
@@ -144,6 +168,10 @@ export const QualityControl = () => {
 
 
   return (
-    <Table dataSource={data} columns={columns} bordered/>
+    <Table<QualityControlData>
+      dataSource={qualityControlData.length ? qualityControlData:  mockData}
+      columns={columns}
+      bordered
+    />
   )
 }
\ No newline at end of file

From a7c26cb9250827b5a7f378ebcc7ceab16b6a5534 Mon Sep 17 00:00:00 2001
From: Moe Darrah <41540288+moedarrah@users.noreply.github.com>
Date: Tue, 1 Oct 2024 16:00:47 +0200
Subject: [PATCH 9/9] Allow no-unused-vars warnings in ESLint for TypeScript

---
 frontend/eslint.config.js             | 5 +++++
 frontend/src/pages/QualityControl.tsx | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
index 092408a..012119f 100644
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -23,6 +23,11 @@ export default tseslint.config(
         'warn',
         { allowConstantExport: true },
       ],
+       'no-unused-vars': 'off', 
+       '@typescript-eslint/no-unused-vars': [
+         'warn',
+         { vars: 'all', args: 'after-used', ignoreRestSiblings: true },
+       ],
     },
   },
 )
diff --git a/frontend/src/pages/QualityControl.tsx b/frontend/src/pages/QualityControl.tsx
index 197f302..eeae908 100644
--- a/frontend/src/pages/QualityControl.tsx
+++ b/frontend/src/pages/QualityControl.tsx
@@ -7,7 +7,7 @@ import { getQualityControl } from "../api";
 
 export const QualityControl: React.FC = () => {
   const [qualityControlData, setQualityControlData] = useState<QualityControlData[]>([]);
-
+  
   useEffect(() => {
     getQualityControl()
       .then((data) => {