kids-first · francisl · Sep 26, 2023 · Sep 21, 2023
diff --git a/src/components/uiKit/FilterList/CustomFilterContainer.tsx b/src/components/uiKit/FilterList/CustomFilterContainer.tsx
@@ -2,58 +2,52 @@ 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<any>;
 };
 
 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<IGqlResults<any>>();
-  const found = (extendedMappingResults?.data || []).find(
-    (f: TExtendedMapping) => f.field === underscoreToDot(filterKey),
-  );
-
+
   useEffect(() => {
     if (!isUndefined(filtersOpen) && isOpen !== filtersOpen) {
       setIsOpen(filtersOpen);
     }
     // eslint-disable-next-line
   }, [filtersOpen]);
 
-  const onChange = (fg: IFilterGroup, f: IFilter[]) => {
+  const onFilterSelectorChange = (fg: IFilterGroup, f: IFilter[]) => {
     updateActiveQueryFilters({
       queryBuilderId,
       filterGroup: fg,
@@ -62,18 +56,23 @@ 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,
     dictionary: getFacetsDictionary(),
     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 (
-    <div className={classname} key={filterKey}>
+    <div className={classname} key={filter}>
       <FilterContainer
         maxShowing={5}
         isOpen={isOpen}
@@ -97,19 +96,13 @@ const CustomFilterContainer = ({
         }}
         customContent={
           <CustomFilterSelector
-            index={index}
-            queryBuilderId={queryBuilderId}
-            filterKey={filterKey}
             dictionary={getFiltersDictionary()}
             filters={filters}
             filterGroup={filterGroup}
             maxShowing={5}
-            onChange={onChange}
+            onChange={onFilterSelectorChange}
             selectedFilters={selectedFilters}
             searchInputVisible={isSearchVisible}
-            onDataLoaded={setResults}
-            extendedMappingResults={extendedMappingResults}
-            filterMapper={filterMapper}
           />
         }
       />

diff --git 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 (
-    <Spin spinning={results.loading}>
-      <FilterSelector
-        dictionary={dictionary}
-        filterGroup={filterGroup}
-        filters={filters}
-        maxShowing={maxShowing}
-        onChange={onChange}
-        searchInputVisible={searchInputVisible}
-        selectedFilters={selectedFilters}
-      />
-    </Spin>
-  );
-};
+}: FilterSelectorProps) => (
+  <FilterSelector
+    dictionary={dictionary}
+    filterGroup={filterGroup}
+    filters={filters}
+    maxShowing={maxShowing}
+    onChange={onChange}
+    searchInputVisible={searchInputVisible}
+    selectedFilters={selectedFilters}
+  />
+);
 
 export default CustomFilterSelector;
diff --git 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<boolean | undefined>(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 <Spin className={styles.filterLoader} spinning />;
+  if (aggResults.loading) {
+    return <></>;
   }
 
   return (
@@ -78,15 +98,15 @@ const FilterList = ({
               typeof facet === 'string' ? (
                 <CustomFilterContainer
                   key={facet}
+                  filter={facet}
                   index={index}
                   queryBuilderId={queryBuilderId}
                   classname={cx(styles.customFilterContainer, styles.filter)}
-                  filterKey={facet}
                   extendedMappingResults={extendedMappingResults}
                   filtersOpen={filtersOpen}
                   defaultOpen={filterInfo.defaultOpenFacets?.includes(facet) ? true : undefined}
-                  filterMapper={filterMapper}
                   headerTooltip={group.tooltips?.includes(facet)}
+                  results={aggResults}
                 />
               ) : (
                 <div key={i + ii} className={cx(styles.customFilterWrapper, styles.filter)}>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
       <ScrollContent>
         {!collapsed && (
           <div className={styles.content}>
-            <FilterList
+           { extendedMappingResults.loading
+            ? <Spin className={styles.filterLoader} spinning />
+            : <FilterList
               loading={loading}
               key={INDEXES.STUDIES}
               index={INDEXES.STUDIES}
               queryBuilderId={STUDIES_REPO_QB_ID}
               extendedMappingResults={extendedMappingResults}
               filterInfo={filterInfo}
-            />
+            />}
           </div>
         )}
       </ScrollContent>