From b379504ca78cc9a7b6f910f40ea21aee4e809541 Mon Sep 17 00:00:00 2001 From: GaelleA Date: Wed, 15 Nov 2023 08:42:39 -0500 Subject: [PATCH] fix(filters): SKFP-831 no data in QB dropdown --- package-lock.json | 14 ++++++------- package.json | 2 +- .../uiKit/FilterList/GenericFilters.tsx | 9 +++++--- src/components/utils/filterUtils.tsx | 21 +++++++++++++++++++ src/graphql/utils/Filters.tsx | 5 ++++- .../components/PageContent/index.tsx | 11 ++++++++++ src/views/DataExploration/index.tsx | 1 + .../Variants/components/PageContent/index.tsx | 13 +++++++++++- src/views/Variants/index.tsx | 2 +- 9 files changed, 64 insertions(+), 14 deletions(-) create mode 100644 src/components/utils/filterUtils.tsx diff --git a/package-lock.json b/package-lock.json index 66bae2b44..f6af289c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,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", @@ -2757,9 +2757,9 @@ } }, "node_modules/@ferlab/ui": { - "version": "7.14.2", - "resolved": "https://registry.npmjs.org/@ferlab/ui/-/ui-7.14.2.tgz", - "integrity": "sha512-QQxqxuQe25zfWPfywdhyKbfhIF2TwwBUz9io4s1ksES+PJrESUfGgcCfySykhQNZ9J/OR6PjGPpmKMiVMZcKXA==", + "version": "7.14.6", + "resolved": "https://registry.npmjs.org/@ferlab/ui/-/ui-7.14.6.tgz", + "integrity": "sha512-GhT98BH9xnxeEEG2b+HVAHSKv6vHfSo23oS2RCXQBd6eOw0+KwGUeLODBf7ztmi9Fc8/Tok7Ej0mfxUvB/slwg==", "dependencies": { "@ant-design/icons": "^4.7.0", "@dnd-kit/core": "^4.0.3", @@ -35053,9 +35053,9 @@ "dev": true }, "@ferlab/ui": { - "version": "7.14.2", - "resolved": "https://registry.npmjs.org/@ferlab/ui/-/ui-7.14.2.tgz", - "integrity": "sha512-QQxqxuQe25zfWPfywdhyKbfhIF2TwwBUz9io4s1ksES+PJrESUfGgcCfySykhQNZ9J/OR6PjGPpmKMiVMZcKXA==", + "version": "7.14.6", + "resolved": "https://registry.npmjs.org/@ferlab/ui/-/ui-7.14.6.tgz", + "integrity": "sha512-GhT98BH9xnxeEEG2b+HVAHSKv6vHfSo23oS2RCXQBd6eOw0+KwGUeLODBf7ztmi9Fc8/Tok7Ej0mfxUvB/slwg==", "requires": { "@ant-design/icons": "^4.7.0", "@dnd-kit/core": "^4.0.3", diff --git a/package.json b/package.json index f3d3b878b..c9c447498 100644 --- a/package.json +++ b/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", diff --git a/src/components/uiKit/FilterList/GenericFilters.tsx b/src/components/uiKit/FilterList/GenericFilters.tsx index 21f313c8d..e72101e65 100644 --- a/src/components/uiKit/FilterList/GenericFilters.tsx +++ b/src/components/uiKit/FilterList/GenericFilters.tsx @@ -1,10 +1,11 @@ +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; @@ -12,6 +13,7 @@ type OwnProps = { 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 ( @@ -41,6 +43,7 @@ const GenericFilters = ({ filterFooter: true, showSearchInput: true, useFilterSelector: true, + noDataInputOption, index, })} diff --git a/src/components/utils/filterUtils.tsx b/src/components/utils/filterUtils.tsx new file mode 100644 index 000000000..652bd133d --- /dev/null +++ b/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; +}; diff --git a/src/graphql/utils/Filters.tsx b/src/graphql/utils/Filters.tsx index b65d79691..d85539b1d 100644 --- a/src/graphql/utils/Filters.tsx +++ b/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} /> ); }); -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[] => { diff --git a/src/views/DataExploration/components/PageContent/index.tsx b/src/views/DataExploration/components/PageContent/index.tsx index f41a17c96..2761c160b 100644 --- a/src/views/DataExploration/components/PageContent/index.tsx +++ b/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(); const history = useHistory(); @@ -181,6 +187,10 @@ 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( , ); }, diff --git a/src/views/DataExploration/index.tsx b/src/views/DataExploration/index.tsx index a8789cd4f..d70b67000 100644 --- a/src/views/DataExploration/index.tsx +++ b/src/views/DataExploration/index.tsx @@ -273,6 +273,7 @@ const DataExploration = () => { biospecimenMapping={biospecimenMappingResults} participantMapping={participantMappingResults} tabId={tab} + filterGroups={filterGroups} /> diff --git a/src/views/Variants/components/PageContent/index.tsx b/src/views/Variants/components/PageContent/index.tsx index c39bd238f..4e256209b 100644 --- a/src/views/Variants/components/PageContent/index.tsx +++ b/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,6 +50,9 @@ import styles from './index.module.scss'; type OwnProps = { variantMapping: IExtendedMappingResults; + filterGroups: { + [type: string]: FilterInfo; + }; }; const addTagToFilter = (filter: ISavedFilter) => ({ @@ -55,7 +60,7 @@ const addTagToFilter = (filter: ISavedFilter) => ({ tag: SavedFilterTag.VariantsExplorationPage, }); -const PageContent = ({ variantMapping }: OwnProps) => { +const PageContent = ({ variantMapping, filterGroups }: OwnProps) => { const dispatch = useDispatch(); const { userInfo } = useUser(); const { savedSets } = useSavedSet(); @@ -172,6 +177,11 @@ const PageContent = ({ variantMapping }: OwnProps) => { const index = filter.content.index!; const field = filter.content.field; + const noDataInputOption = getNoDataOptionValue( + field.replaceAll('.', '__'), + filterGroups, + ); + setSelectedFilterContent( { field={dotToUnderscore(field)} sqon={variantResolvedSqon} extendedMappingResults={variantMapping} + noDataInputOption={noDataInputOption} />, ); }, diff --git a/src/views/Variants/index.tsx b/src/views/Variants/index.tsx index 63739dca2..0707a3cec 100644 --- a/src/views/Variants/index.tsx +++ b/src/views/Variants/index.tsx @@ -259,7 +259,7 @@ const Variants = () => {
- +
);