diff --git a/.env.example b/.env.example
index 1b223454..ad992691 100644
--- a/.env.example
+++ b/.env.example
@@ -58,4 +58,7 @@ VITE_AUTH_PROVIDER_MODULE_GOOGLE_ALT=false
# VITE_VARIANT_EXPLORER_EXCLUDE_COLUMNS=["AC","AN"]
VITE_GOOGLE_ANALYTICS_ID=someid
-VITE_GOOGLE_TAG_MANAGER_ID=someid
\ No newline at end of file
+VITE_GOOGLE_TAG_MANAGER_ID=someid
+
+VITE_AUTH_TOUR_NAME=NHANES-Auth
+VITE_OPEN_TOUR_NAME=BDC-Open
\ No newline at end of file
diff --git a/.env.test b/.env.test
index 92147064..f21e6526 100644
--- a/.env.test
+++ b/.env.test
@@ -66,4 +66,7 @@ VITE_VARIANT_EXPLORER_MAX_COUNT=20
VITE_VARIANT_EXPLORER_EXCLUDE_COLUMNS='[]'
VITE_GOOGLE_ANALYTICS_ID=someid
-VITE_GOOGLE_TAG_MANAGER_ID=someid
\ No newline at end of file
+VITE_GOOGLE_TAG_MANAGER_ID=someid
+
+VITE_AUTH_TOUR_NAME=NHANES-Auth
+VITE_OPEN_TOUR_NAME=BDC-Open
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index e6d75a92..f3bfda1e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,7 +31,7 @@
"@sveltejs/vite-plugin-svelte": "^3.1.0",
"@tailwindcss/forms": "0.5.7",
"@tailwindcss/typography": "0.5.15",
- "@types/node": "20.12.11",
+ "@types/node": "22.9.0",
"@types/plotly.js": "^2.33.3",
"@types/plotly.js-dist-min": "^2.3.4",
"@types/uuid": "^10.0.0",
@@ -1262,12 +1262,12 @@
"dev": true
},
"node_modules/@types/node": {
- "version": "20.12.11",
- "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.11.tgz",
- "integrity": "sha512-vDg9PZ/zi+Nqp6boSOT7plNuthRugEKixDv5sFTIpkE89MmNtEArAShI4mxuX2+UrLEe9pxC1vm2cjm9YlWbJw==",
+ "version": "22.9.0",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.0.tgz",
+ "integrity": "sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==",
"dev": true,
"dependencies": {
- "undici-types": "~5.26.4"
+ "undici-types": "~6.19.8"
}
},
"node_modules/@types/plotly.js": {
@@ -5486,9 +5486,9 @@
}
},
"node_modules/undici-types": {
- "version": "5.26.5",
- "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
- "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+ "version": "6.19.8",
+ "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+ "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
"dev": true
},
"node_modules/unfetch": {
diff --git a/package.json b/package.json
index 91555a18..5adac007 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
"@sveltejs/vite-plugin-svelte": "^3.1.0",
"@tailwindcss/forms": "0.5.7",
"@tailwindcss/typography": "0.5.15",
- "@types/node": "20.12.11",
+ "@types/node": "22.9.0",
"@types/plotly.js": "^2.33.3",
"@types/plotly.js-dist-min": "^2.3.4",
"@types/uuid": "^10.0.0",
diff --git a/src/lib/assets/TourConfiguration.json b/src/lib/assets/TourConfiguration.json
new file mode 100644
index 00000000..9fb70926
--- /dev/null
+++ b/src/lib/assets/TourConfiguration.json
@@ -0,0 +1,253 @@
+{
+ "NHANES-Auth": {
+ "searchTerm": "Age",
+ "title": "Welcome to PIC-SURE",
+ "description": "PIC-SURE allows you to explore variables, apply filters, and prepare data for analysis. When applying filters, participants are selected that meet those criteria.
This tour demonstrates how to search, apply filters, and interpret results using PIC-SURE.
Once the tour starts, you can click anywhere to go to the next step. You can press the escape key to stop the tour at any point. You may also use the arrow keys, enter key, or the spacebar to navigate the tour.",
+ "steps": [
+ {
+ "element": "#explorer-search-box",
+ "popover": {
+ "title": "Search",
+ "description": "Search clinical variables of interest. Here, the term \"{{searchTerm}}\" was used to get all demographics-related results. Click anywhere to continue the tour.",
+ "onPrevClick": "disablePrevious"
+ }
+ },
+ {
+ "element": "#facet-side-bar",
+ "popover": {
+ "title": "Refine Search",
+ "description": "Use the options displayed here to further refine your search results using facets.",
+ "onPrevClick": "disablePrevious"
+ }
+ },
+ {
+ "element": "#ExplorerTable-table",
+ "popover": {
+ "title": "Search Results",
+ "description": "The search results are displayed in this area. Each row describes a different variable that matches your search term and/or facets.",
+ "onPrevClick": "disablePrevious"
+ }
+ },
+ {
+ "element": "#ExplorerTable-table #row-0",
+ "onHighlightStarted": "clickElement",
+ "popover": {
+ "title": "Variable Details",
+ "description": "To learn more about a variable, click on the row or click the information icon.",
+ "onPrevClick": "disablePrevious"
+ }
+ },
+ {
+ "element": "#row-0 button[title=\"Filter\"]",
+ "onHighlightStarted": "clickElement",
+ "popover": {
+ "title": "Apply Filters",
+ "description": "Click the filter icon to apply inclusion criteria to build your cohort.",
+ "onPrevClick": "disablePrevious"
+ }
+ },
+ {
+ "element": "#row-0 button[title=\"Add for Analysis\"]",
+ "popover": {
+ "title": "Export Variable",
+ "description": "Click the export icon to add a variable to your export without applying a filter.",
+ "onPrevClick": "disablePrevious"
+ }
+ },
+ {
+ "element": "#sidebar-right",
+ "popover": {
+ "title": "Cohort Summary",
+ "description": "You can view the summary of the filtered cohort based on the applied variable filters. Additionally, you can also view variable distributions and prepare your cohort for analysis.",
+ "onPrevClick": "disablePrevious"
+ }
+ },
+ {
+ "element": "#nav-link-help",
+ "onDeselected": "removeHighlightClass",
+ "popover": {
+ "title": "Help Resources",
+ "description": "To learn more about PIC-SURE, please consult the user guide and video demonstrations. You can also find these resources on the help page.",
+ "onPrevClick": "disablePrevious"
+ }
+ }
+ ]
+ },
+ "BDC-Open": {
+ "searchTerm": "RECOVER",
+ "title": "Welcome to BioData Catalyst Powered by PIC-SURE",
+ "description": "BioData Catalyst Powered by PIC-SURE allows you to explore variables, apply filters, and prepare data for analysis. When applying filters, participants are selected that meet those criteria.
This tour demonstrates how to search, apply filters, and interpret results using PIC-SURE. This tour uses the Researching COVID to Enhance Recovery (RECOVER) dataset as an example. The RECOVER initiative is focused on understanding, diagnosing, treating, and preventing Long COVID.
Once the tour starts, you can click “Next” or use the arrow keys to navigate the tour. You can press any other key or click anywhere on the screen to escape the tour.",
+ "steps": [
+ {
+ "element": "#explorer-search-box",
+ "popover": {
+ "title": "Search",
+ "description": "Search clinical variables of interest. Here, the term \"{{searchTerm}}\" was used to get all {{searchTerm}}-related results.",
+ "onPrevClick": "disablePrevious"
+ }
+ },
+ {
+ "element": "#facet-side-bar",
+ "popover": {
+ "title": "Refine Search",
+ "description": "Use the options displayed here to further refine your search results using facets.",
+ "onPrevClick": "disablePrevious"
+ }
+ },
+ {
+ "element": "#ExplorerTable-table",
+ "popover": {
+ "title": "Search Results",
+ "description": "The search results are displayed in this area. Each row describes a different variable that matches your search term and/or facets.",
+ "onPrevClick": "disablePrevious",
+ "onNextClick": "findAndSetFirstNonStigmatizedAvailableFilterThenNext"
+ }
+ },
+ {
+ "element": "#ExplorerTable-table .non-stigmatized-row",
+ "onHighlightStarted": "clickElement",
+ "popover": {
+ "title": "Variable Details",
+ "description": "To learn more about a variable, click on the row or click the information icon.",
+ "onPrevClick": "disablePrevious"
+ }
+ },
+ {
+ "element": "#ExplorerTable-table .expandable-row",
+ "popover": {
+ "title": "Variable Details",
+ "description": "This displays information about the variable, including dataset information and study information.",
+ "onPrevClick": "disablePrevious"
+ }
+ },
+ {
+ "element": "#ExplorerTable-table .non-stigmatized-row button[title=\"Filter\"]",
+ "onHighlightStarted": "clickElement",
+ "popover": {
+ "title": "Apply Filters",
+ "description": "Click the filter icon to apply inclusion criteria to build your cohort.",
+ "onPrevClick": "disablePrevious"
+ }
+ },
+ {
+ "element": "#ExplorerTable-table .expandable-row",
+ "popover": {
+ "title": "Apply Filters",
+ "description": "You can add filters by selecting different values or specifying a numeric range here, then clicking the “+” button.",
+ "onPrevClick": "disablePrevious",
+ "onNextClick": "applyFilterThenNext"
+ }
+ },
+ {
+ "element": "#sidebar-right",
+ "popover": {
+ "title": "Cohort Summary",
+ "description": "You can view the summary of the filtered cohort based on the applied variable filters. Additionally, you can also view variable distributions and counts per study. Note that this count is obfuscated to protect participant-level data.",
+ "onPrevClick": "disablePrevious"
+ }
+ },
+ {
+ "element": "#nav-link-help",
+ "onDeselected": "removeHighlightClass",
+ "popover": {
+ "title": "Help Resources",
+ "description": "To learn more about PIC-SURE, please consult the user guide and video demonstrations. You can also find these resources on the help page.",
+ "onPrevClick": "disablePrevious"
+ }
+ }
+ ]
+ },
+ "BDC-Auth": {
+ "searchTerm": "cardiac surgery",
+ "title": "Welcome to BioData Catalyst Powered by PIC-SURE",
+ "description": "BioData Catalyst Powered by PIC-SURE allows you to explore variables, apply filters, and prepare data for analysis. When applying filters, participants are selected that meet those criteria.
This tour demonstrates how to search, apply filters, and interpret results using PIC-SURE.
Once the tour starts, you can click “Next” or use the arrow keys to navigate the tour. You can press any other key or click anywhere on the screen to escape the tour.",
+ "steps": [
+ {
+ "element": "#explorer-search-box",
+ "popover": {
+ "title": "Search",
+ "description": "Search clinical variables of interest. Here, the term \"{{searchTerm}}\" was used to get all results related to {{searchTerm}}.",
+ "onPrevClick": "disablePrevious"
+ }
+ },
+ {
+ "element": "#facet-side-bar",
+ "popover": {
+ "title": "Refine Search",
+ "description": "Use the options displayed here to further refine your search results using facets.",
+ "onPrevClick": "disablePrevious"
+ }
+ },
+ {
+ "element": "#ExplorerTable-table",
+ "popover": {
+ "title": "Search Results",
+ "description": "The search results are displayed in this area. Each row describes a different variable that matches your search term and/or facets.",
+ "onPrevClick": "disablePrevious"
+ }
+ },
+ {
+ "element": "#ExplorerTable-table #row-0",
+ "onHighlightStarted": "clickElement",
+ "popover": {
+ "title": "Variable Details",
+ "description": "To learn more about a variable, click on the row or click the information icon.",
+ "onPrevClick": "disablePrevious"
+ }
+ },
+ {
+ "element": "#ExplorerTable-table #active-row-0",
+ "popover": {
+ "title": "Variable Details",
+ "description": "This displays information about the variable, including dataset information and study information.",
+ "onPrevClick": "disablePrevious",
+ "onNextClick": "clickElementThenNext"
+ }
+ },
+ {
+ "element": "#row-0 button[title=\"Filter\"]",
+ "onHighlightStarted": "clickElement",
+ "popover": {
+ "title": "Apply Filters",
+ "description": "Click the filter icon to apply inclusion criteria to build your cohort.",
+ "onPrevClick": "disablePrevious"
+ }
+ },
+ {
+ "element": "#active-row-0",
+ "popover": {
+ "title": "Apply Filters",
+ "description": "You can add filters by selecting different values or specifying a numeric range here, then clicking the “+” button.",
+ "onPrevClick": "disablePrevious",
+ "onNextClick": "applyFilterThenNext"
+ }
+ },
+ {
+ "element": "#row-0 button[title=\"Add for Analysis\"]",
+ "popover": {
+ "title": "Export Variable",
+ "description": "Click the export icon to add a variable to your export without applying a filter.",
+ "onPrevClick": "disablePrevious",
+ "onNextClick": "clickElementThenNext"
+ }
+ },
+ {
+ "element": "#sidebar-right",
+ "popover": {
+ "title": "Cohort Summary",
+ "description": "You can view the summary of the filtered cohort based on the applied variable filters. Additionally, you can also view variable distributions and prepare your cohort for analysis.",
+ "onPrevClick": "disablePrevious"
+ }
+ },
+ {
+ "element": "#nav-link-help",
+ "onDeselected": "removeHighlightClass",
+ "popover": {
+ "title": "Help Resources",
+ "description": "To learn more about PIC-SURE, please consult the user guide and video demonstrations. You can also find these resources on the help page.",
+ "onPrevClick": "disablePrevious"
+ }
+ }
+ ]
+ }
+}
diff --git a/src/lib/assets/authTourConfiguration.json b/src/lib/assets/authTourConfiguration.json
deleted file mode 100644
index 4f255d2d..00000000
--- a/src/lib/assets/authTourConfiguration.json
+++ /dev/null
@@ -1,93 +0,0 @@
-{
- "searchTerm": "cardiac surgery",
- "title": "Welcome to BioData Catalyst Powered by PIC-SURE",
- "description": "BioData Catalyst Powered by PIC-SURE allows you to explore variables, apply filters, and prepare data for analysis. When applying filters, participants are selected that meet those criteria.
This tour demonstrates how to search, apply filters, and interpret results using PIC-SURE.
Once the tour starts, you can click “Next” or use the arrow keys to navigate the tour. You can press any other key or click anywhere on the screen to escape the tour.",
- "steps": [
- {
- "element": "#explorer-search-box",
- "popover": {
- "title": "Search",
- "description": "Search clinical variables of interest. Here, the term \"{{searchTerm}}\" was used to get all results related to {{searchTerm}}.",
- "onPrevClick": "disablePrevious"
- }
- },
- {
- "element": "#facet-side-bar",
- "popover": {
- "title": "Refine Search",
- "description": "Use the options displayed here to further refine your search results using facets.",
- "onPrevClick": "disablePrevious"
- }
- },
- {
- "element": "#ExplorerTable-table",
- "popover": {
- "title": "Search Results",
- "description": "The search results are displayed in this area. Each row describes a different variable that matches your search term and/or facets.",
- "onPrevClick": "disablePrevious"
- }
- },
- {
- "element": "#ExplorerTable-table #row-0",
- "onHighlightStarted": "clickElement",
- "popover": {
- "title": "Variable Details",
- "description": "To learn more about a variable, click on the row or click the information icon.",
- "onPrevClick": "disablePrevious"
- }
- },
- {
- "element": "#ExplorerTable-table #active-row-0",
- "popover": {
- "title": "Variable Details",
- "description": "This displays information about the variable, including dataset information and study information.",
- "onPrevClick": "disablePrevious",
- "onNextClick": "clickElementThenNext"
- }
- },
- {
- "element": "#row-0 button[title=\"Filter\"]",
- "onHighlightStarted": "clickElement",
- "popover": {
- "title": "Apply Filters",
- "description": "Click the filter icon to apply inclusion criteria to build your cohort.",
- "onPrevClick": "disablePrevious"
- }
- },
- {
- "element": "#active-row-0",
- "popover": {
- "title": "Apply Filters",
- "description": "You can add filters by selecting different values or specifying a numeric range here, then clicking the “+” button.",
- "onPrevClick": "disablePrevious",
- "onNextClick": "applyFilterThenNext"
- }
- },
- {
- "element": "#row-0 button[title=\"Add for Analysis\"]",
- "popover": {
- "title": "Export Variable",
- "description": "Click the export icon to add a variable to your export without applying a filter.",
- "onPrevClick": "disablePrevious",
- "onNextClick": "clickElementThenNext"
- }
- },
- {
- "element": "#sidebar-right",
- "popover": {
- "title": "Cohort Summary",
- "description": "You can view the summary of the filtered cohort based on the applied variable filters. Additionally, you can also view variable distributions and prepare your cohort for analysis.",
- "onPrevClick": "disablePrevious"
- }
- },
- {
- "element": "#nav-link-help",
- "onDeselected": "removeHighlightClass",
- "popover": {
- "title": "Help Resources",
- "description": "To learn more about PIC-SURE, please consult the user guide and video demonstrations. You can also find these resources on the help page.",
- "onPrevClick": "disablePrevious"
- }
- }
- ]
-}
diff --git a/src/lib/assets/dash.svg b/src/lib/assets/dash.svg
new file mode 100644
index 00000000..c571a11b
--- /dev/null
+++ b/src/lib/assets/dash.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/lib/assets/openTourConfiguration.json b/src/lib/assets/openTourConfiguration.json
deleted file mode 100644
index 96723faa..00000000
--- a/src/lib/assets/openTourConfiguration.json
+++ /dev/null
@@ -1,84 +0,0 @@
-{
- "searchTerm": "RECOVER",
- "title": "Welcome to BioData Catalyst Powered by PIC-SURE",
- "description": "BioData Catalyst Powered by PIC-SURE allows you to explore variables, apply filters, and prepare data for analysis. When applying filters, participants are selected that meet those criteria.
This tour demonstrates how to search, apply filters, and interpret results using PIC-SURE. This tour uses the Researching COVID to Enhance Recovery (RECOVER) dataset as an example. The RECOVER initiative is focused on understanding, diagnosing, treating, and preventing Long COVID.
Once the tour starts, you can click “Next” or use the arrow keys to navigate the tour. You can press any other key or click anywhere on the screen to escape the tour.",
- "steps": [
- {
- "element": "#explorer-search-box",
- "popover": {
- "title": "Search",
- "description": "Search clinical variables of interest. Here, the term \"{{searchTerm}}\" was used to get all {{searchTerm}}-related results.",
- "onPrevClick": "disablePrevious"
- }
- },
- {
- "element": "#facet-side-bar",
- "popover": {
- "title": "Refine Search",
- "description": "Use the options displayed here to further refine your search results using facets.",
- "onPrevClick": "disablePrevious"
- }
- },
- {
- "element": "#ExplorerTable-table",
- "popover": {
- "title": "Search Results",
- "description": "The search results are displayed in this area. Each row describes a different variable that matches your search term and/or facets.",
- "onPrevClick": "disablePrevious",
- "onNextClick": "findAndSetFirstNonStigmatizedAvailableFilterThenNext"
- }
- },
- {
- "element": "#ExplorerTable-table .non-stigmatized-row",
- "onHighlightStarted": "clickElement",
- "popover": {
- "title": "Variable Details",
- "description": "To learn more about a variable, click on the row or click the information icon.",
- "onPrevClick": "disablePrevious"
- }
- },
- {
- "element": "#ExplorerTable-table .expandable-row",
- "popover": {
- "title": "Variable Details",
- "description": "This displays information about the variable, including dataset information and study information.",
- "onPrevClick": "disablePrevious"
- }
- },
- {
- "element": "#ExplorerTable-table .non-stigmatized-row button[title=\"Filter\"]",
- "onHighlightStarted": "clickElement",
- "popover": {
- "title": "Apply Filters",
- "description": "Click the filter icon to apply inclusion criteria to build your cohort.",
- "onPrevClick": "disablePrevious"
- }
- },
- {
- "element": "#ExplorerTable-table .expandable-row",
- "popover": {
- "title": "Apply Filters",
- "description": "You can add filters by selecting different values or specifying a numeric range here, then clicking the “+” button.",
- "onPrevClick": "disablePrevious",
- "onNextClick": "applyFilterThenNext"
- }
- },
- {
- "element": "#sidebar-right",
- "popover": {
- "title": "Cohort Summary",
- "description": "You can view the summary of the filtered cohort based on the applied variable filters. Additionally, you can also view variable distributions and counts per study. Note that this count is obfuscated to protect participant-level data.",
- "onPrevClick": "disablePrevious"
- }
- },
- {
- "element": "#nav-link-help",
- "onDeselected": "removeHighlightClass",
- "popover": {
- "title": "Help Resources",
- "description": "To learn more about PIC-SURE, please consult the user guide and video demonstrations. You can also find these resources on the help page.",
- "onPrevClick": "disablePrevious"
- }
- }
- ]
-}
diff --git a/src/lib/components/explorer/FacetCategory.svelte b/src/lib/components/explorer/FacetCategory.svelte
index 45998625..0d59dd73 100644
--- a/src/lib/components/explorer/FacetCategory.svelte
+++ b/src/lib/components/explorer/FacetCategory.svelte
@@ -2,18 +2,19 @@
import type { DictionaryFacetResult } from '$lib/models/api/DictionaryResponses';
import { AccordionItem } from '@skeletonlabs/skeleton';
import SearchStore from '$lib/stores/Search';
- import type { Facet } from '$lib/models/Search';
import { hiddenFacets } from '$lib/services/dictionary';
- let { updateFacet, selectedFacets } = SearchStore;
+ import FacetItem from './FacetItem.svelte';
+ import type { Facet } from '$lib/models/Search';
+ let { updateFacets, selectedFacets } = SearchStore;
export let facetCategory: DictionaryFacetResult;
export let facets = facetCategory.facets;
export let numFacetsToShow: number = 5;
- export let shouldShowSearchBar: boolean = facets.length > numFacetsToShow;
+ export let shouldShowSearchBar: boolean = facets?.length > numFacetsToShow;
- const anyFacetNot0 = facets.some((facet) => facet.count > 0);
+ const anyFacetNot0 = facets?.some((facet) => facet.count > 0);
let textFilterValue: string;
- let moreThanTenFacets = facets.length > numFacetsToShow;
+ let moreThanTenFacets = facets?.length > numFacetsToShow;
$: facetsToDisplay =
(facets || textFilterValue || moreThanTenFacets || $selectedFacets || facetCategory) &&
@@ -23,37 +24,100 @@
(facet) => facet?.categoryRef?.name === facetCategory?.name,
);
- $: isChecked = (facetToCheck: string) => {
- return $selectedFacets.some((facet: Facet) => {
- return facet.name === facetToCheck;
+ function isIndeterminate(facet: Facet): boolean {
+ const atLeastOneChildSelected =
+ facet.children?.some((child) => $selectedFacets.some((f) => f.name === child.name)) ?? false;
+ const isEveryChildSelected = facet.children?.length
+ ? facet.children.every((child) => $selectedFacets.some((f) => f.name === child.name))
+ : false;
+ return atLeastOneChildSelected && !isEveryChildSelected;
+ }
+
+ function isParentFullySelected(facetName: string): boolean {
+ const result = facets.some((parent) => {
+ if (!parent.children || parent?.children?.length === 0) return false;
+ return parent.children.every(
+ (child) => child.name === facetName || $selectedFacets.some((f) => f.name === child.name),
+ );
});
- };
+ return result;
+ }
function getFacetsToDisplay() {
- const hiddenFacetsForCategory = $hiddenFacets[facetCategory.name];
+ const hiddenFacetsForCategory = $hiddenFacets[facetCategory.name] || [];
let facetsToDisplay = facets.filter((f) => !hiddenFacetsForCategory.includes(f.name));
- //Put selected facets at the top
const selectedFacetsMap = new Map($selectedFacets.map((facet) => [facet.name, facet]));
- facetsToDisplay = facetsToDisplay.filter((f) => !selectedFacetsMap.has(f.name));
+ const indeterminateFacets = facetsToDisplay.filter(isIndeterminate);
+ const indeterminateMap = new Map(indeterminateFacets.map((facet) => [facet.name, facet]));
+ const isChildOfIndeterminate = (facetName: string) => {
+ return indeterminateFacets.some((parent) =>
+ parent.children?.some((child) => child.name === facetName),
+ );
+ };
+
+ // Remove facets that will be added to the top or are children of fully selected parents
+ facetsToDisplay = facetsToDisplay.filter(
+ (f) =>
+ !selectedFacetsMap.has(f.name) &&
+ !isChildOfIndeterminate(f.name) &&
+ !indeterminateMap.has(f.name) &&
+ !isParentFullySelected(f.name),
+ );
+
+ // Add selected facets at the top (excluding children of indeterminate parents and fully selected parents)
const selectedFacetsForCategory = $selectedFacets.filter(
- (facet) => facet.category === facetCategory.name,
+ (facet) =>
+ facet.category === facetCategory.name &&
+ !isChildOfIndeterminate(facet.name) &&
+ !isParentFullySelected(facet.name),
);
selectedFacetsForCategory.forEach((facet) => {
facet.count = facets.find((f) => f.name === facet.name)?.count || 0;
});
- facetsToDisplay.unshift(...selectedFacetsForCategory);
+ //Add parents with all children selected
+ const parentsWithAllChildrenSelected = facets.filter(
+ (f) =>
+ f.children?.length &&
+ f.children.every((child) => $selectedFacets.some((f) => f.name === child.name)),
+ );
+ parentsWithAllChildrenSelected.forEach((facet) => {
+ facet.count = facets.find((f) => f.name === facet.name)?.count || 0;
+ });
+
+ // Add indeterminate facets at the top
+ const indeterminateFacetsForCategory = indeterminateFacets.filter(
+ (facet) => facet.category === facetCategory.name,
+ );
+ indeterminateFacetsForCategory.forEach((facet) => {
+ facet.count = facets.find((f) => f.name === facet.name)?.count || 0;
+ });
+
+ facetsToDisplay.unshift(
+ ...selectedFacetsForCategory,
+ ...parentsWithAllChildrenSelected,
+ ...indeterminateFacetsForCategory,
+ );
+
if (textFilterValue) {
- //Filter Facets by searched text
const lowerFilterValue = textFilterValue.toLowerCase();
- facetsToDisplay = facetsToDisplay.filter(
- (facet) =>
+ facetsToDisplay = facetsToDisplay.filter((facet) => {
+ const facetMatches =
facet.display.toLowerCase().includes(lowerFilterValue) ||
facet.name.toLowerCase().includes(lowerFilterValue) ||
- facet.description?.toLowerCase().includes(lowerFilterValue),
- );
+ facet.description?.toLowerCase().includes(lowerFilterValue);
+
+ const childrenMatch = facet.children?.some(
+ (child) =>
+ child.display.toLowerCase().includes(lowerFilterValue) ||
+ child.name.toLowerCase().includes(lowerFilterValue) ||
+ child.description?.toLowerCase().includes(lowerFilterValue),
+ );
+
+ return facetMatches || childrenMatch;
+ });
} else if (moreThanTenFacets) {
// Only show the first n facets
facetsToDisplay = facetsToDisplay.slice(0, numFacetsToShow);
@@ -77,24 +141,9 @@
/>
{/if}
{#each facetsToDisplay as facet}
-
+
{/each}
- {#if facets.length > numFacetsToShow && !textFilterValue}
+ {#if facets?.length > numFacetsToShow && !textFilterValue}