feat: customize getfacetedminmaxvalues for mixed column values (#440)

Author: Fran McDade

src/components/Index/table/hook.ts

@@ -2,7 +2,6 @@ import {
   ColumnDef,
   ColumnSort,
   getCoreRowModel,
-  getFacetedMinMaxValues,
   getFacetedRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
@@ -34,6 +33,7 @@ import {
   isClientFilteringEnabled,
   sortingFn,
 } from "../../Table/common/utils";
+import { getFacetedMinMaxValues } from "../../Table/featureOptions/facetedColumn/getFacetedMinMaxValues";
 import { ROW_POSITION } from "../../Table/features/RowPosition/constants";
 import { ROW_PREVIEW } from "../../Table/features/RowPreview/constants";
 import { RowPreviewState } from "../../Table/features/RowPreview/entities";

src/components/Table/common/utils.ts

@@ -9,6 +9,7 @@ import {
   sortingFns,
   Table,
 } from "@tanstack/react-table";
+import { assertIsRange } from "../../../common/categories/models/range/utils";
 import { Category } from "../../../common/categories/models/types";
 import { EXPLORE_MODE, ExploreMode } from "../../../hooks/useExploreMode/types";
 import { COLUMN_IDENTIFIER } from "./columnIdentifier";
@@ -54,12 +55,15 @@ export function buildCategoryViews<T extends RowData>(
       const label = columnHeader as string;
       // Handle range categories.
       if (columnDef.filterFn === "inNumberRange") {
-        const [min, max] = getFacetedMinMaxValues() || [];
+        const minMax = getFacetedMinMaxValues();
+        // Assert for the column that the minMax values are a range.
+        assertIsRange(minMax);
+        const [min, max] = minMax;
         categoryViews.push({
           key,
           label,
-          max: max ?? Infinity,
-          min: min ?? -Infinity,
+          max,
+          min,
           selectedMax: null, // Selected state updated in reducer.
           selectedMin: null, // Selected state updated in reducer.
         });

src/components/Table/featureOptions/facetedColumn/getFacetedMinMaxValues.ts

@@ -0,0 +1,47 @@
+import { getMemoOptions, memo, RowData, Table } from "@tanstack/react-table";
+
+/**
+ * Returns an array of two numbers, the minimum and maximum values for the column, or undefined if the column does not exist or has no values.
+ * Customized version of the default getFacetedMinMaxValues function from tanstack table handling mixed null and possible NaN values.
+ * See https://tanstack.com/table/v8/docs/api/features/column-faceting#getfacetedminmaxvalues.
+ * @returns An array of two numbers, the minimum and maximum values for the column, or undefined if the column does not exist or has no values.
+ */
+export function getFacetedMinMaxValues<TData extends RowData>(): (
+  table: Table<TData>,
+  columnId: string
+) => () => undefined | [number, number] {
+  // eslint-disable-next-line sonarjs/cognitive-complexity -- Customized copy of tanstack table function.
+  return (table, columnId) =>
+    memo(
+      () => [table.getColumn(columnId)?.getFacetedRowModel()],
+      (facetedRowModel) => {
+        if (!facetedRowModel) return undefined;
+
+        // Initialize with the smallest and largest possible numbers.
+        const facetedMinMaxValues: [number, number] = [Infinity, -Infinity];
+
+        for (let i = 0; i < facetedRowModel.flatRows.length; i++) {
+          const values =
+            facetedRowModel.flatRows[i]!.getUniqueValues<number>(columnId);
+
+          for (let j = 0; j < values.length; j++) {
+            const value = values[j]!;
+            // Convert value to a number.
+            const numericValue = Number(value);
+
+            // Skip null and NaN values.
+            if (value === null || isNaN(numericValue)) continue;
+
+            if (numericValue < facetedMinMaxValues[0]) {
+              facetedMinMaxValues[0] = numericValue;
+            } else if (numericValue > facetedMinMaxValues[1]) {
+              facetedMinMaxValues[1] = numericValue;
+            }
+          }
+        }
+
+        return facetedMinMaxValues;
+      },
+      getMemoOptions(table.options, "debugTable", "getFacetedMinMaxValues")
+    );
+}