From ae1ca5e7ad21f2459fc922889993df1fb3dd1441 Mon Sep 17 00:00:00 2001
From: James <Jamestp19@gmail.com>
Date: Wed, 20 Mar 2024 11:26:29 -0400
Subject: [PATCH] [ALS-6161 + ALS-6162] Search, Filters, Exports

---
 .github/dependabot.yml                        |   16 +-
 src/app.postcss                               |   13 +-
 src/lib/components/ModalWrapper.svelte        |   17 +
 .../components/OptionsSelectionList.svelte    |  183 +++
 src/lib/components/Searchbox.svelte           |   44 +
 src/lib/components/UserToken.svelte           |    6 +-
 src/lib/components/datatable/Row.svelte       |   48 +
 src/lib/components/datatable/Table.svelte     |   43 +-
 .../datatable/accessories/Rows.svelte         |   25 +-
 src/lib/components/explorer/AddFilter.svelte  |  145 +++
 .../explorer/HierarchyComponent.svelte        |   10 +
 .../explorer/ResultInfoComponent.svelte       |   22 +
 .../components/explorer/cell/Actions.svelte   |   62 +-
 .../explorer/results/AddedFilter.svelte       |  125 ++
 .../explorer/results/ExportedVariable.svelte  |    7 +-
 .../explorer/results/FilterComponent.svelte   |   82 --
 .../explorer/results/ResultsPanel.svelte      |  116 +-
 .../explorer/results/SidePanel.svelte         |   21 +-
 src/lib/components/user/cell/Status.svelte    |    3 +-
 src/lib/configuration.ts                      |   10 +-
 src/lib/models/Filter.ts                      |   54 +-
 src/lib/models/Search.ts                      |    8 +
 src/lib/models/Tables.ts                      |    7 +
 src/lib/models/query/Query.ts                 |   21 +-
 src/lib/stores/Export.ts                      |    3 +
 src/lib/stores/Filter.ts                      |    5 +
 src/lib/stores/Query.ts                       |   14 +
 src/lib/stores/Search.ts                      |    7 +
 src/routes/+layout.svelte                     |    9 +-
 src/routes/+page.svelte                       |   28 +-
 src/routes/admin/+page.svelte                 |    5 +
 src/routes/admin/super/+page.svelte           |    5 +
 src/routes/api/+page.svelte                   |    3 +
 src/routes/dataset/+page.svelte               |    5 +
 src/routes/dataset/[uuid]/+page.svelte        |    5 +
 src/routes/explorer/+page.svelte              |   62 +-
 src/routes/help/+page.svelte                  |    3 +
 tests/lib/component/navigation/test.ts        |    2 +-
 tests/mock-data.ts                            |   79 ++
 tests/routes/explorer/test.ts                 | 1078 ++++++++++++++---
 40 files changed, 2014 insertions(+), 387 deletions(-)
 create mode 100644 src/lib/components/ModalWrapper.svelte
 create mode 100644 src/lib/components/OptionsSelectionList.svelte
 create mode 100644 src/lib/components/Searchbox.svelte
 create mode 100644 src/lib/components/datatable/Row.svelte
 create mode 100644 src/lib/components/explorer/AddFilter.svelte
 create mode 100644 src/lib/components/explorer/HierarchyComponent.svelte
 create mode 100644 src/lib/components/explorer/ResultInfoComponent.svelte
 create mode 100644 src/lib/components/explorer/results/AddedFilter.svelte
 delete mode 100644 src/lib/components/explorer/results/FilterComponent.svelte
 create mode 100644 src/lib/models/Tables.ts
 create mode 100644 src/lib/stores/Query.ts

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index ede2a14a..fcc6ad64 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -1,15 +1,15 @@
 version: 2
 updates:
-  - package-ecosystem: "npm"
-    directory: "/"
+  - package-ecosystem: 'npm'
+    directory: '/'
     schedule:
-      interval: "weekly"
+      interval: 'weekly'
     commit-message:
-      prefix: "[npm] "
+      prefix: '[npm] '
 
-  - package-ecosystem: "docker"
-    directory: "/"
+  - package-ecosystem: 'docker'
+    directory: '/'
     schedule:
-      interval: "weekly"
+      interval: 'weekly'
     commit-message:
-      prefix: "[docker] "
+      prefix: '[docker] '
diff --git a/src/app.postcss b/src/app.postcss
index 69308385..2a20bfff 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -8,7 +8,6 @@ body {
   @apply h-full overflow-hidden;
 }
 
-#shell-header,
 section.main-content {
   padding: 0 1em;
 }
@@ -31,6 +30,10 @@ section.main-content.w-full {
   }
 }
 
+input[type='checkbox'] {
+  @apply checkbox;
+}
+
 @media print {
   .app-bar #page-navigation {
     display: none;
@@ -203,17 +206,17 @@ nav#page-navigation li a {
   @apply rounded-container-token;
 }
 nav#page-navigation a[aria-current='page'] {
-  @apply variant-filled-secondary;
+  background-color: rgba(var(--color-primary-50-900));
+  color: rgb(var(--theme-font-color-base));
 }
 nav#page-navigation a:hover,
 nav#page-navigation a:active {
   @apply variant-filled-primary;
 }
 
-#landing input[type='search'] {
+input[type='search'] {
   width: 100%;
   box-sizing: border-box;
-  margin-right: 0.5rem;
   @apply input;
 }
 
@@ -269,4 +272,4 @@ nav#page-navigation a:active {
   height: 6rem;
   margin-bottom: 1rem;
   @apply rounded-container-token;
-}
\ No newline at end of file
+}
diff --git a/src/lib/components/ModalWrapper.svelte b/src/lib/components/ModalWrapper.svelte
new file mode 100644
index 00000000..3584cd3b
--- /dev/null
+++ b/src/lib/components/ModalWrapper.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { getModalStore } from '@skeletonlabs/skeleton';
+  const modalStore = getModalStore();
+</script>
+
+{#if $modalStore[0]}
+  <div class="card p-4 w-modal shadow-xl space-y-4">
+    <header data-testid="modal-wrapper-header" class="text-2xl font-bold">
+      {$modalStore[0].title ?? '(title missing)'}
+      <button class="float-right" on:click={() => modalStore.close()}>&times;</button>
+    </header>
+    <svelte:component
+      this={$modalStore[0].meta.component}
+      existingFilter={$modalStore[0].meta.existingFilter}
+    />
+  </div>
+{/if}
diff --git a/src/lib/components/OptionsSelectionList.svelte b/src/lib/components/OptionsSelectionList.svelte
new file mode 100644
index 00000000..18847edc
--- /dev/null
+++ b/src/lib/components/OptionsSelectionList.svelte
@@ -0,0 +1,183 @@
+<script lang="ts">
+  import { quintOut } from 'svelte/easing';
+  import { crossfade } from 'svelte/transition';
+  import { flip } from 'svelte/animate';
+
+  const [send, receive] = crossfade({
+    fallback(node) {
+      const style = getComputedStyle(node);
+      const transform = style.transform === 'none' ? '' : style.transform;
+
+      return {
+        easing: quintOut,
+        css: (t) => `
+					transform: ${transform} scale(${t});
+					opacity: ${t}
+				`,
+      };
+    },
+  });
+  export let options: string[] = [];
+  export let allOptions: string[] = options;
+  export let selectedOptions: string[] = [];
+  export let showSelectAll: boolean = true;
+  export let loadMore: (searchTerm: string) => Promise<string[]>;
+  
+  let searchInput: string = '';
+  let selectedOptionEndLocation = 20;
+  let optionsContainer: HTMLElement;
+  let selelectedOptionsContainer: HTMLElement;
+
+  async function handleScroll() {
+    if (!optionsContainer) return;
+    if (loadMore === undefined) return; //todo test this
+    if (shouldLoadMore(optionsContainer)) {
+      let nextOptions = await loadMore(searchInput);
+      if (nextOptions && Array.isArray(nextOptions) && nextOptions.length > 0) {
+        options = [...options, ...nextOptions];
+      }
+    }
+  }
+
+  function onSelect(option: string) {
+    options = options.filter((o) => o !== option);
+    selectedOptions = [...selectedOptions, option];
+    if (elementHasScrollbar(optionsContainer)) {
+      handleScroll();
+    }
+  }
+
+  function onUnselect(option: string) {
+    selectedOptions = selectedOptions.filter((o) => o !== option);
+    options = [option, ...options];
+  }
+
+  function elementHasScrollbar(element: HTMLElement) {
+    return element.scrollHeight > element.clientHeight;
+  }
+
+  function loadMoreSelectedOptions() {
+    if (!selelectedOptionsContainer) return;
+    if (shouldLoadMore(selelectedOptionsContainer)) {
+      selectedOptionEndLocation = selectedOptionEndLocation + 20;
+    }
+  }
+
+  function shouldLoadMore(element: HTMLElement) {
+    const scrollTop = element.scrollTop;
+    const containerHeight = element.clientHeight;
+    const contentHeight = element.scrollHeight;
+    const scrollBuffer = 30;
+    return (contentHeight - (scrollTop + containerHeight) <= scrollBuffer);
+  }
+
+  $: filteredOptions = options?.filter((option) =>
+    option.toLowerCase().includes(searchInput.toLowerCase()),
+  );
+
+  $: displayedSelectedOptions = selectedOptions.slice(0, selectedOptionEndLocation);
+</script>
+
+<div data-testid="optional-selection-list" class="flex w-full">
+  <div class="flex flex-1 flex-col h-full p-3 m-1 card">
+    <header class="flex pb-1">
+      <input
+        class="input"
+        type="search"
+        name="search"
+        bind:value={searchInput}
+        placeholder="Search..."
+      />
+      {#if showSelectAll}
+        <button
+          id="select-all"
+          class="btn variant-ringed-surface hover:variant-filled-primary ml-2"
+          on:click={() => {
+            selectedOptions = allOptions;
+            selectedOptionEndLocation = 20;
+            options = [];
+          }}>Select All</button
+        >
+      {/if}
+    </header>
+    <section class="card-body">
+      <div
+        id="options-container"
+        bind:this={optionsContainer}
+        class="overflow-scroll scrollbar-color h-25vh"
+        on:scroll={() => handleScroll()}
+      >
+        {#each filteredOptions as option (option)}
+          <label
+            id="option-{option}"
+            class="p-1 m-1 cursor-pointer hover:variant-soft-surface hover:rounded-md"
+            in:receive={{ key: option }}
+            out:send={{ key: option }}
+            role="listitem"
+            animate:flip
+          >
+            <input
+              type="checkbox"
+              value={option}
+              on:click|preventDefault={() => onSelect(option)}
+            />
+            {option}
+          </label>
+        {/each}
+      </div>
+    </section>
+  </div>
+  <div class="flex flex-1 flex-col h-full p-3 m-1 card">
+    <header class="flex justify-between pb-1">
+      <h5>Selected:</h5>
+        <button
+          id="clear"
+          class="btn variant-ringed-surface hover:variant-filled-primary ml-2"
+          on:click={() => {
+            selectedOptionEndLocation = 20;
+            displayedSelectedOptions.forEach((option) => onUnselect(option));
+            selectedOptions = [];
+          }}
+          disabled={selectedOptions.length === 0}>Clear</button
+        >
+    </header>
+    <section class="card-body">
+      <!-- on:scroll={() => selectedOptionsScolling} -->
+      <div
+        id="selected-options-container"
+        bind:this={selelectedOptionsContainer}
+        class="overflow-scroll scrollbar-color h-25vh"
+        on:scroll={() => loadMoreSelectedOptions()}
+      >
+        {#each displayedSelectedOptions as option (option)}
+          <label
+            id="option-{option}"
+            class="p-1 m-1 hover:variant-soft-surface hover:rounded-md cursor-pointer"
+            in:receive={{ key: option }}
+            out:send={{ key: option }}
+            animate:flip
+            role="listitem"
+          >
+            <input
+              type="checkbox"
+              class="mr-1"
+              value={option}
+              on:click|preventDefault={() => onUnselect(option)}
+              checked
+            />
+            {option}
+          </label>
+        {/each}
+      </div>
+    </section>
+  </div>
+</div>
+
+<style>
+  .scrollbar-color {
+    scrollbar-color: rgba(var(--color-surface-300)) rgb(var(--color-surface-100));
+  }
+  .h-25vh {
+    height: 25vh;
+  }
+</style>
diff --git a/src/lib/components/Searchbox.svelte b/src/lib/components/Searchbox.svelte
new file mode 100644
index 00000000..1581d8bc
--- /dev/null
+++ b/src/lib/components/Searchbox.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  export let placeholder = 'Search...';
+  export let search: () => void = () => {};
+  export let searchTerm = '';
+</script>
+
+<div class="flex w-full">
+  <input
+    type="search"
+    autocomplete="off"
+    class="search-box w-full"
+    data-testid="search-box"
+    aria-label="Type search terms here, use enter or the search button to submit search"
+    title="Type search terms here, use enter or the search button to submit search"
+    {placeholder}
+    bind:value={searchTerm}
+    on:keydown={(e) => e.key === 'Enter' && search()}
+    required
+  />
+  <button
+    id="search-button"
+    class="btn variant-filled-primary search-button"
+    aria-label="Search"
+    title="Search"
+    disabled={!searchTerm}
+    on:click={search}
+  >
+    <i class="fas fa-search"></i>
+  </button>
+</div>
+
+<style>
+  .search-box {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    margin-right: 0% !important;
+  }
+  .search-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    padding-right: 1rem;
+    padding-left: 0.75rem;
+  }
+</style>
diff --git a/src/lib/components/UserToken.svelte b/src/lib/components/UserToken.svelte
index 17f444ac..52f2e0bd 100644
--- a/src/lib/components/UserToken.svelte
+++ b/src/lib/components/UserToken.svelte
@@ -53,6 +53,7 @@
         message:
           'An error occured while parsing your token. Please try again later. If this problem persists, please contact an administrator.',
         background: 'variant-filled-error',
+        hoverable: true,
       });
       return 0; //TODO: Handle errors
     }
