diff --git a/.env.example b/.env.example index 816a975f..290c38ee 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_ENABLE_SAMPLE_ID_CHECKBOX=true # VITE_AUTH_PROVIDER_MODULE is the prefix for any authorization providers you want to use. diff --git a/.env.test b/.env.test index 8d1835e0..468fbeff 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_ENABLE_SAMPLE_ID_CHECKBOX=true # VITE_AUTH_PROVIDER_MODULE is the prefix for any authorization providers you want to use. diff --git a/src/lib/components/datatable/DashboardDrawer.svelte b/src/lib/components/datatable/DashboardDrawer.svelte new file mode 100644 index 00000000..24c88364 --- /dev/null +++ b/src/lib/components/datatable/DashboardDrawer.svelte @@ -0,0 +1,76 @@ + + +{#if title} +

{title}

+{/if} +
+{#await getDataset()} +
+ +
+{:then details} + + {#if link} +
+ More Info +
+ {/if} +{:catch} +
+ +

We're having trouble fetching the dataset details right now. Please try again later.

+ +
+{/await} diff --git a/src/lib/components/datatable/DashboardLink.svelte b/src/lib/components/datatable/DashboardLink.svelte index bd8feb18..32fc6e1e 100644 --- a/src/lib/components/datatable/DashboardLink.svelte +++ b/src/lib/components/datatable/DashboardLink.svelte @@ -7,7 +7,13 @@ {#if consentGranted} {:else} - More Info !link && e.preventDefault()} + class="btn variant-ghost-primary hover:variant-filled-primary{!link + ? ' opacity-50 cursor-not-allowed' + : ''}" + target="_blank">More Info {/if} 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 @@ {:else if $rows.length > 0} {#each $rows as row, i} - + {/each} {:else} No entries found. diff --git a/src/lib/components/datatable/Row.svelte b/src/lib/components/datatable/Row.svelte index 3f45572e..d78c3c3e 100644 --- a/src/lib/components/datatable/Row.svelte +++ b/src/lib/components/datatable/Row.svelte @@ -15,19 +15,23 @@ 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) { - 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); onClick(row)} - class="cursor-pointer" + class={isClickable ? 'cursor-pointer' : ''} + tabindex={isClickable ? 0 : -1} > {#each columns as column, colIndex} 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 @@ {#if $rows.length > 0} {#each $rows as row, i} - + {/each} {:else} No entries found. diff --git a/src/lib/configuration.ts b/src/lib/configuration.ts index dc08f577..b7fe4ea8 100644 --- a/src/lib/configuration.ts +++ b/src/lib/configuration.ts @@ -139,6 +139,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/lib/services/dictionary.ts b/src/lib/services/dictionary.ts index be5181a7..d2b04869 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/dashboard-drawer/'; 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.get(`${datasetDetailUrl}${datasetId}`); +} 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} />
@@ -106,6 +107,7 @@ cellOverides={privilegesTable.overrides} defaultRowsPerPage={10} rowClickHandler={privilegeRowClick} + isClickable={true} />
{: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} /> {/each} diff --git a/src/routes/(picsure)/(public)/dashboard/+page.svelte b/src/routes/(picsure)/(public)/dashboard/+page.svelte index c21622a9..c3a1fd30 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'; @@ -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; @@ -40,6 +44,13 @@ unsubColumns && unsubColumns(); unsubRows && unsubRows(); }); + + function rowClickHandler(row: DashboardRow) { + drawerStore.open({ + id: 'dashboard-drawer', + meta: { row }, + }); + } @@ -59,6 +70,8 @@ search={false} showPagination={false} stickyHeader={true} + rowClickHandler={features.dashboardDrawer ? rowClickHandler : undefined} + isClickable={features.dashboardDrawer} /> {/await} diff --git a/src/routes/(picsure)/+layout.svelte b/src/routes/(picsure)/+layout.svelte index 6d938ef3..c19193a6 100644 --- a/src/routes/(picsure)/+layout.svelte +++ b/src/routes/(picsure)/+layout.svelte @@ -1,5 +1,12 @@