From 28c6dea0830155219b3aafa09e1325b9390f616b Mon Sep 17 00:00:00 2001
From: Samantha Piatt <samantha.piatt@childrens.harvard.edu>
Date: Thu, 22 Feb 2024 07:38:21 -0500
Subject: [PATCH 01/11] Add dataset management and view pages.

---
 .gitignore                                    |   4 +-
 package-lock.json                             |  38 ++---
 package.json                                  |   8 +-
 src/app.postcss                               | 109 ++++++++++++-
 src/lib/api.ts                                |  19 ++-
 src/lib/{ => component}/content.svelte        |   8 +-
 src/lib/component/dataset/cell/actions.svelte |  42 +++++
 .../component/dataset/cell/copy-button.svelte |  31 ++++
 .../datatable/accessories/count.svelte        |  13 ++
 .../datatable/accessories/filter.svelte       |  18 +++
 .../datatable/accessories/pagination.svelte   |  58 +++++++
 .../datatable/accessories/rows.svelte         |  17 ++
 .../datatable/accessories/search.svelte       |  13 ++
 .../datatable/accessories/sort.svelte         |  23 +++
 src/lib/component/datatable/table.svelte      |  91 +++++++++++
 src/lib/component/error-alert.svelte          |  11 ++
 src/lib/{ => component}/navigation.svelte     |   5 +-
 src/lib/configuration.ts                      |   9 +-
 src/lib/model/dataset.ts                      |  52 +++++++
 src/lib/store/dataset.ts                      |  51 ++++++
 src/lib/types.ts                              |   4 +
 src/routes/+layout.svelte                     |   2 +-
 src/routes/+page.svelte                       |   2 +-
 src/routes/admin/+page.svelte                 |   2 +-
 src/routes/admin/super/+page.svelte           |   2 +-
 src/routes/api/+page.svelte                   |   2 +-
 src/routes/dataset/+page.svelte               |  49 +++++-
 src/routes/dataset/[uuid]/+page.svelte        |  56 +++++++
 src/routes/explorer/+page.svelte              |   2 +-
 src/routes/help/+page.svelte                  |   2 +-
 src/routes/help/dummy/+page.svelte            |   2 +-
 src/routes/users/+page.svelte                 |   2 +-
 tests/custom-context.ts                       |  11 ++
 tests/lib/component/navigation/test.ts        |  56 +++++++
 tests/lib/test.ts                             |  33 ----
 tests/mock-data.ts                            |  24 +++
 tests/routes/dataset/test.ts                  | 146 ++++++++++++++++++
 37 files changed, 924 insertions(+), 93 deletions(-)
 rename src/lib/{ => component}/content.svelte (55%)
 create mode 100644 src/lib/component/dataset/cell/actions.svelte
 create mode 100644 src/lib/component/dataset/cell/copy-button.svelte
 create mode 100644 src/lib/component/datatable/accessories/count.svelte
 create mode 100644 src/lib/component/datatable/accessories/filter.svelte
 create mode 100644 src/lib/component/datatable/accessories/pagination.svelte
 create mode 100644 src/lib/component/datatable/accessories/rows.svelte
 create mode 100644 src/lib/component/datatable/accessories/search.svelte
 create mode 100644 src/lib/component/datatable/accessories/sort.svelte
 create mode 100644 src/lib/component/datatable/table.svelte
 create mode 100644 src/lib/component/error-alert.svelte
 rename src/lib/{ => component}/navigation.svelte (93%)
 create mode 100644 src/lib/model/dataset.ts
 create mode 100644 src/lib/store/dataset.ts
 create mode 100644 src/lib/types.ts
 create mode 100644 src/routes/dataset/[uuid]/+page.svelte
 create mode 100644 tests/custom-context.ts
 create mode 100644 tests/lib/component/navigation/test.ts
 delete mode 100644 tests/lib/test.ts
 create mode 100644 tests/mock-data.ts
 create mode 100644 tests/routes/dataset/test.ts

diff --git a/.gitignore b/.gitignore
index 2b88a84d..d042f57b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@ node_modules
 /cert
 /.svelte-kit
 /playwright-report
+/test-results
 /package
 .env
 .env.*
@@ -13,4 +14,5 @@ vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 .vscode
 /certs
-/httpd-docker-logs
\ No newline at end of file
+/httpd-docker-logs
+httpd-vhosts.conf
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 8e0e3944..289f43ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@floating-ui/dom": "1.5.3",
         "@fortawesome/fontawesome-free": "^6.5.1",
+        "@vincjo/datatables": "^1.14.5",
         "dotenv": "^16.3.1"
       },
       "devDependencies": {
@@ -67,7 +68,6 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
       "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.0",
         "@jridgewell/trace-mapping": "^0.3.9"
@@ -564,7 +564,6 @@
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
       "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.0.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -578,7 +577,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
       "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -587,7 +585,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
       "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -595,14 +592,12 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.20",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
       "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -1147,8 +1142,7 @@
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-      "dev": true
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
     },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
@@ -1378,6 +1372,14 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
+    "node_modules/@vincjo/datatables": {
+      "version": "1.14.5",
+      "resolved": "https://registry.npmjs.org/@vincjo/datatables/-/datatables-1.14.5.tgz",
+      "integrity": "sha512-kvjr8ggRTRzwDTgOqK3bQPe5ZJo68h30SHcx0WS3daLVt/IUzN2132wtH2JZQkpxyjmh9EiblugOzUv/36Xpug==",
+      "peerDependencies": {
+        "svelte": ">=3.54.0"
+      }
+    },
     "node_modules/@vitest/expect": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.0.4.tgz",
@@ -1477,7 +1479,6 @@
       "version": "8.11.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz",
       "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==",
-      "dev": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1578,7 +1579,6 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
       "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-      "dev": true,
       "dependencies": {
         "dequal": "^2.0.3"
       }
@@ -1642,7 +1642,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
       "integrity": "sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==",
-      "dev": true,
       "dependencies": {
         "dequal": "^2.0.3"
       }
@@ -1873,7 +1872,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
       "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15",
         "@types/estree": "^1.0.1",
@@ -1948,7 +1946,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
       "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-      "dev": true,
       "dependencies": {
         "mdn-data": "2.0.30",
         "source-map-js": "^1.0.1"
@@ -2017,7 +2014,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -2378,7 +2374,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
       "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-      "dev": true,
       "dependencies": {
         "@types/estree": "^1.0.0"
       }
@@ -2862,7 +2857,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
       "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
-      "dev": true,
       "dependencies": {
         "@types/estree": "*"
       }
@@ -3001,8 +2995,7 @@
     "node_modules/locate-character": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
-      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
-      "dev": true
+      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
     },
     "node_modules/locate-path": {
       "version": "6.0.0",
@@ -3062,7 +3055,6 @@
       "version": "0.30.5",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
       "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       },
@@ -3073,8 +3065,7 @@
     "node_modules/mdn-data": {
       "version": "2.0.30",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
-      "dev": true
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
     },
     "node_modules/merge-stream": {
       "version": "2.0.0",
@@ -3451,7 +3442,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
       "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
-      "dev": true,
       "dependencies": {
         "@types/estree": "^1.0.0",
         "estree-walker": "^3.0.0",
@@ -4142,7 +4132,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4289,7 +4278,6 @@
       "version": "4.2.8",
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.8.tgz",
       "integrity": "sha512-hU6dh1MPl8gh6klQZwK/n73GiAHiR95IkFsesLPbMeEZi36ydaXL/ZAb4g9sayT0MXzpxyZjR28yderJHxcmYA==",
-      "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.15",
diff --git a/package.json b/package.json
index f143c312..e502d6dd 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,8 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
+    "dev": "svelte-kit sync && vite dev",
+    "build": "svelte-kit sync && vite build",
     "preview": "vite preview",
     "test": "npm run test:integration && npm run test:unit",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -12,7 +12,8 @@
     "lint": "prettier --check . && eslint .",
     "format": "prettier --write .",
     "test:integration": "playwright test",
-    "test:unit": "vitest"
+    "test:unit": "vitest run",
+    "playwright": "playwright test --ui"
   },
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -47,6 +48,7 @@
   "dependencies": {
     "@floating-ui/dom": "1.5.3",
     "@fortawesome/fontawesome-free": "^6.5.1",
+    "@vincjo/datatables": "^1.14.5",
     "dotenv": "^16.3.1"
   }
 }
diff --git a/src/app.postcss b/src/app.postcss
index 78cb74c5..18f572f8 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -9,17 +9,105 @@ body {
 }
 
 section.main-content {
-  width: 60%; /* The width is 60%, by default */
+  width: 70%; /* The width is 60%, by default */
   margin: 2rem auto 0;
 }
 
 /* Use a media query to add a breakpoint at 800px: */
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 1366px) {
   section.main-content {
-    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
+    width: calc(100% - 4rem); /* The width is 100%, when the viewport is 800px or smaller */
+    margin: 2rem;
   }
 }
 
