@databiosphere/findable-ui 3.0.0 → 3.2.0

package/src/hooks/useCategoryFilter.ts

@@ -73,11 +73,14 @@ function buildCategoryView(
   categoryValueViews: SelectCategoryValueView[],
   categoryConfigs: CategoryConfig[]
 ): SelectCategoryView {
+  const categoryConfig = findCategoryConfig(category.key, categoryConfigs);
+  const mapSelectCategoryValue =
+    categoryConfig?.mapSelectCategoryValue || getSelectCategoryValue;
   return {
     isDisabled: false,
     key: category.key,
-    label: getCategoryLabel(category.key, categoryConfigs),
-    values: categoryValueViews,
+    label: getCategoryLabel(category.key, categoryConfig),
+    values: categoryValueViews.map(mapSelectCategoryValue),
   };
 }
 
@@ -192,22 +195,43 @@ function getCategorySelectedFilter(
 /**
  * Get the label for the given category key as per the config.
  * @param key - Key of category to find label of.
- * @param categoryConfigs - Category accept list.
+ * @param categoryConfig - Category.
  * @returns the display value for the given category.
  */
 function getCategoryLabel(
   key: string,
-  categoryConfigs: CategoryConfig[]
+  categoryConfig?: CategoryConfig
 ): string {
-  const categoryConfig = categoryConfigs.find(
-    (categoryConfig) => categoryConfig.key === key
-  );
   if (!categoryConfig) {
     return key;
   }
   return categoryConfig.label;
 }
 
+/**
+ * Default function returning select category value, unmodified.
+ * @param selectCategoryValue - Select category value.
+ * @returns original select category value.
+ */
+export function getSelectCategoryValue(
+  selectCategoryValue: SelectCategoryValue
+): SelectCategoryValue {
+  return selectCategoryValue;
+}
+
+/**
+ * Returns the category config for the given category config key.
+ * @param key - Category config key.
+ * @param categoryConfigs - Category configs.
+ * @returns category config.
+ */
+function findCategoryConfig(
+  key: string,
+  categoryConfigs: CategoryConfig[]
+): CategoryConfig | undefined {
+  return categoryConfigs.find((categoryConfig) => categoryConfig.key === key);
+}
+
 /**
  * Determine if given category value is selected.
  * @param categoryValueKey - The key of the category value to check if selected in the filter state.

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

@@ -1,6 +1,14 @@
+import { CategoryGroup } from "../../../config/entities";
 import { ExploreState, PaginationState } from "../../exploreState";
+import { SELECT_CATEGORY_KEY } from "../constants";
 import { EntityState } from "../entities";
 
+export const DEFAULT_CATEGORY_GROUP_SAVED_FILTERS: CategoryGroup = {
+  categoryConfigs: [
+    { key: SELECT_CATEGORY_KEY.SAVED_FILTERS, label: "Saved Filters" },
+  ],
+};
+
 export const DEFAULT_ENTITY_STATE: EntityState = {
   categoryViews: [],
   filterState: [],

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

@@ -20,7 +20,11 @@ import {
   SavedFilterByCategoryValueKey,
 } from "../entities";
 import { getEntityCategoryGroupConfigKey, getFilterCount } from "../utils";
-import { DEFAULT_ENTITY_STATE, INITIAL_STATE } from "./constants";
+import {
+  DEFAULT_CATEGORY_GROUP_SAVED_FILTERS,
+  DEFAULT_ENTITY_STATE,
+  INITIAL_STATE,
+} from "./constants";
 
 /**
  * Builds category groups from the given category group config (adds the saved filters category to the category groups).
@@ -32,14 +36,7 @@ function buildCategoryGroups(
 ): CategoryGroup[] {
   const { categoryGroups, savedFilters } = categoryGroupConfig;
   if (!savedFilters) return categoryGroups;
-  const clonedCategoryGroups = [...categoryGroups];
-  const savedFiltersCategoryGroup: CategoryGroup = {
-    categoryConfigs: [
-      { key: SELECT_CATEGORY_KEY.SAVED_FILTERS, label: "Saved Filters" },
-    ],
-  };
-  clonedCategoryGroups.unshift(savedFiltersCategoryGroup);
-  return clonedCategoryGroups;
+  return [DEFAULT_CATEGORY_GROUP_SAVED_FILTERS, ...categoryGroups];
 }
 
 /**

package/src/providers/exploreState/payloads/entities.ts

@@ -8,6 +8,7 @@ import {
   CategoryValueKey,
   PaginationDirectionType,
   SelectCategory,
+  SelectedFilter,
 } from "../../../common/entities";
 import {
   ENTITY_VIEW,
@@ -71,6 +72,13 @@ export type ToggleEntityViewPayload = ENTITY_VIEW;
  */
 export type UpdateColumnVisibilityPayload = VisibilityState;
 
+/**
+ * Update entity filters payload.
+ */
+export interface UpdateEntityFiltersPayload {
+  entityListType: string;
+  filters: SelectedFilter[];
+}
 /**
  * Update entity view access payload.
  */

package/src/providers/exploreState/utils.ts

@@ -158,13 +158,16 @@ export function resetPage(paginationState: PaginationState): PaginationState {
 /**
  * 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.
  */
-export function resetRowSelection(state: ExploreState): EntityPageStateMapper {
-  const categoryGroupConfigKey = getEntityCategoryGroupConfigKey(
+export function resetRowSelection(
+  state: ExploreState,
+  categoryGroupConfigKey = getEntityCategoryGroupConfigKey(
     state.tabValue,
     state.entityPageState
-  );
+  )
+): EntityPageStateMapper {
   return Object.entries(state.entityPageState).reduce(
     (acc, [entityPath, entityPageState]) => {
       if (entityPageState.categoryGroupConfigKey === categoryGroupConfigKey) {
@@ -247,16 +250,17 @@ export function updateEntityPageStateSorting(
  * Updates entity state by category group config key.
  * @param state - Explore state.
  * @param nextEntityState - Partial next entity state.
+ * @param categoryGroupConfigKey - Category group config key.
  * @returns updated entity state by category group config key.
  */
 export function updateEntityStateByCategoryGroupConfigKey(
   state: ExploreState,
-  nextEntityState: Partial<EntityState>
-): void {
-  const categoryGroupConfigKey = getEntityCategoryGroupConfigKey(
+  nextEntityState: Partial<EntityState>,
+  categoryGroupConfigKey = getEntityCategoryGroupConfigKey(
     state.tabValue,
     state.entityPageState
-  );
+  )
+): void {
   const entityState = getEntityState(state, categoryGroupConfigKey);
   if (entityState) {
     setEntityStateByCategoryGroupConfigKey(categoryGroupConfigKey, state, {

package/src/providers/exploreState.tsx

@@ -36,6 +36,7 @@ import {
   ResetExploreResponsePayload,
   ToggleEntityViewPayload,
   UpdateColumnVisibilityPayload,
+  UpdateEntityFiltersPayload,
   UpdateEntityViewAccessPayload,
   UpdateFilterPayload,
   UpdateRowSelectionPayload,
@@ -239,6 +240,7 @@ export enum ExploreActionKind {
   SelectEntityType = "SELECT_ENTITY_TYPE",
   ToggleEntityView = "TOGGLE_ENTITY_VIEW",
   UpdateColumnVisibility = "UPDATE_COLUMN_VISIBILITY",
+  UpdateEntityFilters = "UPDATE_ENTITY_FILTERS",
   UpdateEntityViewAccess = "UPDATE_ENTITY_VIEW_ACCESS",
   UpdateFilter = "UPDATE_FILTER",
   UpdateRowSelection = "UPDATE_ROW_SELECTION",
@@ -260,6 +262,7 @@ export type ExploreAction =
   | SelectEntityTypeAction
   | ToggleEntityViewAction
   | UpdateColumnVisibilityAction
+  | UpdateEntityFiltersAction
   | UpdateEntityViewAccessAction
   | UpdateFilterAction
   | UpdateRowSelectionAction
@@ -353,6 +356,14 @@ type UpdateColumnVisibilityAction = {
   type: ExploreActionKind.UpdateColumnVisibility;
 };
 
+/**
+ * Update entity filters action.
+ */
+type UpdateEntityFiltersAction = {
+  payload: UpdateEntityFiltersPayload;
+  type: ExploreActionKind.UpdateEntityFilters;
+};
+
 /**
  * Update entity view access action.
  */
@@ -586,6 +597,28 @@ function exploreReducer(
         ),
       };
     }
+    /**
+     * Update entity filters.
+     */
+    case ExploreActionKind.UpdateEntityFilters: {
+      const { entityListType, filters: filterState } = payload;
+      const categoryGroupConfigKey = getEntityCategoryGroupConfigKey(
+        entityListType,
+        state.entityPageState
+      );
+      updateEntityStateByCategoryGroupConfigKey(
+        state,
+        {
+          filterState,
+          savedFilterState: [], // Clear saved filter state.
+        },
+        categoryGroupConfigKey
+      );
+      return {
+        ...state,
+        entityPageState: resetRowSelection(state, categoryGroupConfigKey),
+      };
+    }
     /**
      * Update entity view access
      **/

package/src/styles/common/mixins/colors.ts

@@ -2,6 +2,8 @@ import { CommonColors, PaletteColor } from "@mui/material/styles/createPalette";
 import { ThemeProps } from "../../../theme/theme";
 
 // Alert
+export const alertLight = ({ theme }: ThemeProps): PaletteColor["light"] =>
+  theme.palette.alert.light;
 export const alertLightest = ({
   theme,
 }: ThemeProps): PaletteColor["lightest"] => theme.palette.alert.lightest;
@@ -13,8 +15,6 @@ export const errorMain = ({ theme }: ThemeProps): PaletteColor["main"] =>
   theme.palette.error.main;
 
 // Info
-export const infoDark = ({ theme }: ThemeProps): PaletteColor["dark"] =>
-  theme.palette.info.dark;
 export const infoLight = ({ theme }: ThemeProps): PaletteColor["light"] =>
   theme.palette.info.light;
 export const infoLightest = ({ theme }: ThemeProps): PaletteColor["lightest"] =>
@@ -23,12 +23,8 @@ export const infoMain = ({ theme }: ThemeProps): PaletteColor["main"] =>
   theme.palette.info.main;
 
 // Ink
-export const inkDark = ({ theme }: ThemeProps): PaletteColor["dark"] =>
-  theme.palette.ink.dark;
 export const inkLight = ({ theme }: ThemeProps): PaletteColor["light"] =>
   theme.palette.ink.light;
-export const inkLightest = ({ theme }: ThemeProps): PaletteColor["lightest"] =>
-  theme.palette.ink.lightest;
 export const inkMain = ({ theme }: ThemeProps): PaletteColor["main"] =>
   theme.palette.ink.main;
 
@@ -50,6 +46,8 @@ export const smokeMain = ({ theme }: ThemeProps): PaletteColor["main"] =>
   theme.palette.smoke.main;
 
 // Success
+export const successLight = ({ theme }: ThemeProps): PaletteColor["light"] =>
+  theme.palette.success.light;
 export const successLightest = ({
   theme,
 }: ThemeProps): PaletteColor["lightest"] => theme.palette.success.lightest;
@@ -57,6 +55,8 @@ export const successMain = ({ theme }: ThemeProps): PaletteColor["main"] =>
   theme.palette.success.main;
 
 // Warning
+export const warningLight = ({ theme }: ThemeProps): PaletteColor["light"] =>
+  theme.palette.warning.light;
 export const warningLightest = ({
   theme,
 }: ThemeProps): PaletteColor["lightest"] => theme.palette.warning.lightest;

package/src/theme/common/components.ts

@@ -615,6 +615,33 @@ export const MuiChip = (theme: Theme): Components["MuiChip"] => {
   };
 };
 
+/**
+ * MuiCircularProgress Component
+ * @param theme - Theme.
+ * @returns MuiCircularProgress component theme styles.
+ */
+export const MuiCircularProgress = (
+  theme: Theme
+): Components["MuiCircularProgress"] => {
+  return {
+    styleOverrides: {
+      circle: {
+        strokeLinecap: "round",
+      },
+    },
+    variants: [
+      {
+        props: {
+          color: "alert",
+        },
+        style: {
+          color: theme.palette.alert.main,
+        },
+      },
+    ],
+  };
+};
+
 /**
  * MuiCssBaseline Component
  * @param theme - Theme.
@@ -943,6 +970,11 @@ export const MuiLink: Components["MuiLink"] = {
   defaultProps: {
     underline: "hover",
   },
+  styleOverrides: {
+    root: {
+      cursor: "pointer",
+    },
+  },
 };
 
 /**

package/src/theme/theme.ts

@@ -83,6 +83,7 @@ export function createAppTheme(customOptions?: ThemeOptions): Theme {
     MuiCard: C.MuiCard,
     MuiCheckbox: C.MuiCheckbox(theme),
     MuiChip: C.MuiChip(theme),
+    MuiCircularProgress: C.MuiCircularProgress(theme),
     MuiCssBaseline: C.MuiCssBaseline(theme),
     MuiDialog: C.MuiDialog(theme),
     MuiDialogActions: C.MuiDialogActions,

package/types/data-explorer-ui.d.ts

@@ -3,6 +3,7 @@ import type {} from "@mui/material/Alert";
 import type {} from "@mui/material/Button";
 import type {} from "@mui/material/Checkbox";
 import type {} from "@mui/material/Chip";
+import type {} from "@mui/material/CircularProgress";
 import type {} from "@mui/material/IconButton";
 import type {} from "@mui/material/Paper";
 import type {} from "@mui/material/styles";
@@ -54,6 +55,15 @@ declare module "@mui/material/Button" {
   }
 }
 
+/**
+ * CircularProgress prop options.
+ */
+declare module "@mui/material/CircularProgress" {
+  interface CircularProgressPropsColorOverrides {
+    alert: true;
+  }
+}
+
 /**
  * Checkbox prop options.
  */