Disable filters on discover if allowFiltering is false (#208)

hms-dbmi · Sep 26, 2024 · 3462141 · 3462141
1 parent 5c578a1
commit 3462141
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 18 deletions.
diff --git a/src/app.postcss b/src/app.postcss
@@ -373,6 +373,10 @@ input.required:invalid,
   &:hover {
     @apply text-primary-600-300-token;
   }
+
+  &:disabled {
+    @apply text-surface-500-400-token;
+  }
 }
 
 .dark .btn-icon-color {

diff --git a/src/lib/components/datatable/Row.svelte b/src/lib/components/datatable/Row.svelte
@@ -59,4 +59,8 @@
   .expandable-row {
     background-color: rgb(var(--color-surface-300)) !important;
   }
+
+  tr:not(.expandable-row) td:last-child {
+    text-align: center;
+  }
 </style>
diff --git a/src/lib/components/explorer/Explorer.svelte b/src/lib/components/explorer/Explorer.svelte
@@ -24,14 +24,15 @@
   let searchInput = $page.url.searchParams.get('search') || $searchTerm || '';
   const tableName = 'ExplorerTable';
   $: tourEnabled = true;
+  $: isOpenAccess = $page.url.pathname.includes('/discover');
 
   const additionalColumns = branding.explorePage.additionalColumns || [];
 
   const columns: Column[] = [
     ...additionalColumns,
     { dataElement: 'display', label: 'Variable Name', sort: false },
     { dataElement: 'description', label: 'Variable Description', sort: false },
-    { dataElement: 'id', label: 'Actions', class: 'w-36' },
+    { dataElement: 'id', label: 'Actions', class: 'w-36 text-center' },
   ];
   const cellOverides = {
     id: Actions,
@@ -83,7 +84,6 @@
     unsubSelectedFacets && unsubSelectedFacets();
     unsubSearchTerm && unsubSearchTerm();
   });
-  $: isOpenAccess = $page.url.pathname.includes('/discover');
 </script>
 
 <section id="search-container" class="flex gap-9">

diff --git a/src/lib/components/explorer/cell/Actions.svelte b/src/lib/components/explorer/cell/Actions.svelte
@@ -5,6 +5,7 @@
   import ExportStore from '$lib/stores/Export';
   import { v4 as uuidv4 } from 'uuid';
   import { features } from '$lib/configuration';