+@media print {
+  .app-bar #page-navigation {
+    display: none;
+  }
+  section.main-content {
+    width: 100%;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    text-align: left !important;
+  }
+  html,
+  body {
+    height: auto !important;
+    overflow: auto !important;
+  }
+  body.overflow-hidden,
+  .app-shell.overflow-hidden,
+  .app-shell div.overflow-hidden {
+    overflow: auto !important;
+  }
+  body.h-full,
+  .app-shell.h-full,
+  .app-shell div.h-full {
+    height: auto !important;
+  }
+}
+
+h1 {
+  @apply h1 text-center my-1;
+}
+h2 {
+  @apply h2 my-1;
+}
+h3 {
+  @apply h3 my-1;
+}
+h4 {
+  @apply h4 my-1;
+}
+h5 {
+  @apply h5 my-1;
+}
+h6 {
+  @apply h6 my-1;
+}
+
+ol.primary-list,
+ul.primary-list {
+  padding-left: 3rem;
+}
+ol.primary-list {
+  list-style: decimal;
+}
+ul.primary-list {
+  list-style: disc;
+}
+ol.primary-list li::marker,
+ul.primary-list li::marker {
+  color: rgba(var(--color-primary-500));
+}
+
+/* Loading progress bar animation */
+.anim-progress-bar {
+  transform-origin: 0% 50%;
+  animation: anim-progress-bar 2s infinite linear;
+}
+@keyframes anim-progress-bar {
+  0% {
+    transform: translateX(50%) scaleX(0.5);
+  }
+  50% {
+    transform: translateX(0) scaleX(0.5);
+  }
+  100% {
+    transform: translateX(50%) scaleX(0.5);
+  }
+}
+
+.table thead th.progress-bar {
+  padding: 0px;
+}
+
 #nav-logo {
   max-height: 80px;
 }
@@ -77,7 +165,7 @@ nav#page-navigation a:active {
   display: flex;
   flex-direction: column;
   text-align: center;
-  width: 15rem;
+  width: 13rem;
   min-height: 15rem;
   padding: 1rem 0.5rem;
   margin: 0.3rem;
@@ -88,3 +176,16 @@ nav#page-navigation a:active {
 .block-buttons a:active {
   background-color: rgb(var(--color-primary-500));
 }
+
+.loader .fa-solid {
+  display: none;
+}
+
+.loader:disabled i.fa-solid,
+.loader[disabled] i.fa-solid {
+  display: inline;
+}
+
+.table.align-middle tbody td {
+  vertical-align: middle;
+}
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 5485d9b1..ecdbdec4 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -1,4 +1,13 @@
 import { error, type NumericRange } from '@sveltejs/kit';
