@databiosphere/findable-ui 2.1.0 → 3.0.0

package/lib/providers/exploreState/utils.js

@@ -1,7 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateEntityStateByCategoryGroupConfigKey = exports.updateEntityPageState = exports.resetPage = exports.getFilterCount = exports.getEntityState = exports.getEntityCategoryConfigs = exports.getEntityCategoryGroupConfigKey = void 0;
-const constants_1 = require("./initializer/constants");
+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;
+const constants_1 = require("../../components/TableCreator/common/constants");
+const constants_2 = require("./initializer/constants");
+/**
+ * Returns the entity state saved filter state for the given category key.
+ * @param categoryKey - Category key.
+ * @param selectedValue - Key of category value that has been de/selected.
+ * @param selected - True if value is selected, false if de-selected.
+ * @returns entity state saved filter state.
+ */
+function buildEntityStateSavedFilterState(categoryKey, selectedValue, selected) {
+    if (!selected)
+        return [];
+    return [{ categoryKey, value: [selectedValue] }];
+}
+exports.buildEntityStateSavedFilterState = buildEntityStateSavedFilterState;
+/**
+ * Build new set of selected filters on de/select of a "saved filter" filter.
+ * @param state - Explore state.
+ * @param selectedValue - Key of category value that has been de/selected.
+ * @param selected - True if value is selected, false if de-selected.
+ * @returns new selected filters.
+ */
+function buildNextSavedFilterState(state, selectedValue, selected) {
+    if (!selected)
+        return []; // Clears all filters on de-select of saved filter.
+    const savedFilter = getEntityStateSavedFilter(state, selectedValue);
+    return (savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.filters) || [];
+}
+exports.buildNextSavedFilterState = buildNextSavedFilterState;
 /**
  * Returns the category group config key for the current entity.
  * @param entityPath - Entity path.
@@ -13,25 +41,42 @@ function getEntityCategoryGroupConfigKey(entityPath, entityPageState) {
 }
 exports.getEntityCategoryGroupConfigKey = getEntityCategoryGroupConfigKey;
 /**
- * Returns the category configs for the current entity.
+ * Returns the entity state for the current entity.
  * @param state - Explore state.
- * @returns category configs.
- */
-function getEntityCategoryConfigs(state) {
-    return getEntityState(getEntityCategoryGroupConfigKey(state.tabValue, state.entityPageState), state).categoryConfigs;
-}
-exports.getEntityCategoryConfigs = getEntityCategoryConfigs;
-/**
- * Returns the entity state for the given category group config key.
  * @param categoryGroupConfigKey - Category group config key.
- * @param state - Explore state.
  * @returns entity state.
  */
-function getEntityState(categoryGroupConfigKey, state) {
+function getEntityState(state, categoryGroupConfigKey = getEntityCategoryGroupConfigKey(state.tabValue, state.entityPageState)) {
     return (state.entityStateByCategoryGroupConfigKey.get(categoryGroupConfigKey) ||
-        constants_1.DEFAULT_ENTITY_STATE);
+        constants_2.DEFAULT_ENTITY_STATE);
 }
 exports.getEntityState = getEntityState;
