@databiosphere/findable-ui 29.0.2 → 30.0.0

package/lib/components/Filter/components/FilterTag/stories/filterTag.stories.js

@@ -0,0 +1,21 @@
+import { Box } from "@mui/material";
+import React from "react";
+import { FilterTag } from "../filterTag";
+import { DEFAULT_ARGS, WITH_ELLIPSIS_ARGS, WITH_RANGE_ARGS } from "./args";
+const meta = {
+    component: FilterTag,
+    decorators: [
+        (Story) => (React.createElement(Box, { sx: { width: 232 } },
+            React.createElement(Story, null))),
+    ],
+};
+export default meta;
+export const Default = {
+    args: DEFAULT_ARGS,
+};
+export const WithEllipsis = {
+    args: WITH_ELLIPSIS_ARGS,
+};
+export const WithRange = {
+    args: WITH_RANGE_ARGS,
+};

package/lib/components/Filter/components/FilterTag/utils.d.ts

@@ -0,0 +1,10 @@
+import { RangeCategoryView } from "../../../../common/categories/views/range/types";
+import { CategoryTag } from "../../../../common/entities";
+import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
+/**
+ * Returns set of filter tags with tag label (the selected range values) and corresponding Tag onRemove function.
+ * @param categoryView - View model of range category.
+ * @param onFilter - Function to execute on selection or removal of category value.
+ * @returns Array of selected filter tags.
+ */
+export declare function buildRangeTag(categoryView: RangeCategoryView, onFilter: OnFilterFn): CategoryTag[];

package/lib/components/Filter/components/FilterTag/utils.js

@@ -0,0 +1,40 @@
+import { VIEW_KIND } from "../../../../common/categories/views/types";
+import { RANGE_OPERATOR } from "../FilterRange/hooks/UseFilterRange/types";
+import { getRangeOperator } from "../FilterRange/utils";
+/**
+ * Returns set of filter tags with tag label (the selected range values) and corresponding Tag onRemove function.
+ * @param categoryView - View model of range category.
+ * @param onFilter - Function to execute on selection or removal of category value.
+ * @returns Array of selected filter tags.
+ */
+export function buildRangeTag(categoryView, onFilter) {
+    const rangeOperator = getRangeOperator(categoryView);
+    if (!rangeOperator)
+        return [];
+    return [
+        {
+            label: buildRangeTagLabel(categoryView, rangeOperator),
+            onRemove: () => onFilter(categoryView.key, undefined, false, undefined, VIEW_KIND.RANGE),
+            superseded: false,
+        },
+    ];
+}
+/**
+ * Returns the label for the range tag based on the selected values.
+ * @param categoryView - View model of range category.
+ * @param rangeOperator - The range operator.
+ * @returns The label for the range tag.
+ */
+function buildRangeTagLabel(categoryView, rangeOperator) {
+    const { selectedMax, selectedMin } = categoryView;
+    switch (rangeOperator) {
+        case RANGE_OPERATOR.BETWEEN:
+            return `${selectedMin} - ${selectedMax}`;
+        case RANGE_OPERATOR.GREATER_THAN:
+            return `> ${selectedMin}`;
+        case RANGE_OPERATOR.LESS_THAN:
+            return `< ${selectedMax}`;
+        default:
+            return "";
+    }
+}

package/lib/components/Filter/components/Filters/filters.d.ts

@@ -1,8 +1,8 @@
-import { SelectCategoryView } from "../../../../common/entities";
+import { CategoryView } from "../../../../common/categories/views/types";
 import { TrackFilterOpenedFunction } from "../../../../config/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 export interface CategoryFilter {
