@databiosphere/findable-ui 41.0.0 → 41.2.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "41.0.0"
+  ".": "41.2.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [41.2.0](https://github.com/DataBiosphere/findable-ui/compare/v41.1.0...v41.2.0) (2025-08-01)
+
+
+### Features
+
+* chart view - show more link for long tail charts ([#446](https://github.com/DataBiosphere/findable-ui/issues/446)) ([#606](https://github.com/DataBiosphere/findable-ui/issues/606)) ([fb035d8](https://github.com/DataBiosphere/findable-ui/commit/fb035d8bbb5ac47ef656ef7403ac271ffdb7e0af))
+
+## [41.1.0](https://github.com/DataBiosphere/findable-ui/compare/v41.0.0...v41.1.0) (2025-07-31)
+
+
+### Features
+
+* update data dictionary column filter button size to large ([#603](https://github.com/DataBiosphere/findable-ui/issues/603)) ([#604](https://github.com/DataBiosphere/findable-ui/issues/604)) ([a1d7c76](https://github.com/DataBiosphere/findable-ui/commit/a1d7c76bad1386c7c56bbb4c5f65f9905addc71e))
+
 ## [41.0.0](https://github.com/DataBiosphere/findable-ui/compare/v40.0.0...v41.0.0) (2025-07-30)
 
 

package/lib/components/DataDictionary/components/Filters/components/ColumnFilters/columnFilters.js

@@ -1,7 +1,9 @@
 import { ButtonGroup, useMediaQuery } from "@mui/material";
 import React from "react";
+import { BUTTON_PROPS } from "../../../../../../styles/common/mui/button";
 import { BUTTON_GROUP_PROPS } from "../../../../../common/ButtonGroup/constants";
 import { ColumnFiltersAdapter } from "../../../../../Filter/components/adapters/tanstack/ColumnFiltersAdapter/columnFiltersAdapter";
+import { Button } from "../../../../../Filter/components/surfaces/drawer/components/Button/button";
 import { Drawer } from "../../../../../Filter/components/surfaces/drawer/Drawer/drawer";
 import { ColumnFilter } from "../../../../../Table/components/TableFeatures/ColumnFilter/columnFilter";
 export const ColumnFilters = ({ table, }) => {
@@ -12,6 +14,14 @@ export const ColumnFilters = ({ table, }) => {
     if (!enableColumnFilters)
         return null;
     if (isDrawer)
-        return (React.createElement(ColumnFiltersAdapter, { table: table, renderSurface: (props) => React.createElement(Drawer, { ...props }) }));
+        return (React.createElement(ColumnFiltersAdapter, { table: table, renderSurface: (props) => React.createElement(Drawer, { Button: renderButton, ...props }) }));
     return (React.createElement(ButtonGroup, { ...BUTTON_GROUP_PROPS.SECONDARY_OUTLINED }, columnFilters.map((column) => (React.createElement(ColumnFilter, { key: column.id, column: column })))));
 };
+/**
+ * Renders the drawer's open button with the specified size.
+ * @param props - Button props.
+ * @returns Button.
+ */
+function renderButton(props) {
+    return React.createElement(Button, { size: BUTTON_PROPS.SIZE.LARGE, ...props });
+}

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

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

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/barX/plot.js

@@ -2,10 +2,9 @@ import * as Plot from "@observablehq/plot";
 import { PALETTE } from "../../../../../../../../../../styles/common/constants/palette";
 import { formatCountSize } from "../../../../../../../../../../utils/formatCountSize";
 import { DATA_FIELD, MARGIN_LEFT, TEXT_PADDING } from "./constants";
-import { getCategoryTotalCount, getCategoryValueText, getCategoryValueTextFill, getColorRangeValue, getCountText, getCountTextFill, getPlotHeight, getTicks, getXDomain, getYPaddingInner, getYPaddingOuter, isAnyValueSelected, renderText, } from "./utils";
-export function getPlotOptions(selectCategoryValueViews, width) {
+import { getCategoryValueText, getCategoryValueTextFill, getColorRangeValue, getCountText, getCountTextFill, getPlotHeight, getTicks, getXDomain, getYPaddingInner, getYPaddingOuter, isAnyValueSelected, renderText, } from "./utils";
+export function getPlotOptions(selectCategoryValueViews, totalCount, width) {
     const isCategorySelected = isAnyValueSelected(selectCategoryValueViews);
-    const totalCount = getCategoryTotalCount(selectCategoryValueViews);
     return {
         color: {
             domain: [false, true], // false = unselected, true = selected.
@@ -34,7 +33,6 @@ export function getPlotOptions(selectCategoryValueViews, width) {
                 fill: DATA_FIELD.SELECTED,
                 rx1: 0,
                 rx2: 4,
-                sort: { order: "descending", y: "x" }, // Sort by count (x-axis), descending.
                 x: DATA_FIELD.COUNT,
                 y: DATA_FIELD.LABEL,
             }),
@@ -79,6 +77,7 @@ export function getPlotOptions(selectCategoryValueViews, width) {
             line: false,
         },
         y: {
+            domain: selectCategoryValueViews.map((d) => d.label), // Preserve the order of the pre-sorted data.
             label: null,
             line: false,
             paddingInner: getYPaddingInner(),

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/chart.js

@@ -1,7 +1,24 @@
-import React, { useMemo } from "react";
-import { getPlotOptions } from "./barX/plot";
-import { StyledBarX } from "./chart.styles";
+import React, { Fragment } from "react";
+import { BUTTON_PROPS } from "../../../../../../../../common/Button/constants";
+import { StyledBarX, StyledButton } from "./chart.styles";
+import { useBarCount } from "./hooks/UseBarCount/hook";
+import { isChartExpandable } from "./hooks/UseBarCount/utils";
+import { usePlotOptions } from "./hooks/UsePlotOptions/hook";
+import { renderButtonText } from "./utils";
 export const Chart = ({ selectCategoryValueViews, testId, width, }) => {
-    const options = useMemo(() => getPlotOptions(selectCategoryValueViews, width), [selectCategoryValueViews, width]);
-    return React.createElement(StyledBarX, { options: options, testId: testId });
+    const { barCount, onToggleBarCount } = useBarCount(selectCategoryValueViews);
+    const { options } = usePlotOptions(selectCategoryValueViews, width, barCount);
+    return (React.createElement(Fragment, null,
+        React.createElement(StyledBarX, { options: options, testId: testId }),
+        isChartExpandable(selectCategoryValueViews) && (React.createElement(StyledButton, { ...BUTTON_PROPS.PRIMARY_TEXT, onClick: (e) => {
+                // Scroll, only if we are closing the chart (i.e. barCount is undefined).
+                const shouldScroll = barCount === undefined;
+                onToggleBarCount();
+                if (!shouldScroll)
+                    return;
+                // Scroll the chart into view.
+                e.currentTarget
+                    ?.closest("div")
+                    ?.scrollIntoView({ behavior: "smooth" });
+            } }, renderButtonText(barCount, selectCategoryValueViews)))));
 };

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/chart.styles.d.ts

@@ -1,3 +1,8 @@
 export declare const StyledBarX: import("@emotion/styled").StyledComponent<import("../../../../../../../../Plot/components/BarX/types").BarXProps & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
+export declare const StyledButton: 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" | "size" | "href" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "action" | "loading" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/chart.styles.js

@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import { Button } from "@mui/material";
 import { mediaTabletDown } from "../../../../../../../../../styles/common/mixins/breakpoints";
 import { textBodySmall400 } from "../../../../../../../../../styles/common/mixins/fonts";
 import { BarX } from "../../../../../../../../Plot/components/BarX/barX";
@@ -27,3 +28,7 @@ export const StyledBarX = styled(BarX) `
     }
   }
 `;
+export const StyledButton = styled(Button) `
+  align-self: flex-start;
+  text-transform: none;
+`;

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UseBarCount/constants.d.ts

@@ -0,0 +1 @@
+export declare const MAX_BAR_COUNT = 20;

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UseBarCount/constants.js

@@ -0,0 +1 @@
+export const MAX_BAR_COUNT = 20;

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UseBarCount/hook.d.ts

@@ -0,0 +1,3 @@
+import { SelectCategoryValueView } from "../../../../../../../../../../../common/entities";
+import { UseBarCount } from "./types";
+export declare const useBarCount: (selectCategoryValueViews: SelectCategoryValueView[]) => UseBarCount;

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UseBarCount/hook.js

@@ -0,0 +1,9 @@
+import { useCallback, useState } from "react";
+import { initBarCount, updateBarCount } from "./utils";
+export const useBarCount = (selectCategoryValueViews) => {
+    const [barCount, setBarCount] = useState(initBarCount(selectCategoryValueViews));
+    const onToggleBarCount = useCallback(() => {
+        setBarCount(updateBarCount);
+    }, []);
+    return { barCount, onToggleBarCount };
+};

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UseBarCount/types.d.ts

@@ -0,0 +1,4 @@
+export type UseBarCount = {
+    barCount: number | undefined;
+    onToggleBarCount: () => void;
+};

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UseBarCount/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UseBarCount/utils.d.ts

@@ -0,0 +1,20 @@
+import { SelectCategoryValueView } from "../../../../../../../../../../../common/entities";
+/**
+ * Returns the initial bar count for the chart.
+ * @param selectCategoryValueViews - Category value views.
+ * @returns Initial bar count.
+ */
+export declare function initBarCount(selectCategoryValueViews: SelectCategoryValueView[]): number | undefined;
+/**
+ * Returns true if the chart is expandable.
+ * The chart is expandable if the number of category values is greater than the maximum bar count.
+ * @param selectCategoryValueViews - Category value views.
+ * @returns True if the chart is expandable.
+ */
+export declare function isChartExpandable(selectCategoryValueViews: SelectCategoryValueView[]): boolean;
+/**
+ * Updates the bar count for the chart.
+ * @param barCount - Current bar count.
+ * @returns Updated bar count.
+ */
+export declare function updateBarCount(barCount: number | undefined): number | undefined;

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UseBarCount/utils.js

@@ -0,0 +1,28 @@
+import { MAX_BAR_COUNT } from "./constants";
+/**
+ * Returns the initial bar count for the chart.
+ * @param selectCategoryValueViews - Category value views.
+ * @returns Initial bar count.
+ */
+export function initBarCount(selectCategoryValueViews) {
+    return isChartExpandable(selectCategoryValueViews)
+        ? MAX_BAR_COUNT
+        : undefined;
+}
+/**
+ * Returns true if the chart is expandable.
+ * The chart is expandable if the number of category values is greater than the maximum bar count.
+ * @param selectCategoryValueViews - Category value views.
+ * @returns True if the chart is expandable.
+ */
+export function isChartExpandable(selectCategoryValueViews) {
+    return selectCategoryValueViews.length > MAX_BAR_COUNT;
+}
+/**
+ * Updates the bar count for the chart.
+ * @param barCount - Current bar count.
+ * @returns Updated bar count.
+ */
+export function updateBarCount(barCount) {
+    return barCount === undefined ? MAX_BAR_COUNT : undefined;
+}

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UsePlotOptions/hook.d.ts

@@ -0,0 +1,3 @@
+import { SelectCategoryValueView } from "../../../../../../../../../../../common/entities";
+import { UsePlotOptions } from "./types";
+export declare const usePlotOptions: (selectCategoryValueViews: SelectCategoryValueView[], width: number, barCount: number | undefined) => UsePlotOptions;

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UsePlotOptions/hook.js

@@ -0,0 +1,15 @@
+import { useMemo } from "react";
+import { getPlotOptions } from "../../barX/plot";
+import { getCategoryTotalCount } from "../../barX/utils";
+import { sortByCountThenLabel } from "../../utils";
+export const usePlotOptions = (selectCategoryValueViews, width, barCount) => {
+    // Organise the select category value views (sort and slice) for chart display.
+    const data = selectCategoryValueViews
+        // Sort the category values by count and label.
+        .sort(sortByCountThenLabel)
+        // Slice the category values to the number of bars to display.
+        .slice(0, barCount);
+    // Build the plot options.
+    const options = useMemo(() => getPlotOptions(data, getCategoryTotalCount(selectCategoryValueViews), width), [data, selectCategoryValueViews, width]);
+    return { options };
+};

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UsePlotOptions/types.d.ts

@@ -0,0 +1,4 @@
+import { PlotOptions } from "@observablehq/plot";
+export interface UsePlotOptions {
+    options: PlotOptions;
+}

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UsePlotOptions/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/utils.d.ts

@@ -0,0 +1,15 @@
+import { SelectCategoryValueView } from "../../../../../../../../../common/entities";
+/**
+ * Renders the button text for the chart.
+ * @param maxBarCount - Maximum number of bars to display.
+ * @param selectCategoryValueViews - Category value views.
+ * @returns Button text.
+ */
+export declare function renderButtonText(maxBarCount: number | undefined, selectCategoryValueViews: SelectCategoryValueView[]): string;
+/**
+ * Sorts category value views by count in descending order, then label in ascending order.
+ * @param a - First category value view.
+ * @param b - Second category value view.
+ * @returns Sorted category value views.
+ */
+export declare function sortByCountThenLabel(a: SelectCategoryValueView, b: SelectCategoryValueView): number;

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/utils.js

@@ -0,0 +1,25 @@
+import { sortCategoryValueViews } from "../../../../../../../../../hooks/useCategoryFilter";
+/**
+ * Renders the button text for the chart.
+ * @param maxBarCount - Maximum number of bars to display.
+ * @param selectCategoryValueViews - Category value views.
+ * @returns Button text.
+ */
+export function renderButtonText(maxBarCount, selectCategoryValueViews) {
+    if (!maxBarCount)
+        return "Show less";
+    // Calculate the number of additional bars to show.
+    const totalBars = selectCategoryValueViews.length;
+    const count = totalBars - maxBarCount;
+    return `Show ${count} additional results`;
+}
+/**
+ * Sorts category value views by count in descending order, then label in ascending order.
+ * @param a - First category value view.
+ * @param b - Second category value view.
+ * @returns Sorted category value views.
+ */
+export function sortByCountThenLabel(a, b) {
+    const compare = b.count - a.count;
+    return compare === 0 ? sortCategoryValueViews(a, b) : compare;
+}

package/lib/components/Table/components/TableFeatures/ColumnFilter/columnFilter.js

@@ -1,5 +1,6 @@
 import { Grid, Typography } from "@mui/material";
 import React, { Fragment, useCallback } from "react";
+import { BUTTON_PROPS } from "../../../../../styles/common/mui/button";
 import { SVG_ICON_PROPS } from "../../../../../styles/common/mui/svgIcon";
 import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
 import { DropDownIcon } from "../../../../common/Form/components/Select/components/DropDownIcon/dropDownIcon";
@@ -28,7 +29,7 @@ export const ColumnFilter = ({ Button = StyledButton, className, column, ...prop
         column.setFilterValue(updater(value));
     }, [column]);
     return (React.createElement(Fragment, null,
-        React.createElement(Button, { disabled: sortedValues.length === 0, endIcon: React.createElement(DropDownIcon, { color: SVG_ICON_PROPS.COLOR.INK_LIGHT }), onClick: onOpen, open: open },
+        React.createElement(Button, { disabled: sortedValues.length === 0, endIcon: React.createElement(DropDownIcon, { color: SVG_ICON_PROPS.COLOR.INK_LIGHT }), onClick: onOpen, open: open, size: BUTTON_PROPS.SIZE.LARGE },
             React.createElement(Grid, { ...GRID_PROPS },
                 getColumnHeader(column),
                 React.createElement(FilterCountChip, { count: filterValue.length }))),

package/lib/hooks/useCategoryFilter.d.ts

@@ -1,7 +1,7 @@
 import { CategoryConfig } from "../common/categories/config/types";
 import { Category } from "../common/categories/models/types";
 import { CategoryView, VIEW_KIND } from "../common/categories/views/types";
-import { CategoryKey, CategoryValueKey, ClearAll, Filters, SelectCategoryValue } from "../common/entities";
+import { CategoryKey, CategoryValueKey, ClearAll, Filters, SelectCategoryValue, SelectCategoryValueView } from "../common/entities";
 /**
  * State backing filter functionality and calculations. Converted to view model for display.
  */
@@ -34,3 +34,10 @@ export declare function buildNextFilterState(filterState: FilterState, categoryK
  * @returns original select category value.
  */
 export declare function getSelectCategoryValue(selectCategoryValue: SelectCategoryValue): SelectCategoryValue;
+/**
+ * Sort category value views by key, ascending.
+ * @param cvv0 - First category value view to compare.
+ * @param cvv1 - Second category value view to compare.
+ * @returns Number indicating sort precedence of cv0 vs cv1.
+ */
+export declare function sortCategoryValueViews(cvv0: SelectCategoryValueView, cvv1: SelectCategoryValueView): number;

package/lib/hooks/useCategoryFilter.js

@@ -162,7 +162,7 @@ function isCategoryAcceptListed(category, categoryConfigs) {
  * @param cvv1 - Second category value view to compare.
  * @returns Number indicating sort precedence of cv0 vs cv1.
  */
-function sortCategoryValueViews(cvv0, cvv1) {
+export function sortCategoryValueViews(cvv0, cvv1) {
     return !cvv0.label
         ? 1
         : !cvv1.label

package/lib/theme/common/components.js

@@ -241,7 +241,16 @@ export const MuiButton = (theme) => {
         variants: [
             {
                 props: { size: BUTTON_PROPS.SIZE.LARGE },
-                style: { padding: "10px 16px" },
+                style: {
+                    padding: "10px 16px",
+                    // eslint-disable-next-line sort-keys -- disabling key order for readability
+                    ".MuiButton-iconSizeLarge": {
+                        // eslint-disable-next-line sort-keys -- disabling key order for readability
+                        ".MuiSvgIcon-root": {
+                            fontSize: "20px",
+                        },
+                    },
+                },
             },
             {
                 props: { size: BUTTON_PROPS.SIZE.MEDIUM },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "41.0.0",
+  "version": "41.2.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/components/DataDictionary/components/Filters/components/ColumnFilters/columnFilters.tsx

@@ -1,9 +1,11 @@
 import { ButtonGroup, Theme, useMediaQuery } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
-import React from "react";
+import React, { ComponentProps } from "react";
 import { Attribute } from "../../../../../../common/entities";
+import { BUTTON_PROPS } from "../../../../../../styles/common/mui/button";
 import { BUTTON_GROUP_PROPS } from "../../../../../common/ButtonGroup/constants";
 import { ColumnFiltersAdapter } from "../../../../../Filter/components/adapters/tanstack/ColumnFiltersAdapter/columnFiltersAdapter";
+import { Button } from "../../../../../Filter/components/surfaces/drawer/components/Button/button";
 import { Drawer } from "../../../../../Filter/components/surfaces/drawer/Drawer/drawer";
 import { ColumnFilter } from "../../../../../Table/components/TableFeatures/ColumnFilter/columnFilter";
 import { ColumnFiltersProps } from "./types";
@@ -22,7 +24,7 @@ export const ColumnFilters = <T extends RowData = Attribute>({
     return (
       <ColumnFiltersAdapter
         table={table}
-        renderSurface={(props) => <Drawer {...props} />}
+        renderSurface={(props) => <Drawer Button={renderButton} {...props} />}
       />
     );
 
@@ -34,3 +36,12 @@ export const ColumnFilters = <T extends RowData = Attribute>({
     </ButtonGroup>
   );
 };
+
+/**
+ * Renders the drawer's open button with the specified size.
+ * @param props - Button props.
+ * @returns Button.
+ */
+function renderButton(props: ComponentProps<typeof Button>): JSX.Element {
+  return <Button size={BUTTON_PROPS.SIZE.LARGE} {...props} />;
+}

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/barX/plot.ts

@@ -5,7 +5,6 @@ import { PALETTE } from "../../../../../../../../../../styles/common/constants/p
 import { formatCountSize } from "../../../../../../../../../../utils/formatCountSize";
 import { DATA_FIELD, MARGIN_LEFT, TEXT_PADDING } from "./constants";
 import {
-  getCategoryTotalCount,
   getCategoryValueText,
   getCategoryValueTextFill,
   getColorRangeValue,
@@ -22,10 +21,10 @@ import {
 
 export function getPlotOptions(
   selectCategoryValueViews: SelectCategoryValueView[],
+  totalCount: number,
   width: number
 ): PlotOptions {
   const isCategorySelected = isAnyValueSelected(selectCategoryValueViews);
-  const totalCount = getCategoryTotalCount(selectCategoryValueViews);
   return {
     color: {
       domain: [false, true], // false = unselected, true = selected.
@@ -54,7 +53,6 @@ export function getPlotOptions(
         fill: DATA_FIELD.SELECTED,
         rx1: 0,
         rx2: 4,
-        sort: { order: "descending", y: "x" }, // Sort by count (x-axis), descending.
         x: DATA_FIELD.COUNT,
         y: DATA_FIELD.LABEL,
       }),
@@ -99,6 +97,7 @@ export function getPlotOptions(
       line: false,
     },
     y: {
+      domain: selectCategoryValueViews.map((d) => d.label), // Preserve the order of the pre-sorted data.
       label: null,
       line: false,
       paddingInner: getYPaddingInner(),

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/chart.styles.ts

@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import { Button } from "@mui/material";
 import { mediaTabletDown } from "../../../../../../../../../styles/common/mixins/breakpoints";
 import { textBodySmall400 } from "../../../../../../../../../styles/common/mixins/fonts";
 import { BarX } from "../../../../../../../../Plot/components/BarX/barX";
@@ -28,3 +29,8 @@ export const StyledBarX = styled(BarX)`
     }
   }
 `;
+
+export const StyledButton = styled(Button)`
+  align-self: flex-start;
+  text-transform: none;
+`;

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/chart.tsx

@@ -1,16 +1,39 @@
-import React, { useMemo } from "react";
-import { getPlotOptions } from "./barX/plot";
-import { StyledBarX } from "./chart.styles";
+import React, { Fragment } from "react";
+import { BUTTON_PROPS } from "../../../../../../../../common/Button/constants";
+import { StyledBarX, StyledButton } from "./chart.styles";
+import { useBarCount } from "./hooks/UseBarCount/hook";
+import { isChartExpandable } from "./hooks/UseBarCount/utils";
+import { usePlotOptions } from "./hooks/UsePlotOptions/hook";
 import { ChartProps } from "./types";
+import { renderButtonText } from "./utils";
 
 export const Chart = ({
   selectCategoryValueViews,
   testId,
   width,
 }: ChartProps): JSX.Element => {
-  const options = useMemo(
-    () => getPlotOptions(selectCategoryValueViews, width),
-    [selectCategoryValueViews, width]
+  const { barCount, onToggleBarCount } = useBarCount(selectCategoryValueViews);
+  const { options } = usePlotOptions(selectCategoryValueViews, width, barCount);
+  return (
+    <Fragment>
+      <StyledBarX options={options} testId={testId} />
+      {isChartExpandable(selectCategoryValueViews) && (
+        <StyledButton
+          {...BUTTON_PROPS.PRIMARY_TEXT}
+          onClick={(e) => {
+            // Scroll, only if we are closing the chart (i.e. barCount is undefined).
+            const shouldScroll = barCount === undefined;
+            onToggleBarCount();
+            if (!shouldScroll) return;
+            // Scroll the chart into view.
+            e.currentTarget
+              ?.closest("div")
+              ?.scrollIntoView({ behavior: "smooth" });
+          }}
+        >
+          {renderButtonText(barCount, selectCategoryValueViews)}
+        </StyledButton>
+      )}
+    </Fragment>
   );
-  return <StyledBarX options={options} testId={testId} />;
 };

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UseBarCount/constants.ts

@@ -0,0 +1 @@
+export const MAX_BAR_COUNT = 20;

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UseBarCount/hook.ts

@@ -0,0 +1,18 @@
+import { useCallback, useState } from "react";
+import { SelectCategoryValueView } from "../../../../../../../../../../../common/entities";
+import { UseBarCount } from "./types";
+import { initBarCount, updateBarCount } from "./utils";
+
+export const useBarCount = (
+  selectCategoryValueViews: SelectCategoryValueView[]
+): UseBarCount => {
+  const [barCount, setBarCount] = useState<number | undefined>(
+    initBarCount(selectCategoryValueViews)
+  );
+
+  const onToggleBarCount = useCallback(() => {
+    setBarCount(updateBarCount);
+  }, []);
+
+  return { barCount, onToggleBarCount };
+};

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UseBarCount/types.ts

@@ -0,0 +1,4 @@
+export type UseBarCount = {
+  barCount: number | undefined;
+  onToggleBarCount: () => void;
+};

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UseBarCount/utils.ts

@@ -0,0 +1,38 @@
+import { SelectCategoryValueView } from "../../../../../../../../../../../common/entities";
+import { MAX_BAR_COUNT } from "./constants";
+
+/**
+ * Returns the initial bar count for the chart.
+ * @param selectCategoryValueViews - Category value views.
+ * @returns Initial bar count.
+ */
+export function initBarCount(
+  selectCategoryValueViews: SelectCategoryValueView[]
+): number | undefined {
+  return isChartExpandable(selectCategoryValueViews)
+    ? MAX_BAR_COUNT
+    : undefined;
+}
+
+/**
+ * Returns true if the chart is expandable.
+ * The chart is expandable if the number of category values is greater than the maximum bar count.
+ * @param selectCategoryValueViews - Category value views.
+ * @returns True if the chart is expandable.
+ */
+export function isChartExpandable(
+  selectCategoryValueViews: SelectCategoryValueView[]
+): boolean {
+  return selectCategoryValueViews.length > MAX_BAR_COUNT;
+}
+
+/**
+ * Updates the bar count for the chart.
+ * @param barCount - Current bar count.
+ * @returns Updated bar count.
+ */
+export function updateBarCount(
+  barCount: number | undefined
+): number | undefined {
+  return barCount === undefined ? MAX_BAR_COUNT : undefined;
+}

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UsePlotOptions/hook.ts

@@ -0,0 +1,32 @@
+import { useMemo } from "react";
+import { SelectCategoryValueView } from "../../../../../../../../../../../common/entities";
+import { getPlotOptions } from "../../barX/plot";
+import { getCategoryTotalCount } from "../../barX/utils";
+import { sortByCountThenLabel } from "../../utils";
+import { UsePlotOptions } from "./types";
+
+export const usePlotOptions = (
+  selectCategoryValueViews: SelectCategoryValueView[],
+  width: number,
+  barCount: number | undefined
+): UsePlotOptions => {
+  // Organise the select category value views (sort and slice) for chart display.
+  const data = selectCategoryValueViews
+    // Sort the category values by count and label.
+    .sort(sortByCountThenLabel)
+    // Slice the category values to the number of bars to display.
+    .slice(0, barCount);
+
+  // Build the plot options.
+  const options = useMemo(
+    () =>
+      getPlotOptions(
+        data,
+        getCategoryTotalCount(selectCategoryValueViews),
+        width
+      ),
+    [data, selectCategoryValueViews, width]
+  );
+
+  return { options };
+};

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UsePlotOptions/types.ts

@@ -0,0 +1,5 @@
+import { PlotOptions } from "@observablehq/plot";
+
+export interface UsePlotOptions {
+  options: PlotOptions;
+}

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/utils.ts

@@ -0,0 +1,35 @@
+import { SelectCategoryValueView } from "../../../../../../../../../common/entities";
+import { sortCategoryValueViews } from "../../../../../../../../../hooks/useCategoryFilter";
+
+/**
+ * Renders the button text for the chart.
+ * @param maxBarCount - Maximum number of bars to display.
+ * @param selectCategoryValueViews - Category value views.
+ * @returns Button text.
+ */
+export function renderButtonText(
+  maxBarCount: number | undefined,
+  selectCategoryValueViews: SelectCategoryValueView[]
+): string {
+  if (!maxBarCount) return "Show less";
+
+  // Calculate the number of additional bars to show.
+  const totalBars = selectCategoryValueViews.length;
+  const count = totalBars - maxBarCount;
+
+  return `Show ${count} additional results`;
+}
+
+/**
+ * Sorts category value views by count in descending order, then label in ascending order.
+ * @param a - First category value view.
+ * @param b - Second category value view.
+ * @returns Sorted category value views.
+ */
+export function sortByCountThenLabel(
+  a: SelectCategoryValueView,
+  b: SelectCategoryValueView
+): number {
+  const compare = b.count - a.count;
+  return compare === 0 ? sortCategoryValueViews(a, b) : compare;
+}

package/src/components/Table/components/TableFeatures/ColumnFilter/columnFilter.tsx

@@ -1,6 +1,7 @@
 import { Grid, Typography } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
 import React, { Fragment, useCallback } from "react";
+import { BUTTON_PROPS } from "../../../../../styles/common/mui/button";
 import { SVG_ICON_PROPS } from "../../../../../styles/common/mui/svgIcon";
 import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
 import { DropDownIcon } from "../../../../common/Form/components/Select/components/DropDownIcon/dropDownIcon";
@@ -51,6 +52,7 @@ export const ColumnFilter = <T extends RowData>({
         endIcon={<DropDownIcon color={SVG_ICON_PROPS.COLOR.INK_LIGHT} />}
         onClick={onOpen}
         open={open}
+        size={BUTTON_PROPS.SIZE.LARGE}
       >
         <Grid {...GRID_PROPS}>
           {getColumnHeader(column)}

package/src/hooks/useCategoryFilter.ts

@@ -278,7 +278,7 @@ function isCategoryAcceptListed(
  * @param cvv1 - Second category value view to compare.
  * @returns Number indicating sort precedence of cv0 vs cv1.
  */
-function sortCategoryValueViews(
+export function sortCategoryValueViews(
   cvv0: SelectCategoryValueView,
   cvv1: SelectCategoryValueView
 ): number {

package/src/theme/common/components.ts

@@ -258,7 +258,16 @@ export const MuiButton = (theme: Theme): Components["MuiButton"] => {
     variants: [
       {
         props: { size: BUTTON_PROPS.SIZE.LARGE },
-        style: { padding: "10px 16px" },
+        style: {
+          padding: "10px 16px",
+          // eslint-disable-next-line sort-keys -- disabling key order for readability
+          ".MuiButton-iconSizeLarge": {
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            ".MuiSvgIcon-root": {
+              fontSize: "20px",
+            },
+          },
+        },
       },
       {
         props: { size: BUTTON_PROPS.SIZE.MEDIUM },