+/**
+ * Returns the saved filter/sorting for the given category key.
+ * @param state - Explore state.
+ * @param categoryValueKey - Category key.
+ * @returns saved filter/sorting for the category key.
+ */
+function getEntityStateSavedFilter(state, categoryValueKey) {
+    var _a;
+    const entityState = getEntityState(state);
+    return (_a = entityState.savedFilterByCategoryValueKey) === null || _a === void 0 ? void 0 : _a.get(categoryValueKey);
+}
+exports.getEntityStateSavedFilter = getEntityStateSavedFilter;
+/**
+ * Returns entity state "saved filter" sorting for the given category value key.
+ * @param state - Explore state.
+ * @param selectedValue - Key of category value that has been de/selected.
+ * @param selected - True if value is selected, false if de-selected.
+ * @returns sorting.
+ */
+function getEntityStateSavedSorting(state, selectedValue, selected) {
+    if (!selected)
+        return;
+    const savedFilter = getEntityStateSavedFilter(state, selectedValue);
+    return savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.sorting;
+}
+exports.getEntityStateSavedSorting = getEntityStateSavedSorting;
 /**
  * Returns the filter count.
  * @param filterState - Filter state.
@@ -41,6 +86,23 @@ function getFilterCount(filterState) {
     return filterState.reduce((acc, filter) => acc + filter.value.length, 0);
 }
 exports.getFilterCount = getFilterCount;
+/**
+ * Returns list items with updated list items patched.
+ * @param listItems - List items.
+ * @param updatedListItems - List items to patch.
+ * @param listItemKey - List item key identifier to map list items.
+ * @returns list items with updated list items patched.
+ */
+function patchEntityListItems(listItems, updatedListItems, listItemKey) {
+    if (!listItems || !updatedListItems)
+        return listItems;
+    const listItemById = new Map(listItems.map((listItem) => [listItem[listItemKey], listItem]));
+    updatedListItems.forEach((listItem) => {
+        listItemById.set(listItem[listItemKey], listItem);
+    });
+    return [...listItemById.values()];
+}
+exports.patchEntityListItems = patchEntityListItems;
 /**
  * Resets pagination.
  * @param paginationState - Pagination state.
@@ -53,6 +115,21 @@ 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.
+ * @returns entity page state mapper with row selection reset.
+ */
+function resetRowSelection(state) {
+    const 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.
@@ -74,6 +151,24 @@ entityPageState, nextEntityPageState) {
     return Object.assign(Object.assign({}, entityPageState), { [entityPath]: Object.assign(Object.assign({}, entityPageState[entityPath]), nextEntityPageState) });
 }
 exports.updateEntityPageState = updateEntityPageState;
+/**
+ * Updates entity page state sorting for all entities with the same category group config key.
+ * @param state - Explore state.
+ * @param sorting - Sorting.
+ * @returns entity page state.
+ */
+function updateEntityPageStateSorting(state, sorting) {
+    if (!sorting)
+        return state.entityPageState;
+    const categoryGroupConfigKey = getEntityCategoryGroupConfigKey(state.tabValue, state.entityPageState);
+    return Object.entries(state.entityPageState).reduce((acc, [entityPath, entityPageState]) => {
+        if (entityPageState.categoryGroupConfigKey === categoryGroupConfigKey) {
+            return Object.assign(Object.assign({}, acc), { [entityPath]: Object.assign(Object.assign({}, entityPageState), { sorting }) });
+        }
+        return Object.assign(Object.assign({}, acc), { [entityPath]: entityPageState });
+    }, {});
+}
+exports.updateEntityPageStateSorting = updateEntityPageStateSorting;
 /**
  * Updates entity state by category group config key.
  * @param state - Explore state.
@@ -82,9 +177,25 @@ exports.updateEntityPageState = updateEntityPageState;
  */
 function updateEntityStateByCategoryGroupConfigKey(state, nextEntityState) {
     const categoryGroupConfigKey = getEntityCategoryGroupConfigKey(state.tabValue, state.entityPageState);
-    const entityState = getEntityState(categoryGroupConfigKey, state);
+    const entityState = getEntityState(state, categoryGroupConfigKey);
     if (entityState) {
         setEntityStateByCategoryGroupConfigKey(categoryGroupConfigKey, state, Object.assign(Object.assign({}, entityState), nextEntityState));
     }
 }
 exports.updateEntityStateByCategoryGroupConfigKey = updateEntityStateByCategoryGroupConfigKey;
+/**
+ *  Updates the entity page state for each entity with row selection enabled,
+ *  by updating the visibility of the "select" column based on user access and resetting row selection state.
+ * @param state - Explore state.
+ * @param canEdit - User has edit access.
+ * @returns new entity page state mapper with updated column visibility and row selection state.
+ */
+function updateSelectColumnVisibility(state, canEdit) {
+    return Object.entries(state.entityPageState).reduce((acc, [entityPath, entityPageState]) => {
+        if (entityPageState.enableRowSelection) {
+            return Object.assign(Object.assign({}, acc), { [entityPath]: Object.assign(Object.assign({}, entityPageState), { columnsVisibility: Object.assign(Object.assign({}, entityPageState.columnsVisibility), { [constants_1.ACCESSOR_KEYS.SELECT]: canEdit }), rowSelection: {} }) });
+        }
+        return Object.assign(Object.assign({}, acc), { [entityPath]: entityPageState });
+    }, {});
+}
+exports.updateSelectColumnVisibility = updateSelectColumnVisibility;

