@databiosphere/findable-ui 4.0.0 → 6.0.0

package/lib/providers/exploreState/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateSelectColumnVisibility = exports.updateEntityStateByCategoryGroupConfigKey = exports.updateEntityPageStateSorting = exports.updateEntityPageState = exports.resetRowSelection = exports.resetPage = exports.patchEntityListItems = exports.getFilterCount = exports.getEntityStateSavedSorting = exports.getEntityStateSavedFilter = exports.getEntityState = exports.getEntityCategoryGroupConfigKey = exports.buildNextSavedFilterState = exports.buildEntityStateSavedFilterState = void 0;
+exports.updateSelectColumnVisibility = exports.updateEntityStateByCategoryGroupConfigKey = exports.updateEntityPageStateWithCommonCategoryGroupConfigKey = exports.updateEntityPageState = exports.resetPage = exports.patchEntityListItems = exports.getFilterCount = exports.getEntityStateSavedSorting = exports.getEntityStateSavedFilter = exports.getEntityState = exports.getEntityCategoryGroupConfigKey = exports.closeRowPreview = exports.buildNextSavedFilterState = exports.buildEntityStateSavedFilterState = void 0;
 const constants_1 = require("../../components/TableCreator/common/constants");
 const constants_2 = require("./initializer/constants");
 /**
@@ -30,6 +30,19 @@ function buildNextSavedFilterState(state, selectedValue, selected) {
     return (savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.filters) || [];
 }
 exports.buildNextSavedFilterState = buildNextSavedFilterState;
+/**
+ * Closes row preview, if row preview is enabled.
+ * If row preview is enabled, the row preview state value is set to false.
+ * @param rowPreview - Row preview state.
+ * @returns row preview state with row preview value set to false.
+ */
+function closeRowPreview(rowPreview) {
+    if (!rowPreview)
+        return rowPreview;
+    const [[key]] = Object.entries(rowPreview);
+    return { [key]: false };
+}
+exports.closeRowPreview = closeRowPreview;
 /**
  * Returns the category group config key for the current entity.
  * @param entityPath - Entity path.
@@ -115,21 +128,6 @@ function resetPage(paginationState) {
     return nextPaginationState;
 }
 exports.resetPage = resetPage;
-/**
- * Resets row selection for the current entity and entities that share the same category group config key.
- * @param state - Explore state.
- * @param categoryGroupConfigKey - Category group config key.
- * @returns entity page state mapper with row selection reset.
- */
-function resetRowSelection(state, categoryGroupConfigKey = getEntityCategoryGroupConfigKey(state.tabValue, state.entityPageState)) {
-    return Object.entries(state.entityPageState).reduce((acc, [entityPath, entityPageState]) => {
-        if (entityPageState.categoryGroupConfigKey === categoryGroupConfigKey) {
-            return Object.assign(Object.assign({}, acc), { [entityPath]: Object.assign(Object.assign({}, entityPageState), { rowSelection: {} }) });
-        }
-        return Object.assign(Object.assign({}, acc), { [entityPath]: entityPageState });
-    }, {});
-}
-exports.resetRowSelection = resetRowSelection;
 /**
  * Sets entity state for the given category group config key.
  * @param categoryGroupConfigKey - Category group config key.
@@ -152,23 +150,21 @@ entityPageState, nextEntityPageState) {
 }
 exports.updateEntityPageState = updateEntityPageState;
 /**
- * Updates entity page state sorting for all entities with the same category group config key.
+ * Updates entity page state for the current entity and entities that share the same category group config key.
  * @param state - Explore state.
- * @param sorting - Sorting.
+ * @param nextEntityPageState - Partial next entity page state.
+ * @param categoryGroupConfigKey - Category group config key.
  * @returns entity page state.
  */
