@databiosphere/findable-ui 3.1.0 → 4.0.0

package/src/components/common/CustomIcon/components/UnLinkIcon/unLinkIcon.tsx

@@ -0,0 +1,18 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+export const UnLinkIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M11.4561 9.52501L10.2373 8.325H11.0196C11.2123 8.325 11.3738 8.38968 11.5042 8.51905C11.6346 8.64843 11.6998 8.80875 11.6998 9C11.6998 9.11245 11.6748 9.21253 11.6248 9.30001C11.5748 9.38749 11.5123 9.46246 11.4373 9.52501H11.4561ZM14.8873 15.825C14.7498 15.9625 14.5904 16.0312 14.4092 16.0312C14.2279 16.0312 14.0685 15.9625 13.9311 15.825L2.15605 4.06874C2.01856 3.93124 1.94981 3.77187 1.94981 3.59062C1.94981 3.40937 2.01856 3.25 2.15605 3.11249C2.29355 2.97499 2.45293 2.90625 2.63418 2.90625C2.81543 2.90625 2.97481 2.97499 3.1123 3.11249L14.8873 14.8875C15.0248 15.025 15.0935 15.1812 15.0935 15.3562C15.0935 15.5313 15.0248 15.6875 14.8873 15.825ZM5.3998 12.6C4.4038 12.6 3.5548 12.249 2.8528 11.547C2.1508 10.845 1.7998 9.99598 1.7998 9C1.7998 8.20087 2.03731 7.48855 2.51231 6.86305C2.9873 6.23768 3.6623 5.74374 4.53731 5.38125L5.8498 6.75H5.41855C4.78105 6.75 4.24356 6.96874 3.80606 7.40625C3.36856 7.84375 3.1498 8.37499 3.1498 9C3.1498 9.625 3.36856 10.1563 3.80606 10.5938C4.24356 11.0313 4.77481 11.25 5.3998 11.25H7.4248C7.61605 11.25 7.77636 11.3143 7.90575 11.4429C8.03512 11.5715 8.0998 11.7309 8.0998 11.9211C8.0998 12.1112 8.03512 12.2719 7.90575 12.4031C7.77636 12.5343 7.61605 12.6 7.4248 12.6H5.3998ZM6.97274 9.67495C6.78661 9.67495 6.62793 9.61069 6.49668 9.48208C6.36543 9.35347 6.2998 9.19408 6.2998 9.00391C6.2998 8.81381 6.3645 8.65312 6.49387 8.52187C6.62325 8.39062 6.78355 8.325 6.9748 8.325H7.34981L8.68105 9.67495H6.97274ZM13.6686 11.775C13.5686 11.625 13.5342 11.4594 13.5654 11.2781C13.5966 11.0969 13.6873 10.9563 13.8373 10.8562C14.1498 10.6437 14.3967 10.375 14.5779 10.05C14.7592 9.72499 14.8498 9.37498 14.8498 9C14.8498 8.37499 14.631 7.84375 14.1935 7.40625C13.756 6.96874 13.2248 6.75 12.5998 6.75H10.5748C10.3836 6.75 10.2233 6.68568 10.0938 6.55705C9.96451 6.42844 9.8998 6.26905 9.8998 6.07893C9.8998 5.8888 9.96451 5.72812 10.0938 5.59687C10.2233 5.46563 10.3836 5.4 10.5748 5.4H12.5998C13.5958 5.4 14.4448 5.751 15.1468 6.453C15.8488 7.155 16.1998 8.00399 16.1998 9C16.1998 9.6034 16.0561 10.1667 15.7685 10.69C15.4811 11.2133 15.0873 11.6375 14.5873 11.9625C14.4373 12.0625 14.2716 12.0937 14.0904 12.0563C13.9092 12.0187 13.7685 11.925 13.6686 11.775Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/Progress/components/CircularProgress/circularProgress.styles.ts

@@ -0,0 +1,6 @@
+import styled from "@emotion/styled";
+
+export const ProgressPositioner = styled.div`
+  display: flex;
+  position: relative; /* positions track */
+`;

package/src/components/common/Progress/components/CircularProgress/circularProgress.tsx

@@ -0,0 +1,26 @@
+import {
+  CircularProgress as MCircularProgress,
+  CircularProgressProps as MCircularProgressProps,
+} from "@mui/material";
+import React, { ElementType } from "react";
+import { ProgressPositioner } from "./circularProgress.styles";
+import { CircularProgressTrack } from "./components/CircularProgressTrack/circularProgressTrack";
+
+export interface CircularProgressProps extends MCircularProgressProps {
+  className?: string;
+  Track?: ElementType<CircularProgressProps>;
+}
+
+export const CircularProgress = ({
+  className,
+  value,
+  Track = CircularProgressTrack,
+  ...props /* Spread props to allow for CircularProgress specific props e.g. "disableShrink". */
+}: CircularProgressProps): JSX.Element => {
+  return (
+    <ProgressPositioner className={className}>
+      <Track {...props} />
+      <MCircularProgress value={value} {...props} />
+    </ProgressPositioner>
+  );
+};