package/lib/providers/exploreState.d.ts

@@ -1,9 +1,9 @@
 import React, { Dispatch, ReactNode } from "react";
 import { AzulSearchIndex } from "../apis/azul/common/entities";
-import { SelectCategory, SelectedFilter } from "../common/entities";
+import { SelectCategoryView, SelectedFilter } from "../common/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";
+import { EntityPageStateMapper, EntityStateByCategoryGroupConfigKey, ListItem } from "./exploreState/entities";
+import { ApplySavedFilterPayload, PaginateTablePayload, PatchExploreResponsePayload, ProcessExploreResponsePayload, ProcessRelatedResponsePayload, ResetExploreResponsePayload, ToggleEntityViewPayload, UpdateColumnVisibilityPayload, UpdateEntityViewAccessPayload, UpdateFilterPayload, UpdateRowSelectionPayload, UpdateSortingPayload } from "./exploreState/payloads/entities";
 export declare type CatalogState = string | undefined;
 /**
  * Entity view.
@@ -25,7 +25,7 @@ export interface ExploreContext {
 export declare type ExploreState = {
     catalogState: CatalogState;
     categoryGroups?: CategoryGroup[];
-    categoryViews: SelectCategory[];
+    categoryViews: SelectCategoryView[];
     entityPageState: EntityPageStateMapper;
     entityStateByCategoryGroupConfigKey: EntityStateByCategoryGroupConfigKey;
     featureFlagState: FeatureFlagState;
@@ -50,7 +50,7 @@ export declare type FeatureFlagState = string | undefined;
 /**
  * List items.
  */
-export declare type ListItems = any[] | undefined;
+export declare type ListItems = ListItem[] | undefined;
 /**
  * Pagination index.
  */