-function updateEntityPageStateSorting(state, sorting) {
-    if (!sorting)
-        return state.entityPageState;
-    const categoryGroupConfigKey = getEntityCategoryGroupConfigKey(state.tabValue, state.entityPageState);
+function updateEntityPageStateWithCommonCategoryGroupConfigKey(state, nextEntityPageState, categoryGroupConfigKey = getEntityCategoryGroupConfigKey(state.tabValue, state.entityPageState)) {
     return Object.entries(state.entityPageState).reduce((acc, [entityPath, entityPageState]) => {
         if (entityPageState.categoryGroupConfigKey === categoryGroupConfigKey) {
-            return Object.assign(Object.assign({}, acc), { [entityPath]: Object.assign(Object.assign({}, entityPageState), { sorting }) });
+            return Object.assign(Object.assign({}, acc), { [entityPath]: Object.assign(Object.assign({}, entityPageState), nextEntityPageState) });
         }
         return Object.assign(Object.assign({}, acc), { [entityPath]: entityPageState });
     }, {});
 }
-exports.updateEntityPageStateSorting = updateEntityPageStateSorting;
+exports.updateEntityPageStateWithCommonCategoryGroupConfigKey = updateEntityPageStateWithCommonCategoryGroupConfigKey;
 /**
  * Updates entity state by category group config key.
  * @param state - Explore state.

package/lib/providers/exploreState.d.ts

@@ -1,17 +1,11 @@
 import React, { Dispatch, ReactNode } from "react";
 import { AzulSearchIndex } from "../apis/azul/common/entities";
 import { SelectCategoryView, SelectedFilter } from "../common/entities";
+import { RowPreviewState } from "../components/Table/features/RowPreview/entities";
 import { CategoryGroup, SiteConfig } from "../config/entities";
 import { EntityPageStateMapper, EntityStateByCategoryGroupConfigKey, ListItem } from "./exploreState/entities";
-import { ApplySavedFilterPayload, PaginateTablePayload, PatchExploreResponsePayload, ProcessExploreResponsePayload, ProcessRelatedResponsePayload, ResetExploreResponsePayload, ToggleEntityViewPayload, UpdateColumnVisibilityPayload, UpdateEntityFiltersPayload, UpdateEntityViewAccessPayload, UpdateFilterPayload, UpdateRowSelectionPayload, UpdateSortingPayload } from "./exploreState/payloads/entities";
+import { ApplySavedFilterPayload, PaginateTablePayload, PatchExploreResponsePayload, ProcessExploreResponsePayload, ResetExploreResponsePayload, UpdateColumnVisibilityPayload, UpdateEntityFiltersPayload, UpdateEntityViewAccessPayload, UpdateFilterPayload, UpdateRowPreviewPayload, UpdateRowSelectionPayload, UpdateSortingPayload } from "./exploreState/payloads/entities";
 export declare type CatalogState = string | undefined;
-/**
- * Entity view.
- */
-export declare enum ENTITY_VIEW {
-    EXACT = "EXACT",
-    RELATED = "RELATED"
-}
 /**
  * Explore context.
  */
@@ -31,12 +25,10 @@ export declare type ExploreState = {
     featureFlagState: FeatureFlagState;
     filterCount: number;
     filterState: SelectedFilter[];
-    isRelatedView: boolean;
     listItems: ListItems;
-    listView: ENTITY_VIEW | undefined;
     loading: boolean;
     paginationState: PaginationState;
-    relatedListItems: RelatedListItems;
+    rowPreview: RowPreviewState;
     tabValue: string;
 };
 /**
@@ -80,10 +72,6 @@ export interface PaginationState {
     previousIndex: PaginationIndex | null;
     rows: number;
 }
-/**
- * Related list items.
- */
-export declare type RelatedListItems = any[] | undefined;
 /**
  * Explore state context for storing and using filter-related and explore state.
  */
@@ -108,22 +96,21 @@ export declare enum ExploreActionKind {
     PaginateTable = "PAGINATE_TABLE",
     PatchExploreResponse = "PATCH_EXPLORE_RESPONSE",
     ProcessExploreResponse = "PROCESS_EXPLORE_RESPONSE",
-    ProcessRelatedResponse = "PROCESS_RELATED_RESPONSE",
     ResetExploreResponse = "RESET_EXPLORE_RESPONSE",
     ResetState = "RESET_STATE",
     SelectEntityType = "SELECT_ENTITY_TYPE",
-    ToggleEntityView = "TOGGLE_ENTITY_VIEW",
     UpdateColumnVisibility = "UPDATE_COLUMN_VISIBILITY",
     UpdateEntityFilters = "UPDATE_ENTITY_FILTERS",
     UpdateEntityViewAccess = "UPDATE_ENTITY_VIEW_ACCESS",
     UpdateFilter = "UPDATE_FILTER",
+    UpdateRowPreview = "UPDATE_ROW_PREVIEW",
     UpdateRowSelection = "UPDATE_ROW_SELECTION",
     UpdateSorting = "UPDATE_SORTING"
 }
 /**
  * Explore action.
  */
-export declare type ExploreAction = ApplySavedFilterAction | ClearFiltersAction | PaginateTableAction | PatchExploreResponseAction | ProcessExploreResponseAction | ProcessRelatedResponseAction | ResetExploreResponseAction | ResetStateAction | SelectEntityTypeAction | ToggleEntityViewAction | UpdateColumnVisibilityAction | UpdateEntityFiltersAction | UpdateEntityViewAccessAction | UpdateFilterAction | UpdateRowSelectionAction | UpdateSortingAction;
+export declare type ExploreAction = ApplySavedFilterAction | ClearFiltersAction | PaginateTableAction | PatchExploreResponseAction | ProcessExploreResponseAction | ResetExploreResponseAction | ResetStateAction | SelectEntityTypeAction | UpdateColumnVisibilityAction | UpdateEntityFiltersAction | UpdateEntityViewAccessAction | UpdateFilterAction | UpdateRowPreviewAction | UpdateRowSelectionAction | UpdateSortingAction;
 /**
  * Apply saved filter action.
  */
@@ -159,13 +146,6 @@ declare type ProcessExploreResponseAction = {
     payload: ProcessExploreResponsePayload;
     type: ExploreActionKind.ProcessExploreResponse;
 };
-/**
- * Process related response action.
- */
-declare type ProcessRelatedResponseAction = {
-    payload: ProcessRelatedResponsePayload;
-    type: ExploreActionKind.ProcessRelatedResponse;
-};
 /**
  * Reset explore response action.
  */
@@ -187,13 +167,6 @@ declare type SelectEntityTypeAction = {
     payload: string;
     type: ExploreActionKind.SelectEntityType;
 };
-/**
- * Toggle entity view action.
- */
-declare type ToggleEntityViewAction = {
-    payload: ToggleEntityViewPayload;
-    type: ExploreActionKind.ToggleEntityView;
-};
 /**
  * Update column visibility action.
  */
@@ -222,6 +195,13 @@ declare type UpdateFilterAction = {
     payload: UpdateFilterPayload;
     type: ExploreActionKind.UpdateFilter;
 };
+/**
+ * Update row preview action.
+ */
+export declare type UpdateRowPreviewAction = {
+    payload: UpdateRowPreviewPayload;
+    type: ExploreActionKind.UpdateRowPreview;
+};
 /**
  * Update row selection action.
  */

package/lib/providers/exploreState.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExploreActionKind = exports.ExploreStateProvider = exports.ExploreStateContext = exports.ENTITY_VIEW = void 0;
+exports.ExploreActionKind = exports.ExploreStateProvider = exports.ExploreStateContext = void 0;
 const react_1 = __importStar(require("react"));
 const useAuthentication_1 = require("../hooks/useAuthentication/useAuthentication");
 const useCategoryFilter_1 = require("../hooks/useCategoryFilter");
@@ -32,14 +32,6 @@ const useURLFilterParams_1 = require("../hooks/useURLFilterParams");
 const constants_1 = require("./exploreState/initializer/constants");
 const utils_1 = require("./exploreState/initializer/utils");
 const utils_2 = require("./exploreState/utils");
-/**
- * Entity view.
- */
-var ENTITY_VIEW;
-(function (ENTITY_VIEW) {
-    ENTITY_VIEW["EXACT"] = "EXACT";
-    ENTITY_VIEW["RELATED"] = "RELATED";
-})(ENTITY_VIEW = exports.ENTITY_VIEW || (exports.ENTITY_VIEW = {}));
 /**
  * Explore state context for storing and using filter-related and explore state.
  */
@@ -98,15 +90,14 @@ var ExploreActionKind;
     ExploreActionKind["PaginateTable"] = "PAGINATE_TABLE";
     ExploreActionKind["PatchExploreResponse"] = "PATCH_EXPLORE_RESPONSE";
     ExploreActionKind["ProcessExploreResponse"] = "PROCESS_EXPLORE_RESPONSE";
-    ExploreActionKind["ProcessRelatedResponse"] = "PROCESS_RELATED_RESPONSE";
     ExploreActionKind["ResetExploreResponse"] = "RESET_EXPLORE_RESPONSE";
     ExploreActionKind["ResetState"] = "RESET_STATE";
     ExploreActionKind["SelectEntityType"] = "SELECT_ENTITY_TYPE";
-    ExploreActionKind["ToggleEntityView"] = "TOGGLE_ENTITY_VIEW";
     ExploreActionKind["UpdateColumnVisibility"] = "UPDATE_COLUMN_VISIBILITY";
     ExploreActionKind["UpdateEntityFilters"] = "UPDATE_ENTITY_FILTERS";
     ExploreActionKind["UpdateEntityViewAccess"] = "UPDATE_ENTITY_VIEW_ACCESS";
     ExploreActionKind["UpdateFilter"] = "UPDATE_FILTER";
+    ExploreActionKind["UpdateRowPreview"] = "UPDATE_ROW_PREVIEW";
     ExploreActionKind["UpdateRowSelection"] = "UPDATE_ROW_SELECTION";
     ExploreActionKind["UpdateSorting"] = "UPDATE_SORTING";
 })(ExploreActionKind = exports.ExploreActionKind || (exports.ExploreActionKind = {}));
