From 1fecffcc38aee15d15f93c94cef549749abc25aa Mon Sep 17 00:00:00 2001
From: Cody O'Donnell <ctodonnell@lbl.gov>
Date: Tue, 14 May 2024 12:41:41 -0700
Subject: [PATCH 01/14] Add bool filter type and controls

---
 src/common/api/collectionsApi.ts              |  2 +-
 src/features/collections/CollectionDetail.tsx | 60 ++++++++++++++++++-
 src/features/collections/Filters.tsx          | 32 +++++-----
 src/features/collections/collectionsSlice.ts  |  4 ++
 4 files changed, 82 insertions(+), 16 deletions(-)

diff --git a/src/common/api/collectionsApi.ts b/src/common/api/collectionsApi.ts
index bc5129f8..bc0c3699 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/features/collections/CollectionDetail.tsx b/src/features/collections/CollectionDetail.tsx
index 2dde7f64..4bd46e9b 100644
--- a/src/features/collections/CollectionDetail.tsx
+++ b/src/features/collections/CollectionDetail.tsx
@@ -41,6 +41,10 @@ import {
   Accordion,
   AccordionSummary,
   AccordionDetails,
+  FormControl,
+  Select,
+  MenuItem,
+  SelectChangeEvent,
 } from '@mui/material';
 import { useForm } from 'react-hook-form';
 import { CollectionOverview } from './CollectionOverview';
@@ -178,7 +182,8 @@ export const CollectionDetail = () => {
       !filter ||
       filter.type === 'int' ||
       filter.type === 'float' ||
-      filter.type === 'date'
+      filter.type === 'date' ||
+      filter.type === 'bool'
     )
       return;
     if (e.target.value === filter.value) return;
@@ -596,6 +601,15 @@ const FilterControls = ({
         collectionId={collectionId}
       />
     );
+  } else if (filter.type === 'bool') {
+    return (
+      <BooleanFilterControls
+        column={column}
+        filter={filter}
+        context={context}
+        collectionId={collectionId}
+      />
+    );
   }
   return null;
 };
@@ -977,3 +991,47 @@ const TextFilterControls = ({
     />
   );
 };
+
+const BooleanFilterControls = ({
+  column,
+  filter,
+  collectionId,
+  context,
+}: FilterControlProps & {
+  filter: { type: 'bool' };
+}) => {
+  const dispatch = useAppDispatch();
+  const [selectValue, setSelectValue] = useState<string | undefined>(() => {
+    if (filter.value === true || filter.value === 1) {
+      return 'true';
+    } else if (filter.value === false || filter.value === 0) {
+      return 'false';
+    } else {
+      return;
+    }
+  });
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setSelectValue(event.target.value as string);
+  };
+
+  useEffect(() => {
+    let value;
+    if (selectValue === 'true') {
+      value = 1;
+    } else if (selectValue === 'false') {
+      value = 0;
+    }
+    dispatch(setFilter([collectionId, context, column, { ...filter, value }]));
+  }, [selectValue, collectionId, context, column, filter, dispatch]);
+
+  return (
+    <FormControl fullWidth>
+      <Select value={selectValue} label="Age" onChange={handleChange}>
+        <MenuItem value="true">True</MenuItem>
+        <MenuItem value="false">False</MenuItem>
+        <MenuItem value={undefined}>Any</MenuItem>
+      </Select>
+    </FormControl>
+  );
+};
diff --git a/src/features/collections/Filters.tsx b/src/features/collections/Filters.tsx
index a22c555f..552ec11c 100644
--- a/src/features/collections/Filters.tsx
+++ b/src/features/collections/Filters.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { Chip, Stack, Tab, Tabs } from '@mui/material';
 import { useCallback, useEffect, useRef } from 'react';
 import { toast } from 'react-hot-toast';
