@databiosphere/findable-ui 1.0.1 → 2.0.0

package/lib/components/Loading/loading.d.ts

@@ -13,9 +13,10 @@ export declare enum LOADING_PANEL_STYLE {
     INHERIT = "INHERIT"
 }
 export interface LoadingProps {
+    appear?: boolean;
     iconSize?: SvgIconProps["fontSize"];
     loading: boolean;
     panelStyle?: LoadingPanelStyle;
     text?: string;
 }
-export declare const Loading: ({ iconSize, loading, panelStyle, text, }: LoadingProps) => JSX.Element | null;
+export declare const Loading: ({ appear, iconSize, loading, panelStyle, text, }: LoadingProps) => JSX.Element | null;

package/lib/components/Loading/loading.js

@@ -16,8 +16,8 @@ var LOADING_PANEL_STYLE;
 (function (LOADING_PANEL_STYLE) {
     LOADING_PANEL_STYLE["INHERIT"] = "INHERIT";
 })(LOADING_PANEL_STYLE = exports.LOADING_PANEL_STYLE || (exports.LOADING_PANEL_STYLE = {}));
-const Loading = ({ iconSize = "large", loading, panelStyle = paper_1.PAPER_PANEL_STYLE.ROUNDED, text, }) => {
-    return (react_1.default.createElement(material_1.Fade, { in: loading, mountOnEnter: true, onEnter: (node) => onFadeEnter(node), onExited: (node) => onFadeExited(node), timeout: 300, unmountOnExit: true },
+const Loading = ({ appear = true, iconSize = "large", loading, panelStyle = paper_1.PAPER_PANEL_STYLE.ROUNDED, text, }) => {
+    return (react_1.default.createElement(material_1.Fade, { appear: appear, in: loading, mountOnEnter: true, onEnter: (node) => onFadeEnter(node), onExited: (node) => onFadeExited(node), timeout: 300, unmountOnExit: true },
         react_1.default.createElement(loading_styles_1.LoadingPositioner, { panelStyle: panelStyle },
             react_1.default.createElement(loading_styles_1.LoadingPaper, { panelStyle: panelStyle },
                 react_1.default.createElement(loadingIcon_1.LoadingIcon, { color: "primary", fontSize: iconSize }),
@@ -32,7 +32,7 @@ exports.Loading = Loading;
 function onFadeEnter(node) {
     const parentEl = node.parentElement;
     if (parentEl)
-        parentEl.style.position = "relative";
+        parentEl.style.setProperty("position", "relative");
 }
 /**
  * Callback fired after the "exited" status is applied.
@@ -42,5 +42,5 @@ function onFadeEnter(node) {
 function onFadeExited(node) {
     const parentEl = node.parentElement;
     if (parentEl)
-        parentEl.style.position = "";
+        parentEl.style.removeProperty("position");
 }

package/lib/components/TableCreator/tableCreator.js

@@ -41,6 +41,7 @@ const ComponentCreator_1 = require("../ComponentCreator/ComponentCreator");
 const loading_1 = require("../Loading/loading");
 const utils_1 = require("../Table/common/utils");
 const table_1 = require("../Table/table");
+const tableCreator_styles_1 = require("./tableCreator.styles");
 const createCell = (config) => 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- We can't determine the cell type
 function CellCreator({ row }) {
@@ -66,8 +67,8 @@ const TableCreator = ({ columns, defaultSort, items, listView, loading, pageCoun
         });
     }), [columns]);
     const initialState = (0, utils_1.getInitialState)(columns, defaultSort);
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(loading_1.Loading, { loading: loading || false, panelStyle: paper_1.PAPER_PANEL_STYLE.FLUID }),
+    return (react_1.default.createElement(tableCreator_styles_1.TableCreator, null,
+        react_1.default.createElement(loading_1.Loading, { appear: false, loading: loading || false, panelStyle: paper_1.PAPER_PANEL_STYLE.FLUID }),
         react_1.default.createElement(table_1.Table, { columns: columnDefs, count: pageCount, initialState: initialState, items: items, listView: listView, loading: loading, pages: pages, pageSize: pageSize, pagination: pagination, total: total })));
 };
 exports.TableCreator = TableCreator;

package/lib/components/TableCreator/tableCreator.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const TableCreator: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/TableCreator/tableCreator.styles.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCreator = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.TableCreator = styled_1.default.div `
+  position: relative; // Required; when the table mounts, the loading element should not transition in and therefore to position the loading element correctly, the parent container must be styled with position relative.
+`;

package/lib/config/entities.d.ts

@@ -115,6 +115,7 @@ export declare type EntityPath = string;
  */
 export interface EntityConfig<T = any, I = any> extends TabConfig {
     apiPath?: EntityPath;
+    categoryGroupConfigs?: CategoryGroupConfig[];
     detail: BackPageConfig;
     entityMapper?: EntityMapper<T, I>;
     exploreMode: ExploreMode;

package/lib/providers/exploreState/utils.js

@@ -24,12 +24,21 @@ exports.getFilterCount = getFilterCount;
  * @returns explore state.
  */
 function initExploreState(config, entityListType, decodedFilterParam, decodedCatalogParam, decodedFeatureFlagParam) {
+    const entityPageState = initEntityPageState(config);
     const filterState = initFilterState(decodedFilterParam);
     const filterCount = getFilterCount(filterState);
-    return Object.assign(Object.assign({}, constants_1.INITIAL_STATE), { catalogState: decodedCatalogParam, entityPageState: initEntityPageState(config), featureFlagState: decodedFeatureFlagParam, filterCount,
+    return Object.assign(Object.assign({}, constants_1.INITIAL_STATE), { catalogState: decodedCatalogParam, categoryGroupConfigs: entityPageState[entityListType].categoryGroupConfigs, entityPageState: initEntityPageState(config), featureFlagState: decodedFeatureFlagParam, filterCount,
         filterState, listView: exploreState_1.ENTITY_VIEW.EXACT, tabValue: entityListType });
 }
 exports.initExploreState = initExploreState;
+/**
+ * Returns configured grouped configured categories as a list of configured categories.
+ * @param categoryGroupConfigs - Configured category groups.
+ * @returns a list of configured categories.
+ */
+function flattenCategoryGroupConfigs(categoryGroupConfigs) {
+    return categoryGroupConfigs === null || categoryGroupConfigs === void 0 ? void 0 : categoryGroupConfigs.flatMap(({ categoryConfigs }) => categoryConfigs);
+}
 /**
  * Initializes filter state from URL "filter" parameter.
  * @param decodedFilterParam - Decoded filter parameter.
@@ -53,10 +62,19 @@ exports.initFilterState = initFilterState;
  * @returns entity page state.
  */
 function initEntityPageState(config) {
-    return config.entities.reduce((acc, entity) => (Object.assign(Object.assign({}, acc), { [entity.route]: {
-            columnsVisibility: (0, utils_1.getInitialTableColumnVisibility)(entity.list.columns),
-            sorting: (0, utils_2.getDefaultSorting)(entity),
-        } })), {});
+    const { categoryGroupConfigs } = config;
+    return config.entities.reduce((acc, entity) => {
+        var _a, _b;
+        return (Object.assign(Object.assign({}, acc), { [entity.route]: {
+                categoryConfigs: flattenCategoryGroupConfigs((_a = entity.categoryGroupConfigs) !== null && _a !== void 0 ? _a : categoryGroupConfigs),
+                categoryGroupConfigs: (_b = entity.categoryGroupConfigs) !== null && _b !== void 0 ? _b : categoryGroupConfigs,
+                categoryViews: [],
+                columnsVisibility: (0, utils_1.getInitialTableColumnVisibility)(entity.list.columns),
+                filterCount: 0,
+                filterState: [],
+                sorting: (0, utils_2.getDefaultSorting)(entity),
+            } }));
+    }, {});
 }
 exports.initEntityPageState = initEntityPageState;
 /**

package/lib/providers/exploreState.d.ts

@@ -2,7 +2,7 @@ import { ColumnSort } from "@tanstack/react-table";
 import React, { Dispatch, ReactNode } from "react";
 import { AzulSearchIndex } from "../apis/azul/common/entities";
 import { SelectCategory, SelectedFilter } from "../common/entities";
-import { CategoryConfig, EntityPath, SiteConfig } from "../config/entities";
+import { CategoryConfig, CategoryGroupConfig, EntityPath, SiteConfig } from "../config/entities";
 import { PaginateTablePayload, ProcessExploreResponsePayload, ProcessRelatedResponsePayload, ResetExploreResponsePayload, ToggleEntityViewPayload, UpdateColumnVisibilityPayload, UpdateFilterPayload, UpdateSortingPayload } from "./exploreState/payloads/entities";
 export declare type CatalogState = string | undefined;
 /**
@@ -16,7 +16,6 @@ export declare enum ENTITY_VIEW {
  * Explore context.
  */
 export interface ExploreContext {
-    categoryConfigs?: CategoryConfig[];
     config: SiteConfig;
     entityList: string;
 }
@@ -24,7 +23,12 @@ export interface ExploreContext {
  * State for each entity.
  */
 export interface EntityPageState {
+    categoryConfigs?: CategoryConfig[];
+    categoryGroupConfigs?: CategoryGroupConfig[];
+    categoryViews: SelectCategory[];
     columnsVisibility: Record<string, boolean>;
+    filterCount: number;
+    filterState: SelectedFilter[];
     sorting: ColumnSort[];
 }
 /**
@@ -38,6 +42,7 @@ export interface EntityPageStateMapper {
  */
 export declare type ExploreState = {
     catalogState: CatalogState;
+    categoryGroupConfigs?: CategoryGroupConfig[];
     categoryViews: SelectCategory[];
     entityPageState: EntityPageStateMapper;
     featureFlagState: FeatureFlagState;

package/lib/providers/exploreState.js

@@ -26,7 +26,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExploreActionKind = exports.ExploreStateProvider = exports.ExploreStateContext = exports.ENTITY_VIEW = void 0;
 const react_1 = __importStar(require("react"));
 const useAuthentication_1 = require("../hooks/useAuthentication/useAuthentication");
-const useCategoryConfigs_1 = require("../hooks/useCategoryConfigs");
 const useCategoryFilter_1 = require("../hooks/useCategoryFilter");
 const useConfig_1 = require("../hooks/useConfig");
 const useURLFilterParams_1 = require("../hooks/useURLFilterParams");
@@ -64,13 +63,11 @@ exports.ExploreStateContext = (0, react_1.createContext)({
  */
 function ExploreStateProvider({ children, entityListType, }) {
     const { config, defaultEntityListType } = (0, useConfig_1.useConfig)();
-    const categoryConfigs = (0, useCategoryConfigs_1.useCategoryConfigs)();
     const { decodedCatalogParam, decodedFeatureFlagParam, decodedFilterParam } = (0, useURLFilterParams_1.useURLFilterParams)();
     const { isEnabled: isAuthEnabled, token } = (0, useAuthentication_1.useAuthentication)();
     const entityList = entityListType || defaultEntityListType;
     const [initReducerState] = (0, react_1.useState)(() => (0, utils_1.initExploreState)(config, entityList, decodedFilterParam, decodedCatalogParam, decodedFeatureFlagParam));
     const [exploreState, exploreDispatch] = (0, react_1.useReducer)((s, a) => exploreReducer(s, a, {
-        categoryConfigs,
         config,
         entityList,
     }), initReducerState);
@@ -116,7 +113,7 @@ var ExploreActionKind;
  */
 function exploreReducer(state, action, exploreContext) {
     const { payload, type } = action;
-    const { categoryConfigs, config, entityList } = exploreContext;
+    const { config, entityList } = exploreContext;
     switch (type) {
         /**
          * Clear all filters
@@ -143,9 +140,12 @@ function exploreReducer(state, action, exploreContext) {
          * Process explore response
          **/
         case ExploreActionKind.ProcessExploreResponse: {
-            return Object.assign(Object.assign({}, state), { categoryViews: payload.selectCategories
-                    ? (0, useCategoryFilter_1.buildCategoryViews)(payload.selectCategories, categoryConfigs, state.filterState)
-                    : state.categoryViews, listItems: payload.loading ? [] : payload.listItems, loading: payload.loading, paginationState: Object.assign(Object.assign({}, state.paginationState), payload.paginationResponse) });
+            const { entityPageState, tabValue } = state;
+            const { categoryConfigs, categoryViews, filterState } = entityPageState[tabValue];
+            const nextCategoryViews = payload.selectCategories
+                ? (0, useCategoryFilter_1.buildCategoryViews)(payload.selectCategories, categoryConfigs, filterState)
+                : undefined;
+            return Object.assign(Object.assign({}, state), { categoryGroupConfigs: entityPageState[tabValue].categoryGroupConfigs, categoryViews: nextCategoryViews !== null && nextCategoryViews !== void 0 ? nextCategoryViews : categoryViews, entityPageState: Object.assign(Object.assign({}, entityPageState), { [tabValue]: Object.assign(Object.assign({}, entityPageState[tabValue]), { categoryViews: nextCategoryViews !== null && nextCategoryViews !== void 0 ? nextCategoryViews : categoryViews }) }), listItems: payload.loading ? [] : payload.listItems, loading: payload.loading, paginationState: Object.assign(Object.assign({}, state.paginationState), payload.paginationResponse) });
         }
         /**
          * Process related response
@@ -172,7 +172,7 @@ function exploreReducer(state, action, exploreContext) {
             if (payload === state.tabValue) {
                 return state;
             }
-            return Object.assign(Object.assign({}, state), { listItems: [], loading: true, paginationState: (0, utils_1.resetPage)(state.paginationState), tabValue: payload });
+            return Object.assign(Object.assign({}, state), { filterCount: state.entityPageState[payload].filterCount, filterState: state.entityPageState[payload].filterState, listItems: [], loading: true, paginationState: (0, utils_1.resetPage)(state.paginationState), tabValue: payload });
         }
         /**
          * Toggle entity view
@@ -185,7 +185,10 @@ function exploreReducer(state, action, exploreContext) {
          **/
         case ExploreActionKind.UpdateFilter: {
             const filterState = (0, useCategoryFilter_1.buildNextFilterState)(state.filterState, payload.categoryKey, payload.selectedValue, payload.selected);
-            return Object.assign(Object.assign({}, state), { filterCount: (0, utils_1.getFilterCount)(filterState), filterState, paginationState: (0, utils_1.resetPage)(state.paginationState) });
+            const filterCount = (0, utils_1.getFilterCount)(filterState);
+            return Object.assign(Object.assign({}, state), { entityPageState: Object.assign(Object.assign({}, state.entityPageState), { [state.tabValue]: Object.assign(Object.assign({}, state.entityPageState[state.tabValue]), { filterCount,
+                        filterState }) }), filterCount,
+                filterState, paginationState: (0, utils_1.resetPage)(state.paginationState) });
         }
         /**
          * Update sorting

package/lib/views/ExploreView/exploreView.js

@@ -65,10 +65,10 @@ const ExploreView = (props) => {
     const tabletDown = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.DOWN, breakpoints_1.DESKTOP_SM);
     const { config, entityConfig } = (0, useConfig_1.useConfig)(); // Get app level config.
     const { exploreDispatch, exploreState } = (0, useExploreState_1.useExploreState)(); // Get the useReducer state and dispatch for "Explore".
-    const { categoryGroupConfigs, entities, explorerTitle, summaryConfig, trackingConfig, } = config;
+    const { entities, explorerTitle, summaryConfig, trackingConfig } = config;
     const { listView } = entityConfig;
     const { listHero, subTitleHero } = listView || {};
-    const { categoryViews, filterCount, isRelatedView, tabValue } = exploreState;
+    const { categoryGroupConfigs, categoryViews, filterCount, isRelatedView, tabValue, } = exploreState;
     const { push } = (0, router_1.useRouter)();
     const tabs = getTabs(entities);
     const { response: summaryResponse } = (0, useSummary_1.useSummary)(); // Fetch summary.
@@ -208,7 +208,7 @@ function renderList(exploreState, entityConfig, entityListType) {
     if (entityListType !== tabValue) {
         // required currently for client-side fetching as the pre-rendered page
         // loads with the previous tabs data on the first render after switching tabs. (or similar)
-        return react_1.default.createElement(react_1.default.Fragment, null); // TODO(Fran) review loading and return.
+        return react_1.default.createElement(react_1.default.Fragment, null);
     }
     return (react_1.default.createElement(tableCreator_1.TableCreator, { columns: columnsConfig, defaultSort: defaultSort, items: isRelatedView && relatedListItems ? relatedListItems : listItems !== null && listItems !== void 0 ? listItems : [], listView: listView, loading: loading, pages: paginationState.pages, pageSize: paginationState.pageSize, pagination: undefined, total: paginationState.rows }));
 }

package/package.json

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

package/src/components/Loading/loading.tsx

@@ -21,6 +21,7 @@ export enum LOADING_PANEL_STYLE {
 }
 
 export interface LoadingProps {
+  appear?: boolean; // Note, if false, the component will not transition on the initial render and onEnter callbacks will not be called. In this instance, ensure the parent container is styled correctly with position relative.
   iconSize?: SvgIconProps["fontSize"];
   loading: boolean;
   panelStyle?: LoadingPanelStyle; // Enables loading to mirror parent container styles.
@@ -28,6 +29,7 @@ export interface LoadingProps {
 }
 
 export const Loading = ({
+  appear = true,
   iconSize = "large",
   loading,
   panelStyle = PAPER_PANEL_STYLE.ROUNDED,
@@ -35,6 +37,7 @@ export const Loading = ({
 }: LoadingProps): JSX.Element | null => {
   return (
     <Fade
+      appear={appear}
       in={loading}
       mountOnEnter
       onEnter={(node: HTMLElement): void => onFadeEnter(node)}
@@ -59,7 +62,7 @@ export const Loading = ({
  */
 function onFadeEnter(node: HTMLElement): void {
   const parentEl = node.parentElement;
-  if (parentEl) parentEl.style.position = "relative";
+  if (parentEl) parentEl.style.setProperty("position", "relative");
 }
 
 /**
@@ -69,5 +72,5 @@ function onFadeEnter(node: HTMLElement): void {
  */
 function onFadeExited(node: HTMLElement): void {
   const parentEl = node.parentElement;
-  if (parentEl) parentEl.style.position = "";
+  if (parentEl) parentEl.style.removeProperty("position");
 }

package/src/components/TableCreator/tableCreator.styles.ts

@@ -0,0 +1,5 @@
+import styled from "@emotion/styled";
+
+export const TableCreator = styled.div`
+  position: relative; // Required; when the table mounts, the loading element should not transition in and therefore to position the loading element correctly, the parent container must be styled with position relative.
+`;

package/src/components/TableCreator/tableCreator.tsx

@@ -11,6 +11,7 @@ import {
   sortingFn,
 } from "../Table/common/utils";
 import { Table } from "../Table/table";
+import { TableCreator as TableCreatorContainer } from "./tableCreator.styles";
 
 export interface TableCreatorProps<T> {
   columns: ColumnConfig<T>[];
@@ -69,8 +70,9 @@ export const TableCreator = <T extends object>({
   );
   const initialState = getInitialState(columns, defaultSort);
   return (
-    <div>
+    <TableCreatorContainer>
       <Loading
+        appear={false}
         loading={loading || false}
         panelStyle={PAPER_PANEL_STYLE.FLUID}
       />
@@ -86,6 +88,6 @@ export const TableCreator = <T extends object>({
         pagination={pagination}
         total={total}
       />
-    </div>
+    </TableCreatorContainer>
   );
 };

package/src/config/entities.ts

@@ -143,6 +143,7 @@ export type EntityPath = string;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- This config model is part of a generic array
 export interface EntityConfig<T = any, I = any> extends TabConfig {
   apiPath?: EntityPath;
+  categoryGroupConfigs?: CategoryGroupConfig[];
   detail: BackPageConfig;
   entityMapper?: EntityMapper<T, I>;
   exploreMode: ExploreMode;

package/src/providers/exploreState/utils.ts

@@ -1,6 +1,10 @@
 import { SelectedFilter } from "../../common/entities";
 import { getInitialTableColumnVisibility } from "../../components/Table/common/utils";
-import { SiteConfig } from "../../config/entities";
+import {
+  CategoryConfig,
+  CategoryGroupConfig,
+  SiteConfig,
+} from "../../config/entities";
 import { getDefaultSorting } from "../../config/utils";
 import {
   EntityPageStateMapper,
@@ -35,11 +39,13 @@ export function initExploreState(
   decodedCatalogParam?: string,
   decodedFeatureFlagParam?: string
 ): ExploreState {
+  const entityPageState = initEntityPageState(config);
   const filterState = initFilterState(decodedFilterParam);
   const filterCount = getFilterCount(filterState);
   return {
     ...INITIAL_STATE,
     catalogState: decodedCatalogParam,
+    categoryGroupConfigs: entityPageState[entityListType].categoryGroupConfigs,
     entityPageState: initEntityPageState(config),
     featureFlagState: decodedFeatureFlagParam,
     filterCount,
@@ -49,6 +55,19 @@ export function initExploreState(
   };
 }
 
+/**
+ * Returns configured grouped configured categories as a list of configured categories.
+ * @param categoryGroupConfigs - Configured category groups.
+ * @returns a list of configured categories.
+ */
+function flattenCategoryGroupConfigs(
+  categoryGroupConfigs?: CategoryGroupConfig[]
+): CategoryConfig[] | undefined {
+  return categoryGroupConfigs?.flatMap(
+    ({ categoryConfigs }) => categoryConfigs
+  );
+}
+
 /**
  * Initializes filter state from URL "filter" parameter.
  * @param decodedFilterParam - Decoded filter parameter.
@@ -71,11 +90,20 @@ export function initFilterState(decodedFilterParam: string): SelectedFilter[] {
  * @returns entity page state.
  */
 export function initEntityPageState(config: SiteConfig): EntityPageStateMapper {
+  const { categoryGroupConfigs } = config;
   return config.entities.reduce(
     (acc, entity) => ({
       ...acc,
       [entity.route]: {
+        categoryConfigs: flattenCategoryGroupConfigs(
+          entity.categoryGroupConfigs ?? categoryGroupConfigs
+        ),
+        categoryGroupConfigs:
+          entity.categoryGroupConfigs ?? categoryGroupConfigs,
+        categoryViews: [],
         columnsVisibility: getInitialTableColumnVisibility(entity.list.columns),
+        filterCount: 0,
+        filterState: [],
         sorting: getDefaultSorting(entity),
       },
     }),

package/src/providers/exploreState.tsx

@@ -10,9 +10,13 @@ import React, {
 } from "react";
 import { AzulSearchIndex } from "../apis/azul/common/entities";
 import { SelectCategory, SelectedFilter } from "../common/entities";
-import { CategoryConfig, EntityPath, SiteConfig } from "../config/entities";
+import {
+  CategoryConfig,
+  CategoryGroupConfig,
+  EntityPath,
+  SiteConfig,
+} from "../config/entities";
 import { useAuthentication } from "../hooks/useAuthentication/useAuthentication";
-import { useCategoryConfigs } from "../hooks/useCategoryConfigs";
 import {
   buildCategoryViews,
   buildNextFilterState,
@@ -53,7 +57,6 @@ export enum ENTITY_VIEW {
  * Explore context.
  */
 export interface ExploreContext {
-  categoryConfigs?: CategoryConfig[];
   config: SiteConfig;
   entityList: string;
 }
@@ -62,7 +65,12 @@ export interface ExploreContext {
  * State for each entity.
  */
 export interface EntityPageState {
+  categoryConfigs?: CategoryConfig[];
+  categoryGroupConfigs?: CategoryGroupConfig[];
+  categoryViews: SelectCategory[];
   columnsVisibility: Record<string, boolean>;
+  filterCount: number;
+  filterState: SelectedFilter[];
   sorting: ColumnSort[];
 }
 
@@ -78,6 +86,7 @@ export interface EntityPageStateMapper {
  */
 export type ExploreState = {
   catalogState: CatalogState;
+  categoryGroupConfigs?: CategoryGroupConfig[];
   categoryViews: SelectCategory[];
   entityPageState: EntityPageStateMapper;
   featureFlagState: FeatureFlagState;
@@ -177,7 +186,6 @@ export function ExploreStateProvider({
   entityListType: string;
 }): JSX.Element {
   const { config, defaultEntityListType } = useConfig();
-  const categoryConfigs = useCategoryConfigs();
   const { decodedCatalogParam, decodedFeatureFlagParam, decodedFilterParam } =
     useURLFilterParams();
   const { isEnabled: isAuthEnabled, token } = useAuthentication();
@@ -195,7 +203,6 @@ export function ExploreStateProvider({
   const [exploreState, exploreDispatch] = useReducer(
     (s: ExploreState, a: ExploreAction) =>
       exploreReducer(s, a, {
-        categoryConfigs,
         config,
         entityList,
       }),
@@ -357,7 +364,7 @@ function exploreReducer(
   exploreContext: ExploreContext
 ): ExploreState {
   const { payload, type } = action;
-  const { categoryConfigs, config, entityList } = exploreContext;
+  const { config, entityList } = exploreContext;
 
   switch (type) {
     /**
@@ -392,15 +399,27 @@ function exploreReducer(
      * Process explore response
      **/
     case ExploreActionKind.ProcessExploreResponse: {
+      const { entityPageState, tabValue } = state;
+      const { categoryConfigs, categoryViews, filterState } =
+        entityPageState[tabValue];
+      const nextCategoryViews = payload.selectCategories
+        ? buildCategoryViews(
+            payload.selectCategories,
+            categoryConfigs,
+            filterState
+          )
+        : undefined;
       return {
         ...state,
-        categoryViews: payload.selectCategories
-          ? buildCategoryViews(
-              payload.selectCategories,
-              categoryConfigs,
-              state.filterState
-            )
-          : state.categoryViews,
+        categoryGroupConfigs: entityPageState[tabValue].categoryGroupConfigs,
+        categoryViews: nextCategoryViews ?? categoryViews,
+        entityPageState: {
+          ...entityPageState,
+          [tabValue]: {
+            ...entityPageState[tabValue],
+            categoryViews: nextCategoryViews ?? categoryViews,
+          },
+        },
         listItems: payload.loading ? [] : payload.listItems,
         loading: payload.loading,
         paginationState: {
@@ -444,6 +463,8 @@ function exploreReducer(
       }
       return {
         ...state,
+        filterCount: state.entityPageState[payload].filterCount,
+        filterState: state.entityPageState[payload].filterState,
         listItems: [],
         loading: true,
         paginationState: resetPage(state.paginationState),
@@ -470,9 +491,18 @@ function exploreReducer(
         payload.selectedValue,
         payload.selected
       );
+      const filterCount = getFilterCount(filterState);
       return {
         ...state,
-        filterCount: getFilterCount(filterState),
+        entityPageState: {
+          ...state.entityPageState,
+          [state.tabValue]: {
+            ...state.entityPageState[state.tabValue],
+            filterCount,
+            filterState,
+          },
+        },
+        filterCount,
         filterState,
         paginationState: resetPage(state.paginationState),
       };

package/src/views/ExploreView/exploreView.tsx

@@ -66,16 +66,16 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
   const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
   const { config, entityConfig } = useConfig(); // Get app level config.
   const { exploreDispatch, exploreState } = useExploreState(); // Get the useReducer state and dispatch for "Explore".
-  const {
-    categoryGroupConfigs,
-    entities,
-    explorerTitle,
-    summaryConfig,
-    trackingConfig,
-  } = config;
+  const { entities, explorerTitle, summaryConfig, trackingConfig } = config;
   const { listView } = entityConfig;
   const { listHero, subTitleHero } = listView || {};
-  const { categoryViews, filterCount, isRelatedView, tabValue } = exploreState;
+  const {
+    categoryGroupConfigs,
+    categoryViews,
+    filterCount,
+    isRelatedView,
+    tabValue,
+  } = exploreState;
   const { push } = useRouter();
   const tabs = getTabs(entities);
   const { response: summaryResponse } = useSummary(); // Fetch summary.
@@ -291,7 +291,7 @@ function renderList(
   if (entityListType !== tabValue) {
     // required currently for client-side fetching as the pre-rendered page
     // loads with the previous tabs data on the first render after switching tabs. (or similar)
-    return <></>; // TODO(Fran) review loading and return.
+    return <></>;
   }
 
   return (

package/src/hooks/useCategoryConfigs.ts

@@ -1,17 +0,0 @@
-import { useMemo } from "react";
-import { CategoryConfig } from "../config/entities";
-import { useConfig } from "./useConfig";
-
-/**
- * Returns configured grouped configured categories as a list of configured categories.
- * @returns a list of configured categories.
- */
-export const useCategoryConfigs = (): CategoryConfig[] | undefined => {
-  const { config } = useConfig();
-  const { categoryGroupConfigs } = config;
-  return useMemo(() => {
-    return categoryGroupConfigs?.flatMap(
-      ({ categoryConfigs }) => categoryConfigs
-    );
-  }, [categoryGroupConfigs]);
-};