@databiosphere/findable-ui 3.1.0 → 3.2.0

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.
  */