@databiosphere/findable-ui 2.0.1 → 2.2.0

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.0.1",
+  "version": "2.2.0",
   "description": "",
   "scripts": {
     "test": "jest",

package/src/components/Filter/components/FilterLabel/filterLabel.styles.ts

@@ -3,7 +3,7 @@ import { Button } from "@mui/material";
 import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
 
 export const FilterLabel = styled(Button)`
-  color: ${({ theme }) => theme.palette.ink.main};
+  font-weight: inherit;
   gap: 0;
   justify-content: space-between;
   padding: 10px 16px;
@@ -15,7 +15,6 @@ export const FilterLabel = styled(Button)`
   }
 
   &.Mui-disabled {
-    color: ${({ theme }) => theme.palette.ink.main};
     opacity: 0.3;
   }
 

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

@@ -1,15 +1,23 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
+import { inkLight, inkMain } from "../../../../styles/common/mixins/colors";
+import {
+  textBody400,
+  textBody500,
+} from "../../../../styles/common/mixins/fonts";
 
 interface Props {
   disabled: boolean;
   height: number;
+  isBaseStyle: boolean;
 }
 
 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))};
   height: ${({ height }) => height}px;
   margin: 8px 0;
   overflow: auto;
@@ -32,3 +40,13 @@ export const Filters = styled("div", {
     padding: 0 12px 0 16px;
   }
 `;
+
+export const CategoryViewsLabel = styled("div")`
+  ${textBody500};
+  color: ${inkMain};
+  padding: 8px 16px;
+
+  ${mediaDesktopSmallUp} {
+    padding: 8px 0;
+  }
+`;

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, useRef, useState } from "react";
+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,
@@ -11,7 +11,7 @@ import { useWindowResize } from "../../../../hooks/useWindowResize";
 import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
 import { Filter } from "../Filter/filter";
 import { FilterTags } from "../FilterTags/filterTags";
-import { Filters as FilterList } from "./filters.styles";
+import { CategoryViewsLabel, Filters as FilterList } from "./filters.styles";
 
 export interface CategoryFilter {
   categoryViews: SelectCategoryView[];
@@ -76,16 +76,26 @@ export const Filters = ({
   const { height: windowHeight } = useWindowResize();
   const filterListRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<number>(0);
+  const isLabeled = useMemo(
+    () => isCategoryViewsLabeled(categoryFilters),
+    [categoryFilters]
+  );
 
   useEffect(() => {
     setHeight(calculateListHeight(windowHeight, filterListRef.current));
   }, [windowHeight]);
 
   return (
-    <FilterList disabled={disabled} height={height} ref={filterListRef}>
+    <FilterList
+      disabled={disabled}
+      height={height}
+      isBaseStyle={!isLabeled}
+      ref={filterListRef}
+    >
       {categoryFilters.map(({ categoryViews, label }, i) => (
         <Fragment key={i}>
           {i !== 0 && <Divider />}
+          {label && <CategoryViewsLabel>{label}</CategoryViewsLabel>}
           {categoryViews.map((categoryView) => (
             <Filter
               key={categoryView.key}
@@ -116,3 +126,12 @@ function calculateListHeight(
 ): number {
   return windowHeight - (filterListEl?.getBoundingClientRect()?.top ?? 0);
 }
+
+/**
+ * Returns true if any category views are labelled.
+ * @param categoryFilters - Category filters.
+ * @returns true if any category views are labelled.
+ */
+function isCategoryViewsLabeled(categoryFilters: CategoryFilter[]): boolean {
+  return categoryFilters.some(({ label }) => label);
+}

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,