-    categoryViews: SelectCategoryView[];
+    categoryViews: CategoryView[];
     label?: string;
 }
 export interface FiltersProps {

package/lib/components/Filter/components/Filters/filters.js

@@ -1,19 +1,26 @@
 import { Divider } from "@mui/material";
 import React, { Fragment, useEffect, useRef, useState } from "react";
+import { isRangeCategoryView } from "../../../../common/categories/views/range/typeGuards";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
 import { useWindowResize } from "../../../../hooks/useWindowResize";
 import { TEST_IDS } from "../../../../tests/testIds";
 import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
 import { Filter } from "../Filter/filter";
+import { buildRangeTag } from "../FilterTag/utils";
 import { FilterTags } from "../FilterTags/filterTags";
 import { CategoryViewsLabel, Filters as FilterList } from "./filters.styles";
 /**
- * Returns set of selected category tags with tag label (the selected metadata label) and corresponding Tag onRemove function.
+ * Returns filter tags for the given category view.
  * @param categoryView - View model of category to display.
- * @param onFilter - Function to execute on select of category value or remove of selected category value.
- * @returns Array of selected category tags.
+ * @param onFilter - Function to execute on selection or removal of category value.
+ * @returns Array of filter tags.
  */
-function buildSelectCategoryTags(categoryView, onFilter) {
+function buildFilterTags(categoryView, onFilter) {
+    // Handle range category views
+    if (isRangeCategoryView(categoryView)) {
+        return buildRangeTag(categoryView, onFilter);
+    }
+    // Handle select category views.
     const { key: categoryKey, values } = categoryView;
     return values
         .filter(({ selected }) => selected)
@@ -26,13 +33,13 @@ function buildSelectCategoryTags(categoryView, onFilter) {
     });
 }
 /**
- * Build selected filter tags element for the given category type.
+ * Returns filter tags element for the given category view.
  * @param categoryView - View model of category to display.
- * @param onFilter - Function to execute on select of category value or remove of selected category value.
- * @returns Filter tags element displaying selected category values.
+ * @param onFilter - Function to execute on selection or removal of category value.
+ * @returns Filter tags element.
  */
 function renderFilterTags(categoryView, onFilter) {
-    const tags = buildSelectCategoryTags(categoryView, onFilter);
+    const tags = buildFilterTags(categoryView, onFilter);
     return React.createElement(FilterTags, { tags: tags });
 }
 export const Filters = ({ categoryFilters, closeAncestor, disabled = false, onFilter, trackFilterOpened, }) => {

package/lib/components/Filter/components/Filters/stories/args.d.ts

@@ -0,0 +1,3 @@
+import { ComponentProps } from "react";
+import { Filters } from "../filters";
+export declare const DEFAULT_ARGS: ComponentProps<typeof Filters>;

package/lib/components/Filter/components/Filters/stories/args.js

@@ -0,0 +1,15 @@
+import { fn } from "@storybook/test";
+import { BIOLOGICAL_SEX, DONOR_COUNT, FILE_FORMAT, FILE_TYPE, GENUS_SPECIES, } from "./constants";
+export const DEFAULT_ARGS = {
+    categoryFilters: [
+        {
+            categoryViews: [BIOLOGICAL_SEX, GENUS_SPECIES, DONOR_COUNT],
+            label: "Donor",
+        },
+        {
+            categoryViews: [FILE_FORMAT, FILE_TYPE],
+            label: "File",
+        },
+    ],
+    onFilter: fn(),
+};

package/lib/components/Filter/components/Filters/stories/constants.d.ts

@@ -0,0 +1,22 @@
+import { RangeCategoryView } from "../../../../../common/categories/views/range/types";
+import { SelectCategoryView } from "../../../../../common/entities";
+/**
+ * Biological Sex select category view
+ */
+export declare const BIOLOGICAL_SEX: SelectCategoryView;
+/**
+ * Genus Species select category view
+ */
+export declare const GENUS_SPECIES: SelectCategoryView;
+/**
+ * Donor Count range category view
+ */
+export declare const DONOR_COUNT: RangeCategoryView;
+/**
+ * File Format select category view
+ */
+export declare const FILE_FORMAT: SelectCategoryView;
+/**
+ * File Type select category view
+ */
+export declare const FILE_TYPE: SelectCategoryView;

package/lib/components/Filter/components/Filters/stories/constants.js

@@ -0,0 +1,134 @@
+/**
+ * Biological Sex
+ */
+const MALE = {
+    count: 14,
+    key: "male",
+    label: "Male",
+    selected: false,
+};
+/**
+ * Biological Sex
+ */
+const FEMALE = {
+    count: 12,
+    key: "female",
+    label: "Female",
+    selected: false,
+};
+/**
+ * Genus Species
+ */
+const HOMO_SAPIENS = {
+    count: 471,
+    key: "Homo sapiens",
+    label: "Homo sapiens",
+    selected: false,
+};
+/**
+ * Genus Species
+ */
+const MUS_MUSCLES = {
+    count: 55,
+    key: "Mus musculus",
+    label: "Mus musculus",
+    selected: false,
+};
+/**
+ * File Format
+ */
+const BAM = {
+    count: 7,
+    key: "bam",
+    label: "bam",
+    selected: false,
+};
+/**
+ * File Format
+ */
+const CSV = {
+    count: 5,
+    key: "csv",
+    label: "csv",
+    selected: false,
+};
+/**
+ * File Format
+ */
+const FASTQ = {
+    count: 38,
+    key: "fastq",
+    label: "fastq",
+    selected: false,
+};
+/**
+ * File Format
+ */
+const TSV = {
+    count: 3,
+    key: "tsv",
+    label: "tsv",
+    selected: false,
+};
+/**
+ * File Type
+ */
+const RAW = {
+    count: 1,
+    key: "raw",
+    label: "raw",
+    selected: false,
+};
+/**
+ * File Type
+ */
+const PROCESSED = {
+    count: 1,
+    key: "processed",
+    label: "processed",
+    selected: false,
+};
+/**
+ * Biological Sex select category view
+ */
+export const BIOLOGICAL_SEX = {
+    key: "biologicalSex",
+    label: "Biological Sex",
+    values: [MALE, FEMALE],
+};
+/**
+ * Genus Species select category view
+ */
+export const GENUS_SPECIES = {
+    key: "genusSpecies",
+    label: "Genus Species",
+    values: [HOMO_SAPIENS, MUS_MUSCLES],
+};
+/**
+ * Donor Count range category view
+ */
+export const DONOR_COUNT = {
+    key: "Donor Count",
+    label: "Donor Count",
+    max: 200,
+    min: 10,
+    selectedMax: null,
+    selectedMin: null,
+};
+/**
+ * File Format select category view
+ */
+export const FILE_FORMAT = {
+    key: "fileFormat",
+    label: "File Format",
+    values: [BAM, CSV, FASTQ, TSV],
+};
+/**
+ * File Type select category view
+ */
+export const FILE_TYPE = {
+    isDisabled: true,
+    key: "fileType",
+    label: "File Type",
+    values: [RAW, PROCESSED],
+};

package/lib/components/Filter/components/Filters/stories/filters.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Filters } from "../filters";
+declare const meta: Meta<typeof Filters>;
+export default meta;
+type Story = StoryObj<typeof Filters>;
+export declare const Default: Story;

package/lib/components/Filter/components/Filters/stories/filters.stories.js

@@ -0,0 +1,15 @@
+import { Box } from "@mui/material";
+import React from "react";
+import { Filters } from "../filters";
+import { DEFAULT_ARGS } from "./args";
+const meta = {
+    component: Filters,
+    decorators: [
+        (Story) => (React.createElement(Box, { sx: { width: 264 } },
+            React.createElement(Story, null))),
+    ],
+};
+export default meta;
+export const Default = {
+    args: DEFAULT_ARGS,
+};

package/lib/components/Filter/components/SearchAllFilters/components/VariableSizeList/VariableSizeList.d.ts

@@ -6,12 +6,12 @@ import { OnFilterFn } from "../../../../../../hooks/useCategoryFilter";
 export type ItemSizeByItemKey = Map<string, number>;
 export interface VariableSizeListProps {
     autocompleteListProps: Omit<MListProps, "children">;
-    categoryViews: SelectCategoryView[];
     height?: number;
     itemSize?: number;
     onFilter: OnFilterFn;
     overscanCount?: ListProps["overscanCount"];
     searchTerm: string;
+    selectCategoryViews: SelectCategoryView[];
     width?: ListProps["width"];
 }
 export declare const VariableSizeList: React.ForwardRefExoticComponent<VariableSizeListProps & React.RefAttributes<HTMLUListElement>>;

package/lib/components/Filter/components/SearchAllFilters/components/VariableSizeList/VariableSizeList.js

@@ -33,8 +33,8 @@ const OuterElement = forwardRef(function OuterElement({ children, ...props }, re
     return (React.createElement("div", { ref: ref, ...props },
         React.createElement(MList, { ref: autocompleteListRef, style: { maxHeight: "none", padding: 0 }, ...autocompleteListProps }, children)));
 });
-export const VariableSizeList = forwardRef(function VariableSizeList({ autocompleteListProps, categoryViews, height: initHeight = MAX_LIST_HEIGHT_PX, itemSize = LIST_ITEM_HEIGHT, onFilter, overscanCount = MAX_DISPLAYABLE_LIST_ITEMS * 2, searchTerm, width = "100%", }, autocompleteListRef) {
-    const filteredItems = applyMenuFilter(categoryViews, searchTerm);
+export const VariableSizeList = forwardRef(function VariableSizeList({ autocompleteListProps, height: initHeight = MAX_LIST_HEIGHT_PX, itemSize = LIST_ITEM_HEIGHT, onFilter, overscanCount = MAX_DISPLAYABLE_LIST_ITEMS * 2, searchTerm, selectCategoryViews, width = "100%", }, autocompleteListRef) {
+    const filteredItems = applyMenuFilter(selectCategoryViews, searchTerm);
     let resizeRequired = true;
     const desktopSmDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
     const { height: windowHeight } = useWindowResize();
@@ -81,13 +81,13 @@ export const VariableSizeList = forwardRef(function VariableSizeList({ autocompl
 });
 /**
  * Filter categories' values by a search term and return model of list items
- * @param categoryViews - Select category views
+ * @param selectCategoryViews - Select category views
  * @param inputValue - Search term
  * @returns array of objects representing list items to be rendered
  */
-function applyMenuFilter(categoryViews, inputValue) {
+function applyMenuFilter(selectCategoryViews, inputValue) {
     const sortMatches = getSortMatchesFn(inputValue);
-    const filteredItems = categoryViews.reduce((filteredItems, category) => {
+    const filteredItems = selectCategoryViews.reduce((filteredItems, category) => {
         if (!category.isDisabled) {
             const categoryValueKeyPrefix = "value_" + category.key.replaceAll(";", ";;") + ";_"; // Terminating the category key with a semicolon (and escaping preceding semicolons) ensures a unique prefix
             const filteredCategoryValues = sortMatches(category.values).map((match) => ({

package/lib/components/Filter/components/SearchAllFilters/components/VariableSizeListItem/variableSizeListItem.js

@@ -1,5 +1,6 @@
 import { Checkbox, ListItemButton, ListItemText, ListSubheader, Typography, } from "@mui/material";
 import React, { useEffect, useRef } from "react";
+import { VIEW_KIND } from "../../../../../../common/categories/views/types";
 import { TEST_IDS } from "../../../../../../tests/testIds";
 import { TEXT_BODY_SMALL_400 } from "../../../../../../theme/common/typography";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
@@ -19,7 +20,7 @@ export default function VariableSizeListItem({ item, onFilter, onUpdateItemSizeB
     }, [key, onUpdateItemSizeByItemKey]);
     if (item.type === ITEM_TYPE.VALUE) {
         const { categoryKey, matchRanges, value: { count, key: valueKey, label, selected }, } = item;
-        return (React.createElement(ListItemButton, { "data-testid": TEST_IDS.FILTER_ITEM, ref: setRef, key: key, onClick: () => onFilter(categoryKey, valueKey, !selected, undefined, searchTerm), selected: selected, style: style },
+        return (React.createElement(ListItemButton, { "data-testid": TEST_IDS.FILTER_ITEM, ref: setRef, key: key, onClick: () => onFilter(categoryKey, valueKey, !selected, undefined, VIEW_KIND.SELECT, searchTerm), selected: selected, style: style },
             React.createElement(Checkbox, { checked: selected, checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null) }),
             React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(HighlightedLabel, { label: label, ranges: matchRanges, testId: TEST_IDS.FILTER_TERM }), secondary: React.createElement(Typography, { color: "ink.light", "data-testid": TEST_IDS.FILTER_COUNT, variant: TEXT_BODY_SMALL_400 }, count) })));
     }

package/lib/components/Filter/components/SearchAllFilters/searchAllFilters.d.ts

@@ -1,18 +1,19 @@
 import React from "react";
+import { CategoryView } from "../../../../common/categories/views/types";
 import { SelectCategoryView } from "../../../../common/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 export interface SearchAllFiltersProps {
-    categoryViews: SelectCategoryView[];
+    categoryViews: CategoryView[];
     drawerOpen?: boolean;
     onFilter: OnFilterFn;
 }
 interface ListboxContextValue {
-    categoryViews: SelectCategoryView[];
     onClearSearch: () => void;
     onCloseSearch: () => void;
     onFilter: OnFilterFn;
     open: boolean;
     searchTerm: string;
+    selectCategoryViews: SelectCategoryView[];
 }
 export declare const ListboxContext: React.Context<ListboxContextValue>;
 export declare const SearchAllFilters: ({ categoryViews, drawerOpen, onFilter, }: SearchAllFiltersProps) => JSX.Element;

package/lib/components/Filter/components/SearchAllFilters/searchAllFilters.js

@@ -1,4 +1,5 @@
 import React, { createContext, useContext, useEffect, useRef, useState, } from "react";
+import { isSelectCategoryView } from "../../../../common/categories/views/select/typeGuards";
 import { SELECTOR } from "../../../../common/selectors";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
 import { TEST_IDS } from "../../../../tests/testIds";
@@ -13,25 +14,26 @@ import { VariableSizeList } from "./components/VariableSizeList/VariableSizeList
 import { Autocomplete } from "./searchAllFilters.styles";
 const renderInput = (params) => (React.createElement(SearchAllFiltersSearch, { ...params }));
 export const ListboxContext = createContext({
-    categoryViews: [],
     onClearSearch: () => undefined,
     onCloseSearch: () => undefined,
     onFilter: () => undefined,
     open: false,
     searchTerm: "",
+    selectCategoryViews: [],
 });
 const Listbox = React.forwardRef(function Listbox(props, ref) {
     props = Object.assign({}, props, {
         children: undefined, // Content is controlled by VariableSizeList
     });
-    const { categoryViews, onFilter, searchTerm } = useContext(ListboxContext);
-    return (React.createElement(VariableSizeList, { autocompleteListProps: props, categoryViews: categoryViews, onFilter: onFilter, ref: ref, searchTerm: searchTerm }));
+    const { onFilter, searchTerm, selectCategoryViews } = useContext(ListboxContext);
+    return (React.createElement(VariableSizeList, { autocompleteListProps: props, onFilter: onFilter, ref: ref, searchTerm: searchTerm, selectCategoryViews: selectCategoryViews }));
 });
 export const SearchAllFilters = ({ categoryViews, drawerOpen = false, onFilter, }) => {
     const desktopSmUp = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
     const autocompleteRef = useRef(null);
     const [open, setOpen] = useState(false);
     const [searchTerm, setSearchTerm] = useState("");
+    const selectCategoryViews = categoryViews.filter((view) => isSelectCategoryView(view));
     // Handles background scroll action (desktop only).
     const handleBackgroundScroll = (overflowStyle) => {
         if (desktopSmUp) {
@@ -79,12 +81,12 @@ export const SearchAllFilters = ({ categoryViews, drawerOpen = false, onFilter,
         }
     }, [drawerOpen]);
     return (React.createElement(ListboxContext.Provider, { value: {
-            categoryViews,
             onClearSearch,
             onCloseSearch,
             onFilter,
             open,
             searchTerm,
+            selectCategoryViews,
         } },
         React.createElement(Autocomplete, { clearOnBlur: desktopSmUp, "data-testid": TEST_IDS.SEARCH_ALL_FILTERS, filterOptions: (options) => options, freeSolo: true, ListboxComponent: Listbox, onBlur: desktopSmUp ? onCloseSearch : undefined, onClose: desktopSmUp ? onCloseSearch : undefined, onFocus: onOpenSearch, onOpen: onOpen, open: open, options: [""], PopperComponent: AutocompletePopper, ref: autocompleteRef, renderInput: (props) => renderInput({
                 ...props,

package/lib/components/Filter/components/VariableSizeListItem/variableSizeListItem.js

@@ -1,5 +1,6 @@
 import { Checkbox, ListItemButton, ListItemText, Typography, } from "@mui/material";
 import React, { useEffect, useRef } from "react";
+import { VIEW_KIND } from "../../../../common/categories/views/types";
 import { SELECT_CATEGORY_KEY } from "../../../../providers/exploreState/constants";
 import { TEST_IDS } from "../../../../tests/testIds";
 import { TEXT_BODY_SMALL_400 } from "../../../../theme/common/typography";
@@ -15,7 +16,7 @@ export default function VariableSizeListItem({ categoryKey, categorySection, mat
         onUpdateItemSizeByItemKey(key, listItemRef.current?.clientHeight || 0);
     }, [key, onUpdateItemSizeByItemKey]);
     const handleItemClicked = () => {
-        onFilter(categoryKey, key, !selected, categorySection);
+        onFilter(categoryKey, key, !selected, categorySection, VIEW_KIND.SELECT);
     };
     return (React.createElement(ListItemButton, { "data-testid": TEST_IDS.FILTER_ITEM, ref: listItemRef, onClick: handleItemClicked, selected: selected, style: style },
         React.createElement(Checkbox, { checked: selected, checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null) }),

package/lib/components/Index/components/EntitiesView/components/ChartView/utils.js

@@ -1,3 +1,4 @@
+import { isSelectCategoryView } from "../../../../../../common/categories/views/select/typeGuards";
 /**
  * Returns the set of select category views that have chart view enabled.
  * @param categoryFilters - Category filters.
@@ -6,6 +7,7 @@
 export function getSelectCategoryViews(categoryFilters) {
     return categoryFilters
         .flatMap(({ categoryViews }) => categoryViews)
+        .filter(isSelectCategoryView)
         .filter(({ enableChartView = true }) => enableChartView)
         .filter(({ values }) => values.length > 0);
 }

package/lib/components/Index/table/hook.js

@@ -10,6 +10,7 @@ import { DEFAULT_PAGINATION_STATE } from "../../../providers/exploreState/initia
 import { arrIncludesSome } from "../../Table/columnDef/columnFilters/filterFn";
 import { COLUMN_DEF } from "../../Table/common/columnDef";
 import { buildCategoryViews, getFacetedUniqueValuesWithArrayValues, getTableStatePagination, 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 { buildBaseColumnDef } from "../../TableCreator/common/utils";
@@ -105,6 +106,9 @@ export const useTable = () => {
         enableMultiSort: clientFiltering, // TODO(cc) move to sorting options; default to false and let the table options in config flag this value.
         filterFns: { arrIncludesSome },
         getCoreRowModel: getCoreRowModel(),
+        getFacetedMinMaxValues: clientFiltering
+            ? getFacetedMinMaxValues()
+            : undefined,
         getFacetedRowModel: clientFiltering ? getFacetedRowModel() : undefined,
         getFacetedUniqueValues: clientFiltering
             ? getFacetedUniqueValuesWithArrayValues()

package/lib/components/Table/columnDef/accessorFn/typeGuards.d.ts

@@ -0,0 +1,9 @@
+import { RowData } from "@tanstack/react-table";
+/**
+ * Type guard to check if a row has a specific key.
+ * Useful for generic accessor functions.
+ * @param row - The row to check.
+ * @param key - The key to check.
+ * @returns True if the row has the specified key, false otherwise.
+ */
+export declare function rowHasKey<T extends RowData, K extends PropertyKey, TValue>(row: T, key: K): row is T & Record<K, TValue>;

package/lib/components/Table/columnDef/accessorFn/typeGuards.js

@@ -0,0 +1,10 @@
+/**
+ * Type guard to check if a row has a specific key.
+ * Useful for generic accessor functions.
+ * @param row - The row to check.
+ * @param key - The key to check.
+ * @returns True if the row has the specified key, false otherwise.
+ */
+export function rowHasKey(row, key) {
+    return row != null && typeof row === "object" && key in row;
+}

package/lib/components/Table/common/utils.d.ts

@@ -1,5 +1,5 @@
 import { Cell, Column, ColumnFiltersState, PaginationState, Row, RowData, Table } from "@tanstack/react-table";
-import { SelectCategory } from "../../../common/entities";
+import { Category } from "../../../common/categories/models/types";
 import { ExploreMode } from "../../../hooks/useExploreMode/types";
 /**
  * Internal model of a category term count keyed by category term.
@@ -15,7 +15,7 @@ type PinnedCell<T extends RowData> = [Cell<T, unknown>, number];
  * @param columnFilters - Column filters state.
  * @returns Array of category views objects.
  */
-export declare function buildCategoryViews<T extends RowData>(columns: Column<T>[], columnFilters: ColumnFiltersState): SelectCategory[];
+export declare function buildCategoryViews<T extends RowData>(columns: Column<T>[], columnFilters: ColumnFiltersState): Category[];
 /**
  * Returns filtered entity results as a blob.
  * @param rows - Table rows.

package/lib/components/Table/common/utils.js

@@ -10,23 +10,38 @@ import { COLUMN_IDENTIFIER } from "./columnIdentifier";
 export function buildCategoryViews(columns, columnFilters) {
     const categoryViews = [];
     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;
-            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/lib/components/Table/components/TableCell/components/ChipCell/chipCell.d.ts

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

package/lib/components/Table/components/TableCell/components/ChipCell/chipCell.js

@@ -0,0 +1,8 @@
+import { Chip } from "@mui/material";
+import React from "react";
+export const ChipCell = ({ getValue, }) => {
+    const props = getValue();
+    if (!props)
+        return null;
+    return React.createElement(Chip, { ...props });
+};

package/lib/components/Table/components/TableCell/components/LinkCell/linkCell.d.ts

@@ -0,0 +1,4 @@
+import { LinkProps } from "@mui/material";
+import { CellContext, RowData } from "@tanstack/react-table";
+import { BaseComponentProps } from "components/types";
+export declare const LinkCell: <T extends RowData, TValue extends LinkProps = LinkProps>({ getValue, }: BaseComponentProps & CellContext<T, TValue>) => JSX.Element | null;