@@ -103,8 +103,10 @@ export declare function ExploreStateProvider({ children, entityListType, }: {
  * Explore action kind.
  */
 export declare enum ExploreActionKind {
+    ApplySavedFilter = "APPLY_SAVED_FILTER",
     ClearFilters = "CLEAR_FILTERS",
     PaginateTable = "PAGINATE_TABLE",
+    PatchExploreResponse = "PATCH_EXPLORE_RESPONSE",
     ProcessExploreResponse = "PROCESS_EXPLORE_RESPONSE",
     ProcessRelatedResponse = "PROCESS_RELATED_RESPONSE",
     ResetExploreResponse = "RESET_EXPLORE_RESPONSE",
@@ -112,13 +114,22 @@ export declare enum ExploreActionKind {
     SelectEntityType = "SELECT_ENTITY_TYPE",
     ToggleEntityView = "TOGGLE_ENTITY_VIEW",
     UpdateColumnVisibility = "UPDATE_COLUMN_VISIBILITY",
+    UpdateEntityViewAccess = "UPDATE_ENTITY_VIEW_ACCESS",
     UpdateFilter = "UPDATE_FILTER",
+    UpdateRowSelection = "UPDATE_ROW_SELECTION",
     UpdateSorting = "UPDATE_SORTING"
 }
 /**
  * Explore action.
  */
-export declare type ExploreAction = ClearFiltersAction | PaginateTableAction | ProcessExploreResponseAction | ProcessRelatedResponseAction | ResetExploreResponseAction | ResetStateAction | SelectEntityTypeAction | ToggleEntityViewAction | UpdateColumnVisibilityAction | UpdateFilterAction | UpdateSortingAction;
+export declare type ExploreAction = ApplySavedFilterAction | ClearFiltersAction | PaginateTableAction | PatchExploreResponseAction | ProcessExploreResponseAction | ProcessRelatedResponseAction | ResetExploreResponseAction | ResetStateAction | SelectEntityTypeAction | ToggleEntityViewAction | UpdateColumnVisibilityAction | UpdateEntityViewAccessAction | UpdateFilterAction | UpdateRowSelectionAction | UpdateSortingAction;
+/**
+ * Apply saved filter action.
+ */
+declare type ApplySavedFilterAction = {
+    payload: ApplySavedFilterPayload;
+    type: ExploreActionKind.ApplySavedFilter;
+};
 /**
  * Clear filters action.
  */
@@ -133,6 +144,13 @@ declare type PaginateTableAction = {
     payload: PaginateTablePayload;
     type: ExploreActionKind.PaginateTable;
 };
+/**
+ * Patch explore response action.
+ */
+declare type PatchExploreResponseAction = {
+    payload: PatchExploreResponsePayload;
+    type: ExploreActionKind.PatchExploreResponse;
+};
 /**
  * Process explore response action.
  */
@@ -169,7 +187,7 @@ declare type SelectEntityTypeAction = {
     type: ExploreActionKind.SelectEntityType;
 };
 /**
- * Toggle entity view.
+ * Toggle entity view action.
  */
 declare type ToggleEntityViewAction = {
     payload: ToggleEntityViewPayload;
@@ -182,6 +200,13 @@ declare type UpdateColumnVisibilityAction = {
     payload: UpdateColumnVisibilityPayload;
     type: ExploreActionKind.UpdateColumnVisibility;
 };
+/**
+ * Update entity view access action.
+ */
+declare type UpdateEntityViewAccessAction = {
+    payload: UpdateEntityViewAccessPayload;
+    type: ExploreActionKind.UpdateEntityViewAccess;
+};
 /**
  * Update filter action.
  */
@@ -189,6 +214,13 @@ declare type UpdateFilterAction = {
     payload: UpdateFilterPayload;
     type: ExploreActionKind.UpdateFilter;
 };
+/**
+ * Update row selection action.
+ */
+declare type UpdateRowSelectionAction = {
+    payload: UpdateRowSelectionPayload;
+    type: ExploreActionKind.UpdateRowSelection;
+};
 /**
  * Update sorting action.
  */

package/lib/providers/exploreState.js

@@ -93,8 +93,10 @@ exports.ExploreStateProvider = ExploreStateProvider;
  */
 var ExploreActionKind;
 (function (ExploreActionKind) {
+    ExploreActionKind["ApplySavedFilter"] = "APPLY_SAVED_FILTER";
     ExploreActionKind["ClearFilters"] = "CLEAR_FILTERS";
     ExploreActionKind["PaginateTable"] = "PAGINATE_TABLE";
+    ExploreActionKind["PatchExploreResponse"] = "PATCH_EXPLORE_RESPONSE";
     ExploreActionKind["ProcessExploreResponse"] = "PROCESS_EXPLORE_RESPONSE";
     ExploreActionKind["ProcessRelatedResponse"] = "PROCESS_RELATED_RESPONSE";
     ExploreActionKind["ResetExploreResponse"] = "RESET_EXPLORE_RESPONSE";
@@ -102,7 +104,9 @@ var ExploreActionKind;
     ExploreActionKind["SelectEntityType"] = "SELECT_ENTITY_TYPE";
     ExploreActionKind["ToggleEntityView"] = "TOGGLE_ENTITY_VIEW";
     ExploreActionKind["UpdateColumnVisibility"] = "UPDATE_COLUMN_VISIBILITY";
+    ExploreActionKind["UpdateEntityViewAccess"] = "UPDATE_ENTITY_VIEW_ACCESS";
     ExploreActionKind["UpdateFilter"] = "UPDATE_FILTER";
+    ExploreActionKind["UpdateRowSelection"] = "UPDATE_ROW_SELECTION";
     ExploreActionKind["UpdateSorting"] = "UPDATE_SORTING";
 })(ExploreActionKind = exports.ExploreActionKind || (exports.ExploreActionKind = {}));
 /**
@@ -116,13 +120,30 @@ function exploreReducer(state, action, exploreContext) {
     const { payload, type } = action;
     const { config, entityList } = exploreContext;
     switch (type) {
+        /**
+         * Apply saved filter
+         **/
+        case ExploreActionKind.ApplySavedFilter: {
+            const filterState = (0, utils_2.buildNextSavedFilterState)(state, payload.selectedValue, payload.selected);
+            const savedFilterState = (0, utils_2.buildEntityStateSavedFilterState)(payload.categoryKey, payload.selectedValue, payload.selected);
+            const savedSorting = (0, utils_2.getEntityStateSavedSorting)(state, payload.selectedValue, payload.selected);
+            (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, {
+                filterState,
+                savedFilterState,
+            });
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageStateSorting)(state, savedSorting), filterCount: (0, utils_2.getFilterCount)(filterState), filterState, paginationState: (0, utils_2.resetPage)(state.paginationState) });
+        }
         /**
          * Clear all filters
          **/
         case ExploreActionKind.ClearFilters: {
             const filterCount = 0;
             const filterState = [];
-            (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, { filterState });
+            const savedFilterState = [];
+            (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, {
+                filterState,
+                savedFilterState,
+            });
             return Object.assign(Object.assign({}, state), { filterCount,
                 filterState, paginationState: (0, utils_2.resetPage)(state.paginationState) });
         }
@@ -141,12 +162,22 @@ function exploreReducer(state, action, exploreContext) {
             }
             return Object.assign(Object.assign({}, state), { paginationState: nextPaginationState });
         }