@@ -240,20 +241,23 @@ export const useContextFilterQueryManagement = (
           dispatch(
             setColumnMeta([collectionId, context, column.col_id, filterMeta])
           );
-          dispatch(
-            setFilter([
-              collectionId,
-              context,
-              column.col_id,
-              {
-                type: filterMeta.type,
-                min_value: filterMeta.min_value,
-                max_value: filterMeta.max_value,
-                value:
-                  current?.type === column.type ? current.value : undefined,
-              },
-            ])
-          );
+          /**
+           * Commenting out for restbecause this is throwing a typescript error
+           */
+          // dispatch(
+          //   setFilter([
+          //     collectionId,
+          //     context,
+          //     column.col_id,
+          //     {
+          //       type: filterMeta.type,
+          //       min_value: filterMeta.min_value,
+          //       max_value: filterMeta.max_value,
+          //       value:
+          //         current?.type === column.type ? current.value : undefined,
+          //     },
+          //   ])
+          // );
         });
       });
     },
diff --git a/src/features/collections/collectionsSlice.ts b/src/features/collections/collectionsSlice.ts
index 5de28867..23d8f130 100644
--- a/src/features/collections/collectionsSlice.ts
+++ b/src/features/collections/collectionsSlice.ts
@@ -40,6 +40,10 @@ export type FilterState =
       value?: FilterRange;
       min_value: number;
       max_value: number;
+    }
+  | {
+      type: 'bool';
+      value?: boolean | number;
     };
 
 interface ClnState {

From 66d78475204d499eada551ef0a0f1fd5abc30c36 Mon Sep 17 00:00:00 2001
From: David Lyon <dauglyon@users.noreply.github.com>
Date: Tue, 14 May 2024 13:47:22 -0700
Subject: [PATCH 02/14] Fix ts errors caused by hardcoding the heatmap column
 type

---
 src/common/api/collectionsApi.ts     |  9 ++-
 src/features/collections/Filters.tsx | 92 ++++++++++++++++++----------
 2 files changed, 69 insertions(+), 32 deletions(-)

diff --git a/src/common/api/collectionsApi.ts b/src/common/api/collectionsApi.ts
index bc0c3699..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;
@@ -197,6 +197,13 @@ export type ColumnMeta = {
       max_value: undefined;
       enum_values: string[];
     }
+  | {
+      type: 'bool';
+      filter_strategy: undefined;
+      min_value: undefined;
+      max_value: undefined;
+      enum_values: undefined;
+    }
 );
 
 interface CollectionsResults {
diff --git a/src/features/collections/Filters.tsx b/src/features/collections/Filters.tsx
index 552ec11c..0abb88aa 100644
--- a/src/features/collections/Filters.tsx
+++ b/src/features/collections/Filters.tsx
@@ -227,37 +227,67 @@ export const useContextFilterQueryManagement = (
         category.columns.forEach((column) => {
           const current =
             filtersRef.current && filtersRef.current[column.col_id];
-          const filterMeta: ColumnMeta = {
-            type: 'int',
-            key: column.col_id,
-            max_value: filterData.max_value,
-            min_value: filterData.min_value,
-            category: category.category,
-            description: column.description,
-            display_name: column.name,
-            filter_strategy: undefined,
-            enum_values: undefined,
-          };
-          dispatch(
-            setColumnMeta([collectionId, context, column.col_id, filterMeta])
-          );
-          /**
-           * Commenting out for restbecause this is throwing a typescript error
-           */
-          // dispatch(
-          //   setFilter([
-          //     collectionId,
-          //     context,
-          //     column.col_id,
-          //     {
-          //       type: filterMeta.type,
-          //       min_value: filterMeta.min_value,
-          //       max_value: filterMeta.max_value,
-          //       value:
-          //         current?.type === column.type ? current.value : undefined,
-          //     },
-          //   ])
-          // );
+          if (current?.type === 'bool') {
+            setColumnMeta([
+              collectionId,
+              context,
+              column.col_id,
+              {
+                type: 'bool',
+                key: column.col_id,
+                max_value: undefined,
+                min_value: undefined,
+                category: category.category,
+                description: column.description,
+                display_name: column.name,
+                filter_strategy: undefined,
+                enum_values: undefined,
+              },
+            ]);
+            dispatch(
+              setFilter([
+                collectionId,
+                context,
+                column.col_id,
+                {
+                  type: 'bool',
+                  value:
+                    current?.type === column.type
+                      ? Boolean(current.value)
+                      : undefined,
+                },
+              ])
+            );
+          } else {
+            const filterMeta: ColumnMeta = {
+              type: 'int',
+              key: column.col_id,
+              max_value: filterData.max_value,
+              min_value: filterData.min_value,
+              category: category.category,
+              description: column.description,
+              display_name: column.name,
+              filter_strategy: undefined,
+              enum_values: undefined,
+            };
+            dispatch(
+              setColumnMeta([collectionId, context, column.col_id, filterMeta])
+            );
+            dispatch(
+              setFilter([
+                collectionId,
+                context,
+                column.col_id,
+                {
+                  type: filterMeta.type,
+                  min_value: filterMeta.min_value,
+                  max_value: filterMeta.max_value,
+                  value:
+                    current?.type === column.type ? current.value : undefined,
+                },
+              ])
+            );
+          }
         });
       });
     },

