[User Interface: Redesign]: Change wording of 'any specified' in filter

#271 (#272) * style: change wording of any and no specified filters * feat: remove non specified filter for program collections
NIAID-Data-Ecosystem · Dec 5, 2024 · e330ba5 · e330ba5
1 parent a84babc
commit e330ba5
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 32 deletions.
diff --git a/src/views/search-results-page/components/filters/__tests__/components/list.test.tsx b/src/views/search-results-page/components/filters/__tests__/components/list.test.tsx
@@ -41,7 +41,7 @@ jest.mock('src/components/search-input', () => ({
 const mockTerms: FilterItem[] = [
   { term: 'term1', label: 'Term 1', count: 5 },
   { term: 'term2', label: 'Term 2', count: 3 },
-  { term: '-_exists_', label: 'Not Specified', count: 1 },
+  { term: '-_exists_', label: 'Not', count: 1 },
 ];
 
 describe('FiltersList', () => {
@@ -123,7 +123,11 @@ describe('FiltersList', () => {
     render(<FiltersList {...defaultProps} />);
     const term1Label = screen.getByText('Term 1');
     const term2Label = screen.getByText('Term 2');
-    const notSpecifiedLabel = screen.getByText('Not Specified');
+    const not_exists = mockTerms.find(term => term.term === '-_exists_');
+
+    const notSpecifiedLabel = screen.getByText(
+      not_exists?.label + ' ' + defaultProps.config.name.toLowerCase(),
+    );
 
     expect(term1Label).toBeInTheDocument();
     expect(term2Label).toBeInTheDocument();
@@ -164,7 +168,7 @@ describe('FiltersList', () => {
       { term: 'term3', label: 'Term 3', count: 25, groupBy: 'Vegetables' },
       { term: 'term4', label: 'Term 4', count: 23, groupBy: 'Fruits' },
       { term: 'term5', label: 'Term 5', count: 0, groupBy: 'Fruits' },
-      { term: '-_exists_', label: 'Not Specified', count: 1 },
+      { term: '-_exists_', label: 'Not', count: 1 },
     ];
 
     render(<FiltersList {...defaultProps} terms={termsWithGrouping} />);
@@ -182,10 +186,7 @@ describe('FiltersList', () => {
   });
 
   it('_exists_ terms are ordered first', () => {
-    const terms = [
-      ...mockTerms,
-      { term: '_exists_', label: 'Any Specified', count: 1 },
-    ];
+    const terms = [...mockTerms, { term: '_exists_', label: 'Any', count: 1 }];
 
     render(<FiltersList {...defaultProps} terms={terms} />);
     const checkboxes = screen.getAllByRole('checkbox');
@@ -268,15 +269,15 @@ describe('groupTerms', () => {
   it('places _exists_ terms first', () => {
     const terms: FacetTermWithDetails[] = [
       { term: 'term1', label: 'Term 1', count: 5 },
-      { term: '-_exists_', label: 'Not Specified', count: 1 },
+      { term: '-_exists_', label: 'Not', count: 1 },
       { term: 'term2', label: 'Term 2', count: 3, groupBy: 'Group 1' },
-      { term: '_exists_', label: 'Any Specified', count: 2 },
+      { term: '_exists_', label: 'Any', count: 2 },
     ];
 
     const result = groupTerms(terms, selectedFilters);
     expect(result).toEqual([
-      { term: '-_exists_', label: 'Not Specified', count: 1 },
-      { term: '_exists_', label: 'Any Specified', count: 2 },
+      { term: '-_exists_', label: 'Not', count: 1 },
+      { term: '_exists_', label: 'Any', count: 2 },
       { label: 'Group 1', count: 1, term: 'Group 1', isHeader: true },
       { term: 'term2', label: 'Term 2', count: 3, groupBy: 'Group 1' },
       { term: 'term1', label: 'Term 1', count: 5 },
@@ -300,17 +301,17 @@ describe('groupTerms', () => {
 
   it('places selected filters right after _exists_', () => {
     const terms: FacetTermWithDetails[] = [
-      { term: '-_exists_', label: 'Not Specified', count: 1 },
-      { term: '_exists_', label: 'Any Specified', count: 2 },
+      { term: '-_exists_', label: 'Not', count: 1 },
+      { term: '_exists_', label: 'Any', count: 2 },
       { term: 'term1', label: 'Term 1', count: 1 },
       { term: 'term2', label: 'Term 2', count: 100 },
       { term: 'selected1', label: 'Selected Term 1', count: 23 },
     ];
 
     const result = groupTerms(terms, selectedFilters);
     expect(result).toEqual([
-      { term: '-_exists_', label: 'Not Specified', count: 1 },
-      { term: '_exists_', label: 'Any Specified', count: 2 },
+      { term: '-_exists_', label: 'Not', count: 1 },
+      { term: '_exists_', label: 'Any', count: 2 },
       { term: 'selected1', label: 'Selected Term 1', count: 23 },
       { term: 'term2', label: 'Term 2', count: 100 },
       { term: 'term1', label: 'Term 1', count: 1 },

diff --git a/src/views/search-results-page/components/filters/__tests__/hooks/useFilterQueries.test.tsx b/src/views/search-results-page/components/filters/__tests__/hooks/useFilterQueries.test.tsx
@@ -15,7 +15,7 @@ const config = [
       // Destructure options to exclude queryKey and gather other options, with defaults
       const { queryKey = [] } = options || {};
 
-      // add exists to get total count for "Any Specified"
+      // add exists to get total count for resource with category
       const extraFilterWithFacets = params.extra_filter
         ? `${params.extra_filter}${
             params.facets ? ` AND _exists_:${params.facets}` : ''

diff --git a/src/views/search-results-page/components/filters/__tests__/utils/queries.test.ts b/src/views/search-results-page/components/filters/__tests__/utils/queries.test.ts
@@ -129,7 +129,7 @@ describe('API Query Functions', () => {
         facet: params.facets,
         results: [
           {
-            label: 'Any Specified',
+            label: 'Any',
             term: '_exists_',
             count: 100,
           },
@@ -270,7 +270,7 @@ describe('API Query Functions', () => {
         facet: 'facet',
         results: [
           {
-            label: 'Not Specified',
+            label: 'No',
             term: '-_exists_',
             count: 100,
           },

diff --git a/src/views/search-results-page/components/filters/components/checkbox.tsx b/src/views/search-results-page/components/filters/components/checkbox.tsx
@@ -50,7 +50,7 @@ export const Checkbox: React.FC<FilterCheckboxProps> = React.memo(
   }) => {
     let label = props.label;
     let subLabel = '';
-
+    // Note: Requested by Andrew to track the usage of this filter option.
     const trackGAEvent = useCallback((value: string, filterName: string) => {
       if (value.includes('_exists_') || value.includes('-_exists_')) {
         sendGTMEvent({
@@ -89,6 +89,8 @@ export const Checkbox: React.FC<FilterCheckboxProps> = React.memo(
       const [scientificName, commonName] = props.label.split(' | ');
       label = commonName || props.label;
       subLabel = scientificName;
+    } else if (term.includes('_exists_')) {
+      label = `${props.label} ${filterName.toLowerCase()}`;
     }
 
     return (

diff --git a/src/views/search-results-page/components/filters/components/list.tsx b/src/views/search-results-page/components/filters/components/list.tsx
@@ -121,7 +121,7 @@ export const sortTerms = (terms: FilterItem[], selectedFilters: string[]) => {
     const bSelected = selectedSet.has(b.term);
 
     if (aSelected !== bSelected) return aSelected ? -1 : 1;
-    // Terms -_exists_ (labelled as Not Specified) is always first followed by _exists_ (labelled as Any Specified) - no matter the count.
+    // Terms -_exists_ (labelled as Not Specified) is always first followed by _exists_ (labelled as Any) - no matter the count.
     if (a.term.includes('-_exists_') !== b.term.includes('-_exists_'))
       return a.term.includes('-_exists_') ? -1 : 1;
 

diff --git a/src/views/search-results-page/components/filters/components/tag.tsx b/src/views/search-results-page/components/filters/components/tag.tsx
@@ -54,9 +54,7 @@ export const FilterTags: React.FC<FilterTagsProps> = ({
           let value = v as SelectedFilterTypeValue | SelectedFilterTypeValue[];
           if (typeof value === 'object') {
             const objectKey = Object.keys(value)[0];
-            displayValue = objectKey.startsWith('-_exists_')
-              ? 'Not Specified'
-              : 'Any Specified';
+            displayValue = objectKey.startsWith('-_exists_') ? 'None' : 'Any';
           } else if (
             key === 'date' &&
             values.length === 2 &&
@@ -73,6 +71,10 @@ export const FilterTags: React.FC<FilterTagsProps> = ({
             displayValue = `${
               scientificName.charAt(0).toUpperCase() + scientificName.slice(1)
             } ( ${commonName.charAt(0).toUpperCase() + commonName.slice(1)} )`;
+          } else if (key === '@type') {
+            displayValue = filterConfig?.transformData
+              ? filterConfig.transformData({ term: value, count: 0 })?.label
+              : '';
           } else {
             displayValue = value;
           }

diff --git a/src/views/search-results-page/components/filters/config.ts b/src/views/search-results-page/components/filters/config.ts
@@ -89,7 +89,14 @@ export const FILTER_CONFIGS: FilterConfig[] = [
     property: '@type',
     description:
       'Type is used to categorize the nature of the content of the resource',
-    createQueries: buildQueries(),
+    createQueries: (id, params, options) => [
+      createCommonQuery({
+        id,
+        queryKey: options?.queryKey || [],
+        params,
+        ...options,
+      }),
+    ],
     transformData: (item): FacetTermWithDetails => ({
       ...item,
       label:
@@ -116,20 +123,23 @@ export const FILTER_CONFIGS: FilterConfig[] = [
   },
   {
     _id: 'sourceOrganization.name',
-    name: 'Program Collections',
+    name: 'Program Collection',
     property: 'sourceOrganization.name',
     description: getSchemaDescription('sourceOrganization.name'),
-    createQueries: (id, params, options) => {
-      return buildQueries({
+    createQueries: (id, params, options) => [
+      createCommonQuery({
+        id,
+        queryKey: options?.queryKey || [],
         params: {
           ...params,
           facets: 'sourceOrganization.name.raw',
           multi_terms_fields:
             'sourceOrganization.parentOrganization,sourceOrganization.name.raw',
           multi_terms_size: '100',
         },
-      })(id, params, options);
-    },
+        ...options,
+      }),
+    ],
     // transformData: (item): FacetTermWithDetails => {
     //   let label = item.label || item.term;
     //   if (label.toLocaleLowerCase().includes('creid')) {

diff --git a/src/views/search-results-page/components/filters/utils/queries.ts b/src/views/search-results-page/components/filters/utils/queries.ts
@@ -67,7 +67,7 @@ export const structureQueryData = (data: FetchSearchResultsResponse) => {
   }
   return [
     {
-      label: 'Any Specified',
+      label: 'Any',
       term: '_exists_',
       count: total,
     },
@@ -96,7 +96,7 @@ export const createCommonQuery = ({
   queryKey,
   ...options
 }: QueryArgs) => {
-  // add exists to get total count for "Any Specified"
+  // add exists to get total count for "Any"
   const extraFilterWithFacets = params.extra_filter
     ? `${params.extra_filter}${
         params.facets ? ` AND _exists_:${params.facets}` : ''
@@ -187,7 +187,7 @@ export const createNotExistsQuery = ({
           ? []
           : [
               {
-                label: 'Not Specified',
+                label: 'No',
                 term: '-_exists_',
                 count: data.total,
               },