@@ -126,13 +117,16 @@ function exploreReducer(state, action, exploreContext) {
          **/
         case ExploreActionKind.ApplySavedFilter: {
             const filterState = (0, utils_2.buildNextSavedFilterState)(state, payload.selectedValue, payload.selected);
+            const rowPreview = (0, utils_2.closeRowPreview)(state.rowPreview);
+            const rowSelection = {};
             const savedFilterState = (0, utils_2.buildEntityStateSavedFilterState)(payload.categoryKey, payload.selectedValue, payload.selected);
             const savedSorting = (0, utils_2.getEntityStateSavedSorting)(state, payload.selectedValue, payload.selected);
+            const sorting = savedSorting || []; // Reset sorting to default if saved sorting is not available.
             (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) });
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageStateWithCommonCategoryGroupConfigKey)(state, { rowPreview, rowSelection, sorting }), filterCount: (0, utils_2.getFilterCount)(filterState), filterState, paginationState: (0, utils_2.resetPage)(state.paginationState), rowPreview });
         }
         /**
          * Clear all filters
@@ -140,13 +134,15 @@ function exploreReducer(state, action, exploreContext) {
         case ExploreActionKind.ClearFilters: {
             const filterCount = 0;
             const filterState = [];
+            const rowPreview = (0, utils_2.closeRowPreview)(state.rowPreview);
+            const rowSelection = {};
             const savedFilterState = [];
             (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, {
                 filterState,
                 savedFilterState,
             });
-            return Object.assign(Object.assign({}, state), { filterCount,
-                filterState, paginationState: (0, utils_2.resetPage)(state.paginationState) });
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageStateWithCommonCategoryGroupConfigKey)(state, { rowPreview, rowSelection }), filterCount,
+                filterState, paginationState: (0, utils_2.resetPage)(state.paginationState), rowPreview });
         }
         /**
          * Paginate table
@@ -161,7 +157,8 @@ function exploreReducer(state, action, exploreContext) {
                 nextPaginationState.currentPage--;
                 nextPaginationState.index = nextPaginationState.previousIndex;
             }
-            return Object.assign(Object.assign({}, state), { paginationState: nextPaginationState });
+            const rowPreview = (0, utils_2.closeRowPreview)(state.rowPreview);
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { rowPreview }), paginationState: nextPaginationState, rowPreview });
         }
         /**
          * Patch explore response
@@ -173,6 +170,7 @@ function exploreReducer(state, action, exploreContext) {
          * Process explore response
          **/
         case ExploreActionKind.ProcessExploreResponse: {
+            const entityPageState = state.entityPageState[state.tabValue];
             const entityState = (0, utils_2.getEntityState)(state);
             const nextCategoryViews = payload.selectCategories
                 ? (0, useCategoryFilter_1.buildCategoryViews)([
@@ -180,16 +178,11 @@ function exploreReducer(state, action, exploreContext) {
                     ...entityState.savedSelectCategories, // "savedFilter" select categories are built from config at reducer initialization.
                 ], entityState.categoryConfigs, [...state.filterState, ...entityState.savedFilterState])
                 : state.categoryViews;
+            const rowPreview = entityPageState.rowPreview;
             (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
-         */
-        case ExploreActionKind.ProcessRelatedResponse: {
-            return Object.assign(Object.assign({}, state), { relatedListItems: payload.relatedListItems });
+            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), rowPreview });
         }
         /**
          * Reset explore response.
@@ -211,31 +204,38 @@ function exploreReducer(state, action, exploreContext) {
                 return 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 });
-        }
-        /**
-         * Toggle entity view
-         */
-        case ExploreActionKind.ToggleEntityView: {
-            return Object.assign(Object.assign({}, state), { isRelatedView: payload === ENTITY_VIEW.RELATED, listView: payload });
+            const rowPreview = (0, utils_2.closeRowPreview)(state.rowPreview); // Close row preview, without updating the entity page state row preview.
+            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: Object.assign(Object.assign({}, (0, utils_2.resetPage)(state.paginationState)), { rows: 0 }), rowPreview, tabValue: payload });
         }
         /**
          * Update column visibility
          **/
         case ExploreActionKind.UpdateColumnVisibility: {
-            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { columnsVisibility: payload }) });
+            const columnsVisibility = payload;
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { columnsVisibility }) });
         }
         /**
          * Update entity filters.
+         * Updates state for the given entity and entities with the same category group config key, prior to navigation to the entity.
+         * Actions for the given entity and entities with the same category group config key:
+         * - updates filter state,
+         * - clears saved filter state,
+         * - resets row selection, and
+         * - closes row preview.
+         * Actions for the current entity:
+         * - closes row preview, without updating the entity page state row preview.
          */
         case ExploreActionKind.UpdateEntityFilters: {
-            const { entityListType, filters: filterState } = payload;
+            const { entityListType, filters: filterState, sorting } = payload;
             const categoryGroupConfigKey = (0, utils_2.getEntityCategoryGroupConfigKey)(entityListType, state.entityPageState);
+            const rowPreview = (0, utils_2.closeRowPreview)(state.entityPageState[entityListType].rowPreview);
+            const rowSelection = {};
+            const savedFilterState = [];
             (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, {
                 filterState,
-                savedFilterState: [], // Clear saved filter state.
+                savedFilterState,
             }, categoryGroupConfigKey);
-            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.resetRowSelection)(state, categoryGroupConfigKey) });
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageStateWithCommonCategoryGroupConfigKey)(state, { rowPreview, rowSelection, sorting }, categoryGroupConfigKey), rowPreview: (0, utils_2.closeRowPreview)(state.rowPreview) });
         }
         /**
          * Update entity view access
@@ -248,24 +248,36 @@ function exploreReducer(state, action, exploreContext) {
          **/
         case ExploreActionKind.UpdateFilter: {
             const filterState = (0, useCategoryFilter_1.buildNextFilterState)(state.filterState, payload.categoryKey, payload.selectedValue, payload.selected);
+            const rowPreview = (0, utils_2.closeRowPreview)(state.rowPreview);
+            const rowSelection = {};
             const savedFilterState = []; // Clear saved filter state.
             (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, {
                 filterState,
                 savedFilterState,
             });
-            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.resetRowSelection)(state), filterCount: (0, utils_2.getFilterCount)(filterState), filterState, paginationState: (0, utils_2.resetPage)(state.paginationState) });
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageStateWithCommonCategoryGroupConfigKey)(state, { rowPreview, rowSelection }), filterCount: (0, utils_2.getFilterCount)(filterState), filterState, paginationState: (0, utils_2.resetPage)(state.paginationState), rowPreview });
+        }
+        /**
+         * Update row preview
+         */
+        case ExploreActionKind.UpdateRowPreview: {
+            const rowPreview = payload;
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { rowPreview }), rowPreview });
         }
         /**
          * Update row selection
          */
         case ExploreActionKind.UpdateRowSelection: {
-            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { rowSelection: payload }) });
+            const rowSelection = payload;
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { rowSelection }) });
         }
         /**
          * Update sorting
          **/
         case ExploreActionKind.UpdateSorting: {
-            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { sorting: payload }), paginationState: (0, utils_2.resetPage)(state.paginationState) });
+            const rowPreview = (0, utils_2.closeRowPreview)(state.rowPreview);
+            const sorting = payload;
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { rowPreview, sorting }), paginationState: (0, utils_2.resetPage)(state.paginationState), rowPreview });
         }
         default:
             return state;

