@databiosphere/findable-ui 24.0.0 → 25.0.0

package/.release-please-manifest.json

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

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # Changelog
 
+## [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/Detail/components/Table/components/TableHead/tableHead.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Table } from "@tanstack/react-table";
+import { ROW_DIRECTION } from "../../../../../Table/common/entities";
+export interface TableBodyProps<T> {
+    rowDirection: ROW_DIRECTION;
+    tableInstance: Table<T>;
+}
+export declare const TableHead: <T extends object>({ rowDirection, tableInstance, }: TableBodyProps<T>) => JSX.Element;

package/lib/components/Detail/components/Table/components/TableHead/tableHead.js

@@ -0,0 +1,36 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableHead = void 0;
+const material_1 = require("@mui/material");
+const react_table_1 = require("@tanstack/react-table");
+const react_1 = __importStar(require("react"));
+const entities_1 = require("../../../../../Table/common/entities");
+const TableHead = ({ rowDirection, tableInstance, }) => {
+    return (react_1.default.createElement(react_1.Fragment, null, rowDirection === entities_1.ROW_DIRECTION.DEFAULT &&
+        tableInstance.getHeaderGroups().map((headerGroup) => (react_1.default.createElement(material_1.TableHead, { key: headerGroup.id },
+            react_1.default.createElement(material_1.TableRow, null, headerGroup.headers.map((header) => (react_1.default.createElement(material_1.TableCell, { key: header.id }, (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()))))))))));
+};
+exports.TableHead = TableHead;

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/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/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/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,
+        },
+    };
+}

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

@@ -0,0 +1,105 @@
+import { ChannelValues, Context, Dimensions, RenderFunction, ScaleFunctions } from "@observablehq/plot";
+import { SelectCategoryValueView } from "../../../../../../../../../common/entities";
+/**
+ * Returns the text for the category value point.
+ * @param d - Data point.
+ * @returns Formatted text string.
+ */
+export declare function getCategoryValueText(d: SelectCategoryValueView): string;
+/**
+ * Returns the fill color for the category value point.
+ * @param d - Data point.
+ * @param isCategorySelected - Flag indicating if any value is selected.
+ * @returns Fill color string.
+ */
+export declare function getCategoryValueTextFill(d: SelectCategoryValueView, isCategorySelected: boolean): string;
+/**
+ * Returns the color range value for "false" (unselected).
+ * @param isCategorySelected - Flag indicating if any value is selected.
+ * @returns Color range value.
+ */
+export declare function getColorRangeValue(isCategorySelected: boolean): string;
+/**
+ * Returns the fill color for the count point.
+ * @param d - Data point.
+ * @param isCategorySelected - Flag indicating if any value is selected.
+ * @returns Fill color string.
+ */
+export declare function getCountTextFill(d: SelectCategoryValueView, isCategorySelected: boolean): string;
+/**
+ * Calculates the total SVG height required to render a horizontal bar chart (barX).
+ * The computed height includes:
+ * - Padding space equivalent to one bar above the first and below the last bar,
+ * - Vertical gaps between bars,
+ * - A fixed bottom margin.
+ * @param numberOfBars - Number of bars to display.
+ * @returns Height.
+ */
+export declare function getPlotHeight(numberOfBars: number): number;
+/**
+ * Rounds up a number to the next "nice" stop value for axis scaling.
+ * This function returns an upper bound based on the input value's
+ * order of magnitude. It calculates axis limits or tick maximums
+ * for consistent and readable chart scales.
+ * The function applies standard magnitude-based steps:
+ * - Rounds up to 2.5×, 5×, 7.5×, or 10× the base magnitude
+ * - Ensures minimum stop of 10
+ * @param n - Number.
+ * @returns A rounded "nice" stop value suitable for axis ticks.
+ */
+export declare function getStop(n: number): number;
+/**
+ * Returns the ticks for the x-axis.
+ * @param data - Data.
+ * @returns Ticks.
+ */
+export declare function getTicks(data: SelectCategoryValueView[]): number[];
+/**
+ * Returns the `x` domain.
+ * @param data - Data.
+ * @returns Domain.
+ */
+export declare function getXDomain(data: SelectCategoryValueView[]): [number, number];
+/**
+ * Generates an evenly spaced numeric range between a start and stop value.
+ * The range includes a fixed number of steps (6), where each value is spaced
+ * by a step size derived from the adjusted stop value via `getStop`.
+ * Used for grid lines along the x-axis.
+ * @param start - Start value.
+ * @param stop - Stop value.
+ * @returns Range.
+ */
+export declare function getXRange(start: number, stop: number): number[];
+/**
+ * Calculates the inner padding ratio for a band scale's y-axis.
+ * This determines the proportional spacing between adjacent bars in a bar chart.
+ * @returns The inner padding value as a fraction (between 0 and 1).
+ */
+export declare function getYPaddingInner(): number;
+/**
+ * Calculates the outer padding ratio for a band scale's y-axis.
+ * This represents the proportional space above the first bar and below the last bar
+ * in a vertical layout. It ensures that the outer margins are visually balanced and
+ * match the bar height, so the chart breathes evenly at the top and bottom.
+ * @returns The outer padding value as a fraction (between 0 and 1).
+ */
+export declare function getYPaddingOuter(): number;
+/**
+ * Checks if any value in the data array is selected.
+ * @param data - Data.
+ * @returns True if any value is selected, false otherwise.
+ */
+export declare function isAnyValueSelected(data: SelectCategoryValueView[]): boolean;
+/**
+ * Renders text elements for count values, positioning them either inside or outside bars
+ * based on available space. If text doesn't fit inside a bar, it's repositioned outside
+ * with adjusted styling.
+ * @param index - The mark's (filtered and transformed) index.
+ * @param scales - The plot's scale functions.
+ * @param values - The mark's (possibly scaled and transformed) channel values.
+ * @param dimensions - The plot's dimensions.
+ * @param context - The plot's context.
+ * @param next - The next render function in the chain.
+ * @returns SVG element or null
+ */
+export declare function renderText(index: number[], scales: ScaleFunctions, values: ChannelValues, dimensions: Dimensions, context: Context, next?: RenderFunction): SVGElement | null;