@databiosphere/findable-ui 29.0.2 → 31.0.0

package/lib/components/Table/components/TableCell/components/MarkdownCell/markdownCell.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { COMPONENTS } from "../../../../../MarkdownRenderer/constants";
+import { StyledMarkdownRenderer } from "./markdownCell.styles";
+export const MarkdownCell = ({ className, column, getValue, }) => {
+    const props = getValue();
+    if (!props)
+        return null;
+    const { values } = props;
+    const columnDef = column?.columnDef;
+    const columnMeta = columnDef?.meta;
+    const components = columnMeta?.components;
+    return (React.createElement(StyledMarkdownRenderer, { className: className, components: { ...COMPONENTS, ...components }, value: values }));
+};

package/lib/components/Table/components/TableCell/components/MarkdownCell/markdownCell.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledMarkdownRenderer: import("@emotion/styled").StyledComponent<import("../../../../../MarkdownRenderer/types").MarkdownRendererProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Table/components/TableCell/components/MarkdownCell/markdownCell.styles.js

@@ -0,0 +1,30 @@
+import styled from "@emotion/styled";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+import { MarkdownRenderer } from "../../../../../MarkdownRenderer/markdownRenderer";
+export const StyledMarkdownRenderer = styled(MarkdownRenderer) `
+  align-self: flex-start;
+
+  code {
+    all: unset;
+    font: inherit;
+    font-family: Roboto Mono, monospace;
+  }
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 8px 0;
+  }
+
+  hr {
+    border: none;
+    border-bottom: 1px solid ${PALETTE.SMOKE_MAIN};
+    margin: 16px 0;
+  }
+
+  p {
+    font: inherit;
+  }
+`;

package/lib/components/Table/components/TableCell/components/MarkdownCell/stories/args.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps } from "react";
+import { MarkdownCell } from "../markdownCell";
+export declare const DEFAULT_ARGS: Partial<ComponentProps<typeof MarkdownCell>>;
+export declare const WITH_HTML_ARGS: Partial<ComponentProps<typeof MarkdownCell>>;

package/lib/components/Table/components/TableCell/components/MarkdownCell/stories/args.js

@@ -0,0 +1,10 @@
+export const DEFAULT_ARGS = {
+    getValue: (() => ({
+        values: '| Key | Annotator | Value |\n| --- | --- | --- |\n| `tissue_ontology_term_id` | Curator | categorical with `str` categories. This **MUST** be the UBERON or CL term that best describes the tissue the cell was derived from, depending on the sample type. |\n\n**Mapping guidance**\n\n| For | Use |\n| --- | --- |\n| Tissue | STRONGLY RECOMMENDED to be an UBERON term&nbsp;<br />(e.g. [`UBERON:0008930`](http://purl.obolibrary.org/obo/UBERON_0008930) for a *somatosensory cortex* tissue sample) |\n| Cell culture | MUST be a CL term appended with \\" (cell culture)\\"&nbsp;<br />(e.g. [`CL:0000057`](http://purl.obolibrary.org/obo/CL_0000057) **(cell culture)** for the *WTC-11* cell line) |\n| Organoid | MUST be an UBERON term appended with \\" (organoid)\\"&nbsp;<br />(e.g. [`UBERON:0000955`](http://purl.obolibrary.org/obo/UBERON_0000955) **(organoid)** for a *brain organoid*) |\n| Enriched / sorted / isolated cells from a tissue | MUST be an UBERON or CL term and **SHOULD NOT** use terms that do not capture the tissue of origin.<br /><br />• *CD3+ kidney cells* → [`UBERON:0002113`](https://www.ebi.ac.uk/ols/ontologies/uberon/terms?iri=http://purl.obolibrary.org/obo/UBERON_0002113) (*kidney*) instead of [`CL:000084`](https://www.ebi.ac.uk/ols/ontologies/cl/terms?iri=http://purl.obolibrary.org/obo/CL_0000084) (*T cell*).<br />• *EPCAM+ cervical cells* → [`CL:0000066`](https://www.ebi.ac.uk/ols/ontologies/cl/terms?iri=http://purl.obolibrary.org/obo/CL_0000066) (*epithelial cell* of the cervix). |\n\n---\n\nWhen a dataset is uploaded, the **cellxgene Data Portal** MUST automatically add the matching human-readable name for the corresponding ontology term to the `obs` dataframe. Curators **MUST NOT** annotate the following columns.\n\n### `assay`\n\n| Key | Annotator | Value |\n| --- | --- | --- |\n| `assay` | Data Portal | categorical with `str` categories. This **MUST** be the human-readable name assigned to the value of `assay_ontology_term_id`. |',
+    })),
+};
+export const WITH_HTML_ARGS = {
+    getValue: (() => ({
+        values: "Hello <br />World <a href='https://www.example.com'>example link</a>",
+    })),
+};

