@databiosphere/findable-ui 2.1.0 → 2.2.0

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { TrackFilterOpenedFunction } from "config/entities";
 import { SelectCategoryView } from "../../../../common/entities";
+import { TrackFilterOpenedFunction } from "../../../../config/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 export interface CategoryFilter {
     categoryViews: SelectCategoryView[];

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

@@ -10,7 +10,7 @@ const breakpoints_1 = require("../../../../styles/common/mixins/breakpoints");
 const colors_1 = require("../../../../styles/common/mixins/colors");
 const fonts_1 = require("../../../../styles/common/mixins/fonts");
 exports.Filters = (0, styled_1.default)("div", {
-    shouldForwardProp: (prop) => prop !== "height",
+    shouldForwardProp: (prop) => prop !== "height" && prop !== "isBaseStyle",
 }) `
   ${(props) => (props.isBaseStyle ? (0, fonts_1.textBody500)(props) : (0, fonts_1.textBody400)(props))};
   color: ${(props) => (props.isBaseStyle ? (0, colors_1.inkMain)(props) : (0, colors_1.inkLight)(props))};

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

@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const material_1 = require("@mui/material");
 const react_1 = __importStar(require("react"));
+const constants_1 = require("../../../../providers/exploreState/constants");
 const typography_1 = require("../../../../theme/common/typography");
 const checkedIcon_1 = require("../../../common/CustomIcon/components/CheckedIcon/checkedIcon");
 const uncheckedIcon_1 = require("../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon");
@@ -43,6 +44,6 @@ function VariableSizeListItem({ categoryKey, categorySection, matchedItem, onFil
     };
     return (react_1.default.createElement(material_1.ListItemButton, { ref: listItemRef, onClick: handleItemClicked, selected: selected, style: style },
         react_1.default.createElement(material_1.Checkbox, { checked: selected, checkedIcon: react_1.default.createElement(checkedIcon_1.CheckedIcon, null), icon: react_1.default.createElement(uncheckedIcon_1.UncheckedIcon, null) }),
-        react_1.default.createElement(material_1.ListItemText, { disableTypography: true, primary: react_1.default.createElement(highlightedLabel_1.HighlightedLabel, { label: label, ranges: labelRanges }), secondary: react_1.default.createElement(material_1.Typography, { color: "ink.light", variant: typography_1.TEXT_BODY_SMALL_400 }, count) })));
+        react_1.default.createElement(material_1.ListItemText, { disableTypography: true, primary: react_1.default.createElement(highlightedLabel_1.HighlightedLabel, { label: label, ranges: labelRanges }), secondary: categoryKey !== constants_1.SELECT_CATEGORY_KEY.SAVED_FILTERS && (react_1.default.createElement(material_1.Typography, { color: "ink.light", variant: typography_1.TEXT_BODY_SMALL_400 }, count)) })));
 }
 exports.default = VariableSizeListItem;

package/lib/config/entities.d.ts

@@ -1,7 +1,7 @@
 import { TabProps as MTabProps, Theme, ThemeOptions } from "@mui/material";
 import { ColumnSort } from "@tanstack/react-table";
 import { JSXElementConstructor, ReactNode } from "react";
-import { CategoryKey, SelectedFilterValue } from "../common/entities";
+import { CategoryKey, SelectedFilter, SelectedFilterValue } 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";
@@ -51,6 +51,7 @@ export interface BackPageTabConfig extends TabConfig {
 export interface CategoryGroupConfig {
     categoryGroups: CategoryGroup[];
     key: string;
+    savedFilters?: SavedFilter[];
 }
 /**
  * Model of grouped configured categories in site config.
@@ -244,6 +245,11 @@ export interface Override {
  * Related search function.
  */
 declare type RelatedSearchFunction = (searchKey: CategoryKey | undefined, resultKey: CategoryKey | undefined, selectedCategoryValues: SelectedFilterValue | undefined) => Promise<RelatedSearchResult | undefined>;
+export interface SavedFilter {
+    filters: SelectedFilter[];
+    sort?: ColumnSort;
+    title: string;
+}
 /**
  * Filter applied tracking payload
  */

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

@@ -1,3 +1,3 @@
-import { ExploreState, PaginationState } from "../exploreState";
-export declare const DEFAULT_PAGINATION_STATE: PaginationState;
-export declare const INITIAL_STATE: ExploreState;
+export declare const SELECT_CATEGORY_KEY: {
+    SAVED_FILTERS: string;
+};

package/lib/providers/exploreState/constants.js

@@ -1,29 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.INITIAL_STATE = exports.DEFAULT_PAGINATION_STATE = void 0;
-// Template constants
-exports.DEFAULT_PAGINATION_STATE = {
-    currentPage: 1,
-    index: null,
-    nextIndex: null,
-    pageSize: 25,
-    pages: 1,
-    previousIndex: null,
-    rows: 0,
-};
-// Initial state
-exports.INITIAL_STATE = {
-    catalogState: undefined,
-    categoryViews: [],
-    entityPageState: {},
-    featureFlagState: undefined,
-    filterCount: 0,
-    filterState: [],
-    isRelatedView: false,
-    listItems: [],
-    listView: undefined,
-    loading: true,
-    paginationState: exports.DEFAULT_PAGINATION_STATE,
-    relatedListItems: undefined,
-    tabValue: "",
+exports.SELECT_CATEGORY_KEY = void 0;
+exports.SELECT_CATEGORY_KEY = {
+    SAVED_FILTERS: "savedFilters",
 };

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

@@ -1,6 +1,6 @@
 import { ColumnSort } from "@tanstack/react-table";
-import { SelectCategory, SelectedFilter } from "../../common/entities";
-import { CategoryConfig, CategoryGroup, CategoryGroupConfig, EntityPath } from "../../config/entities";
+import { CategoryValueKey, SelectCategory, SelectCategoryView, SelectedFilter } from "../../common/entities";
+import { CategoryConfig, CategoryGroup, CategoryGroupConfig, EntityPath, SavedFilter } from "../../config/entities";
 export interface EntityPageState {
     categoryGroupConfigKey: CategoryGroupConfigKey;
     columnsVisibility: Record<string, boolean>;
@@ -12,8 +12,15 @@ export interface EntityPageStateMapper {
 export interface EntityState {
     categoryConfigs?: CategoryConfig[];
     categoryGroups?: CategoryGroup[];
-    categoryViews: SelectCategory[];
+    categoryViews: SelectCategoryView[];
     filterState: SelectedFilter[];
+    savedFilterByCategoryValueKey?: SavedFilterByCategoryValueKey;
+    savedFilterState: SelectedFilter[];
+    savedSelectCategories: SelectCategory[];
 }
 export declare type EntityStateByCategoryGroupConfigKey = Map<CategoryGroupConfigKey, EntityState>;
 export declare type CategoryGroupConfigKey = CategoryGroupConfig["key"];
+export interface EntityStateSavedFilter extends Omit<SavedFilter, "sort"> {
+    sorting?: ColumnSort[];
+}
+export declare type SavedFilterByCategoryValueKey = Map<CategoryValueKey, EntityStateSavedFilter>;

package/lib/providers/exploreState/initializer/constants.js

@@ -4,6 +4,8 @@ exports.INITIAL_STATE = exports.DEFAULT_PAGINATION_STATE = exports.DEFAULT_ENTIT
 exports.DEFAULT_ENTITY_STATE = {
     categoryViews: [],
     filterState: [],
+    savedFilterState: [],
+    savedSelectCategories: [],
 };
 exports.DEFAULT_PAGINATION_STATE = {
     currentPage: 1,

package/lib/providers/exploreState/initializer/utils.js

@@ -3,8 +3,63 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.initReducerArguments = void 0;
 const utils_1 = require("../../../components/Table/common/utils");
 const utils_2 = require("../../../config/utils");
+const constants_1 = require("../constants");
 const utils_3 = require("../utils");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
+/**
+ * Builds category groups from the given category group config (adds the saved filters category to the category groups).
+ * @param categoryGroupConfig - Category group config.
+ * @returns category groups with saved filters category.
+ */
+function buildCategoryGroups(categoryGroupConfig) {
+    const { categoryGroups, savedFilters } = categoryGroupConfig;
+    if (!savedFilters)
+        return categoryGroups;
+    const clonedCategoryGroups = [...categoryGroups];
+    const savedFiltersCategoryGroup = {
+        categoryConfigs: [
+            { key: constants_1.SELECT_CATEGORY_KEY.SAVED_FILTERS, label: "Saved Filters" },
+        ],
+    };
+    clonedCategoryGroups.unshift(savedFiltersCategoryGroup);
+    return clonedCategoryGroups;
+}
+/**
+ * Returns the saved filters as select categories.
+ * @param savedFilters - Saved filters.
+ * @returns select categories.
+ */
+function buildSavedSelectCategories(savedFilters) {
+    if (!savedFilters)
+        return [];
+    return [
+        {
+            key: constants_1.SELECT_CATEGORY_KEY.SAVED_FILTERS,
+            label: "",
+            values: savedFilters.map(({ title }) => ({
+                count: 1,
+                key: title,
+                label: title,
+                selected: false, // Selected state updated in filter hook.
+            })),
+        },
+    ];
+}
+/**
+ * Builds saved filter by category value key.
+ * @param savedFilters - Saved filters.
+ * @returns saved filter by category value key.
+ */
+function buildSavedFilterByCategoryValueKey(savedFilters) {
+    if (!savedFilters)
+        return;
+    const savedFilterByCategoryValueKey = new Map();
+    for (const { filters, sort, title } of savedFilters) {
+        const sorting = sort ? [sort] : undefined;
+        savedFilterByCategoryValueKey.set(title, { filters, sorting, title });
+    }
+    return savedFilterByCategoryValueKey;
+}
 /**
  * Returns entity related configured category group config where entity config takes precedence over site config.
  * @param siteConfig - Site config.
@@ -71,10 +126,14 @@ function initEntityStateByCategoryGroupConfigKey(config, categoryGroupConfigKey,
         const categoryGroupConfig = getEntityCategoryGroupConfig(config, entity);
         if (!categoryGroupConfig)
             continue;
-        const { categoryGroups, key } = categoryGroupConfig;
+        const { key, savedFilters } = categoryGroupConfig;
         if (entityStateByCategoryGroupConfigKey.has(key))
             continue;
-        entityStateByCategoryGroupConfigKey.set(key, Object.assign(Object.assign({}, constants_1.DEFAULT_ENTITY_STATE), { categoryConfigs: flattenCategoryGroups(categoryGroups), categoryGroups, filterState: key === categoryGroupConfigKey ? filterState : [] }));
+        const categoryGroups = buildCategoryGroups(categoryGroupConfig);
+        const savedSelectCategories = buildSavedSelectCategories(savedFilters);
+        const savedFilterByCategoryValueKey = buildSavedFilterByCategoryValueKey(savedFilters);
+        entityStateByCategoryGroupConfigKey.set(key, Object.assign(Object.assign({}, constants_2.DEFAULT_ENTITY_STATE), { categoryConfigs: flattenCategoryGroups(categoryGroups), categoryGroups, filterState: key === categoryGroupConfigKey ? filterState : [], savedFilterByCategoryValueKey,
+            savedSelectCategories }));
     }
     return entityStateByCategoryGroupConfigKey;
 }
@@ -109,7 +168,7 @@ function initReducerArguments(config, entityListType, decodedFilterParam, decode
     const categoryGroupConfigKey = (0, utils_3.getEntityCategoryGroupConfigKey)(entityListType, entityPageState);
     const entityStateByCategoryGroupConfigKey = initEntityStateByCategoryGroupConfigKey(config, categoryGroupConfigKey, filterState);
     const categoryGroups = initCategoryGroups(entityStateByCategoryGroupConfigKey, categoryGroupConfigKey);
-    return Object.assign(Object.assign({}, constants_1.INITIAL_STATE), { catalogState: decodedCatalogParam, categoryGroups,
+    return Object.assign(Object.assign({}, constants_2.INITIAL_STATE), { catalogState: decodedCatalogParam, categoryGroups,
         entityPageState,
         entityStateByCategoryGroupConfigKey, featureFlagState: decodedFeatureFlagParam, filterCount: (0, utils_3.getFilterCount)(filterState), filterState, tabValue: entityListType });
 }

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

@@ -1,6 +1,14 @@
 import { ColumnSort } from "@tanstack/react-table";
 import { CategoryKey, CategoryValueKey, PaginationDirectionType, SelectCategory } from "../../../common/entities";
 import { ENTITY_VIEW, ListItems, PaginationResponse, RelatedListItems } from "../../exploreState";
+/**
+ * Apply saved filter payload.
+ */
+export interface ApplySavedFilterPayload {
+    categoryKey: CategoryKey;
+    selected: boolean;
+    selectedValue: CategoryValueKey;
+}
 /**
  * Process explore response payload.
  */

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

@@ -1,7 +1,23 @@
-import { SelectedFilter } from "../../common/entities";
-import { CategoryConfig } from "../../config/entities";
+import { ColumnSort } from "@tanstack/react-table";
+import { CategoryKey, CategoryValueKey, SelectedFilter } from "../../common/entities";
 import { ExploreState, PaginationState } from "../exploreState";
-import { CategoryGroupConfigKey, EntityPageState, EntityPageStateMapper, EntityState } from "./entities";
+import { CategoryGroupConfigKey, EntityPageState, EntityPageStateMapper, EntityState, EntityStateSavedFilter } from "./entities";
+/**
+ * Returns the entity state saved filter state for the given category key.
+ * @param categoryKey - Category key.
+ * @param selectedValue - Key of category value that has been de/selected.
+ * @param selected - True if value is selected, false if de-selected.
+ * @returns entity state saved filter state.
+ */
+export declare function buildEntityStateSavedFilterState(categoryKey: CategoryKey, selectedValue: CategoryValueKey, selected: boolean): SelectedFilter[];
+/**
+ * Build new set of selected filters on de/select of a "saved filter" filter.
+ * @param state - Explore state.
+ * @param selectedValue - Key of category value that has been de/selected.
+ * @param selected - True if value is selected, false if de-selected.
+ * @returns new selected filters.
+ */
+export declare function buildNextSavedFilterState(state: ExploreState, selectedValue: CategoryValueKey, selected: boolean): SelectedFilter[];
 /**
  * Returns the category group config key for the current entity.
  * @param entityPath - Entity path.
@@ -10,18 +26,27 @@ import { CategoryGroupConfigKey, EntityPageState, EntityPageStateMapper, EntityS
  */
 export declare function getEntityCategoryGroupConfigKey(entityPath: string, entityPageState: EntityPageStateMapper): CategoryGroupConfigKey;
 /**
- * Returns the category configs for the current entity.
+ * Returns the entity state for the current entity.
  * @param state - Explore state.
- * @returns category configs.
+ * @param categoryGroupConfigKey - Category group config key.
+ * @returns entity state.
  */
-export declare function getEntityCategoryConfigs(state: ExploreState): CategoryConfig[] | undefined;
+export declare function getEntityState(state: ExploreState, categoryGroupConfigKey?: string): EntityState;
 /**
- * Returns the entity state for the given category group config key.
- * @param categoryGroupConfigKey - Category group config key.
+ * Returns the saved filter/sorting for the given category key.
  * @param state - Explore state.
- * @returns entity state.
+ * @param categoryValueKey - Category key.
+ * @returns saved filter/sorting for the category key.
+ */
+export declare function getEntityStateSavedFilter(state: ExploreState, categoryValueKey: CategoryValueKey): EntityStateSavedFilter | undefined;
+/**
+ * Returns entity state "saved filter" sorting for the given category value key.
+ * @param state - Explore state.
+ * @param selectedValue - Key of category value that has been de/selected.
+ * @param selected - True if value is selected, false if de-selected.
+ * @returns sorting.
  */
-export declare function getEntityState(categoryGroupConfigKey: CategoryGroupConfigKey, state: ExploreState): EntityState;
+export declare function getEntityStateSavedSorting(state: ExploreState, selectedValue: CategoryValueKey, selected: boolean): ColumnSort[] | undefined;
 /**
  * Returns the filter count.
  * @param filterState - Filter state.
@@ -43,6 +68,13 @@ export declare function resetPage(paginationState: PaginationState): PaginationS
  */
 export declare function updateEntityPageState(entityPath: string, // entityListType.
 entityPageState: EntityPageStateMapper, nextEntityPageState: Partial<EntityPageState>): EntityPageStateMapper;
+/**
+ * Updates entity page state sorting for all entities with the same category group config key.
+ * @param state - Explore state.
+ * @param sorting - Sorting.
+ * @returns entity page state.
+ */
+export declare function updateEntityPageStateSorting(state: ExploreState, sorting?: EntityPageState["sorting"]): EntityPageStateMapper;
 /**
  * Updates entity state by category group config key.
  * @param state - Explore state.

package/lib/providers/exploreState/utils.js

@@ -1,7 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateEntityStateByCategoryGroupConfigKey = exports.updateEntityPageState = exports.resetPage = exports.getFilterCount = exports.getEntityState = exports.getEntityCategoryConfigs = exports.getEntityCategoryGroupConfigKey = void 0;
+exports.updateEntityStateByCategoryGroupConfigKey = exports.updateEntityPageStateSorting = exports.updateEntityPageState = exports.resetPage = exports.getFilterCount = exports.getEntityStateSavedSorting = exports.getEntityStateSavedFilter = exports.getEntityState = exports.getEntityCategoryGroupConfigKey = exports.buildNextSavedFilterState = exports.buildEntityStateSavedFilterState = void 0;
 const constants_1 = require("./initializer/constants");
+/**
+ * Returns the entity state saved filter state for the given category key.
+ * @param categoryKey - Category key.
+ * @param selectedValue - Key of category value that has been de/selected.
+ * @param selected - True if value is selected, false if de-selected.
+ * @returns entity state saved filter state.
+ */
+function buildEntityStateSavedFilterState(categoryKey, selectedValue, selected) {
+    if (!selected)
+        return [];
+    return [{ categoryKey, value: [selectedValue] }];
+}
+exports.buildEntityStateSavedFilterState = buildEntityStateSavedFilterState;
+/**
+ * Build new set of selected filters on de/select of a "saved filter" filter.
+ * @param state - Explore state.
+ * @param selectedValue - Key of category value that has been de/selected.
+ * @param selected - True if value is selected, false if de-selected.
+ * @returns new selected filters.
+ */
+function buildNextSavedFilterState(state, selectedValue, selected) {
+    if (!selected)
+        return []; // Clears all filters on de-select of saved filter.
+    const savedFilter = getEntityStateSavedFilter(state, selectedValue);
+    return (savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.filters) || [];
+}
+exports.buildNextSavedFilterState = buildNextSavedFilterState;
 /**
  * Returns the category group config key for the current entity.
  * @param entityPath - Entity path.
@@ -13,25 +40,42 @@ function getEntityCategoryGroupConfigKey(entityPath, entityPageState) {
 }
 exports.getEntityCategoryGroupConfigKey = getEntityCategoryGroupConfigKey;
 /**
- * Returns the category configs for the current entity.
+ * Returns the entity state for the current entity.
  * @param state - Explore state.
- * @returns category configs.
- */
-function getEntityCategoryConfigs(state) {
-    return getEntityState(getEntityCategoryGroupConfigKey(state.tabValue, state.entityPageState), state).categoryConfigs;
-}
-exports.getEntityCategoryConfigs = getEntityCategoryConfigs;
-/**
- * Returns the entity state for the given category group config key.
  * @param categoryGroupConfigKey - Category group config key.
- * @param state - Explore state.
  * @returns entity state.
  */
-function getEntityState(categoryGroupConfigKey, state) {
+function getEntityState(state, categoryGroupConfigKey = getEntityCategoryGroupConfigKey(state.tabValue, state.entityPageState)) {
     return (state.entityStateByCategoryGroupConfigKey.get(categoryGroupConfigKey) ||
         constants_1.DEFAULT_ENTITY_STATE);
 }
 exports.getEntityState = getEntityState;
+/**
+ * Returns the saved filter/sorting for the given category key.
+ * @param state - Explore state.
+ * @param categoryValueKey - Category key.
+ * @returns saved filter/sorting for the category key.
+ */
+function getEntityStateSavedFilter(state, categoryValueKey) {
+    var _a;
+    const entityState = getEntityState(state);
+    return (_a = entityState.savedFilterByCategoryValueKey) === null || _a === void 0 ? void 0 : _a.get(categoryValueKey);
+}
+exports.getEntityStateSavedFilter = getEntityStateSavedFilter;
+/**
+ * Returns entity state "saved filter" sorting for the given category value key.
+ * @param state - Explore state.
+ * @param selectedValue - Key of category value that has been de/selected.
+ * @param selected - True if value is selected, false if de-selected.
+ * @returns sorting.
+ */
+function getEntityStateSavedSorting(state, selectedValue, selected) {
+    if (!selected)
+        return;
+    const savedFilter = getEntityStateSavedFilter(state, selectedValue);
+    return savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.sorting;
+}
+exports.getEntityStateSavedSorting = getEntityStateSavedSorting;
 /**
  * Returns the filter count.
  * @param filterState - Filter state.
@@ -74,6 +118,24 @@ entityPageState, nextEntityPageState) {
     return Object.assign(Object.assign({}, entityPageState), { [entityPath]: Object.assign(Object.assign({}, entityPageState[entityPath]), nextEntityPageState) });
 }
 exports.updateEntityPageState = updateEntityPageState;
+/**
+ * Updates entity page state sorting for all entities with the same category group config key.
+ * @param state - Explore state.
+ * @param sorting - Sorting.
+ * @returns entity page state.
+ */
+function updateEntityPageStateSorting(state, sorting) {
+    if (!sorting)
+        return state.entityPageState;
+    const categoryGroupConfigKey = getEntityCategoryGroupConfigKey(state.tabValue, state.entityPageState);
+    return Object.entries(state.entityPageState).reduce((acc, [entityPath, entityPageState]) => {
+        if (entityPageState.categoryGroupConfigKey === categoryGroupConfigKey) {
+            return Object.assign(Object.assign({}, acc), { [entityPath]: Object.assign(Object.assign({}, entityPageState), { sorting }) });
+        }
+        return Object.assign(Object.assign({}, acc), { [entityPath]: entityPageState });
+    }, {});
+}
+exports.updateEntityPageStateSorting = updateEntityPageStateSorting;
 /**
  * Updates entity state by category group config key.
  * @param state - Explore state.
@@ -82,7 +144,7 @@ exports.updateEntityPageState = updateEntityPageState;
  */
 function updateEntityStateByCategoryGroupConfigKey(state, nextEntityState) {
     const categoryGroupConfigKey = getEntityCategoryGroupConfigKey(state.tabValue, state.entityPageState);
-    const entityState = getEntityState(categoryGroupConfigKey, state);
+    const entityState = getEntityState(state, categoryGroupConfigKey);
     if (entityState) {
         setEntityStateByCategoryGroupConfigKey(categoryGroupConfigKey, state, Object.assign(Object.assign({}, entityState), nextEntityState));
     }

package/lib/providers/exploreState.d.ts

@@ -1,9 +1,9 @@
 import React, { Dispatch, ReactNode } from "react";
 import { AzulSearchIndex } from "../apis/azul/common/entities";
-import { SelectCategory, SelectedFilter } from "../common/entities";
+import { SelectCategoryView, SelectedFilter } from "../common/entities";
 import { CategoryGroup, SiteConfig } from "../config/entities";
 import { EntityPageStateMapper, EntityStateByCategoryGroupConfigKey } from "./exploreState/entities";
-import { PaginateTablePayload, ProcessExploreResponsePayload, ProcessRelatedResponsePayload, ResetExploreResponsePayload, ToggleEntityViewPayload, UpdateColumnVisibilityPayload, UpdateFilterPayload, UpdateSortingPayload } from "./exploreState/payloads/entities";
+import { ApplySavedFilterPayload, PaginateTablePayload, ProcessExploreResponsePayload, ProcessRelatedResponsePayload, ResetExploreResponsePayload, ToggleEntityViewPayload, UpdateColumnVisibilityPayload, UpdateFilterPayload, UpdateSortingPayload } from "./exploreState/payloads/entities";
 export declare type CatalogState = string | undefined;
 /**
  * Entity view.
@@ -25,7 +25,7 @@ export interface ExploreContext {
 export declare type ExploreState = {
     catalogState: CatalogState;
     categoryGroups?: CategoryGroup[];
-    categoryViews: SelectCategory[];
+    categoryViews: SelectCategoryView[];
     entityPageState: EntityPageStateMapper;
     entityStateByCategoryGroupConfigKey: EntityStateByCategoryGroupConfigKey;
     featureFlagState: FeatureFlagState;
@@ -103,6 +103,7 @@ export declare function ExploreStateProvider({ children, entityListType, }: {
  * Explore action kind.
  */
 export declare enum ExploreActionKind {
+    ApplySavedFilter = "APPLY_SAVED_FILTER",
     ClearFilters = "CLEAR_FILTERS",
     PaginateTable = "PAGINATE_TABLE",
     ProcessExploreResponse = "PROCESS_EXPLORE_RESPONSE",
@@ -118,7 +119,14 @@ export declare enum ExploreActionKind {
 /**
  * Explore action.
  */
-export declare type ExploreAction = ClearFiltersAction | PaginateTableAction | ProcessExploreResponseAction | ProcessRelatedResponseAction | ResetExploreResponseAction | ResetStateAction | SelectEntityTypeAction | ToggleEntityViewAction | UpdateColumnVisibilityAction | UpdateFilterAction | UpdateSortingAction;
+export declare type ExploreAction = ApplySavedFilterAction | ClearFiltersAction | PaginateTableAction | ProcessExploreResponseAction | ProcessRelatedResponseAction | ResetExploreResponseAction | ResetStateAction | SelectEntityTypeAction | ToggleEntityViewAction | UpdateColumnVisibilityAction | UpdateFilterAction | UpdateSortingAction;
+/**
+ * Apply saved filter action.
+ */
+declare type ApplySavedFilterAction = {
+    payload: ApplySavedFilterPayload;
+    type: ExploreActionKind.ApplySavedFilter;
+};
 /**
  * Clear filters action.
  */

package/lib/providers/exploreState.js

@@ -93,6 +93,7 @@ exports.ExploreStateProvider = ExploreStateProvider;
  */
 var ExploreActionKind;
 (function (ExploreActionKind) {
+    ExploreActionKind["ApplySavedFilter"] = "APPLY_SAVED_FILTER";
     ExploreActionKind["ClearFilters"] = "CLEAR_FILTERS";
     ExploreActionKind["PaginateTable"] = "PAGINATE_TABLE";
     ExploreActionKind["ProcessExploreResponse"] = "PROCESS_EXPLORE_RESPONSE";
@@ -116,13 +117,30 @@ function exploreReducer(state, action, exploreContext) {
     const { payload, type } = action;
     const { config, entityList } = exploreContext;
     switch (type) {
+        /**
+         * Apply saved filter
+         **/
+        case ExploreActionKind.ApplySavedFilter: {
+            const filterState = (0, utils_2.buildNextSavedFilterState)(state, payload.selectedValue, payload.selected);
+            const savedFilterState = (0, utils_2.buildEntityStateSavedFilterState)(payload.categoryKey, payload.selectedValue, payload.selected);
+            const savedSorting = (0, utils_2.getEntityStateSavedSorting)(state, payload.selectedValue, payload.selected);
+            (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, {
+                filterState,
+                savedFilterState,
+            });
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageStateSorting)(state, savedSorting), filterCount: (0, utils_2.getFilterCount)(filterState), filterState, paginationState: (0, utils_2.resetPage)(state.paginationState) });
+        }
         /**
          * Clear all filters
          **/
         case ExploreActionKind.ClearFilters: {
             const filterCount = 0;
             const filterState = [];
-            (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, { filterState });
+            const savedFilterState = [];
+            (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, {
+                filterState,
+                savedFilterState,
+            });
             return Object.assign(Object.assign({}, state), { filterCount,
                 filterState, paginationState: (0, utils_2.resetPage)(state.paginationState) });
         }
@@ -145,8 +163,12 @@ function exploreReducer(state, action, exploreContext) {
          * Process explore response
          **/
         case ExploreActionKind.ProcessExploreResponse: {
+            const entityState = (0, utils_2.getEntityState)(state);
             const nextCategoryViews = payload.selectCategories
-                ? (0, useCategoryFilter_1.buildCategoryViews)(payload.selectCategories, (0, utils_2.getEntityCategoryConfigs)(state), state.filterState)
+                ? (0, useCategoryFilter_1.buildCategoryViews)([
+                    ...payload.selectCategories,
+                    ...entityState.savedSelectCategories, // "savedFilter" select categories are built from config at reducer initialization.
+                ], entityState.categoryConfigs, [...state.filterState, ...entityState.savedFilterState])
                 : state.categoryViews;
             (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, {
                 categoryViews: nextCategoryViews,
@@ -178,7 +200,7 @@ function exploreReducer(state, action, exploreContext) {
             if (payload === state.tabValue) {
                 return state;
             }
-            const entityState = (0, utils_2.getEntityState)((0, utils_2.getEntityCategoryGroupConfigKey)(payload, state.entityPageState), state);
+            const entityState = (0, utils_2.getEntityState)(state, (0, utils_2.getEntityCategoryGroupConfigKey)(payload, state.entityPageState));
             return Object.assign(Object.assign({}, state), { categoryGroups: entityState.categoryGroups, categoryViews: entityState.categoryViews, filterCount: (0, utils_2.getFilterCount)(entityState.filterState), filterState: entityState.filterState, listItems: [], loading: true, paginationState: (0, utils_2.resetPage)(state.paginationState), tabValue: payload });
         }
         /**
@@ -192,7 +214,11 @@ function exploreReducer(state, action, exploreContext) {
          **/
         case ExploreActionKind.UpdateFilter: {
             const filterState = (0, useCategoryFilter_1.buildNextFilterState)(state.filterState, payload.categoryKey, payload.selectedValue, payload.selected);
-            (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, { filterState });
+            const savedFilterState = []; // Clear saved filter state.
+            (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, {
+                filterState,
+                savedFilterState,
+            });
             return Object.assign(Object.assign({}, state), { filterCount: (0, utils_2.getFilterCount)(filterState), filterState, paginationState: (0, utils_2.resetPage)(state.paginationState) });
         }
         /**

package/lib/views/ExploreView/exploreView.js

@@ -46,6 +46,7 @@ const useEntityListRelatedView_1 = require("../../hooks/useEntityListRelatedView
 const useExploreState_1 = require("../../hooks/useExploreState");
 const useSummary_1 = require("../../hooks/useSummary");
 const exploreState_1 = require("../../providers/exploreState");
+const constants_1 = require("../../providers/exploreState/constants");
 const breakpoints_1 = require("../../theme/common/breakpoints");
 /**
  * Returns tabs to be used as a prop for the Tabs component.
@@ -93,13 +94,16 @@ const ExploreView = (props) => {
      */
     const onFilterChange = (fromSearchAll, categoryKey, selectedCategoryValue, selected, categorySection, searchTerm) => {
         var _a;
+        const dispatchType = categoryKey === constants_1.SELECT_CATEGORY_KEY.SAVED_FILTERS
+            ? exploreState_1.ExploreActionKind.ApplySavedFilter
+            : exploreState_1.ExploreActionKind.UpdateFilter;
         exploreDispatch({
             payload: {
                 categoryKey,
                 selected,
                 selectedValue: selectedCategoryValue,
             },
-            type: exploreState_1.ExploreActionKind.UpdateFilter,
+            type: dispatchType,
         });
         (_a = trackingConfig === null || trackingConfig === void 0 ? void 0 : trackingConfig.trackFilterApplied) === null || _a === void 0 ? void 0 : _a.call(trackingConfig, {
             category: categoryKey,
@@ -166,18 +170,20 @@ function buildCategoryFilters(selectCategoryViews, categoryGroups) {
     if (!categoryGroups) {
         return [{ categoryViews: selectCategoryViews }];
     }
-    return categoryGroups.map(({ categoryConfigs, label }) => {
+    return categoryGroups.reduce((accGroups, { categoryConfigs, label }) => {
         // Grab the category views for the configured grouped categories.
-        const categoryViews = categoryConfigs.reduce((acc, { key: categoryKey }) => {
+        const categoryViews = categoryConfigs.reduce((accViews, { key: categoryKey }) => {
             const categoryView = selectCategoryViews.find(({ key }) => key === categoryKey);
             if (categoryView) {
-                acc.push(categoryView);
+                accViews.push(categoryView);
             }
-            return acc;
+            return accViews;
         }, []);
-        // Return the configured label and category views.
-        return { categoryViews, label };
-    });
+        if (categoryViews.length > 0) {
+            accGroups.push({ categoryViews, label });
+        }
+        return accGroups;
+    }, []);
 }
 /**
  * Optionally renders component config.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "",
   "scripts": {
     "test": "jest",

package/src/components/Filter/components/Filters/filters.styles.ts

@@ -14,7 +14,7 @@ interface Props {
 }
 
 export const Filters = styled("div", {
-  shouldForwardProp: (prop) => prop !== "height",
+  shouldForwardProp: (prop) => prop !== "height" && prop !== "isBaseStyle",
 })<Props>`
   ${(props) => (props.isBaseStyle ? textBody500(props) : textBody400(props))};
   color: ${(props) => (props.isBaseStyle ? inkMain(props) : inkLight(props))};