From f5d61116c09af16367f7d77b2590310eb719a4f2 Mon Sep 17 00:00:00 2001
From: David Lyon <dauglyon@users.noreply.github.com>
Date: Tue, 14 May 2024 14:08:19 -0700
Subject: [PATCH 03/14] fix column type and add filter to pageConfig for
 heatmaps

---
 src/features/collections/CollectionDetail.tsx | 4 ++--
 src/features/collections/Filters.tsx          | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/features/collections/CollectionDetail.tsx b/src/features/collections/CollectionDetail.tsx
index 4bd46e9b..6a25d908 100644
--- a/src/features/collections/CollectionDetail.tsx
+++ b/src/features/collections/CollectionDetail.tsx
@@ -67,8 +67,8 @@ const pageConfig: Record<
   }
 > = {
   samples: { features: ['filter'] },
-  biolog: { features: [] },
-  microtrait: { features: [] },
+  biolog: { features: ['filter'] },
+  microtrait: { features: ['filter'] },
   genome_attribs: {
     features: ['filter', 'match', 'search'],
   },
diff --git a/src/features/collections/Filters.tsx b/src/features/collections/Filters.tsx
index 0abb88aa..931e7135 100644
--- a/src/features/collections/Filters.tsx
+++ b/src/features/collections/Filters.tsx
@@ -227,7 +227,7 @@ export const useContextFilterQueryManagement = (
         category.columns.forEach((column) => {
           const current =
             filtersRef.current && filtersRef.current[column.col_id];
-          if (current?.type === 'bool') {
+          if (column.type === 'bool') {
             setColumnMeta([
               collectionId,
               context,

From 70277e7ed0e5f26f153a5f16a1b38c2166fdeaae Mon Sep 17 00:00:00 2001
From: David Lyon <dauglyon@users.noreply.github.com>
Date: Tue, 14 May 2024 15:04:52 -0700
Subject: [PATCH 04/14] fix requestId race condition and actually dispatch bool
 columnMeta

---
 src/features/collections/Filters.tsx | 55 +++++++++++++---------------
 1 file changed, 26 insertions(+), 29 deletions(-)

diff --git a/src/features/collections/Filters.tsx b/src/features/collections/Filters.tsx
index 931e7135..9987e0aa 100644
--- a/src/features/collections/Filters.tsx
+++ b/src/features/collections/Filters.tsx
@@ -148,25 +148,22 @@ export const useContextFilterQueryManagement = (
     <T extends CommonResult>(
       result: T,
       collectionId: string | undefined
-    ): { filterData?: T['data']; context?: FilterContext } => {
+    ): { filterData?: T['data'] } => {
       if (result.isError) {
         const err = parseError(result.error);
         if (err.name !== 'AbortError')
           toast('Filter Loading failed: ' + parseError(result.error).message);
       }
-      const context = result.requestId
-        ? requestContext.current[result.requestId]
-        : undefined;
-      if (!collectionId || !result?.data || !context || result.isError)
-        return {};
-      return { filterData: result.data, context };
+
+      if (!collectionId || !result?.data || result.isError) return {};
+      return { filterData: result.data };
     },
     []
   );
 
   const handleTableFilters = useCallback(
     <T extends typeof genomeResult | typeof sampleResult>(result: T) => {
-      const { filterData, context } = handleResult(result, collectionId);
+      const { filterData } = handleResult(result, collectionId);
       if (!filterData || !collectionId || !context) return;
       dispatch(clearFiltersAndColumnMeta([collectionId, context]));
       filterData.columns.forEach((column) => {
@@ -215,12 +212,12 @@ export const useContextFilterQueryManagement = (
         }
       });
     },
-    [collectionId, dispatch, handleResult]
+    [collectionId, dispatch, handleResult, context]
   );
 
   const handleHeatmapFilters = useCallback(
     <T extends typeof biologResult | typeof microtraitResult>(result: T) => {
-      const { filterData, context } = handleResult(result, collectionId);
+      const { filterData } = handleResult(result, collectionId);
       if (!filterData || !collectionId || !context) return;
       dispatch(clearFiltersAndColumnMeta([collectionId, context]));
       filterData.categories.forEach((category) => {
@@ -228,22 +225,24 @@ export const useContextFilterQueryManagement = (
           const current =
             filtersRef.current && filtersRef.current[column.col_id];
           if (column.type === 'bool') {
-            setColumnMeta([
-              collectionId,
-              context,
-              column.col_id,
-              {
-                type: 'bool',
-                key: column.col_id,
-                max_value: undefined,
-                min_value: undefined,
-                category: category.category,
-                description: column.description,
-                display_name: column.name,
-                filter_strategy: undefined,
-                enum_values: undefined,
-              },
-            ]);
+            dispatch(
+              setColumnMeta([
+                collectionId,
+                context,
+                column.col_id,
+                {
+                  type: 'bool',
+                  key: column.col_id,
+                  max_value: undefined,
+                  min_value: undefined,
+                  category: category.category,
+                  description: column.description,
+                  display_name: column.name,
+                  filter_strategy: undefined,
+                  enum_values: undefined,
+                },
+              ])
+            );
             dispatch(
               setFilter([
                 collectionId,
@@ -291,7 +290,7 @@ export const useContextFilterQueryManagement = (
         });
       });
     },
-    [collectionId, dispatch, handleResult]
+    [collectionId, dispatch, handleResult, context]
   );
 
   // When the context (or collection) changes, set the filter context and trigger appropriate query
@@ -311,8 +310,6 @@ export const useContextFilterQueryManagement = (
     } else {
       throw new Error(`No filter query matches filter context "${context}"`);
     }
-    requestContext.current[request.requestId] = context;
-
     return () => {
       // Abort request if context changes while running (prevents race conditions)
       if (request) {

From 2cd82f78b890e67f09182c4c5db7d9e90268baa8 Mon Sep 17 00:00:00 2001
From: David Lyon <dauglyon@users.noreply.github.com>
Date: Tue, 14 May 2024 15:15:36 -0700
Subject: [PATCH 05/14] fix bug setting all bool filters to false

---
 src/features/collections/Filters.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/features/collections/Filters.tsx b/src/features/collections/Filters.tsx
index 9987e0aa..49f16083 100644
--- a/src/features/collections/Filters.tsx
+++ b/src/features/collections/Filters.tsx
@@ -252,7 +252,9 @@ export const useContextFilterQueryManagement = (
                   type: 'bool',
                   value:
                     current?.type === column.type
-                      ? Boolean(current.value)
+                      ? typeof current.value !== 'undefined'
+                        ? Boolean(current.value)
+                        : undefined
                       : undefined,
                 },
               ])

From e36b611a21506f3075213a573500c9a80711e0e4 Mon Sep 17 00:00:00 2001
From: David Lyon <dauglyon@users.noreply.github.com>
Date: Tue, 14 May 2024 15:22:48 -0700
Subject: [PATCH 06/14] Fix infinite loop in effect

---
 src/features/collections/CollectionDetail.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/features/collections/CollectionDetail.tsx b/src/features/collections/CollectionDetail.tsx
index 6a25d908..2d781a6c 100644
--- a/src/features/collections/CollectionDetail.tsx
+++ b/src/features/collections/CollectionDetail.tsx
@@ -1015,6 +1015,11 @@ const BooleanFilterControls = ({
     setSelectValue(event.target.value as string);
   };
 
+  // In order not to create a dependency loop when filter changes within the below effect,
+  // use a filter ref
+  const filterRef = useRef(filter);
+  filterRef.current = filter;
+
   useEffect(() => {
     let value;
     if (selectValue === 'true') {
@@ -1022,8 +1027,15 @@ const BooleanFilterControls = ({
     } else if (selectValue === 'false') {
       value = 0;
     }
-    dispatch(setFilter([collectionId, context, column, { ...filter, value }]));
-  }, [selectValue, collectionId, context, column, filter, dispatch]);
+    dispatch(
+      setFilter([
+        collectionId,
+        context,
+        column,
+        { ...filterRef.current, value },
+      ])
+    );
+  }, [selectValue, collectionId, context, column, dispatch]);
 
   return (
     <FormControl fullWidth>

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 07/14] 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 08/14] 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 09/14] 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 10/14] 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 11/14] 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 12/14] 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:

From e0e88ed1ab89bd8f54341060a0ccb2948097887d Mon Sep 17 00:00:00 2001
From: Cody O'Donnell <ctodonnell@lbl.gov>
Date: Thu, 16 May 2024 11:48:00 -0700
Subject: [PATCH 13/14] Allow false filter values. Ensure boolean dropdowns
 show 'Any' when cleared.

---
 src/common/api/collectionsApi.ts              |  2 +-
 src/common/components/FilterChip.tsx          |  2 +-
 src/features/collections/CollectionDetail.tsx | 21 +++++++++++++------
 src/features/collections/Filters.tsx          |  2 +-
 src/features/collections/collectionsSlice.ts  |  2 +-
 5 files changed, 19 insertions(+), 10 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 f24d8755..e93c707e 100644
--- a/src/common/components/FilterChip.tsx
+++ b/src/common/components/FilterChip.tsx
@@ -18,7 +18,7 @@ export const FilterChip = ({
   ...chipProps
 }: FilterChipProps) => {
   let filterString = '';
-  if (filter.value) {
+  if (filter.value !== undefined && filter.value !== undefined) {
     if (
       filter.type === 'date' ||
       filter.type === 'int' ||
diff --git a/src/features/collections/CollectionDetail.tsx b/src/features/collections/CollectionDetail.tsx
index cbb2f349..45f296b6 100644
--- a/src/features/collections/CollectionDetail.tsx
+++ b/src/features/collections/CollectionDetail.tsx
@@ -517,7 +517,8 @@ const FilterMenu = ({
                 <AccordionDetails>
                   <Stack spacing={3}>
                     {category.filters.flatMap(([column, filter]) => {
-                      const hasVal = Boolean(filter.value);
+                      const hasVal =
+                        filter.value !== undefined && filter.value !== null;
                       return (
                         <Stack
                           className={styles['filter-container']}
@@ -882,7 +883,7 @@ const RangeFilterControls = ({
   const [filterMin, filterMax] = [filter.min_value, filter.max_value];
   useEffect(() => {
     //Clear when the filter is cleared
-    if (!filter.value) {
+    if (filter.value === undefined || filter.value === null) {
       setValue('min', filterMin);
       setValue('max', filterMax);
       setSliderPosition([filterMin, filterMax]);
@@ -1010,13 +1011,13 @@ const BooleanFilterControls = ({
   filter: { type: 'bool' };
 }) => {
   const dispatch = useAppDispatch();
-  const [selectValue, setSelectValue] = useState<string | undefined>(() => {
+  const [selectValue, setSelectValue] = useState<string>(() => {
     if (filter.value === true || filter.value === 1) {
       return 'true';
     } else if (filter.value === false || filter.value === 0) {
       return 'false';
     } else {
-      return;
+      return 'any';
     }
   });
 
@@ -1046,12 +1047,20 @@ const BooleanFilterControls = ({
     );
   }, [selectValue, collectionId, context, column, dispatch]);
 
+  useEffect(() => {
+    //Clear when the filter is cleared
+    // Use 'any' for empty value so the select stays controlled and shows "Any" in the dropdown
+    if (filter.value === undefined || filter.value === null) {
+      setSelectValue('any');
+    }
+  }, [filter.value, setSelectValue]);
+
   return (
     <FormControl fullWidth>
-      <Select value={selectValue} label="Age" onChange={handleChange}>
+      <Select value={selectValue} onChange={handleChange}>
         <MenuItem value="true">True</MenuItem>
         <MenuItem value="false">False</MenuItem>
-        <MenuItem value={undefined}>Any</MenuItem>
+        <MenuItem value="any">Any</MenuItem>
       </Select>
     </FormControl>
   );
diff --git a/src/features/collections/Filters.tsx b/src/features/collections/Filters.tsx
index 738113bd..9b8cabb4 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: 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 7ba0c22c..1237afe6 100644
--- a/src/features/collections/collectionsSlice.ts
+++ b/src/features/collections/collectionsSlice.ts
@@ -424,7 +424,7 @@ export const useFilters = (
   );
 
   const formattedFilters = Object.entries(filters ?? {})
-    .filter(([column, filterState]) => Boolean(filterState.value))
+    .filter(([column, filterState]) => filterState.value !== undefined)
     .map(([column, filterState]) => {
       const paramName = `filter_${column}`;
       let filterValue: string | undefined;

From 598a6b56438e59e669037d83d57890c1660258a2 Mon Sep 17 00:00:00 2001
From: Cody O'Donnell <ctodonnell@lbl.gov>
Date: Thu, 16 May 2024 13:24:35 -0700
Subject: [PATCH 14/14] Minor changes to boolean checks

---
 src/common/api/collectionsApi.ts              |  2 +-
 src/common/components/FilterChip.tsx          |  2 +-
 src/features/collections/CollectionDetail.tsx | 12 +++++++++---
 3 files changed, 11 insertions(+), 5 deletions(-)

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;
diff --git a/src/common/components/FilterChip.tsx b/src/common/components/FilterChip.tsx
index e93c707e..f6a89365 100644
--- a/src/common/components/FilterChip.tsx
+++ b/src/common/components/FilterChip.tsx
@@ -18,7 +18,7 @@ export const FilterChip = ({
   ...chipProps
 }: FilterChipProps) => {
   let filterString = '';
-  if (filter.value !== undefined && filter.value !== undefined) {
+  if (filter.value !== undefined && filter.value !== null) {
     if (
       filter.type === 'date' ||
       filter.type === 'int' ||
diff --git a/src/features/collections/CollectionDetail.tsx b/src/features/collections/CollectionDetail.tsx
index 45f296b6..19d194ee 100644
--- a/src/features/collections/CollectionDetail.tsx
+++ b/src/features/collections/CollectionDetail.tsx
@@ -1011,14 +1011,18 @@ const BooleanFilterControls = ({
   filter: { type: 'bool' };
 }) => {
   const dispatch = useAppDispatch();
-  const [selectValue, setSelectValue] = useState<string>(() => {
-    if (filter.value === true || filter.value === 1) {
+  // Convert boolean values to proper dropdown values
+  const getBooleanDropdownValue = (value?: number | boolean) => {
+    if (value === true || value === 1) {
       return 'true';
-    } else if (filter.value === false || filter.value === 0) {
+    } else if (value === false || value === 0) {
       return 'false';
     } else {
       return 'any';
     }
+  };
+  const [selectValue, setSelectValue] = useState<string>(() => {
+    return getBooleanDropdownValue(filter.value);
   });
 
   const handleChange = (event: SelectChangeEvent) => {
@@ -1052,6 +1056,8 @@ const BooleanFilterControls = ({
     // Use 'any' for empty value so the select stays controlled and shows "Any" in the dropdown
     if (filter.value === undefined || filter.value === null) {
       setSelectValue('any');
+    } else if (filter.value !== filterRef.current.value) {
+      setSelectValue(getBooleanDropdownValue(filter.value));
     }
   }, [filter.value, setSelectValue]);