package/lib/components/Table/components/TableCell/components/MarkdownCell/stories/constants.d.ts

@@ -0,0 +1,5 @@
+import { Anchor } from "../../../../../../MarkdownRenderer/components/Anchor/anchor";
+/**
+ * Styled anchor component for testing purposes.
+ */
+export declare const STYLED_ANCHOR: typeof Anchor;

package/lib/components/Table/components/TableCell/components/MarkdownCell/stories/constants.js

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+import { Anchor } from "../../../../../../MarkdownRenderer/components/Anchor/anchor";
+/**
+ * Styled anchor component for testing purposes.
+ */
+export const STYLED_ANCHOR = styled(Anchor) `
+  background-color: green;
+  color: white;
+`;

package/lib/components/Table/components/TableCell/components/MarkdownCell/stories/markdownCell.stories.d.ts

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

package/lib/components/Table/components/TableCell/components/MarkdownCell/stories/markdownCell.stories.js

@@ -0,0 +1,25 @@
+import { Box } from "@mui/material";
+import React from "react";
+import { PALETTE } from "../../../../../../../styles/common/constants/palette";
+import { MarkdownCell } from "../markdownCell";
+import { DEFAULT_ARGS, WITH_HTML_ARGS } from "./args";
+const meta = {
+    component: MarkdownCell,
+    decorators: [
+        (Story) => (React.createElement(Box, { sx: {
+                backgroundColor: PALETTE.COMMON_WHITE,
+                fontSize: "14px",
+                lineHeight: "20px",
+                padding: 3,
+                width: 480,
+            } },
+            React.createElement(Story, null))),
+    ],
+};
+export default meta;
+export const Default = {
+    args: DEFAULT_ARGS,
+};
+export const WithHtml = {
+    args: WITH_HTML_ARGS,
+};

package/lib/components/Table/components/TableCell/components/MarkdownCell/stories/types.d.ts

@@ -0,0 +1,3 @@
+import { CellContext, RowData } from "@tanstack/react-table";
+import { MarkdownCellProps } from "../types";
+export type GetValue = CellContext<RowData, MarkdownCellProps>["getValue"];

package/lib/components/Table/components/TableCell/components/MarkdownCell/stories/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Table/components/TableCell/components/MarkdownCell/types.d.ts

@@ -0,0 +1,3 @@
+export type MarkdownCellProps = {
+    values: string;
+};

package/lib/components/Table/components/TableCell/components/MarkdownCell/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Table/featureOptions/facetedColumn/getFacetedMinMaxValues.d.ts