package/src/components/Filter/components/Filters/filters.tsx

@@ -1,7 +1,7 @@
 import { Divider } from "@mui/material";
-import { TrackFilterOpenedFunction } from "config/entities";
 import React, { Fragment, useEffect, useMemo, useRef, useState } from "react";
 import { CategoryTag, SelectCategoryView } from "../../../../common/entities";
+import { TrackFilterOpenedFunction } from "../../../../config/entities";
 import {
   BREAKPOINT_FN_NAME,
   useBreakpointHelper,

package/src/components/Filter/components/VariableSizeListItem/variableSizeListItem.tsx

@@ -7,6 +7,7 @@ import {
 import React, { CSSProperties, useEffect, useRef } from "react";
 import { CategoryKey } from "../../../../common/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
+import { SELECT_CATEGORY_KEY } from "../../../../providers/exploreState/constants";
 import { TEXT_BODY_SMALL_400 } from "../../../../theme/common/typography";
 import { CheckedIcon } from "../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedIcon } from "../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
@@ -62,9 +63,11 @@ export default function VariableSizeListItem({
         disableTypography
         primary={<HighlightedLabel label={label} ranges={labelRanges} />}
         secondary={
-          <Typography color="ink.light" variant={TEXT_BODY_SMALL_400}>
-            {count}
-          </Typography>
+          categoryKey !== SELECT_CATEGORY_KEY.SAVED_FILTERS && (
+            <Typography color="ink.light" variant={TEXT_BODY_SMALL_400}>
+              {count}
+            </Typography>
+          )
         }
       />
     </ListItemButton>

package/src/config/entities.ts

@@ -1,7 +1,11 @@
 import { TabProps as MTabProps, Theme, ThemeOptions } from "@mui/material";
 import { ColumnSort } from "@tanstack/react-table";
 import { JSXElementConstructor, ReactNode } from "react";
-import { CategoryKey, SelectedFilterValue } from "../common/entities";
+import {
+  CategoryKey,
+  SelectedFilter,
+  SelectedFilterValue,
+} 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";
@@ -56,6 +60,7 @@ export interface BackPageTabConfig extends TabConfig {
 export interface CategoryGroupConfig {
   categoryGroups: CategoryGroup[];
   key: string;
+  savedFilters?: SavedFilter[];
 }
 
 /**
@@ -302,6 +307,11 @@ type RelatedSearchFunction = (
   selectedCategoryValues: SelectedFilterValue | undefined
 ) => Promise<RelatedSearchResult | undefined>;
 
+export interface SavedFilter {
+  filters: SelectedFilter[];
+  sort?: ColumnSort;
+  title: string;
+}
 /**
  * Filter applied tracking payload
  */

package/src/providers/exploreState/constants.ts

@@ -0,0 +1,3 @@
+export const SELECT_CATEGORY_KEY = {
+  SAVED_FILTERS: "savedFilters",
+};

package/src/providers/exploreState/entities.ts

@@ -1,10 +1,16 @@
 import { ColumnSort } from "@tanstack/react-table";
-import { SelectCategory, SelectedFilter } from "../../common/entities";
+import {
+  CategoryValueKey,
+  SelectCategory,
+  SelectCategoryView,
+  SelectedFilter,
+} from "../../common/entities";
 import {
   CategoryConfig,
   CategoryGroup,
   CategoryGroupConfig,
   EntityPath,
+  SavedFilter,
 } from "../../config/entities";
 
 export interface EntityPageState {
@@ -20,8 +26,11 @@ export interface EntityPageStateMapper {
 export interface EntityState {
   categoryConfigs?: CategoryConfig[];
   categoryGroups?: CategoryGroup[];
-  categoryViews: SelectCategory[];
+  categoryViews: SelectCategoryView[];
   filterState: SelectedFilter[];
+  savedFilterByCategoryValueKey?: SavedFilterByCategoryValueKey;
+  savedFilterState: SelectedFilter[];
+  savedSelectCategories: SelectCategory[];
 }
 
 export type EntityStateByCategoryGroupConfigKey = Map<
@@ -30,3 +39,12 @@ export type EntityStateByCategoryGroupConfigKey = Map<
 >;
 
 export type CategoryGroupConfigKey = CategoryGroupConfig["key"];
+
+export interface EntityStateSavedFilter extends Omit<SavedFilter, "sort"> {
+  sorting?: ColumnSort[];
+}
+
+export type SavedFilterByCategoryValueKey = Map<
+  CategoryValueKey,
+  EntityStateSavedFilter
+>;

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

@@ -4,6 +4,8 @@ import { EntityState } from "../entities";
 export const DEFAULT_ENTITY_STATE: EntityState = {
   categoryViews: [],
   filterState: [],
+  savedFilterState: [],
+  savedSelectCategories: [],
 };
 
 export const DEFAULT_PAGINATION_STATE: PaginationState = {

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

@@ -1,22 +1,86 @@
-import { SelectedFilter } from "../../../common/entities";
+import { SelectCategory, SelectedFilter } from "../../../common/entities";
 import { getInitialTableColumnVisibility } from "../../../components/Table/common/utils";
 import {
   CategoryConfig,
   CategoryGroup,
   CategoryGroupConfig,
   EntityConfig,
+  SavedFilter,
   SiteConfig,
 } from "../../../config/entities";
 import { getDefaultSorting } from "../../../config/utils";
 import { ExploreState } from "../../exploreState";
+import { SELECT_CATEGORY_KEY } from "../constants";
 import {
   CategoryGroupConfigKey,
   EntityPageStateMapper,
   EntityStateByCategoryGroupConfigKey,
+  SavedFilterByCategoryValueKey,
 } from "../entities";
 import { getEntityCategoryGroupConfigKey, getFilterCount } from "../utils";
 import { DEFAULT_ENTITY_STATE, INITIAL_STATE } from "./constants";
 
+/**
+ * Builds category groups from the given category group config (adds the saved filters category to the category groups).
+ * @param categoryGroupConfig - Category group config.
+ * @returns category groups with saved filters category.
+ */
+function buildCategoryGroups(
+  categoryGroupConfig: CategoryGroupConfig
+): CategoryGroup[] {
+  const { categoryGroups, savedFilters } = categoryGroupConfig;
+  if (!savedFilters) return categoryGroups;
+  const clonedCategoryGroups = [...categoryGroups];
+  const savedFiltersCategoryGroup: CategoryGroup = {
+    categoryConfigs: [
+      { key: SELECT_CATEGORY_KEY.SAVED_FILTERS, label: "Saved Filters" },
+    ],
+  };
+  clonedCategoryGroups.unshift(savedFiltersCategoryGroup);
+  return clonedCategoryGroups;
+}
+
+/**
+ * Returns the saved filters as select categories.
+ * @param savedFilters - Saved filters.
+ * @returns select categories.
+ */
+function buildSavedSelectCategories(
+  savedFilters?: SavedFilter[]
+): SelectCategory[] {
+  if (!savedFilters) return [];
+  return [
+    {
+      key: SELECT_CATEGORY_KEY.SAVED_FILTERS,
+      label: "", // Label is applied in filter hook where it has access to the config.
+      values: savedFilters.map(({ title }) => ({
+        count: 1,
+        key: title,
+        label: title,
+        selected: false, // Selected state updated in filter hook.
+      })),
+    },
+  ];
+}
+
+/**
+ * Builds saved filter by category value key.
+ * @param savedFilters - Saved filters.
+ * @returns saved filter by category value key.
+ */
+function buildSavedFilterByCategoryValueKey(
+  savedFilters?: SavedFilter[]
+): SavedFilterByCategoryValueKey | undefined {
+  if (!savedFilters) return;
+  const savedFilterByCategoryValueKey: SavedFilterByCategoryValueKey =
+    new Map();
+  for (const { filters, sort, title } of savedFilters) {
+    const sorting = sort ? [sort] : undefined;
+    savedFilterByCategoryValueKey.set(title, { filters, sorting, title });
+  }
+  return savedFilterByCategoryValueKey;
+}
+
 /**
  * Returns entity related configured category group config where entity config takes precedence over site config.
  * @param siteConfig - Site config.
@@ -109,13 +173,20 @@ function initEntityStateByCategoryGroupConfigKey(
   for (const entity of config.entities) {
     const categoryGroupConfig = getEntityCategoryGroupConfig(config, entity);
     if (!categoryGroupConfig) continue;
-    const { categoryGroups, key } = categoryGroupConfig;
+    const { key, savedFilters } = categoryGroupConfig;
     if (entityStateByCategoryGroupConfigKey.has(key)) continue;
+    const categoryGroups = buildCategoryGroups(categoryGroupConfig);
+    const savedSelectCategories: SelectCategory[] =
+      buildSavedSelectCategories(savedFilters);
+    const savedFilterByCategoryValueKey =
+      buildSavedFilterByCategoryValueKey(savedFilters);
     entityStateByCategoryGroupConfigKey.set(key, {
       ...DEFAULT_ENTITY_STATE,
       categoryConfigs: flattenCategoryGroups(categoryGroups),
       categoryGroups,
       filterState: key === categoryGroupConfigKey ? filterState : [],
+      savedFilterByCategoryValueKey,
+      savedSelectCategories,
     });
   }
   return entityStateByCategoryGroupConfigKey;

package/src/providers/exploreState/payloads/entities.ts

@@ -12,6 +12,15 @@ import {
   RelatedListItems,
 } from "../../exploreState";
 
+/**
+ * Apply saved filter payload.
+ */
+export interface ApplySavedFilterPayload {
+  categoryKey: CategoryKey;
+  selected: boolean;
+  selectedValue: CategoryValueKey;
+}
+
 /**
  * Process explore response payload.
  */

package/src/providers/exploreState/utils.ts

@@ -1,14 +1,52 @@
-import { SelectedFilter } from "../../common/entities";
-import { CategoryConfig } from "../../config/entities";
+import { ColumnSort } from "@tanstack/react-table";
+import {
+  CategoryKey,
+  CategoryValueKey,
+  SelectedFilter,
+} from "../../common/entities";
 import { ExploreState, PaginationState } from "../exploreState";
 import {
   CategoryGroupConfigKey,
   EntityPageState,
   EntityPageStateMapper,
   EntityState,
+  EntityStateSavedFilter,
 } from "./entities";
 import { DEFAULT_ENTITY_STATE } from "./initializer/constants";
 
+/**
+ * Returns the entity state saved filter state for the given category key.
+ * @param categoryKey - Category key.
+ * @param selectedValue - Key of category value that has been de/selected.
+ * @param selected - True if value is selected, false if de-selected.
+ * @returns entity state saved filter state.
+ */
+export function buildEntityStateSavedFilterState(
+  categoryKey: CategoryKey,
+  selectedValue: CategoryValueKey,
+  selected: boolean
+): SelectedFilter[] {
+  if (!selected) return [];
+  return [{ categoryKey, value: [selectedValue] }];
+}
+
+/**
+ * Build new set of selected filters on de/select of a "saved filter" filter.
+ * @param state - Explore state.
+ * @param selectedValue - Key of category value that has been de/selected.
+ * @param selected - True if value is selected, false if de-selected.
+ * @returns new selected filters.
+ */
+export function buildNextSavedFilterState(
+  state: ExploreState,
+  selectedValue: CategoryValueKey,
+  selected: boolean
+): SelectedFilter[] {
+  if (!selected) return []; // Clears all filters on de-select of saved filter.
+  const savedFilter = getEntityStateSavedFilter(state, selectedValue);
+  return savedFilter?.filters || [];
+}
+
 /**
  * Returns the category group config key for the current entity.
  * @param entityPath - Entity path.
@@ -23,28 +61,17 @@ export function getEntityCategoryGroupConfigKey(
 }
 
 /**
- * Returns the category configs for the current entity.
+ * Returns the entity state for the current entity.
  * @param state - Explore state.
- * @returns category configs.
- */
-export function getEntityCategoryConfigs(
-  state: ExploreState
-): CategoryConfig[] | undefined {
-  return getEntityState(
-    getEntityCategoryGroupConfigKey(state.tabValue, state.entityPageState),
-    state
-  ).categoryConfigs;
-}
-
-/**
- * Returns the entity state for the given category group config key.
  * @param categoryGroupConfigKey - Category group config key.
- * @param state - Explore state.
  * @returns entity state.
  */
 export function getEntityState(
-  categoryGroupConfigKey: CategoryGroupConfigKey,
-  state: ExploreState
+  state: ExploreState,
+  categoryGroupConfigKey = getEntityCategoryGroupConfigKey(
+    state.tabValue,
+    state.entityPageState
+  )
 ): EntityState {
   return (
     state.entityStateByCategoryGroupConfigKey.get(categoryGroupConfigKey) ||
@@ -52,6 +79,37 @@ export function getEntityState(
   );
 }
 
+/**
+ * Returns the saved filter/sorting for the given category key.
+ * @param state - Explore state.
+ * @param categoryValueKey - Category key.
+ * @returns saved filter/sorting for the category key.
+ */
+export function getEntityStateSavedFilter(
+  state: ExploreState,
+  categoryValueKey: CategoryValueKey
+): EntityStateSavedFilter | undefined {
+  const entityState = getEntityState(state);
+  return entityState.savedFilterByCategoryValueKey?.get(categoryValueKey);
+}
+
+/**
+ * Returns entity state "saved filter" sorting for the given category value key.
+ * @param state - Explore state.
+ * @param selectedValue - Key of category value that has been de/selected.
+ * @param selected - True if value is selected, false if de-selected.
+ * @returns sorting.
+ */
+export function getEntityStateSavedSorting(
+  state: ExploreState,
+  selectedValue: CategoryValueKey,
+  selected: boolean
+): ColumnSort[] | undefined {
+  if (!selected) return;
+  const savedFilter = getEntityStateSavedFilter(state, selectedValue);
+  return savedFilter?.sorting;
+}
+
 /**
  * Returns the filter count.
  * @param filterState - Filter state.
@@ -111,6 +169,32 @@ export function updateEntityPageState(
   };
 }
 
+/**
+ * Updates entity page state sorting for all entities with the same category group config key.
+ * @param state - Explore state.
+ * @param sorting - Sorting.
+ * @returns entity page state.
+ */
+export function updateEntityPageStateSorting(
+  state: ExploreState,
+  sorting?: EntityPageState["sorting"]
+): EntityPageStateMapper {
+  if (!sorting) return state.entityPageState;
+  const categoryGroupConfigKey = getEntityCategoryGroupConfigKey(
+    state.tabValue,
+    state.entityPageState
+  );
+  return Object.entries(state.entityPageState).reduce(
+    (acc, [entityPath, entityPageState]) => {
+      if (entityPageState.categoryGroupConfigKey === categoryGroupConfigKey) {
+        return { ...acc, [entityPath]: { ...entityPageState, sorting } };
+      }
+      return { ...acc, [entityPath]: entityPageState };
+    },
+    {} as EntityPageStateMapper
+  );
+}
+
 /**
  * Updates entity state by category group config key.
  * @param state - Explore state.
@@ -125,7 +209,7 @@ export function updateEntityStateByCategoryGroupConfigKey(
     state.tabValue,
     state.entityPageState
   );
-  const entityState = getEntityState(categoryGroupConfigKey, state);
+  const entityState = getEntityState(state, categoryGroupConfigKey);
   if (entityState) {
     setEntityStateByCategoryGroupConfigKey(categoryGroupConfigKey, state, {
       ...entityState,

package/src/providers/exploreState.tsx

@@ -8,7 +8,7 @@ import React, {
   useState,
 } from "react";
 import { AzulSearchIndex } from "../apis/azul/common/entities";
-import { SelectCategory, SelectedFilter } from "../common/entities";
+import { SelectCategoryView, SelectedFilter } from "../common/entities";
 import { CategoryGroup, SiteConfig } from "../config/entities";
 import { useAuthentication } from "../hooks/useAuthentication/useAuthentication";
 import {
@@ -27,6 +27,7 @@ import {
 } from "./exploreState/initializer/constants";
 import { initReducerArguments } from "./exploreState/initializer/utils";
 import {
+  ApplySavedFilterPayload,
   PaginateTablePayload,
   ProcessExploreResponsePayload,
   ProcessRelatedResponsePayload,
@@ -37,12 +38,15 @@ import {
   UpdateSortingPayload,
 } from "./exploreState/payloads/entities";
 import {
-  getEntityCategoryConfigs,
+  buildEntityStateSavedFilterState,
+  buildNextSavedFilterState,
   getEntityCategoryGroupConfigKey,
   getEntityState,
+  getEntityStateSavedSorting,
   getFilterCount,
   resetPage,
   updateEntityPageState,
+  updateEntityPageStateSorting,
   updateEntityStateByCategoryGroupConfigKey,
 } from "./exploreState/utils";
 
@@ -70,7 +74,7 @@ export interface ExploreContext {
 export type ExploreState = {
   catalogState: CatalogState;
   categoryGroups?: CategoryGroup[];
-  categoryViews: SelectCategory[];
+  categoryViews: SelectCategoryView[];
   entityPageState: EntityPageStateMapper;
   entityStateByCategoryGroupConfigKey: EntityStateByCategoryGroupConfigKey;
   featureFlagState: FeatureFlagState;
@@ -218,6 +222,7 @@ export function ExploreStateProvider({
  * Explore action kind.
  */
 export enum ExploreActionKind {
+  ApplySavedFilter = "APPLY_SAVED_FILTER",
   ClearFilters = "CLEAR_FILTERS",
   PaginateTable = "PAGINATE_TABLE",
   ProcessExploreResponse = "PROCESS_EXPLORE_RESPONSE",
@@ -235,6 +240,7 @@ export enum ExploreActionKind {
  * Explore action.
  */
 export type ExploreAction =
+  | ApplySavedFilterAction
   | ClearFiltersAction
   | PaginateTableAction
   | ProcessExploreResponseAction
@@ -247,6 +253,14 @@ export type ExploreAction =
   | UpdateFilterAction
   | UpdateSortingAction;
 
+/**
+ * Apply saved filter action.
+ */
+type ApplySavedFilterAction = {
+  payload: ApplySavedFilterPayload;
+  type: ExploreActionKind.ApplySavedFilter;
+};
+
 /**
  * Clear filters action.
  */
@@ -351,13 +365,48 @@ function exploreReducer(
   const { config, entityList } = exploreContext;
 
   switch (type) {
+    /**
+     * Apply saved filter
+     **/
+    case ExploreActionKind.ApplySavedFilter: {
+      const filterState = buildNextSavedFilterState(
+        state,
+        payload.selectedValue,
+        payload.selected
+      );
+      const savedFilterState = buildEntityStateSavedFilterState(
+        payload.categoryKey,
+        payload.selectedValue,
+        payload.selected
+      );
+      const savedSorting = getEntityStateSavedSorting(
+        state,
+        payload.selectedValue,
+        payload.selected
+      );
+      updateEntityStateByCategoryGroupConfigKey(state, {
+        filterState,
+        savedFilterState,
+      });
+      return {
+        ...state,
+        entityPageState: updateEntityPageStateSorting(state, savedSorting),
+        filterCount: getFilterCount(filterState),
+        filterState,
+        paginationState: resetPage(state.paginationState),
+      };
+    }
     /**
      * Clear all filters
      **/
     case ExploreActionKind.ClearFilters: {
       const filterCount = 0;
       const filterState: SelectedFilter[] = [];
-      updateEntityStateByCategoryGroupConfigKey(state, { filterState });
+      const savedFilterState: SelectedFilter[] = [];
+      updateEntityStateByCategoryGroupConfigKey(state, {
+        filterState,
+        savedFilterState,
+      });
       return {
         ...state,
         filterCount,
@@ -386,11 +435,15 @@ function exploreReducer(
      * Process explore response
      **/
     case ExploreActionKind.ProcessExploreResponse: {
+      const entityState = getEntityState(state);
       const nextCategoryViews = payload.selectCategories
         ? buildCategoryViews(
-            payload.selectCategories,
-            getEntityCategoryConfigs(state),
-            state.filterState
+            [
+              ...payload.selectCategories,
+              ...entityState.savedSelectCategories, // "savedFilter" select categories are built from config at reducer initialization.
+            ],
+            entityState.categoryConfigs,
+            [...state.filterState, ...entityState.savedFilterState]
           )
         : state.categoryViews;
       updateEntityStateByCategoryGroupConfigKey(state, {
@@ -441,8 +494,8 @@ function exploreReducer(
         return state;
       }
       const entityState = getEntityState(
-        getEntityCategoryGroupConfigKey(payload, state.entityPageState),
-        state
+        state,
+        getEntityCategoryGroupConfigKey(payload, state.entityPageState)
       );
       return {
         ...state,
@@ -476,7 +529,11 @@ function exploreReducer(
         payload.selectedValue,
         payload.selected
       );
-      updateEntityStateByCategoryGroupConfigKey(state, { filterState });
+      const savedFilterState: SelectedFilter[] = []; // Clear saved filter state.
+      updateEntityStateByCategoryGroupConfigKey(state, {
+        filterState,
+        savedFilterState,
+      });
       return {
         ...state,
         filterCount: getFilterCount(filterState),

package/src/views/ExploreView/exploreView.tsx

@@ -41,6 +41,7 @@ import { useEntityListRelatedView } from "../../hooks/useEntityListRelatedView";
 import { useExploreState } from "../../hooks/useExploreState";
 import { useSummary } from "../../hooks/useSummary";
 import { ExploreActionKind, ExploreState } from "../../providers/exploreState";
+import { SELECT_CATEGORY_KEY } from "../../providers/exploreState/constants";
 import { DESKTOP_SM } from "../../theme/common/breakpoints";
 
 export type ExploreViewProps = AzulEntitiesStaticResponse;
@@ -111,13 +112,18 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
     categorySection?: string,
     searchTerm?: string
   ): void => {
+    const dispatchType =
+      categoryKey === SELECT_CATEGORY_KEY.SAVED_FILTERS
+        ? ExploreActionKind.ApplySavedFilter
+        : ExploreActionKind.UpdateFilter;
+
     exploreDispatch({
       payload: {
         categoryKey,
         selected,
         selectedValue: selectedCategoryValue,
       },
-      type: ExploreActionKind.UpdateFilter,
+      type: dispatchType,
     });
 
     trackingConfig?.trackFilterApplied?.({
@@ -226,23 +232,25 @@ function buildCategoryFilters(
   if (!categoryGroups) {
     return [{ categoryViews: selectCategoryViews }];
   }
-  return categoryGroups.map(({ categoryConfigs, label }) => {
+  return categoryGroups.reduce((accGroups, { categoryConfigs, label }) => {
     // Grab the category views for the configured grouped categories.
     const categoryViews = categoryConfigs.reduce(
-      (acc, { key: categoryKey }) => {
+      (accViews, { key: categoryKey }) => {
         const categoryView = selectCategoryViews.find(
           ({ key }) => key === categoryKey
         );
         if (categoryView) {
-          acc.push(categoryView);
+          accViews.push(categoryView);
         }
-        return acc;
+        return accViews;
       },
       [] as SelectCategoryView[]
     );
-    // Return the configured label and category views.
-    return { categoryViews, label };
-  });
+    if (categoryViews.length > 0) {
+      accGroups.push({ categoryViews, label });
+    }
+    return accGroups;
+  }, [] as CategoryFilter[]);
 }
 
 /**