package/lib/styles/common/mixins/colors.d.ts

@@ -1,4 +1,4 @@
-import { CommonColors, PaletteColor } from "@mui/material/styles/createPalette";
+import { CommonColors, PaletteColor } from "@mui/material/styles";
 import { ThemeProps } from "../../../theme/theme";
 export declare const alertLight: ({ theme }: ThemeProps) => PaletteColor["light"];
 export declare const alertLightest: ({ theme, }: ThemeProps) => PaletteColor["lightest"];
@@ -10,6 +10,7 @@ export declare const infoMain: ({ theme }: ThemeProps) => PaletteColor["main"];
 export declare const inkLight: ({ theme }: ThemeProps) => PaletteColor["light"];
 export declare const inkMain: ({ theme }: ThemeProps) => PaletteColor["main"];
 export declare const primaryDark: ({ theme }: ThemeProps) => PaletteColor["dark"];
+export declare const primaryLightest: ({ theme, }: ThemeProps) => PaletteColor["lightest"];
 export declare const primaryMain: ({ theme }: ThemeProps) => PaletteColor["main"];
 export declare const smokeDark: ({ theme }: ThemeProps) => PaletteColor["dark"];
 export declare const smokeLight: ({ theme }: ThemeProps) => PaletteColor["light"];

package/lib/styles/common/mixins/colors.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.white = exports.warningMain = exports.warningLightest = exports.warningLight = exports.successMain = exports.successLightest = exports.successLight = exports.smokeMain = exports.smokeLightest = exports.smokeLight = exports.smokeDark = exports.primaryMain = exports.primaryDark = exports.inkMain = exports.inkLight = exports.infoMain = exports.infoLightest = exports.infoLight = exports.errorMain = exports.alertMain = exports.alertLightest = exports.alertLight = void 0;
+exports.white = exports.warningMain = exports.warningLightest = exports.warningLight = exports.successMain = exports.successLightest = exports.successLight = exports.smokeMain = exports.smokeLightest = exports.smokeLight = exports.smokeDark = exports.primaryMain = exports.primaryLightest = exports.primaryDark = exports.inkMain = exports.inkLight = exports.infoMain = exports.infoLightest = exports.infoLight = exports.errorMain = exports.alertMain = exports.alertLightest = exports.alertLight = void 0;
 // Alert
 const alertLight = ({ theme }) => theme.palette.alert.light;
 exports.alertLight = alertLight;
