fix(filters): SKFP-831 no data in QB dropdown

package.json

@@ -53,7 +53,7 @@
     "@apollo/client": "^3.5.10",
     "@dnd-kit/core": "^4.0.3",
     "@dnd-kit/sortable": "^5.1.0",
-    "@ferlab/ui": "^7.14.2",
+    "@ferlab/ui": "^7.14.6",
     "@loadable/component": "^5.15.2",
     "@react-keycloak/core": "^3.2.0",
     "@react-keycloak/web": "^3.4.0",

src/components/uiKit/FilterList/GenericFilters.tsx

@@ -1,17 +1,19 @@
+import { IExtendedMappingResults } from '@ferlab/ui/core/graphql/types';
 import { Layout, Spin } from 'antd';
+import { AGGREGATION_QUERY } from 'graphql/queries';
 import { generateFilters } from 'graphql/utils/Filters';
+
 import useGetAggregations from 'hooks/graphql/useGetAggregations';
-import { AGGREGATION_QUERY } from 'graphql/queries';
 
 import styles from './Filters.module.scss';
-import { IExtendedMappingResults } from '@ferlab/ui/core/graphql/types';
 
 type OwnProps = {
   queryBuilderId: string;
   index: string;
   field: string;
   sqon: any;
   extendedMappingResults: IExtendedMappingResults;
+  noDataInputOption?: boolean;
 };
 
 const GenericFilters = ({
@@ -20,6 +22,7 @@ const GenericFilters = ({
   field,
   sqon,
   extendedMappingResults,
+  noDataInputOption,
 }: OwnProps) => {
   const results = useGetAggregations(
     {
@@ -28,7 +31,6 @@ const GenericFilters = ({
     AGGREGATION_QUERY(index, [field], extendedMappingResults),
     index,
   );
-
   return (
     <Spin size="large" spinning={results.loading}>
       <Layout className={`${styles.filterWrapper} ${styles.genericFilterWrapper}`}>
@@ -41,6 +43,7 @@ const GenericFilters = ({
           filterFooter: true,
           showSearchInput: true,
           useFilterSelector: true,
+          noDataInputOption,
           index,
         })}
       </Layout>

src/components/utils/filterUtils.tsx

@@ -0,0 +1,21 @@
+import { FilterInfo } from 'components/uiKit/FilterList/types';
+
+export const getNoDataOptionValue = (
+  field: string,
+  filterGroups: {
+    [type: string]: FilterInfo;
+  },
+): boolean | undefined => {
+  let noDataInputOption = undefined;
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  for (const [key, value] of Object.entries(filterGroups)) {
+    const groupWithField = value.groups.find((group) => group.facets.includes(field));
+    if (groupWithField?.noDataOption?.includes(field)) {
+      noDataInputOption = false;
+      return noDataInputOption;
+    }
+  }
+
+  return noDataInputOption;
+};

src/graphql/utils/Filters.tsx

@@ -41,6 +41,7 @@ export const generateFilters = ({
   showSearchInput = false,
   useFilterSelector = false,
   index,
+  noDataInputOption,
 }: {
   queryBuilderId: string;
   aggregations: TAggregations;
@@ -50,6 +51,7 @@ export const generateFilters = ({
   filterFooter: boolean;
   showSearchInput: boolean;
   useFilterSelector: boolean;
+  noDataInputOption?: boolean;
   index?: string;
 }) =>
   Object.keys(aggregations || []).map((key) => {
@@ -92,12 +94,13 @@ export const generateFilters = ({
           }}
           searchInputVisible={showSearchInput}
           selectedFilters={selectedFilters}
+          noDataInputOption={noDataInputOption}
         />
       </div>
     );
   });
 
-const translateWhenNeeded = (group: string, key: string) => 
+const translateWhenNeeded = (group: string, key: string) =>
   intl.get(`facets.options.${group}.${keyEnhance(key)}`).defaultMessage(keyEnhance(key));
 
 export const getFilters = (aggregations: TAggregations | null, key: string): IFilter[] => {

src/views/DataExploration/components/PageContent/index.tsx

@@ -31,6 +31,8 @@ import { DATA_EXPLORATION_QB_ID, TAB_IDS } from 'views/DataExploration/utils/con
 
 import { SHARED_FILTER_ID_QUERY_PARAM_KEY } from 'common/constants';
 import GenericFilters from 'components/uiKit/FilterList/GenericFilters';
+import { FilterInfo } from 'components/uiKit/FilterList/types';
+import { getNoDataOptionValue } from 'components/utils/filterUtils';
 import useQBStateWithSavedFilters from 'hooks/useQBStateWithSavedFilters';
 import { ArrangerApi } from 'services/api/arranger';
 import { SavedFilterTag } from 'services/api/savedFilter/models';
@@ -65,6 +67,9 @@ type OwnProps = {
   fileMapping: IExtendedMappingResults;
   biospecimenMapping: IExtendedMappingResults;
   participantMapping: IExtendedMappingResults;
+  filterGroups: {
+    [type: string]: FilterInfo;
+  };
   tabId?: string;
 };
 
@@ -87,6 +92,7 @@ const PageContent = ({
   biospecimenMapping,
   participantMapping,
   tabId = TAB_IDS.SUMMARY,
+  filterGroups,
 }: OwnProps) => {
   const dispatch = useDispatch<any>();
   const history = useHistory();
@@ -181,13 +187,18 @@ const PageContent = ({
             const index = filter.content.index!;
             const field = filter.content.field;
             const { sqon, mapping } = getSqonAndMappingByIndex(index as INDEXES);
+            const noDataInputOption = getNoDataOptionValue(
+              field.replaceAll('.', '__'),
+              filterGroups,
+            );
             setSelectedFilterContent(
               <GenericFilters
                 queryBuilderId={DATA_EXPLORATION_QB_ID}
                 index={index}
                 field={dotToUnderscore(field)}
                 sqon={sqon}
                 extendedMappingResults={mapping}
+                noDataInputOption={noDataInputOption}
               />,
             );
           },

src/views/DataExploration/index.tsx

@@ -273,6 +273,7 @@ const DataExploration = () => {
           biospecimenMapping={biospecimenMappingResults}
           participantMapping={participantMappingResults}
           tabId={tab}
+          filterGroups={filterGroups}
         />
       </ScrollContent>
     </div>

src/views/Variants/components/PageContent/index.tsx

@@ -26,6 +26,8 @@ import {
 import { SHARED_FILTER_ID_QUERY_PARAM_KEY } from 'common/constants';
 import LineStyleIcon from 'components/Icons/LineStyleIcon';
 import GenericFilters from 'components/uiKit/FilterList/GenericFilters';
+import { FilterInfo } from 'components/uiKit/FilterList/types';
+import { getNoDataOptionValue } from 'components/utils/filterUtils';
 import useQBStateWithSavedFilters from 'hooks/useQBStateWithSavedFilters';
 import { ArrangerApi } from 'services/api/arranger';
 import { SavedFilterTag } from 'services/api/savedFilter/models';
@@ -48,14 +50,17 @@ import styles from './index.module.scss';
 
 type OwnProps = {
   variantMapping: IExtendedMappingResults;
+  filterGroups: {
+    [type: string]: FilterInfo;
+  };
 };
 
 const addTagToFilter = (filter: ISavedFilter) => ({
   ...filter,
   tag: SavedFilterTag.VariantsExplorationPage,
 });
 
-const PageContent = ({ variantMapping }: OwnProps) => {
+const PageContent = ({ variantMapping, filterGroups }: OwnProps) => {
   const dispatch = useDispatch<any>();
   const { userInfo } = useUser();
   const { savedSets } = useSavedSet();
@@ -172,13 +177,19 @@ const PageContent = ({ variantMapping }: OwnProps) => {
             const index = filter.content.index!;
             const field = filter.content.field;
 
+            const noDataInputOption = getNoDataOptionValue(
+              field.replaceAll('.', '__'),
+              filterGroups,
+            );
+
             setSelectedFilterContent(
               <GenericFilters
                 queryBuilderId={VARIANT_REPO_QB_ID}
                 index={index}
                 field={dotToUnderscore(field)}
                 sqon={variantResolvedSqon}
                 extendedMappingResults={variantMapping}
+                noDataInputOption={noDataInputOption}
               />,
             );
           },

src/views/Variants/index.tsx

@@ -259,7 +259,7 @@ const Variants = () => {
     <div className={styles.variantsLayout}>
       <SidebarMenu className={styles.sideMenu} menuItems={menuItems} />
       <ScrollContent id={SCROLL_WRAPPER_ID} className={styles.scrollContent}>
-        <PageContent variantMapping={variantMappingResults} />
+        <PageContent variantMapping={variantMappingResults} filterGroups={filterGroups} />
       </ScrollContent>
     </div>
   );