+import { browser } from '$app/environment';
+
+// TODO: fix any types
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+let token = '';
+if (browser) {
+  token = sessionStorage.getItem('token') || '';
+}
 
 async function send({
   method,
@@ -30,7 +39,7 @@ async function send({
   }
 
   console.debug('fetching', `${window.location.origin}/${path}`, opts);
-  const res = await fetch(`${window.location.origin}${path}`, opts);
+  const res = await fetch(`${window.location.origin}/${path}`, opts);
   if (res.ok || res.status === 422) {
     const text = await res.text();
     console.log('text', text);
@@ -44,18 +53,18 @@ async function send({
   throw error(res.status as NumericRange<400, 599>, await res.text());
 }
 
-export function get(path: string, token: string) {
+export function get(path: string) {
   return send({ method: 'GET', path, token });
 }
 
-export function del(path: string, token: string) {
+export function del(path: string) {
   return send({ method: 'DELETE', path, token });
 }
 
-export function post(path: string, token: string, data: any) {
+export function post(path: string, data: any) {
   return send({ method: 'POST', path, token, data });
 }
 
-export function put(path: string, token: string, data: any) {
+export function put(path: string, data: any) {
   return send({ method: 'PUT', path, token, data });
 }
diff --git a/src/lib/content.svelte b/src/lib/component/content.svelte
similarity index 55%
rename from src/lib/content.svelte
rename to src/lib/component/content.svelte
index 4b8ab29e..c23a6f39 100644
--- a/src/lib/content.svelte
+++ b/src/lib/component/content.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
-  export let title = 'Unknown page title';
-  export let subtitle = '';
+  export let title: string = '';
+  export let subtitle: string = '';
 </script>
 
 <section class="main-content">
-  <h1 class="h1 mb-4 text-center">
-    {title}
-  </h1>
+  {#if title}<h1 class="mb-4">{title}</h1>{/if}
   {#if subtitle}<p class="subtitle mb-4 text-center">{subtitle}</p>{/if}
   <slot />
 </section>
diff --git a/src/lib/component/dataset/cell/actions.svelte b/src/lib/component/dataset/cell/actions.svelte
new file mode 100644
index 00000000..7c8524d4
--- /dev/null
+++ b/src/lib/component/dataset/cell/actions.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import DataSetStore from '$lib/store/dataset';
+
+  export let data = { cell: '', row: { archived: false } };
+  let toggleButton: HTMLButtonElement;
+
+  async function toggleArchive() {
+    toggleButton.disabled = true;
+    DataSetStore.toggleArchived(data.cell);
+    toggleButton.disabled = false;
+  }
+</script>
+
+{#if data.row.archived}
+  <button
+    disabled
+    data-testid={`dataset-action-view-${data.cell}`}
+    type="button"
+    class="btn bg-primary-500 text-on-primary-token">View</button
+  >
+  <button
+    bind:this={toggleButton}
+    data-testid={`dataset-action-restore-${data.cell}`}
+    type="button"
+    class="btn bg-secondary-500 text-on-secondary-token loader"
+    on:click={toggleArchive}><i class="fa-solid fa-circle-notch fa-spin mr-1" /> Restore</button
+  >
+{:else}
+  <a
+    data-testid={`dataset-action-view-${data.cell}`}
+    href={`${$page.url.pathname}/${data.cell}`}
+    class="btn bg-primary-500 text-on-primary-token">View</a
+  >
+  <button
+    bind:this={toggleButton}
+    data-testid={`dataset-action-archive-${data.cell}`}
+    type="button"
+    class="btn bg-secondary-500 text-on-secondary-token loader"
+    on:click={toggleArchive}><i class="fa-solid fa-circle-notch fa-spin mr-1" /> Archive</button
+  >
+{/if}
diff --git a/src/lib/component/dataset/cell/copy-button.svelte b/src/lib/component/dataset/cell/copy-button.svelte
new file mode 100644
index 00000000..36a9b978
--- /dev/null
+++ b/src/lib/component/dataset/cell/copy-button.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { clipboard } from '@skeletonlabs/skeleton';
+
+  export let data = { cell: '', row: {} };
+
+  let buttonText = 'Copy';
+  let timer: ReturnType<typeof setTimeout>;
+
+  function debounce(text: string) {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      buttonText = text;
+    }, 4500);
+  }
+  function copyToClipboard() {
+    debounce(buttonText);
+    buttonText = 'Copied!';
+  }
+</script>
+
+<div class="flex justify-between items-center">
+  <span class="uuid">{data.cell}</span>
+  <button
+    type="button"
+    class="btn w-24 bg-primary-500 text-on-primary-token"
+    on:click={copyToClipboard}
+    use:clipboard={data.cell}
+  >
+    {buttonText}
+  </button>
+</div>
diff --git a/src/lib/component/datatable/accessories/count.svelte b/src/lib/component/datatable/accessories/count.svelte
new file mode 100644
index 00000000..f9d00678
--- /dev/null
+++ b/src/lib/component/datatable/accessories/count.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { DataHandler } from '@vincjo/datatables';
+  export let handler: DataHandler;
+  const rowCount = handler.getRowCount();
+</script>
+
+<aside class="text-sm leading-8 mr-6">
+  {#if $rowCount.total > 0}
+    <b>{$rowCount.start}</b>
+    - <b>{$rowCount.end}</b>
+    / <b>{$rowCount.total}</b>
+  {/if}
+</aside>
diff --git a/src/lib/component/datatable/accessories/filter.svelte b/src/lib/component/datatable/accessories/filter.svelte
new file mode 100644
index 00000000..6bb768c6
--- /dev/null
+++ b/src/lib/component/datatable/accessories/filter.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { DataHandler } from '@vincjo/datatables';
+  export let handler: DataHandler;
+  export let filterBy: string;
+  let value: string;
+</script>
+
+<th>
+  <input
+    class="input text-sm w-full"
+    type="text"
+    placeholder="Filter"
+    bind:value
+    on:input={() => {
+      if (filterBy) handler.filter(value, filterBy);
+    }}
+  />
+</th>
diff --git a/src/lib/component/datatable/accessories/pagination.svelte b/src/lib/component/datatable/accessories/pagination.svelte
new file mode 100644
index 00000000..5c4fc511
--- /dev/null
+++ b/src/lib/component/datatable/accessories/pagination.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import type { DataHandler } from '@vincjo/datatables';
+  export let handler: DataHandler;
+  const pageNumber = handler.getPageNumber();
+  const pageCount = handler.getPageCount();
+  const pages = handler.getPages({ ellipsis: true });
+</script>
+
+<!-- Desktop buttons -->
+<section class="btn-group variant-ghost-surface [&>*+*]:border-surface-500 h-10 hidden lg:block">
+  <button
+    type="button"
+    class="hover:variant-soft-primary"
+    class:disabled={$pageNumber === 1}
+    on:click={() => handler.setPage('previous')}
+  >
+    ←
+  </button>
+  {#each $pages as page}
+    <button
+      type="button"
+      class="hover:variant-soft-primary"
+      class:active={$pageNumber === page}
+      class:ellipse={page === null}
+      on:click={() => handler.setPage(page)}
+    >
+      {page ?? '...'}
+    </button>
+  {/each}
+  <button
+    type="button"
+    class="hover:variant-soft-primary"
+    class:disabled={$pageNumber === $pageCount}
+    on:click={() => handler.setPage('next')}
+  >
+    →
+  </button>
+</section>
+
+<!-- Mobile buttons -->
+<section class="lg:hidden">
+  <button
+    type="button"
+    class="btn variant-ghost-surface mr-2 mb-2 hover:variant-soft-primary"
+    class:disabled={$pageNumber === 1}
+    on:click={() => handler.setPage('previous')}
+  >
+    ←
+  </button>
+  <button
+    type="button"
+    class="btn variant-ghost-surface mb-2 hover:variant-soft-primary"
+    class:disabled={$pageNumber === $pageCount}
+    on:click={() => handler.setPage('next')}
+  >
+    →
+  </button>
+</section>
diff --git a/src/lib/component/datatable/accessories/rows.svelte b/src/lib/component/datatable/accessories/rows.svelte
new file mode 100644
index 00000000..c18fb38b
--- /dev/null
+++ b/src/lib/component/datatable/accessories/rows.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { DataHandler } from '@vincjo/datatables';
+  export let handler: DataHandler;
+  const rowsPerPage = handler.getRowsPerPage();
+  const options = [5, 10, 20, 50, 100];
+</script>
+
+<aside class="flex place-items-center">
+  Show
+  <select class="select ml-2" bind:value={$rowsPerPage}>
+    {#each options as option}
+      <option value={option}>
+        {option}
+      </option>
+    {/each}
+  </select>
+</aside>
diff --git a/src/lib/component/datatable/accessories/search.svelte b/src/lib/component/datatable/accessories/search.svelte
new file mode 100644
index 00000000..8618b671
--- /dev/null
+++ b/src/lib/component/datatable/accessories/search.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { DataHandler } from '@vincjo/datatables';
+  export let handler: DataHandler;
+  let value: string;
+</script>
+
+<input
+  class="input sm:w-64 w-36"
+  type="search"
+  placeholder="Search..."
+  bind:value
+  on:input={() => handler.search(value)}
+/>
diff --git a/src/lib/component/datatable/accessories/sort.svelte b/src/lib/component/datatable/accessories/sort.svelte
new file mode 100644
index 00000000..d5b4c12d
--- /dev/null
+++ b/src/lib/component/datatable/accessories/sort.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { DataHandler } from '@vincjo/datatables';
+
+  export let handler: DataHandler;
+  export let orderBy: string;
+
+  const sorted = handler.getSort();
+</script>
+
+<th on:click={() => handler.sort(orderBy)} class="cursor-pointer select-none">
+  <div class="flex h-full items-center justify-start gap-x-2">
+    <slot />
+    {#if $sorted.identifier === orderBy}
+      {#if $sorted.direction === 'asc'}
+        &darr;
+      {:else if $sorted.direction === 'desc'}
+        &uarr;
+      {/if}
+    {:else}
+      &updownarrow;
+    {/if}
+  </div>
+</th>
diff --git a/src/lib/component/datatable/table.svelte b/src/lib/component/datatable/table.svelte
new file mode 100644
index 00000000..69335031
--- /dev/null
+++ b/src/lib/component/datatable/table.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+  import { DataHandler } from '@vincjo/datatables';
+
+  import ThSort from './accessories/sort.svelte';
+  import ThFilter from './accessories/filter.svelte';
+  import Search from './accessories/search.svelte';
+  import RowsPerPage from './accessories/rows.svelte';
+  import RowCount from './accessories/count.svelte';
+  import Pagination from './accessories/pagination.svelte';
+  import type { Indexable } from '$lib/types';
+
+  interface Column {
+    dataElement: string;
+    label: string;
+  }
+
+  // Parameters
+  export let filter = false;
+  export let search = false;
+  export let sort = false;
+  export let defaultRowsPerPage = 5;
+  export let columns: Column[] = [];
+  export let cellOverides: Indexable = {};
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  export let data: any = [];
+
+  $: handler = new DataHandler(data, { rowsPerPage: defaultRowsPerPage });
+  $: rows = handler.getRows();
+</script>
+
+<div class="overflow-x-auto space-y-4">
+  {#if search}
+    <header class="flex justify-between gap-4">
+      <Search {handler} />
+    </header>
+  {/if}
+  <table class="table table-hover table-compact w-full table-auto align-middle">
+    <thead>
+      {#if sort}
+        <tr>
+          {#each columns as column}
+            <ThSort {handler} orderBy={column.dataElement}>{column.label}</ThSort>
+          {/each}
+        </tr>
+      {:else}
+        <tr>
+          {#each columns as column}
+            <th>{column.label}</th>
+          {/each}
+        </tr>
+      {/if}
+      {#if filter}
+        <tr>
+          {#each columns as column}
+            <ThFilter {handler} filterBy={column.dataElement} />
+          {/each}
+        </tr>
+      {/if}
+    </thead>
+    <tbody>
+      {#if $rows.length > 0}
+        {#each $rows as row}
+          <tr>
+            {#each columns as column}
+              <td>
+                {#if cellOverides[column.dataElement]}
+                  <svelte:component
+                    this={cellOverides[column.dataElement]}
+                    data={{ row, cell: row[column.dataElement] }}
+                  />
+                {:else}
+                  {row[column.dataElement]}
+                {/if}
+              </td>
+            {/each}
+          </tr>
+        {/each}
+      {:else}
+        <tr><td colspan={columns.length}>No entries found.</td></tr>
+      {/if}
+    </tbody>
+  </table>
+  <footer class="flex justify-between">
+    <RowCount {handler} />
+    <div class="flex justify-end gap-4">
+      <RowsPerPage {handler} />
+      <Pagination {handler} />
+    </div>
+  </footer>
+</div>
diff --git a/src/lib/component/error-alert.svelte b/src/lib/component/error-alert.svelte
new file mode 100644
index 00000000..7dc43dca
--- /dev/null
+++ b/src/lib/component/error-alert.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let title: string;
+</script>
+
+<aside data-testid="error-alert" class="alert bg-error-100 text-on-error-token">
+  <i class="fa-solid fa-triangle-exclamation text-4xl" />
+  <div class="alert-message">
+    <h3 class="h3 text-left">{title}</h3>
+    <slot />
+  </div>
+</aside>
diff --git a/src/lib/navigation.svelte b/src/lib/component/navigation.svelte
similarity index 93%
rename from src/lib/navigation.svelte
rename to src/lib/component/navigation.svelte
index a80d64a2..a6d8ae3e 100644
--- a/src/lib/navigation.svelte
+++ b/src/lib/component/navigation.svelte
@@ -11,7 +11,6 @@
     { path: '/dataset', text: 'Dataset Management' },
     { path: '/help', text: 'Help' },
     { path: '/admin', text: 'Admin' },
-    { path: '/admin/super', text: 'Super Admin' },
     { path: '/#', id: 'logout', text: 'Logout' }
   ];
 
@@ -30,8 +29,10 @@
         <a
           id={getId(route)}
           href={route.path}
-          aria-current={$page.url.pathname === route.path ? 'page' : undefined}>{route.text}</a
+          aria-current={$page.url.pathname === route.path ? 'page' : undefined}
         >
+          {route.text}
+        </a>
       {/each}
     </nav>
   </svelte:fragment>
diff --git a/src/lib/configuration.ts b/src/lib/configuration.ts
index 074437f8..08171177 100644
--- a/src/lib/configuration.ts
+++ b/src/lib/configuration.ts
@@ -1,28 +1,29 @@
 export const branding = {
+  baseUrl: 'https://nhanes-dev.hms.harvard.edu/',
   help: {
     links: [
       {
         title: 'User Guide',
         description: 'Complete user manual for seamless navigation and utilization.',
-        icon: 'fa-solid fa-book fa-5x',
+        icon: 'fa-solid fa-book fa-4x',
         url: '/help/dummy?title=' + encodeURI('User Guide')
       },
       {
         title: 'Video Library',
         description: "Example 'how-to' video demonstrations.",
-        icon: 'fa-solid fa-tv fa-5x',
+        icon: 'fa-solid fa-tv fa-4x',
         url: '/help/dummy?title=' + encodeURI('Video Library')
       },
       {
         title: 'Request Assistance',
         description: 'Need help? Submit a service desk ticket, we are here to help!',
-        icon: 'fa-solid fa-hands-holding-circle fa-5x',
+        icon: 'fa-solid fa-hands-holding-circle fa-4x',
         url: '/help/dummy?title=' + encodeURI('Request Assistance')
       },
       {
         title: 'PIC-Sure Website',
         description: 'Check out the PIC-Sure website for information.',
-        icon: 'fa-solid fa-circle-info fa-5x',
+        icon: 'fa-solid fa-circle-info fa-4x',
         url: '/help/dummy?title=' + encodeURI('PIC-Sure Website')
       }
     ]
diff --git a/src/lib/model/dataset.ts b/src/lib/model/dataset.ts
new file mode 100644
index 00000000..3668edd3
--- /dev/null
+++ b/src/lib/model/dataset.ts
@@ -0,0 +1,52 @@
+import type { Indexable } from '$lib/types';
+
+// TODO: Replace metadata nad query types
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export type DataSet = Indexable & {
+  uuid: string;
+  user: string;
+  name: string;
+  archived: boolean;
+  metadata: any;
+  query: any;
+  queryId: string;
+  federated?: any;
+  startTime: string;
+};
+/* eslint-enable @typescript-eslint/no-explicit-any */
+
+function secondsToDate(seconds: number) {
+  const dt = new Date(seconds);
+  const year = dt.toLocaleString('default', { year: 'numeric' });
+  const month = dt.toLocaleString('default', { month: '2-digit' });
+  const day = dt.toLocaleString('default', { day: '2-digit' });
+  return year + '-' + month + '-' + day;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function mapDataset(data: any) {
+  let query, federated;
+  try {
+    const jsonQuery = JSON.parse(data.query.query);
+    query = jsonQuery?.query;
+    if (jsonQuery?.commonAreaUUID) {
+      federated = {
+        commonId: jsonQuery?.commonAreaUUID
+      };
+    }
+  } catch (_) {
+    query = {};
+  }
+  const dataset: DataSet = {
+    uuid: data.uuid,
+    user: data.user,
+    name: data.name,
+    archived: data.archived,
+    metadata: data.metadata,
+    query,
+    federated,
+    queryId: data.query.uuid,
+    startTime: secondsToDate(data.query.startTime)
+  };
+  return dataset;
+}
diff --git a/src/lib/store/dataset.ts b/src/lib/store/dataset.ts
new file mode 100644
index 00000000..db299d67
--- /dev/null
+++ b/src/lib/store/dataset.ts
@@ -0,0 +1,51 @@
+import { get, writable, derived, type Readable, type Writable } from 'svelte/store';
+
+import { mapDataset, type DataSet } from '$lib/model/dataset';
+import * as api from '$lib/api';
+
+const datasets: Writable<DataSet[]> = writable([]);
+const active: Readable<DataSet[]> = derived(datasets, ($ds) => $ds.filter((ds) => !ds.archived));
+const archived: Readable<DataSet[]> = derived(datasets, ($ds) => $ds.filter((ds) => ds.archived));
+
+async function loadDatasets() {
+  const res = await api.get('picsure/dataset/named');
+  datasets.set(res.map(mapDataset));
+}
+
+async function toggleArchived(uuid: string) {
+  const store: DataSet[] = get(datasets);
+  const datasetIndex: number = store.findIndex((ds) => ds.uuid == uuid);
+  if (datasetIndex == -1) {
+    return Promise.reject('Could not find dataset in store.');
+  }
+  const dataset: DataSet = store[datasetIndex];
+  const query = {
+    queryId: dataset?.queryId,
+    name: dataset?.name,
+    metadata: dataset?.metadata,
+    archived: !dataset?.archived
+  };
+  const res = await api.put(`picsure/dataset/named/${uuid}`, query);
+  store[datasetIndex] = mapDataset(res);
+  datasets.set(store);
+}
+
+async function getDataset(uuid: string) {
+  const store: DataSet[] = get(datasets);
+  const datasetIndex: number = store.findIndex((ds) => ds.uuid == uuid);
+  if (datasetIndex > -1) {
+    return store[datasetIndex];
+  }
+
+  const res = await api.get(`picsure/dataset/named/${uuid}`);
+  return mapDataset(res);
+}
+
+export default {
+  subscribe: datasets.subscribe,
+  active,
+  archived,
+  loadDatasets,
+  toggleArchived,
+  getDataset
+};
diff --git a/src/lib/types.ts b/src/lib/types.ts
new file mode 100644
index 00000000..3fe2f928
--- /dev/null
+++ b/src/lib/types.ts
@@ -0,0 +1,4 @@
+export type Indexable = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 77827b75..f751c573 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -7,7 +7,7 @@
     getModalStore,
     type ModalSettings
   } from '@skeletonlabs/skeleton';
-  import Navigation from '$lib/navigation.svelte';
+  import Navigation from '$lib/component/navigation.svelte';
   import '@fortawesome/fontawesome-free/css/all.min.css';
   import '../app.postcss';
   import { onMount } from 'svelte';
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 95c65f1b..309a0e67 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Content from '$lib/content.svelte';
+  import Content from '$lib/component/content.svelte';
 </script>
 
 <Content title="Home">
diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
index 60a31a73..ae828474 100644
--- a/src/routes/admin/+page.svelte
+++ b/src/routes/admin/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Content from '$lib/content.svelte';
+  import Content from '$lib/component/content.svelte';
 </script>
 
 <Content title="Admin">
diff --git a/src/routes/admin/super/+page.svelte b/src/routes/admin/super/+page.svelte
index 1fc1e7d8..15887c9c 100644
--- a/src/routes/admin/super/+page.svelte
+++ b/src/routes/admin/super/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Content from '$lib/content.svelte';
+  import Content from '$lib/component/content.svelte';
 </script>
 
 <Content title="Super Admin">
diff --git a/src/routes/api/+page.svelte b/src/routes/api/+page.svelte
index 5873d133..677b9e6f 100644
--- a/src/routes/api/+page.svelte
+++ b/src/routes/api/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Content from '$lib/content.svelte';
+  import Content from '$lib/component/content.svelte';
 </script>
 
 <Content title="API">
diff --git a/src/routes/dataset/+page.svelte b/src/routes/dataset/+page.svelte
index 27430139..acadc4ec 100644
--- a/src/routes/dataset/+page.svelte
+++ b/src/routes/dataset/+page.svelte
@@ -1,7 +1,52 @@
 <script lang="ts">
-  import Content from '$lib/content.svelte';
+  import { ProgressBar } from '@skeletonlabs/skeleton';
+
+  import type { Indexable } from '$lib/types';
+  import DataSetStore from '$lib/store/dataset';
+  import ErrorAlert from '$lib/component/error-alert.svelte';
+  import Content from '$lib/component/content.svelte';
+  import Datatable from '$lib/component/datatable/table.svelte';
+  import CopyButton from '$lib/component/dataset/cell/copy-button.svelte';
+  import Actions from '$lib/component/dataset/cell/actions.svelte';
+
+  const columns = [
+    { dataElement: 'name', label: 'Dataset ID Name' },
+    { dataElement: 'startTime', label: 'Created' },
+    { dataElement: 'queryId', label: 'Query ID' },
+    { dataElement: 'uuid', label: 'Actions' }
+  ];
+
+  const cellOverides: Indexable = {
+    queryId: CopyButton,
+    uuid: Actions
+  };
+
+  let { active, archived, loadDatasets } = DataSetStore;
+
+  let displayArchived = false;
 </script>
 
 <Content title="Dataset Management">
-  <p>Sample page data for the dataset page.</p>
+  {#await loadDatasets()}
+    <h3 class="text-left">Loading</h3>
+    <ProgressBar animIndeterminate="anim-progress-bar" />
+  {:then}
+    <h3 class="text-left">Active Datasets</h3>
+    <Datatable data={$active} {columns} {cellOverides} />
+    {#if displayArchived}
+      <h3 class="text-left mt-5">Archived Datasets</h3>
+      <Datatable data={$archived} {columns} {cellOverides} />
+    {/if}
+    <button
+      data-testid="dataset-toggle-archive"
+      type="button"
+      class="btn bg-secondary-500 text-on-secondary-token"
+      on:click={() => (displayArchived = !displayArchived)}
+      >{displayArchived ? 'Exclude' : 'Include'} archived Dataset IDs</button
+    >
+  {:catch}
+    <ErrorAlert title="API Error">
+      <p>Something went wrong when sending your request.</p>
+    </ErrorAlert>
+  {/await}
 </Content>
diff --git a/src/routes/dataset/[uuid]/+page.svelte b/src/routes/dataset/[uuid]/+page.svelte
new file mode 100644
index 00000000..4831f114
--- /dev/null
+++ b/src/routes/dataset/[uuid]/+page.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { ProgressBar } from '@skeletonlabs/skeleton';
+
+  import { page } from '$app/stores';
+  import type { DataSet } from '$lib/model/dataset';
+  import DataSetStore from '$lib/store/dataset';
+  import Content from '$lib/component/content.svelte';
+  import ErrorAlert from '$lib/component/error-alert.svelte';
+
+  const { getDataset } = DataSetStore;
+
+  let dataset: DataSet;
+
+  async function loadDataset() {
+    dataset = await getDataset($page.params.uuid);
+  }
+</script>
+
+<Content title="View Dataset">
+  {#await loadDataset()}
+    <h3 class="text-left">Loading</h3>
+    <ProgressBar animIndeterminate="anim-progress-bar" />
+  {:then}
+    <section id="detail-summary-container" class="m-3">
+      <h2 class="text-left my-1">Dataset ID Summary</h2>
+      <table class="table bg-transparent">
+        <tr>
+          <td>Dataset ID Name:</td>
+          <td data-testid="dataset-summary-name">{dataset.name}</td>
+        </tr>
+        <tr>
+          <td>Dataset ID:</td>
+          <td data-testid="dataset-summary-uuid">{dataset.uuid}</td>
+        </tr>
+      </table>
+    </section>
+    <section id="detail-filters-container" class="m-3">
+      <h2 class="text-left my-1">Filters Applied</h2>
+      <ul data-testid="dataset-summary-filters" class="primary-list">
+        <li>query.categoryFilters: {JSON.stringify(dataset.query?.categoryFilters)}</li>
+        <li>query.numericFilters: {JSON.stringify(dataset.query?.numericFilters)}</li>
+        <li>query.variantInfoFilters: {JSON.stringify(dataset.query?.variantInfoFilters)}</li>
+      </ul>
+    </section>
+    <section id="detail-variables-container" class="m-3">
+      <h2 class="text-left my-1">Additional Variables Included in Dataset</h2>
+      <ul data-testid="dataset-summary-variables" class="primary-list">
+        <li>query.fields: {JSON.stringify(dataset.query?.fields)}</li>
+      </ul>
+    </section>
+  {:catch}
+    <ErrorAlert title="API Error">
+      <p>An error occured while retrieving dataset {$page.params.uuid}.</p>
+    </ErrorAlert>
+  {/await}
+</Content>
diff --git a/src/routes/explorer/+page.svelte b/src/routes/explorer/+page.svelte
index ffbdfcb3..2b98b0ca 100644
--- a/src/routes/explorer/+page.svelte
+++ b/src/routes/explorer/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Content from '$lib/content.svelte';
+  import Content from '$lib/component/content.svelte';
 </script>
 
 <Content title="Explorer/Query Builder">
diff --git a/src/routes/help/+page.svelte b/src/routes/help/+page.svelte
index 7304906b..85a8bb7a 100644
--- a/src/routes/help/+page.svelte
+++ b/src/routes/help/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Content from '$lib/content.svelte';
+  import Content from '$lib/component/content.svelte';
   import { branding } from '$lib/configuration';
 </script>
 
diff --git a/src/routes/help/dummy/+page.svelte b/src/routes/help/dummy/+page.svelte
index 08da9880..eb4e3170 100644
--- a/src/routes/help/dummy/+page.svelte
+++ b/src/routes/help/dummy/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Content from '$lib/content.svelte';
+  import Content from '$lib/component/content.svelte';
   import { page } from '$app/stores';
   export const title = $page.url.searchParams.get('title') || 'Dummy';
 </script>
diff --git a/src/routes/users/+page.svelte b/src/routes/users/+page.svelte
index 2703696c..809f87d5 100644
--- a/src/routes/users/+page.svelte
+++ b/src/routes/users/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Content from '$lib/content.svelte';
+  import Content from '$lib/component/content.svelte';
 </script>
 
 <Content title="Users">
diff --git a/tests/custom-context.ts b/tests/custom-context.ts
new file mode 100644
index 00000000..522811f1
--- /dev/null
+++ b/tests/custom-context.ts
@@ -0,0 +1,11 @@
+import { test as base } from '@playwright/test';
+
+export const test = base.extend({
+  context: async ({ context }, use) => {
+    await context.addInitScript(() => {
+      sessionStorage.setItem('token', 'dummy user token');
+    });
+
+    use(context);
+  }
+});
diff --git a/tests/lib/component/navigation/test.ts b/tests/lib/component/navigation/test.ts
new file mode 100644
index 00000000..3d3156f1
--- /dev/null
+++ b/tests/lib/component/navigation/test.ts
@@ -0,0 +1,56 @@
+import { expect, type Route } from '@playwright/test';
+import { test } from '../../../custom-context';
+import { datasets as mockData } from '../../../mock-data';
+
+// TODO: This should probably be moved to a component test, not an e2e/integration test.
+
+test.describe('navigation', () => {
+  const routes = [
+    { path: '/', id: 'nav-link-home', headerText: 'Home' },
+    { path: '/explorer', id: 'nav-link-explorer', headerText: 'Explorer/Query Builder' },
+    { path: '/users', id: 'nav-link-users', headerText: 'Users' },
+    { path: '/api', id: 'nav-link-api', headerText: 'API' },
+    {
+      path: '/dataset',
+      id: 'nav-link-dataset',
+      headerText: 'Dataset Management',
+      mock: { path: '*/**/picsure/dataset/named', data: mockData }
+    },
+    { path: '/help', id: 'nav-link-help', headerText: 'Knowledge Hub' },
+    { path: '/admin', id: 'nav-link-admin', headerText: 'Admin' }
+  ];
+
+  routes.forEach((route) => {
+    test(`Path ${route.path} navigation bar has correct active element`, async ({ page }) => {
+      // Given
+      if (route.mock) {
+        await page.route(route.mock.path, (r: Route) => r.fulfill({ json: route.mock.data }));
+      }
+      await page.goto(route.path);
+
+      // Then
+      // Check that this element is active
+      const navItem = page.locator('#' + route.id);
+      await expect(navItem).toHaveAttribute('aria-current', 'page');
+
+      // Check that other elements aren't active
+      const inactive = routes
+        .filter((altRoute) => altRoute.path !== route.path)
+        .map((altRoute) => {
+          const navItem = page.locator('#' + altRoute.id);
+          return expect(navItem).not.toHaveAttribute('aria-current');
+        });
+      await Promise.all(inactive);
+    });
+  });
+  test('Print page hides navigation links', async ({ page }) => {
+    // Given
+    await page.goto('/');
+
+    // When
+    await page.emulateMedia({ media: 'print' });
+
+    // Then
+    await expect(page.locator('#page-navigation')).not.toBeVisible();
+  });
+});
diff --git a/tests/lib/test.ts b/tests/lib/test.ts
deleted file mode 100644
index f17b9150..00000000
--- a/tests/lib/test.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-const routes = [
-  { path: '/', id: 'nav-link-home', headerText: 'Home' },
-  { path: '/explorer', id: 'nav-link-explorer', headerText: 'Explorer/Query Builder' },
-  { path: '/users', id: 'nav-link-users', headerText: 'Users' },
-  { path: '/api', id: 'nav-link-api', headerText: 'API' },
-  { path: '/dataset', id: 'nav-link-dataset', headerText: 'Dataset Management' },
-  { path: '/help', id: 'nav-link-help', headerText: 'Knowledge Hub' },
-  { path: '/admin', id: 'nav-link-admin', headerText: 'Admin' },
-  { path: '/admin/super', id: 'nav-link-admin-super', headerText: 'Super Admin' }
-];
-
-test.describe('Navigation', () => {
-  routes.forEach((route) => {
-    test(`${route.path} navigation bar has correct active element`, async ({ page }) => {
-      await page.goto(route.path);
-
-      // Check that this element is active
-      const navItem = page.locator('#' + route.id);
-      await expect(navItem).toHaveAttribute('aria-current', 'page');
-
-      // Check that other elements aren't active
-      const inactive = routes
-        .filter((altRoute) => altRoute.path !== route.path)
-        .map((altRoute) => {
-          const navItem = page.locator('#' + altRoute.id);
-          return expect(navItem).not.toHaveAttribute('aria-current');
-        });
-      await Promise.all(inactive);
-    });
-  });
-});
diff --git a/tests/mock-data.ts b/tests/mock-data.ts
new file mode 100644
index 00000000..fc22d7cd
--- /dev/null
+++ b/tests/mock-data.ts
@@ -0,0 +1,24 @@
+export const datasets = [
+  {
+    // Active
+    uuid: '3fc5301a-aa58-4abf-bcec-369d4ed9fdd2',
+    user: 'test@user',
+    name: 'active demo',
+    archived: false,
+    query: {
+      uuid: '6104ee94-1b0c-44cb-bed2-08c95d1d63ee'
+    },
+    metadata: {}
+  },
+  {
+    // Archived
+    uuid: '73952c80-641c-4f35-a527-ebfb3c55e02b',
+    user: 'test@user',
+    name: 'inactive demo',
+    archived: true,
+    query: {
+      uuid: '853c2c35-f665-462e-8775-aa07121ae3dc'
+    },
+    metadata: {}
+  }
+];
diff --git a/tests/routes/dataset/test.ts b/tests/routes/dataset/test.ts
new file mode 100644
index 00000000..45af5c20
--- /dev/null
+++ b/tests/routes/dataset/test.ts
@@ -0,0 +1,146 @@
+import { expect, type Route } from '@playwright/test';
+import { test } from '../../custom-context';
+import { datasets as mockData } from '../../mock-data';
+
+test.describe('dataset', () => {
+  test('Shows active datasets table', async ({ page }) => {
+    // Given
+    await page.route('*/**/picsure/dataset/named', async (route: Route) =>
+      route.fulfill({ json: mockData })
+    );
+    await page.goto('/dataset');
+
+    const responsePromise = page.waitForResponse((resp) =>
+      resp.url().includes('picsure/dataset/named')
+    );
+    await responsePromise;
+
+    // Then
+    await expect(page.getByText('Active Datasets', { exact: true })).toBeVisible();
+    await expect(page.getByText(mockData[0].query.uuid, { exact: true })).toBeVisible();
+  });
+  test('Should not show archived datasets table on page load', async ({ page }) => {
+    // Given
+    await page.route('*/**/picsure/dataset/named', (route: Route) =>
+      route.fulfill({ json: mockData })
+    );
+    await page.goto('/dataset');
+
+    // Then
+    await expect(page.getByText('Archived Datasets', { exact: true })).not.toBeVisible();
+    await expect(page.getByText(mockData[1].query.uuid, { exact: true })).not.toBeVisible();
+  });
+  test('Shows archived datasets on archive toggle button press', async ({ page }) => {
+    // Given
+    await page.route('*/**/picsure/dataset/named', (route: Route) =>
+      route.fulfill({ json: mockData })
+    );
+    await page.goto('/dataset');
+
+    // When
+    const toggleButton = page.getByTestId('dataset-toggle-archive');
+    await toggleButton.click();
+
+    // Then
+    await expect(page.getByText('Archived Datasets', { exact: true })).toBeVisible();
+    await expect(page.getByText(mockData[1].query.uuid, { exact: true })).toBeVisible();
+  });
+  test('Archive button press moves item to archived', async ({ page }) => {
+    // Given
+    await page.route('*/**/picsure/dataset/named', (route: Route) =>
+      route.fulfill({ json: mockData })
+    );
+    await page.route(`*/**/picsure/dataset/named/${mockData[0].uuid}`, (route: Route) =>
+      route.fulfill({
+        json: {
+          ...mockData[0],
+          archived: true
+        }
+      })
+    );
+    await page.goto('/dataset');
+
+    // When
+    const archiveButton = page.getByTestId(`dataset-action-archive-${mockData[0].uuid}`);
+    await archiveButton.click();
+
+    const toggleButton = page.getByTestId('dataset-toggle-archive');
+    await toggleButton.click();
+
+    // Then
+    await expect(page.getByText(mockData[0].query.uuid, { exact: true })).toBeVisible();
+  });
+  test('Restore button press moves item to active', async ({ page }) => {
+    // Given
+    await page.route('*/**/picsure/dataset/named', (route: Route) =>
+      route.fulfill({ json: mockData })
+    );
+    await page.route(`*/**/picsure/dataset/named/${mockData[1].uuid}`, (route: Route) =>
+      route.fulfill({
+        json: {
+          ...mockData[1],
+          archived: false
+        }
+      })
+    );
+    await page.goto('/dataset');
+    const toggleButton = page.getByTestId('dataset-toggle-archive');
+    await toggleButton.click();
+
+    // When
+    const restoreButton = page.getByTestId(`dataset-action-restore-${mockData[1].uuid}`);
+    await restoreButton.click();
+    await toggleButton.click();
+
+    // Then
+    await expect(page.getByText(mockData[1].query.uuid, { exact: true })).toBeVisible();
+  });
+  test('View button should route to view page', async ({ page }) => {
+    // Given
+    await page.route('*/**/picsure/dataset/named', (route: Route) =>
+      route.fulfill({ json: mockData })
+    );
+    await page.goto('/dataset');
+
+    // When
+    const viewButton = page.getByTestId(`dataset-action-view-${mockData[0].uuid}`);
+    await viewButton.click();
+
+    // Then
+    await page.waitForURL(`**/dataset/${mockData[0].uuid}`);
+    await expect(page.url()).toContain(`/dataset/${mockData[0].uuid}`);
+  });
+  test('Error message on api error', async ({ page }) => {
+    // Given
+    await page.route('*/**/picsure/dataset/named', (route: Route) => route.abort('accessdenied'));
+    await page.goto('/dataset');
+
+    // Then
+    await expect(page.getByTestId('error-alert')).toBeVisible();
+  });
+});
+test.describe('dataset/[uuid]', () => {
+  test('Dataset values present on page', async ({ page }) => {
+    // Given
+    await page.route(`*/**/picsure/dataset/named/${mockData[0].uuid}`, (route: Route) =>
+      route.fulfill({ json: mockData[0] })
+    );
+    await page.goto(`/dataset/${mockData[0].uuid}`);
+
+    // Then
+    await expect(page.getByTestId('dataset-summary-name')).toBeVisible();
+    await expect(page.getByTestId('dataset-summary-uuid')).toBeVisible();
+    await expect(page.getByTestId('dataset-summary-filters')).toBeVisible();
+    await expect(page.getByTestId('dataset-summary-variables')).toBeVisible();
+  });
+  test('Error message on api error', async ({ page }) => {
+    // Given
+    await page.route(`*/**/picsure/dataset/named/${mockData[0].uuid}`, (route: Route) =>
+      route.abort('accessdenied')
+    );
+    await page.goto(`/dataset/${mockData[0].uuid}`);
+
+    // Then
+    await expect(page.getByTestId('error-alert')).toBeVisible();
+  });
+});

From 66082c73615ee0655b1e2d67a64080e5c7a2a51a Mon Sep 17 00:00:00 2001
From: Samantha <samantha.piatt@childrens.harvard.edu>
Date: Wed, 28 Feb 2024 14:02:13 -0500
Subject: [PATCH 02/11] Update src/lib/store/dataset.ts

Co-authored-by: James <Jamestp19@gmail.com>
---
 src/lib/store/dataset.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/store/dataset.ts b/src/lib/store/dataset.ts
index db299d67..526edb2e 100644
--- a/src/lib/store/dataset.ts
+++ b/src/lib/store/dataset.ts
@@ -14,7 +14,7 @@ async function loadDatasets() {
 
 async function toggleArchived(uuid: string) {
   const store: DataSet[] = get(datasets);
-  const datasetIndex: number = store.findIndex((ds) => ds.uuid == uuid);
+  const datasetIndex: number = store.findIndex((ds) => ds.uuid === uuid);
   if (datasetIndex == -1) {
     return Promise.reject('Could not find dataset in store.');
   }

From 9dcff8e1701b0f6a416b9dd21e36b79f33e323bb Mon Sep 17 00:00:00 2001
From: Samantha <samantha.piatt@childrens.harvard.edu>
Date: Wed, 28 Feb 2024 14:02:24 -0500
Subject: [PATCH 03/11] Update
 src/lib/component/datatable/accessories/filter.svelte

Co-authored-by: James <Jamestp19@gmail.com>
---
 src/lib/component/datatable/accessories/filter.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/component/datatable/accessories/filter.svelte b/src/lib/component/datatable/accessories/filter.svelte
index 6bb768c6..9cb60ace 100644
--- a/src/lib/component/datatable/accessories/filter.svelte
+++ b/src/lib/component/datatable/accessories/filter.svelte
@@ -12,7 +12,7 @@
     placeholder="Filter"
     bind:value
     on:input={() => {
-      if (filterBy) handler.filter(value, filterBy);
+      filterBy && handler.filter(value, filterBy);
     }}
   />
 </th>

From 51c8fdae30d6c05af4cb8c2c2ceee3090daa9e42 Mon Sep 17 00:00:00 2001
From: Samantha <samantha.piatt@childrens.harvard.edu>
Date: Wed, 28 Feb 2024 14:03:27 -0500
Subject: [PATCH 04/11] Update src/lib/configuration.ts

---
 src/lib/configuration.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/configuration.ts b/src/lib/configuration.ts
index 08171177..5f354cd7 100644
--- a/src/lib/configuration.ts
+++ b/src/lib/configuration.ts
@@ -1,5 +1,4 @@
 export const branding = {
-  baseUrl: 'https://nhanes-dev.hms.harvard.edu/',
   help: {
     links: [
       {

From af54455caf0e5860867f1822311679788126a2ad Mon Sep 17 00:00:00 2001
From: Samantha <samantha.piatt@childrens.harvard.edu>
Date: Wed, 28 Feb 2024 14:04:47 -0500
Subject: [PATCH 05/11] Update tests/routes/dataset/test.ts

---
 tests/routes/dataset/test.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/tests/routes/dataset/test.ts b/tests/routes/dataset/test.ts
index 45af5c20..b4031662 100644
--- a/tests/routes/dataset/test.ts
+++ b/tests/routes/dataset/test.ts
@@ -10,10 +10,6 @@ test.describe('dataset', () => {
     );
     await page.goto('/dataset');
 
-    const responsePromise = page.waitForResponse((resp) =>
-      resp.url().includes('picsure/dataset/named')
-    );
-    await responsePromise;
 
     // Then
     await expect(page.getByText('Active Datasets', { exact: true })).toBeVisible();

From 44b148f982e641d432b8779d070eeba65b1b9b27 Mon Sep 17 00:00:00 2001
From: Samantha <samantha.piatt@childrens.harvard.edu>
Date: Wed, 28 Feb 2024 14:05:23 -0500
Subject: [PATCH 06/11] Update src/lib/store/dataset.ts

Co-authored-by: James <Jamestp19@gmail.com>
---
 src/lib/store/dataset.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/store/dataset.ts b/src/lib/store/dataset.ts
index 526edb2e..c70ef6e9 100644
--- a/src/lib/store/dataset.ts
+++ b/src/lib/store/dataset.ts
@@ -15,7 +15,7 @@ async function loadDatasets() {
 async function toggleArchived(uuid: string) {
   const store: DataSet[] = get(datasets);
   const datasetIndex: number = store.findIndex((ds) => ds.uuid === uuid);
-  if (datasetIndex == -1) {
+  if (datasetIndex === -1) {
     return Promise.reject('Could not find dataset in store.');
   }
   const dataset: DataSet = store[datasetIndex];

From 8d617aecdc5719d03a29ad4488bf9a04df90a385 Mon Sep 17 00:00:00 2001
From: Samantha <samantha.piatt@childrens.harvard.edu>
Date: Wed, 28 Feb 2024 14:06:04 -0500
Subject: [PATCH 07/11] Update src/lib/store/dataset.ts

---
 src/lib/store/dataset.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/store/dataset.ts b/src/lib/store/dataset.ts
index c70ef6e9..4f4b3cf2 100644
--- a/src/lib/store/dataset.ts
+++ b/src/lib/store/dataset.ts
@@ -19,13 +19,13 @@ async function toggleArchived(uuid: string) {
     return Promise.reject('Could not find dataset in store.');
   }
   const dataset: DataSet = store[datasetIndex];
-  const query = {
+  const request = {
     queryId: dataset?.queryId,
     name: dataset?.name,
     metadata: dataset?.metadata,
     archived: !dataset?.archived
   };
-  const res = await api.put(`picsure/dataset/named/${uuid}`, query);
+  const res = await api.put(`picsure/dataset/named/${uuid}`, request);
   store[datasetIndex] = mapDataset(res);
   datasets.set(store);
 }

From 3fd69f5660aaa63e2b6b1e4667d1e118fb1fa0d5 Mon Sep 17 00:00:00 2001
From: Samantha <samantha.piatt@childrens.harvard.edu>
Date: Wed, 28 Feb 2024 14:06:19 -0500
Subject: [PATCH 08/11] Update src/lib/store/dataset.ts

Co-authored-by: James <Jamestp19@gmail.com>
---
 src/lib/store/dataset.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/store/dataset.ts b/src/lib/store/dataset.ts
index 4f4b3cf2..28933321 100644
--- a/src/lib/store/dataset.ts
+++ b/src/lib/store/dataset.ts
@@ -32,7 +32,7 @@ async function toggleArchived(uuid: string) {
 
 async function getDataset(uuid: string) {
   const store: DataSet[] = get(datasets);
-  const datasetIndex: number = store.findIndex((ds) => ds.uuid == uuid);
+  const datasetIndex: number = store.findIndex((ds) => ds.uuid === uuid);
   if (datasetIndex > -1) {
     return store[datasetIndex];
   }

From 3e4e4c819f5c264f709acc1d32c3de880370655b Mon Sep 17 00:00:00 2001
From: Samantha <samantha.piatt@childrens.harvard.edu>
Date: Wed, 28 Feb 2024 14:07:02 -0500
Subject: [PATCH 09/11] Update package.json

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index e502d6dd..4c071fde 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,8 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "svelte-kit sync && vite dev",
-    "build": "svelte-kit sync && vite build",
+    "dev": "vite dev",
+    "build": "vite build",
     "preview": "vite preview",
     "test": "npm run test:integration && npm run test:unit",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",

From ada1c654d874bddd1a18d191fbb73d9c0e1d1f58 Mon Sep 17 00:00:00 2001
From: Samantha Piatt <samantha.piatt@childrens.harvard.edu>
Date: Wed, 28 Feb 2024 14:13:08 -0500
Subject: [PATCH 10/11] Update api per code review comments from James.

---
 src/lib/api.ts               | 26 +++++++++-----------------
 tests/routes/dataset/test.ts |  1 -
 2 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/src/lib/api.ts b/src/lib/api.ts
index ecdbdec4..c847404c 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -4,20 +4,13 @@ import { browser } from '$app/environment';
 // TODO: fix any types
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-let token = '';
-if (browser) {
-  token = sessionStorage.getItem('token') || '';
-}
-
 async function send({
   method,
   path,
-  token,
   data
 }: {
   method: string;
   path: string;
-  token: string;
   data?: any; //TODO: Change this
 }) {
   const opts: { method: string; headers: { [key: string]: string }; body?: string } = {
@@ -30,12 +23,11 @@ async function send({
     opts.body = JSON.stringify(data);
   }
 
-  if (sessionStorage.token) {
-    token = sessionStorage.token;
-  }
-
-  if (token) {
-    opts.headers['Authorization'] = `Token ${token}`;
+  if (browser) {
+    const token = sessionStorage.getItem('token');
+    if (token) {
+      opts.headers['Authorization'] = `Token ${token}`;
+    }
   }
 
   console.debug('fetching', `${window.location.origin}/${path}`, opts);
@@ -54,17 +46,17 @@ async function send({
 }
 
 export function get(path: string) {
-  return send({ method: 'GET', path, token });
+  return send({ method: 'GET', path });
 }
 
 export function del(path: string) {
-  return send({ method: 'DELETE', path, token });
+  return send({ method: 'DELETE', path });
 }
 
 export function post(path: string, data: any) {
-  return send({ method: 'POST', path, token, data });
+  return send({ method: 'POST', path, data });
 }
 
 export function put(path: string, data: any) {
-  return send({ method: 'PUT', path, token, data });
+  return send({ method: 'PUT', path, data });
 }
diff --git a/tests/routes/dataset/test.ts b/tests/routes/dataset/test.ts
index b4031662..d37f35a9 100644
--- a/tests/routes/dataset/test.ts
+++ b/tests/routes/dataset/test.ts
@@ -10,7 +10,6 @@ test.describe('dataset', () => {
     );
     await page.goto('/dataset');
 
-
     // Then
     await expect(page.getByText('Active Datasets', { exact: true })).toBeVisible();
     await expect(page.getByText(mockData[0].query.uuid, { exact: true })).toBeVisible();

From 0c2bec895e3efcefdf65c411ac2b27dbcf87ac48 Mon Sep 17 00:00:00 2001
From: Samantha Piatt <samantha.piatt@childrens.harvard.edu>
Date: Wed, 28 Feb 2024 14:31:30 -0500
Subject: [PATCH 11/11] Refactor table sort/filter logic.

---
 src/lib/component/datatable/table.svelte | 27 ++++++++----------------
 1 file changed, 9 insertions(+), 18 deletions(-)

diff --git a/src/lib/component/datatable/table.svelte b/src/lib/component/datatable/table.svelte
index 69335031..721fc3c0 100644
--- a/src/lib/component/datatable/table.svelte
+++ b/src/lib/component/datatable/table.svelte
@@ -37,26 +37,17 @@
   {/if}
   <table class="table table-hover table-compact w-full table-auto align-middle">
     <thead>
-      {#if sort}
-        <tr>
-          {#each columns as column}
+      <tr>
+        {#each columns as column}
+          {#if sort}
             <ThSort {handler} orderBy={column.dataElement}>{column.label}</ThSort>
-          {/each}
-        </tr>
-      {:else}
-        <tr>
-          {#each columns as column}
-            <th>{column.label}</th>
-          {/each}
-        </tr>
-      {/if}
-      {#if filter}
-        <tr>
-          {#each columns as column}
+          {:else if filter}
             <ThFilter {handler} filterBy={column.dataElement} />
-          {/each}
-        </tr>
-      {/if}
+          {:else}
+            <th>{column.label}</th>
+          {/if}
+        {/each}
+      </tr>
     </thead>
     <tbody>
       {#if $rows.length > 0}