@databiosphere/findable-ui 2.0.0 → 2.0.1

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

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,
+  };
+}