@databiosphere/findable-ui 2.0.0 → 2.1.0

package/lib/providers/exploreState.d.ts

@@ -1,8 +1,8 @@
-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, CategoryGroupConfig, EntityPath, SiteConfig } from "../config/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";
 export declare type CatalogState = string | undefined;
 /**
@@ -19,32 +19,15 @@ export interface ExploreContext {
     config: SiteConfig;
     entityList: string;
 }
-/**
- * State for each entity.
- */
-export interface EntityPageState {
-    categoryConfigs?: CategoryConfig[];
-    categoryGroupConfigs?: CategoryGroupConfig[];
-    categoryViews: SelectCategory[];
-    columnsVisibility: Record<string, boolean>;
-    filterCount: number;
-    filterState: SelectedFilter[];
-    sorting: ColumnSort[];
-}
-/**
- * State for all entities.
- */
-export interface EntityPageStateMapper {
-    [key: EntityPath]: EntityPageState;
-}
 /**
  * Explore state.
  */
 export declare type ExploreState = {
     catalogState: CatalogState;
-    categoryGroupConfigs?: CategoryGroupConfig[];
+    categoryGroups?: CategoryGroup[];
     categoryViews: SelectCategory[];
     entityPageState: EntityPageStateMapper;
+    entityStateByCategoryGroupConfigKey: EntityStateByCategoryGroupConfigKey;
     featureFlagState: FeatureFlagState;
     filterCount: number;
     filterState: SelectedFilter[];

package/lib/providers/exploreState.js

@@ -29,8 +29,9 @@ const useAuthentication_1 = require("../hooks/useAuthentication/useAuthenticatio
 const useCategoryFilter_1 = require("../hooks/useCategoryFilter");
 const useConfig_1 = require("../hooks/useConfig");
 const useURLFilterParams_1 = require("../hooks/useURLFilterParams");
-const constants_1 = require("./exploreState/constants");
-const utils_1 = require("./exploreState/utils");
+const constants_1 = require("./exploreState/initializer/constants");
+const utils_1 = require("./exploreState/initializer/utils");
+const utils_2 = require("./exploreState/utils");
 /**
  * Entity view.
  */
@@ -66,11 +67,11 @@ function ExploreStateProvider({ children, entityListType, }) {
     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 [initializerArg] = (0, react_1.useState)(() => (0, utils_1.initReducerArguments)(config, entityList, decodedFilterParam, decodedCatalogParam, decodedFeatureFlagParam));
     const [exploreState, exploreDispatch] = (0, react_1.useReducer)((s, a) => exploreReducer(s, a, {
         config,
         entityList,
-    }), initReducerState);
+    }), initializerArg);
     // does this help? https://hswolff.com/blog/how-to-usecontext-with-usereducer/
     const exploreContextValue = (0, react_1.useMemo)(() => {
         return { exploreDispatch, exploreState };
@@ -119,7 +120,11 @@ function exploreReducer(state, action, exploreContext) {
          * Clear all filters
          **/
         case ExploreActionKind.ClearFilters: {
-            return Object.assign(Object.assign({}, state), { filterCount: 0, filterState: [], paginationState: (0, utils_1.resetPage)(state.paginationState) });
+            const filterCount = 0;
+            const filterState = [];
+            (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, { filterState });
+            return Object.assign(Object.assign({}, state), { filterCount,
+                filterState, paginationState: (0, utils_2.resetPage)(state.paginationState) });
         }
         /**
          * Paginate table
@@ -140,12 +145,13 @@ function exploreReducer(state, action, exploreContext) {
          * Process explore response
          **/
         case ExploreActionKind.ProcessExploreResponse: {
-            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) });
+                ? (0, useCategoryFilter_1.buildCategoryViews)(payload.selectCategories, (0, utils_2.getEntityCategoryConfigs)(state), state.filterState)
+                : state.categoryViews;
+            (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, {
+                categoryViews: nextCategoryViews,
+            });
+            return Object.assign(Object.assign({}, state), { categoryViews: nextCategoryViews, listItems: payload.loading ? [] : payload.listItems, loading: payload.loading, paginationState: Object.assign(Object.assign({}, state.paginationState), payload.paginationResponse) });
         }
         /**
          * Process related response
@@ -163,7 +169,7 @@ function exploreReducer(state, action, exploreContext) {
          * Reset the current state to the initial
          */
         case ExploreActionKind.ResetState: {
-            return (0, utils_1.initExploreState)(config, entityList, "");
+            return (0, utils_1.initReducerArguments)(config, entityList, "");
         }
         /**
          * Select entity type
@@ -172,7 +178,8 @@ function exploreReducer(state, action, exploreContext) {
             if (payload === state.tabValue) {
                 return state;
             }
-            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 });
+            const entityState = (0, utils_2.getEntityState)((0, utils_2.getEntityCategoryGroupConfigKey)(payload, state.entityPageState), state);
+            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 });
         }
         /**
          * Toggle entity view
@@ -185,26 +192,20 @@ function exploreReducer(state, action, exploreContext) {
          **/
         case ExploreActionKind.UpdateFilter: {
             const filterState = (0, useCategoryFilter_1.buildNextFilterState)(state.filterState, payload.categoryKey, payload.selectedValue, payload.selected);
-            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) });
+            (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, { filterState });
+            return Object.assign(Object.assign({}, state), { filterCount: (0, utils_2.getFilterCount)(filterState), filterState, paginationState: (0, utils_2.resetPage)(state.paginationState) });
         }
         /**
          * Update sorting
          **/
         case ExploreActionKind.UpdateSorting: {
-            const currentEntity = state.tabValue;
-            const currentPageState = state.entityPageState[currentEntity];
-            return Object.assign(Object.assign({}, state), { entityPageState: Object.assign(Object.assign({}, state.entityPageState), { [currentEntity]: Object.assign(Object.assign({}, currentPageState), { sorting: payload }) }), paginationState: (0, utils_1.resetPage)(state.paginationState) });
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { sorting: payload }), paginationState: (0, utils_2.resetPage)(state.paginationState) });
         }
         /**
          * Update column visibility
          **/
         case ExploreActionKind.UpdateColumnVisibility: {
-            const currentEntity = state.tabValue;
-            const currentPageState = state.entityPageState[currentEntity];
-            return Object.assign(Object.assign({}, state), { entityPageState: Object.assign(Object.assign({}, state.entityPageState), { [currentEntity]: Object.assign(Object.assign({}, currentPageState), { columnsVisibility: payload }) }) });
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { columnsVisibility: payload }) });
         }
         default:
             return state;

