From 554257c647624c5125edaa34894bb507bfa71dc1 Mon Sep 17 00:00:00 2001
From: James <Jamestp19@gmail.com>
Date: Mon, 18 Nov 2024 15:39:30 -0500
Subject: [PATCH 01/19] init

---
 src/lib/components/DashboardDrawer.svelte     | 34 +++++++++++++++++++
 src/lib/services/dictionary.ts                |  5 +++
 .../(picsure)/(public)/dashboard/+page.svelte | 12 +++++++
 src/routes/(picsure)/+layout.svelte           | 11 ++++--
 4 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/DashboardDrawer.svelte

diff --git a/src/lib/components/DashboardDrawer.svelte b/src/lib/components/DashboardDrawer.svelte
new file mode 100644
index 00000000..0276053d
--- /dev/null
+++ b/src/lib/components/DashboardDrawer.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { getDrawerStore } from '@skeletonlabs/skeleton';
+  import { getDatasetDetails } from '$lib/services/dictionary';
+  import type { DashboardRow } from '$lib/stores/Dashboard';
+  import { ProgressRadial } from '@skeletonlabs/skeleton';
+  import ErrorAlert from '$lib/components/ErrorAlert.svelte';
+  const drawerStore = getDrawerStore();
+
+  const datasetId = ($drawerStore.meta.row as DashboardRow)?.accession as string || '';
+
+  async function getDataset() {
+    return getDatasetDetails(datasetId) as Promise<Record<string, unknown>>;
+  }
+</script>
+
+<div>
+  {#await getDataset()}
+    <div class="flex justify-center items-center h-full">
+      <ProgressRadial />
+    </div>
+  {:then details}
+    <ul>
+      {#each Object.entries(details) as [key, value]}
+        <li><strong>{key}</strong>: {value}</li>
+      {/each}
+    </ul>
+  {:catch}
+    <div class="flex justify-center items-center h-full">
+      <ErrorAlert title="An Error Occured">
+        <p>We're having trouble fetching the dataset details right now. Please try again later.</p>
+      </ErrorAlert>
+    </div>
+  {/await}
+</div>
diff --git a/src/lib/services/dictionary.ts b/src/lib/services/dictionary.ts
index be5181a7..d0e8139c 100644
--- a/src/lib/services/dictionary.ts
+++ b/src/lib/services/dictionary.ts
@@ -12,6 +12,7 @@ import { user } from '$lib/stores/User';
 const dictionaryUrl = 'picsure/proxy/dictionary-api/';
 const searchUrl = 'picsure/proxy/dictionary-api/concepts';
 const conceptDetailUrl = 'picsure/proxy/dictionary-api/concepts/detail/';
+const datasetDetailUrl = 'picsure/proxy/dictionary-api/dataset/detail/';
 
 export type FacetSkeleton = {
   [facetCategory: string]: string[];
@@ -146,3 +147,7 @@ export async function getStudiesCount(isOpenAccess = false) {
   const facetsForUser = facetCat.facets.filter((facet) => facet.count > 0);
   return facetsForUser.length;
 }
+
+export async function getDatasetDetails(datasetId: string) {
+  return api.post(`${datasetDetailUrl}/${datasetId}`, {});
+}
diff --git a/src/routes/(picsure)/(public)/dashboard/+page.svelte b/src/routes/(picsure)/(public)/dashboard/+page.svelte
index c21622a9..2fb32a50 100644
--- a/src/routes/(picsure)/(public)/dashboard/+page.svelte
+++ b/src/routes/(picsure)/(public)/dashboard/+page.svelte
@@ -14,6 +14,10 @@
   import type { Column } from '$lib/models/Tables';
   import type { DashboardRow } from '$lib/stores/Dashboard';
 
+  import { getDrawerStore } from '@skeletonlabs/skeleton';
+
+  const drawerStore = getDrawerStore();
+
   const tableName = 'ExplorerTable';
 
   let unsubColumns: Unsubscriber;
@@ -59,6 +63,14 @@
         search={false}
         showPagination={false}
         stickyHeader={true}
+        rowClickHandler={(row) => {
+          drawerStore.open({
+            id: 'dashboard-drawer',
+            meta: {
+              row,
+            },
+          });
+        }}
       />
     {/await}
   </section>
diff --git a/src/routes/(picsure)/+layout.svelte b/src/routes/(picsure)/+layout.svelte
index 6d938ef3..c3dd37fb 100644
--- a/src/routes/(picsure)/+layout.svelte
+++ b/src/routes/(picsure)/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { AppShell, Modal, Toast, storePopup, type ModalComponent } from '@skeletonlabs/skeleton';
+  import { AppShell, Modal, Toast, Drawer, storePopup, type ModalComponent } from '@skeletonlabs/skeleton';
   import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
   import Navigation from '$lib/components/Navigation.svelte';
   import { onMount } from 'svelte';
@@ -8,12 +8,14 @@
   import ExportStepper from '$lib/components/explorer/export/ExportStepper.svelte';
   import Footer from '$lib/components/Footer.svelte';
   import ModalWrapper from '$lib/components/modals/ModalWrapper.svelte';
-  import { getModalStore } from '@skeletonlabs/skeleton';
+  import { getModalStore, getDrawerStore } from '@skeletonlabs/skeleton';
   import { beforeNavigate } from '$app/navigation';
   import { hasInvalidFilter, hasGenomicFilter, hasUnallowedFilter } from '$lib/stores/Filter.ts';
+  import DashboardDrawer from '$lib/components/DashboardDrawer.svelte';
   import FilterWarning from '$lib/components/modals/FilterWarning.svelte';
 
   const modalStore = getModalStore();
+  const drawerStore = getDrawerStore();
 
   // Highlight.js
   import hljs from 'highlight.js/lib/core';
@@ -68,6 +70,11 @@
 
 <Toast position="t" />
 <Modal {...modalProps} />
+<Drawer position="right" width="w-1/2">
+  {#if $drawerStore.id === 'dashboard-drawer'}
+    <DashboardDrawer />
+  {/if}
+</Drawer>
 <AppShell>
   <svelte:fragment slot="header">
     <Navigation />

From 560d65e128efbe41e6544ec93d3e94d9ca8ad259 Mon Sep 17 00:00:00 2001
From: James <Jamestp19@gmail.com>
Date: Tue, 19 Nov 2024 08:38:09 -0500
Subject: [PATCH 02/19] add feature flag and use dataset_id

---
 .env.example                                   |  1 +
 .env.test                                      |  1 +
 src/lib/components/DashboardDrawer.svelte      |  2 +-
 src/lib/components/datatable/Row.svelte        |  8 +++++---
 src/lib/configuration.ts                       |  1 +
 .../(picsure)/(public)/dashboard/+page.svelte  | 18 +++++++++---------
 6 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/.env.example b/.env.example
index ad992691..d01c301b 100644
--- a/.env.example
+++ b/.env.example
@@ -32,6 +32,7 @@ VITE_USE_QUERY_TEMPLATE=true
 VITE_API=true
 VITE_DISCOVER=true
 VITE_DASHBOARD=true
+VITE_DASHBOARD_DRAWER=true
 
 # VITE_AUTH_PROVIDER_MODULE is the prefix for any authorization providers you want to use.
 # We currently support 3 types of authorization providers: AUTH0, Gen3 FENCE, and RAS.
diff --git a/.env.test b/.env.test
index f21e6526..e09fce3d 100644
--- a/.env.test
+++ b/.env.test
@@ -23,6 +23,7 @@ VITE_DISCOVER=true
 VITE_DASHBOARD=true
 VITE_ENABLE_SNP_QUERY=true
 VITE_ENABLE_GENE_QUERY=true
+VITE_DASHBOARD_DRAWER=true
 
 # VITE_AUTH_PROVIDER_MODULE is the prefix for any authorization providers you want to use.
 # We currently support 3 types of authorization providers: AUTH0, Gen3 FENCE, and RAS.
diff --git a/src/lib/components/DashboardDrawer.svelte b/src/lib/components/DashboardDrawer.svelte
index 0276053d..667e335c 100644
--- a/src/lib/components/DashboardDrawer.svelte
+++ b/src/lib/components/DashboardDrawer.svelte
@@ -6,7 +6,7 @@
   import ErrorAlert from '$lib/components/ErrorAlert.svelte';
   const drawerStore = getDrawerStore();
 
-  const datasetId = ($drawerStore.meta.row as DashboardRow)?.accession as string || '';
+  const datasetId = ($drawerStore.meta.row as DashboardRow)?.dataset_id as string || '';
 
   async function getDataset() {
     return getDatasetDetails(datasetId) as Promise<Record<string, unknown>>;
diff --git a/src/lib/components/datatable/Row.svelte b/src/lib/components/datatable/Row.svelte
index 3f45572e..0ce3bfe3 100644
--- a/src/lib/components/datatable/Row.svelte
+++ b/src/lib/components/datatable/Row.svelte
@@ -18,16 +18,18 @@
   export let rowClickHandler: (row: Indexable) => void = () => {};
 
   function onClick(row: Indexable) {
-    setActiveRow({ row: row.conceptPath, table: tableName });
+    setActiveRow({ row: row.conceptPath || row.dataset_id, table: tableName });
     rowClickHandler(row);
   }
-  $: active = $activeTable === tableName && $activeRow === row?.conceptPath;
+  $: active =
+    $activeTable === tableName &&
+    ($activeRow === row?.conceptPath || $activeRow === row.dataset_id);
 </script>
 
 <tr
   id="row-{index.toString()}"
   on:click|stopPropagation={() => onClick(row)}
-  class="cursor-pointer"
+  class={rowClickHandler !== (() => {}) ? 'cursor-pointer' : ''}
 >
   {#each columns as column, colIndex}
     <td id="row-{index.toString()}-col-{colIndex.toString()}">
diff --git a/src/lib/configuration.ts b/src/lib/configuration.ts
index a01f4a83..d91c6796 100644
--- a/src/lib/configuration.ts
+++ b/src/lib/configuration.ts
@@ -138,6 +138,7 @@ export const features: Indexable = {
     distributionExplorer: import.meta.env?.VITE_DIST_EXPLORER === 'true',
   },
   dashboard: import.meta.env?.VITE_DASHBOARD === 'true',
+  dashboardDrawer: import.meta.env?.VITE_DASHBOARD_DRAWER === 'true',
   confirmDownload: import.meta.env?.VITE_CONFIRM_DOWNLOAD === 'true',
 };
 
diff --git a/src/routes/(picsure)/(public)/dashboard/+page.svelte b/src/routes/(picsure)/(public)/dashboard/+page.svelte
index 2fb32a50..0297fb26 100644
--- a/src/routes/(picsure)/(public)/dashboard/+page.svelte
+++ b/src/routes/(picsure)/(public)/dashboard/+page.svelte
@@ -4,7 +4,7 @@
 
   import { ProgressBar } from '@skeletonlabs/skeleton';
 
-  import { branding } from '$lib/configuration';
+  import { branding, features } from '$lib/configuration';
   import Content from '$lib/components/Content.svelte';
   import Datatable from '$lib/components/datatable/Table.svelte';
   import DashboardLink from '$lib/components/datatable/DashboardLink.svelte';
@@ -44,6 +44,13 @@
     unsubColumns && unsubColumns();
     unsubRows && unsubRows();
   });
+
+  function rowClickHandler(row: DashboardRow) {
+    drawerStore.open({
+      id: 'dashboard-drawer',
+      meta: { row },
+    });
+  }
 </script>
 
 <svelte:head>
@@ -63,14 +70,7 @@
         search={false}
         showPagination={false}
         stickyHeader={true}
-        rowClickHandler={(row) => {
-          drawerStore.open({
-            id: 'dashboard-drawer',
-            meta: {
-              row,
-            },
-          });
-        }}
+        rowClickHandler={features.dashboardDrawer ? rowClickHandler : undefined}
       />
     {/await}
   </section>

From 85626ede8be5af9cb92b5881d789496420a34bb1 Mon Sep 17 00:00:00 2001
From: James <Jamestp19@gmail.com>
Date: Tue, 19 Nov 2024 09:54:49 -0500
Subject: [PATCH 03/19] Update dictionary.ts

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

diff --git a/src/lib/services/dictionary.ts b/src/lib/services/dictionary.ts
index d0e8139c..d2b04869 100644
--- a/src/lib/services/dictionary.ts
+++ b/src/lib/services/dictionary.ts
@@ -12,7 +12,7 @@ import { user } from '$lib/stores/User';
 const dictionaryUrl = 'picsure/proxy/dictionary-api/';
 const searchUrl = 'picsure/proxy/dictionary-api/concepts';
 const conceptDetailUrl = 'picsure/proxy/dictionary-api/concepts/detail/';
-const datasetDetailUrl = 'picsure/proxy/dictionary-api/dataset/detail/';
+const datasetDetailUrl = 'picsure/proxy/dictionary-api/dashboard-drawer/';
 
 export type FacetSkeleton = {
   [facetCategory: string]: string[];
@@ -149,5 +149,5 @@ export async function getStudiesCount(isOpenAccess = false) {
 }
 
 export async function getDatasetDetails(datasetId: string) {
-  return api.post(`${datasetDetailUrl}/${datasetId}`, {});
+  return api.get(`${datasetDetailUrl}${datasetId}`);
 }

From 19d437b5000c9159ecbf99f073b5d6241517d394 Mon Sep 17 00:00:00 2001
From: James <Jamestp19@gmail.com>
Date: Tue, 19 Nov 2024 10:34:24 -0500
Subject: [PATCH 04/19] Update clickablity of rows, fix drawer

---
 src/lib/components/DashboardDrawer.svelte     | 25 ++++++++++++++++---
 .../components/datatable/RemoteTable.svelte   | 12 +++++++--
 src/lib/components/datatable/Row.svelte       |  3 ++-
 src/lib/components/datatable/Table.svelte     | 12 +++++++--
 .../(admin)/admin/authorization/+page.svelte  |  2 ++
 .../(admin)/admin/users/+page.svelte          |  1 +
 .../(picsure)/(public)/dashboard/+page.svelte |  1 +
 src/routes/(picsure)/+layout.svelte           |  9 ++++++-
 8 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/DashboardDrawer.svelte b/src/lib/components/DashboardDrawer.svelte
index 667e335c..925a7861 100644
--- a/src/lib/components/DashboardDrawer.svelte
+++ b/src/lib/components/DashboardDrawer.svelte
@@ -6,10 +6,18 @@
   import ErrorAlert from '$lib/components/ErrorAlert.svelte';
   const drawerStore = getDrawerStore();
 
-  const datasetId = ($drawerStore.meta.row as DashboardRow)?.dataset_id as string || '';
+  const datasetId = (($drawerStore.meta.row as DashboardRow)?.dataset_id as string) || '';
 
   async function getDataset() {
-    return getDatasetDetails(datasetId) as Promise<Record<string, unknown>>;
+    const res = await getDatasetDetails(datasetId);
+    if (res.dashboardDrawerList) {
+      let details = res.dashboardDrawerList[0];
+      if (details.datasetId) {
+        delete details.datasetId;
+      }
+      return details;
+    }
+    throw new Error('No dashboardDrawerList found');
   }
 </script>
 
@@ -21,7 +29,18 @@
   {:then details}
     <ul>
       {#each Object.entries(details) as [key, value]}
-        <li><strong>{key}</strong>: {value}</li>
+        <li>
+          <strong>{key}</strong>:
+          {#if Array.isArray(value)}
+            <ul>
+              {#each value as item}
+                <li>{item}</li>
+              {/each}
+            </ul>
+          {:else}
+            {value}
+          {/if}
+        </li>
       {/each}
     </ul>
   {:catch}
diff --git a/src/lib/components/datatable/RemoteTable.svelte b/src/lib/components/datatable/RemoteTable.svelte
index f59e32d6..54d09220 100644
--- a/src/lib/components/datatable/RemoteTable.svelte
+++ b/src/lib/components/datatable/RemoteTable.svelte
@@ -25,7 +25,7 @@
   export let columns: Column[] = [];
   export let cellOverides: Indexable = {};
   export let rowClickHandler: (row: Indexable) => void = () => {};
-
+  export let isClickable: boolean = false;
   let rows = handler.getRows();
 
   onMount(() => {
@@ -100,7 +100,15 @@
         </tr>
       {:else if $rows.length > 0}
         {#each $rows as row, i}
-          <ExpandableRow {tableName} {cellOverides} {columns} index={i} {row} {rowClickHandler} />
+          <ExpandableRow
+            {tableName}
+            {cellOverides}
+            {columns}
+            index={i}
+            {row}
+            {rowClickHandler}
+            {isClickable}
+          />
         {/each}
       {:else}
         <tr><td colspan={columns.length}>No entries found.</td></tr>
diff --git a/src/lib/components/datatable/Row.svelte b/src/lib/components/datatable/Row.svelte
index 0ce3bfe3..c0716edc 100644
--- a/src/lib/components/datatable/Row.svelte
+++ b/src/lib/components/datatable/Row.svelte
@@ -15,6 +15,7 @@
   export let index: number = -2;
   export let row: Indexable = {};
   export let tableName: string = '';
+  export let isClickable: boolean = false;
   export let rowClickHandler: (row: Indexable) => void = () => {};
 
   function onClick(row: Indexable) {
@@ -29,7 +30,7 @@
 <tr
   id="row-{index.toString()}"
   on:click|stopPropagation={() => onClick(row)}
-  class={rowClickHandler !== (() => {}) ? 'cursor-pointer' : ''}
+  class={isClickable ? 'cursor-pointer' : ''}
 >
   {#each columns as column, colIndex}
     <td id="row-{index.toString()}-col-{colIndex.toString()}">
diff --git a/src/lib/components/datatable/Table.svelte b/src/lib/components/datatable/Table.svelte
index 34d9dbf7..750baf9c 100644
--- a/src/lib/components/datatable/Table.svelte
+++ b/src/lib/components/datatable/Table.svelte
@@ -23,7 +23,7 @@
   export let stickyHeader = false;
   export let showPagination = true;
   export let rowClickHandler: (row: Indexable) => void = () => {};
-
+  export let isClickable: boolean = false;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   export let data: any = []; //TODO: Fix this type
 
@@ -83,7 +83,15 @@
       <tbody>
         {#if $rows.length > 0}
           {#each $rows as row, i}
-            <ExpandableRow {tableName} {cellOverides} {columns} index={i} {row} {rowClickHandler} />
+            <ExpandableRow
+              {tableName}
+              {cellOverides}
+              {columns}
+              index={i}
+              {row}
+              {rowClickHandler}
+              {isClickable}
+            />
           {/each}
         {:else}
           <tr><td colspan={columns.length}>No entries found.</td></tr>
diff --git a/src/routes/(picsure)/(authorized)/(admin)/admin/authorization/+page.svelte b/src/routes/(picsure)/(authorized)/(admin)/admin/authorization/+page.svelte
index 805f82bc..9742abaf 100644
--- a/src/routes/(picsure)/(authorized)/(admin)/admin/authorization/+page.svelte
+++ b/src/routes/(picsure)/(authorized)/(admin)/admin/authorization/+page.svelte
@@ -84,6 +84,7 @@
         cellOverides={roleTable.overrides}
         defaultRowsPerPage={10}
         rowClickHandler={roleRowCLick}
+        isClickable={true}
       />
     </div>
     <div id="authorization-privilege-table" class="mb-10">
@@ -106,6 +107,7 @@
         cellOverides={privilegesTable.overrides}
         defaultRowsPerPage={10}
         rowClickHandler={privilegeRowClick}
+        isClickable={true}
       />
     </div>
   {:catch}
diff --git a/src/routes/(picsure)/(authorized)/(admin)/admin/users/+page.svelte b/src/routes/(picsure)/(authorized)/(admin)/admin/users/+page.svelte
index 393e6b3e..b8ba291d 100644
--- a/src/routes/(picsure)/(authorized)/(admin)/admin/users/+page.svelte
+++ b/src/routes/(picsure)/(authorized)/(admin)/admin/users/+page.svelte
@@ -109,6 +109,7 @@
           defaultRowsPerPage={10}
           title={connection.label}
           {rowClickHandler}
+          isClickable={true}
         />
       </div>
     {/each}
diff --git a/src/routes/(picsure)/(public)/dashboard/+page.svelte b/src/routes/(picsure)/(public)/dashboard/+page.svelte
index 0297fb26..c3a1fd30 100644
--- a/src/routes/(picsure)/(public)/dashboard/+page.svelte
+++ b/src/routes/(picsure)/(public)/dashboard/+page.svelte
@@ -71,6 +71,7 @@
         showPagination={false}
         stickyHeader={true}
         rowClickHandler={features.dashboardDrawer ? rowClickHandler : undefined}
+        isClickable={features.dashboardDrawer}
       />
     {/await}
   </section>
diff --git a/src/routes/(picsure)/+layout.svelte b/src/routes/(picsure)/+layout.svelte
index c3dd37fb..3dfd6b75 100644
--- a/src/routes/(picsure)/+layout.svelte
+++ b/src/routes/(picsure)/+layout.svelte
@@ -1,5 +1,12 @@
 <script lang="ts">
-  import { AppShell, Modal, Toast, Drawer, storePopup, type ModalComponent } from '@skeletonlabs/skeleton';
+  import {
+    AppShell,
+    Modal,
+    Toast,
+    Drawer,
+    storePopup,
+    type ModalComponent,
+  } from '@skeletonlabs/skeleton';
   import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
   import Navigation from '$lib/components/Navigation.svelte';
   import { onMount } from 'svelte';

From df68edd7212d279b9348d22eed14dc580cf90065 Mon Sep 17 00:00:00 2001
From: James <Jamestp19@gmail.com>
Date: Tue, 19 Nov 2024 10:55:09 -0500
Subject: [PATCH 05/19] formatting the drawer

---
 src/lib/components/DashboardDrawer.svelte | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/DashboardDrawer.svelte b/src/lib/components/DashboardDrawer.svelte
index 925a7861..10e14bd9 100644
--- a/src/lib/components/DashboardDrawer.svelte
+++ b/src/lib/components/DashboardDrawer.svelte
@@ -7,6 +7,7 @@
   const drawerStore = getDrawerStore();
 
   const datasetId = (($drawerStore.meta.row as DashboardRow)?.dataset_id as string) || '';
+  const title = (($drawerStore.meta.row as DashboardRow)?.name as string) || '';
 
   async function getDataset() {
     const res = await getDatasetDetails(datasetId);
@@ -15,6 +16,9 @@
       if (details.datasetId) {
         delete details.datasetId;
       }
+      if (details.studyFullname) {
+        delete details.studyFullname;
+      }
       return details;
     }
     throw new Error('No dashboardDrawerList found');
@@ -22,17 +26,20 @@
 </script>
 
 <div>
+  {#if title}
+    <h2 class="text-2xl font-bold ml-4">{title}</h2>
+  {/if}
   {#await getDataset()}
     <div class="flex justify-center items-center h-full">
       <ProgressRadial />
     </div>
   {:then details}
-    <ul>
+    <ul class="m-4">
       {#each Object.entries(details) as [key, value]}
-        <li>
-          <strong>{key}</strong>:
+        <li class="m-2">
+          <strong>{key.replace(/([A-Z])/g, ' $1').toLowerCase().trim()}</strong>:
           {#if Array.isArray(value)}
-            <ul>
+            <ul class="list-disc">
               {#each value as item}
                 <li>{item}</li>
               {/each}
@@ -51,3 +58,7 @@
     </div>
   {/await}
 </div>
+
+<style>
+
+</style>

From adf42e15d653288430f21c65e0328d41d81d9b59 Mon Sep 17 00:00:00 2001
From: James <Jamestp19@gmail.com>
Date: Tue, 19 Nov 2024 11:08:06 -0500
Subject: [PATCH 06/19] Dont show nulls, styles

---
 src/lib/components/DashboardDrawer.svelte | 18 ++++++++++--------
 src/routes/(picsure)/+layout.svelte       |  2 +-
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/DashboardDrawer.svelte b/src/lib/components/DashboardDrawer.svelte
index 10e14bd9..0c58d4c7 100644
--- a/src/lib/components/DashboardDrawer.svelte
+++ b/src/lib/components/DashboardDrawer.svelte
@@ -36,18 +36,20 @@
   {:then details}
     <ul class="m-4">
       {#each Object.entries(details) as [key, value]}
-        <li class="m-2">
-          <strong>{key.replace(/([A-Z])/g, ' $1').toLowerCase().trim()}</strong>:
+        {#if value}
+          <li class="m-2">
+            <strong class="capitalize">{key.replace(/([A-Z])/g, ' $1').toLowerCase().trim()}</strong>:
           {#if Array.isArray(value)}
             <ul class="list-disc">
               {#each value as item}
-                <li>{item}</li>
+                <li class="ml-8">{item}</li>
               {/each}
-            </ul>
-          {:else}
-            {value}
-          {/if}
-        </li>
+              </ul>
+            {:else}
+              {value}
+            {/if}
+          </li>
+        {/if}
       {/each}
     </ul>
   {:catch}
diff --git a/src/routes/(picsure)/+layout.svelte b/src/routes/(picsure)/+layout.svelte
index 3dfd6b75..a7949447 100644
--- a/src/routes/(picsure)/+layout.svelte
+++ b/src/routes/(picsure)/+layout.svelte
@@ -77,7 +77,7 @@
 
 <Toast position="t" />
 <Modal {...modalProps} />
-<Drawer position="right" width="w-1/2">
+<Drawer position="right" width="w-1/2" rounded="rounded-none">
   {#if $drawerStore.id === 'dashboard-drawer'}
     <DashboardDrawer />
   {/if}

From 138d894077ad029afaa27668a8e37bd321377eb4 Mon Sep 17 00:00:00 2001
From: James <Jamestp19@gmail.com>
Date: Tue, 19 Nov 2024 11:18:17 -0500
Subject: [PATCH 07/19] hide blanks

---
 src/lib/components/DashboardDrawer.svelte | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/DashboardDrawer.svelte b/src/lib/components/DashboardDrawer.svelte
index 0c58d4c7..e277cb37 100644
--- a/src/lib/components/DashboardDrawer.svelte
+++ b/src/lib/components/DashboardDrawer.svelte
@@ -38,12 +38,19 @@
       {#each Object.entries(details) as [key, value]}
         {#if value}
           <li class="m-2">
-            <strong class="capitalize">{key.replace(/([A-Z])/g, ' $1').toLowerCase().trim()}</strong>:
-          {#if Array.isArray(value)}
-            <ul class="list-disc">
-              {#each value as item}
-                <li class="ml-8">{item}</li>
-              {/each}
+            <strong class="capitalize"
+              >{key
+                .replace(/([A-Z])/g, ' $1')
+                .toLowerCase()
+                .trim()}</strong
+            >:
+            {#if Array.isArray(value)}
+              <ul class="list-disc">
+                {#each value as item}
+                  {#if item}
+                    <li class="ml-8">{item}</li>
+                  {/if}
+                {/each}
               </ul>
             {:else}
               {value}
@@ -62,5 +69,4 @@
 </div>
 
 <style>
-
 </style>

From 3cf828cff956d9391c03634e8279f7fc1b1d70f8 Mon Sep 17 00:00:00 2001
From: James <Jamestp19@gmail.com>
Date: Tue, 19 Nov 2024 11:33:24 -0500
Subject: [PATCH 08/19] Stop clicking on row when clicking on the button

---
 src/lib/components/DashboardDrawer.svelte         | 3 ++-
 src/lib/components/datatable/DashboardLink.svelte | 9 ++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/DashboardDrawer.svelte b/src/lib/components/DashboardDrawer.svelte
index e277cb37..f4efac74 100644
--- a/src/lib/components/DashboardDrawer.svelte
+++ b/src/lib/components/DashboardDrawer.svelte
@@ -29,12 +29,13 @@
   {#if title}
     <h2 class="text-2xl font-bold ml-4">{title}</h2>
   {/if}
+  <hr class="my-4" />
   {#await getDataset()}
     <div class="flex justify-center items-center h-full">
       <ProgressRadial />
     </div>
   {:then details}
-    <ul class="m-4">
+    <ul class="m-4 p-4">
       {#each Object.entries(details) as [key, value]}
         {#if value}
           <li class="m-2">
diff --git a/src/lib/components/datatable/DashboardLink.svelte b/src/lib/components/datatable/DashboardLink.svelte
index bd8feb18..8cf0f480 100644
--- a/src/lib/components/datatable/DashboardLink.svelte
+++ b/src/lib/components/datatable/DashboardLink.svelte
@@ -7,7 +7,10 @@
 {#if consentGranted}
   <i class="fa-regular fa-circle-check text-3xl text-success-500"></i>
 {:else}
-  <a href={link} class="btn variant-ghost-primary hover:variant-filled-primary" target="_blank"
-    >More Info</a
-  >
+  <a 
+    href={link} 
+    on:click|stopPropagation 
+    class="btn variant-ghost-primary hover:variant-filled-primary" 
+    target="_blank"
+  >More Info</a>
 {/if}

From bf40a4acc704715d57d1d3d63a04054dd0053a67 Mon Sep 17 00:00:00 2001
From: James <Jamestp19@gmail.com>
Date: Tue, 19 Nov 2024 12:01:55 -0500
Subject: [PATCH 09/19] Add link to dashboard

---
 src/lib/components/DashboardDrawer.svelte     | 73 -----------------
 .../datatable/DashboardDrawer.svelte          | 78 +++++++++++++++++++
 .../components/datatable/DashboardLink.svelte | 14 ++--
 3 files changed, 86 insertions(+), 79 deletions(-)
 delete mode 100644 src/lib/components/DashboardDrawer.svelte
 create mode 100644 src/lib/components/datatable/DashboardDrawer.svelte

diff --git a/src/lib/components/DashboardDrawer.svelte b/src/lib/components/DashboardDrawer.svelte
deleted file mode 100644
index f4efac74..00000000
--- a/src/lib/components/DashboardDrawer.svelte
+++ /dev/null
@@ -1,73 +0,0 @@
-<script lang="ts">
-  import { getDrawerStore } from '@skeletonlabs/skeleton';
-  import { getDatasetDetails } from '$lib/services/dictionary';
-  import type { DashboardRow } from '$lib/stores/Dashboard';
-  import { ProgressRadial } from '@skeletonlabs/skeleton';
-  import ErrorAlert from '$lib/components/ErrorAlert.svelte';
-  const drawerStore = getDrawerStore();
-
-  const datasetId = (($drawerStore.meta.row as DashboardRow)?.dataset_id as string) || '';
-  const title = (($drawerStore.meta.row as DashboardRow)?.name as string) || '';
-
-  async function getDataset() {
-    const res = await getDatasetDetails(datasetId);
-    if (res.dashboardDrawerList) {
-      let details = res.dashboardDrawerList[0];
-      if (details.datasetId) {
-        delete details.datasetId;
-      }
-      if (details.studyFullname) {
-        delete details.studyFullname;
-      }
-      return details;
-    }
-    throw new Error('No dashboardDrawerList found');
-  }
-</script>
-
-<div>
-  {#if title}
-    <h2 class="text-2xl font-bold ml-4">{title}</h2>
-  {/if}
-  <hr class="my-4" />
-  {#await getDataset()}
-    <div class="flex justify-center items-center h-full">
-      <ProgressRadial />
-    </div>
-  {:then details}
-    <ul class="m-4 p-4">
-      {#each Object.entries(details) as [key, value]}
-        {#if value}
-          <li class="m-2">
-            <strong class="capitalize"
-              >{key
-                .replace(/([A-Z])/g, ' $1')
-                .toLowerCase()
-                .trim()}</strong
-            >:
-            {#if Array.isArray(value)}
-              <ul class="list-disc">
-                {#each value as item}
-                  {#if item}
-                    <li class="ml-8">{item}</li>
-                  {/if}
-                {/each}
-              </ul>
-            {:else}
-              {value}
-            {/if}
-          </li>
-        {/if}
-      {/each}
-    </ul>
-  {:catch}
-    <div class="flex justify-center items-center h-full">
-      <ErrorAlert title="An Error Occured">
-        <p>We're having trouble fetching the dataset details right now. Please try again later.</p>
-      </ErrorAlert>
-    </div>
-  {/await}
-</div>
-
-<style>
-</style>
diff --git a/src/lib/components/datatable/DashboardDrawer.svelte b/src/lib/components/datatable/DashboardDrawer.svelte
new file mode 100644
index 00000000..d9de43a9
--- /dev/null
+++ b/src/lib/components/datatable/DashboardDrawer.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+  import { getDrawerStore } from '@skeletonlabs/skeleton';
+  import { getDatasetDetails } from '$lib/services/dictionary';
+  import type { DashboardRow } from '$lib/stores/Dashboard';
+  import { ProgressRadial } from '@skeletonlabs/skeleton';
+  import ErrorAlert from '$lib/components/ErrorAlert.svelte';
+  const drawerStore = getDrawerStore();
+
+  const datasetId = (($drawerStore.meta.row as DashboardRow)?.dataset_id as string) || '';
+  const title = (($drawerStore.meta.row as DashboardRow)?.name as string) || '';
+  const link = (($drawerStore.meta.row as DashboardRow)?.additional_info_link as string) || '';
+  async function getDataset() {
+    const res = await getDatasetDetails(datasetId);
+    if (res.dashboardDrawerList) {
+      let details = res.dashboardDrawerList[0];
+      if (details.datasetId) {
+        delete details.datasetId;
+      }
+      if (details.studyFullname) {
+        delete details.studyFullname;
+      }
+      return details;
+    }
+    throw new Error('No dashboardDrawerList found');
+  }
+</script>
+
+{#if title}
+  <h2 class="text-2xl font-bold ml-4">{title}</h2>
+{/if}
+<hr class="m-4 border-t-2 border-gray-200" />
+{#await getDataset()}
+  <div class="flex justify-center items-center h-full">
+    <ProgressRadial />
+  </div>
+{:then details}
+  <ul class="m-4 p-4">
+    {#each Object.entries(details) as [key, value]}
+      {#if value}
+        <li class="m-2">
+          <strong class="capitalize"
+            >{key
+              .replace(/([A-Z])/g, ' $1')
+              .toLowerCase()
+              .trim()}</strong
+          >:
+          {#if Array.isArray(value)}
+            <ul class="list-disc">
+              {#each value as item}
+                {#if item}
+                  <li class="ml-8">{item}</li>
+                {/if}
+              {/each}
+            </ul>
+          {:else}
+            {value}
+          {/if}
+        </li>
+      {/if}
+    {/each}
+  </ul>
+  {#if link}
+    <div class="flex justify-center items-center">
+      <a
+        href={link || '#'}
+        on:click|stopPropagation
+        class="btn variant-ghost-primary hover:variant-filled-primary"
+        target="_blank">More Info</a
+      >
+    </div>
+  {/if}
+{:catch}
+  <div class="flex justify-center items-center h-full">
+    <ErrorAlert title="An Error Occured">
+      <p>We're having trouble fetching the dataset details right now. Please try again later.</p>
+    </ErrorAlert>
+  </div>
+{/await}
diff --git a/src/lib/components/datatable/DashboardLink.svelte b/src/lib/components/datatable/DashboardLink.svelte
index 8cf0f480..d4313f83 100644
--- a/src/lib/components/datatable/DashboardLink.svelte
+++ b/src/lib/components/datatable/DashboardLink.svelte
@@ -7,10 +7,12 @@
 {#if consentGranted}
   <i class="fa-regular fa-circle-check text-3xl text-success-500"></i>
 {:else}
-  <a 
-    href={link} 
-    on:click|stopPropagation 
-    class="btn variant-ghost-primary hover:variant-filled-primary" 
-    target="_blank"
-  >More Info</a>
+  <a
+    href={link || '#'}
+    on:click|stopPropagation={(e) => !link && e.preventDefault()}
+    class="btn variant-ghost-primary hover:variant-filled-primary {!link
+      ? 'opacity-50 cursor-not-allowed pointer-events-none'
+      : ''}"
+    target="_blank">More Info</a
+  >
 {/if}

From 579e8caeaad0e66d86a59f4ec25b7c8d6e54ee74 Mon Sep 17 00:00:00 2001
From: James <Jamestp19@gmail.com>
Date: Tue, 19 Nov 2024 12:04:57 -0500
Subject: [PATCH 10/19] fix missed commit

---
 src/routes/(picsure)/+layout.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(picsure)/+layout.svelte b/src/routes/(picsure)/+layout.svelte
index a7949447..c19193a6 100644
--- a/src/routes/(picsure)/+layout.svelte
+++ b/src/routes/(picsure)/+layout.svelte
@@ -18,7 +18,7 @@
   import { getModalStore, getDrawerStore } from '@skeletonlabs/skeleton';
   import { beforeNavigate } from '$app/navigation';
   import { hasInvalidFilter, hasGenomicFilter, hasUnallowedFilter } from '$lib/stores/Filter.ts';
-  import DashboardDrawer from '$lib/components/DashboardDrawer.svelte';
+  import DashboardDrawer from '$lib/components/datatable/DashboardDrawer.svelte';
   import FilterWarning from '$lib/components/modals/FilterWarning.svelte';
 
   const modalStore = getModalStore();

From f52f083e0e0169b507a27ff2f108a8f6c378fda4 Mon Sep 17 00:00:00 2001
From: James <Jamestp19@gmail.com>
Date: Tue, 19 Nov 2024 12:24:37 -0500
Subject: [PATCH 11/19] Styles

---
 src/lib/components/datatable/DashboardDrawer.svelte | 4 ++--
 src/lib/components/datatable/DashboardLink.svelte   | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/datatable/DashboardDrawer.svelte b/src/lib/components/datatable/DashboardDrawer.svelte
index d9de43a9..abee72ed 100644
--- a/src/lib/components/datatable/DashboardDrawer.svelte
+++ b/src/lib/components/datatable/DashboardDrawer.svelte
@@ -60,7 +60,7 @@
     {/each}
   </ul>
   {#if link}
-    <div class="flex justify-center items-center">
+    <div class="flex justify-center items-center mb-4">
       <a
         href={link || '#'}
         on:click|stopPropagation
@@ -70,7 +70,7 @@
     </div>
   {/if}
 {:catch}
-  <div class="flex justify-center items-center h-full">
+  <div class="flex justify-center items-center">
     <ErrorAlert title="An Error Occured">
       <p>We're having trouble fetching the dataset details right now. Please try again later.</p>
     </ErrorAlert>
diff --git a/src/lib/components/datatable/DashboardLink.svelte b/src/lib/components/datatable/DashboardLink.svelte
index d4313f83..9df0844a 100644
--- a/src/lib/components/datatable/DashboardLink.svelte
+++ b/src/lib/components/datatable/DashboardLink.svelte
@@ -9,9 +9,10 @@
 {:else}
   <a
     href={link || '#'}
+    title={link ? 'More Info' : 'Link not available'}
     on:click|stopPropagation={(e) => !link && e.preventDefault()}
     class="btn variant-ghost-primary hover:variant-filled-primary {!link
-      ? 'opacity-50 cursor-not-allowed pointer-events-none'
+      ? 'opacity-50 cursor-not-allowed'
       : ''}"
     target="_blank">More Info</a
   >

From 1ca812a27d7302627ea60a5f613e36f604468f60 Mon Sep 17 00:00:00 2001
From: James <Jamestp19@gmail.com>
Date: Tue, 19 Nov 2024 14:12:40 -0500
Subject: [PATCH 12/19] Add tests

---
 .../datatable/DashboardDrawer.svelte          |  4 +-
 .../components/datatable/DashboardLink.svelte |  4 +-
 tests/mock-data.ts                            |  5 +-
 tests/routes/dashboard/test.ts                | 53 ++++++++++++++++++-
 4 files changed, 58 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/datatable/DashboardDrawer.svelte b/src/lib/components/datatable/DashboardDrawer.svelte
index abee72ed..76e11695 100644
--- a/src/lib/components/datatable/DashboardDrawer.svelte
+++ b/src/lib/components/datatable/DashboardDrawer.svelte
@@ -26,7 +26,7 @@
 </script>
 
 {#if title}
-  <h2 class="text-2xl font-bold ml-4">{title}</h2>
+  <h2 data-testid="drawer-title" class="text-2xl font-bold ml-4">{title}</h2>
 {/if}
 <hr class="m-4 border-t-2 border-gray-200" />
 {#await getDataset()}
@@ -34,7 +34,7 @@
     <ProgressRadial />
   </div>
 {:then details}
-  <ul class="m-4 p-4">
+  <ul data-testid="drawer-details" class="m-4 p-4">
     {#each Object.entries(details) as [key, value]}
       {#if value}
         <li class="m-2">
diff --git a/src/lib/components/datatable/DashboardLink.svelte b/src/lib/components/datatable/DashboardLink.svelte
index 9df0844a..32fc6e1e 100644
--- a/src/lib/components/datatable/DashboardLink.svelte
+++ b/src/lib/components/datatable/DashboardLink.svelte
@@ -11,8 +11,8 @@
     href={link || '#'}
     title={link ? 'More Info' : 'Link not available'}
     on:click|stopPropagation={(e) => !link && e.preventDefault()}
-    class="btn variant-ghost-primary hover:variant-filled-primary {!link
-      ? 'opacity-50 cursor-not-allowed'
+    class="btn variant-ghost-primary hover:variant-filled-primary{!link
+      ? ' opacity-50 cursor-not-allowed'
       : ''}"
     target="_blank">More Info</a
   >
diff --git a/tests/mock-data.ts b/tests/mock-data.ts
index b0851440..86298c6b 100644
--- a/tests/mock-data.ts
+++ b/tests/mock-data.ts
@@ -45,8 +45,9 @@ export const mockDashboard: DashboardResp = {
     { label: 'Link', dataElement: 'additional_info_link' },
   ],
   rows: [
-    { name: 'A', additional_info_link: 'foo.invalid' },
-    { name: 'B', additional_info_link: 'bar.invalid' },
+    { name: 'A', description: 'This is a description 1', additional_info_link: 'foo.invalid', dataset_id: '1' },
+    { name: 'B', description: 'This is a description 2', additional_info_link: 'bar.invalid', dataset_id: '2' },
+    { name: 'C', description: 'This is a description 3', additional_info_link: null, dataset_id: '3' },
   ],
 };
 
diff --git a/tests/routes/dashboard/test.ts b/tests/routes/dashboard/test.ts
index 2544b892..9392547e 100644
--- a/tests/routes/dashboard/test.ts
+++ b/tests/routes/dashboard/test.ts
@@ -20,10 +20,59 @@ test.describe('Dashboard page', () => {
       await page.goto('/dashboard');
 
       // Then
-      await expect((await page.getByText('More Info').all()).length).toBe(2);
-      await expect(page.getByText('More Info').first()).toHaveClass(
+      const buttons = await page.getByText('More Info').all();
+      console.log(buttons);
+      console.log(buttons.length);
+      console.log(mockDashboard.rows.length);
+      expect(buttons.length).toBe(mockDashboard.rows.length);
+      await expect(buttons[0]).toHaveClass(
         'btn variant-ghost-primary hover:variant-filled-primary',
       );
     });
+    test('Dashboard renders disabled buttons when link is not available', async ({ page }) => {
+      // Given
+      await page.goto('/dashboard');
+
+      // Then
+      await expect(page.getByText('More Info').last()).toHaveClass(
+        'btn variant-ghost-primary hover:variant-filled-primary opacity-50 cursor-not-allowed',
+      );
+    });
+    test('Dashboard rows are clickable and open drawer', async ({ page }) => {
+      // Given
+      await mockApiSuccess(page, '*/**/picsure/proxy/dictionary-api/dashboard-drawer/1', { dashboardDrawerList: [ { ...mockDashboard.rows[0] } ] });
+      await page.goto('/dashboard');
+
+      // When
+      await page.locator('#row-0-col-0').click();
+
+      // Then
+      await expect(page.getByTestId('drawer')).toBeVisible();
+      await expect(page.getByTestId('drawer').getByTestId('drawer-title')).toHaveText(
+        mockDashboard.rows[0].name as string,
+      );
+    });
+    test('Dashboard drawer displays correct data', async ({ page }) => {
+      // Given
+      await mockApiSuccess(page, '*/**/picsure/proxy/dictionary-api/dashboard-drawer/1', { dashboardDrawerList: [ { ...mockDashboard.rows[0] } ] });
+      await page.goto('/dashboard');
+
+      // When
+      await page.locator('#row-0-col-0').click();
+
+      // Then
+      await expect(page.getByTestId('drawer')).toBeVisible();
+      const entries = Object.entries(mockDashboard.rows[0]);
+      const drawerText = await page.getByTestId('drawer').getByTestId('drawer-details').innerText();
+      const lines = drawerText.split('\n');
+      
+      for (let i = 0; i < entries.length; i++) {
+        const [key, value] = entries[i];
+        if (key === 'additional_info_link' || key === 'dataset_id') continue;
+        
+        const formattedKey = key.replace(/([A-Z])/g, ' $1').toLowerCase().trim();
+        expect(lines[i].toLowerCase()).toBe(`${formattedKey}: ${value}`.toLowerCase());
+      }
+    });
   });
 });

From e4ceb000d1dad3693972e36c84fd131659273f86 Mon Sep 17 00:00:00 2001
From: James <Jamestp19@gmail.com>
Date: Tue, 19 Nov 2024 14:33:18 -0500
Subject: [PATCH 13/19] add extra check

---
 src/lib/components/datatable/DashboardDrawer.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/datatable/DashboardDrawer.svelte b/src/lib/components/datatable/DashboardDrawer.svelte
index 76e11695..25355b1d 100644
--- a/src/lib/components/datatable/DashboardDrawer.svelte
+++ b/src/lib/components/datatable/DashboardDrawer.svelte
@@ -11,7 +11,7 @@
   const link = (($drawerStore.meta.row as DashboardRow)?.additional_info_link as string) || '';
   async function getDataset() {
     const res = await getDatasetDetails(datasetId);
-    if (res.dashboardDrawerList) {
+    if (res.dashboardDrawerList && res.dashboardDrawerList.length > 0) {
       let details = res.dashboardDrawerList[0];
       if (details.datasetId) {
         delete details.datasetId;

From 84e7dc5cd585860ff235635f65b0204dfc5ab9f7 Mon Sep 17 00:00:00 2001
From: James <Jamestp19@gmail.com>
Date: Tue, 19 Nov 2024 14:41:16 -0500
Subject: [PATCH 14/19] Add tab index to row

---
 src/lib/components/datatable/Row.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/datatable/Row.svelte b/src/lib/components/datatable/Row.svelte
index c0716edc..d78c3c3e 100644
--- a/src/lib/components/datatable/Row.svelte
+++ b/src/lib/components/datatable/Row.svelte
@@ -31,6 +31,7 @@
   id="row-{index.toString()}"
   on:click|stopPropagation={() => onClick(row)}
   class={isClickable ? 'cursor-pointer' : ''}
+  tabindex={isClickable ? 0 : -1}
 >
   {#each columns as column, colIndex}
     <td id="row-{index.toString()}-col-{colIndex.toString()}">

From bf180d399a2a69ca8dc010dc38ad40bd52a175cd Mon Sep 17 00:00:00 2001
From: James <Jamestp19@gmail.com>
Date: Tue, 19 Nov 2024 16:38:10 -0500
Subject: [PATCH 15/19] update to just expect details

---
 .../datatable/DashboardDrawer.svelte          | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/datatable/DashboardDrawer.svelte b/src/lib/components/datatable/DashboardDrawer.svelte
index 25355b1d..9e8999c1 100644
--- a/src/lib/components/datatable/DashboardDrawer.svelte
+++ b/src/lib/components/datatable/DashboardDrawer.svelte
@@ -9,19 +9,17 @@
   const datasetId = (($drawerStore.meta.row as DashboardRow)?.dataset_id as string) || '';
   const title = (($drawerStore.meta.row as DashboardRow)?.name as string) || '';
   const link = (($drawerStore.meta.row as DashboardRow)?.additional_info_link as string) || '';
+  
   async function getDataset() {
-    const res = await getDatasetDetails(datasetId);
-    if (res.dashboardDrawerList && res.dashboardDrawerList.length > 0) {
-      let details = res.dashboardDrawerList[0];
-      if (details.datasetId) {
-        delete details.datasetId;
-      }
-      if (details.studyFullname) {
-        delete details.studyFullname;
-      }
-      return details;
+    const details = await getDatasetDetails(datasetId);
+    if (!details) throw new Error('No details found');
+    if (details.datasetId) {
+      delete details.datasetId;
     }
-    throw new Error('No dashboardDrawerList found');
+    if (details.studyFullname) {
+      delete details.studyFullname;
+    }
+    return details;
   }
 </script>
 

From 6c9effc38807d8eff5dcd17afb236d9563123b12 Mon Sep 17 00:00:00 2001
From: James <Jamestp19@gmail.com>
Date: Tue, 19 Nov 2024 16:39:19 -0500
Subject: [PATCH 16/19] add another check

---
 src/lib/components/datatable/DashboardDrawer.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/datatable/DashboardDrawer.svelte b/src/lib/components/datatable/DashboardDrawer.svelte
index 9e8999c1..24c88364 100644
--- a/src/lib/components/datatable/DashboardDrawer.svelte
+++ b/src/lib/components/datatable/DashboardDrawer.svelte
@@ -9,10 +9,10 @@
   const datasetId = (($drawerStore.meta.row as DashboardRow)?.dataset_id as string) || '';
   const title = (($drawerStore.meta.row as DashboardRow)?.name as string) || '';
   const link = (($drawerStore.meta.row as DashboardRow)?.additional_info_link as string) || '';
-  
+
   async function getDataset() {
     const details = await getDatasetDetails(datasetId);
-    if (!details) throw new Error('No details found');
+    if (!details || Object.keys(details).length === 0) throw new Error('No details found');
     if (details.datasetId) {
       delete details.datasetId;
     }

From 3175b5c861aa1616dbf6fc2c967202f3c1ac6afc Mon Sep 17 00:00:00 2001
From: James <Jamestp19@gmail.com>
Date: Wed, 20 Nov 2024 10:43:01 -0500
Subject: [PATCH 17/19] fix formatting

---
 tests/mock-data.ts             | 21 ++++++++++++++++++---
 tests/routes/dashboard/test.ts | 17 ++++++++++++-----
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/tests/mock-data.ts b/tests/mock-data.ts
index 86298c6b..cd4419e2 100644
--- a/tests/mock-data.ts
+++ b/tests/mock-data.ts
@@ -45,9 +45,24 @@ export const mockDashboard: DashboardResp = {
     { label: 'Link', dataElement: 'additional_info_link' },
   ],
   rows: [
-    { name: 'A', description: 'This is a description 1', additional_info_link: 'foo.invalid', dataset_id: '1' },
-    { name: 'B', description: 'This is a description 2', additional_info_link: 'bar.invalid', dataset_id: '2' },
-    { name: 'C', description: 'This is a description 3', additional_info_link: null, dataset_id: '3' },
+    {
+      name: 'A',
+      description: 'This is a description 1',
+      additional_info_link: 'foo.invalid',
+      dataset_id: '1',
+    },
+    {
+      name: 'B',
+      description: 'This is a description 2',
+      additional_info_link: 'bar.invalid',
+      dataset_id: '2',
+    },
+    {
+      name: 'C',
+      description: 'This is a description 3',
+      additional_info_link: null,
+      dataset_id: '3',
+    },
   ],
 };
 
diff --git a/tests/routes/dashboard/test.ts b/tests/routes/dashboard/test.ts
index 9392547e..80b2e5b6 100644
--- a/tests/routes/dashboard/test.ts
+++ b/tests/routes/dashboard/test.ts
@@ -40,7 +40,9 @@ test.describe('Dashboard page', () => {
     });
     test('Dashboard rows are clickable and open drawer', async ({ page }) => {
       // Given
-      await mockApiSuccess(page, '*/**/picsure/proxy/dictionary-api/dashboard-drawer/1', { dashboardDrawerList: [ { ...mockDashboard.rows[0] } ] });
+      await mockApiSuccess(page, '*/**/picsure/proxy/dictionary-api/dashboard-drawer/1', {
+        dashboardDrawerList: [{ ...mockDashboard.rows[0] }],
+      });
       await page.goto('/dashboard');
 
       // When
@@ -54,7 +56,9 @@ test.describe('Dashboard page', () => {
     });
     test('Dashboard drawer displays correct data', async ({ page }) => {
       // Given
-      await mockApiSuccess(page, '*/**/picsure/proxy/dictionary-api/dashboard-drawer/1', { dashboardDrawerList: [ { ...mockDashboard.rows[0] } ] });
+      await mockApiSuccess(page, '*/**/picsure/proxy/dictionary-api/dashboard-drawer/1', {
+        dashboardDrawerList: [{ ...mockDashboard.rows[0] }],
+      });
       await page.goto('/dashboard');
 
       // When
@@ -65,12 +69,15 @@ test.describe('Dashboard page', () => {
       const entries = Object.entries(mockDashboard.rows[0]);
       const drawerText = await page.getByTestId('drawer').getByTestId('drawer-details').innerText();
       const lines = drawerText.split('\n');
-      
+
       for (let i = 0; i < entries.length; i++) {
         const [key, value] = entries[i];
         if (key === 'additional_info_link' || key === 'dataset_id') continue;
-        
-        const formattedKey = key.replace(/([A-Z])/g, ' $1').toLowerCase().trim();
+
+        const formattedKey = key
+          .replace(/([A-Z])/g, ' $1')
+          .toLowerCase()
+          .trim();
         expect(lines[i].toLowerCase()).toBe(`${formattedKey}: ${value}`.toLowerCase());
       }
     });

From eb79deb45dd1199134d8c385c58eb681352b87f4 Mon Sep 17 00:00:00 2001
From: James <Jamestp19@gmail.com>
Date: Wed, 20 Nov 2024 11:05:47 -0500
Subject: [PATCH 18/19] remove console logs

---
 tests/routes/dashboard/test.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/tests/routes/dashboard/test.ts b/tests/routes/dashboard/test.ts
index 80b2e5b6..8c5c8372 100644
--- a/tests/routes/dashboard/test.ts
+++ b/tests/routes/dashboard/test.ts
@@ -21,9 +21,7 @@ test.describe('Dashboard page', () => {
 
       // Then
       const buttons = await page.getByText('More Info').all();
-      console.log(buttons);
-      console.log(buttons.length);
-      console.log(mockDashboard.rows.length);
+
       expect(buttons.length).toBe(mockDashboard.rows.length);
       await expect(buttons[0]).toHaveClass(
         'btn variant-ghost-primary hover:variant-filled-primary',

From 1eaae12ec25907782a6791fe531d5faa0205345c Mon Sep 17 00:00:00 2001
From: James <Jamestp19@gmail.com>
Date: Wed, 20 Nov 2024 13:10:38 -0500
Subject: [PATCH 19/19] Update tests

---
 tests/routes/dashboard/test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/routes/dashboard/test.ts b/tests/routes/dashboard/test.ts
index 8c5c8372..35afdd8b 100644
--- a/tests/routes/dashboard/test.ts
+++ b/tests/routes/dashboard/test.ts
@@ -55,7 +55,7 @@ test.describe('Dashboard page', () => {
     test('Dashboard drawer displays correct data', async ({ page }) => {
       // Given
       await mockApiSuccess(page, '*/**/picsure/proxy/dictionary-api/dashboard-drawer/1', {
-        dashboardDrawerList: [{ ...mockDashboard.rows[0] }],
+        ...mockDashboard.rows[0],
       });
       await page.goto('/dashboard');