@@ -26,6 +26,8 @@ exports.inkMain = inkMain;
 // Primary
 const primaryDark = ({ theme }) => theme.palette.primary.dark;
 exports.primaryDark = primaryDark;
+const primaryLightest = ({ theme, }) => theme.palette.primary.lightest;
+exports.primaryLightest = primaryLightest;
 const primaryMain = ({ theme }) => theme.palette.primary.main;
 exports.primaryMain = primaryMain;
 // Smoke

package/lib/theme/common/components.js

@@ -542,11 +542,11 @@ const MuiChip = (theme) => {
             },
             {
                 props: { variant: "ntag" },
-                style: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_SMALL_400]), { backgroundColor: theme.palette.smoke.main, boxShadow: `0 0 0 2px ${palette_1.white}`, height: 24 }),
+                style: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_SMALL_400]), { backgroundColor: theme.palette.smoke.main, boxShadow: `0 0 0 2px ${palette_1.white}`, height: 24, justifySelf: FLEX_START, minWidth: 0 }),
             },
             {
                 props: { variant: "status" },
-                style: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_SMALL_500]), { boxShadow: `0 0 0 2px ${palette_1.white}`, height: 20, maxWidth: "fit-content" }),
+                style: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_SMALL_500]), { boxShadow: `0 0 0 2px ${palette_1.white}`, height: 20, maxWidth: "fit-content", minWidth: 0 }),
             },
         ],
     };
