From 0f57c19cf709888a86c9cc5156b85df5829d2239 Mon Sep 17 00:00:00 2001
From: David Lyon <dauglyon@users.noreply.github.com>
Date: Fri, 26 Apr 2024 13:28:55 -0700
Subject: [PATCH 1/6] Add bool support (as range value, dedicated state will be
 implemented when we have a bool filter controller component)

---
 src/common/api/collectionsApi.ts              |  2 +-
 src/common/components/FilterChip.tsx          |  2 ++
 src/features/collections/CollectionDetail.tsx |  8 ++++++--
 src/features/collections/collectionsSlice.ts  | 11 ++++++++++-
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/common/api/collectionsApi.ts b/src/common/api/collectionsApi.ts
index b0ade21e..f7162c94 100644
--- a/src/common/api/collectionsApi.ts
+++ b/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;
diff --git a/src/common/components/FilterChip.tsx b/src/common/components/FilterChip.tsx
index 521017e0..44b50c62 100644
--- a/src/common/components/FilterChip.tsx
+++ b/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 = filter.value.range[1] === 1 ? 'true' : 'false';
     } else {
       const val = filter.value;
       if (typeof val === 'string') {
diff --git a/src/features/collections/CollectionDetail.tsx b/src/features/collections/CollectionDetail.tsx
index 2d781a6c..6bd8ed32 100644
--- a/src/features/collections/CollectionDetail.tsx
+++ b/src/features/collections/CollectionDetail.tsx
@@ -583,7 +583,11 @@ const FilterControls = ({
         collectionId={collectionId}
       />
     );
-  } else if (filter.type === 'int' || filter.type === 'float') {
+  } else if (
+    filter.type === 'int' ||
+    filter.type === 'float' ||
+    filter.type === 'bool'
+  ) {
     return (
       <RangeFilterControls
         column={column}
@@ -780,7 +784,7 @@ const RangeFilterControls = ({
   collectionId,
   context,
 }: FilterControlProps & {
-  filter: { type: 'float' | 'int' };
+  filter: { type: 'float' | 'int' | 'bool' };
 }) => {
   // initial defaults
   const [defMin, defMax] = filter.value?.range ?? [
diff --git a/src/features/collections/collectionsSlice.ts b/src/features/collections/collectionsSlice.ts
index 23d8f130..d97a1582 100644
--- a/src/features/collections/collectionsSlice.ts
+++ b/src/features/collections/collectionsSlice.ts
@@ -30,7 +30,7 @@ interface FilterRange {
 export type FilterState =
   | { type: 'fulltext' | 'prefix' | 'identity' | 'ngram'; value?: string }
   | {
-      type: 'int' | 'float';
+      type: 'int' | 'float' | 'bool';
       value?: FilterRange;
       min_value: number;
       max_value: number;
@@ -435,6 +435,15 @@ export const useFilters = (
         filterState.type === 'ngram'
       ) {
         if (filterState.value !== undefined) filterValue = filterState.value;
+      } else if (
+        filterState.type === 'bool' &&
+        filterState.value !== undefined
+      ) {
+        const fStart = filterState.value.range[0];
+        const fEnd = filterState.value.range[1];
+        if (fStart === fEnd) {
+          filterValue = fStart === 1 ? 'true' : 'false';
+        }
       } else if (
         (filterState.type === 'date' ||
           filterState.type === 'int' ||

From 2af716332f87a4aeb2885cdf35d1e2d51499f0bb Mon Sep 17 00:00:00 2001
From: David Lyon <dauglyon@users.noreply.github.com>
Date: Fri, 26 Apr 2024 13:45:31 -0700
Subject: [PATCH 2/6] Use columnMeta for filter chip labels, use filter context
 for filter menu header

---
 src/features/collections/CollectionDetail.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/features/collections/CollectionDetail.tsx b/src/features/collections/CollectionDetail.tsx
index 6bd8ed32..4cd93295 100644
--- a/src/features/collections/CollectionDetail.tsx
+++ b/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"

From 80d395d515a73239b0469a3e977a2fe846d1086b Mon Sep 17 00:00:00 2001
From: David Lyon <dauglyon@users.noreply.github.com>
Date: Fri, 26 Apr 2024 13:46:32 -0700
Subject: [PATCH 3/6] add filters to Biolog and Microtrait

---
 .../collections/data_products/Biolog.tsx      | 40 ++++++++++++-----
 .../collections/data_products/Microtrait.tsx  | 44 +++++++++++++------
 2 files changed, 61 insertions(+), 23 deletions(-)

diff --git a/src/features/collections/data_products/Biolog.tsx b/src/features/collections/data_products/Biolog.tsx
index d9bbefb4..81fffde1 100644
--- a/src/features/collections/data_products/Biolog.tsx
+++ b/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,
   });
diff --git a/src/features/collections/data_products/Microtrait.tsx b/src/features/collections/data_products/Microtrait.tsx
index f64d30a5..429c407e 100644
--- a/src/features/collections/data_products/Microtrait.tsx
+++ b/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, {

From 67902c578a311105008d724b139ab7f0e5530f47 Mon Sep 17 00:00:00 2001
From: David Lyon <dauglyon@users.noreply.github.com>
Date: Wed, 15 May 2024 09:25:13 -0700
Subject: [PATCH 4/6] fix merge artifacts, type errors

---
 src/common/components/FilterChip.tsx          | 2 +-
 src/features/collections/CollectionDetail.tsx | 8 ++------
 src/features/collections/Filters.tsx          | 3 ++-
 src/features/collections/collectionsSlice.ts  | 8 ++------
 4 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/common/components/FilterChip.tsx b/src/common/components/FilterChip.tsx
index 44b50c62..f24d8755 100644
--- a/src/common/components/FilterChip.tsx
+++ b/src/common/components/FilterChip.tsx
@@ -31,7 +31,7 @@ export const FilterChip = ({
         .map((val) => val.toLocaleString());
       filterString = `${minString} to ${maxString}`;
     } else if (filter.type === 'bool') {
-      filterString = filter.value.range[1] === 1 ? 'true' : 'false';
+      filterString = Boolean(filter.value).toString();
     } else {
       const val = filter.value;
       if (typeof val === 'string') {
diff --git a/src/features/collections/CollectionDetail.tsx b/src/features/collections/CollectionDetail.tsx
index 4cd93295..cbb2f349 100644
--- a/src/features/collections/CollectionDetail.tsx
+++ b/src/features/collections/CollectionDetail.tsx
@@ -592,11 +592,7 @@ const FilterControls = ({
         collectionId={collectionId}
       />
     );
-  } else if (
-    filter.type === 'int' ||
-    filter.type === 'float' ||
-    filter.type === 'bool'
-  ) {
+  } else if (filter.type === 'int' || filter.type === 'float') {
     return (
       <RangeFilterControls
         column={column}
@@ -793,7 +789,7 @@ const RangeFilterControls = ({
   collectionId,
   context,
 }: FilterControlProps & {
-  filter: { type: 'float' | 'int' | 'bool' };
+  filter: { type: 'float' | 'int' };
 }) => {
   // initial defaults
   const [defMin, defMax] = filter.value?.range ?? [
diff --git a/src/features/collections/Filters.tsx b/src/features/collections/Filters.tsx
index 49f16083..9b8cabb4 100644
--- a/src/features/collections/Filters.tsx
+++ b/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:
diff --git a/src/features/collections/collectionsSlice.ts b/src/features/collections/collectionsSlice.ts
index d97a1582..7ba0c22c 100644
--- a/src/features/collections/collectionsSlice.ts
+++ b/src/features/collections/collectionsSlice.ts
@@ -30,7 +30,7 @@ interface FilterRange {
 export type FilterState =
   | { type: 'fulltext' | 'prefix' | 'identity' | 'ngram'; value?: string }
   | {
-      type: 'int' | 'float' | 'bool';
+      type: 'int' | 'float';
       value?: FilterRange;
       min_value: number;
       max_value: number;
@@ -439,11 +439,7 @@ export const useFilters = (
         filterState.type === 'bool' &&
         filterState.value !== undefined
       ) {
-        const fStart = filterState.value.range[0];
-        const fEnd = filterState.value.range[1];
-        if (fStart === fEnd) {
-          filterValue = fStart === 1 ? 'true' : 'false';
-        }
+        filterValue = Boolean(filterState.value).toString();
       } else if (
         (filterState.type === 'date' ||
           filterState.type === 'int' ||

From b43c375e38d22e1c5cba12e7c5b9ab874a6eb619 Mon Sep 17 00:00:00 2001
From: David Lyon <5115845+dauglyon@users.noreply.github.com>
Date: Wed, 15 May 2024 09:29:43 -0700
Subject: [PATCH 5/6] Update src/common/api/collectionsApi.ts

---
 src/common/api/collectionsApi.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/api/collectionsApi.ts b/src/common/api/collectionsApi.ts
index f7162c94..b0ade21e 100644
--- a/src/common/api/collectionsApi.ts
+++ b/src/common/api/collectionsApi.ts
@@ -177,7 +177,7 @@ export type ColumnMeta = {
   display_name?: string;
 } & (
   | {
-      type: 'date' | 'int' | 'float' | 'bool';
+      type: 'date' | 'int' | 'float';
       filter_strategy: undefined;
       min_value: number;
       max_value: number;

From ddd8674c9be363e488235f7a60f77588d74b5356 Mon Sep 17 00:00:00 2001
From: David Lyon <5115845+dauglyon@users.noreply.github.com>
Date: Wed, 15 May 2024 09:32:04 -0700
Subject: [PATCH 6/6] Update src/features/collections/Filters.tsx

---
 src/features/collections/Filters.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/collections/Filters.tsx b/src/features/collections/Filters.tsx
index 9b8cabb4..738113bd 100644
--- a/src/features/collections/Filters.tsx
+++ b/src/features/collections/Filters.tsx
@@ -281,7 +281,7 @@ export const useContextFilterQueryManagement = (
                 context,
                 column.col_id,
                 {
-                  type: 'int',
+                  type: filterMeta.type,
                   min_value: filterMeta.min_value,
                   max_value: filterMeta.max_value,
                   value: