@databiosphere/findable-ui 29.0.2 → 30.0.0

package/src/components/Table/common/utils.ts

@@ -9,7 +9,7 @@ import {
   sortingFns,
   Table,
 } from "@tanstack/react-table";
-import { SelectCategory } from "../../../common/entities";
+import { Category } from "../../../common/categories/models/types";
 import { EXPLORE_MODE, ExploreMode } from "../../../hooks/useExploreMode/types";
 import { COLUMN_IDENTIFIER } from "./columnIdentifier";
 
@@ -38,26 +38,47 @@ type TableData = number | string | string[];
 export function buildCategoryViews<T extends RowData>(
   columns: Column<T>[],
   columnFilters: ColumnFiltersState
-): SelectCategory[] {
-  const categoryViews: SelectCategory[] = [];
+): Category[] {
+  const categoryViews: Category[] = [];
   for (const column of columns) {
-    const { columnDef, getCanFilter, getFacetedUniqueValues, id } = column;
+    const {
+      columnDef,
+      getCanFilter,
+      getFacetedMinMaxValues,
+      getFacetedUniqueValues,
+      id,
+    } = column;
     const { header: columnHeader } = columnDef;
     if (getCanFilter()) {
-      updateFacetedUniqueValues(getFacetedUniqueValues(), columnFilters, id);
       const key = id;
       const label = columnHeader as string;
-      const values = [...getFacetedUniqueValues()].map(([value, count]) => ({
-        count,
-        key: value,
-        label: String(value ?? ""),
-        selected: false, // Selected state updated in reducer.
-      }));
-      categoryViews.push({
-        key,
-        label,
-        values: values,
-      });
+      // Handle range categories.
+      if (columnDef.filterFn === "inNumberRange") {
+        const minMax = getFacetedMinMaxValues();
+        categoryViews.push({
+          key,
+          label,
+          max: minMax?.[1] || Infinity,
+          min: minMax?.[0] || -Infinity,
+          selectedMax: null, // Selected state updated in reducer.
+          selectedMin: null, // Selected state updated in reducer.
+        });
+      }
+      // Handle select categories.
+      if (columnDef.filterFn === "arrIncludesSome") {
+        updateFacetedUniqueValues(getFacetedUniqueValues(), columnFilters, id);
+        const values = [...getFacetedUniqueValues()].map(([value, count]) => ({
+          count,
+          key: value,
+          label: String(value ?? ""),
+          selected: false, // Selected state updated in reducer.
+        }));
+        categoryViews.push({
+          key,
+          label,
+          values: values,
+        });
+      }
     }
   }
   return categoryViews;

package/src/components/Table/components/TableCell/components/ChipCell/chipCell.tsx

@@ -0,0 +1,14 @@
+import { Chip, ChipProps } from "@mui/material";
+import { CellContext, RowData } from "@tanstack/react-table";
+import React from "react";
+
+export const ChipCell = <
+  T extends RowData,
+  TValue extends ChipProps = ChipProps
+>({
+  getValue,
+}: CellContext<T, TValue>): JSX.Element | null => {
+  const props = getValue();
+  if (!props) return null;
+  return <Chip {...props} />;
+};

package/src/components/Table/components/TableCell/components/LinkCell/linkCell.tsx

@@ -0,0 +1,64 @@
+import { LinkProps, Link as MLink, Typography } from "@mui/material";
+import { CellContext, RowData } from "@tanstack/react-table";
+import { BaseComponentProps } from "components/types";
+import React from "react";
+import { isValidUrl } from "../../../../../../common/utils";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
+import { isClientSideNavigation } from "../../../../../Links/common/utils";
+import { getComponent, getRelAttribute, getTargetAttribute } from "./utils";
+
+export const LinkCell = <
+  T extends RowData,
+  TValue extends LinkProps = LinkProps
+>({
+  getValue,
+}: BaseComponentProps & CellContext<T, TValue>): JSX.Element | null => {
+  const props = getValue();
+  if (!props) return null;
+  const {
+    children,
+    className,
+    color,
+    href = "",
+    rel,
+    target,
+    underline,
+    ...linkProps
+  } = props;
+
+  // Determine if the href should use client-side navigation.
+  const isClientSide = isClientSideNavigation(href);
+
+  // Determine if the href is valid.
+  const isValid = isClientSide || isValidUrl(href);
+
+  // If the href is invalid, return a Typography component.
+  if (!isValid)
+    return (
+      <Typography
+        className={className}
+        color={TYPOGRAPHY_PROPS.COLOR.INHERIT}
+        component="span"
+        variant={TYPOGRAPHY_PROPS.VARIANT.INHERIT}
+        {...linkProps}
+      >
+        {children}
+      </Typography>
+    );
+
+  // If the href is valid, return a Link component.
+  return (
+    <MLink
+      className={className}
+      color={color}
+      component={getComponent(href, isClientSide)}
+      href={href}
+      rel={getRelAttribute(rel, isClientSide)}
+      target={getTargetAttribute(target, isClientSide)}
+      underline={underline}
+      {...linkProps}
+    >
+      {children}
+    </MLink>
+  );
+};

package/src/components/Table/components/TableCell/components/LinkCell/stories/args.ts

@@ -0,0 +1,35 @@
+import { ComponentProps } from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../styles/common/mui/typography";
+import { LinkCell } from "../linkCell";
+import { GetValue } from "./types";
+
+export const CLIENT_SIDE_ARGS: Partial<ComponentProps<typeof LinkCell>> = {
+  getValue: (() => ({
+    children: "Explore",
+    href: "/",
+  })) as GetValue,
+};
+
+export const EXTERNAL_ARGS: Partial<ComponentProps<typeof LinkCell>> = {
+  getValue: (() => ({
+    children: "Explore",
+    href: "https://www.example.com",
+  })) as GetValue,
+};
+
+export const INVALID_ARGS: Partial<ComponentProps<typeof LinkCell>> = {
+  getValue: (() => ({
+    children: "Explore",
+  })) as GetValue,
+};
+
+export const WITH_CUSTOM_STYLE_ARGS: Partial<ComponentProps<typeof LinkCell>> =
+  {
+    getValue: (() => ({
+      children: "Explore",
+      color: "success",
+      href: "/",
+      underline: "none",
+      variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400,
+    })) as GetValue,
+  };

package/src/components/Table/components/TableCell/components/LinkCell/stories/linkCell.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { LinkCell } from "../linkCell";
+import {
+  CLIENT_SIDE_ARGS,
+  EXTERNAL_ARGS,
+  INVALID_ARGS,
+  WITH_CUSTOM_STYLE_ARGS,
+} from "./args";
+
+const meta: Meta<typeof LinkCell> = {
+  component: LinkCell,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ClientSide: Story = {
+  args: CLIENT_SIDE_ARGS,
+};
+
+export const External: Story = {
+  args: EXTERNAL_ARGS,
+};
+
+export const Invalid: Story = {
+  args: INVALID_ARGS,
+};
+
+export const WithCustomStyle: Story = {
+  args: WITH_CUSTOM_STYLE_ARGS,
+};

package/src/components/Table/components/TableCell/components/LinkCell/stories/types.ts

@@ -0,0 +1,4 @@
+import { LinkProps } from "@mui/material";
+import { CellContext, RowData } from "@tanstack/react-table";
+
+export type GetValue = CellContext<RowData, LinkProps>["getValue"];

package/src/components/Table/components/TableCell/components/LinkCell/utils.ts

@@ -0,0 +1,59 @@
+import Link from "next/link";
+import { ElementType } from "react";
+import { isValidUrl } from "../../../../../../common/utils";
+import {
+  ANCHOR_TARGET,
+  REL_ATTRIBUTE,
+} from "../../../../../Links/common/entities";
+import {
+  assertAnchorRelAttribute,
+  assertAnchorTargetAttribute,
+} from "../../../../../common/Link/typeGuards";
+
+/**
+ * Returns the component to use for a link based on the given href and client-side navigation flag.
+ * @param href - The href attribute to use.
+ * @param isClientSide - Whether the link is a client-side navigation.
+ * @returns The component to use for the link.
+ */
+export function getComponent(href: string, isClientSide: boolean): ElementType {
+  if (isClientSide) return Link; // Use Next/Link for client-side navigation.
+  if (isValidUrl(href)) return "a"; // Use anchor tag for external links.
+  return "span"; // Use span for invalid links.
+}
+
+/**
+ * Returns the rel attribute for a link based on the given rel and client-side navigation flag.
+ * @param rel - The rel attribute to use.
+ * @param isClientSideNavigation - Whether the link is a client-side navigation.
+ * @returns The rel attribute for the link.
+ */
+export function getRelAttribute(
+  rel: string | undefined,
+  isClientSideNavigation: boolean
+): string {
+  if (rel) {
+    assertAnchorRelAttribute(rel);
+    return rel;
+  }
+  return isClientSideNavigation
+    ? REL_ATTRIBUTE.NO_OPENER
+    : REL_ATTRIBUTE.NO_OPENER_NO_REFERRER;
+}
+
+/**
+ * Returns the target attribute for a link based on the given target and client-side navigation flag.
+ * @param target - The target attribute to use.
+ * @param isClientSideNavigation - Whether the link is a client-side navigation.
+ * @returns The target attribute for the link.
+ */
+export function getTargetAttribute(
+  target: string | undefined,
+  isClientSideNavigation: boolean
+): string {
+  if (target) {
+    assertAnchorTargetAttribute(target);
+    return target;
+  }
+  return isClientSideNavigation ? ANCHOR_TARGET.SELF : ANCHOR_TARGET.BLANK;
+}

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

@@ -0,0 +1,64 @@
+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;
+            }
+            if (numericValue > facetedMinMaxValues[1]) {
+              facetedMinMaxValues[1] = numericValue;
+            }
+          }
+        }
+
+        // Return undefined if all values are null or NaN.
+        if (
+          facetedMinMaxValues[0] === Infinity &&
+          facetedMinMaxValues[1] === -Infinity
+        ) {
+          return undefined;
+        }
+
+        // Normalize -0 to 0.
+        if (Object.is(facetedMinMaxValues[0], -0)) {
+          facetedMinMaxValues[0] = 0;
+        }
+        if (Object.is(facetedMinMaxValues[1], -0)) {
+          facetedMinMaxValues[1] = 0;
+        }
+
+        return facetedMinMaxValues;
+      },
+      getMemoOptions(table.options, "debugTable", "getFacetedMinMaxValues")
+    );
+}

package/src/components/common/Link/typeGuards.ts

@@ -0,0 +1,35 @@
+import { ANCHOR_TARGET, REL_ATTRIBUTE } from "../../Links/common/entities";
+
+/**
+ * Asserts that the given value is a valid REL_ATTRIBUTE.
+ * @param value - Value to assert.
+ * @throws Error if the value is not a valid REL_ATTRIBUTE.
+ */
+export function assertAnchorRelAttribute(
+  value: string
+): asserts value is REL_ATTRIBUTE {
+  if (!Object.values(REL_ATTRIBUTE).includes(value as REL_ATTRIBUTE)) {
+    throw new Error(
+      `Expecting rel attribute: ${value} to be one of ${Object.values(
+        REL_ATTRIBUTE
+      )}`
+    );
+  }
+}
+
+/**
+ * Asserts that the given value is a valid ANCHOR_TARGET.
+ * @param value - Value to assert.
+ * @throws Error if the value is not a valid ANCHOR_TARGET.
+ */
+export function assertAnchorTargetAttribute(
+  value: string
+): asserts value is ANCHOR_TARGET {
+  if (!Object.values(ANCHOR_TARGET).includes(value as ANCHOR_TARGET)) {
+    throw new Error(
+      `Expecting anchor target: ${value} to be one of ${Object.values(
+        ANCHOR_TARGET
+      )}`
+    );
+  }
+}

package/src/config/entities.ts

@@ -10,10 +10,10 @@ import {
   TableOptions,
 } from "@tanstack/react-table";
 import { JSXElementConstructor, ReactNode } from "react";
+import { CategoryConfig } from "../common/categories/config/types";
 import {
   DataDictionaryAnnotation,
   DataDictionaryConfig,
-  SelectCategoryValueView,
   SelectedFilter,
 } from "../common/entities";
 import { HeroTitle } from "../components/common/Title/title";
@@ -88,19 +88,6 @@ export interface CategoryGroup {
   label?: string;
 }
 
-/**
- * Model of category configured in site config.
- */
-export interface CategoryConfig {
-  annotation?: DataDictionaryAnnotation;
-  enableChartView?: boolean;
-  key: string;
-  label: string;
-  mapSelectCategoryValue?: (
-    selectCategoryValue: SelectCategoryValueView
-  ) => SelectCategoryValueView;
-}
-
 /**
  * Column configuration.
  * TanStack ColumnDef properties not currently supported include:

package/src/hooks/useCategoryFilter.ts

@@ -1,3 +1,11 @@
+import { CategoryConfig } from "../common/categories/config/types";
+import { findSelectCategoryConfig } from "../common/categories/config/utils";
+import { isRangeCategory } from "../common/categories/models/range/typeGuards";
+import { buildNextRangeFilterState } from "../common/categories/models/range/utils";
+import { buildNextSelectFilterState } from "../common/categories/models/select/utils";
+import { Category } from "../common/categories/models/types";
+import { buildRangeCategoryView } from "../common/categories/views/range/utils";
+import { CategoryView, VIEW_KIND } from "../common/categories/views/types";
 import { COLLATOR_CASE_INSENSITIVE } from "../common/constants";
 import {
   CategoryKey,
@@ -9,22 +17,12 @@ import {
   SelectCategoryView,
   SelectedFilter,
 } from "../common/entities";
-import { CategoryConfig } from "../config/entities";
 
 /**
  * State backing filter functionality and calculations. Converted to view model for display.
  */
 export type FilterState = Filters;
 
-/**
- * Shape of return value from this useCategoryFilter hook.
- */
-export interface FilterInstance {
-  categories: SelectCategoryView[];
-  filter: FilterState;
-  onFilter: OnFilterFn;
-}
-
 /**
  * Function invoked when selected state of a category value is toggled or range is selected.
  */
@@ -33,6 +31,7 @@ export type OnFilterFn = (
   selectedCategoryValue: CategoryValueKey,
   selected: boolean,
   categorySection?: string,
+  viewKind?: VIEW_KIND,
   searchTerm?: string
 ) => void;
 
@@ -62,27 +61,30 @@ function buildCategoryValueView(
 }
 
 /**
- * Build the view-specific model of the given category, including the category label pulled from the config.
- * @param category - The category to build a view model of.
- * @param categoryValueViews - Set of category value view models for the given category.
+ * Build the view-specific model of the given select category, including the category label pulled from the config.
+ * @param selectCategory - The select category to build a view model of.
+ * @param selectCategoryValueViews - Set of select category value view models for the given category.
  * @param categoryConfigs - Category configs indicating accept list as well as label configuration.
- * @returns Full built category value view, ready for display.
+ * @returns Full built select category view, ready for display.
  */
 function buildCategoryView(
-  category: SelectCategory,
-  categoryValueViews: SelectCategoryValueView[],
+  selectCategory: SelectCategory,
+  selectCategoryValueViews: SelectCategoryValueView[],
   categoryConfigs: CategoryConfig[]
 ): SelectCategoryView {
-  const categoryConfig = findCategoryConfig(category.key, categoryConfigs);
+  const selectCategoryConfig = findSelectCategoryConfig(
+    selectCategory.key,
+    categoryConfigs
+  );
   const mapSelectCategoryValue =
-    categoryConfig?.mapSelectCategoryValue || getSelectCategoryValue;
+    selectCategoryConfig?.mapSelectCategoryValue || getSelectCategoryValue;
   return {
-    annotation: categoryConfig?.annotation,
-    enableChartView: categoryConfig?.enableChartView,
+    annotation: selectCategoryConfig?.annotation,
+    enableChartView: selectCategoryConfig?.enableChartView,
     isDisabled: false,
-    key: category.key,
-    label: getCategoryLabel(category.key, categoryConfig),
-    values: categoryValueViews.map(mapSelectCategoryValue),
+    key: selectCategory.key,
+    label: getCategoryLabel(selectCategory.key, selectCategoryConfig),
+    values: selectCategoryValueViews.map(mapSelectCategoryValue),
   };
 }
 
@@ -94,10 +96,10 @@ function buildCategoryView(
  * @returns Array of category view objects.
  */
 export function buildCategoryViews(
-  categories: SelectCategory[],
+  categories: Category[],
   categoryConfigs: CategoryConfig[] | undefined,
   filterState: FilterState
-): SelectCategoryView[] {
+): CategoryView[] {
   if (!categories || !categoryConfigs) {
     return [];
   }
@@ -115,7 +117,16 @@ export function buildCategoryViews(
       filterState
     );
 
-    // Build view models for each category value in this category and sort alpha.
+    // Build view model for range categories.
+    if (isRangeCategory(category)) {
+      return buildRangeCategoryView(
+        category,
+        categoryConfigs,
+        categorySelectedFilter
+      );
+    }
+
+    // Build view model for single or multiselect categories.
     const categoryValueViews = category.values.map((categoryValue) =>
       buildCategoryValueView(categoryValue, categorySelectedFilter)
     );
@@ -136,13 +147,15 @@ export function buildCategoryViews(
  * @param categoryKey - Key of category that has been de/selected.
  * @param selectedValue - Key of category value that has been de/selected
  * @param selected - True if value is selected, false if de-selected.
+ * @param viewKind - View kind.
  * @returns New filter state generated from the current set of selected values and the newly selected value.
  */
 export function buildNextFilterState(
   filterState: FilterState,
   categoryKey: CategoryKey,
   selectedValue: CategoryValueKey,
-  selected: boolean
+  selected: boolean,
+  viewKind?: VIEW_KIND
 ): FilterState {
   // Check if the selected category already has selected values.
   const categorySelectedFilter = getCategorySelectedFilter(
@@ -162,14 +175,20 @@ export function buildNextFilterState(
     value: categorySelectedFilter ? [...categorySelectedFilter.value] : [],
   };
 
-  // Handle case where category value is selected.
-  if (selected) {
-    nextCategorySelectedFilter.value.push(selectedValue);
-  }
-  // Otherwise, category value has been de-selected; remove the selected value from the selected set of values.
-  else {
-    nextCategorySelectedFilter.value = nextCategorySelectedFilter.value.filter(
-      (value: CategoryValueKey) => value !== selectedValue
+  // Build next filter state for category.
+  if (viewKind === VIEW_KIND.RANGE) {
+    // Handle range category.
+    buildNextRangeFilterState(
+      nextCategorySelectedFilter,
+      selectedValue,
+      selected
+    );
+  } else {
+    // Handle select category.
+    buildNextSelectFilterState(
+      nextCategorySelectedFilter,
+      selectedValue,
+      selected
     );
   }
 
@@ -221,19 +240,6 @@ export function getSelectCategoryValue(
   return selectCategoryValue;
 }
 
-/**
- * Returns the category config for the given category config key.
- * @param key - Category config key.
- * @param categoryConfigs - Category configs.
- * @returns category config.
- */
-function findCategoryConfig(
-  key: string,
-  categoryConfigs: CategoryConfig[]
-): CategoryConfig | undefined {
-  return categoryConfigs.find((categoryConfig) => categoryConfig.key === key);
-}
-
 /**
  * Determine if given category value is selected.
  * @param categoryValueKey - The key of the category value to check if selected in the filter state.
@@ -257,7 +263,7 @@ function isCategoryValueSelected(
  * @returns true if category is to be included in filter.
  */
 function isCategoryAcceptListed(
-  category: SelectCategory,
+  category: Category,
   categoryConfigs: CategoryConfig[]
 ): boolean {
   return categoryConfigs.some(
@@ -288,9 +294,6 @@ function sortCategoryValueViews(
  * @param c1 - Second category view to compare.
  * @returns Number indicating sort precedence of c0 vs c1.
  */
-function sortCategoryViews(
-  c0: SelectCategoryView,
-  c1: SelectCategoryView
-): number {
+function sortCategoryViews(c0: CategoryView, c1: CategoryView): number {
   return COLLATOR_CASE_INSENSITIVE.compare(c0.label, c1.label);
 }

package/src/providers/exploreState/entities.ts

@@ -4,15 +4,15 @@ import {
   RowSelectionState,
   VisibilityState,
 } from "@tanstack/react-table";
+import { CategoryConfig } from "../../common/categories/config/types";
+import { CategoryView } from "../../common/categories/views/types";
 import {
   CategoryValueKey,
   SelectCategory,
-  SelectCategoryView,
   SelectedFilter,
 } from "../../common/entities";
 import { RowPreviewState } from "../../components/Table/features/RowPreview/entities";
 import {
-  CategoryConfig,
   CategoryGroup,
   CategoryGroupConfig,
   EntityPath,
@@ -36,7 +36,7 @@ export interface EntityPageStateMapper {
 export interface EntityState {
   categoryConfigs?: CategoryConfig[];
   categoryGroups?: CategoryGroup[];
-  categoryViews: SelectCategoryView[];
+  categoryViews: CategoryView[];
   filterState: SelectedFilter[];
   savedFilterByCategoryValueKey?: SavedFilterByCategoryValueKey;
   savedFilterState: SelectedFilter[];

package/src/providers/exploreState/initializer/utils.ts

@@ -3,10 +3,10 @@ import {
   GroupingState,
   VisibilityState,
 } from "@tanstack/react-table";
+import { CategoryConfig } from "../../../common/categories/config/types";
 import { SelectCategory, SelectedFilter } from "../../../common/entities";
 import { getInitialColumnVisibilityState } from "../../../components/TableCreator/options/initialState/columnVisibility";
 import {
-  CategoryConfig,
   CategoryGroup,
   CategoryGroupConfig,
   EntityConfig,