From 9effe5b0ca016e148f9162adf983434aa8ee4a8e Mon Sep 17 00:00:00 2001 From: Francis Lavoie Date: Thu, 21 Sep 2023 11:37:38 -0400 Subject: [PATCH] fix: skfp-483 add domain, remove clinical column, fix check data category --- .../FilterList/CustomFilterContainer.tsx | 45 +++++------- .../uiKit/FilterList/CustomFilterSelector.tsx | 70 +++---------------- src/components/uiKit/FilterList/index.tsx | 36 +++++++--- src/graphql/queries.ts | 6 +- src/graphql/studies/models.ts | 2 + src/graphql/studies/queries.ts | 1 + src/graphql/utils/Filters.tsx | 2 +- src/locales/en.json | 3 + src/locales/en.ts | 1 - .../Studies/components/SideBarFacet/index.tsx | 8 ++- src/views/Studies/index.tsx | 20 +++--- 11 files changed, 83 insertions(+), 111 deletions(-) diff --git a/src/components/uiKit/FilterList/CustomFilterContainer.tsx b/src/components/uiKit/FilterList/CustomFilterContainer.tsx index 2698e9538..093f160b3 100644 --- a/src/components/uiKit/FilterList/CustomFilterContainer.tsx +++ b/src/components/uiKit/FilterList/CustomFilterContainer.tsx @@ -2,50 +2,44 @@ import { useEffect, useState } from 'react'; import FilterContainer from '@ferlab/ui/core/components/filters/FilterContainer'; import { IFilter, IFilterGroup, TExtendedMapping } from '@ferlab/ui/core/components/filters/types'; import { updateActiveQueryFilters } from '@ferlab/ui/core/components/QueryBuilder/utils/useQueryBuilderState'; -import { underscoreToDot } from '@ferlab/ui/core/data/arranger/formatting'; -import { getFilterGroup } from '@ferlab/ui/core/data/filters/utils'; -import { getSelectedFilters } from '@ferlab/ui/core/data/sqon/utils'; import { IExtendedMappingResults, IGqlResults } from '@ferlab/ui/core/graphql/types'; import { getFilters } from 'graphql/utils/Filters'; import { isUndefined } from 'lodash'; - +import { getFilterGroup } from '@ferlab/ui/core/data/filters/utils'; +import { getSelectedFilters } from '@ferlab/ui/core/data/sqon/utils'; import { getFacetsDictionary, getFiltersDictionary } from 'utils/translation'; +import { underscoreToDot } from '@ferlab/ui/core/data/arranger/formatting'; import CustomFilterSelector from './CustomFilterSelector'; -import { TCustomFilterMapper } from '.'; type OwnProps = { classname: string; index: string; queryBuilderId: string; - filterKey: string; + filter: string; defaultOpen?: boolean; extendedMappingResults: IExtendedMappingResults; filtersOpen?: boolean; - filterMapper?: TCustomFilterMapper; headerTooltip?: boolean; noDataInputOption?: boolean; + results: IGqlResults; }; const CustomFilterContainer = ({ classname, index, queryBuilderId, - filterKey, filtersOpen, defaultOpen, extendedMappingResults, - filterMapper, + filter, headerTooltip, noDataInputOption, + results, }: OwnProps) => { const [isSearchVisible, setIsSearchVisible] = useState(false); const [isOpen, setIsOpen] = useState(defaultOpen); - const [results, setResults] = useState>(); - const found = (extendedMappingResults?.data || []).find( - (f: TExtendedMapping) => f.field === underscoreToDot(filterKey), - ); - + useEffect(() => { if (!isUndefined(filtersOpen) && isOpen !== filtersOpen) { setIsOpen(filtersOpen); @@ -53,7 +47,7 @@ const CustomFilterContainer = ({ // eslint-disable-next-line }, [filtersOpen]); - const onChange = (fg: IFilterGroup, f: IFilter[]) => { + const onFilterSelectorChange = (fg: IFilterGroup, f: IFilter[]) => { updateActiveQueryFilters({ queryBuilderId, filterGroup: fg, @@ -62,10 +56,15 @@ const CustomFilterContainer = ({ }); }; - const aggregations = results?.aggregations ? results?.aggregations[filterKey] : {}; + const found = (extendedMappingResults?.data || []).find( + (f: TExtendedMapping) => f.field === underscoreToDot(filter), + ); + + const aggregations = results?.aggregations ? results?.aggregations[filter] : null; + const filterGroup = getFilterGroup({ extendedMapping: found, - aggregation: aggregations, + aggregation: aggregations || {}, rangeTypes: [], filterFooter: true, headerTooltip, @@ -73,7 +72,7 @@ const CustomFilterContainer = ({ noDataInputOption, }); - const filters = results?.aggregations ? getFilters(results?.aggregations, filterKey) : []; + const filters = results?.aggregations ? getFilters(results?.aggregations, filter) : []; const selectedFilters = results?.data ? getSelectedFilters({ queryBuilderId, @@ -83,7 +82,7 @@ const CustomFilterContainer = ({ : []; return ( -
+
} /> diff --git a/src/components/uiKit/FilterList/CustomFilterSelector.tsx b/src/components/uiKit/FilterList/CustomFilterSelector.tsx index 0da1d6b95..63fb9ac12 100644 --- a/src/components/uiKit/FilterList/CustomFilterSelector.tsx +++ b/src/components/uiKit/FilterList/CustomFilterSelector.tsx @@ -2,73 +2,25 @@ import { useEffect } from 'react'; import FilterSelector, { FilterSelectorProps, } from '@ferlab/ui/core/components/filters/FilterSelector'; -import useQueryBuilderState from '@ferlab/ui/core/components/QueryBuilder/utils/useQueryBuilderState'; -import { resolveSyntheticSqon } from '@ferlab/ui/core/data/sqon/utils'; -import { IExtendedMappingResults } from '@ferlab/ui/core/graphql/types'; -import { Spin } from 'antd'; -import { AGGREGATION_QUERY } from 'graphql/queries'; - -import useGetAggregations from 'hooks/graphql/useGetAggregations'; - -import { TCustomFilterMapper } from '.'; - -type OwnProps = FilterSelectorProps & { - index: string; - queryBuilderId: string; - filterKey: string; - onDataLoaded: Function; - extendedMappingResults: IExtendedMappingResults; - filterMapper?: TCustomFilterMapper; -}; const CustomFilterSelector = ({ - index, - queryBuilderId, - filterKey, dictionary, filters, filterGroup, maxShowing, selectedFilters, onChange, - onDataLoaded, searchInputVisible, - extendedMappingResults, - filterMapper, -}: OwnProps) => { - const { queryList, activeQuery } = useQueryBuilderState(queryBuilderId); - - const resolvedSqon = filterMapper - ? filterMapper(resolveSyntheticSqon(queryList, activeQuery)) - : resolveSyntheticSqon(queryList, activeQuery); - const results = useGetAggregations( - { - sqon: resolvedSqon, - }, - AGGREGATION_QUERY(index, [filterKey], extendedMappingResults), - index, - ); - - useEffect(() => { - if (results.data) { - onDataLoaded(results); - } - // eslint-disable-next-line - }, [results.aggregations]); - - return ( - - - - ); -}; +}: FilterSelectorProps) => ( + +); export default CustomFilterSelector; diff --git a/src/components/uiKit/FilterList/index.tsx b/src/components/uiKit/FilterList/index.tsx index 217182976..b391767a1 100644 --- a/src/components/uiKit/FilterList/index.tsx +++ b/src/components/uiKit/FilterList/index.tsx @@ -1,16 +1,21 @@ import { useState } from 'react'; +import { Button, Layout, Space, Typography } from 'antd'; import intl from 'react-intl-universal'; -import { ISqonGroupFilter, ISyntheticSqon } from '@ferlab/ui/core/data/sqon/types'; -import { IExtendedMappingResults } from '@ferlab/ui/core/graphql/types'; -import { Button, Layout, Space, Spin, Typography } from 'antd'; import cx from 'classnames'; import { isEmpty } from 'lodash'; -import styles from 'components/uiKit/FilterList/Filters.module.scss'; +import { IExtendedMappingResults } from '@ferlab/ui/core/graphql/types'; +import useQueryBuilderState from '@ferlab/ui/core/components/QueryBuilder/utils/useQueryBuilderState'; +import { resolveSyntheticSqon } from '@ferlab/ui/core/data/sqon/utils'; +import useGetAggregations from 'hooks/graphql/useGetAggregations'; +import { AGGREGATION_QUERY } from 'graphql/queries'; +import { ISqonGroupFilter, ISyntheticSqon } from '@ferlab/ui/core/data/sqon/types'; import CustomFilterContainer from './CustomFilterContainer'; import { FilterGroup, FilterInfo } from './types'; +import styles from 'components/uiKit/FilterList/Filters.module.scss'; + export type TCustomFilterMapper = (filters: ISqonGroupFilter) => ISyntheticSqon; type OwnProps = { @@ -45,9 +50,24 @@ const FilterList = ({ filterMapper, }: OwnProps) => { const [filtersOpen, setFiltersOpen] = useState(isAllFacetOpen(filterInfo)); + const { queryList, activeQuery } = useQueryBuilderState(queryBuilderId); + + const filters = filterInfo.groups.flatMap(g => g.facets) as string[]; + const resolvedSqon = filterMapper + ? filterMapper(resolveSyntheticSqon(queryList, activeQuery)) + : resolveSyntheticSqon(queryList, activeQuery); + + const aggQuery = AGGREGATION_QUERY(index, filters, extendedMappingResults); + const aggResults = useGetAggregations( + { + sqon: resolvedSqon, + }, + aggQuery, + index, + ); - if (extendedMappingResults.loading) { - return ; + if (aggResults.loading) { + return <>; } return ( @@ -78,15 +98,15 @@ const FilterList = ({ typeof facet === 'string' ? ( ) : (
diff --git a/src/graphql/queries.ts b/src/graphql/queries.ts index da2460755..08b421e2d 100644 --- a/src/graphql/queries.ts +++ b/src/graphql/queries.ts @@ -18,7 +18,11 @@ export const AGGREGATION_QUERY = ( ) => { if (!mappingResults || mappingResults.loading) return gql``; - const aggListDotNotation = aggList.map((i) => underscoreToDot(i)); + const aggListDotNotation = aggList.map((i) => { + if (typeof i === 'string') { + return underscoreToDot(i); + } + }); const extendedMappingsFields = aggListDotNotation.flatMap((i) => (mappingResults?.data || []).filter((e) => e.field === i), diff --git a/src/graphql/studies/models.ts b/src/graphql/studies/models.ts index 4d8df2437..828f3d80e 100644 --- a/src/graphql/studies/models.ts +++ b/src/graphql/studies/models.ts @@ -6,6 +6,7 @@ export interface IStudyResultTree { export interface IStudyEntity { id: string; + domain: string; study_id: string; study_code: string; study_name: string; @@ -17,3 +18,4 @@ export interface IStudyEntity { data_category: string[]; website: string; } + diff --git a/src/graphql/studies/queries.ts b/src/graphql/studies/queries.ts index d09949155..80e6db866 100644 --- a/src/graphql/studies/queries.ts +++ b/src/graphql/studies/queries.ts @@ -8,6 +8,7 @@ export const SEARCH_STUDIES_QUERY = gql` edges { node { id + domain study_id study_code study_name diff --git a/src/graphql/utils/Filters.tsx b/src/graphql/utils/Filters.tsx index 9c2dd3034..b65d79691 100644 --- a/src/graphql/utils/Filters.tsx +++ b/src/graphql/utils/Filters.tsx @@ -97,7 +97,7 @@ export const generateFilters = ({ ); }); -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/locales/en.json b/src/locales/en.json index bff9e6d6c..bc96f19e7 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -38,6 +38,9 @@ "facets.options.zygosity.HOM": "Homozygote", "facets.options.zygosity.UNK": "Unknown", "facets.observed_phenotype.name": "Observed Phenotype (HPO)", + "facets.options.domain.CANCERANDBIRTHDEFECT": "Cancer and Birth Defect", + "facets.options.domain.CANCER": "Cancer", + "facets.options.domain.BIRTHDEFECT": "Birth Defect", "family": "family", "father": "father", "female": "Female", diff --git a/src/locales/en.ts b/src/locales/en.ts index 7c1cd0ac0..bfc64c1ca 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -1306,7 +1306,6 @@ const en = { af: '1000 Genomes', }, }, - // Studies domain: 'Study Domain', population: 'Population', diff --git a/src/views/Studies/components/SideBarFacet/index.tsx b/src/views/Studies/components/SideBarFacet/index.tsx index 8af53e53d..16f2bd881 100644 --- a/src/views/Studies/components/SideBarFacet/index.tsx +++ b/src/views/Studies/components/SideBarFacet/index.tsx @@ -9,7 +9,7 @@ import { STUDIES_REPO_QB_ID } from '../../utils/constant'; import FilterList from 'components/uiKit/FilterList'; import { INDEXES } from 'graphql/constants'; import { FilterInfo } from 'components/uiKit/FilterList/types'; -import { Button } from 'antd'; +import { Button, Spin } from 'antd'; import { IExtendedMappingResults } from '@ferlab/ui/core/graphql/types'; type OwnProps = { @@ -39,14 +39,16 @@ const SideBarFacet = ({ className, extendedMappingResults, filterInfo }: OwnProp {!collapsed && (
- + : + />}
)} diff --git a/src/views/Studies/index.tsx b/src/views/Studies/index.tsx index a5e6d8f66..9489a528f 100644 --- a/src/views/Studies/index.tsx +++ b/src/views/Studies/index.tsx @@ -1,3 +1,4 @@ +import intl from 'react-intl-universal'; import { Link } from 'react-router-dom'; import { CheckOutlined } from '@ant-design/icons'; import ExternalLink from '@ferlab/ui/core/components/ExternalLink'; @@ -31,15 +32,16 @@ const enum DataCategory { IMMUNE_MAP = 'Immune-Map', } -const hasDataCategory = (dataCategory: string[], category: DataCategory) => - dataCategory ? dataCategory.includes(category) ? : undefined : undefined; +const hasDataCategory = (dataCategory: string[], category: DataCategory) => + dataCategory && dataCategory.includes(`${category}s`) ? : undefined; + const filterInfo: FilterInfo = { customSearches: [], - defaultOpenFacets: ['program', 'data_category', 'experimental_strategy', 'family_data'], + defaultOpenFacets: ['program', 'domain', 'data_category', 'experimental_strategy', 'family_data'], groups: [ { - facets: ['program', 'data_category', 'experimental_strategy', 'family_data'], + facets: ['program', 'domain', 'data_category', 'experimental_strategy', 'family_data'], }, ], }; @@ -71,7 +73,8 @@ const columns: ProColumnType[] = [ key: 'domain', title: 'Domain', dataIndex: 'domain', - render: (domain: string) => domain || TABLE_EMPTY_PLACE_HOLDER, + render: (domain: string) => intl.get(`facets.options.domain.${domain}`, domain) || domain || TABLE_EMPTY_PLACE_HOLDER, + width: 182, }, { key: 'external_id', @@ -159,13 +162,6 @@ const columns: ProColumnType[] = [ render: (family_count: number) => family_count ? numberWithCommas(family_count) : TABLE_EMPTY_PLACE_HOLDER, }, - { - key: 'clinical', - title: 'Clinical', - align: 'center', - render: (record: IStudyEntity) => - hasDataCategory(record.data_category, DataCategory.PROTEOMIC) || TABLE_EMPTY_PLACE_HOLDER, - }, { key: 'genomic', title: 'Genomics',