@databiosphere/findable-ui 3.0.0 → 3.2.0

package/lib/providers/exploreState.d.ts

@@ -3,7 +3,7 @@ import { AzulSearchIndex } from "../apis/azul/common/entities";
 import { SelectCategoryView, SelectedFilter } from "../common/entities";
 import { CategoryGroup, SiteConfig } from "../config/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";
+import { ApplySavedFilterPayload, PaginateTablePayload, PatchExploreResponsePayload, ProcessExploreResponsePayload, ProcessRelatedResponsePayload, ResetExploreResponsePayload, ToggleEntityViewPayload, UpdateColumnVisibilityPayload, UpdateEntityFiltersPayload, UpdateEntityViewAccessPayload, UpdateFilterPayload, UpdateRowSelectionPayload, UpdateSortingPayload } from "./exploreState/payloads/entities";
 export declare type CatalogState = string | undefined;
 /**
  * Entity view.
@@ -114,6 +114,7 @@ export declare 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",
@@ -122,7 +123,7 @@ export declare enum ExploreActionKind {
 /**
  * Explore action.
  */
-export declare type ExploreAction = ApplySavedFilterAction | ClearFiltersAction | PaginateTableAction | PatchExploreResponseAction | ProcessExploreResponseAction | ProcessRelatedResponseAction | ResetExploreResponseAction | ResetStateAction | SelectEntityTypeAction | ToggleEntityViewAction | UpdateColumnVisibilityAction | UpdateEntityViewAccessAction | UpdateFilterAction | UpdateRowSelectionAction | UpdateSortingAction;
+export declare type ExploreAction = ApplySavedFilterAction | ClearFiltersAction | PaginateTableAction | PatchExploreResponseAction | ProcessExploreResponseAction | ProcessRelatedResponseAction | ResetExploreResponseAction | ResetStateAction | SelectEntityTypeAction | ToggleEntityViewAction | UpdateColumnVisibilityAction | UpdateEntityFiltersAction | UpdateEntityViewAccessAction | UpdateFilterAction | UpdateRowSelectionAction | UpdateSortingAction;
 /**
  * Apply saved filter action.
  */
@@ -200,6 +201,13 @@ declare type UpdateColumnVisibilityAction = {
     payload: UpdateColumnVisibilityPayload;
     type: ExploreActionKind.UpdateColumnVisibility;
 };
+/**
+ * Update entity filters action.
+ */
+declare type UpdateEntityFiltersAction = {
+    payload: UpdateEntityFiltersPayload;
+    type: ExploreActionKind.UpdateEntityFilters;
+};
 /**
  * Update entity view access action.
  */

package/lib/providers/exploreState.js

@@ -104,6 +104,7 @@ var ExploreActionKind;
     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["UpdateRowSelection"] = "UPDATE_ROW_SELECTION";
@@ -224,6 +225,18 @@ function exploreReducer(state, action, exploreContext) {
         case ExploreActionKind.UpdateColumnVisibility: {
             return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { columnsVisibility: payload }) });
         }
+        /**
+         * Update entity filters.
+         */
+        case ExploreActionKind.UpdateEntityFilters: {
+            const { entityListType, filters: filterState } = payload;
+            const categoryGroupConfigKey = (0, utils_2.getEntityCategoryGroupConfigKey)(entityListType, state.entityPageState);
+            (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, {
+                filterState,
+                savedFilterState: [], // Clear saved filter state.
+            }, categoryGroupConfigKey);
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.resetRowSelection)(state, categoryGroupConfigKey) });
+        }
         /**
          * Update entity view access
          **/

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

@@ -1,15 +1,13 @@
 import { CommonColors, PaletteColor } from "@mui/material/styles/createPalette";
 import { ThemeProps } from "../../../theme/theme";
+export declare const alertLight: ({ theme }: ThemeProps) => PaletteColor["light"];
 export declare const alertLightest: ({ theme, }: ThemeProps) => PaletteColor["lightest"];
 export declare const alertMain: ({ theme }: ThemeProps) => PaletteColor["main"];
 export declare const errorMain: ({ theme }: ThemeProps) => PaletteColor["main"];