@@ -1063,6 +1063,15 @@ const MuiPaper = (theme) => {
                     },
                 },
             },
+            {
+                props: { variant: "table" },
+                style: {
+                    borderColor: theme.palette.smoke.main,
+                    borderStyle: "solid",
+                    borderWidth: 1,
+                    boxShadow: theme.shadows[1], // elevation01
+                },
+            },
         ],
     };
 };

package/lib/theme/common/palette.d.ts

@@ -1,5 +1,5 @@
 import { PaletteColorOptions } from "@mui/material";
-import { CommonColors, TypeBackground, TypeText } from "@mui/material/styles/createPalette";
+import { CommonColors, TypeBackground, TypeText } from "@mui/material/styles";
 /**
  * Palette "Alert"
  */
@@ -35,6 +35,7 @@ declare enum INK {
  */
 declare enum PRIMARY {
     DARK = "#005EA9",
+    LIGHTEST = "#E6EFF6",
     MAIN = "#1C7CC7"
 }
 /**
@@ -106,6 +107,7 @@ export declare const infoMain = INFO.CONTRAST_TEXT;
 export declare const inkLight = INK.LIGHT;
 export declare const inkMain = INK.MAIN;
 export declare const primaryDark = PRIMARY.DARK;
+export declare const primaryLightest = PRIMARY.LIGHTEST;
 export declare const primaryMain = PRIMARY.MAIN;
 export declare const smokeDark = SMOKE.DARK;
 export declare const smokeLight = SMOKE.LIGHT;

package/lib/theme/common/palette.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.warning = exports.text = exports.success = exports.smoke = exports.primary = exports.ink = exports.info = exports.common = exports.background = exports.alert = exports.black08 = exports.black04 = exports.alpha80 = exports.alpha64 = exports.alpha60 = exports.alpha32 = exports.alpha08 = exports.alpha04 = exports.white = exports.black = exports.warningMain = exports.warningLightest = exports.warningLight = exports.warningContrastText = exports.textPrimary = exports.successMain = exports.successLightest = exports.successLight = exports.smokeMain = exports.smokeLightest = exports.smokeLight = exports.smokeDark = exports.primaryMain = exports.primaryDark = exports.inkMain = exports.inkLight = exports.infoMain = exports.infoLightest = exports.infoLight = exports.infoContrastText = exports.backgroundDefault = exports.alertMain = exports.alertLightest = exports.alertLight = void 0;
+exports.warning = exports.text = exports.success = exports.smoke = exports.primary = exports.ink = exports.info = exports.common = exports.background = exports.alert = exports.black08 = exports.black04 = exports.alpha80 = exports.alpha64 = exports.alpha60 = exports.alpha32 = exports.alpha08 = exports.alpha04 = exports.white = exports.black = exports.warningMain = exports.warningLightest = exports.warningLight = exports.warningContrastText = exports.textPrimary = exports.successMain = exports.successLightest = exports.successLight = exports.smokeMain = exports.smokeLightest = exports.smokeLight = exports.smokeDark = exports.primaryMain = exports.primaryLightest = exports.primaryDark = exports.inkMain = exports.inkLight = exports.infoMain = exports.infoLightest = exports.infoLight = exports.infoContrastText = exports.backgroundDefault = exports.alertMain = exports.alertLightest = exports.alertLight = void 0;
 /**
  * Palette "Alert"
  */
@@ -41,6 +41,7 @@ var INK;
 var PRIMARY;
 (function (PRIMARY) {
     PRIMARY["DARK"] = "#005EA9";
+    PRIMARY["LIGHTEST"] = "#E6EFF6";
     PRIMARY["MAIN"] = "#1C7CC7";
 })(PRIMARY || (PRIMARY = {}));
 /**
@@ -119,6 +120,7 @@ exports.infoMain = INFO.MAIN;
 exports.inkLight = INK.LIGHT;
 exports.inkMain = INK.MAIN;
 exports.primaryDark = PRIMARY.DARK;
+exports.primaryLightest = PRIMARY.LIGHTEST;
 exports.primaryMain = PRIMARY.MAIN;
 exports.smokeDark = SMOKE.DARK;
 exports.smokeLight = SMOKE.LIGHT;
@@ -190,6 +192,7 @@ exports.ink = {
  */
 exports.primary = {
     dark: exports.primaryDark,
+    lightest: exports.primaryLightest,
     main: exports.primaryMain,
 };
 /**

package/lib/views/ExploreView/exploreView.js

@@ -42,7 +42,6 @@ const tableCreator_1 = require("../../components/TableCreator/tableCreator");
 const useBreakpointHelper_1 = require("../../hooks/useBreakpointHelper");
 const useConfig_1 = require("../../hooks/useConfig");
 const useEntityList_1 = require("../../hooks/useEntityList");
-const useEntityListRelatedView_1 = require("../../hooks/useEntityListRelatedView");
 const useExploreState_1 = require("../../hooks/useExploreState");
 const useSummary_1 = require("../../hooks/useSummary");
 const exploreState_1 = require("../../providers/exploreState");
@@ -69,12 +68,11 @@ const ExploreView = (props) => {
     const { entities, explorerTitle, summaryConfig, trackingConfig } = config;
     const { listView } = entityConfig;
     const { listHero, subTitleHero } = listView || {};
-    const { categoryGroups, categoryViews, filterCount, isRelatedView, tabValue, } = exploreState;
+    const { categoryGroups, categoryViews, filterCount, 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, categoryGroups), [categoryGroups, categoryViews]);
     /**
@@ -156,7 +154,7 @@ const ExploreView = (props) => {
                 react_1.default.createElement(sidebarLabel_1.SidebarLabel, { label: "Filters" }),
                 react_1.default.createElement(clearAllFilters_1.ClearAllFilters, null),
                 react_1.default.createElement(searchAllFilters_1.SearchAllFilters, { categoryViews: categoryViews, drawerOpen: isDrawerOpen, onFilter: onFilterChange.bind(null, true) })),
-            react_1.default.createElement(filters_1.Filters, { categoryFilters: categoryFilters, closeAncestor: onCloseDrawer, disabled: isRelatedView, onFilter: onFilterChange.bind(null, false), trackFilterOpened: trackingConfig === null || trackingConfig === void 0 ? void 0 : trackingConfig.trackFilterOpened }))),
+            react_1.default.createElement(filters_1.Filters, { categoryFilters: categoryFilters, closeAncestor: onCloseDrawer, onFilter: onFilterChange.bind(null, false), trackFilterOpened: trackingConfig === null || trackingConfig === void 0 ? void 0 : trackingConfig.trackFilterOpened }))),
         react_1.default.createElement(index_1.Index, { className: props.className, List: renderList(exploreState, entityConfig, entityListType), ListHero: renderComponent(listHero), SideBarButton: tabletDown ? (react_1.default.createElement(sidebarButton_1.SidebarButton, { count: filterCount, label: "Filter", onClick: onOpenDrawer })) : undefined, SubTitleHero: renderComponent(subTitleHero), Summaries: renderSummary(summaryConfig, summaryResponse), Tabs: react_1.default.createElement(tabs_1.Tabs, { onTabChange: onTabChange, tabs: tabs, value: tabValue }), title: explorerTitle })));
 };
 exports.ExploreView = ExploreView;
@@ -205,7 +203,7 @@ function renderComponent(componentsConfig, response) {
  * @returns rendered Table component.
  */
 function renderList(exploreState, entityConfig, entityListType) {
-    const { isRelatedView, listItems, loading, paginationState, relatedListItems, tabValue, } = exploreState;
+    const { listItems, loading, tabValue } = exploreState;
     const { getId: getRowId, list, listView } = entityConfig;
     const { columns: columnsConfig, defaultSort } = list;
     if (!exploreState || !tabValue) {
@@ -216,7 +214,7 @@ function renderList(exploreState, entityConfig, entityListType) {
         // 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);
     }
-    return (react_1.default.createElement(tableCreator_1.TableCreator, { columns: columnsConfig, defaultSort: defaultSort, getRowId: getRowId, 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 }));
+    return (react_1.default.createElement(tableCreator_1.TableCreator, { columns: columnsConfig, defaultSort: defaultSort, getRowId: getRowId, items: listItems !== null && listItems !== void 0 ? listItems : [], listView: listView, loading: loading }));
 }
 /**
  * Renders Summaries component when all the following requirements are fulfilled:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "4.0.0",
+  "version": "6.0.0",
   "description": "",
   "scripts": {
     "test": "jest",
@@ -66,7 +66,7 @@
     "@emotion/styled": "11.11.0",
     "@mui/icons-material": "5.14.1",
     "@mui/material": "5.14.1",
-    "@tanstack/react-table": "8.5.11",
+    "@tanstack/react-table": "^8.17.3",
     "@tanstack/react-virtual": "^3.0.0-beta.59",
     "axios": "^1.6.7",
     "copy-to-clipboard": "3.3.1",

package/src/components/ComponentCreator/ComponentCreator.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentsConfig } from "../../config/entities";
+import { ComponentsConfig, ViewContext } from "../../config/entities";
 import { useAuthentication } from "../../hooks/useAuthentication/useAuthentication";
 import { useConfig } from "../../hooks/useConfig";
 import { useExploreState } from "../../hooks/useExploreState";
@@ -9,6 +9,7 @@ import { useSystemStatus } from "../../hooks/useSystemStatus";
 export interface ComponentCreatorProps<T> {
   components: ComponentsConfig;
   response: T;
+  viewContext?: Partial<ViewContext<T>>;
 }
 
 /**
@@ -18,11 +19,13 @@ export interface ComponentCreatorProps<T> {
  * @param componentCreatorProps - Custom props required for creating component.
  * @param componentCreatorProps.components - Component config to render as React elements.
  * @param componentCreatorProps.response - Response returned from API endpoint, used to populate component props.
+ * @param componentCreatorProps.viewContext - Additional context to pass to the component.
  * @returns A set of React components.
  */
 export const ComponentCreator = <T,>({
   components,
   response,
+  viewContext,
 }: ComponentCreatorProps<T>): JSX.Element => {
   const { authenticationStatus, isAuthenticated } = useAuthentication();
   const { config, entityConfig } = useConfig();
@@ -43,10 +46,12 @@ export const ComponentCreator = <T,>({
             key={k}
             components={c.children}
             response={response}
+            viewContext={viewContext}
           />
         ) : null;
         const props = c.viewBuilder
           ? c.viewBuilder(response, {
+              ...viewContext,
               authState: {
                 authenticationStatus,
                 isAuthenticated,