feat: update columnfiltersadapter to handle range category filtering (#634)

Author: Fran McDade

src/common/categories/config/range/typeGuards.ts

@@ -0,0 +1,14 @@
+import { RangeCategoryView } from "../../views/range/types";
+import { VIEW_KIND } from "../../views/types";
+import { CategoryConfig } from "../types";
+
+/**
+ * Determine if the given category config is a range category.
+ * @param categoryConfig - Category config.
+ * @returns True if the category config is a range category, false otherwise.
+ */
+export function isRangeCategoryConfig(
+  categoryConfig: CategoryConfig
+): categoryConfig is RangeCategoryView {
+  return categoryConfig.viewKind === VIEW_KIND.RANGE;
+}

src/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/columnFiltersAdapter.tsx

@@ -1,5 +1,6 @@
 import { RowData } from "@tanstack/react-table";
 import { useCallback } from "react";
+import { VIEW_KIND } from "../../../../../../common/categories/views/types";
 import {
   CategoryKey,
   CategoryValueKey,
@@ -22,13 +23,23 @@ export const ColumnFiltersAdapter = <T extends RowData>({
       categoryKey: CategoryKey | ClearAll,
       selectedCategoryValue: CategoryValueKey,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars -- `selected` is not required by TanStack adapter.
-      _selected: boolean
+      _selected: boolean,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- `categorySection` is not required by TanStack adapter.
+      _categorySection?: string,
+      viewKind?: VIEW_KIND
     ) => {
       if (categoryKey === CLEAR_ALL) {
         table.resetColumnFilters();
         return;
       }
 
+      // Range filters use direct value assignment (e.g., [min, max] tuple for numeric ranges).
+      if (viewKind === VIEW_KIND.RANGE) {
+        table.getColumn(categoryKey)?.setFilterValue(selectedCategoryValue);
+        return;
+      }
+
+      // Select filters use an updater function to toggle individual values in/out of the filter array.
       table
         .getColumn(categoryKey)
         ?.setFilterValue(updater(selectedCategoryValue));

src/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/utils.ts

@@ -1,7 +1,12 @@
 import { Column, RowData, Table } from "@tanstack/react-table";
+import { isRangeCategoryConfig } from "../../../../../../common/categories/config/range/typeGuards";
 import { CategoryConfig } from "../../../../../../common/categories/config/types";
+import { RangeCategoryView } from "../../../../../../common/categories/views/range/types";
 import { CategoryView } from "../../../../../../common/categories/views/types";
-import { SelectCategoryValueView } from "../../../../../../common/entities";
+import {
+  SelectCategoryValueView,
+  SelectCategoryView,
+} from "../../../../../../common/entities";
 import { CategoryGroup } from "../../../../../../config/entities";
 import { getColumnHeader } from "../../../../../Table/common/utils";
 import { getSortedFacetedValues } from "../../../../../Table/featureOptions/facetedColumn/utils";
@@ -113,7 +118,17 @@ function mapCategoryFilter<T extends RowData>(
       const column = table.getColumn(categoryConfig.key);
       if (!column) return acc;
       if (!column.getCanFilter()) return acc;
-      const categoryView = mapColumnToCategoryView(column, categoryConfig);
+
+      let categoryView: CategoryView;
+
+      if (isRangeCategoryConfig(categoryConfig)) {
+        // Build range category view.
+        categoryView = mapColumnToRangeCategoryView(column, categoryConfig);
+      } else {
+        // Build select category view.
+        categoryView = mapColumnToSelectCategoryView(column, categoryConfig);
+      }
+
       return [...acc, categoryView];
     },
     []
@@ -125,15 +140,44 @@ function mapCategoryFilter<T extends RowData>(
 }
 
 /**
- * Adapter for TanStack column to category view.
+ * Adapter for TanStack column to range category view.
+ * @param column - Column.
+ * @param categoryConfig - Category config.
+ * @returns Range category view.
+ */
+function mapColumnToRangeCategoryView<T extends RowData>(
+  column: Column<T>,
+  categoryConfig?: CategoryConfig
+): RangeCategoryView {
+  const minMax = column.getFacetedMinMaxValues();
+  const isDisabled = !minMax;
+
+  // Selected values for the column.
+  const filterValue = (column.getFilterValue() || []) as [number, number];
+
+  return {
+    annotation: undefined,
+    isDisabled,
+    key: column.id,
+    label: getColumnHeader(column),
+    max: minMax?.[1] || Infinity,
+    min: minMax?.[0] || -Infinity,
+    selectedMax: filterValue[1],
+    selectedMin: filterValue[0],
+    ...categoryConfig,
+  };
+}
+
+/**
+ * Adapter for TanStack column to select category view.
  * @param column - Column.
  * @param categoryConfig - Category config.
- * @returns Category view.
+ * @returns Select category view.
  */
-function mapColumnToCategoryView<T extends RowData>(
+function mapColumnToSelectCategoryView<T extends RowData>(
   column: Column<T>,
   categoryConfig?: CategoryConfig
-): CategoryView {
+): SelectCategoryView {
   const facetedUniqueValues = column.getFacetedUniqueValues();
   const isDisabled = facetedUniqueValues.size === 0;
   const values = mapColumnToSelectCategoryValueView(column);