-export declare const infoDark: ({ theme }: ThemeProps) => PaletteColor["dark"];
 export declare const infoLight: ({ theme }: ThemeProps) => PaletteColor["light"];
 export declare const infoLightest: ({ theme }: ThemeProps) => PaletteColor["lightest"];
 export declare const infoMain: ({ theme }: ThemeProps) => PaletteColor["main"];
-export declare const inkDark: ({ theme }: ThemeProps) => PaletteColor["dark"];
 export declare const inkLight: ({ theme }: ThemeProps) => PaletteColor["light"];
-export declare const inkLightest: ({ theme }: ThemeProps) => PaletteColor["lightest"];
 export declare const inkMain: ({ theme }: ThemeProps) => PaletteColor["main"];
 export declare const primaryDark: ({ theme }: ThemeProps) => PaletteColor["dark"];
 export declare const primaryMain: ({ theme }: ThemeProps) => PaletteColor["main"];
@@ -17,8 +15,10 @@ export declare const smokeDark: ({ theme }: ThemeProps) => PaletteColor["dark"];
 export declare const smokeLight: ({ theme }: ThemeProps) => PaletteColor["light"];
 export declare const smokeLightest: ({ theme, }: ThemeProps) => PaletteColor["lightest"];
 export declare const smokeMain: ({ theme }: ThemeProps) => PaletteColor["main"];
+export declare const successLight: ({ theme }: ThemeProps) => PaletteColor["light"];
 export declare const successLightest: ({ theme, }: ThemeProps) => PaletteColor["lightest"];
 export declare const successMain: ({ theme }: ThemeProps) => PaletteColor["main"];
+export declare const warningLight: ({ theme }: ThemeProps) => PaletteColor["light"];
 export declare const warningLightest: ({ theme, }: ThemeProps) => PaletteColor["lightest"];
 export declare const warningMain: ({ theme }: ThemeProps) => PaletteColor["main"];
 export declare const white: ({ theme }: ThemeProps) => CommonColors["white"];

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

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.white = exports.warningMain = exports.warningLightest = exports.successMain = exports.successLightest = exports.smokeMain = exports.smokeLightest = exports.smokeLight = exports.smokeDark = exports.primaryMain = exports.primaryDark = exports.inkMain = exports.inkLightest = exports.inkLight = exports.inkDark = exports.infoMain = exports.infoLightest = exports.infoLight = exports.infoDark = exports.errorMain = exports.alertMain = exports.alertLightest = 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.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;
 const alertLightest = ({ theme, }) => theme.palette.alert.lightest;
 exports.alertLightest = alertLightest;
 const alertMain = ({ theme }) => theme.palette.alert.main;
@@ -10,8 +12,6 @@ exports.alertMain = alertMain;
 const errorMain = ({ theme }) => theme.palette.error.main;
 exports.errorMain = errorMain;
 // Info
-const infoDark = ({ theme }) => theme.palette.info.dark;
-exports.infoDark = infoDark;
 const infoLight = ({ theme }) => theme.palette.info.light;
 exports.infoLight = infoLight;
 const infoLightest = ({ theme }) => theme.palette.info.lightest;
@@ -19,12 +19,8 @@ exports.infoLightest = infoLightest;
 const infoMain = ({ theme }) => theme.palette.info.main;
 exports.infoMain = infoMain;
 // Ink
-const inkDark = ({ theme }) => theme.palette.ink.dark;
-exports.inkDark = inkDark;
 const inkLight = ({ theme }) => theme.palette.ink.light;
 exports.inkLight = inkLight;
-const inkLightest = ({ theme }) => theme.palette.ink.lightest;
-exports.inkLightest = inkLightest;
 const inkMain = ({ theme }) => theme.palette.ink.main;
 exports.inkMain = inkMain;
 // Primary