+        /**
+         * Patch explore response
+         */
+        case ExploreActionKind.PatchExploreResponse: {
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { rowSelection: {} }), listItems: (0, utils_2.patchEntityListItems)(state.listItems, payload.updatedListItems, payload.listItemKey) });
+        }
         /**
          * Process explore response
          **/
         case ExploreActionKind.ProcessExploreResponse: {
+            const entityState = (0, utils_2.getEntityState)(state);
             const nextCategoryViews = payload.selectCategories
-                ? (0, useCategoryFilter_1.buildCategoryViews)(payload.selectCategories, (0, utils_2.getEntityCategoryConfigs)(state), state.filterState)
+                ? (0, useCategoryFilter_1.buildCategoryViews)([
+                    ...payload.selectCategories,
+                    ...entityState.savedSelectCategories, // "savedFilter" select categories are built from config at reducer initialization.
+                ], entityState.categoryConfigs, [...state.filterState, ...entityState.savedFilterState])
                 : state.categoryViews;
             (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, {
                 categoryViews: nextCategoryViews,
@@ -178,7 +209,7 @@ function exploreReducer(state, action, exploreContext) {
             if (payload === state.tabValue) {
                 return state;
             }
-            const entityState = (0, utils_2.getEntityState)((0, utils_2.getEntityCategoryGroupConfigKey)(payload, state.entityPageState), state);
+            const entityState = (0, utils_2.getEntityState)(state, (0, utils_2.getEntityCategoryGroupConfigKey)(payload, state.entityPageState));
             return Object.assign(Object.assign({}, state), { categoryGroups: entityState.categoryGroups, categoryViews: entityState.categoryViews, filterCount: (0, utils_2.getFilterCount)(entityState.filterState), filterState: entityState.filterState, listItems: [], loading: true, paginationState: (0, utils_2.resetPage)(state.paginationState), tabValue: payload });
         }
         /**
@@ -187,13 +218,35 @@ function exploreReducer(state, action, exploreContext) {
         case ExploreActionKind.ToggleEntityView: {
             return Object.assign(Object.assign({}, state), { isRelatedView: payload === ENTITY_VIEW.RELATED, listView: payload });
         }
+        /**
+         * Update column visibility
+         **/
+        case ExploreActionKind.UpdateColumnVisibility: {
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { columnsVisibility: payload }) });
+        }
+        /**
+         * Update entity view access
+         **/
+        case ExploreActionKind.UpdateEntityViewAccess: {
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateSelectColumnVisibility)(state, payload.canEdit) });
+        }
         /**
          * Update filter
          **/
         case ExploreActionKind.UpdateFilter: {
             const filterState = (0, useCategoryFilter_1.buildNextFilterState)(state.filterState, payload.categoryKey, payload.selectedValue, payload.selected);
-            (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) });
+            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) });
+        }
+        /**
+         * Update row selection
+         */
+        case ExploreActionKind.UpdateRowSelection: {
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { rowSelection: payload }) });
         }
         /**
          * Update sorting
@@ -201,12 +254,6 @@ function exploreReducer(state, action, exploreContext) {
         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) });
         }
-        /**
-         * Update column visibility
-         **/
-        case ExploreActionKind.UpdateColumnVisibility: {
-            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { columnsVisibility: payload }) });
-        }
         default:
             return state;
     }