package/src/components/common/Progress/components/CircularProgress/components/CircularProgressTrack/circularProgressTrack.styles.ts

@@ -0,0 +1,33 @@
+import styled from "@emotion/styled";
+import { CircularProgress as MCircularProgress } from "@mui/material";
+import {
+  alertLight,
+  infoLight,
+  smokeLight,
+  successLight,
+  warningLight,
+} from "../../../../../../../styles/common/mixins/colors";
+
+export const CircularProgress = styled(MCircularProgress)`
+  color: ${smokeLight};
+  left: 0;
+  position: absolute;
+  top: 0;
+  z-index: 0;
+
+  &.MuiCircularProgress-colorAlert {
+    color: ${alertLight};
+  }
+
+  &.MuiCircularProgress-colorInfo {
+    color: ${infoLight};
+  }
+
+  &.MuiCircularProgress-colorSuccess {
+    color: ${successLight};
+  }
+
+  &.MuiCircularProgress-colorWarning {
+    color: ${warningLight};
+  }
+`;

package/src/components/common/Progress/components/CircularProgress/components/CircularProgressTrack/circularProgressTrack.tsx

@@ -0,0 +1,23 @@
+import { CircularProgressProps as MCircularProgressProps } from "@mui/material";
+import React, { Fragment } from "react";
+import { CircularProgress } from "./circularProgressTrack.styles";
+
+export interface CircularProgressTrackProps extends MCircularProgressProps {
+  className?: string;
+  track?: boolean;
+}
+
+export const CircularProgressTrack = ({
+  className,
+  track = true,
+  value = 100,
+  ...props /* Spread props to allow for CircularProgress specific props e.g. "disableShrink". */
+}: CircularProgressTrackProps): JSX.Element => {
+  return (
+    <Fragment>
+      {track && (
+        <CircularProgress className={className} value={value} {...props} />
+      )}
+    </Fragment>
+  );
+};

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";
@@ -14,6 +15,7 @@ import type {} from "@mui/material/Tabs";
 import type {} from "@mui/material/Toolbar";
 import type {} from "@mui/material/Typography";
 import { RowData } from "@tanstack/react-table";
+import type {} from "@tanstack/table-core";
 import { DataLayer } from "../src/common/analytics/entities";
 import { GridTrackSize } from "../src/config/entities";
 
@@ -54,6 +56,15 @@ declare module "@mui/material/Button" {
   }
 }
 
+/**
+ * CircularProgress prop options.
+ */
+declare module "@mui/material/CircularProgress" {
+  interface CircularProgressPropsColorOverrides {
+    alert: true;
+  }
+}
+
 /**
  * Checkbox prop options.
  */
@@ -245,6 +256,7 @@ declare module "@tanstack/table-core" {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars -- TData and TValue are unused variables.
   interface ColumnMeta<TData extends RowData, TValue> {
     columnPinned?: boolean;
+    enableSortingInteraction?: boolean; // Flag to enable sorting interaction UI (e.g. sort icon) button; defaults to true.
     header?: string;
     width?: GridTrackSize;
   }

package/src/components/Detail/components/Table/components/TableHead/tableHead.tsx

@@ -1,34 +0,0 @@
-import { TableCell, TableHead as MTableHead, TableRow } from "@mui/material";
-import { flexRender, Table } from "@tanstack/react-table";
-import React, { Fragment } from "react";
-import { ROW_DIRECTION } from "../../../../../Table/common/entities";
-
-export interface TableBodyProps<T> {
-  rowDirection: ROW_DIRECTION;
-  tableInstance: Table<T>;
-}
-
-export const TableHead = <T extends object>({
-  rowDirection,
-  tableInstance,
-}: TableBodyProps<T>): JSX.Element => {
-  return (
-    <Fragment>
-      {rowDirection === ROW_DIRECTION.DEFAULT &&
-        tableInstance.getHeaderGroups().map((headerGroup) => (
-          <MTableHead key={headerGroup.id}>
-            <TableRow>
-              {headerGroup.headers.map((header) => (
-                <TableCell key={header.id}>
-                  {flexRender(
-                    header.column.columnDef.header,
-                    header.getContext()
-                  )}
-                </TableCell>
-              ))}
-            </TableRow>
-          </MTableHead>
-        ))}
-    </Fragment>
-  );
-};