@@ -42,11 +38,15 @@ exports.smokeLightest = smokeLightest;
 const smokeMain = ({ theme }) => theme.palette.smoke.main;
 exports.smokeMain = smokeMain;
 // Success
+const successLight = ({ theme }) => theme.palette.success.light;
+exports.successLight = successLight;
 const successLightest = ({ theme, }) => theme.palette.success.lightest;
 exports.successLightest = successLightest;
 const successMain = ({ theme }) => theme.palette.success.main;
 exports.successMain = successMain;
 // Warning
+const warningLight = ({ theme }) => theme.palette.warning.light;
+exports.warningLight = warningLight;
 const warningLightest = ({ theme, }) => theme.palette.warning.lightest;
 exports.warningLightest = warningLightest;
 const warningMain = ({ theme }) => theme.palette.warning.main;

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

@@ -75,6 +75,12 @@ export declare const MuiCheckbox: (theme: Theme) => Components["MuiCheckbox"];
  * @returns MuiChip component theme styles.
  */
 export declare const MuiChip: (theme: Theme) => Components["MuiChip"];
+/**
+ * MuiCircularProgress Component
+ * @param theme - Theme.
+ * @returns MuiCircularProgress component theme styles.
+ */
+export declare const MuiCircularProgress: (theme: Theme) => Components["MuiCircularProgress"];
 /**
  * MuiCssBaseline Component
  * @param theme - Theme.

package/lib/theme/common/components.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MuiTypography = exports.MuiTooltip = exports.MuiToolbar = exports.MuiToggleButtonGroup = exports.MuiToggleButton = exports.MuiTabs = exports.MuiTableSortLabel = exports.MuiTableCell = exports.MuiTab = exports.MuiSvgIcon = exports.MuiSelect = exports.MuiRadio = exports.MuiPaper = exports.MuiOutlinedInput = exports.MuiMenuItem = exports.MuiListSubheader = exports.MuiListItemText = exports.MuiListItemButton = exports.MuiLink = exports.MuiInputBase = exports.MuiIconButton = exports.MuiFormHelperText = exports.MuiFormGroup = exports.MuiFormControlLabel = exports.MuiDrawer = exports.MuiDivider = exports.MuiDialogTitle = exports.MuiDialogContent = exports.MuiDialogActions = exports.MuiDialog = exports.MuiCssBaseline = exports.MuiChip = exports.MuiCheckbox = exports.MuiCard = exports.MuiButtonGroup = exports.MuiButtonBase = exports.MuiButton = exports.MuiBreadcrumbs = exports.MuiBackdrop = exports.MuiAppBar = exports.MuiAlertTitle = exports.MuiAlert = exports.MuiAccordionSummary = exports.MuiAccordionDetails = exports.MuiAccordion = void 0;
+exports.MuiTypography = exports.MuiTooltip = exports.MuiToolbar = exports.MuiToggleButtonGroup = exports.MuiToggleButton = exports.MuiTabs = exports.MuiTableSortLabel = exports.MuiTableCell = exports.MuiTab = exports.MuiSvgIcon = exports.MuiSelect = exports.MuiRadio = exports.MuiPaper = exports.MuiOutlinedInput = exports.MuiMenuItem = exports.MuiListSubheader = exports.MuiListItemText = exports.MuiListItemButton = exports.MuiLink = exports.MuiInputBase = exports.MuiIconButton = exports.MuiFormHelperText = exports.MuiFormGroup = exports.MuiFormControlLabel = exports.MuiDrawer = exports.MuiDivider = exports.MuiDialogTitle = exports.MuiDialogContent = exports.MuiDialogActions = exports.MuiDialog = exports.MuiCssBaseline = exports.MuiCircularProgress = exports.MuiChip = exports.MuiCheckbox = exports.MuiCard = exports.MuiButtonGroup = exports.MuiButtonBase = exports.MuiButton = exports.MuiBreadcrumbs = exports.MuiBackdrop = exports.MuiAppBar = exports.MuiAlertTitle = exports.MuiAlert = exports.MuiAccordionSummary = exports.MuiAccordionDetails = exports.MuiAccordion = void 0;
 const errorIcon_1 = require("../../components/common/CustomIcon/components/ErrorIcon/errorIcon");
 const infoIcon_1 = require("../../components/common/CustomIcon/components/InfoIcon/infoIcon");
 const successIcon_1 = require("../../components/common/CustomIcon/components/SuccessIcon/successIcon");
@@ -552,6 +552,31 @@ const MuiChip = (theme) => {
     };
 };
 exports.MuiChip = MuiChip;
+/**
+ * MuiCircularProgress Component
+ * @param theme - Theme.
+ * @returns MuiCircularProgress component theme styles.
+ */
+const MuiCircularProgress = (theme) => {
+    return {
+        styleOverrides: {
+            circle: {
+                strokeLinecap: "round",
+            },
+        },
+        variants: [
+            {
+                props: {
+                    color: "alert",
+                },
+                style: {
+                    color: theme.palette.alert.main,
+                },
+            },
+        ],
+    };
+};
+exports.MuiCircularProgress = MuiCircularProgress;
 /**
  * MuiCssBaseline Component
  * @param theme - Theme.
@@ -851,6 +876,11 @@ exports.MuiLink = {
     defaultProps: {
         underline: "hover",
     },
+    styleOverrides: {
+        root: {
+            cursor: "pointer",
+        },
+    },
 };
 /**
  * MuiListItemButton Component

package/lib/theme/theme.js

@@ -96,6 +96,7 @@ function createAppTheme(customOptions) {
         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/package.json

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

package/src/components/Links/common/constants.ts

@@ -0,0 +1 @@
+export const URL_OBJECT_KEYS = ["href", "query"];

package/src/components/Links/common/entities.ts

@@ -1,4 +1,15 @@
+import { UrlObject } from "url";
+
 export enum ANCHOR_TARGET {
   BLANK = "_blank",
   SELF = "_self",
 }
+
+export type StrictUrlObject = Omit<UrlObject, "href" | "query"> & {
+  href: string;
+  query: string;
+};
+
+export type Url = string | UrlObjectWithHrefAndQuery;
+
+export type UrlObjectWithHrefAndQuery = Pick<StrictUrlObject, "href" | "query">;

package/src/components/Links/common/utils.ts

@@ -1,3 +1,6 @@
+import { URL_OBJECT_KEYS } from "./constants";
+import { Url, UrlObjectWithHrefAndQuery } from "./entities";
+
 /**
  * Returns true if the given link is an internal link.
  * @param link - Link.
@@ -6,3 +9,28 @@
 export function isClientSideNavigation(link: string): boolean {
   return /^\/(?!\/)/.test(link);
 }
+
+/**
+ * Returns true if the given url is a URL object with href and query.
+ * @param value - URL.
+ * @returns true if the given url is a URL object with href and query.
+ */
+export function isURLObjectWithHrefAndQuery(
+  value: Url
+): value is UrlObjectWithHrefAndQuery {
+  return (
+    typeof value !== "string" &&
+    Object.entries(value).every(
+      ([key, value]) => URL_OBJECT_KEYS.includes(key) && !!value
+    )
+  );
+}
+
+/**
+ * Returns true if the given url is a string.
+ * @param value - URL.
+ * @returns true if the given url is a string.
+ */
+export function isURLString(value: Url): value is string {
+  return typeof value === "string";
+}