package/lib/theme/common/components.js

@@ -1198,6 +1198,10 @@ const MuiTableCell = (theme) => {
         styleOverrides: {
             body: Object.assign({}, theme.typography[typography_1.TEXT_BODY_400]),
             head: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_SMALL_500]), { padding: "20px" }),
+            paddingCheckbox: {
+                paddingRight: 0,
+                width: "unset",
+            },
             root: {
                 padding: "18px 20px",
             },

package/lib/views/ExploreView/exploreView.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
 import { AzulEntitiesStaticResponse } from "../../apis/azul/common/entities";
-export declare type ExploreViewProps = AzulEntitiesStaticResponse;
+export interface ExploreViewProps extends AzulEntitiesStaticResponse {
+    className?: string;
+}
 export declare const ExploreView: (props: ExploreViewProps) => JSX.Element;

package/lib/views/ExploreView/exploreView.js

@@ -46,6 +46,7 @@ const useEntityListRelatedView_1 = require("../../hooks/useEntityListRelatedView
 const useExploreState_1 = require("../../hooks/useExploreState");
 const useSummary_1 = require("../../hooks/useSummary");
 const exploreState_1 = require("../../providers/exploreState");
+const constants_1 = require("../../providers/exploreState/constants");
 const breakpoints_1 = require("../../theme/common/breakpoints");
 /**
  * Returns tabs to be used as a prop for the Tabs component.
@@ -93,13 +94,16 @@ const ExploreView = (props) => {
      */
     const onFilterChange = (fromSearchAll, categoryKey, selectedCategoryValue, selected, categorySection, searchTerm) => {
         var _a;
+        const dispatchType = categoryKey === constants_1.SELECT_CATEGORY_KEY.SAVED_FILTERS
+            ? exploreState_1.ExploreActionKind.ApplySavedFilter
+            : exploreState_1.ExploreActionKind.UpdateFilter;
         exploreDispatch({
             payload: {
                 categoryKey,
                 selected,
                 selectedValue: selectedCategoryValue,
             },
-            type: exploreState_1.ExploreActionKind.UpdateFilter,
+            type: dispatchType,
         });
         (_a = trackingConfig === null || trackingConfig === void 0 ? void 0 : trackingConfig.trackFilterApplied) === null || _a === void 0 ? void 0 : _a.call(trackingConfig, {
             category: categoryKey,
@@ -153,7 +157,7 @@ const ExploreView = (props) => {
                 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(index_1.Index, { 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 })));
+        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;
 /**
@@ -166,18 +170,20 @@ function buildCategoryFilters(selectCategoryViews, categoryGroups) {
     if (!categoryGroups) {
         return [{ categoryViews: selectCategoryViews }];
     }
-    return categoryGroups.map(({ categoryConfigs, label }) => {
+    return categoryGroups.reduce((accGroups, { categoryConfigs, label }) => {
         // Grab the category views for the configured grouped categories.
-        const categoryViews = categoryConfigs.reduce((acc, { key: categoryKey }) => {
+        const categoryViews = categoryConfigs.reduce((accViews, { key: categoryKey }) => {
             const categoryView = selectCategoryViews.find(({ key }) => key === categoryKey);
             if (categoryView) {
-                acc.push(categoryView);
+                accViews.push(categoryView);
             }
-            return acc;
+            return accViews;
         }, []);
-        // Return the configured label and category views.
-        return { categoryViews, label };
-    });
+        if (categoryViews.length > 0) {
+            accGroups.push({ categoryViews, label });
+        }
+        return accGroups;
+    }, []);
 }
 /**
  * Optionally renders component config.
@@ -200,7 +206,7 @@ function renderComponent(componentsConfig, response) {
  */
 function renderList(exploreState, entityConfig, entityListType) {
     const { isRelatedView, listItems, loading, paginationState, relatedListItems, tabValue, } = exploreState;
-    const { list, listView } = entityConfig;
+    const { getId: getRowId, list, listView } = entityConfig;
     const { columns: columnsConfig, defaultSort } = list;
     if (!exploreState || !tabValue) {
         return react_1.default.createElement(react_1.default.Fragment, null); //TODO: return the loading UI component
@@ -210,7 +216,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, 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: isRelatedView && relatedListItems ? relatedListItems : listItems !== null && listItems !== void 0 ? listItems : [], listView: listView, loading: loading, pages: paginationState.pages, pageSize: paginationState.pageSize, pagination: undefined, total: paginationState.rows }));
 }
 /**
  * Renders Summaries component when all the following requirements are fulfilled:

package/package.json

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

package/src/components/Detail/components/DetailViewTable/detailViewTable.tsx

@@ -7,7 +7,7 @@ import {
   RoundedPaper,
 } from "../../../common/Paper/paper.styles";
 import { NoResults } from "../../../NoResults/noResults";
-import { TableToolbar } from "../../../Table/components/TableToolbar/tableToolbar.styles";
+import { Toolbar } from "../../../Table/components/TableToolbar/tableToolbar.styles";
 import { Table } from "../Table/table";
 
 interface DetailViewTableProps<T extends object> {
@@ -32,7 +32,7 @@ export const DetailViewTable = <T extends object>({
   return items.length > 0 ? (
     <Paper className={className}>
       <GridPaper>
-        {tools && <TableToolbar>{tools}</TableToolbar>}
+        {tools && <Toolbar variant="table">{tools}</Toolbar>}
         <Table
           columns={columns}
           gridTemplateColumns={gridTemplateColumns}

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

@@ -14,7 +14,7 @@ interface Props {
 }
 
 export const Filters = styled("div", {
-  shouldForwardProp: (prop) => prop !== "height",
+  shouldForwardProp: (prop) => prop !== "height" && prop !== "isBaseStyle",
 })<Props>`
   ${(props) => (props.isBaseStyle ? textBody500(props) : textBody400(props))};
   color: ${(props) => (props.isBaseStyle ? inkMain(props) : inkLight(props))};

package/src/components/Filter/components/Filters/filters.tsx

@@ -1,7 +1,7 @@
 import { Divider } from "@mui/material";
-import { TrackFilterOpenedFunction } from "config/entities";
 import React, { Fragment, useEffect, useMemo, useRef, useState } from "react";
 import { CategoryTag, SelectCategoryView } from "../../../../common/entities";
+import { TrackFilterOpenedFunction } from "../../../../config/entities";
 import {
   BREAKPOINT_FN_NAME,
   useBreakpointHelper,

package/src/components/Filter/components/VariableSizeListItem/variableSizeListItem.tsx

@@ -7,6 +7,7 @@ import {
 import React, { CSSProperties, useEffect, useRef } from "react";
 import { CategoryKey } from "../../../../common/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
+import { SELECT_CATEGORY_KEY } from "../../../../providers/exploreState/constants";
 import { TEXT_BODY_SMALL_400 } from "../../../../theme/common/typography";
 import { CheckedIcon } from "../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedIcon } from "../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
@@ -62,9 +63,11 @@ export default function VariableSizeListItem({
         disableTypography
         primary={<HighlightedLabel label={label} ranges={labelRanges} />}
         secondary={
-          <Typography color="ink.light" variant={TEXT_BODY_SMALL_400}>
-            {count}
-          </Typography>
+          categoryKey !== SELECT_CATEGORY_KEY.SAVED_FILTERS && (
+            <Typography color="ink.light" variant={TEXT_BODY_SMALL_400}>
+              {count}
+            </Typography>
+          )
         }
       />
     </ListItemButton>

package/src/components/Index/index.tsx

@@ -5,6 +5,7 @@ import { Hero } from "./components/Hero/hero";
 import { Index as IndexLayout } from "./index.styles";
 
 export interface IndexProps {
+  className?: string;
   List?: ReactNode;
   ListHero?: ReactNode | ReactNode[];
   SideBarButton?: ReactNode;
@@ -15,6 +16,7 @@ export interface IndexProps {
 }
 
 export const Index = ({
+  className,
   List,
   ListHero,
   SideBarButton,
@@ -26,7 +28,7 @@ export const Index = ({
   const { layoutState } = useLayoutState();
   const { headerHeight } = layoutState;
   return (
-    <IndexLayout marginTop={headerHeight}>
+    <IndexLayout className={className} marginTop={headerHeight}>
       <Hero SideBarButton={SideBarButton} Summaries={Summaries} title={title} />
       {SubTitleHero}
       {Tabs}