@@ -101,10 +102,7 @@
         </div>
       </section>
       <footer class="card-footer">
-        <CopyButton
-          buttonText="Copy"
-          itemToCopy={$user.token || ''}
-        />
+        <CopyButton buttonText="Copy" itemToCopy={$user.token || ''} />
         <button
           id="refresh-button"
           class="btn variant-ringed-primary"
diff --git a/src/lib/components/datatable/Row.svelte b/src/lib/components/datatable/Row.svelte
new file mode 100644
index 00000000..bfc1b808
--- /dev/null
+++ b/src/lib/components/datatable/Row.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { Column } from '$lib/models/Tables';
+  import type { Indexable } from '$lib/types';
+  import Search from '$lib/stores/Search';
+  let { activeRow, expandableComponents, activeComponent } = Search;
+
+  export let cellOverides: Indexable = {};
+  export let columns: Column[] = [];
+  export let index: number = -2;
+  export let row: Indexable = {};
+  export let rowClickHandler: (index: number) => void;
+
+  function onClick(index: number) {
+    if (!index || index === -1) return;
+    rowClickHandler && rowClickHandler(index);
+  }
+</script>
+
+<tr id={index.toString()} on:click|stopPropagation={() => onClick(index)} class="cursor-pointer">
+  {#each columns as column}
+    <td>
+      {#if cellOverides[column.dataElement]}
+        <svelte:component
+          this={cellOverides[column.dataElement]}
+          data={{ index, row, cell: row[column.dataElement] }}
+        />
+      {:else}
+        {row[column.dataElement]}
+      {/if}
+    </td>
+  {/each}
+</tr>
+
+{#if Object.keys($expandableComponents).length > 0 && $activeRow === index}
+  <tr class="expandable-row">
+    <td colspan={columns.length}>
+      {#if $activeComponent}
+        <svelte:component this={$activeComponent} data={row} />
+      {/if}
+    </td>
+  </tr>
+{/if}
+
+<style>
+  .expandable-row {
+    background-color: rgb(var(--color-surface-300)) !important;
+  }
+</style>
diff --git a/src/lib/components/datatable/Table.svelte b/src/lib/components/datatable/Table.svelte
index 04a665a1..fe1d8c08 100644
--- a/src/lib/components/datatable/Table.svelte
+++ b/src/lib/components/datatable/Table.svelte
@@ -8,14 +8,8 @@
   import RowCount from './accessories/Count.svelte';
   import Pagination from './accessories/Pagination.svelte';
   import type { Indexable } from '$lib/types';
-
-  interface Column {
-    dataElement: string;
-    label: string;
-    class?: string;
-    sort?: boolean;
-    filter?: boolean;
-  }
+  import type { Column } from '$lib/models/Tables';
+  import AdvancedRow from '$lib/components/datatable/Row.svelte';
 
   // Parameters
   export let search = false;
@@ -23,9 +17,10 @@
   export let defaultRowsPerPage = 5;
   export let columns: Column[] = [];
   export let cellOverides: Indexable = {};
+  export let rowClickHandler: (index: number) => void = () => {};
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  export let data: any = [];
+  export let data: any = []; //TODO: Fix this type
 
   $: handler = new DataHandler(data, { rowsPerPage: defaultRowsPerPage });
   $: rows = handler.getRows();
@@ -51,9 +46,9 @@
       <tr>
         {#each columns as column}
           {#if column.sort}
-            <ThSort {handler} class={`bg-primary-300 ${column.class}`} orderBy={column.dataElement}
-              >{column.label}</ThSort
-            >
+            <ThSort {handler} class={`bg-primary-300 ${column.class}`} orderBy={column.dataElement}>
+              {column.label}
+            </ThSort>
           {:else if column.filter}
             <ThFilter
               {handler}
@@ -68,21 +63,8 @@
     </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 $rows as row, i}
+          <AdvancedRow {cellOverides} {columns} index={i + 1} {row} {rowClickHandler} />
         {/each}
       {:else}
         <tr><td colspan={columns.length}>No entries found.</td></tr>
@@ -97,3 +79,10 @@
     </div>
   </footer>
 </div>
+
+<style>
+  .pic-sure-table-compact tbody td:not(.expandable-component) {
+    padding-top: 0.75rem !important;
+    padding-bottom: 0.75rem !important;
+  }
+</style>
diff --git a/src/lib/components/datatable/accessories/Rows.svelte b/src/lib/components/datatable/accessories/Rows.svelte
index c18fb38b..57bcdc35 100644
--- a/src/lib/components/datatable/accessories/Rows.svelte
+++ b/src/lib/components/datatable/accessories/Rows.svelte
@@ -5,13 +5,20 @@
   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>
+  <label class="flex place-items-center"
+    >Show
+    <select
+      id="row-count-select"
+      class="select ml-2"
+      aria-label="Rows per page"
+      bind:value={$rowsPerPage}
+    >
+      {#each options as option}
+        <option value={option}>
+          {option}
+        </option>
+      {/each}
+    </select>
+  </label>
 </aside>
diff --git a/src/lib/components/explorer/AddFilter.svelte b/src/lib/components/explorer/AddFilter.svelte
new file mode 100644
index 00000000..64af2c34
--- /dev/null
+++ b/src/lib/components/explorer/AddFilter.svelte
@@ -0,0 +1,145 @@
+<script lang="ts">
+  import type { SearchResult } from '$lib/models/Search';
+  import OptionsSelectionList from '../OptionsSelectionList.svelte';
+  import FilterStore from '$lib/stores/Filter';
+  import SearchStore from '$lib/stores/Search';
+  import { getModalStore } from '@skeletonlabs/skeleton';
+  let { addFilter } = FilterStore;
+  let { activeRow } = SearchStore;
+  import { onMount } from 'svelte';
+  import type { Filter } from '$lib/models/Filter';
+  import {
+    createCategoricalFilter,
+    createNumericFilter,
+    createRequiredFilter,
+  } from '$lib/models/Filter';
+
+  const modalStore = getModalStore();
+
+  export let data: SearchResult = {} as SearchResult;
+  let options: string[] = [];
+  let allOptions: string[] = [];
+  let selectedOptions: string[] = [];
+  $: valuesSelected = selectedOptions.map((option) => option);
+  let min: string;
+  let max: string;
+  let startLoacation = 20;
+  let pageSize = 20;
+
+  function getNextValues(searchTerm: string) {
+    const totalOptions = data?.categoryValues?.length || 0;
+    if (totalOptions === 0) return Promise.resolve([]);
+
+    let end = startLoacation + pageSize;
+    if (end > totalOptions) {
+      end = totalOptions;
+    }
+
+    return new Promise<string[]>((resolve) => {
+      let nextOptions: string[] = [];
+      if (searchTerm) {
+        let searchResults = data?.categoryValues?.filter((value) => {
+          return value.toLowerCase().includes(searchTerm.toLowerCase());
+        });
+        nextOptions = searchResults?.slice(startLoacation, end) || [];
+        startLoacation = end;
+      } else {
+        nextOptions = data?.categoryValues?.slice(startLoacation, end) || [];
+        startLoacation = end;
+      }
+      resolve(nextOptions);
+    });
+  }
+
+  onMount(async () => {
+    if ($modalStore[0]?.meta.existingFilter) {
+      const existingFilter: Filter = $modalStore[0]?.meta.existingFilter;
+      data.description = existingFilter.description || '';
+      data.name = existingFilter.variableName || '';
+      data.id = existingFilter.id || '';
+      data.searchResult = existingFilter.searchResult || {};
+      if (existingFilter.filterType === 'categorical') {
+        if (existingFilter.categoryValues.length === 0) {
+          selectedOptions =
+            data?.searchResult?.categoryValues || [];
+        } else {
+          selectedOptions = existingFilter.categoryValues;
+        }
+        data.isCategorical = true;
+        data.categoryValues = existingFilter?.searchResult?.categoryValues || [];
+        options =
+          data?.categoryValues?.filter((value) => {
+            return !selectedOptions.find((selected) => selected === value);
+          }) || [];
+        allOptions = data?.categoryValues || [];
+      } else if (existingFilter.filterType === 'numeric') {
+        min = existingFilter.min || '';
+        max = existingFilter.max || '';
+      }
+    } else if (data.isCategorical) {
+      options = data?.categoryValues || [];
+      allOptions = options;
+      if (options.length >= 50) {
+        options = options.slice(0, pageSize);
+      }
+    } else {
+      min = data.min !== undefined && data.min >= 0 ? data.min.toString() : '';
+      max = data.max !== undefined && data.max >= 0 ? data.max.toString() : '';
+    }
+  });
+
+  function addNewFilter() {
+    let filter: Filter;
+    if (data.isCategorical) {
+      if (!valuesSelected || valuesSelected.length === 0) return;
+      if (valuesSelected.length === data?.categoryValues?.length) {
+        filter = createRequiredFilter(data);
+      } else {
+        filter = createCategoricalFilter(data, valuesSelected);
+      }
+    } else {
+      filter = createNumericFilter(
+        data,
+        min || undefined,
+        max || undefined,
+      );
+    }
+    if (!filter) return; //todo errors
+    addFilter(filter);
+    finish();
+  }
+
+  function finish() {
+    $activeRow = -1;
+    if ($modalStore[0]) {
+      modalStore.close();
+    }
+  }
+</script>
+
+<div class="flex justify-between" data-testid="filter-component">
+  {#if data.isCategorical}
+    <div data-testid="categoical-filter" class="w-full">
+      <OptionsSelectionList {options} {allOptions} bind:selectedOptions loadMore={getNextValues} />
+    </div>
+  {:else}
+    <div class="flex flex-col" data-testid="numerical-filter">
+      <label for="min">Min:</label><input id="min" data-testid="min-input" type="text" placeholder={min} bind:value={min} />
+      <label for="min">Max:</label><input id="max" data-testid="max-input" type="text" placeholder={max} bind:value={max} />
+    </div>
+  {/if}
+  <button
+    class="btn btn-icon variant-filled-primary m-1"
+    data-testid="add-filter"
+    on:click={addNewFilter}
+    disabled={data.isCategorical && valuesSelected.length === 0}
+  >
+    <i class="fas fa-plus"></i>
+  </button>
+</div>
+
+<style>
+  .btn {
+    height: fit-content;
+  }
+</style>
diff --git a/src/lib/components/explorer/HierarchyComponent.svelte b/src/lib/components/explorer/HierarchyComponent.svelte
new file mode 100644
index 00000000..8640cfc9
--- /dev/null
+++ b/src/lib/components/explorer/HierarchyComponent.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { SearchResult } from '$lib/models/Search';
+
+  export let data: SearchResult = {} as SearchResult;
+</script>
+
+<div data-testid="hierarchy-component">
+  Hello from hierarchyComponents.svelte
+  {JSON.stringify(data)}
+</div>
diff --git a/src/lib/components/explorer/ResultInfoComponent.svelte b/src/lib/components/explorer/ResultInfoComponent.svelte
new file mode 100644
index 00000000..8fb146f1
--- /dev/null
+++ b/src/lib/components/explorer/ResultInfoComponent.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { SearchResult } from '$lib/models/Search';
+
+  export let data: SearchResult = {} as SearchResult;
+</script>
+
+<div class="card h-60 p-4">
+  <header class="card-header">
+    <h4>Variable Information for: {data.name}</h4>
+  </header>
+  <section class="card-body">
+    <ul class="break-all">
+      {#each Object.keys(data) as key}
+        {#if data[key] !== undefined}
+          <li>
+            <strong>{key}</strong>: {data[key]}
+          </li>
+        {/if}
+      {/each}
+    </ul>
+  </section>
+</div>
diff --git a/src/lib/components/explorer/cell/Actions.svelte b/src/lib/components/explorer/cell/Actions.svelte
index 06cef741..13f44693 100644
--- a/src/lib/components/explorer/cell/Actions.svelte
+++ b/src/lib/components/explorer/cell/Actions.svelte
@@ -1,23 +1,67 @@
 <script lang="ts">
-  // export let data = { cell: '', row: { archived: false } };
+  import type { SearchResult } from '$lib/models/Search';
+  import Search from '$lib/stores/Search';
+  let { activeRow, expandableComponents, activeComponent } = Search;
+  import type { Export } from '$lib/models/Export';
+  import ExportStore from '$lib/stores/Export';
+  let { exports, addExport, removeExport } = ExportStore;
+  export let data = {} as SearchResult;
+  let exported: Export = {
+    variableName: data.row.name,
+    variableId: data.row.id,
+  };
+  function updateActiveRow(component: string) {
+    if ($activeRow === data.index && $activeComponent === $expandableComponents[component]) {
+      activeRow.set(-1);
+      return;
+    }
+    data.index && activeRow.set(data.index);
+  }
+  function insertInfoContent() {
+    console.log('insertInfoContent');
+    updateActiveRow('info');
+    activeComponent.set($expandableComponents['info']);
+  }
+  function insertFilterContent() {
+    updateActiveRow('filter');
+    activeComponent.set($expandableComponents['filter']);
+  }
+  function insertHierarchyContent() {
+    updateActiveRow('hierarchy');
+    activeComponent.set($expandableComponents['hierarchy']);
+  }
+  function insertExportContent() {
+    if ($exports.includes(exported)) {
+      removeExport(exported.variableId);
+    } else {
+      addExport(exported);
+    }
+  }
 </script>
 
 <button
   type="button"
   title="Information"
-  class="bg-initial text-secondary-600 hover:text-primary-600"
+  class="bg-initial text-black-600 hover:text-primary-600"
+  on:click|stopPropagation={insertInfoContent}
 >
   <i class="fa-solid fa-circle-info fa-xl"></i>
   <span class="sr-only">View Information</span>
 </button>
-<button type="button" title="Filter" class="bg-initial text-secondary-600 hover:text-primary-600">
+<button
+  type="button"
+  title="Filter"
+  class="bg-initial text-black-600 hover:text-primary-600"
+  on:click|stopPropagation={insertFilterContent}
+>
   <i class="fa-solid fa-filter fa-xl"></i>
   <span class="sr-only">View Filters</span>
 </button>
 <button
   type="button"
   title="Data Hierarchy"
-  class="bg-initial text-secondary-600 hover:text-primary-600"
+  class="bg-initial text-black-600 hover:text-primary-600"
+  on:click|stopPropagation={insertHierarchyContent}
 >
   <i class="fa-solid fa-sitemap fa-xl"></i>
   <span class="sr-only">View Data Hierarchy</span>
@@ -25,8 +69,12 @@
 <button
   type="button"
   title="Data Export"
-  class="bg-initial text-secondary-600 hover:text-primary-600"
+  class="bg-initial text-black-600 hover:text-primary-600"
+  on:click|stopPropagation={insertExportContent}
 >
-  <i class="fa-solid fa-right-from-bracket fa-xl"></i>
-  <span class="sr-only">View Data Export</span>
+  {#if $exports.includes(exported)}
+    <i class="fa-regular fa-square-check fa-xl"></i>
+  {:else}
+    <i class="fa-solid fa-right-from-bracket fa-xl"></i>
+  {/if}
 </button>
diff --git a/src/lib/components/explorer/results/AddedFilter.svelte b/src/lib/components/explorer/results/AddedFilter.svelte
new file mode 100644
index 00000000..1a5da6a3
--- /dev/null
+++ b/src/lib/components/explorer/results/AddedFilter.svelte
@@ -0,0 +1,125 @@
+<script lang="ts">
+  import type { Filter } from '$lib/models/Filter';
+  import { fade, scale, slide } from 'svelte/transition';
+  import FilterStore from '$lib/stores/Filter';
+  import { elasticInOut } from 'svelte/easing';
+  import { getModalStore, type ModalSettings } from '@skeletonlabs/skeleton';
+  import AddFilter from '$lib/components/explorer/AddFilter.svelte';
+  let { removeFilter } = FilterStore;
+  const modalStore = getModalStore();
+
+  export let filter: Filter;
+  let open = false;
+  let carot = 'fa-caret-up';
+
+  function editFilter() {
+    const modal: ModalSettings = {
+      type: 'component',
+      title: 'Edit Filter',
+      component: 'modalWrapper',
+      modalClasses: 'bg-surface-100-800-token p-4 block',
+      meta: { existingFilter: filter, component: AddFilter },
+      response: (r: string) => {
+        console.log(r);
+      },
+    };
+    modalStore.trigger(modal);
+  }
+
+  const derivedFilterDescription = function (filter: Filter) {
+    if (filter.filterType === 'categorical') {
+      if (filter.displayType === 'restrict') {
+        let valueText = filter.categoryValues.length === 1 ? 'value' : 'values';
+        return `Restricting to ${filter.categoryValues.length} ${valueText}.`;
+      } else if (filter.displayType === 'any' || filter.displayType === 'anyRecordOf') {
+        return 'Restricting to any value.';
+      } else {
+        return filter.description;
+      }
+    } else if (filter.filterType === 'numeric') {
+      switch (filter.displayType) {
+        case 'between':
+          return `Restricting to between ${filter.min} and ${filter.max}.`;
+        case 'greaterThan':
+          return `Restricting to greater than ${filter.min}.`;
+        case 'lessThan':
+          return `Restricting to less than ${filter.max}.`;
+        default:
+          return filter.description;
+      }
+    } else if (filter.filterType === 'genomic') {
+      return filter.description;
+    }
+  };
+
+  const toggleCardBody = function () {
+    open = !open;
+    carot = open ? 'fa-caret-down' : 'fa-caret-up';
+  };
+
+  const deleteFilter = function () {
+    console.log('delete filter', filter.uuid);
+    return removeFilter(filter.uuid);
+  };
+</script>
+
+<div
+  id={filter.uuid}
+  class="flex flex-col card p-1 m-1"
+  in:scale={{ easing: elasticInOut }}
+  out:fade={{ duration: 300 }}
+  data-testid="added-filter-{filter.variableName}"
+>
+  <header class="card-header p-1 flex">
+    <div
+      class="flex-auto font-bold"
+      tabindex="0"
+      role="button"
+      on:click|preventDefault|stopPropagation={toggleCardBody}
+      on:keydown|preventDefault|stopPropagation={(e) =>
+        (e.key === 'Enter' || e.key === ' ') && toggleCardBody}
+    >
+      {filter.variableName}
+    </div>
+    <div class="actions">
+      <button
+        type="button"
+        title="Edit Filter"
+        class="bg-initial text-black-500 hover:text-primary-600"
+        on:click={editFilter}
+      >
+        <i class="fa-solid fa-pen-to-square"></i>
+      </button>
+      <button
+        type="button"
+        title="Remove Filter"
+        class="bg-initial text-black-500 hover:text-primary-600"
+        on:click={deleteFilter}
+      >
+        <i class="fa-solid fa-times-circle"></i>
+      </button>
+      <button
+        type="button"
+        title="See details"
+        class="bg-initial text-black-500 hover:text-primary-600"
+        on:click={toggleCardBody}
+      >
+        <i class="fa-solid {carot}"></i>
+      </button>
+    </div>
+  </header>
+  {#if open}
+    <section class="p-1 whitespace-pre-wrap" transition:slide={{ axis: 'y' }}>
+      {derivedFilterDescription(filter)}
+      {#if filter.filterType === 'categorical' && filter.displayType !== 'any' && filter.displayType !== 'anyRecordOf'}
+        <div>Values: {filter.categoryValues.join(', ')}</div>
+      {/if}
+    </section>
+  {/if}
+</div>
+
+<style>
+  .actions {
+    flex: none;
+  }
+</style>
diff --git a/src/lib/components/explorer/results/ExportedVariable.svelte b/src/lib/components/explorer/results/ExportedVariable.svelte
index 40b273d4..ccc9608e 100644
--- a/src/lib/components/explorer/results/ExportedVariable.svelte
+++ b/src/lib/components/explorer/results/ExportedVariable.svelte
@@ -16,7 +16,12 @@
   transition:fade={{ duration: 300 }}
 >
   <span>{variable.variableName}</span>
-  <button type="button" title="Remove Export" class="bg-initial text-black-500 hover:text-primary-600" on:click={remove}>
+  <button
+    type="button"
+    title="Remove Export"
+    class="bg-initial text-black-500 hover:text-primary-600"
+    on:click={remove}
+  >
     <i class="fa-solid fa-times-circle"></i>
   </button>
 </div>
diff --git a/src/lib/components/explorer/results/FilterComponent.svelte b/src/lib/components/explorer/results/FilterComponent.svelte
deleted file mode 100644
index 38c843cc..00000000
--- a/src/lib/components/explorer/results/FilterComponent.svelte
+++ /dev/null
@@ -1,82 +0,0 @@
-<script lang="ts">
-  import type { Filter } from '$lib/models/Filter';
-  import { fade, slide } from 'svelte/transition';
-  import FilterStore from '$lib/stores/Filter';
-  let { updateFilter, removeFilter } = FilterStore;
-
-  export let filter: Filter;
-  let open = false;
-  let carot = 'fa-caret-up';
-
-  const derivedFilterDescription = function (filter: Filter) {
-    if (filter.filterType === 'categorical') {
-      if (filter.displayType === 'restrict') {
-        return 'Rescricting to ' + filter.values.length + ' values';
-      } else if (!filter.displayType) {
-        return filter.description;
-      }
-    } else if (filter.filterType === 'numeric') {
-      switch (filter.displayType) {
-        case 'between':
-          return 'Rescricting to between ' + filter.min + ' and ' + filter.max;
-        case 'greaterThan':
-          return 'Rescricting to greater than ' + filter.min;
-        case 'lessThan':
-          return 'Rescricting to less than ' + filter.max;
-        default:
-          return filter.description;
-      }
-    } else if (filter.filterType === 'genomic') {
-      return filter.description;
-    }
-  };
-
-  const toggleCardBody = function (e: Event) {
-    e.preventDefault();
-    e.stopPropagation();
-    open = !open;
-    carot = open ? 'fa-caret-down' : 'fa-caret-up';
-  };
-
-  const editFilter = function () {
-    updateFilter(filter);
-  };
-
-  const deleteFilter = function () {
-    console.log('delete filter', filter.uuid);
-    return removeFilter(filter.uuid);
-  };
-</script>
-
-<div id={filter.uuid} class="flex flex-col card w-full p-1 m-1" transition:fade={{ duration: 300 }}>
-  <header class="card-header p-1 flex">
-    <div
-      class="flex-auto font-bold"
-      tabindex="0"
-      role="button"
-      on:click={toggleCardBody}
-      on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && toggleCardBody(e)}
-    >
-      {filter.variableName}
-    </div>
-    <div class="actions">
-      <button type="button" title="Edit Filter" class="bg-initial text-black-500 hover:text-primary-600" on:click={editFilter}>
-        <i class="fa-solid fa-pen-to-square"></i>
-      </button>
-      <button type="button" title="Remove Filter" class="bg-initial text-black-500 hover:text-primary-600" on:click={deleteFilter}>
-        <i class="fa-solid fa-times-circle"></i>
-      </button>
-      <button type="button" title="See details" class="bg-initial text-black-500 hover:text-primary-600" on:click={toggleCardBody}>
-        <i class="fa-solid {carot}"></i>
-      </button>
-    </div>
-  </header>
-  {#if open}
-    <section class="p-1 whitespace-pre-wrap" transition:slide={{ axis: 'y' }}>
-      {derivedFilterDescription(filter)}
-      {#if filter.filterType === 'categorical'}
-        <div>Values: {filter.values.join(', ')}</div>
-      {/if}
-    </section>
-  {/if}
-</div>
diff --git a/src/lib/components/explorer/results/ResultsPanel.svelte b/src/lib/components/explorer/results/ResultsPanel.svelte
index 8306d602..e1e13894 100644
--- a/src/lib/components/explorer/results/ResultsPanel.svelte
+++ b/src/lib/components/explorer/results/ResultsPanel.svelte
@@ -1,25 +1,48 @@
-<script lang='ts'>
-  import { branding, resources } from '$lib/configuration';
-  import { slide } from 'svelte/transition';
-  import FilterComponent from './FilterComponent.svelte';
+<script lang="ts">
+  import { branding, resources, features } from '$lib/configuration';
+  import { slide, scale } from 'svelte/transition';
+  import FilterComponent from './AddedFilter.svelte';
   import { Query } from '$lib/models/query/Query';
   import type { QueryRequestInterface } from '$lib/models/api/Request';
   import ExportedVariable from './ExportedVariable.svelte';
   import FilterStore from '$lib/stores/Filter';
   import ExportStore from '$lib/stores/Export';
+  import { derived } from 'svelte/store';
   import * as api from '$lib/api';
-  import { ProgressRadial, getModalStore,type ModalSettings, type ToastSettings, getToastStore } from '@skeletonlabs/skeleton';
-  
+  import {
+    ProgressRadial,
+    getModalStore,
+    type ModalSettings,
+    type ToastSettings,
+    getToastStore,
+  } from '@skeletonlabs/skeleton';
+  import { elasticInOut } from 'svelte/easing';
+
   const { filters } = FilterStore;
   const { exports } = ExportStore;
 
+  let derivedQuery = derived(filters, ($filters) => {
+    let newQuery = new Query();
+    $filters.forEach((filter) => {
+      if (filter.filterType === 'categorical') {
+        if (filter.displayType === 'restrict') {
+          newQuery.addCategoryFilter(filter.id, filter.categoryValues);
+        } else {
+          newQuery.addRequiredField(filter.id);
+        }
+      } else if (filter.filterType === 'numeric') {
+        newQuery.addNumericFilter(filter.id, filter.min || '', filter.max || '');
+      }
+    });
+    return newQuery;
+  });
+
   let totalPatients = 0;
 
   const modal: ModalSettings = {
     type: 'component',
     title: 'Export Data',
     component: 'stepper',
-    modalClasses: '',
     response: (r: string) => {
       console.log(r);
     },
@@ -27,43 +50,66 @@
   const modalStore = getModalStore();
   const toastStore = getToastStore();
 
-  async function query() {
-    let query = new Query();
+  let triggerRefreshCount = getCount();
+
+  async function getCount(query: Query = new Query()) {
     let request: QueryRequestInterface = {
       query: query,
       resourceUUID: resources.hpds,
     };
     try {
       totalPatients = await api.post('picsure/query/sync', request);
+      return totalPatients;
     } catch (error) {
       const toast: ToastSettings = {
         message: branding.explorePage.queryErrorText,
         background: 'variant-filled-error',
+        hoverable: true,
       };
       toastStore.trigger(toast);
       return 0;
     }
   }
 
-  $: exportHidden= ($exports.length === 0 && $filters.length === 0) || totalPatients === 0;
+  filters.subscribe(() => {
+    let query = $derivedQuery;
+    triggerRefreshCount = getCount(query);
+  });
+
+  $: showExportButton =
+    features.explorer.allowExport &&
+    ($filters.length !== 0 || (features.explorer.exportsEnableExport && $exports.length !== 0)) &&
+    totalPatients !== 0;
 </script>
 
-<section id="results-panel" class="flex flex-col items-center pt-8 pr-10 w-full" transition:slide={{ axis: 'x' }}>
-  <button
-    id="export-data-button"
-    type="button"
-    class="btn variant-filled-primary {exportHidden ? 'invisible' : ''}"
-    on:click={() => modalStore.trigger(modal)}
-  >
-    Export Data
-  </button>
+<section
+  id="results-panel"
+  class="flex flex-col items-center pt-8 pr-10 section-width"
+  transition:slide={{ axis: 'x' }}
+>
+  <!-- <h3>Results Panel</h3> -->
+  <div class="h-11">
+    {#if showExportButton}
+      <button
+        id="export-data-button"
+        type="button"
+        class="btn variant-filled-primary"
+        on:click={() => modalStore.trigger(modal)}
+        transition:scale={{ easing: elasticInOut }}
+      >
+        Export Data
+      </button>
+    {/if}
+  </div>
   <div class="flex flex-col items-center mt-6">
-    {#await query()}
+    {#await triggerRefreshCount}
       <ProgressRadial width="w-6" />
     {:then}
-      <h2 id="result-count">{totalPatients}</h2>
+      <span id="result-count">{totalPatients}</span>
+    {:catch}
+      <span id="result-count">N/A</span>
     {/await}
-    <h5 class="text-center">{branding.explorePage.totalPatientsText}</h5>
+    <h4 class="text-center">{branding.explorePage.totalPatientsText}</h4>
   </div>
   <div class="flex flex-col items-center mt-8">
     <h5 class="underline">Added to Export</h5>
@@ -76,7 +122,7 @@
           <hr class="!border-t-2" />
         </header>
         <section>
-          {#each $filters as filter (filter.uuid)}
+          {#each $filters as filter}
             <FilterComponent {filter} />
           {/each}
         </section>
@@ -84,8 +130,8 @@
     {/if}
     {#if $exports.length !== 0}
       <div class="px-4 py-1 w-80">
-        <header class="text-primary-500 text-left">
-          <strong>Exports added</strong>
+        <header class="text-primary-500 font-extrabold text-left" data-testid="export-header">
+          Exports added
           <hr class="!border-t-2" />
         </header>
         <section>
@@ -99,10 +145,18 @@
   <div class="flex flex-col items-center mt-8">
     <h5 class="text-center underline">Explore Chort</h5>
     <div class="flex flex-wrap items-center justify-evenly w-9/12">
-      <button type="button" class="btn btn-lg-sq variant-ringed-surface">
+      <button
+        type="button"
+        class="btn btn-lg-sq variant-ringed-surface"
+        aria-label="Visualizations"
+      >
         <i class="fa-solid fa-chart-pie"></i>
       </button>
-      <button type="button" class="btn btn-lg-sq variant-ringed-surface">
+      <button
+        type="button"
+        class="btn btn-lg-sq variant-ringed-surface"
+        aria-label="Vairant Explorer"
+      >
         <i class="fa-solid fa-dna"></i>
       </button>
     </div>
@@ -110,6 +164,9 @@
 </section>
 
 <style>
+  #result-count {
+    font-size: 2.5rem;
+  }
   .btn-lg-sq {
     flex: 50%;
   }
@@ -117,4 +174,7 @@
     font-size: 2.5rem;
     color: rgba(var(--color-primary-500));
   }
-</style>
\ No newline at end of file
+  .section-width {
+    width: 20rem;
+  }
+</style>
diff --git a/src/lib/components/explorer/results/SidePanel.svelte b/src/lib/components/explorer/results/SidePanel.svelte
index e2bc96dc..837e941f 100644
--- a/src/lib/components/explorer/results/SidePanel.svelte
+++ b/src/lib/components/explorer/results/SidePanel.svelte
@@ -1,6 +1,24 @@
 <script lang="ts">
+  import FilterStore from '$lib/stores/Filter';
+  import ExportStore from '$lib/stores/Export';
   import ResultsPanel from './ResultsPanel.svelte';
+  let { filters } = FilterStore;
+  let { exports } = ExportStore;
+
   export let panelOpen = false;
+  function openPanel() {
+    panelOpen = true;
+  }
+  FilterStore.subscribe(() => {
+    if ($filters?.length !== 0) {
+      openPanel();
+    }
+  });
+  ExportStore.subscribe(() => {
+    if ($exports?.length !== 0) {
+      openPanel();
+    }
+  });
 </script>
 
 <div class="flex">
@@ -9,6 +27,7 @@
       type="button"
       id="results-panel-toggle"
       class="btn-icon btn-icon-sm variant-ringed-primary"
+      aria-label="Toggle Results Panel"
       on:click={() => {
         panelOpen = !panelOpen;
       }}
@@ -17,7 +36,7 @@
     </button>
   </div>
   {#if panelOpen}
-    <ResultsPanel />
+    <ResultsPanel on:openPanel={openPanel} />
   {/if}
 </div>
 
diff --git a/src/lib/components/user/cell/Status.svelte b/src/lib/components/user/cell/Status.svelte
index cbf130ce..763c9d35 100644
--- a/src/lib/components/user/cell/Status.svelte
+++ b/src/lib/components/user/cell/Status.svelte
@@ -2,6 +2,7 @@
   export let data = { cell: '', row: {} };
 </script>
 
-<span class={`p-1 rounded variant-filled-${data.cell === 'Active' ? 'success' : 'error'}`}
+<span
+  class={`badge last:p-1 rounded variant-filled-${data.cell === 'Active' ? 'success' : 'error'}`}
   >{data.cell}</span
 >
diff --git a/src/lib/configuration.ts b/src/lib/configuration.ts
index 210a93ea..236f5c85 100644
--- a/src/lib/configuration.ts
+++ b/src/lib/configuration.ts
@@ -53,7 +53,8 @@ export const branding = {
   },
   explorePage: {
     totalPatientsText: 'Filtered Results',
-    queryErrorText: 'There was an error with your query. If this persists, please contact you PIC-SURE admin.',
+    queryErrorText:
+      'There was an error with your query. If this persists, please contact you PIC-SURE admin.',
   },
   landing: {
     searchPlaceholder: 'Search terms or variables of interest…',
@@ -129,6 +130,13 @@ export const branding = {
   },
 };
 
+export const features = {
+  explorer: {
+    allowExport: true,
+    exportsEnableExport: true,
+  },
+};
+
 export const resources = {
   hpds: 'bf638674-053b-46c4-96a1-4cd6c8395248',
 };
diff --git a/src/lib/models/Filter.ts b/src/lib/models/Filter.ts
index 1da14622..251414e4 100644
--- a/src/lib/models/Filter.ts
+++ b/src/lib/models/Filter.ts
@@ -13,10 +13,11 @@ type DisplayType =
 
 export interface FilterInterface {
   uuid: string;
+  id: string;
   filterType: FilterType;
   displayType: DisplayType;
   searchResult?: SearchResult;
-  variableName?: string;
+  variableName: string;
   description?: string;
   isHarmonized?: boolean;
   topmed?: boolean;
@@ -24,14 +25,14 @@ export interface FilterInterface {
 }
 
 export interface CategoricalFilterInterface extends FilterInterface {
-  filterType: 'categorical';
-  values: string[];
+  filterType: 'categorical' | 'required';
+  categoryValues: string[];
 }
 
 export interface NumericFilterInterface extends FilterInterface {
   filterType: 'numeric';
-  min: number | undefined;
-  max: number | undefined;
+  min?: string | undefined;
+  max?: string | undefined;
 }
 
 export interface GenomicFilterInterface extends FilterInterface {
@@ -42,22 +43,52 @@ export interface GenomicFilterInterface extends FilterInterface {
   Variant_frequency_as_text?: string[];
 }
 
-export function createCategoocialFilter(searchResult: SearchResult, values?: string[]) {
-  let filter: Filter = {
+export function createCategoricalFilter(searchResult: SearchResult, values?: string[]) {
+  const filter: Filter = {
     uuid: uuid(),
+    id: searchResult.id,
     filterType: 'categorical',
     displayType: values && values?.length > 0 ? 'restrict' : 'anyRecordOf',
     searchResult: searchResult,
-    values: values || [],
+    categoryValues: values || [],
     variableName: searchResult.name,
     description: searchResult.description,
   };
   return filter;
 }
 
-export function createNumericFilter(searchResult: SearchResult, min?: number, max?: number) {
-  let filter: Filter = {
+export function createRequiredFilter(searchResult: SearchResult) {
+  const filter: Filter = {
     uuid: uuid(),
+    id: searchResult.id,
+    filterType: 'categorical',
+    displayType: 'any',
+    searchResult: searchResult,
+    variableName: searchResult.name,
+    description: searchResult.description,
+    categoryValues: [],
+  };
+  return filter;
+}
+
+export function createAnyRecordOfFilter(searchResult: SearchResult, values?: string[]) {
+  const filter: Filter = {
+    uuid: uuid(),
+    id: searchResult.id,
+    filterType: 'categorical',
+    displayType: 'anyRecordOf',
+    searchResult: searchResult,
+    categoryValues: values || [],
+    variableName: searchResult.name,
+    description: searchResult.description,
+  };
+  return filter;
+}
+
+export function createNumericFilter(searchResult: SearchResult, min?: string, max?: string) {
+  const filter: Filter = {
+    uuid: uuid(),
+    id: searchResult.id,
     filterType: 'numeric',
     displayType:
       min !== undefined && max !== undefined
@@ -81,8 +112,9 @@ export function createGenomicFilter(
   Variant_consequence_calculated?: string[],
   Variant_frequency_as_text?: string[],
 ) {
-  let filter: Filter = {
+  const filter: Filter = {
     uuid: uuid(),
+    id: 'genomic',
     filterType: 'genomic',
     displayType: 'genomic',
     variableName: 'Genomic Filter',
diff --git a/src/lib/models/Search.ts b/src/lib/models/Search.ts
index 10e46241..9da7aae0 100644
--- a/src/lib/models/Search.ts
+++ b/src/lib/models/Search.ts
@@ -21,6 +21,10 @@ export type SearchResult = Indexable & {
   id: string;
   name: string;
   description: string;
+  isCategorical: boolean;
+  categoryValues?: string[];
+  min?: number;
+  max?: number;
 };
 
 export function mapTags(typeData: { title: string; tags: string[] }): SearchTagType {
@@ -41,5 +45,9 @@ export function mapSearchResults(data: any): SearchResult {
     id: data.name,
     name: segments[segments.length - 1],
     description: `categorical: ${data.categorical}, patients: ${data.patientCount}`,
+    isCategorical: data.categorical,
+    categoryValues: data.categoryValues || undefined,
+    min: data.min >= 0 ? data.min : undefined || undefined, //Fix TypeScript interpreting 0 as false
+    max: data.max >= 0 ? data.max : undefined || undefined, //Fix TypeScript interpreting 0 as false
   };
 }
diff --git a/src/lib/models/Tables.ts b/src/lib/models/Tables.ts
new file mode 100644
index 00000000..c61998f4
--- /dev/null
+++ b/src/lib/models/Tables.ts
@@ -0,0 +1,7 @@
+export interface Column {
+  dataElement: string;
+  label: string;
+  class?: string;
+  sort?: boolean;
+  filter?: boolean;
+}
diff --git a/src/lib/models/query/Query.ts b/src/lib/models/query/Query.ts
index 1e4533c3..7e4db297 100644
--- a/src/lib/models/query/Query.ts
+++ b/src/lib/models/query/Query.ts
@@ -1,7 +1,7 @@
 type ExpectedResultType = 'COUNT' | 'CROSS_COUNT' | 'DATAFRAME';
 
 interface QueryInterface {
-  categoryFilters: Object;
+  categoryFilters: Object; //TODO: define type
   numericFilters: Object;
   requiredFields: Object[];
   anyRecordOf: Object[];
@@ -44,4 +44,23 @@ export class Query implements QueryInterface {
     this.variantInfoFilters = [variantInfoFilter];
     this.expectedResultType = 'COUNT';
   }
+
+  addCategoryFilter(key: string, value: string[]) {
+    (this.categoryFilters as { [key: string]: any })[key] = value;
+  }
+
+  addNumericFilter(key: string, min: string, max: string) {
+    (this.numericFilters as { [key: string]: any })[key] = {
+      min: min.toString(),
+      max: max.toString(),
+    };
+  }
+
+  addRequiredField(field: string) {
+    this.requiredFields.push(field);
+  }
+
+  addAnyRecordOf(field: string) {
+    this.anyRecordOf.push(field);
+  }
 }
diff --git a/src/lib/stores/Export.ts b/src/lib/stores/Export.ts
index 9fae8d0c..a793a183 100644
--- a/src/lib/stores/Export.ts
+++ b/src/lib/stores/Export.ts
@@ -6,6 +6,9 @@ const exports: Writable<Export[]> = writable([]);
 
 function addExport(exportedField: Export) {
   const currentExports = get(exports);
+  if (currentExports.some((e: Export) => e.variableId === exportedField.variableId)) {
+    return;
+  }
   exports.set([...currentExports, exportedField]);
   return exportedField;
 }
diff --git a/src/lib/stores/Filter.ts b/src/lib/stores/Filter.ts
index 471e6af1..266d1544 100644
--- a/src/lib/stores/Filter.ts
+++ b/src/lib/stores/Filter.ts
@@ -6,6 +6,11 @@ const filters: Writable<Filter[]> = writable([]);
 
 function addFilter(filter: Filter) {
   const currentFilters = get(filters);
+  currentFilters.forEach((f) => {
+    if (f.variableName === filter.variableName) {
+      currentFilters.splice(currentFilters.indexOf(f), 1);
+    }
+  });
   filters.set([...currentFilters, filter]);
   return filter;
 }
diff --git a/src/lib/stores/Query.ts b/src/lib/stores/Query.ts
new file mode 100644
index 00000000..51d86c3a
--- /dev/null
+++ b/src/lib/stores/Query.ts
@@ -0,0 +1,14 @@
+import { writable, type Writable } from 'svelte/store';
+import { Query } from '$lib/models/query/Query';
+
+const query: Writable<Query> = writable(new Query());
+
+function updateQuery(updatedQuery: Query) {
+  query.set(updatedQuery);
+}
+
+export default {
+  subscribe: query.subscribe,
+  query,
+  updateQuery,
+};
diff --git a/src/lib/stores/Search.ts b/src/lib/stores/Search.ts
index 51f7c416..33e0f7cd 100644
--- a/src/lib/stores/Search.ts
+++ b/src/lib/stores/Search.ts
@@ -8,12 +8,16 @@ import {
   TagCheckbox,
 } from '$lib/models/Search';
 import * as api from '$lib/api';
+import type { SvelteComponent } from 'svelte';
 
 const searchUrl = 'picsure/search/bf638674-053b-46c4-96a1-4cd6c8395248';
 
 const tags: Writable<SearchTagType[]> = writable([]);
 const searchTerm: Writable<string> = writable('');
 const searchResults: Writable<SearchResult[]> = writable([]);
+const activeRow: Writable<number> = writable(-1);
+const expandableComponents: Writable<Record<string, typeof SvelteComponent>> = writable({});
+const activeComponent: Writable<typeof SvelteComponent> = writable();
 
 const tagsMock = [
   {
@@ -55,6 +59,9 @@ function updateTag(type: string, tag: string, newState: TagCheckbox) {
 
 export default {
   subscribe: tags.subscribe,
+  expandableComponents,
+  activeComponent,
+  activeRow,
   tags,
   searchTerm,
   searchResults,
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8a490df9..538ba677 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,11 +4,10 @@
     initializeStores,
     Modal,
     Toast,
-    getModalStore,
-    type ModalSettings,
-    type ModalComponent,
     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 '@fortawesome/fontawesome-free/css/all.min.css';
   import '../app.postcss';
@@ -17,6 +16,7 @@
   import { page } from '$app/stores';
   import ExportStepper from '$lib/components/explorer/dataExport/ExportStepper.svelte';
   import Footer from '$lib/components/Footer.svelte';
+  import ModalWrapper from '$lib/components/ModalWrapper.svelte';
 
   storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 
@@ -24,14 +24,17 @@
   // Registered list of Components for Modals
   const modalComponentRegistry: Record<string, ModalComponent> = {
     stepper: { ref: ExportStepper },
+    modalWrapper: {ref: ModalWrapper},
   };
   let modalProps: Record<string, unknown> = {
     buttonPositive: 'variant-filled-primary',
     components: modalComponentRegistry,
   };
+
   onMount(() => {
     document.body.classList.add('started');
   });
+
   $: classesSidebar = $page.url.pathname.includes('/explorer') ? '' : 'hidden';
 </script>
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ca3b2ec6..0960044d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,6 +4,7 @@
   import type { Value } from '$lib/models/Value';
   import * as api from '$lib/api';
   import { goto } from '$app/navigation';
+  import Searchbox from '$lib/components/Searchbox.svelte';
 
   let values: Value[];
   let searchTerm = '';
@@ -30,30 +31,13 @@
   }
 </script>
 
+<svelte:head>
+  <title>{branding.applicationName}</title>
+</svelte:head>
+
 <div id="landing" class="landing">
   <section id="search-section" class="flex flex-col text-center items-center search-section">
-    <div class="flex w-full">
-      <input
-        id="search-box"
-        type="search"
-        autocomplete="off"
-        class="search-box"
-        aria-label="Type search terms here, use enter or the search button to submit search"
-        title="Type search terms here, use enter or the search button to submit search"
-        placeholder={branding.landing.searchPlaceholder || 'Search...'}
-        bind:value={searchTerm}
-        on:keydown={(e) => e.key === 'Enter' && search()}
-        required
-      />
-      <button
-        id="search-button"
-        class="btn variant-filled-primary search-button"
-        aria-label="Search"
-        title="Search"
-        disabled={!searchTerm}
-        on:click={search}>Search</button
-      >
-    </div>
+    <Searchbox placeholder={branding.landing.searchPlaceholder} bind:searchTerm {search} />
     <p>
       {branding.landing.description ||
         'PIC-SURE can be used to search phenotypic variables and genomic variants, apply filters, build cohorts, and export participant-level data.'}
diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
index 785be91a..aff5ca76 100644
--- a/src/routes/admin/+page.svelte
+++ b/src/routes/admin/+page.svelte
@@ -1,7 +1,12 @@
 <script>
   import Content from '$lib/components/Content.svelte';
+  import { branding } from '$lib/configuration';
 </script>
 
+<svelte:head>
+  <title>{branding.applicationName} | User Management</title>
+</svelte:head>
+
 <Content title="Admin">
   <p>Sample page data for the admin page.</p>
 </Content>
diff --git a/src/routes/admin/super/+page.svelte b/src/routes/admin/super/+page.svelte
index 16779cfa..3b5e3538 100644
--- a/src/routes/admin/super/+page.svelte
+++ b/src/routes/admin/super/+page.svelte
@@ -1,7 +1,12 @@
 <script>
   import Content from '$lib/components/Content.svelte';
+  import { branding } from '$lib/configuration';
 </script>
 
+<svelte:head>
+  <title>{branding.applicationName} | Configuration</title>
+</svelte:head>
+
 <Content title="Super Admin">
   <p>Sample page data for the super admin page.</p>
 </Content>
diff --git a/src/routes/api/+page.svelte b/src/routes/api/+page.svelte
index feddece2..b0b5f30a 100644
--- a/src/routes/api/+page.svelte
+++ b/src/routes/api/+page.svelte
@@ -3,6 +3,9 @@
   import { branding } from '$lib/configuration';
 </script>
 
+<svelte:head>
+  <title>{branding.applicationName} | API</title>
+</svelte:head>
 <div id="api-page">
   <section>
     <UserToken />
diff --git a/src/routes/dataset/+page.svelte b/src/routes/dataset/+page.svelte
index a877497d..148f71e1 100644
--- a/src/routes/dataset/+page.svelte
+++ b/src/routes/dataset/+page.svelte
@@ -7,6 +7,7 @@
   import Datatable from '$lib/components/datatable/Table.svelte';
   import CopyButton from '$lib/components/dataset/cell/CopyButtonCell.svelte';
   import Actions from '$lib/components/dataset/cell/Actions.svelte';
+  import { branding } from '$lib/configuration';
 
   const columns = [
     { dataElement: 'name', label: 'Dataset ID Name' },
@@ -25,6 +26,10 @@
   let displayArchived = false;
 </script>
 
+<svelte:head>
+  <title>{branding.applicationName} | Datasets</title>
+</svelte:head>
+
 <Content title="Dataset Management">
   {#await loadDatasets()}
     <h3 class="text-left">Loading</h3>
diff --git a/src/routes/dataset/[uuid]/+page.svelte b/src/routes/dataset/[uuid]/+page.svelte
index d9e3f6a2..cc6b3ebd 100644
--- a/src/routes/dataset/[uuid]/+page.svelte
+++ b/src/routes/dataset/[uuid]/+page.svelte
@@ -6,6 +6,7 @@
   import DataSetStore from '$lib/stores/Dataset';
   import Content from '$lib/components/Content.svelte';
   import ErrorAlert from '$lib/components/ErrorAlert.svelte';
+  import { branding } from '$lib/configuration';
 
   const { getDataset } = DataSetStore;
 
@@ -16,6 +17,10 @@
   }
 </script>
 
+<svelte:head>
+  <title>{branding.applicationName} | Dataset</title>
+</svelte:head>
+
 <Content title="View Dataset">
   {#await loadDataset()}
     <h3 class="text-left">Loading</h3>
diff --git a/src/routes/explorer/+page.svelte b/src/routes/explorer/+page.svelte
index 833c3356..f3615855 100644
--- a/src/routes/explorer/+page.svelte
+++ b/src/routes/explorer/+page.svelte
@@ -9,7 +9,21 @@
   import { goto } from '$app/navigation';
 
   import SearchStore from '$lib/stores/Search';
-  let { tags, searchTerm, searchResults, search } = SearchStore;
+  import AddFilterComponent from '$lib/components/explorer/AddFilter.svelte';
+  import ResultInfoComponent from '$lib/components/explorer/ResultInfoComponent.svelte';
+  import HierarchyComponent from '$lib/components/explorer/HierarchyComponent.svelte';
+  import type { SvelteComponent } from 'svelte';
+  import { branding } from '$lib/configuration';
+  import Searchbox from '$lib/components/Searchbox.svelte';
+  let {
+    tags,
+    searchTerm,
+    searchResults,
+    search,
+    expandableComponents,
+    activeRow,
+    activeComponent,
+  } = SearchStore;
 
   let searchInput = $page.url.searchParams.get('search') || $searchTerm || '';
   let searchPromise: Promise<void> = search(searchInput);
@@ -24,12 +38,34 @@
     id: Actions,
   };
 
+  // TODO: Bug? Why not typeof SvelteComponent?
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const expandableComponentRegistry: Record<string, new (...args: any[]) => SvelteComponent> = {
+    filter: AddFilterComponent,
+    info: ResultInfoComponent,
+    hierarchy: HierarchyComponent,
+  };
+
+  let rowClickHandler = (index: number) => {
+    if ($activeRow === index) {
+      activeRow.set(-1);
+      return;
+    }
+    activeRow.set(index);
+    activeComponent.set($expandableComponents['info']);
+  };
+
+  expandableComponents.set(expandableComponentRegistry);
+
   function updateSearch() {
     goto(searchInput ? `/explorer?search=${searchInput}` : '/explorer', { replaceState: true });
     searchPromise = search(searchInput);
   }
 </script>
 
+<svelte:head>
+  <title>{branding.applicationName} | Explorer</title>
+</svelte:head>
 <Content full>
   {#await searchPromise}
     <h3 class="text-left">Loading</h3>
@@ -55,27 +91,9 @@
         {/if}
       </div>
       <div class="col-span-3">
-        <div id="search-bar" class="flex gap-4 mb-6">
+        <div id="search-bar" class="flex gap-2 mb-6">
           <div class="flex-auto">
-            <input
-              class="input"
-              type="text"
-              placeholder="search..."
-              aria-label="Type search terms here, use enter or the search button to submit search"
-              bind:value={searchInput}
-              on:keydown={(e) => e.key === 'Enter' && updateSearch()}
-            />
-          </div>
-          <div class="flex-none">
-            <button
-              type="button"
-              class="btn variant-ghost-primary hover:variant-filled-primary"
-              aria-label="You are on the search button"
-              disabled={!searchInput}
-              on:click={updateSearch}
-            >
-              Search
-            </button>
+            <Searchbox bind:searchTerm={searchInput} search={updateSearch} />
           </div>
           <div class="flex-none">
             <button
@@ -92,7 +110,7 @@
             </button>
           </div>
         </div>
-        <Datatable data={$searchResults} {columns} {cellOverides} />
+        <Datatable data={$searchResults} {columns} {cellOverides} {rowClickHandler} />
       </div>
     </div>
   {:catch}
diff --git a/src/routes/help/+page.svelte b/src/routes/help/+page.svelte
index ccd6e30b..cb4fce2a 100644
--- a/src/routes/help/+page.svelte
+++ b/src/routes/help/+page.svelte
@@ -3,6 +3,9 @@
   import { branding } from '$lib/configuration';
 </script>
 
+<svelte:head>
+  <title>{branding.applicationName} | Help</title>
+</svelte:head>
 <Content title="Knowledge Hub" subtitle="Self-service learning resources">
   <section
     id="info-cards"
diff --git a/tests/lib/component/navigation/test.ts b/tests/lib/component/navigation/test.ts
index c3842721..297781b8 100644
--- a/tests/lib/component/navigation/test.ts
+++ b/tests/lib/component/navigation/test.ts
@@ -59,7 +59,7 @@ test.describe('navigation', () => {
 
     // Then
     await expect(page).toHaveURL('/');
-    await expect(page.locator('#search-box')).toBeVisible();
+    await expect(page.locator('#landing')).toBeVisible();
   });
   test('Print page hides navigation links', async ({ page }) => {
     // Given
diff --git a/tests/mock-data.ts b/tests/mock-data.ts
index 26daa0c8..f5804e15 100644
--- a/tests/mock-data.ts
+++ b/tests/mock-data.ts
@@ -41,11 +41,90 @@ export const searchResults = {
         name: '\\some\\test\\lab1\\',
         categorical: true,
         patientCount: 9499,
+        categoryValues: [
+          'name',
+          'test',
+          'value45364',
+          '34234234234234',
+          'test2',
+          'value334535352',
+          'A very looooooooooooong value for testing to test really long values with in the ui and other stuff like that, we need a very loooooooong wooooooooooooord to test with.',
+          'a',
+          '22',
+          'value1',
+          'value2',
+          'value3',
+          'value4',
+          'value5',
+          'value6',
+          'value7',
+          'value8',
+          'value9',
+          'value10',
+          'value11',
+          'value12',
+          'value13',
+          'value14',
+          'value15',
+          'value16',
+          'value17',
+          'value18',
+          'value19',
+          'value20',
+          'value21',
+          'value22',
+          'value23',
+          'value24',
+          'value25',
+          'value26',
+          'value27',
+          'value28',
+          'value29',
+          'value30',
+          'value31',
+          'value32',
+          'value33',
+          'value34',
+          'value35',
+          'value36',
+          'value37',
+          'value38',
+          'value39',
+          'value40',
+          'value41',
+          'value42',
+          'value43',
+          'value44',
+          'value45',
+          'value46',
+          'value47',
+          'value48',
+          'value49',
+          'value50',
+          'value51',
+          'value52',
+          'value53',
+          'value54',
+          'value55',
+          'value56',
+          'value57',
+          'value58',
+          'value59',
+          'value60',
+        ],
       },
       '\\some\\test\\lab2\\': {
         name: '\\some\\test\\lab2\\',
         categorical: true,
         patientCount: 8971,
+        categoryValues: ['value1', 'value2', 'value3'],
+      },
+      '\\some\\test\\numerical\\': {
+        name: '\\some\\test\\numerical\\',
+        categorical: false,
+        patientCount: 222,
+        min: 11,
+        max: 99,
       },
     },
   },
diff --git a/tests/routes/explorer/test.ts b/tests/routes/explorer/test.ts
index 7ae2e7be..8fd32d18 100644
--- a/tests/routes/explorer/test.ts
+++ b/tests/routes/explorer/test.ts
@@ -2,18 +2,14 @@ import { expect, type Route } from '@playwright/test';
 import { test } from '../../custom-context';
 import { searchResults as mockData, searchResultPath } from '../../mock-data';
 import { branding } from '../../../src/lib/configuration';
-
-const firstId = 'tag-dataset-nhanes';
-const secondId = 'tag-dataset-1000_genomes';
+import { mapSearchResults, type SearchResult } from '../../../src/lib/models/Search';
+import { createCategoricalFilter, createNumericFilter } from '../../../src/lib/models/Filter';
 
 test.describe('explorer', () => {
-  test.beforeEach(async ({ context }) => {
-    await context.route(searchResultPath, async (route: Route) =>
-      route.fulfill({ json: mockData }),
-    );
-  });
   test('Has datatable, filters, and searchbar', async ({ page }) => {
     // Given
+    await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+    page.url;
     await page.goto('/explorer');
 
     // Then
@@ -29,11 +25,12 @@ test.describe('explorer', () => {
     // Then
     await expect(page.getByTestId('error-alert')).toBeVisible();
   });
-  test.describe('#search-tags', () => {
+  test.describe('Search Refinements', () => {
     test('Tag toggles included icon on', async ({ page }) => {
       // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
       await page.goto('/explorer?search=somedata');
-      const tag = page.locator(`#${firstId}-include`);
+      const tag = page.locator('#tag-dataset-nhanes-include');
       await expect(tag).toBeVisible();
 
       //When
@@ -44,8 +41,9 @@ test.describe('explorer', () => {
     });
     test('Tag toggles included icon off', async ({ page }) => {
       // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
       await page.goto('/explorer?search=somedata');
-      const tag = page.locator(`#${firstId}-include`);
+      const tag = page.locator('#tag-dataset-nhanes-include');
       await tag.click(); // to Included state
       await expect(tag).toBeVisible();
 
@@ -57,8 +55,9 @@ test.describe('explorer', () => {
     });
     test('Tag toggles excluded icon on', async ({ page }) => {
       // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
       await page.goto('/explorer?search=somedata');
-      const tag = page.locator(`#${firstId}-exclude`);
+      const tag = page.locator('#tag-dataset-nhanes-exclude');
       await expect(tag).toBeVisible();
 
       //When
@@ -69,8 +68,9 @@ test.describe('explorer', () => {
     });
     test('Tag toggles excluded icon off', async ({ page }) => {
       // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
       await page.goto('/explorer?search=somedata');
-      const tag = page.locator(`#${firstId}-exclude`);
+      const tag = page.locator('#tag-dataset-nhanes-exclude');
       await tag.click(); // to Excluded state
       await expect(tag).toBeVisible();
 
@@ -82,13 +82,14 @@ test.describe('explorer', () => {
     });
     test('Tag toggles excluded icon off and included icon on', async ({ page }) => {
       // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
       await page.goto('/explorer?search=somedata');
-      const excludeTag = page.locator(`#${firstId}-exclude`);
+      const excludeTag = page.locator('#tag-dataset-nhanes-exclude');
       await excludeTag.click(); // to Excluded state
       await expect(excludeTag).toHaveAttribute('aria-checked', 'true');
 
       //When
-      const includeTag = page.locator(`#${firstId}-include`);
+      const includeTag = page.locator('#tag-dataset-nhanes-include');
       await includeTag.click(); // to Included state
 
       // Then
@@ -97,13 +98,14 @@ test.describe('explorer', () => {
     });
     test('Tag toggles included icon off and excluded icon on', async ({ page }) => {
       // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
       await page.goto('/explorer?search=somedata');
-      const includeTag = page.locator(`#${firstId}-include`);
+      const includeTag = page.locator('#tag-dataset-nhanes-include');
       await includeTag.click(); // to Included state
       await expect(includeTag).toHaveAttribute('aria-checked', 'true');
 
       //When
-      const excludeTag = page.locator(`#${firstId}-exclude`);
+      const excludeTag = page.locator('#tag-dataset-nhanes-exclude');
       await excludeTag.click(); // to Excluded state
 
       // Then
@@ -111,212 +113,982 @@ test.describe('explorer', () => {
       await expect(includeTag).toHaveAttribute('aria-checked', 'false');
     });
   });
-  test.describe('#search-tags keyboard navigation', () => {
-    test('Can tab between checkbox groups', async ({ page }) => {
+  test.describe('Results Panel', () => {
+    test('Result panel bar and button shows', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.goto('/explorer?search=somedata');
+
+      // Then
+      await expect(page.locator('#side-panel-bar')).toBeVisible();
+      await expect(page.locator('#results-panel-toggle')).toBeVisible();
+      await page.locator('#results-panel-toggle').click();
+    });
+    test('Result toggle button opens and closes the results panel', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.goto('/explorer?search=somedata');
+
+      //When
+      await page.locator('#results-panel-toggle').click();
+
+      // Then
+      await expect(page.locator('#results-panel')).toBeVisible();
+
+      //When
+      await page.locator('#results-panel-toggle').click();
+
+      // Then
+      await expect(page.locator('#results-panel')).not.toBeVisible();
+    });
+    test('Result panel shows 0 results on an error', async ({ page }) => {
+      // Given
+      await page.goto('/explorer?search=somedata');
+      await page.locator('#results-panel-toggle').click();
+
+      // Then
+      await expect(page.locator('#result-count')).toBeVisible();
+      await expect(page.locator('#result-count')).toHaveText('0');
+    });
+    test('Toast shows on query error', async ({ page }) => {
+      // Given
+      await page.goto('/explorer?search=somedata');
+      await page.locator('#results-panel-toggle').click();
+
+      // Then
+      const toast = page.getByTestId('toast').first();
+      await expect(toast).toBeVisible();
+      expect(toast.getByText(branding.explorePage.queryErrorText)).toBeVisible();
+    });
+    test('Result panel shows the correct number of results', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
+      await page.locator('#results-panel-toggle').click();
+
+      // Then
+      await expect(page.locator('#result-count')).toBeVisible();
+      await expect(page.locator('#result-count')).not.toHaveText('0');
+    });
+    test('Result panel shows no filters added when there are no filters', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
+      await page.locator('#results-panel-toggle').click();
+
+      // Then
+      await expect(page.getByText('No filters added')).toBeVisible();
+    });
+    test('Export button hidden when no filters or exports are added', async ({ page }) => {
       // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
       await page.goto('/explorer?search=somedata');
-      const firstBox = page.locator(`#${firstId}-include`);
-      await firstBox.focus();
 
       // When
-      await page.keyboard.press('Tab');
+      await page.locator('#results-panel-toggle').click();
 
       // Then
-      await expect(page.locator(`#${firstId}-include`)).not.toBeFocused();
-      await expect(page.locator(`#${secondId}-include`)).toBeFocused();
+      await expect(page.getByText('No filters added')).toBeVisible();
+      await expect(page.locator('#export-data-button')).not.toBeVisible();
     });
-    test('Gives visual indicator of focus to parent container', async ({ page }) => {
+    test('Export button hidden when count is 0', async ({ page }) => {
       // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '0' }),
+      );
       await page.goto('/explorer?search=somedata');
-      const firstBox = page.locator(`#${firstId}-include`);
-      await firstBox.focus();
 
       // When
-      await page.keyboard.press('Tab');
+      await page.locator('#results-panel-toggle').click();
+
+      // Then
+      await expect(page.locator('#results-panel')).toBeVisible();
+      await expect(page.locator('#export-data-button')).not.toBeVisible();
+    });
+    test('Export button hidden when count is not 0 and there is no filters', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+
+      // When
+      await page.goto('/explorer?search=somedata');
+      await page.locator('#results-panel-toggle').click();
 
       // Then
-      await expect(page.getByTestId(secondId)).toHaveClass(/key-focus/);
+      await expect(page.locator('#results-panel')).toBeVisible();
+      await expect(page.locator('#export-data-button')).not.toBeVisible();
     });
-    test('Can select Include checkbox with + key', async ({ page }) => {
+  });
+  test.describe('Search row actions', () => {
+    // TODO: Some feartures will be hidden in the future. Cannot use nth.
+    test('Clicking a row opens info panel', async ({ page }) => {
       // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
       await page.goto('/explorer?search=somedata');
-      const firstBox = page.locator(`#${firstId}-include`);
-      await firstBox.focus();
-      await page.keyboard.press('Tab');
 
       // When
-      await page.keyboard.press('+');
+      await expect(page.locator('tbody')).toBeVisible();
+      const tableBody = page.locator('tbody');
+      const firstRow = tableBody.locator('tr').first();
+      await expect(firstRow).toBeVisible();
+      await firstRow.click();
 
       // Then
-      await expect(page.locator(`#${secondId}-include`)).toHaveAttribute('aria-checked', 'true');
+      const infoPanel = tableBody.locator('tr.expandable-row').first();
+      await expect(infoPanel).toBeVisible();
     });
-    test('Can select Exclude checkbox with - key', async ({ page }) => {
+    test('Clicking the row again closes the info panel', async ({ page }) => {
       // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
       await page.goto('/explorer?search=somedata');
-      const firstBox = page.locator(`#${firstId}-include`);
-      await firstBox.focus();
-      await page.keyboard.press('Tab');
 
       // When
-      await page.keyboard.press('-');
+      await expect(page.locator('tbody')).toBeVisible();
+      const tableBody = page.locator('tbody');
+      const firstRow = tableBody.locator('tr').first();
+      await expect(firstRow).toBeVisible();
+      await firstRow.click();
 
       // Then
-      await expect(page.locator(`#${secondId}-exclude`)).toHaveAttribute('aria-checked', 'true');
+      const infoPanel = tableBody.locator('tr.expandable-row').first();
+      await expect(infoPanel).toBeVisible();
+
+      // Then
+      await firstRow.click();
+      await expect(infoPanel).not.toBeVisible();
     });
-    test('Can move between checkboxes with left arrow key', async ({ page }) => {
+    test('Clicking the info icon opens and then closes the info panel', async ({ page }) => {
       // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
       await page.goto('/explorer?search=somedata');
-      const firstBox = page.locator(`#${firstId}-include`);
-      await firstBox.focus();
-      await page.keyboard.press('Tab');
 
       // When
-      await page.keyboard.press('ArrowRight');
+      await expect(page.locator('tbody')).toBeVisible();
+      const tableBody = page.locator('tbody');
+      const firstRow = tableBody.locator('tr').first();
+      const infoIcon = firstRow.locator('td').last().locator('button').first();
+      await expect(infoIcon).toBeVisible();
+      await infoIcon.click();
 
       // Then
-      await expect(page.locator(`#${secondId}-exclude`)).toBeFocused();
+      const infoPanel = tableBody.locator('tr.expandable-row').first();
+      await expect(infoPanel).toBeVisible();
+
+      // Then
+      await infoIcon.click();
+      await expect(infoPanel).not.toBeVisible();
     });
-    test('Can move between checkboxes with right arrow key', async ({ page }) => {
+    test('Clicking the filter button opens and then closes the filter panel', async ({ page }) => {
       // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
       await page.goto('/explorer?search=somedata');
-      const firstBox = page.locator(`#${firstId}-include`);
-      await firstBox.focus();
-      await page.keyboard.press('Tab');
 
       // When
-      await page.keyboard.press('ArrowLeft');
+      await clickNthFilterIcon(page);
+
+      // Then
+      const tableBody = page.locator('tbody');
+      const panel = tableBody.locator('tr.expandable-row').first();
+      await expect(panel).toBeVisible();
 
       // Then
-      await expect(page.locator(`#${secondId}-exclude`)).toBeFocused();
+      await clickNthFilterIcon(page);
+      await expect(panel).not.toBeVisible();
     });
-    test('Space key checks checkbox', async ({ page }) => {
+    test('Clicking the filter button opens the correct filter panel', async ({ page }) => {
       // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
       await page.goto('/explorer?search=somedata');
-      const firstBox = page.locator(`#${firstId}-include`);
-      await firstBox.focus();
-      await page.keyboard.press('Tab');
 
       // When
-      await page.keyboard.press(' ');
+      await clickNthFilterIcon(page);
+      const mockdataType = mockData.results.phenotypes['\\some\\test\\lab1\\'].categorical;
 
       // Then
-      await expect(page.locator(`#${secondId}-include`)).toHaveAttribute('aria-checked', 'true');
+      const tableBody = page.locator('tbody');
+      const panel = tableBody.locator('tr.expandable-row').first();
+      await expect(panel).toBeVisible();
+      if (mockdataType) {
+        await expect(page.getByTestId('categoical-filter')).toBeVisible();
+      } else {
+        await expect(page.getByTestId('numerical-filter')).toBeVisible();
+      }
     });
-    test('Enter key checks checkbox', async ({ page }) => {
+    test('Clicking the filter button opens the correct filter panel (numerical)', async ({ page }) => {
       // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
       await page.goto('/explorer?search=somedata');
-      const firstBox = page.locator(`#${firstId}-include`);
-      await firstBox.focus();
-      await page.keyboard.press('Tab');
 
       // When
-      await page.keyboard.press('ArrowRight');
-      await page.keyboard.press('Enter');
+      await clickNthFilterIcon(page, 2);
+      const mockdataType = mockData.results.phenotypes['\\some\\test\\numerical\\'].categorical;
 
       // Then
-      await expect(page.locator(`#${secondId}-exclude`)).toHaveAttribute('aria-checked', 'true');
+      const tableBody = page.locator('tbody');
+      const panel = tableBody.locator('tr.expandable-row').first();
+      await expect(panel).toBeVisible();
+      if (mockdataType) {
+        await expect(page.getByTestId('categoical-filter')).toBeVisible();
+      } else {
+        await expect(page.getByTestId('numerical-filter')).toBeVisible();
+      }
     });
-  });
+    test('Clicking the export button flips the icon', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
 
-  //Results
-  test('Result panel bar and button shows', async ({ page }) => {
-    // Given
-    await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
-    await page.goto('/explorer?search=somedata');
+      // When
+      await expect(page.locator('tbody')).toBeVisible();
+      const tableBody = page.locator('tbody');
+      const firstRow = tableBody.locator('tr').first();
+      const exportButton = firstRow.locator('td').last().locator('button').last();
+      await expect(exportButton).toBeVisible();
+      const iconExport = exportButton.locator('i');
+      await expect(iconExport).toHaveClass(/fa-right-from-bracket/);
 
-    // Then
-    await expect(page.locator('#side-panel-bar')).toBeVisible();
-    await expect(page.locator('#results-panel-toggle')).toBeVisible();
-  });
-  test('Result toggle button opens and closes the results panel', async ({ page }) => {
-    // Given
-    await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
-    await page.goto('/explorer?search=somedata');
+      // Then
+      await exportButton.click();
+      await expect(iconExport).toHaveClass(/fa-square-check/);
+      await exportButton.click();
+      await expect(iconExport).toHaveClass(/fa-right-from-bracket/);
+    });
+    test('Clicking the export button opens result panel', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
 
-    //When
-    await page.locator('#results-panel-toggle').click();
+      // When
+      await expect(page.locator('tbody')).toBeVisible();
+      const tableBody = page.locator('tbody');
+      const firstRow = tableBody.locator('tr').first();
+      const exportButton = firstRow.locator('td').last().locator('button').last();
+      await exportButton.click();
 
-    // Then
-    await expect(page.locator('#results-panel')).toBeVisible();
+      // Then
+      await expect(page.locator('#results-panel')).toBeVisible();
+    });
+    test('Clicking the export button opens result panel and the variable show in the list', async ({
+      page,
+    }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
 
-    //When
-    await page.locator('#results-panel-toggle').click();
+      // When
+      await expect(page.locator('tbody')).toBeVisible();
+      const tableBody = page.locator('tbody');
+      const firstRow = tableBody.locator('tr').first();
+      const exportButton = firstRow.locator('td').last().locator('button').last();
+      await exportButton.click();
 
-    // Then
-    await expect(page.locator('#results-panel')).not.toBeVisible();
-  });
-  test('Result panel shows 0 results on an error', async ({ page }) => {
-    // Given
-    await page.goto('/explorer?search=somedata');
-    await page.locator('#results-panel-toggle').click();
+      // Then
+      await expect(page.getByTestId('export-header')).toBeVisible();
+      await expect(page.locator('#\\\\some\\\\test\\\\lab1\\\\')).toBeVisible();
+    });
+    test('Clicking an export remove button removes the export', async ({ page }) => { //todo check remove button class
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
 
-    // Then
-    await expect(page.locator('#result-count')).toBeVisible();
-    await expect(page.locator('#result-count')).toHaveText('0');
-  });
-  test('Toast shows on query error', async ({ page }) => {
-    // Given
-    await page.goto('/explorer?search=somedata');
-    await page.locator('#results-panel-toggle').click();
+      // When
+      await expect(page.locator('tbody')).toBeVisible();
+      const tableBody = page.locator('tbody');
+      const firstRow = tableBody.locator('tr').first();
+      const exportButton = firstRow.locator('td').last().locator('button').last();
+      await exportButton.click();
+      const removeButton = page.locator('#\\\\some\\\\test\\\\lab1\\\\').locator('button');
+      removeButton.click();
+      // Then
+      await expect(page.getByTestId('export-header')).not.toBeVisible();
+      await expect(page.locator('#\\\\some\\\\test\\\\lab1\\\\')).not.toBeVisible();
+    });
+    test('Clicking a second export adds a second export', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
 
-    // Then
-    let toast = page.getByTestId('toast');
-    await expect(toast).toBeVisible();
-    expect(toast.getByText(branding.explorePage.queryErrorText)).toBeVisible();
-  });
-  test('Result panel shows the correct number of results', async ({ page }) => {
-    // Given
-    await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
-    await page.route('*/**/picsure/query/sync', async (route: Route) => route.fulfill({ body: '9999' }));
-    await page.goto('/explorer?search=somedata');
-    await page.locator('#results-panel-toggle').click();
+      // When
+      await expect(page.locator('tbody')).toBeVisible();
+      const tableBody = page.locator('tbody');
+      const firstRow = tableBody.locator('tr').first();
+      const exportButton = firstRow.locator('td').last().locator('button').last();
+      const firstRow2 = tableBody.locator('tr').nth(1);
+      const exportButton2 = firstRow2.locator('td').last().locator('button').last();
+      await exportButton.click();
+      await exportButton2.click();
 
-    // Then
-    await expect(page.locator('#result-count')).toBeVisible();
-    await expect(page.locator('#result-count')).not.toHaveText('0');
-  });
-  test('Result panel shows no filters added when there are no filters', async ({ page }) => {
-    // Given
-    await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
-    await page.route('*/**/picsure/query/sync', async (route: Route) => route.fulfill({ body: '9999' }));
-    await page.goto('/explorer?search=somedata');
-    await page.locator('#results-panel-toggle').click();
+      // Then
+      await expect(page.getByTestId('export-header')).toBeVisible();
+      await expect(page.locator('#\\\\some\\\\test\\\\lab1\\\\')).toBeVisible();
+      await expect(page.locator('#\\\\some\\\\test\\\\lab2\\\\')).toBeVisible();
+    });
+    test('Exports remmain after closing and opening the results panel', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
 
-    // Then
-    await expect(page.getByText('No filters added')).toBeVisible();
+      // When
+      await expect(page.locator('tbody')).toBeVisible();
+      const tableBody = page.locator('tbody');
+      const firstRow = tableBody.locator('tr').first();
+      const exportButton = firstRow.locator('td').last().locator('button').last();
+      const firstRow2 = tableBody.locator('tr').nth(1);
+      const exportButton2 = firstRow2.locator('td').last().locator('button').last();
+      await exportButton.click();
+      await exportButton2.click();
+      await page.locator('#results-panel-toggle').click();
+
+      // Then
+      await expect(page.locator('#results-panel')).not.toBeVisible();
+      await page.locator('#results-panel-toggle').click();
+
+      // Then
+      await expect(page.locator('#results-panel')).toBeVisible();
+      await expect(page.getByTestId('export-header')).toBeVisible();
+      await expect(page.locator('#\\\\some\\\\test\\\\lab1\\\\')).toBeVisible();
+      await expect(page.locator('#\\\\some\\\\test\\\\lab2\\\\')).toBeVisible();
+    });
+    test('Hierarchy component shows when action button clicked', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
+
+      // When
+      await expect(page.locator('tbody')).toBeVisible();
+      const tableBody = page.locator('tbody');
+      const firstRow = tableBody.locator('tr').first();
+      const hierarchyButton = firstRow.locator('td').last().locator('button').nth(2);
+      await hierarchyButton.click();
+
+      // Then
+      await expect(page.getByTestId('hierarchy-component')).toBeVisible();
+    });
   });
-  test('Export button hidden when no filters or exports are added', async ({ page }) => {
-    // Given
-    await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
-    await page.route('*/**/picsure/query/sync', async (route: Route) => route.fulfill({ body: '9999' }));
-    await page.goto('/explorer?search=somedata');
-    await page.locator('#results-panel-toggle').click();
+  test.describe('OptionaSelectionList', () => { 
+    // TODO: Some feartures will be hidden in the future. Cannot use nth.
+    // TODO: Test infinite scroll
+    test('Renders', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
 
-    // Then
-    await expect(page.getByText('No filters added')).toBeVisible();
-    await expect(page.locator('#export-data-button')).not.toBeVisible();
+      // When
+      await clickNthFilterIcon(page);
+      // Then
+      await expect(page.getByTestId('optional-selection-list')).toBeVisible();
+    });
+    test('Search Box shows', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
+
+      // When
+      await clickNthFilterIcon(page);
+      const component = page.getByTestId('optional-selection-list');
+      const searchBox = component.locator('input[type="search"]');
+      // Then
+      await expect(searchBox).toBeVisible();
+    });
+    test('Expected Options are shown and unchecked', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
+
+      // When
+      await clickNthFilterIcon(page);
+      const component = page.getByTestId('optional-selection-list');
+      const optionContainer = component.locator('#options-container');
+      const firstValues = mockData.results.phenotypes['\\some\\test\\lab1\\'].categoryValues.slice(0, 20);
+      
+      // Then
+      await expect(optionContainer).toBeVisible();
+      const options = await optionContainer.getByRole('listitem').all();
+      
+      for (const option of options) {
+        await expect(option).toBeVisible();
+        await expect(option).not.toBeChecked();
+        await expect(option).toHaveText(firstValues.shift() || '');
+      }
+    });
+    test('Selected options is empty', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
+
+      // When
+      await clickNthFilterIcon(page);
+      const component = page.getByTestId('optional-selection-list');
+      const selectedOptionContainer = component.locator('#selected-options-container');
+      
+      // Then
+      const options = await selectedOptionContainer.getByRole('listitem').all();
+      expect(options).toHaveLength(0);
+    });
+    test('Selected option moves to selected option', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
+
+      // When
+      await clickNthFilterIcon(page);
+
+      // Select first option
+      const firstItem = await getOption(page);
+      await firstItem.click();
+      const component = page.getByTestId('optional-selection-list');
+      
+      const selectedOptionContainer = component.locator('#selected-options-container');
+      const selectedOptions = await selectedOptionContainer.getByRole('listitem').all();
+      const firstSelectedOption = selectedOptions[0];
+      const checkbox = firstSelectedOption.locator('input');
+      
+      // Then
+      await expect(firstSelectedOption).toBeVisible();
+      await expect(checkbox).toBeVisible();
+      await expect(checkbox).toBeChecked();
+    });
+    test('Clicking select all button selects all options', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
+      const dataValues = mockData.results.phenotypes['\\some\\test\\lab1\\'].categoryValues;
+
+      // When
+      await clickNthFilterIcon(page);
+
+      // Select All
+      const component = page.getByTestId('optional-selection-list');
+      const selectAllButton = component.locator('#select-all');
+      await selectAllButton.click();
+      
+      const selectedOptionContainer = component.locator('#selected-options-container');
+      const selectedOptions = await selectedOptionContainer.getByRole('listitem').all();
+
+      
+      // Then
+      await expect(selectedOptionContainer).toBeVisible();
+      for (const option of selectedOptions) {
+        await expect(option).toBeVisible();
+        await expect(option).toBeChecked();
+        await expect(option).toHaveText(dataValues.shift() || '');
+      }
+      const optionContainer = component.locator('#options-container');
+      await expect(optionContainer).toBeEmpty();
+    });
+    test('Clicking clears removes selected and repopulates the options', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
+
+      // When
+      await clickNthFilterIcon(page);
+      const firstItem = await getOption(page);
+      await firstItem.click();
+      const component = page.getByTestId('optional-selection-list');
+      const clearButton = component.locator('#clear');
+      await clearButton.click();
+
+      // Then
+      const selectedOptionContainer = component.locator('#selected-options-container');
+      await expect(selectedOptionContainer).toBeEmpty();
+      const optionContainer = component.locator('#options-container');
+      await expect(optionContainer).toBeVisible();
+      const firstOption = await getOption(page);
+      const options = await optionContainer.getByRole('listitem').all();
+      expect(firstOption).toEqual(options[0]);
+    });
   });
-  test('Export button hidden when count is 0', async ({ page }) => {
-    // Given
-    await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
-    await page.route('*/**/picsure/query/sync', async (route: Route) => route.fulfill({ body: '0' }));
-    await page.goto('/explorer?search=somedata');
-    await page.locator('#results-panel-toggle').click();
+  test.describe('Add Filters', () => {
+    test('Add button is disabled when nothing is selected', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
+
+      // When
+      await clickNthFilterIcon(page);
+      // Then
+      await expect(page.getByTestId('add-filter')).toBeVisible();
+      await expect(page.getByTestId('add-filter')).toBeDisabled();
+    });
+    test('Add button is enabled when something is selected', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
 
-    // add filters
+      // When
+      await clickNthFilterIcon(page);
+      const firstItem = await getOption(page);
+      await firstItem.click();
+      // Then
+      await expect(page.getByTestId('add-filter')).toBeEnabled();
+    });
+    test('Clicking the add butoon options the results panel', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
 
-    // Then
-    await expect(page.locator('#export-data-button')).not.toBeVisible();
+      // When
+      await clickNthFilterIcon(page);
+      const firstItem = await getOption(page);
+      await firstItem.click();
+      const addFilterButton = page.getByTestId('add-filter');
+      await addFilterButton.click();
+
+      // Then
+      await expect(page.locator('#results-panel')).toBeVisible();
+    });
+    test('Clicking the add button adds the filter to the results panel', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
+
+      // When
+      await clickNthFilterIcon(page);
+      const firstItem = await getOption(page);
+      await firstItem.click();
+      const addFilterButton = page.getByTestId('add-filter');
+      await addFilterButton.click();
+      let searchResult = mapSearchResults(mockData.results.phenotypes['\\some\\test\\lab1\\']);
+      const firstAddedFilter = page.getByTestId(`added-filter-${searchResult.name}`);
+
+      // Then
+      await expect(page.locator('#results-panel')).toBeVisible();
+      await expect(firstAddedFilter).toBeVisible();
+    });
+    test('Added Filter has expected buttons', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
+
+      // When
+      await clickNthFilterIcon(page);
+      const firstItem = await getOption(page);
+      await firstItem.click();
+      const addFilterButton = page.getByTestId('add-filter');
+      await addFilterButton.click();
+      let searchResult = mapSearchResults(mockData.results.phenotypes['\\some\\test\\lab1\\']);
+      const firstAddedFilter = page.getByTestId(`added-filter-${searchResult.name}`);
+      const buttons = firstAddedFilter.locator('button');
+      const editbutton = buttons.first();
+      const removeButton = buttons.nth(1);
+      const openButton = buttons.last();
+      // Then
+      await expect(firstAddedFilter).toBeVisible();
+      await expect(editbutton).toBeVisible();
+      await expect(editbutton).toBeEnabled();
+      const iconExport = editbutton.locator('i');
+      await expect(iconExport).toHaveClass(/fa-pen-to-square/);
+      
+      await expect(removeButton).toBeVisible();
+      await expect(removeButton).toBeEnabled();
+      const iconRemove = removeButton.locator('i');
+      await expect(iconRemove).toHaveClass(/fa-times-circle/);
+
+      await expect(openButton).toBeVisible();
+      await expect(openButton).toBeEnabled();
+      const iconOpen = openButton.locator('i');
+      await expect(iconOpen).toHaveClass(/fa-caret-up/);
+    });
+    test('Clicking added filter opens more info', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
+
+      // When
+      await clickNthFilterIcon(page);
+      const firstItem = await getOption(page);
+      await firstItem.click();
+      const addFilterButton = page.getByTestId('add-filter');
+      await addFilterButton.click();
+      let searchResult = mapSearchResults(mockData.results.phenotypes['\\some\\test\\lab1\\']);
+      const firstAddedFilter = page.getByTestId(`added-filter-${searchResult.name}`);
+      const openButton = firstAddedFilter.locator('button').last();
+      await openButton.click();
+
+      // Then
+      const infoSection = firstAddedFilter.locator('section');
+      await expect(infoSection).toBeVisible();
+      await expect(openButton.locator('i')).toHaveClass(/fa-caret-down/);
+    });
+    test('Clicking open filter closes the more info section', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
+
+      // When
+      await clickNthFilterIcon(page);
+      const firstItem = await getOption(page);
+      await firstItem.click();
+      const addFilterButton = page.getByTestId('add-filter');
+      await addFilterButton.click();
+      let searchResult = mapSearchResults(mockData.results.phenotypes['\\some\\test\\lab1\\']);
+      const firstAddedFilter = page.getByTestId(`added-filter-${searchResult.name}`);
+      const openButton = firstAddedFilter.locator('button').last();
+      await openButton.click();
+
+      // Then
+      const infoSection = firstAddedFilter.locator('section');
+      await expect(infoSection).toBeVisible();
+      await expect(openButton.locator('i')).toHaveClass(/fa-caret-down/);
+      await openButton.click();
+      await expect(infoSection).not.toBeVisible();
+      await expect(openButton.locator('i')).toHaveClass(/fa-caret-up/);
+    });
+    test('Fitlers with selected values list values and count', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
+
+      // When
+      const filter = createCategoricalFilter(mapSearchResults(mockData.results.phenotypes['\\some\\test\\lab1\\']), mockData.results.phenotypes['\\some\\test\\lab1\\'].categoryValues.slice(0, 1));
+      await clickNthFilterIcon(page);
+      const firstItem = await getOption(page);
+      await firstItem.click();
+      const addFilterButton = page.getByTestId('add-filter');
+      await addFilterButton.click();
+      let searchResult = mapSearchResults(mockData.results.phenotypes['\\some\\test\\lab1\\']);
+      const firstAddedFilter = page.getByTestId(`added-filter-${searchResult.name}`);
+      const openButton = firstAddedFilter.locator('button').last();
+      await openButton.click();
+
+      // Then
+      const infoSection = firstAddedFilter.locator('section');
+      await expect(infoSection).toBeVisible();
+      await expect(infoSection).toContainText('Restricting to 1 value.')
+      await expect(infoSection).toContainText(`Values: ${filter.categoryValues.join(', ')}`);
+    });
+    test('Fitlers with all values selected list count and correct text', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
+
+      // When
+      await clickNthFilterIcon(page);
+      const component = page.getByTestId('optional-selection-list');
+      const selectAllButton = component.locator('#select-all');
+      await selectAllButton.click();
+      
+
+      const addFilterButton = page.getByTestId('add-filter');
+      await addFilterButton.click();
+      let searchResult = mapSearchResults(mockData.results.phenotypes['\\some\\test\\lab1\\']);
+      const firstAddedFilter = page.getByTestId(`added-filter-${searchResult.name}`);
+      const openButton = firstAddedFilter.locator('button').last();
+      await openButton.click();
+
+      // Then
+      const infoSection = firstAddedFilter.locator('section');
+      await expect(infoSection).toBeVisible();
+      await expect(infoSection).toContainText('Restricting to any value.')
+    });
+    test('Fitlers with min and max display in the info panel', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
+
+      // When
+      const filter = createNumericFilter(mapSearchResults(mockData.results.phenotypes['\\some\\test\\numerical\\']), mockData.results.phenotypes['\\some\\test\\numerical\\'].min.toString(), mockData.results.phenotypes['\\some\\test\\numerical\\'].max.toString());
+      await clickNthFilterIcon(page, 2);
+      const addFilterButton = page.getByTestId('add-filter');
+      await addFilterButton.click();
+      let searchResult = mapSearchResults(mockData.results.phenotypes['\\some\\test\\numerical\\']);
+      const firstAddedFilter = page.getByTestId(`added-filter-${searchResult.name}`);
+      const openButton = firstAddedFilter.locator('button').last();
+      await openButton.click();
+
+      // Then
+      const infoSection = firstAddedFilter.locator('section');
+      await expect(infoSection).toBeVisible();
+      await expect(infoSection).toContainText(`Restricting to between ${filter.min} and ${filter.max}.`);
+    });
+    test('Fitlers with no min display less than text', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
+
+      // When
+      const filter = createNumericFilter(mapSearchResults(mockData.results.phenotypes['\\some\\test\\numerical\\']), mockData.results.phenotypes['\\some\\test\\numerical\\'].min.toString(), mockData.results.phenotypes['\\some\\test\\numerical\\'].max.toString());
+      await clickNthFilterIcon(page, 2);
+      const minInput = page.getByTestId('min-input');
+      await minInput.clear();
+      const addFilterButton = page.getByTestId('add-filter');
+      await addFilterButton.click();
+      let searchResult = mapSearchResults(mockData.results.phenotypes['\\some\\test\\numerical\\']);
+      const firstAddedFilter = page.getByTestId(`added-filter-${searchResult.name}`);
+      const openButton = firstAddedFilter.locator('button').last();
+      await openButton.click();
+
+      // Then
+      const infoSection = firstAddedFilter.locator('section');
+      await expect(infoSection).toBeVisible();
+      await expect(infoSection).toContainText(`Restricting to less than ${filter.max}.`);
+    });
+    test('Fitlers with no max display greater than text', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
+
+      // When
+      const filter = createNumericFilter(mapSearchResults(mockData.results.phenotypes['\\some\\test\\numerical\\']), mockData.results.phenotypes['\\some\\test\\numerical\\'].min.toString(), mockData.results.phenotypes['\\some\\test\\numerical\\'].max.toString());
+      await clickNthFilterIcon(page, 2);
+      const maxInput = page.getByTestId('max-input');
+      await maxInput.clear();
+      const addFilterButton = page.getByTestId('add-filter');
+      await addFilterButton.click();
+      let searchResult = mapSearchResults(mockData.results.phenotypes['\\some\\test\\numerical\\']);
+      const firstAddedFilter = page.getByTestId(`added-filter-${searchResult.name}`);
+      const openButton = firstAddedFilter.locator('button').last();
+      await openButton.click();
+
+      // Then
+      const infoSection = firstAddedFilter.locator('section');
+      await expect(infoSection).toBeVisible();
+      await expect(infoSection).toContainText(`Restricting to greater than ${filter.min}.`);
+    });
+    test('Clicking the remove button removes the filter from the results panel', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
+
+      // When
+      await clickNthFilterIcon(page);
+      const firstItem = await getOption(page);
+      await firstItem.click();
+      const addFilterButton = page.getByTestId('add-filter');
+      await addFilterButton.click();
+      let searchResult = mapSearchResults(mockData.results.phenotypes['\\some\\test\\lab1\\']);
+      const firstAddedFilter = page.getByTestId(`added-filter-${searchResult.name}`);
+      await expect(page.locator('#results-panel')).toBeVisible();
+      await expect(firstAddedFilter).toBeVisible();
+
+      // Then
+      const removeButton = firstAddedFilter.locator('button').nth(1);
+      await removeButton.click();
+      await expect(firstAddedFilter).not.toBeVisible();
+    });
+    test('Clicking the edit button for a categorical filter opens the edit modal', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
+
+      // When
+      await clickNthFilterIcon(page);
+      const firstItem = await getOption(page);
+      await firstItem.click();
+      const addFilterButton = page.getByTestId('add-filter');
+      await addFilterButton.click();
+      let searchResult = mapSearchResults(mockData.results.phenotypes['\\some\\test\\lab1\\']);
+      const firstAddedFilter = page.getByTestId(`added-filter-${searchResult.name}`);
+      const edit = firstAddedFilter.locator('button').first();
+      await edit.click();
+
+      // Then
+      const modal = page.getByTestId('modal-component');
+      await expect(modal).toBeVisible();
+      await expect(modal.getByTestId('modal-wrapper-header')).toContainText('Edit Filter');
+    });
+    test('Edit modal maintains selected items', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
+
+      // When
+      await clickNthFilterIcon(page);
+      const firstItem = await getOption(page);
+      const firstValue = await firstItem.textContent();
+      await firstItem.click();
+      const addFilterButton = page.getByTestId('add-filter');
+      await addFilterButton.click();
+      let searchResult = mapSearchResults(mockData.results.phenotypes['\\some\\test\\lab1\\']);
+      const firstAddedFilter = page.getByTestId(`added-filter-${searchResult.name}`);
+      const edit = firstAddedFilter.locator('button').first();
+      await edit.click();
+      const modal = page.getByTestId('modal-component');
+      const selectedOptionContainer = modal.locator('#selected-options-container');
+      const selectedOptions = await selectedOptionContainer.getByRole('listitem').all();
+      const firstSelectedOption = selectedOptions[0];
+
+      // Then
+      await expect(firstSelectedOption).toBeVisible();
+      await expect(firstSelectedOption).toHaveText(firstValue);
+    });
+    test('Edit modal changes the filter', async ({ page }) => {
+      // Given
+      await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+      await page.route('*/**/picsure/query/sync', async (route: Route) =>
+        route.fulfill({ body: '9999' }),
+      );
+      await page.goto('/explorer?search=somedata');
+
+      // When
+      await clickNthFilterIcon(page);
+      const firstItem = await getOption(page);
+      await firstItem.click();
+      const addFilterButton = page.getByTestId('add-filter');
+      await addFilterButton.click();
+      let searchResult = mapSearchResults(mockData.results.phenotypes['\\some\\test\\lab1\\']);
+      const firstAddedFilter = page.getByTestId(`added-filter-${searchResult.name}`);
+      await firstAddedFilter.click();
+      const firstValueString = await firstAddedFilter.locator('section').innerText();
+      const edit = firstAddedFilter.locator('button').first();
+      await edit.click();
+      const modal = page.getByTestId('modal-component');
+      const selectedOptionContainer = modal.locator('#selected-options-container');
+      const firstUnslectedOption = await getOption(modal);
+      await firstUnslectedOption.click();
+      const selectedOptions = await selectedOptionContainer.getByRole('listitem').all();
+      let valueString = '';
+      for (const option of selectedOptions) {
+        let comma = (option !== selectedOptions[selectedOptions.length - 1]) ? ', ' : ''
+        valueString += `${await option.innerText()}${comma}`;
+      }
+      const addFilterButtoEdit = modal.getByTestId('add-filter');
+      await addFilterButtoEdit.click();
+      const openButton = firstAddedFilter.locator('button').last();
+      await openButton.click();
+
+      // Then
+
+      const infoSection = firstAddedFilter.locator('section');
+      await expect(infoSection).toBeVisible();
+      await expect(infoSection).toContainText(`Restricting to ${selectedOptions.length} values.`);
+      await expect(infoSection).toContainText(`Values:${valueString}`);
+      await expect(infoSection).not.toContainText(firstValueString);
+    });
   });
-  // test('Export button shows when filters are added', async ({ page }) => {
-  //   // Given
-  //   await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
-  //   await page.route('*/**/picsure/query/sync', async (route: Route) => route.fulfill({ body: '9999' }));
-  //   await page.goto('/explorer?search=somedata');
-  //   await page.locator('#results-panel-toggle').click();
-    
-  //   // Then
-  //   await expect(page.getByText('No filters added')).not.toBeVisible();
-  //   await expect(page.locator('#export-data-button')).toBeVisible();
-  // });
 });
+
+const getOption = async (page: any, optionIndex = 0) => {
+      const component = page.getByTestId('optional-selection-list');
+      const optionContainer = component.locator('#options-container');
+      await expect(optionContainer).toBeVisible();
+      const options = await optionContainer.getByRole('listitem').all();
+      return options[optionIndex]
+};
+
+const clickNthFilterIcon = async (page: any, rowIndex = 0) => {
+  await expect(page.locator('tbody')).toBeVisible();
+  const tableBody = page.locator('tbody');
+  const firstRow = tableBody.locator('tr').nth(rowIndex);
+  const filterIcon = firstRow.locator('td').last().locator('button').nth(1);
+  await expect(filterIcon).toBeVisible();
+  await filterIcon.click();
+};
\ No newline at end of file