@databiosphere/findable-ui 24.0.0 → 25.1.0

package/lib/components/common/IconButton/iconButton.styles.d.ts

@@ -3,7 +3,7 @@ interface Props {
 }
 export declare const Button: import("@emotion/styled").StyledComponent<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "disabled" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
+}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "disabled" | "action" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "loadingIndicator" | "edge"> & {
     theme?: import("@emotion/react").Theme;
 } & Props, {}, {}>;
 export {};

package/lib/components/common/Input/input.styles.d.ts

@@ -3,7 +3,7 @@ interface Props {
 }
 export declare const InputFormControl: import("@emotion/styled").StyledComponent<import("@mui/material").FormControlOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "style" | "className" | "classes" | "color" | "children" | "margin" | "sx" | "variant" | "error" | "disabled" | "required" | "size" | "focused" | "fullWidth" | "hiddenLabel"> & {
+}, "style" | "className" | "classes" | "color" | "children" | "margin" | "sx" | "variant" | "error" | "disabled" | "required" | "size" | "fullWidth" | "hiddenLabel" | "focused"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const InputField: import("@emotion/styled").StyledComponent<import("@mui/material").OutlinedInputProps & {

package/lib/components/common/LoginDialog/loginDialog.styles.js

@@ -35,7 +35,7 @@ export const StyledDialog = styled(Dialog) `
           margin: 8px 0;
         }
 
-        .MuiGrid2-root {
+        .MuiGrid-root {
           margin: 24px 0;
         }
       }

package/lib/components/common/Paper/paper.d.ts

@@ -1,5 +1,6 @@
 import { PaperProps as MPaperProps } from "@mui/material";
 import React, { ReactNode } from "react";
+import { TestIdProps } from "../../types";
 /**
  * An extension of the basic Mui Paper component with custom variants e.g. "panel".
  */
@@ -16,7 +17,7 @@ export declare enum PAPER_PANEL_STYLE {
     NONE = "NONE",
     ROUNDED = "ROUNDED"
 }
-export interface PaperProps {
+export interface PaperProps extends TestIdProps {
     children: ReactNode | ReactNode[];
     className?: string;
     variant?: MPaperProps["variant"];

package/lib/components/common/Paper/paper.js

@@ -10,6 +10,6 @@ export var PAPER_PANEL_STYLE;
     PAPER_PANEL_STYLE["NONE"] = "NONE";
     PAPER_PANEL_STYLE["ROUNDED"] = "ROUNDED";
 })(PAPER_PANEL_STYLE || (PAPER_PANEL_STYLE = {}));
-export const Paper = forwardRef(function Paper({ children, className, variant = "panel" }, ref) {
-    return (React.createElement(MPaper, { className: className, ref: ref, variant: variant }, children));
+export const Paper = forwardRef(function Paper({ children, className, testId, variant = "panel" }, ref) {
+    return (React.createElement(MPaper, { className: className, "data-testid": testId, ref: ref, variant: variant }, children));
 });

package/lib/components/common/Section/components/CollapsableSection/collapsableSection.js

@@ -1,5 +1,4 @@
-import AddRoundedIcon from "@mui/icons-material/AddRounded";
-import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded";
+import { AddRounded, RemoveRounded } from "@mui/icons-material";
 import { Collapse } from "@mui/material";
 import React, { useEffect, useState } from "react";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../../hooks/useBreakpointHelper";
@@ -11,7 +10,7 @@ export const CollapsableSection = ({ children, collapsable = false, title, }) =>
     const [expanded, setExpanded] = useState(false);
     const [transitionDuration, setTransitionDuration] = useState(0);
     const disabled = !mobile || !collapsable;
-    const ExpandIcon = expanded ? RemoveRoundedIcon : AddRoundedIcon;
+    const ExpandIcon = expanded ? RemoveRounded : AddRounded;
     const SectionContent = (React.createElement(SectionText, { component: "div", variant: "text-body-400-2lines" }, children));
     const onToggleExpanded = () => {
         setExpanded((expanded) => !expanded);

package/lib/components/common/ToggleButtonGroup/hooks/UseToggleButtonGroup/hook.d.ts

@@ -0,0 +1,2 @@
+import { ToggleButtonGroupProps } from "@mui/material";
+export declare const useToggleButtonGroup: <TValue extends unknown>(initialValue?: TValue | null) => ToggleButtonGroupProps;

package/lib/components/common/ToggleButtonGroup/hooks/UseToggleButtonGroup/hook.js

@@ -0,0 +1,10 @@
+import { useCallback, useState } from "react";
+export const useToggleButtonGroup = (initialValue = null) => {
+    const [value, setValue] = useState(initialValue);
+    const onChange = useCallback((_, value) => {
+        if (!value)
+            return;
+        setValue(value);
+    }, []);
+    return { onChange, value };
+};

package/lib/components/types.d.ts

@@ -2,6 +2,9 @@ import { ReactNode } from "react";
 export interface BaseComponentProps {
     className?: string;
 }
+export interface ChildrenProps {
+    children?: ReactNode;
+}
 export interface ContentProps {
     content?: ReactNode;
 }

package/lib/config/entities.d.ts

@@ -71,6 +71,7 @@ export interface CategoryGroup {
  */
 export interface CategoryConfig {
     annotation?: DataDictionaryAnnotation;
+    enableChartView?: boolean;
     key: string;
     label: string;
     mapSelectCategoryValue?: (selectCategoryValue: SelectCategoryValueView) => SelectCategoryValueView;
@@ -300,6 +301,7 @@ export interface SiteConfig {
     contentThemeOptionsFn?: ThemeOptionsFn;
     dataDictionary?: DataDictionary;
     dataSource: DataSourceConfig;
+    enableEntitiesView?: boolean;
     entities: EntityConfig[];
     explorerTitle: HeroTitle;
     export?: ExportConfig;

package/lib/hooks/useCategoryFilter.js

@@ -28,6 +28,7 @@ function buildCategoryView(category, categoryValueViews, categoryConfigs) {
     const mapSelectCategoryValue = categoryConfig?.mapSelectCategoryValue || getSelectCategoryValue;
     return {
         annotation: categoryConfig?.annotation,
+        enableChartView: categoryConfig?.enableChartView,
         isDisabled: false,
         key: category.key,
         label: getCategoryLabel(category.key, categoryConfig),

package/lib/hooks/useResizeObserver.d.ts

@@ -13,9 +13,10 @@ export type ElementRect = {
  * Element resizing and repositioning observer.
  * @param ref - element to be observed for changes to its size or position.
  * @param onResizeFn - action to be performed when the observed element is resized or repositioned.
+ * @param shouldObserve - boolean flag to determine if the observer should be active.
  * @returns Element size and position properties for the given element.
  */
-export declare function useResizeObserver(ref: RefObject<HTMLElement>, onResizeFn: (entries: ResizeObserverEntry[]) => Partial<ElementRect>): Partial<ElementRect> | undefined;
+export declare function useResizeObserver(ref: RefObject<HTMLElement>, onResizeFn: (entries: ResizeObserverEntry[]) => Partial<ElementRect>, shouldObserve?: boolean): Partial<ElementRect> | undefined;
 /**
  * Return's the observed element's border box size.
  * @param entries - Resize observer entries.

package/lib/hooks/useResizeObserver.js

@@ -3,9 +3,10 @@ import { useCallback, useEffect, useRef, useState } from "react";
  * Element resizing and repositioning observer.
  * @param ref - element to be observed for changes to its size or position.
  * @param onResizeFn - action to be performed when the observed element is resized or repositioned.
+ * @param shouldObserve - boolean flag to determine if the observer should be active.
  * @returns Element size and position properties for the given element.
  */
-export function useResizeObserver(ref, onResizeFn) {
+export function useResizeObserver(ref, onResizeFn, shouldObserve = true) {
     const [elementRect, setElementRect] = useState();
     const observerRef = useRef();
     // Observed element is resized or repositioned - set state elementRect with the element's new dimensions or position.
@@ -19,6 +20,8 @@ export function useResizeObserver(ref, onResizeFn) {
     useEffect(() => {
         if (!ref.current)
             return;
+        if (!shouldObserve)
+            return;
         observerRef.current = new ResizeObserver(onResize);
         const observer = observerRef.current;
         const observedEl = ref.current;
@@ -26,7 +29,7 @@ export function useResizeObserver(ref, onResizeFn) {
         return () => {
             observer.unobserve(observedEl);
         };
-    }, [onResize, ref]);
+    }, [onResize, ref, shouldObserve]);
     return elementRect;
 }
 /**

package/lib/styles/common/mui/palette.d.ts

@@ -0,0 +1,47 @@
+export declare const PALETTE: {
+    readonly ALERT_LIGHT: "var(--mui-palette-alert-light)";
+    readonly ALERT_LIGHTEST: "var(--mui-palette-alert-lightest)";
+    readonly ALERT_MAIN: "var(--mui-palette-alert-main)";
+    readonly BACKGROUND_DEFAULT: "var(--mui-palette-background-default)";
+    readonly BACKGROUND_PAPER: "var(--mui-palette-background-paper)";
+    readonly COMMON_BACKGROUND: "var(--mui-palette-common-background)";
+    readonly COMMON_BLACK: "var(--mui-palette-common-black)";
+    readonly COMMON_WHITE: "var(--mui-palette-common-white)";
+    readonly ERROR_CONTRAST_TEXT: "var(--mui-palette-error-contrastText)";
+    readonly ERROR_DARK: "var(--mui-palette-error-dark)";
+    readonly ERROR_LIGHT: "var(--mui-palette-error-light)";
+    readonly ERROR_MAIN: "var(--mui-palette-error-main)";
+    readonly INFO_CONTRAST_TEXT: "var(--mui-palette-info-contrastText)";
+    readonly INFO_DARK: "var(--mui-palette-info-dark)";
+    readonly INFO_LIGHT: "var(--mui-palette-info-light)";
+    readonly INFO_LIGHTEST: "var(--mui-palette-info-lightest)";
+    readonly INFO_MAIN: "var(--mui-palette-info-main)";
+    readonly INK_LIGHT: "var(--mui-palette-ink-light)";
+    readonly INK_MAIN: "var(--mui-palette-ink-main)";
+    readonly PRIMARY_CONTRAST_TEXT: "var(--mui-palette-primary-contrastText)";
+    readonly PRIMARY_DARK: "var(--mui-palette-primary-dark)";
+    readonly PRIMARY_LIGHT: "var(--mui-palette-primary-light)";
+    readonly PRIMARY_LIGHTEST: "var(--mui-palette-primary-lightest)";
+    readonly PRIMARY_MAIN: "var(--mui-palette-primary-main)";
+    readonly SECONDARY_CONTRAST_TEXT: "var(--mui-palette-secondary-contrastText)";
+    readonly SECONDARY_DARK: "var(--mui-palette-secondary-dark)";
+    readonly SECONDARY_LIGHT: "var(--mui-palette-secondary-light)";
+    readonly SECONDARY_MAIN: "var(--mui-palette-secondary-main)";
+    readonly SMOKE_DARK: "var(--mui-palette-smoke-dark)";
+    readonly SMOKE_LIGHT: "var(--mui-palette-smoke-light)";
+    readonly SMOKE_LIGHTEST: "var(--mui-palette-smoke-lightest)";
+    readonly SMOKE_MAIN: "var(--mui-palette-smoke-main)";
+    readonly SUCCESS_CONTRAST_TEXT: "var(--mui-palette-success-contrastText)";
+    readonly SUCCESS_DARK: "var(--mui-palette-success-dark)";
+    readonly SUCCESS_LIGHT: "var(--mui-palette-success-light)";
+    readonly SUCCESS_LIGHTEST: "var(--mui-palette-success-lightest)";
+    readonly SUCCESS_MAIN: "var(--mui-palette-success-main)";
+    readonly TEXT_DISABLED: "var(--mui-palette-text-disabled)";
+    readonly TEXT_PRIMARY: "var(--mui-palette-text-primary)";
+    readonly TEXT_SECONDARY: "var(--mui-palette-text-secondary)";
+    readonly WARNING_CONTRAST_TEXT: "var(--mui-palette-warning-contrastText)";
+    readonly WARNING_DARK: "var(--mui-palette-warning-dark)";
+    readonly WARNING_LIGHT: "var(--mui-palette-warning-light)";
+    readonly WARNING_LIGHTEST: "var(--mui-palette-warning-lightest)";
+    readonly WARNING_MAIN: "var(--mui-palette-warning-main)";
+};

package/lib/styles/common/mui/palette.js

@@ -0,0 +1,47 @@
+export const PALETTE = {
+    ALERT_LIGHT: `var(--mui-palette-alert-light)`,
+    ALERT_LIGHTEST: `var(--mui-palette-alert-lightest)`,
+    ALERT_MAIN: `var(--mui-palette-alert-main)`,
+    BACKGROUND_DEFAULT: `var(--mui-palette-background-default)`,
+    BACKGROUND_PAPER: `var(--mui-palette-background-paper)`,
+    COMMON_BACKGROUND: `var(--mui-palette-common-background)`,
+    COMMON_BLACK: `var(--mui-palette-common-black)`,
+    COMMON_WHITE: `var(--mui-palette-common-white)`,
+    ERROR_CONTRAST_TEXT: `var(--mui-palette-error-contrastText)`,
+    ERROR_DARK: `var(--mui-palette-error-dark)`,
+    ERROR_LIGHT: `var(--mui-palette-error-light)`,
+    ERROR_MAIN: `var(--mui-palette-error-main)`,
+    INFO_CONTRAST_TEXT: `var(--mui-palette-info-contrastText)`,
+    INFO_DARK: `var(--mui-palette-info-dark)`,
+    INFO_LIGHT: `var(--mui-palette-info-light)`,
+    INFO_LIGHTEST: `var(--mui-palette-info-lightest)`,
+    INFO_MAIN: `var(--mui-palette-info-main)`,
+    INK_LIGHT: `var(--mui-palette-ink-light)`,
+    INK_MAIN: `var(--mui-palette-ink-main)`,
+    PRIMARY_CONTRAST_TEXT: `var(--mui-palette-primary-contrastText)`,
+    PRIMARY_DARK: `var(--mui-palette-primary-dark)`,
+    PRIMARY_LIGHT: `var(--mui-palette-primary-light)`,
+    PRIMARY_LIGHTEST: `var(--mui-palette-primary-lightest)`,
+    PRIMARY_MAIN: `var(--mui-palette-primary-main)`,
+    SECONDARY_CONTRAST_TEXT: `var(--mui-palette-secondary-contrastText)`,
+    SECONDARY_DARK: `var(--mui-palette-secondary-dark)`,
+    SECONDARY_LIGHT: `var(--mui-palette-secondary-light)`,
+    SECONDARY_MAIN: `var(--mui-palette-secondary-main)`,
+    SMOKE_DARK: `var(--mui-palette-smoke-dark)`,
+    SMOKE_LIGHT: `var(--mui-palette-smoke-light)`,
+    SMOKE_LIGHTEST: `var(--mui-palette-smoke-lightest)`,
+    SMOKE_MAIN: `var(--mui-palette-smoke-main)`,
+    SUCCESS_CONTRAST_TEXT: `var(--mui-palette-success-contrastText)`,
+    SUCCESS_DARK: `var(--mui-palette-success-dark)`,
+    SUCCESS_LIGHT: `var(--mui-palette-success-light)`,
+    SUCCESS_LIGHTEST: `var(--mui-palette-success-lightest)`,
+    SUCCESS_MAIN: `var(--mui-palette-success-main)`,
+    TEXT_DISABLED: `var(--mui-palette-text-disabled)`,
+    TEXT_PRIMARY: `var(--mui-palette-text-primary)`,
+    TEXT_SECONDARY: `var(--mui-palette-text-secondary)`,
+    WARNING_CONTRAST_TEXT: `var(--mui-palette-warning-contrastText)`,
+    WARNING_DARK: `var(--mui-palette-warning-dark)`,
+    WARNING_LIGHT: `var(--mui-palette-warning-light)`,
+    WARNING_LIGHTEST: `var(--mui-palette-warning-lightest)`,
+    WARNING_MAIN: `var(--mui-palette-warning-main)`,
+};

package/lib/tests/testIds.d.ts

@@ -0,0 +1,18 @@
+export declare const TEST_IDS: {
+    CLEAR_ALL_FILTERS: string;
+    ENTITIES_VIEW: string;
+    EXPORT_BUTTON: string;
+    FILTERS: string;
+    FILTER_CONTROLS: string;
+    FILTER_COUNT: string;
+    FILTER_ITEM: string;
+    FILTER_POPOVER: string;
+    FILTER_TERM: string;
+    SEARCH_ALL_FILTERS: string;
+    SIDEBAR: string;
+    SIDEBAR_DRAWER: string;
+    TABLE_FIRST_CELL: string;
+    TABLE_PAGINATION: string;
+    TABLE_PAGINATION_PAGE: string;
+    TABLE_PAGINATION_RESULTS: string;
+};

package/lib/tests/testIds.js

@@ -0,0 +1,18 @@
+export const TEST_IDS = {
+    CLEAR_ALL_FILTERS: "clear-all-filters",
+    ENTITIES_VIEW: "entities-view",
+    EXPORT_BUTTON: "export-button",
+    FILTERS: "filters",
+    FILTER_CONTROLS: "filter-controls",
+    FILTER_COUNT: "filter-count",
+    FILTER_ITEM: "filter-item",
+    FILTER_POPOVER: "filter-popover",
+    FILTER_TERM: "filter-term",
+    SEARCH_ALL_FILTERS: "search-all-filters",
+    SIDEBAR: "sidebar",
+    SIDEBAR_DRAWER: "sidebar-drawer",
+    TABLE_FIRST_CELL: "table-first-cell",
+    TABLE_PAGINATION: "table-pagination",
+    TABLE_PAGINATION_PAGE: "table-pagination-page",
+    TABLE_PAGINATION_RESULTS: "table-pagination-results",
+};

package/lib/theme/common/components.js

@@ -1,3 +1,4 @@
+import { DropDownIcon } from "../../components/common/Form/components/Select/components/DropDownIcon/dropDownIcon";
 import { CHIP_PROPS } from "../../styles/common/mui/chip";
 import { desktopUp, mobileUp, tabletUp } from "./breakpoints";
 import { alpha32, alpha60, alpha64, alpha80, black04, black08, white, } from "./palette";
@@ -1113,6 +1114,9 @@ export const MuiRadio = (theme) => {
  * MuiSelect Component
  */
 export const MuiSelect = {
+    defaultProps: {
+        IconComponent: DropDownIcon,
+    },
     styleOverrides: {
         select: {
             minHeight: "unset",

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

@@ -1,4 +1,4 @@
-import { CSSProperties } from "@mui/material/styles/createTypography";
+import { CSSProperties } from "@mui/material";
 /**
  * Typography constants.
  */

package/lib/theme/theme.js

@@ -1,4 +1,5 @@
 import { createTheme } from "@mui/material";
+import { deepmerge } from "@mui/utils";
 import * as B from "./common/breakpoints";
 import * as C from "./common/components";
 import * as P from "./common/palette";
@@ -10,9 +11,9 @@ import * as M from "./components";
  * @param customOptions - Custom theme option overrides.
  * @returns theme with custom theme overrides.
  */
-export function createAppTheme(customOptions) {
+export function createAppTheme(customOptions = {}) {
     // Generate default theme with custom overrides.
-    const theme = createTheme({
+    const theme = createTheme(deepmerge({
         breakpoints: {
             values: {
                 lg: B.desktop,
@@ -21,6 +22,7 @@ export function createAppTheme(customOptions) {
                 xs: B.mobile,
             },
         },
+        cssVariables: true,
         palette: {
             alert: P.alert,
             background: P.background,
@@ -53,7 +55,7 @@ export function createAppTheme(customOptions) {
             [T.TEXT_UPPERCASE_500]: T.textUppercase500,
             fontFamily: T.fontFamily,
         },
-    }, { ...customOptions });
+    }, customOptions));
     // Default shadow overrides.
     theme.shadows = [...theme.shadows].map((shadow, s) => shadows[s] || shadow);
     // Theme components.

package/lib/views/ExploreView/exploreView.js

@@ -5,13 +5,14 @@ import { ComponentCreator } from "../../components/ComponentCreator/ComponentCre
 import { ClearAllFilters } from "../../components/Filter/components/ClearAllFilters/clearAllFilters";
 import { Filters, } from "../../components/Filter/components/Filters/filters";
 import { SearchAllFilters } from "../../components/Filter/components/SearchAllFilters/searchAllFilters";
+import { ChartView } from "../../components/Index/components/EntitiesView/components/ChartView/chartView";
+import { EntityList } from "../../components/Index/components/EntitiesView/components/EntityList/entityList";
 import { Tabs } from "../../components/Index/components/Tabs/tabs";
 import { Index as IndexView } from "../../components/Index/index";
 import { SidebarButton } from "../../components/Layout/components/Sidebar/components/SidebarButton/sidebarButton";
 import { SidebarLabel } from "../../components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel";
 import { SidebarTools } from "../../components/Layout/components/Sidebar/components/SidebarTools/sidebarTools.styles";
 import { Sidebar } from "../../components/Layout/components/Sidebar/sidebar";
-import { TableCreator } from "../../components/TableCreator/tableCreator";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../hooks/useBreakpointHelper";
 import { useConfig } from "../../hooks/useConfig";
 import { useEntityList } from "../../hooks/useEntityList";
@@ -19,6 +20,7 @@ import { useExploreState } from "../../hooks/useExploreState";
 import { useSummary } from "../../hooks/useSummary";
 import { ExploreActionKind } from "../../providers/exploreState";
 import { SELECT_CATEGORY_KEY } from "../../providers/exploreState/constants";
+import { TEST_IDS } from "../../tests/testIds";
 import { DESKTOP_SM } from "../../theme/common/breakpoints";
 export const ExploreView = (props) => {
     const [isDrawerOpen, setIsDrawerOpen] = useState(false);
@@ -28,7 +30,7 @@ export const ExploreView = (props) => {
     const { explorerTitle, summaryConfig, trackingConfig } = config;
     const { listView } = entityConfig;
     const { listHero, subTitleHero } = listView || {};
-    const { categoryGroups, categoryViews, filterCount } = exploreState;
+    const { categoryGroups, categoryViews, filterCount, loading } = exploreState;
     const { response: summaryResponse } = useSummary(); // Fetch summary.
     useEntityList(props); // Fetch entities.
     const { entityListType } = props;
@@ -98,12 +100,12 @@ export const ExploreView = (props) => {
     }, [entityListType, exploreDispatch]);
     return (React.createElement(React.Fragment, null,
         categoryViews && !!categoryViews.length && (React.createElement(Sidebar, { drawerOpen: isDrawerOpen, onDrawerClose: onCloseDrawer },
-            React.createElement(SidebarTools, null,
+            React.createElement(SidebarTools, { "data-testid": TEST_IDS.FILTER_CONTROLS },
                 React.createElement(SidebarLabel, { label: "Filters" }),
                 React.createElement(ClearAllFilters, null),
                 React.createElement(SearchAllFilters, { categoryViews: categoryViews, drawerOpen: isDrawerOpen, onFilter: onFilterChange.bind(null, true) })),
             React.createElement(Filters, { categoryFilters: categoryFilters, closeAncestor: onCloseDrawer, onFilter: onFilterChange.bind(null, false), trackFilterOpened: trackingConfig?.trackFilterOpened }))),
-        React.createElement(IndexView, { className: props.className, List: renderList(exploreState, entityConfig, entityListType), ListHero: renderComponent(listHero), SideBarButton: tabletDown ? (React.createElement(SidebarButton, { count: filterCount, label: "Filter", onClick: onOpenDrawer })) : undefined, SubTitleHero: renderComponent(subTitleHero), Summaries: renderSummary(summaryConfig, summaryResponse), Tabs: React.createElement(Tabs, null), title: entityConfig.explorerTitle || explorerTitle })));
+        React.createElement(IndexView, { className: props.className, chart: React.createElement(ChartView, { categoryFilters: categoryFilters, loading: loading }), list: React.createElement(EntityList, { entityListType: entityListType }), ListHero: renderComponent(listHero), SideBarButton: tabletDown ? (React.createElement(SidebarButton, { count: filterCount, label: "Filter", onClick: onOpenDrawer })) : undefined, SubTitleHero: renderComponent(subTitleHero), Summaries: renderSummary(summaryConfig, summaryResponse), Tabs: React.createElement(Tabs, null), title: entityConfig.explorerTitle || explorerTitle })));
 };
 /**
  * Builds the category views into category views grouped by the given category group configuration.
@@ -142,27 +144,6 @@ function renderComponent(componentsConfig, response) {
     }
     return React.createElement(ComponentCreator, { components: componentsConfig, response: response });
 }
-/**
- * Render either a loading view, empty result set notification or the table itself.
- * @param exploreState - ExploreView responses from Azul, such as projects (index/projects), samples (index/samples) and files (index/files).
- * @param entityConfig - Entity configuration.
- * @param entityListType - Entity list type.
- * @returns rendered Table component.
- */
-function renderList(exploreState, entityConfig, entityListType) {
-    const { listItems, loading, tabValue } = exploreState;
-    const { getId: getRowId, list, listView } = entityConfig;
-    const { columns: columnsConfig } = list;
-    if (!exploreState || !tabValue) {
-        return React.createElement(React.Fragment, null); //TODO: return the loading UI component
-    }
-    if (entityListType !== tabValue) {
-        // required currently for client-side fetching as the pre-rendered page
-        // loads with the previous tabs data on the first render after switching tabs. (or similar)
-        return React.createElement(React.Fragment, null);
-    }
-    return (React.createElement(TableCreator, { columns: columnsConfig, getRowId: getRowId, items: listItems ?? [], listView: listView, loading: loading }));
-}
 /**
  * Renders Summaries component when all the following requirements are fulfilled:
  * - defined summary config,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "24.0.0",
+  "version": "25.1.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
@@ -24,7 +24,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.4.2",
     "@commitlint/config-conventional": "^17.4.2",
-    "@mui/types": "^7.2.18",
+    "@mui/types": "^7.4.0",
     "@next/eslint-plugin-next": "^14.1.0",
     "@storybook/addon-actions": "^8.6.4",
     "@storybook/addon-essentials": "^8.6.4",
@@ -36,6 +36,7 @@
     "@storybook/test": "^8.6.4",
     "@storybook/types": "^8.6.4",
     "@testing-library/react": "^16.0.1",
+    "@types/d3": "^7.4.3",
     "@types/jest": "^29.4.0",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
@@ -67,8 +68,9 @@
   "peerDependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^6.1.5",
-    "@mui/material": "^6.1.5",
+    "@mui/icons-material": "^7.0.1",
+    "@mui/material": "^7.0.1",
+    "@observablehq/plot": "^0.6.17",
     "@tanstack/react-table": "^8.19.2",
     "@tanstack/react-virtual": "^3.0.0-beta.59",
     "copy-to-clipboard": "3.3.1",

package/src/common/entities.ts

@@ -109,6 +109,7 @@ export interface SelectCategoryValueView {
  */
 export interface SelectCategoryView {
   annotation?: DataDictionaryAnnotation;
+  enableChartView?: boolean;
   isDisabled?: boolean;
   key: CategoryKey;
   label: string;

package/src/components/DataDictionary/components/Entities/constants.ts

@@ -1,8 +1,8 @@
-import { Grid2Props } from "@mui/material";
+import { GridProps } from "@mui/material";
 
 export const ENTITIES_ROW_GAP = 8;
 
-export const GRID2_PROPS: Grid2Props = {
+export const GRID_PROPS: GridProps = {
   container: true,
   direction: "column",
   flexWrap: "nowrap",

package/src/components/DataDictionary/components/Entities/entities.tsx

@@ -1,15 +1,15 @@
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import React from "react";
 import { Entity } from "../Entity/entity";
-import { GRID2_PROPS } from "./constants";
+import { GRID_PROPS } from "./constants";
 import { ClassesProps } from "./types";
 
 export const Entities = ({ classes, spacing }: ClassesProps): JSX.Element => {
   return (
-    <Grid2 {...GRID2_PROPS}>
+    <Grid {...GRID_PROPS}>
       {classes.map((classData) => (
         <Entity key={classData.key} class={classData} spacing={spacing} />
       ))}
-    </Grid2>
+    </Grid>
   );
 };

package/src/components/DataDictionary/components/Entity/constants.ts

@@ -1,6 +1,6 @@
-import { Grid2Props } from "@mui/material";
+import { GridProps } from "@mui/material";
 
-export const GRID2_PROPS: Grid2Props = {
+export const GRID_PROPS: GridProps = {
   container: true,
   direction: "column",
   flexWrap: "nowrap",

package/src/components/DataDictionary/components/Entity/entity.tsx

@@ -1,10 +1,10 @@
-import { Grid2, Typography } from "@mui/material";
+import { Grid, Typography } from "@mui/material";
 import React from "react";
 import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { AnchorLink } from "../../../common/AnchorLink/anchorLink";
 import { useTable } from "../Table/hook";
 import { Table } from "../Table/table";
-import { GRID2_PROPS } from "./constants";
+import { GRID_PROPS } from "./constants";
 import { StyledTypography } from "./entity.styles";
 import { EntityProps } from "./types";
 
@@ -14,8 +14,8 @@ export const Entity = ({
 }: EntityProps): JSX.Element => {
   const table = useTable(classData.attributes);
   return (
-    <Grid2 {...GRID2_PROPS} rowGap={4}>
-      <Grid2 {...GRID2_PROPS} rowGap={1}>
+    <Grid {...GRID_PROPS} rowGap={4}>
+      <Grid {...GRID_PROPS} rowGap={1}>
         <StyledTypography
           component="h3"
           id={classData.key}
@@ -31,8 +31,8 @@ export const Entity = ({
         >
           {classData.description}
         </Typography>
-      </Grid2>
+      </Grid>
       <Table table={table} />
-    </Grid2>
+    </Grid>
   );
 };

package/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/NIHAccountExpiryWarning/nihAccountExpiryWarning.tsx

@@ -23,7 +23,7 @@ export const NIHAccountExpiryWarning = (): JSX.Element | null => {
           Please{" "}
           <Link
             label="renew your account"
-            url="https://support.terra.bio/hc/en-us/articles/360038086332-Linking-authorization-accessing-controlled-data-on-external-servers#heading-4"
+            url="https://support.terra.bio/hc/en-us/articles/19124069598235"
           />{" "}
           link.
         </span>

package/src/components/Filter/components/ClearAllFilters/clearAllFilters.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { useExploreState } from "../../../../hooks/useExploreState";
 import { ExploreActionKind } from "../../../../providers/exploreState";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { ButtonTextPrimary } from "../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary";
 
 export const ClearAllFilters = (): JSX.Element => {
@@ -14,6 +15,11 @@ export const ClearAllFilters = (): JSX.Element => {
   };
 
   return (
-    <ButtonTextPrimary onClick={onClearFilters}>Clear All</ButtonTextPrimary>
+    <ButtonTextPrimary
+      data-testid={TEST_IDS.CLEAR_ALL_FILTERS}
+      onClick={onClearFilters}
+    >
+      Clear All
+    </ButtonTextPrimary>
   );
 };

package/src/components/Filter/components/Filter/filter.tsx

@@ -4,6 +4,7 @@ import React, { MouseEvent, ReactNode, useState } from "react";
 import { SelectCategoryView } from "../../../../common/entities";
 import { TrackFilterOpenedFunction } from "../../../../config/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { FilterLabel } from "../FilterLabel/filterLabel";
 import { FilterMenu } from "../FilterMenu/filterMenu";
 import { DrawerTransition } from "./components/DrawerTransition/drawerTransition";
@@ -87,6 +88,7 @@ export const Filter = ({
       <FilterPopover
         anchorPosition={anchorPosition}
         anchorReference="anchorPosition"
+        data-testid={TEST_IDS.FILTER_POPOVER}
         marginThreshold={0}
         onClose={onCloseFilters}
         open={isOpen}

package/src/components/Filter/components/FilterLabel/filterLabel.tsx

@@ -1,4 +1,4 @@
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { ArrowDropDownRounded } from "@mui/icons-material";
 import React, { MouseEvent } from "react";
 import { DataDictionaryAnnotation } from "../../../../common/entities";
 import { Tooltip } from "../../../DataDictionary/components/Tooltip/tooltip";
@@ -27,7 +27,7 @@ export const FilterLabel = ({
       <Label
         color="inherit"
         disabled={disabled}
-        endIcon={<ArrowDropDownRoundedIcon fontSize="small" />}
+        endIcon={<ArrowDropDownRounded fontSize="small" />}
         fullWidth
         isOpen={isOpen}
         onClick={onClick}