@@ -0,0 +1,8 @@
+import { 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 declare function getFacetedMinMaxValues<TData extends RowData>(): (table: Table<TData>, columnId: string) => () => undefined | [number, number];

package/lib/components/Table/featureOptions/facetedColumn/getFacetedMinMaxValues.js

@@ -0,0 +1,46 @@
+import { getMemoOptions, memo } 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() {
+    // 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 = [Infinity, -Infinity];
+        for (let i = 0; i < facetedRowModel.flatRows.length; i++) {
+            const values = facetedRowModel.flatRows[i].getUniqueValues(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/lib/components/common/Link/typeGuards.d.ts

@@ -0,0 +1,13 @@
+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 declare function assertAnchorRelAttribute(value: string): asserts value is 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 declare function assertAnchorTargetAttribute(value: string): asserts value is ANCHOR_TARGET;

package/lib/components/common/Link/typeGuards.js

@@ -0,0 +1,21 @@
+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) {
+    if (!Object.values(REL_ATTRIBUTE).includes(value)) {
+        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) {
+    if (!Object.values(ANCHOR_TARGET).includes(value)) {
+        throw new Error(`Expecting anchor target: ${value} to be one of ${Object.values(ANCHOR_TARGET)}`);
+    }
+}

package/lib/config/entities.d.ts

@@ -1,7 +1,8 @@
 import { TabProps as MTabProps, Theme, ThemeOptions } from "@mui/material";
 import { CellContext, ColumnDef, ColumnMeta, ColumnSort, GroupingState, RowData, Table, TableOptions } from "@tanstack/react-table";
 import { JSXElementConstructor, ReactNode } from "react";
-import { DataDictionaryAnnotation, DataDictionaryConfig, SelectCategoryValueView, SelectedFilter } from "../common/entities";
+import { CategoryConfig } from "../common/categories/config/types";
+import { DataDictionaryAnnotation, DataDictionaryConfig, SelectedFilter } from "../common/entities";
 import { HeroTitle } from "../components/common/Title/title";
 import { FooterProps } from "../components/Layout/components/Footer/footer";
 import { HeaderProps } from "../components/Layout/components/Header/header";
@@ -66,16 +67,6 @@ export interface CategoryGroup {
     categoryConfigs: CategoryConfig[];
     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/lib/hooks/useCategoryFilter.d.ts

@@ -1,21 +1,15 @@
-import { CategoryKey, CategoryValueKey, Filters, SelectCategory, SelectCategoryValue, SelectCategoryView } from "../common/entities";
-import { CategoryConfig } from "../config/entities";
+import { CategoryConfig } from "../common/categories/config/types";
+import { Category } from "../common/categories/models/types";
+import { CategoryView, VIEW_KIND } from "../common/categories/views/types";
+import { CategoryKey, CategoryValueKey, Filters, SelectCategoryValue } from "../common/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.
  */
-export type OnFilterFn = (categoryKey: CategoryKey, selectedCategoryValue: CategoryValueKey, selected: boolean, categorySection?: string, searchTerm?: string) => void;
+export type OnFilterFn = (categoryKey: CategoryKey, selectedCategoryValue: CategoryValueKey, selected: boolean, categorySection?: string, viewKind?: VIEW_KIND, searchTerm?: string) => void;
 /**
  * Build view-specific models from filter state, to facilitate easy rendering.
  * @param categories - Categories, category value and their counts with the current filter applied.
@@ -23,16 +17,17 @@ export type OnFilterFn = (categoryKey: CategoryKey, selectedCategoryValue: Categ
  * @param filterState - Current set of selected category and category values.
  * @returns Array of category view objects.
  */
-export declare function buildCategoryViews(categories: SelectCategory[], categoryConfigs: CategoryConfig[] | undefined, filterState: FilterState): SelectCategoryView[];
+export declare function buildCategoryViews(categories: Category[], categoryConfigs: CategoryConfig[] | undefined, filterState: FilterState): CategoryView[];
 /**
  * Build new set of selected filters on de/select of filter.
  * @param filterState - Current set of selected category and category values.
  * @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 declare function buildNextFilterState(filterState: FilterState, categoryKey: CategoryKey, selectedValue: CategoryValueKey, selected: boolean): FilterState;
+export declare function buildNextFilterState(filterState: FilterState, categoryKey: CategoryKey, selectedValue: CategoryValueKey, selected: boolean, viewKind?: VIEW_KIND): FilterState;
 /**
  * Default function returning select category value, unmodified.
  * @param selectCategoryValue - Select category value.

package/lib/hooks/useCategoryFilter.js

@@ -1,3 +1,9 @@
+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 { buildRangeCategoryView } from "../common/categories/views/range/utils";
+import { VIEW_KIND } from "../common/categories/views/types";
 import { COLLATOR_CASE_INSENSITIVE } from "../common/constants";
 /**
  * Build the view-specific model of the given category value.
@@ -17,22 +23,22 @@ function buildCategoryValueView(categoryValue, categorySelectedFilter) {
     };
 }
 /**
- * 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, categoryValueViews, categoryConfigs) {
-    const categoryConfig = findCategoryConfig(category.key, categoryConfigs);
-    const mapSelectCategoryValue = categoryConfig?.mapSelectCategoryValue || getSelectCategoryValue;
+function buildCategoryView(selectCategory, selectCategoryValueViews, categoryConfigs) {
+    const selectCategoryConfig = findSelectCategoryConfig(selectCategory.key, categoryConfigs);
+    const mapSelectCategoryValue = 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),
     };
 }
 /**
@@ -52,7 +58,11 @@ export function buildCategoryViews(categories, categoryConfigs, filterState) {
     const views = acceptListCategories.map((category) => {
         // Get the set of selected values for this category, if any.
         const categorySelectedFilter = getCategorySelectedFilter(category.key, 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));
         categoryValueViews.sort(sortCategoryValueViews);
         // Build category view model.
@@ -68,9 +78,10 @@ export function buildCategoryViews(categories, categoryConfigs, filterState) {
  * @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, categoryKey, selectedValue, selected) {
+export function buildNextFilterState(filterState, categoryKey, selectedValue, selected, viewKind) {
     // Check if the selected category already has selected values.
     const categorySelectedFilter = getCategorySelectedFilter(categoryKey, filterState);
     // Create a copy of the current filter state. Remove the selected filter for the selected category, if any.
@@ -80,13 +91,14 @@ export function buildNextFilterState(filterState, categoryKey, selectedValue, se
         categoryKey,
         value: categorySelectedFilter ? [...categorySelectedFilter.value] : [],
     };
-    // Handle case where category value is selected.
-    if (selected) {
-        nextCategorySelectedFilter.value.push(selectedValue);
+    // Build next filter state for category.
+    if (viewKind === VIEW_KIND.RANGE) {
+        // Handle range category.
+        buildNextRangeFilterState(nextCategorySelectedFilter, selectedValue, selected);
     }
-    // Otherwise, category value has been de-selected; remove the selected value from the selected set of values.
     else {
-        nextCategorySelectedFilter.value = nextCategorySelectedFilter.value.filter((value) => value !== selectedValue);
+        // Handle select category.
+        buildNextSelectFilterState(nextCategorySelectedFilter, selectedValue, selected);
     }
     // Add the new selected filter for this category to the set of selected filters, if there are selected values for it.
     if (nextCategorySelectedFilter.value.length) {
@@ -123,15 +135,6 @@ function getCategoryLabel(key, categoryConfig) {
 export function getSelectCategoryValue(selectCategoryValue) {
     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, categoryConfigs) {
-    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.

package/lib/providers/exploreState/entities.d.ts

@@ -1,7 +1,9 @@
 import { ColumnSort, GroupingState, RowSelectionState, VisibilityState } from "@tanstack/react-table";
-import { CategoryValueKey, SelectCategory, SelectCategoryView, SelectedFilter } from "../../common/entities";
+import { CategoryConfig } from "../../common/categories/config/types";
+import { CategoryView } from "../../common/categories/views/types";
+import { CategoryValueKey, SelectCategory, SelectedFilter } from "../../common/entities";
 import { RowPreviewState } from "../../components/Table/features/RowPreview/entities";
-import { CategoryConfig, CategoryGroup, CategoryGroupConfig, EntityPath, SavedFilter } from "../../config/entities";
+import { CategoryGroup, CategoryGroupConfig, EntityPath, SavedFilter } from "../../config/entities";
 export interface EntityPageState {
     categoryGroupConfigKey: CategoryGroupConfigKey;
     columnVisibility: VisibilityState;
@@ -17,7 +19,7 @@ export interface EntityPageStateMapper {
 export interface EntityState {
     categoryConfigs?: CategoryConfig[];
     categoryGroups?: CategoryGroup[];
-    categoryViews: SelectCategoryView[];
+    categoryViews: CategoryView[];
     filterState: SelectedFilter[];
     savedFilterByCategoryValueKey?: SavedFilterByCategoryValueKey;
     savedFilterState: SelectedFilter[];

package/lib/providers/exploreState/payloads/entities.d.ts

@@ -1,5 +1,7 @@
 import { ColumnSort, GroupingState, RowSelectionState } from "@tanstack/react-table";
-import { CategoryKey, CategoryValueKey, PaginationDirectionType, SelectCategory, SelectedFilter } from "../../../common/entities";
+import { Category } from "../../../common/categories/models/types";
+import { VIEW_KIND } from "../../../common/categories/views/types";
+import { CategoryKey, CategoryValueKey, PaginationDirectionType, SelectedFilter } from "../../../common/entities";
 import { RowPreviewState } from "../../../components/Table/features/RowPreview/entities";
 import { ListItems, PaginationResponse } from "../../exploreState";
 import { ListItem } from "../entities";
@@ -10,6 +12,7 @@ export interface ApplySavedFilterPayload {
     categoryKey: CategoryKey;
     selected: boolean;
     selectedValue: CategoryValueKey;
+    viewKind?: VIEW_KIND;
 }
 /**
  * Paginate table payload.
@@ -29,7 +32,7 @@ export interface ProcessExploreResponsePayload {
     listItems: ListItems;
     loading: boolean;
     paginationResponse: PaginationResponse;
-    selectCategories?: SelectCategory[];
+    selectCategories?: Category[];
 }
 /**
  * Reset explore response payload.
@@ -57,6 +60,7 @@ export interface UpdateFilterPayload {
     categoryKey: CategoryKey;
     selected: boolean;
     selectedValue: CategoryValueKey;
+    viewKind?: VIEW_KIND;
 }
 /**
  * Update row preview payload.

package/lib/providers/exploreState.d.ts

@@ -1,6 +1,7 @@
 import React, { Dispatch, ReactNode } from "react";
 import { AzulSearchIndex } from "../apis/azul/common/entities";
-import { SelectCategoryView, SelectedFilter } from "../common/entities";
+import { CategoryView } from "../common/categories/views/types";
+import { SelectedFilter } from "../common/entities";
 import { RowPreviewState } from "../components/Table/features/RowPreview/entities";
 import { CategoryGroup, SiteConfig } from "../config/entities";
 import { UpdateGroupingAction } from "./exploreState/actions/updateGrouping/types";
@@ -21,7 +22,7 @@ export interface ExploreContext {
 export type ExploreState = {
     catalogState: CatalogState;
     categoryGroups?: CategoryGroup[];
-    categoryViews: SelectCategoryView[];
+    categoryViews: CategoryView[];
     entityPageState: EntityPageStateMapper;
     entityStateByCategoryGroupConfigKey: EntityStateByCategoryGroupConfigKey;
     featureFlagState: FeatureFlagState;

package/lib/providers/exploreState.js

@@ -277,7 +277,7 @@ function exploreReducer(state, action, exploreContext) {
          * Update filter
          **/
         case ExploreActionKind.UpdateFilter: {
-            const filterState = buildNextFilterState(state.filterState, payload.categoryKey, payload.selectedValue, payload.selected);
+            const filterState = buildNextFilterState(state.filterState, payload.categoryKey, payload.selectedValue, payload.selected, payload.viewKind);
             const rowPreview = closeRowPreview(state.rowPreview);
             const rowSelection = {};
             const savedFilterState = []; // Clear saved filter state.

package/lib/styles/common/mui/typography.js

@@ -1,4 +1,5 @@
 const COLOR = {
+    ERROR: "error",
     INHERIT: "inherit",
     INK_LIGHT: "ink.light",
     INK_MAIN: "ink.main",

package/lib/tests/utils.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Retrieves a button by its name.
+ * @param name - The name of the button.
+ * @returns The button element.
+ */
+export declare function getButton<T extends HTMLElement = HTMLElement>(name: string | RegExp): T;
+/**
+ * Retrieves an input element by its label text.
+ * @param text - The label text of the input element.
+ * @returns The input element.
+ */
+export declare function getLabelText<T extends HTMLElement = HTMLElement>(text: string): T;
+/**
+ * Returns regex that matches the start of the given text.
+ * @param text - Text to match.
+ * @returns RegExp.
+ */
+export declare function getStartsWithRegex(text: string): RegExp;
+/**
+ * Retrieves an element by its text content.
+ * @param text - The text content of the element.
+ * @returns The element.
+ */
+export declare function getText<T extends HTMLElement = HTMLElement>(text: string | RegExp): T;

package/lib/tests/utils.js

@@ -0,0 +1,34 @@
+import { screen } from "@testing-library/react";
+import { escapeRegExp } from "../common/utils";
+/**
+ * Retrieves a button by its name.
+ * @param name - The name of the button.
+ * @returns The button element.
+ */
+export function getButton(name) {
+    return screen.getByRole("button", { name });
+}
+/**
+ * Retrieves an input element by its label text.
+ * @param text - The label text of the input element.
+ * @returns The input element.
+ */
+export function getLabelText(text) {
+    return screen.getByLabelText(text);
+}
+/**
+ * Returns regex that matches the start of the given text.
+ * @param text - Text to match.
+ * @returns RegExp.
+ */
+export function getStartsWithRegex(text) {
+    return new RegExp(`^${escapeRegExp(text)}`);
+}
+/**
+ * Retrieves an element by its text content.
+ * @param text - The text content of the element.
+ * @returns The element.
+ */
+export function getText(text) {
+    return screen.getByText(text);
+}

package/lib/theme/common/components.js

@@ -388,6 +388,14 @@ export const MuiChip = (theme) => {
             },
             label: {
                 ...theme.typography[TEXT_BODY_SMALL_400],
+                variants: [
+                    {
+                        props: { variant: "status" },
+                        style: {
+                            ...theme.typography[TEXT_BODY_SMALL_500],
+                        },
+                    },
+                ],
             },
         },
         variants: [
@@ -467,13 +475,18 @@ export const MuiChip = (theme) => {
             {
                 props: { variant: "status" },
                 style: {
-                    ...theme.typography[TEXT_BODY_SMALL_500],
                     boxShadow: `0 0 0 2px ${PALETTE.COMMON_WHITE}`,
                     height: 20,
                     maxWidth: "fit-content",
                     minWidth: 0,
                 },
             },
+            {
+                props: { color: "default", variant: "status" },
+                style: {
+                    color: PALETTE.INK_LIGHT,
+                },
+            },
         ],
     };
 };
@@ -858,6 +871,11 @@ export const MuiLink = {
             textDecorationSkipInk: "none",
             textUnderlinePosition: "from-font",
         },
+        underlineNone: {
+            "&:hover": {
+                textDecoration: "none",
+            },
+        },
     },
 };
 /**