package/lib/views/ExploreView/exploreView.js

@@ -68,14 +68,14 @@ const ExploreView = (props) => {
     const { entities, explorerTitle, summaryConfig, trackingConfig } = config;
     const { listView } = entityConfig;
     const { listHero, subTitleHero } = listView || {};
-    const { categoryGroupConfigs, categoryViews, filterCount, isRelatedView, tabValue, } = exploreState;
+    const { categoryGroups, categoryViews, filterCount, isRelatedView, tabValue, } = exploreState;
     const { push } = (0, router_1.useRouter)();
     const tabs = getTabs(entities);
     const { response: summaryResponse } = (0, useSummary_1.useSummary)(); // Fetch summary.
     (0, useEntityList_1.useEntityList)(props); // Fetch entities.
     (0, useEntityListRelatedView_1.useEntityListRelatedView)(); // Fetch related entities.
     const { entityListType } = props;
-    const categoryFilters = (0, react_1.useMemo)(() => buildCategoryFilters(categoryViews, categoryGroupConfigs), [categoryViews, categoryGroupConfigs]);
+    const categoryFilters = (0, react_1.useMemo)(() => buildCategoryFilters(categoryViews, categoryGroups), [categoryGroups, categoryViews]);
     /**
      * Closes filter drawer.
      */
@@ -159,14 +159,14 @@ exports.ExploreView = ExploreView;
 /**
  * Builds the category views into category views grouped by the given category group configuration.
  * @param selectCategoryViews - View models of categories to display.
- * @param categoryGroupConfigs - Category group configuration.
+ * @param categoryGroups - Category groups.
  * @returns category filters.
  */
-function buildCategoryFilters(selectCategoryViews, categoryGroupConfigs) {
-    if (!categoryGroupConfigs) {
+function buildCategoryFilters(selectCategoryViews, categoryGroups) {
+    if (!categoryGroups) {
         return [{ categoryViews: selectCategoryViews }];
     }
-    return categoryGroupConfigs.map(({ categoryConfigs, label }) => {
+    return categoryGroups.map(({ categoryConfigs, label }) => {
         // Grab the category views for the configured grouped categories.
         const categoryViews = categoryConfigs.reduce((acc, { key: categoryKey }) => {
             const categoryView = selectCategoryViews.find(({ key }) => key === categoryKey);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "2.0.0",
+  "version": "2.1.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",
 })<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,6 +1,6 @@
 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 {
   BREAKPOINT_FN_NAME,
@@ -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/Table/table.tsx

@@ -31,7 +31,7 @@ import { useExploreMode } from "../../hooks/useExploreMode";
 import { useExploreState } from "../../hooks/useExploreState";
 import { useScroll } from "../../hooks/useScroll";
 import { ENTITY_VIEW, ExploreActionKind } from "../../providers/exploreState";
-import { DEFAULT_PAGINATION_STATE } from "../../providers/exploreState/constants";
+import { DEFAULT_PAGINATION_STATE } from "../../providers/exploreState/initializer/constants";
 import { TABLET } from "../../theme/common/breakpoints";
 import { FluidPaper, GridPaper } from "../common/Paper/paper.styles";
 import { NoResults } from "../NoResults/noResults";

package/src/components/common/AnchorLink/anchorLink.styles.ts

@@ -6,6 +6,7 @@ export const AnchorLink = styled(Link)`
   color: ${inkLight};
   margin-left: 4px;
   opacity: 0;
+  position: absolute;
   transition: opacity 0.2s ease-in-out;
 
   svg {

package/src/config/entities.ts

@@ -51,9 +51,17 @@ export interface BackPageTabConfig extends TabConfig {
 }
 
 /**
- * Model of grouped configured categories in site config.
+ * Model of category group config in site config.
  */
 export interface CategoryGroupConfig {
+  categoryGroups: CategoryGroup[];
+  key: string;
+}
+
+/**
+ * Model of grouped configured categories in site config.
+ */
+export interface CategoryGroup {
   categoryConfigs: CategoryConfig[];
   label?: string;
 }
@@ -143,7 +151,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[];
+  categoryGroupConfig?: CategoryGroupConfig;
   detail: BackPageConfig;
   entityMapper?: EntityMapper<T, I>;
   exploreMode: ExploreMode;
@@ -358,7 +366,7 @@ export interface SiteConfig {
   appTitle: string;
   authentication?: AuthenticationConfig;
   browserURL: string;
-  categoryGroupConfigs?: CategoryGroupConfig[];
+  categoryGroupConfig?: CategoryGroupConfig;
   contentDir?: string;
   contentThemeOptionsFn?: ThemeOptionsFn;
   dataSource: DataSourceConfig;

package/src/hooks/useEntityList.ts

@@ -12,7 +12,7 @@ import {
 import { EntityMapper } from "../config/entities";
 import { getEntityConfig } from "../config/utils";
 import { ExploreActionKind } from "../providers/exploreState";
-import { DEFAULT_PAGINATION_STATE } from "../providers/exploreState/constants";
+import { DEFAULT_PAGINATION_STATE } from "../providers/exploreState/initializer/constants";
 import { useAsync } from "./useAsync";
 import { useAuthentication } from "./useAuthentication/useAuthentication";
 import { useConfig } from "./useConfig";

package/src/hooks/useSessionTimeout.ts

@@ -1,4 +1,6 @@
-import { useEffect, useState } from "react";
+import Router from "next/router";
+import { useCallback, useEffect, useState } from "react";
+import { useConfig } from "./useConfig";
 import { useLocation } from "./useLocation";
 
 export const INACTIVITY_PARAM = "inactivityTimeout";
@@ -13,15 +15,19 @@ interface UseSessionTimeout {
  * @returns flag indicating if the session has timed out.
  */
 export const useSessionTimeout = (): UseSessionTimeout => {
+  const {
+    config: { redirectRootToPath },
+  } = useConfig();
   const [isSessionTimeout, setIsSessionTimeout] = useState<boolean>(false);
   // Get the session timeout from URL parameters.
   const { search } = useLocation() || {};
   const sessionTimeout = search?.get(INACTIVITY_PARAM);
 
   // Clears session timeout state.
-  const clearSessionTimeout = (): void => {
+  const clearSessionTimeout = useCallback((): void => {
     setIsSessionTimeout(false);
-  };
+    Router.replace(redirectRootToPath);
+  }, [redirectRootToPath]);
 
   useEffect(() => {
     setIsSessionTimeout(sessionTimeout === "true");

package/src/providers/exploreState/entities.ts

@@ -0,0 +1,32 @@
+import { ColumnSort } from "@tanstack/react-table";
+import { SelectCategory, SelectedFilter } from "../../common/entities";
+import {
+  CategoryConfig,
+  CategoryGroup,
+  CategoryGroupConfig,
+  EntityPath,
+} from "../../config/entities";
+
+export interface EntityPageState {
+  categoryGroupConfigKey: CategoryGroupConfigKey;
+  columnsVisibility: Record<string, boolean>;
+  sorting: ColumnSort[];
+}
+
+export interface EntityPageStateMapper {
+  [key: EntityPath]: EntityPageState;
+}
+
+export interface EntityState {
+  categoryConfigs?: CategoryConfig[];
+  categoryGroups?: CategoryGroup[];
+  categoryViews: SelectCategory[];
+  filterState: SelectedFilter[];
+}
+
+export type EntityStateByCategoryGroupConfigKey = Map<
+  CategoryGroupConfigKey,
+  EntityState
+>;
+
+export type CategoryGroupConfigKey = CategoryGroupConfig["key"];

package/src/providers/exploreState/{constants.ts → initializer/constants.ts}

@@ -1,6 +1,11 @@
-import { ExploreState, PaginationState } from "../exploreState";
+import { ExploreState, PaginationState } from "../../exploreState";
+import { EntityState } from "../entities";
+
+export const DEFAULT_ENTITY_STATE: EntityState = {
+  categoryViews: [],
+  filterState: [],
+};
 
-// Template constants
 export const DEFAULT_PAGINATION_STATE: PaginationState = {
   currentPage: 1,
   index: null,
@@ -11,11 +16,11 @@ export const DEFAULT_PAGINATION_STATE: PaginationState = {
   rows: 0,
 };
 
-// Initial state
 export const INITIAL_STATE: ExploreState = {
   catalogState: undefined,
   categoryViews: [],
   entityPageState: {},
+  entityStateByCategoryGroupConfigKey: new Map(),
   featureFlagState: undefined,
   filterCount: 0,
   filterState: [],

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

@@ -0,0 +1,183 @@
+import { SelectedFilter } from "../../../common/entities";
+import { getInitialTableColumnVisibility } from "../../../components/Table/common/utils";
+import {
+  CategoryConfig,
+  CategoryGroup,
+  CategoryGroupConfig,
+  EntityConfig,
+  SiteConfig,
+} from "../../../config/entities";
+import { getDefaultSorting } from "../../../config/utils";
+import { ExploreState } from "../../exploreState";
+import {
+  CategoryGroupConfigKey,
+  EntityPageStateMapper,
+  EntityStateByCategoryGroupConfigKey,
+} from "../entities";
+import { getEntityCategoryGroupConfigKey, getFilterCount } from "../utils";
+import { DEFAULT_ENTITY_STATE, INITIAL_STATE } from "./constants";
+
+/**
+ * Returns entity related configured category group config where entity config takes precedence over site config.
+ * @param siteConfig - Site config.
+ * @param entityConfig - Entity config.
+ * @returns entity related category group config.
+ */
+function getEntityCategoryGroupConfig(
+  siteConfig: SiteConfig,
+  entityConfig: EntityConfig
+): CategoryGroupConfig | undefined {
+  const siteCategoryGroupConfig = siteConfig.categoryGroupConfig;
+  const entityCategoryGroupConfig = entityConfig.categoryGroupConfig;
+  return entityCategoryGroupConfig ?? siteCategoryGroupConfig;
+}
+
+/**
+ * Returns configured category groups as a list of configured categories.
+ * @param categoryGroups - Configured category groups.
+ * @returns a list of configured categories.
+ */
+function flattenCategoryGroups(
+  categoryGroups?: CategoryGroup[]
+): CategoryConfig[] | undefined {
+  return categoryGroups?.flatMap(({ categoryConfigs }) => categoryConfigs);
+}
+
+/**
+ * Initializes category group config key for the entity.
+ * @param siteConfig - Site config.
+ * @param entityConfig - Entity config.
+ * @returns category group config key.
+ */
+function initCategoryGroupConfigKey(
+  siteConfig: SiteConfig,
+  entityConfig: EntityConfig
+): CategoryGroupConfigKey {
+  const categoryGroupConfig = getEntityCategoryGroupConfig(
+    siteConfig,
+    entityConfig
+  );
+  return categoryGroupConfig?.key || entityConfig.route;
+}
+
+/**
+ * Initializes category groups for the current entity.
+ * @param entityStateByCategoryGroupConfigKey - Entity state by category group config key.
+ * @param categoryGroupConfigKey - Category group config key.
+ * @returns category groups.
+ */
+function initCategoryGroups(
+  entityStateByCategoryGroupConfigKey: EntityStateByCategoryGroupConfigKey,
+  categoryGroupConfigKey: CategoryGroupConfigKey
+): CategoryGroup[] | undefined {
+  return entityStateByCategoryGroupConfigKey.get(categoryGroupConfigKey)
+    ?.categoryGroups;
+}
+
+/**
+ * Initializes entity page state.
+ * @param config - Site config.
+ * @returns entity page state.
+ */
+function initEntityPageState(config: SiteConfig): EntityPageStateMapper {
+  return config.entities.reduce((acc, entity): EntityPageStateMapper => {
+    return {
+      ...acc,
+      [entity.route]: {
+        categoryGroupConfigKey: initCategoryGroupConfigKey(config, entity),
+        columnsVisibility: getInitialTableColumnVisibility(entity.list.columns),
+        sorting: getDefaultSorting(entity),
+      },
+    };
+  }, {} as EntityPageStateMapper);
+}
+
+/**
+ * Initializes entity state by category group config key.
+ * @param config - Site config.
+ * @param categoryGroupConfigKey - Category group config key.
+ * @param filterState - Filter state.
+ * @returns entity state by category group config key.
+ */
+function initEntityStateByCategoryGroupConfigKey(
+  config: SiteConfig,
+  categoryGroupConfigKey: CategoryGroupConfigKey,
+  filterState: SelectedFilter[]
+): EntityStateByCategoryGroupConfigKey {
+  const entityStateByCategoryGroupConfigKey: EntityStateByCategoryGroupConfigKey =
+    new Map();
+  for (const entity of config.entities) {
+    const categoryGroupConfig = getEntityCategoryGroupConfig(config, entity);
+    if (!categoryGroupConfig) continue;
+    const { categoryGroups, key } = categoryGroupConfig;
+    if (entityStateByCategoryGroupConfigKey.has(key)) continue;
+    entityStateByCategoryGroupConfigKey.set(key, {
+      ...DEFAULT_ENTITY_STATE,
+      categoryConfigs: flattenCategoryGroups(categoryGroups),
+      categoryGroups,
+      filterState: key === categoryGroupConfigKey ? filterState : [],
+    });
+  }
+  return entityStateByCategoryGroupConfigKey;
+}
+
+/**
+ * Initializes filter state from URL "filter" parameter.
+ * @param decodedFilterParam - Decoded filter parameter.
+ * @returns filter state.
+ */
+function initFilterState(decodedFilterParam: string): SelectedFilter[] {
+  // Define filter state, from URL "filter" parameter, if present and valid.
+  let filterState: SelectedFilter[] = [];
+  try {
+    filterState = JSON.parse(decodedFilterParam);
+  } catch {
+    // do nothing
+  }
+  return filterState;
+}
+
+/**
+ * Returns the explore state reducer initial arguments.
+ * @param config - Site config.
+ * @param entityListType - Entity list type.
+ * @param decodedFilterParam - Decoded filter parameter.
+ * @param decodedCatalogParam - Decoded catalog parameter.
+ * @param decodedFeatureFlagParam - Decoded feature flag parameter.
+ * @returns explore state reducer initial arguments.
+ */
+export function initReducerArguments(
+  config: SiteConfig,
+  entityListType: string,
+  decodedFilterParam: string,
+  decodedCatalogParam?: string,
+  decodedFeatureFlagParam?: string
+): ExploreState {
+  const filterState = initFilterState(decodedFilterParam);
+  const entityPageState = initEntityPageState(config);
+  const categoryGroupConfigKey = getEntityCategoryGroupConfigKey(
+    entityListType,
+    entityPageState
+  );
+  const entityStateByCategoryGroupConfigKey =
+    initEntityStateByCategoryGroupConfigKey(
+      config,
+      categoryGroupConfigKey,
+      filterState
+    );
+  const categoryGroups = initCategoryGroups(
+    entityStateByCategoryGroupConfigKey,
+    categoryGroupConfigKey
+  );
+  return {
+    ...INITIAL_STATE,
+    catalogState: decodedCatalogParam,
+    categoryGroups,
+    entityPageState,
+    entityStateByCategoryGroupConfigKey,
+    featureFlagState: decodedFeatureFlagParam,
+    filterCount: getFilterCount(filterState),
+    filterState,
+    tabValue: entityListType,
+  };
+}