+  import { page } from '$app/stores';
   let { exports, addExport, removeExport } = ExportStore;
   export let data = {} as SearchResult;
   $: exportItem = {
@@ -25,7 +26,7 @@
 
   const insertInfoContent = updateActiveRow('info');
   const insertFilterContent = updateActiveRow('filter');
-  // const insertHierarchyContent = updateActiveRow('hierarchy');
+  const insertHierarchyContent = updateActiveRow('hierarchy');
 
   function insertExportContent() {
     if ($exports.includes(exportItem)) {
@@ -34,8 +35,9 @@
       addExport(exportItem);
     }
   }
-
+  $: isOpenAccess = $page.url.pathname.includes('/discover');
   $: isExported = $exports.map((exp) => exp.conceptPath).includes(exportItem.conceptPath);
+  $: shouldDisableFilter = isOpenAccess && !data.row.allowFiltering;
 </script>
 
 <button
@@ -49,25 +51,28 @@
 </button>
 <button
   type="button"
-  title="Filter"
+  title={shouldDisableFilter ? 'Filtering is not available for this variable' : 'Filter'}
   class="btn-icon-color"
+  disabled={shouldDisableFilter}
   on:click|stopPropagation={insertFilterContent}
 >
   <i class="fa-solid fa-filter fa-xl"></i>
-  <span class="sr-only">View Filters</span>
-</button>
-<!-- TODO: Renable Hierarchy button when feature is implemented
-<button
-  type="button"
-  title="Data Hierarchy"
-  class="btn-icon-color"
-  on:click|stopPropagation={insertHierarchyContent}
->
-  <i class="fa-solid fa-sitemap fa-xl"></i>
-  <span class="sr-only">View Data Hierarchy</span>
+  <span class="sr-only"
+    >{shouldDisableFilter ? 'Filtering is not available for this variable' : 'View Filter'}</span
+  >
 </button>
--->
-{#if features.explorer.exportsEnableExport}
+{#if features.explorer.enableHierarchy}
+  <button
+    type="button"
+    title="Data Hierarchy"
+    class="btn-icon-color"
+    on:click|stopPropagation={insertHierarchyContent}
+  >
+    <i class="fa-solid fa-sitemap fa-xl"></i>
+    <span class="sr-only">View Data Hierarchy</span>
+  </button>
+{/if}
+{#if features.explorer.exportsEnableExport && !isOpenAccess}
   <button
     type="button"
     title={isExported ? 'Remove from Analysis' : 'Add for Analysis'}

diff --git a/src/lib/configuration.ts b/src/lib/configuration.ts
@@ -117,6 +117,7 @@ export const features: Indexable = {
     enableTour: import.meta.env?.EXPLORER_TOUR ? import.meta.env?.EXPLORE_TOUR === 'true' : true, // default to true unless set otherwise
     enableSNPQuery: import.meta.env?.VITE_ENABLE_SNP_QUERY === 'true',
     enableGENEQuery: import.meta.env?.VITE_ENABLE_GENE_QUERY === 'true',
+    enableHierarchy: import.meta.env?.VITE_ENABLE_HIERARCHY === 'true',
   },
   login: {
     open: import.meta.env?.VITE_OPEN === 'true',

diff --git a/tests/mock-data.ts b/tests/mock-data.ts
@@ -140,6 +140,7 @@ export const searchResults = {
       name: 'heart_test',
       display: 'Any family with heart attack?',
       dataset: 'test_data_set',
+      allowFiltering: true,
       description: 'Do you have a history of heart attack? Including extended family?',
       values: ['Yes', 'No', "Don't know"],
       children: null,
@@ -151,6 +152,7 @@ export const searchResults = {
       name: 'heart_died',
       display: 'Are you dead from a heart attack?',
       dataset: 'test_data_set',
+      allowFiltering: true,
       description: 'Did you die that one time. Are you a ghost?',
       values: ['Yes', 'No'],
       children: null,
@@ -162,6 +164,7 @@ export const searchResults = {
       name: 'MCQ300a',
       display: 'Any tests today?',
       dataset: 'test_data_set',
+      allowFiltering: true,
       description: 'This is a test description?',
       values: [
         'Yes',
@@ -201,6 +204,7 @@ export const searchResults = {
       name: 'age1',
       display: 'age',
       dataset: 'test_data_set',
+      allowFiltering: true,
       description: 'Age',
       min: 0,
       max: 99,
@@ -212,6 +216,7 @@ export const searchResults = {
       name: 'AGE',
       display: 'AGE',
       dataset: 'STUDY123',
+      allowFiltering: true,
       description: 'This is a test description for Study123?',
       min: 0,
       max: 25,
@@ -223,6 +228,7 @@ export const searchResults = {
       name: 'AGE_CATEGORY',
       display: 'age',
       dataset: 'phs123',
+      allowFiltering: true,
       description: "Participant's age (category)",
       values: ['21', '22', '23', '24', '25'],
       children: null,
@@ -234,6 +240,7 @@ export const searchResults = {
       name: 'AGE_CATEGORY',
       display: 'age',
       dataset: 'phs123',
+      allowFiltering: false,
       description: "Participant's age (category)",
       values: ['21', '22', '23', '24', '25', '26'],
       children: null,
@@ -275,6 +282,7 @@ export const tourSearchResults = {
       name: 'age1',
       display: 'age',
       dataset: 'test_data_set',
+      allowFiltering: true,
       description: 'Age',
       min: 0,
       max: 99,
@@ -286,6 +294,7 @@ export const tourSearchResults = {
       name: 'AGE_CATEGORY',
       display: 'age',
       dataset: 'phs123',
+      allowFiltering: true,
       description: "Participant's age (category)",
       values: ['21', '22', '23', '24', '25'],
       children: null,
@@ -297,6 +306,7 @@ export const tourSearchResults = {
       name: 'AGE_CATEGORY',
       display: 'age',
       dataset: 'phs123',
+      allowFiltering: true,
       description: "Participant's age (category)",
       values: ['21', '22', '23', '24', '25', '26'],
       children: null,
@@ -319,6 +329,7 @@ export const detailResponseCat = {
   name: 'heart_test',
   display: 'Any family with heart attack?',
   dataset: 'test_data_set',
+  allowFiltering: true,
   description: 'Do you have a history of heart attack? Including extended family?',
   values: ['Yes', 'No', "Don't know"],
   children: null,
@@ -334,6 +345,7 @@ export const detailResponseCatSameDataset = {
   name: 'heart_died',
   display: 'Are you dead from a heart attack?',
   dataset: 'test_data_set',
+  allowFiltering: true,
   description: 'Did you die that one time. Are you a ghost?',
   values: ['Yes', 'No'],
   children: null,
@@ -349,6 +361,7 @@ export const detailResponseCat2 = {
   name: 'MCQ300a',
   display: 'Any tests today?',
   dataset: 'test_data_set',
+  allowFiltering: true,
   description: 'This is a test description?',
   values: [
     'Yes',

diff --git a/tests/routes/discover/test.ts b/tests/routes/discover/test.ts
@@ -80,6 +80,42 @@ test.describe('Discover', () => {
     await expect(page.locator('#results-panel')).toBeVisible();
     await expect(page.locator('#result-count')).toHaveText('< 10');
   });
+  test('Search results with allowFiltering false are not filterable', async ({ page }) => {
+    // Given
+    await page.route('*/**/picsure/query/sync', async (route: Route) =>
+      route.fulfill({ body: '9999' }),
+    );
+    await page.goto('/discover?search=somedata');
+
+    // When
+    await expect(page.locator('tbody')).toBeVisible();
+    const tableBody = page.locator('tbody');
+    const firstRow = tableBody.locator('tr').nth(6);
+    const filterIcon = firstRow.locator('td').last().locator('button').nth(1);
+    console.log(filterIcon);
+
+    // Then
+    await expect(filterIcon).toBeVisible();
+    await expect(filterIcon).toBeDisabled();
+  });
+  test('Search results with allowFiltering true are filterable', async ({ page }) => {
+    // Given
+    await page.route('*/**/picsure/query/sync', async (route: Route) =>
+      route.fulfill({ body: '9999' }),
+    );
+    await page.goto('/discover?search=somedata');
+
+    // When
+    await expect(page.locator('tbody')).toBeVisible();
+    const tableBody = page.locator('tbody');
+    const firstRow = tableBody.locator('tr').nth(5);
+    const filterIcon = firstRow.locator('td').last().locator('button').nth(1);
+    console.log(filterIcon);
+
+    // Then
+    await expect(filterIcon).toBeVisible();
+    await expect(filterIcon).not.toBeDisabled();
+  });
 });
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */