RE2022-310 Implement Heatmap filters

src/common/api/collectionsApi.ts

@@ -177,7 +177,7 @@ export type ColumnMeta = {
   display_name?: string;
 } & (
   | {
-      type: 'date' | 'int' | 'float';
+      type: 'date' | 'int' | 'float' | 'bool';
       filter_strategy: undefined;
       min_value: number;
       max_value: number;

src/common/components/FilterChip.tsx

@@ -30,6 +30,8 @@ export const FilterChip = ({
         })
         .map((val) => val.toLocaleString());
       filterString = `${minString} to ${maxString}`;
+    } else if (filter.type === 'bool') {
+      filterString = Boolean(filter.value).toString();
     } else {
       const val = filter.value;
       if (typeof val === 'string') {

src/features/collections/CollectionDetail.tsx

@@ -49,7 +49,7 @@ import {
 import { useForm } from 'react-hook-form';
 import { CollectionOverview } from './CollectionOverview';
 import { FilterChip } from '../../common/components/FilterChip';
-import { FilterContextTabs } from './Filters';
+import { filterContextScope, FilterContextTabs } from './Filters';
 
 export const detailPath = ':id';
 export const detailDataProductPath = ':id/:data_product';
@@ -406,6 +406,7 @@ const useFilterEntries = (collectionId: string) => {
 };
 
 const FilterChips = ({ collectionId }: { collectionId: string }) => {
+  const { columnMeta } = useFilters(collectionId);
   const { filterEntries, clearFilterState, context } =
     useFilterEntries(collectionId);
   if (filterEntries.length === 0) return <></>;
@@ -416,7 +417,7 @@ const FilterChips = ({ collectionId }: { collectionId: string }) => {
           <FilterChip
             filter={filter}
             key={`${column}-${context}-${filter.type}`}
-            name={column}
+            name={columnMeta?.[column]?.display_name || column}
             onDelete={() => clearFilterState(column)}
           />
         );
@@ -456,11 +457,19 @@ const FilterMenu = ({
     setExpandedCategory(expanded ? category : '');
   };
 
+  const menuLabel = {
+    DEFAULT: 'Filters',
+    genomes: 'Genome Filters',
+    samples: 'Sample Filters',
+    biolog: 'Biolog Filters',
+    microtrait: 'Microtrait Filters',
+  }[filterContextScope(context) || 'DEFAULT'];
+
   if (open) {
     return (
       <div className={styles['filters_panel']}>
         <Stack direction="row" className={styles['filters-panel-header']}>
-          <h3>Genome Filters</h3>
+          <h3>{menuLabel}</h3>
           <Stack direction="row" spacing={1}>
             <Button
               size="small"

src/features/collections/Filters.tsx

@@ -260,6 +260,7 @@ export const useContextFilterQueryManagement = (
               ])
             );
           } else {
+            // column.type === 'count'
             const filterMeta: ColumnMeta = {
               type: 'int',
               key: column.col_id,
@@ -280,7 +281,7 @@ export const useContextFilterQueryManagement = (
                 context,
                 column.col_id,
                 {
-                  type: filterMeta.type,
+                  type: 'int',
                   min_value: filterMeta.min_value,
                   max_value: filterMeta.max_value,
                   value:

src/features/collections/collectionsSlice.ts

@@ -435,6 +435,11 @@ export const useFilters = (
         filterState.type === 'ngram'
       ) {
         if (filterState.value !== undefined) filterValue = filterState.value;
+      } else if (
+        filterState.type === 'bool' &&
+        filterState.value !== undefined
+      ) {
+        filterValue = Boolean(filterState.value).toString();
       } else if (
         (filterState.type === 'date' ||
           filterState.type === 'int' ||

src/features/collections/data_products/Biolog.tsx

@@ -21,6 +21,7 @@ import { useAppParam } from '../../params/hooks';
 import classes from '../Collections.module.scss';
 import {
   useFilterContextState,
+  useFilters,
   useGenerateSelectionId,
 } from '../collectionsSlice';
 import { useFilterContexts } from '../Filters';
@@ -128,6 +129,10 @@ const useBiolog = (collection_id: string | undefined) => {
     pageSize: 56,
   });
   const context = useFilterContextState(collection_id);
+  const { filterParams } = useFilters(collection_id, context);
+  const allFilters = useFilters(collection_id, 'biolog.all').filterParams;
+  const matchFilters = useFilters(collection_id, 'biolog.matched').filterParams;
+  const selFilters = useFilters(collection_id, 'biolog.selected').filterParams;
 
   const pageLastIdCache: Record<string, string> = useMemo(
     () => ({}),
@@ -157,7 +162,8 @@ const useBiolog = (collection_id: string | undefined) => {
       context,
     ]
   );
-  const allCountParams = useMemo(
+
+  const countParams = useMemo(
     () => ({
       ...heatMapParams,
       count: true,
@@ -171,7 +177,15 @@ const useBiolog = (collection_id: string | undefined) => {
     [collection_id]
   );
 
-  const biologQuery = getBiolog.useQuery(heatMapParams, {
+  const filteredParams = useMemo(
+    () => ({
+      ...heatMapParams,
+      ...filterParams,
+    }),
+    [heatMapParams, filterParams]
+  );
+
+  const biologQuery = getBiolog.useQuery(filteredParams, {
     skip: !collection_id,
   });
   const biolog = biologQuery.data;
@@ -204,24 +218,30 @@ const useBiolog = (collection_id: string | undefined) => {
     skip: !collection_id,
   });
 
-  const { data: count, ...countQuery } = getBiolog.useQuery(allCountParams, {
-    skip: !collection_id,
-  });
-
-  const [matchCountParams, selCountParams] = useMemo(
+  const [allCountParams, matchCountParams, selCountParams] = useMemo(
     () => [
       {
-        ...allCountParams,
+        ...countParams,
+        ...allFilters,
+      },
+      {
+        ...countParams,
         match_mark: false,
+        ...matchFilters,
       },
       {
-        ...allCountParams,
+        ...countParams,
         selection_mark: false,
+        ...selFilters,
       },
     ],
-    [allCountParams]
+    [allFilters, countParams, matchFilters, selFilters]
   );
 
+  const { data: count, ...countQuery } = getBiolog.useQuery(allCountParams, {
+    skip: !collection_id,
+  });
+
   const matchCount = getBiolog.useQuery(matchCountParams, {
     skip: !collection_id || !matchId,
   });

src/features/collections/data_products/Microtrait.tsx

@@ -22,6 +22,7 @@ import {
   useMatchId,
   useGenerateSelectionId,
   useFilterContextState,
+  useFilters,
 } from '../collectionsSlice';
 import { useFilterContexts } from '../Filters';
 import { useProcessStatePolling } from '../hooks';
@@ -148,6 +149,10 @@ const useMicrotrait = (collection_id: string | undefined) => {
     skip: !collection_id,
   });
   const context = useFilterContextState(collection_id);
+  const { filterParams } = useFilters(collection_id, context);
+  const allFilters = useFilters(collection_id, 'biolog.all').filterParams;
+  const matchFilters = useFilters(collection_id, 'biolog.matched').filterParams;
+  const selFilters = useFilters(collection_id, 'biolog.selected').filterParams;
 
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
@@ -182,7 +187,7 @@ const useMicrotrait = (collection_id: string | undefined) => {
       context,
     ]
   );
-  const allCountParams = useMemo(
+  const countParams = useMemo(
     () => ({
       ...heatMapParams,
       count: true,
@@ -197,7 +202,14 @@ const useMicrotrait = (collection_id: string | undefined) => {
   );
 
   // HeatMap cell query
-  const microtraitQuery = getMicroTrait.useQuery(heatMapParams, {
+  const filteredParams = useMemo(
+    () => ({
+      ...heatMapParams,
+      ...filterParams,
+    }),
+    [heatMapParams, filterParams]
+  );
+  const microtraitQuery = getMicroTrait.useQuery(filteredParams, {
     skip: !collection_id,
   });
   const microtrait = microtraitQuery.data;
@@ -230,25 +242,31 @@ const useMicrotrait = (collection_id: string | undefined) => {
     skip: !collection_id,
   });
 
-  const { data: count, ...countQuery } = getMicroTrait.useQuery(
-    allCountParams,
-    {
-      skip: !collection_id,
-    }
-  );
-
-  const [matchCountParams, selCountParams] = useMemo(
+  const [allCountParams, matchCountParams, selCountParams] = useMemo(
     () => [
       {
-        ...allCountParams,
+        ...countParams,
+        ...allFilters,
+      },
+      {
+        ...countParams,
         match_mark: false,
+        ...matchFilters,
       },
       {
-        ...allCountParams,
+        ...countParams,
         selection_mark: false,
+        ...selFilters,
       },
     ],
-    [allCountParams]
+    [allFilters, countParams, matchFilters, selFilters]
+  );
+
+  const { data: count, ...countQuery } = getMicroTrait.useQuery(
+    allCountParams,
+    {
+      skip: !collection_id,
+    }
   );
 
   const matchCount = getMicroTrait.useQuery(matchCountParams, {