package/src/components/Links/components/Link/components/ExploreViewLink/exploreViewLink.tsx

@@ -0,0 +1,172 @@
+import Link from "next/link";
+import React, { useCallback } from "react";
+import { UrlObject } from "url";
+import { SelectedFilter } from "../../../../../../common/entities";
+import { useExploreState } from "../../../../../../hooks/useExploreState";
+import {
+  ExploreActionKind,
+  ExploreState,
+} from "../../../../../../providers/exploreState";
+import {
+  ANCHOR_TARGET,
+  UrlObjectWithHrefAndQuery,
+} from "../../../../common/entities";
+import { LinkProps } from "../../link";
+
+const PARAM_FILTER = "filter";
+
+export interface ExploreViewLinkProps
+  extends Omit<LinkProps, "copyable" | "noWrap" | "url"> {
+  url: UrlObjectWithHrefAndQuery;
+}
+
+export const ExploreViewLink = ({
+  className,
+  label,
+  onClick,
+  target = ANCHOR_TARGET.SELF,
+  url,
+}: ExploreViewLinkProps): JSX.Element => {
+  const { exploreDispatch, exploreState } = useExploreState();
+
+  if (!isValidExploreURL(url, exploreState)) {
+    throwError(url);
+  }
+
+  const onNavigate = useCallback(() => {
+    const entityListType = getEntityListType(url.href);
+    const filters = getSelectedFilters(url.query);
+    exploreDispatch({
+      payload: { entityListType, filters },
+      type: ExploreActionKind.UpdateEntityFilters,
+    });
+    onClick?.();
+  }, [exploreDispatch, onClick, url]);
+
+  return (
+    <Link
+      className={className}
+      href={url.href}
+      onClick={onNavigate}
+      rel="noopener"
+      target={target}
+    >
+      {label}
+    </Link>
+  );
+};
+
+/**
+ * Returns the entity list type "entityListType" inferred from the given href.
+ * @param href - Href.
+ * @returns entity list type.
+ */
+function getEntityListType(href: UrlObjectWithHrefAndQuery["href"]): string {
+  return href.substring(1);
+}
+
+/**
+ * Returns the selected filters from the given query.
+ * @param query - Query.
+ * @returns selected filters.
+ */
+function getSelectedFilters(
+  query: UrlObjectWithHrefAndQuery["query"]
+): SelectedFilter[] {
+  const decodedQuery = decodeURIComponent(query);
+  const parsedQuery = JSON.parse(decodedQuery);
+  return parsedQuery[PARAM_FILTER];
+}
+
+/**
+ * Returns true if the given value is a SelectedFilter.
+ * @param value - Value.
+ * @returns true if the given value is a SelectedFilter.
+ */
+function isSelectedFilter(value: unknown): value is SelectedFilter {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "categoryKey" in value &&
+    "value" in value
+  );
+}
+
+/**
+ * Returns true if the given query string is a valid JSON string.
+ * @param query - Query string.
+ * @returns true if the given query string is a valid JSON string.
+ */
+function isValidJsonString(query: string): boolean {
+  try {
+    JSON.parse(query);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+/**
+ * Returns true if the given explore link is valid.
+ * @param url - Explore link URL.
+ * @param exploreState - Explore state.
+ * @returns true if the given explore link is valid.
+ */
+function isValidExploreURL(
+  url: UrlObjectWithHrefAndQuery,
+  exploreState: ExploreState
+): boolean {
+  const validHref = isValidHref(url, exploreState);
+  const validQuery = isValidQuery(url);
+  return validHref && validQuery;
+}
+
+/**
+ * Returns true if the given href is a configured key in the explore state's entityPageState.
+ * @param url - Explore link URL.
+ * @param exploreState - Explore state.
+ * @returns true if the given href is configured in the explore state.
+ */
+function isValidHref(
+  url: UrlObjectWithHrefAndQuery,
+  exploreState: ExploreState
+): boolean {
+  const { entityPageState } = exploreState;
+  const { href } = url;
+  return href.startsWith("/") && href.substring(1) in entityPageState;
+}
+
+/**
+ * Returns true if the given explore query is valid.
+ * @param url - Explore link URL.
+ * @returns true if the given explore query is valid.
+ */
+function isValidQuery(url: UrlObjectWithHrefAndQuery): boolean {
+  const { query } = url;
+  // Decode and parse the query.
+  const decodedQuery = decodeURIComponent(query);
+  // Query should be a valid JSON string.
+  if (isValidJsonString(decodedQuery)) {
+    const parsedQuery = JSON.parse(decodedQuery);
+    // Query should contain "filter" key.
+    if (PARAM_FILTER in parsedQuery) {
+      const filters = parsedQuery[PARAM_FILTER];
+      // Filter should be an array.
+      if (Array.isArray(filters)) {
+        // Filter should contain only SelectedFilter objects.
+        return filters.every(isSelectedFilter);
+      }
+    }
+  }
+  return false;
+}
+
+/**
+ * Throws an error with the given URL object.
+ * @param url - URL object.
+ */
+function throwError(url: UrlObject): never {
+  throw new Error(
+    `Invalid explore URL href or query: ${url.href}, ${url.query}`
+  );
+}

package/src/components/Links/components/Link/link.tsx

@@ -3,8 +3,13 @@ import NLink from "next/link";
 import React, { ReactNode } from "react";
 import { isValidUrl } from "../../../../common/utils";
 import { CopyToClipboard } from "../../../common/CopyToClipboard/copyToClipboard";
-import { ANCHOR_TARGET } from "../../common/entities";
-import { isClientSideNavigation } from "../../common/utils";
+import { ANCHOR_TARGET, Url } from "../../common/entities";
+import {
+  isClientSideNavigation,
+  isURLObjectWithHrefAndQuery,
+  isURLString,
+} from "../../common/utils";
+import { ExploreViewLink } from "./components/ExploreViewLink/exploreViewLink";
 
 export interface LinkProps {
   className?: string;
@@ -13,7 +18,7 @@ export interface LinkProps {
   noWrap?: MLinkProps["noWrap"];
   onClick?: () => void;
   target?: ANCHOR_TARGET;
-  url: string;
+  url: Url /* url specified as UrlObject with href and query defined, and is currently only used for internal links */;
 }
 
 export const Link = ({
@@ -25,9 +30,22 @@ export const Link = ({
   target,
   url,
 }: LinkProps): JSX.Element => {
-  return (
-    <>
-      {isClientSideNavigation(url) ? (
+  if (isURLObjectWithHrefAndQuery(url)) {
+    /* Internal navigation - explore link */
+    return (
+      <ExploreViewLink
+        className={className}
+        label={label}
+        onClick={onClick}
+        target={target}
+        url={url}
+      />
+    );
+  }
+  if (isURLString(url)) {
+    if (isClientSideNavigation(url)) {
+      /* Client-side navigation */
+      return (
         <>
           <NLink href={url} legacyBehavior passHref>
             <MLink
@@ -42,23 +60,27 @@ export const Link = ({
           </NLink>
           {copyable && <CopyToClipboard copyStr={url} />}
         </>
-      ) : isValidUrl(url) ? (
+      );
+    }
+    if (isValidUrl(url)) {
+      /* External navigation */
+      return (
         <>
           <MLink
             className={className}
             href={url}
-            rel="noopener noreferrer"
             noWrap={noWrap}
-            target={target || ANCHOR_TARGET.BLANK}
             onClick={onClick}
+            rel="noopener noreferrer"
+            target={target || ANCHOR_TARGET.BLANK}
           >
             {label}
           </MLink>
           {copyable && <CopyToClipboard copyStr={url} />}
         </>
-      ) : (
-        label
-      )}
-    </>
-  );
+      );
+    }
+  }
+  /* Invalid URL */
+  return <>{label}</>;
 };

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/config/entities.ts

@@ -3,6 +3,7 @@ import { ColumnSort } from "@tanstack/react-table";
 import { JSXElementConstructor, ReactNode } from "react";
 import {
   CategoryKey,
+  SelectCategoryValueView,
   SelectedFilter,
   SelectedFilterValue,
 } from "../common/entities";
@@ -77,6 +78,9 @@ export interface CategoryGroup {
 export interface CategoryConfig {
   key: string;
   label: string;
+  mapSelectCategoryValue?: (
+    selectCategoryValue: SelectCategoryValueView
+  ) => SelectCategoryValueView;
 }
 
 /**