@databiosphere/findable-ui 24.0.0 → 25.1.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "24.0.0"
+  ".": "25.1.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # Changelog
 
+## [25.1.0](https://github.com/DataBiosphere/findable-ui/compare/v25.0.0...v25.1.0) (2025-04-14)
+
+
+### Features
+
+* add test ids to key testable components ([#401](https://github.com/DataBiosphere/findable-ui/issues/401)) ([#403](https://github.com/DataBiosphere/findable-ui/issues/403)) ([99a41f8](https://github.com/DataBiosphere/findable-ui/commit/99a41f8661d0794d20b4e610a24c9fe1b8fbc4f1))
+
+
+### Bug Fixes
+
+* fix theme with deepmerge ([#399](https://github.com/DataBiosphere/findable-ui/issues/399)) ([#400](https://github.com/DataBiosphere/findable-ui/issues/400)) ([981d8f9](https://github.com/DataBiosphere/findable-ui/commit/981d8f9fb2a1acce20707d558c9880dc63af7485))
+
+## [25.0.0](https://github.com/DataBiosphere/findable-ui/compare/v24.0.0...v25.0.0) (2025-04-11)
+
+
+### ⚠ BREAKING CHANGES
+
+* refactor filtersummary to chartview ([#395](https://github.com/DataBiosphere/findable-ui/issues/395)) (#396)
+* implement filter summary view charts ([#390](https://github.com/DataBiosphere/findable-ui/issues/390)) (#391)
+* add css variables to theme ([#392](https://github.com/DataBiosphere/findable-ui/issues/392)) (#393)
+* implement filter summary view toggle ([#377](https://github.com/DataBiosphere/findable-ui/issues/377)) (#389)
+* update mui to latest version v7 ([#373](https://github.com/DataBiosphere/findable-ui/issues/373)) (#375)
+
+### Features
+
+* add css variables to theme ([#392](https://github.com/DataBiosphere/findable-ui/issues/392)) ([#393](https://github.com/DataBiosphere/findable-ui/issues/393)) ([9a04974](https://github.com/DataBiosphere/findable-ui/commit/9a049749c3ecc122dc86395eca5fa544a59f885b))
+* implement filter summary view charts ([#390](https://github.com/DataBiosphere/findable-ui/issues/390)) ([#391](https://github.com/DataBiosphere/findable-ui/issues/391)) ([f679a0b](https://github.com/DataBiosphere/findable-ui/commit/f679a0b3a4910ebbd270f250dbc5c6cbe75a8257))
+* implement filter summary view toggle ([#377](https://github.com/DataBiosphere/findable-ui/issues/377)) ([#389](https://github.com/DataBiosphere/findable-ui/issues/389)) ([87882f2](https://github.com/DataBiosphere/findable-ui/commit/87882f2d719d6d12748a795dce97f80e89e8a2ef))
+* update backpagehero props to take breadcrumbs as reactnode ([#371](https://github.com/DataBiosphere/findable-ui/issues/371)) ([#372](https://github.com/DataBiosphere/findable-ui/issues/372)) ([d53947a](https://github.com/DataBiosphere/findable-ui/commit/d53947a70d7957f19e9770d3174630bc5b402ce8))
+
+
+### Bug Fixes
+
+* add dropdownicon to muiselect default props ([#356](https://github.com/DataBiosphere/findable-ui/issues/356)) ([#384](https://github.com/DataBiosphere/findable-ui/issues/384)) ([de68df4](https://github.com/DataBiosphere/findable-ui/commit/de68df4804f58deaf4d3c8caebafbdc5f88b2884))
+* fix ci test failure 'textencoder is not defined' ([#381](https://github.com/DataBiosphere/findable-ui/issues/381)) ([#382](https://github.com/DataBiosphere/findable-ui/issues/382)) ([0f301b7](https://github.com/DataBiosphere/findable-ui/commit/0f301b7176f65219d9c7484a7cb735ff8b12fdb5))
+* fix Jest ESM Transformation Issue for @mui/icons-material ([#352](https://github.com/DataBiosphere/findable-ui/issues/352)) ([#353](https://github.com/DataBiosphere/findable-ui/issues/353)) ([b812371](https://github.com/DataBiosphere/findable-ui/commit/b812371ed47ecddf32b1eeec18e8e846eee52ae4))
+* fix search bar position when a banner is displayed ([#369](https://github.com/DataBiosphere/findable-ui/issues/369)) ([#370](https://github.com/DataBiosphere/findable-ui/issues/370)) ([c7d476c](https://github.com/DataBiosphere/findable-ui/commit/c7d476cd4db90ecdcd77ad5da774c669b2c04e6b))
+* update 'renew your account' link ([#385](https://github.com/DataBiosphere/findable-ui/issues/385)) ([#386](https://github.com/DataBiosphere/findable-ui/issues/386)) ([ecf0ce3](https://github.com/DataBiosphere/findable-ui/commit/ecf0ce346811ac3a00a64863e9397ff0bf5691c4))
+
+
+### Chores
+
+* update mui to latest version v7 ([#373](https://github.com/DataBiosphere/findable-ui/issues/373)) ([#375](https://github.com/DataBiosphere/findable-ui/issues/375)) ([b395861](https://github.com/DataBiosphere/findable-ui/commit/b395861d631fa1f744ba8d6e008baa5507e249bd))
+
+
+### Code Refactoring
+
+* refactor filtersummary to chartview ([#395](https://github.com/DataBiosphere/findable-ui/issues/395)) ([#396](https://github.com/DataBiosphere/findable-ui/issues/396)) ([458ad99](https://github.com/DataBiosphere/findable-ui/commit/458ad9915fe6e9231a3ecb2f00bde688a3305873))
+* refactor list to a jsx element instead of an evaluated function ([#378](https://github.com/DataBiosphere/findable-ui/issues/378)) ([#379](https://github.com/DataBiosphere/findable-ui/issues/379)) ([4a13192](https://github.com/DataBiosphere/findable-ui/commit/4a131926d312a685eab828e125d375656ce56c52))
+* remove deprecated components from index component tree ([#387](https://github.com/DataBiosphere/findable-ui/issues/387)) ([#388](https://github.com/DataBiosphere/findable-ui/issues/388)) ([9725293](https://github.com/DataBiosphere/findable-ui/commit/9725293f0320964d92141c0fe8030dffece5ae03))
+
 ## [24.0.0](https://github.com/DataBiosphere/findable-ui/compare/v23.0.0...v24.0.0) (2025-03-28)
 
 

package/lib/common/entities.d.ts

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

package/lib/components/DataDictionary/components/Entities/constants.d.ts

@@ -1,3 +1,3 @@
-import { Grid2Props } from "@mui/material";
+import { GridProps } from "@mui/material";
 export declare const ENTITIES_ROW_GAP = 8;
-export declare const GRID2_PROPS: Grid2Props;
+export declare const GRID_PROPS: GridProps;

package/lib/components/DataDictionary/components/Entities/constants.js

@@ -1,5 +1,5 @@
 export const ENTITIES_ROW_GAP = 8;
-export const GRID2_PROPS = {
+export const GRID_PROPS = {
     container: true,
     direction: "column",
     flexWrap: "nowrap",

package/lib/components/DataDictionary/components/Entities/entities.js

@@ -1,7 +1,7 @@
-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";
 export const Entities = ({ classes, spacing }) => {
-    return (React.createElement(Grid2, { ...GRID2_PROPS }, classes.map((classData) => (React.createElement(Entity, { key: classData.key, class: classData, spacing: spacing })))));
+    return (React.createElement(Grid, { ...GRID_PROPS }, classes.map((classData) => (React.createElement(Entity, { key: classData.key, class: classData, spacing: spacing })))));
 };

package/lib/components/DataDictionary/components/Entity/constants.d.ts

@@ -1,2 +1,2 @@
-import { Grid2Props } from "@mui/material";
-export declare const GRID2_PROPS: Grid2Props;
+import { GridProps } from "@mui/material";
+export declare const GRID_PROPS: GridProps;

package/lib/components/DataDictionary/components/Entity/constants.js

@@ -1,4 +1,4 @@
-export const GRID2_PROPS = {
+export const GRID_PROPS = {
     container: true,
     direction: "column",
     flexWrap: "nowrap",

package/lib/components/DataDictionary/components/Entity/entity.js

@@ -1,15 +1,15 @@
-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";
 export const Entity = ({ class: classData, spacing, }) => {
     const table = useTable(classData.attributes);
-    return (React.createElement(Grid2, { ...GRID2_PROPS, rowGap: 4 },
-        React.createElement(Grid2, { ...GRID2_PROPS, rowGap: 1 },
+    return (React.createElement(Grid, { ...GRID_PROPS, rowGap: 4 },
+        React.createElement(Grid, { ...GRID_PROPS, rowGap: 1 },
             React.createElement(StyledTypography, { component: "h3", id: classData.key, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL, ...spacing },
                 classData.label,
                 " ",

package/lib/components/Export/components/ExportForm/exportForm.styles.d.ts

@@ -2,12 +2,12 @@ import { ThemeProps } from "../../../../theme/theme";
 export declare const margin: ({ theme }: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const FormControl: 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 TableFormControl: 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 GridPaper: import("@emotion/styled").StyledComponent<{

package/lib/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/NIHAccountExpiryWarning/nihAccountExpiryWarning.js

@@ -16,7 +16,7 @@ export const NIHAccountExpiryWarning = () => {
             React.createElement("span", null,
                 "Please",
                 " ",
-                React.createElement(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" }),
+                React.createElement(Link, { label: "renew your account", url: "https://support.terra.bio/hc/en-us/articles/19124069598235" }),
                 " ",
                 "link.")))) : null;
 };

package/lib/components/Filter/components/ClearAllFilters/clearAllFilters.js

@@ -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 = () => {
     const { exploreDispatch } = useExploreState();
@@ -10,5 +11,5 @@ export const ClearAllFilters = () => {
             type: ExploreActionKind.ClearFilters,
         });
     };
-    return (React.createElement(ButtonTextPrimary, { onClick: onClearFilters }, "Clear All"));
+    return (React.createElement(ButtonTextPrimary, { "data-testid": TEST_IDS.CLEAR_ALL_FILTERS, onClick: onClearFilters }, "Clear All"));
 };

package/lib/components/Filter/components/Filter/filter.js

@@ -1,6 +1,7 @@
 import { CloseRounded } from "@mui/icons-material";
 import { Grow } from "@mui/material";
 import React, { useState } from "react";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { FilterLabel } from "../FilterLabel/filterLabel";
 import { FilterMenu } from "../FilterMenu/filterMenu";
 import { DrawerTransition } from "./components/DrawerTransition/drawerTransition";
@@ -49,7 +50,7 @@ export const Filter = ({ categorySection, categoryView, closeAncestor, isFilterD
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(FilterLabel, { annotation: categoryView.annotation, count: categoryView.values.length, disabled: categoryView.isDisabled, isOpen: isOpen, label: categoryView.label, onClick: onOpenFilter }),
-        React.createElement(FilterPopover, { anchorPosition: anchorPosition, anchorReference: "anchorPosition", marginThreshold: 0, onClose: onCloseFilters, open: isOpen, slotProps: slotProps, TransitionComponent: TransitionComponent, transitionDuration: TransitionDuration },
+        React.createElement(FilterPopover, { anchorPosition: anchorPosition, anchorReference: "anchorPosition", "data-testid": TEST_IDS.FILTER_POPOVER, marginThreshold: 0, onClose: onCloseFilters, open: isOpen, slotProps: slotProps, TransitionComponent: TransitionComponent, transitionDuration: TransitionDuration },
             isOpen && isFilterDrawer && (React.createElement(IconButton, { Icon: CloseRounded, onClick: onCloseFilters, size: "medium" })),
             React.createElement(FilterMenu, { categorySection: categorySection, categoryKey: categoryView.key, categoryLabel: categoryView.label, isFilterDrawer: isFilterDrawer, onFilter: onFilter, onCloseFilter: onCloseFilter, values: categoryView.values })),
         tags));

package/lib/components/Filter/components/FilterLabel/filterLabel.js

@@ -1,9 +1,9 @@
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { ArrowDropDownRounded } from "@mui/icons-material";
 import React from "react";
 import { Tooltip } from "../../../DataDictionary/components/Tooltip/tooltip";
 import { FilterLabel as Label } from "./filterLabel.styles";
 export const FilterLabel = ({ annotation, count, disabled = false, isOpen, label, onClick, }) => {
     const filterLabel = count ? `${label}\xa0(${count})` : label; // When the count is present, a non-breaking space is used to prevent it from being on its own line
     return (React.createElement(Tooltip, { description: annotation?.description, title: annotation?.label },
-        React.createElement(Label, { color: "inherit", disabled: disabled, endIcon: React.createElement(ArrowDropDownRoundedIcon, { fontSize: "small" }), fullWidth: true, isOpen: isOpen, onClick: onClick }, filterLabel)));
+        React.createElement(Label, { color: "inherit", disabled: disabled, endIcon: React.createElement(ArrowDropDownRounded, { fontSize: "small" }), fullWidth: true, isOpen: isOpen, onClick: onClick }, filterLabel)));
 };

package/lib/components/Filter/components/FilterLabel/filterLabel.styles.d.ts

@@ -3,7 +3,7 @@ interface Props {
 }
 export declare const FilterLabel: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & 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" | "variant" | "disabled" | "href" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & {
+}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "href" | "action" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "fullWidth" | "disableElevation" | "disableFocusRipple" | "endIcon" | "loadingIndicator" | "loadingPosition" | "startIcon"> & {
     theme?: import("@emotion/react").Theme;
 } & Props, {}, {}>;
 export {};

package/lib/components/Filter/components/Filters/filters.js

@@ -2,6 +2,7 @@ import { Divider } from "@mui/material";
 import React, { Fragment, useEffect, useRef, useState } from "react";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
 import { useWindowResize } from "../../../../hooks/useWindowResize";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
 import { Filter } from "../Filter/filter";
 import { FilterTags } from "../FilterTags/filterTags";
@@ -42,7 +43,7 @@ export const Filters = ({ categoryFilters, closeAncestor, disabled = false, onFi
     useEffect(() => {
         setHeight(calculateListHeight(windowHeight, filterListRef.current));
     }, [windowHeight]);
-    return (React.createElement(FilterList, { disabled: disabled, height: height, ref: filterListRef }, categoryFilters.map(({ categoryViews, label }, i) => (React.createElement(Fragment, { key: i },
+    return (React.createElement(FilterList, { "data-testid": TEST_IDS.FILTERS, disabled: disabled, height: height, ref: filterListRef }, categoryFilters.map(({ categoryViews, label }, i) => (React.createElement(Fragment, { key: i },
         i !== 0 && React.createElement(Divider, null),
         label && React.createElement(CategoryViewsLabel, null, label),
         categoryViews.map((categoryView) => (React.createElement(Filter, { key: categoryView.key, categorySection: label, categoryView: categoryView, closeAncestor: closeAncestor, isFilterDrawer: isFilterDrawer, onFilter: onFilter, trackFilterOpened: trackFilterOpened, tags: renderFilterTags(categoryView, onFilter) }))))))));

package/lib/components/Filter/components/HighlightedLabel/highlightedLabel.d.ts

@@ -1,7 +1,8 @@
+import { TestIdProps } from "../../../types";
 import { FilterMenuSearchMatchRange } from "../../common/entities";
-interface HighlightedLabelProps {
+interface HighlightedLabelProps extends TestIdProps {
     label: string;
     ranges?: FilterMenuSearchMatchRange[];
 }
-export declare const HighlightedLabel: ({ label, ranges, }: HighlightedLabelProps) => JSX.Element;
+export declare const HighlightedLabel: ({ label, ranges, testId, }: HighlightedLabelProps) => JSX.Element;
 export {};

package/lib/components/Filter/components/HighlightedLabel/highlightedLabel.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { MatchHighlight } from "./highlightedLabel.styles";
-export const HighlightedLabel = ({ label, ranges, }) => {
+export const HighlightedLabel = ({ label, ranges, testId, }) => {
     const items = [];
     if (ranges) {
         ranges = ranges.slice().sort(({ start: a }, { start: b }) => a - b);
@@ -29,5 +29,5 @@ export const HighlightedLabel = ({ label, ranges, }) => {
     else {
         items.push(label);
     }
-    return React.createElement("span", null, items);
+    return React.createElement("span", { "data-testid": testId }, items);
 };

package/lib/components/Filter/components/SearchAllFilters/components/VariableSizeListItem/variableSizeListItem.js

@@ -1,5 +1,6 @@
 import { Checkbox, ListItemButton, ListItemText, ListSubheader, Typography, } from "@mui/material";
 import React, { useEffect, useRef } from "react";
+import { TEST_IDS } from "../../../../../../tests/testIds";
 import { TEXT_BODY_SMALL_400 } from "../../../../../../theme/common/typography";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
@@ -18,9 +19,9 @@ export default function VariableSizeListItem({ item, onFilter, onUpdateItemSizeB
     }, [key, onUpdateItemSizeByItemKey]);
     if (item.type === ITEM_TYPE.VALUE) {
         const { categoryKey, matchRanges, value: { count, key: valueKey, label, selected }, } = item;
-        return (React.createElement(ListItemButton, { ref: setRef, key: key, onClick: () => onFilter(categoryKey, valueKey, !selected, undefined, searchTerm), selected: selected, style: style },
+        return (React.createElement(ListItemButton, { "data-testid": TEST_IDS.FILTER_ITEM, ref: setRef, key: key, onClick: () => onFilter(categoryKey, valueKey, !selected, undefined, searchTerm), selected: selected, style: style },
             React.createElement(Checkbox, { checked: selected, checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null) }),
-            React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(HighlightedLabel, { label: label, ranges: matchRanges }), secondary: React.createElement(Typography, { color: "ink.light", variant: TEXT_BODY_SMALL_400 }, count) })));
+            React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(HighlightedLabel, { label: label, ranges: matchRanges, testId: TEST_IDS.FILTER_TERM }), secondary: React.createElement(Typography, { color: "ink.light", "data-testid": TEST_IDS.FILTER_COUNT, variant: TEXT_BODY_SMALL_400 }, count) })));
     }
     else if (item.type === ITEM_TYPE.CATEGORY) {
         return (React.createElement(ListSubheader, { key: key, ref: setRef, style: style }, item.categoryLabel));

package/lib/components/Filter/components/SearchAllFilters/searchAllFilters.js

@@ -1,6 +1,7 @@
 import React, { createContext, useContext, useEffect, useRef, useState, } from "react";
 import { SELECTOR } from "../../../../common/selectors";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
 import { SearchCloseButton } from "../SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton";
 import { SearchAllFiltersSearch } from "../SearchAllFiltersSearch/searchAllFiltersSearch";
@@ -85,7 +86,7 @@ export const SearchAllFilters = ({ categoryViews, drawerOpen = false, onFilter,
             open,
             searchTerm,
         } },
-        React.createElement(Autocomplete, { clearOnBlur: desktopSmUp, filterOptions: (options) => options, freeSolo: true, ListboxComponent: Listbox, onBlur: desktopSmUp ? onCloseSearch : undefined, onClose: desktopSmUp ? onCloseSearch : undefined, onFocus: onOpenSearch, onOpen: onOpen, open: open, options: [""], PopperComponent: AutocompletePopper, ref: autocompleteRef, renderInput: (props) => renderInput({
+        React.createElement(Autocomplete, { clearOnBlur: desktopSmUp, "data-testid": TEST_IDS.SEARCH_ALL_FILTERS, filterOptions: (options) => options, freeSolo: true, ListboxComponent: Listbox, onBlur: desktopSmUp ? onCloseSearch : undefined, onClose: desktopSmUp ? onCloseSearch : undefined, onFocus: onOpenSearch, onOpen: onOpen, open: open, options: [""], PopperComponent: AutocompletePopper, ref: autocompleteRef, renderInput: (props) => renderInput({
                 ...props,
                 InputProps: {
                     ...props.InputProps,

package/lib/components/Filter/components/SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton.js

@@ -1,4 +1,4 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import { IconButton } from "@mui/material";
 import React, { Fragment, useContext } from "react";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../../../hooks/useBreakpointHelper";
@@ -10,5 +10,5 @@ export const SearchCloseButton = () => {
     const showButton = open && (desktopSmDown || searchTerm);
     const onClickFn = desktopSmDown ? onCloseSearch : onClearSearch;
     return (React.createElement(Fragment, null, showButton && (React.createElement(IconButton, { onClick: onClickFn, size: "large" },
-        React.createElement(CloseRoundedIcon, { fontSize: "small" })))));
+        React.createElement(CloseRounded, { fontSize: "small" })))));
 };

package/lib/components/Filter/components/VariableSizeListItem/variableSizeListItem.js

@@ -1,6 +1,7 @@
 import { Checkbox, ListItemButton, ListItemText, Typography, } from "@mui/material";
 import React, { useEffect, useRef } from "react";
 import { SELECT_CATEGORY_KEY } from "../../../../providers/exploreState/constants";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { TEXT_BODY_SMALL_400 } from "../../../../theme/common/typography";
 import { CheckedIcon } from "../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedIcon } from "../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
@@ -16,7 +17,7 @@ export default function VariableSizeListItem({ categoryKey, categorySection, mat
     const handleItemClicked = () => {
         onFilter(categoryKey, key, !selected, categorySection);
     };
-    return (React.createElement(ListItemButton, { ref: listItemRef, onClick: handleItemClicked, selected: selected, style: style },
+    return (React.createElement(ListItemButton, { "data-testid": TEST_IDS.FILTER_ITEM, ref: listItemRef, onClick: handleItemClicked, selected: selected, style: style },
         React.createElement(Checkbox, { checked: selected, checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null) }),
-        React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(HighlightedLabel, { label: label, ranges: labelRanges }), secondary: categoryKey !== SELECT_CATEGORY_KEY.SAVED_FILTERS && (React.createElement(Typography, { color: "ink.light", variant: TEXT_BODY_SMALL_400 }, count)) })));
+        React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(HighlightedLabel, { label: label, ranges: labelRanges, testId: TEST_IDS.FILTER_TERM }), secondary: categoryKey !== SELECT_CATEGORY_KEY.SAVED_FILTERS && (React.createElement(Typography, { color: "ink.light", "data-testid": TEST_IDS.FILTER_COUNT, variant: TEXT_BODY_SMALL_400 }, count)) })));
 }

package/lib/components/Index/components/EntitiesView/components/ChartView/chartView.d.ts

@@ -0,0 +1,2 @@
+import { ChartViewProps } from "./types";
+export declare const ChartView: ({ categoryFilters, loading, testId, }: ChartViewProps) => JSX.Element | null;

package/lib/components/Index/components/EntitiesView/components/ChartView/chartView.js

@@ -0,0 +1,17 @@
+import { Typography } from "@mui/material";
+import React, { Fragment } from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
+import { Loading, LOADING_PANEL_STYLE } from "../../../../../Loading/loading";
+import { StyledGrid, StyledGridPaperSection } from "./chartView.styles";
+import { Chart } from "./components/Chart/chart";
+import { useChartView } from "./hooks/UseChartView/useChartView";
+export const ChartView = ({ categoryFilters, loading, testId, }) => {
+    const { chartViewRef, selectCategoryViews, width } = useChartView(categoryFilters);
+    if (selectCategoryViews.length === 0)
+        return null;
+    return (React.createElement(Fragment, null,
+        React.createElement(Loading, { appear: false, autoPosition: false, loading: loading, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
+        React.createElement(StyledGrid, { "data-testid": testId, ref: chartViewRef }, selectCategoryViews.map(({ key, label, values }) => (React.createElement(StyledGridPaperSection, { key: key },
+            React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL }, label),
+            React.createElement(Chart, { selectCategoryValueViews: values, width: width })))))));
+};

package/lib/components/Index/components/EntitiesView/components/ChartView/chartView.styles.d.ts

@@ -0,0 +1,13 @@
+export declare const StyledGrid: import("@emotion/styled").StyledComponent<import("@mui/material").GridBaseProps & {
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
+} & import("@mui/system").SystemProps<import("@mui/material").Theme> & 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;
+}, ("fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "p" | "color" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign") | "sx" | keyof import("@mui/material").GridBaseProps> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledGridPaperSection: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Index/components/EntitiesView/components/ChartView/chartView.styles.js

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+import { Grid } from "@mui/material";
+import { GridPaperSection } from "../../../../../common/Section/section.styles";
+export const StyledGrid = styled(Grid) `
+  display: grid;
+  gap: inherit;
+`;
+export const StyledGridPaperSection = styled(GridPaperSection) `
+  &:last-of-type {
+    border-radius: inherit;
+  }
+`;

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const BAR_GAP = 40;
+export declare const BAR_HEIGHT = 24;
+export declare const DATA_FIELD: {
+    readonly COUNT: "count";
+    readonly LABEL: "label";
+    readonly SELECTED: "selected";
+};
+export declare const TEXT_PADDING = 8;
+export declare const TICKS = 6;

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/constants.js

@@ -0,0 +1,9 @@
+export const BAR_GAP = 40;
+export const BAR_HEIGHT = 24;
+export const DATA_FIELD = {
+    COUNT: "count",
+    LABEL: "label",
+    SELECTED: "selected",
+};
+export const TEXT_PADDING = 8;
+export const TICKS = 6;

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/plot.d.ts

@@ -0,0 +1,3 @@
+import { PlotOptions } from "@observablehq/plot";
+import { SelectCategoryValueView } from "../../../../../../../../../common/entities";
+export declare function getPlotOptions(selectCategoryValueViews: SelectCategoryValueView[], width: number): PlotOptions;

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/plot.js

@@ -0,0 +1,86 @@
+import * as Plot from "@observablehq/plot";
+import { PALETTE } from "../../../../../../../../../styles/common/mui/palette";
+import { formatCountSize } from "../../../../../../../../../utils/formatCountSize";
+import { DATA_FIELD, TEXT_PADDING } from "./constants";
+import { getCategoryValueText, getCategoryValueTextFill, getColorRangeValue, getCountTextFill, getPlotHeight, getTicks, getXDomain, getYPaddingInner, getYPaddingOuter, isAnyValueSelected, renderText, } from "./utils";
+export function getPlotOptions(selectCategoryValueViews, width) {
+    const isCategorySelected = isAnyValueSelected(selectCategoryValueViews);
+    return {
+        color: {
+            domain: [false, true], // false = unselected, true = selected.
+            legend: false,
+            range: [getColorRangeValue(isCategorySelected), PALETTE.PRIMARY_MAIN],
+        },
+        height: getPlotHeight(selectCategoryValueViews.length),
+        margin: 0,
+        marginBottom: 32,
+        marks: [
+            Plot.axisX({
+                className: "x-axis",
+                tickFormat: formatCountSize,
+                tickPadding: 8,
+                tickSize: 0,
+                ticks: getTicks(selectCategoryValueViews),
+            }),
+            Plot.gridX({
+                stroke: PALETTE.SMOKE_MAIN,
+                strokeOpacity: 1,
+                ticks: getTicks(selectCategoryValueViews),
+            }),
+            Plot.barX(selectCategoryValueViews, {
+                className: "x-bar",
+                fill: DATA_FIELD.SELECTED,
+                rx1: 0,
+                rx2: 4,
+                sort: { y: null },
+                x: DATA_FIELD.COUNT,
+                y: DATA_FIELD.LABEL,
+            }),
+            Plot.text(selectCategoryValueViews, {
+                className: "text-category-label",
+                dx: 16,
+                dy: -28,
+                fill: (d) => getCategoryValueTextFill(d, isCategorySelected),
+                lineWidth: width / 13, // "em" unit; font-size is 13px.
+                text: getCategoryValueText,
+                textAnchor: "start",
+                textOverflow: "ellipsis",
+                x: 0,
+                y: DATA_FIELD.LABEL,
+            }),
+            Plot.text(selectCategoryValueViews, {
+                className: "text-count",
+                dx: -TEXT_PADDING,
+                dy: -2,
+                fill: (d) => getCountTextFill(d, isCategorySelected),
+                fontWeight: 500,
+                lineHeight: 0.8125,
+                render: renderText,
+                text: DATA_FIELD.COUNT,
+                textAnchor: "end",
+                x: DATA_FIELD.COUNT,
+                y: DATA_FIELD.LABEL,
+            }),
+        ],
+        style: {
+            dominantBaseline: "middle",
+            font: "inherit",
+            overflow: "visible",
+        },
+        width,
+        x: {
+            domain: getXDomain(selectCategoryValueViews),
+            grid: false,
+            label: null,
+            line: false,
+        },
+        y: {
+            label: null,
+            line: false,
+            paddingInner: getYPaddingInner(),
+            paddingOuter: getYPaddingOuter(),
+            tickFormat: () => "",
+            tickSize: 0,
+        },
+    };
+}