@databiosphere/findable-ui 46.1.3 → 47.0.2

package/lib/components/Filter/components/Filter/filter.stories.d.ts

@@ -0,0 +1,25 @@
+import { StoryObj } from "@storybook/react";
+import React from "react";
+declare const meta: {
+    argTypes: {
+        tags: {
+            control: {
+                disable: true;
+            };
+        };
+    };
+    component: ({ categorySection, categoryView, closeAncestor, isFilterDrawer, onFilter, tags, trackFilterOpened, }: import("./filter").FilterProps) => JSX.Element;
+    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        categorySection?: string | undefined;
+        categoryView: import("../../../../common/entities").SelectCategoryView;
+        closeAncestor?: (() => void) | undefined;
+        isFilterDrawer: boolean;
+        onFilter: import("../../../../hooks/useCategoryFilter").OnFilterFn;
+        tags?: React.ReactNode;
+        trackFilterOpened?: import("../../../../config/entities").TrackFilterOpenedFunction | undefined;
+    }>) => JSX.Element)[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const FilterStory: Story;

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { Filter } from "./filter";
+const meta = {
+    argTypes: {
+        tags: { control: { disable: true } },
+    },
+    component: Filter,
+    decorators: [
+        (Story) => (React.createElement("div", { style: { padding: "8px 12px 8px 16px", width: 264 } },
+            React.createElement(Story, null))),
+    ],
+    title: "Components/Filter/Filter",
+};
+export default meta;
+const onFilter = () => {
+    // onFilter function
+};
+export const FilterStory = {
+    args: {
+        categoryView: {
+            isDisabled: false,
+            key: "genusSpecies",
+            label: "Genus Species",
+            values: [
+                {
+                    count: 12,
+                    key: "homoSapiens",
+                    label: "Homo sapiens",
+                    selected: false,
+                },
+                {
+                    count: 6,
+                    key: "musMusculus",
+                    label: "Mus musculus",
+                    selected: false,
+                },
+            ],
+        },
+        isFilterDrawer: false,
+        onFilter,
+    },
+};

package/lib/components/Filter/components/FilterTag/filterTag.stories.d.ts

@@ -0,0 +1,16 @@
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        label: {
+            control: "text";
+        };
+        superseded: {
+            control: "boolean";
+        };
+    };
+    component: ({ label, onRemove, superseded, }: import("./filterTag").FilterTagProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const FilterTagStory: Story;

package/lib/components/Filter/components/FilterTag/filterTag.stories.js

@@ -0,0 +1,17 @@
+import { FilterTag } from "./filterTag";
+const meta = {
+    argTypes: {
+        label: { control: "text" },
+        superseded: { control: "boolean" },
+    },
+    component: FilterTag,
+    title: "Components/Filter/FilterTag",
+};
+export default meta;
+export const FilterTagStory = {
+    args: {
+        label: "Male",
+        onRemove: () => { },
+        superseded: false,
+    },
+};

package/lib/components/Filter/components/Filters/filters.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Filters } from "./filters";
+declare const _default: Meta<typeof Filters>;
+export default _default;
+type Story = StoryObj<typeof Filters>;
+export declare const FiltersStory: Story;

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

@@ -0,0 +1,91 @@
+import React from "react";
+import { FilterMenuStory } from "../FilterMenu/filterMenu.stories";
+import { Filters } from "./filters";
+export default {
+    argTypes: {
+        categories: { control: { disable: true } },
+        onFilter: { control: { disable: true } },
+    },
+    component: Filters,
+    decorators: [
+        (Story) => (React.createElement("div", { style: { width: 264 } },
+            React.createElement(Story, null))),
+    ],
+    title: "Components/Filter/Filters",
+};
+const onFilter = () => {
+    // onFilter function
+};
+const defaultValues = [
+    {
+        count: 1,
+        key: "item1",
+        label: "Item 1",
+        selected: false,
+    },
+    {
+        count: 10,
+        key: "item2",
+        label: "Item 2",
+        selected: false,
+    },
+];
+export const FiltersStory = {
+    args: {
+        categoryFilters: [
+            {
+                categoryViews: [
+                    {
+                        isDisabled: false,
+                        key: "genusSpecies",
+                        label: "Genus Species",
+                        values: [
+                            {
+                                count: 12,
+                                key: "homoSapiens",
+                                label: "Homo sapiens",
+                                selected: false,
+                            },
+                            {
+                                count: 6,
+                                key: "musMusculus",
+                                label: "Mus musculus",
+                                selected: false,
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                categoryViews: [
+                    {
+                        isDisabled: false,
+                        key: "donorDisease",
+                        label: "Donor Disease",
+                        values: FilterMenuStory.args?.values || defaultValues,
+                    },
+                    {
+                        isDisabled: true,
+                        key: "anatomicalEntity",
+                        label: "Anatomical Entity",
+                        values: [
+                            {
+                                count: 12,
+                                key: "oralCavity",
+                                label: "oral cavity",
+                                selected: true,
+                            },
+                            {
+                                count: 6,
+                                key: "pancreas",
+                                label: "pancreas",
+                                selected: false,
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+        onFilter: onFilter,
+    },
+};

package/lib/components/Filter/components/SearchAllFilters/components/AutocompletePopper/autocompletePopper.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const AutocompletePopper: import("@emotion/styled").StyledComponent<import("@mui/material").PopperProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Filter/components/SearchAllFilters/components/AutocompletePopper/autocompletePopper.styles.js

@@ -0,0 +1,15 @@
+import styled from "@emotion/styled";
+import { Popper as MPopper } from "@mui/material";
+import { mediaDesktopSmallDown } from "../../../../../../styles/common/mixins/breakpoints";
+import { smokeLight } from "../../../../../../styles/common/mixins/colors";
+export const AutocompletePopper = styled(MPopper) `
+  ${mediaDesktopSmallDown} {
+    .MuiPaper-root {
+      background-color: ${smokeLight};
+
+      .MuiList-root {
+        margin: 0;
+      }
+    }
+  }
+`;

package/lib/components/Filter/components/SearchAllFilters/searchAllFilters.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { SearchAllFilters } from "./searchAllFilters";
+declare const _default: Meta<typeof SearchAllFilters>;
+export default _default;
+type Story = StoryObj<typeof SearchAllFilters>;
+export declare const SearchAllFiltersStory: Story;

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

@@ -0,0 +1,82 @@
+import React from "react";
+import { FilterMenuStory } from "../FilterMenu/filterMenu.stories";
+import { SearchAllFilters } from "./searchAllFilters";
+export default {
+    argTypes: {
+        onFilter: { control: { disable: true } },
+    },
+    component: SearchAllFilters,
+    decorators: [
+        (Story) => (React.createElement("div", { style: { width: 264 } },
+            React.createElement(Story, null))),
+    ],
+    title: "Components/Filter/SearchAllFilters",
+};
+const onFilter = () => {
+    // onFilter function
+};
+const defaultValues = [
+    {
+        count: 1,
+        key: "item1",
+        label: "Item 1",
+        selected: false,
+    },
+    {
+        count: 10,
+        key: "item2",
+        label: "Item 2",
+        selected: false,
+    },
+];
+export const SearchAllFiltersStory = {
+    args: {
+        categoryViews: [
+            {
+                isDisabled: false,
+                key: "genusSpecies",
+                label: "Genus Species",
+                values: [
+                    {
+                        count: 12,
+                        key: "homoSapiens",
+                        label: "Homo sapiens",
+                        selected: false,
+                    },
+                    {
+                        count: 6,
+                        key: "musMusculus",
+                        label: "Mus musculus",
+                        selected: false,
+                    },
+                ],
+            },
+            {
+                isDisabled: false,
+                key: "donorDisease",
+                label: "Donor Disease",
+                values: FilterMenuStory.args?.values || defaultValues,
+            },
+            {
+                isDisabled: true,
+                key: "anatomicalEntity",
+                label: "Anatomical Entity",
+                values: [
+                    {
+                        count: 12,
+                        key: "oralCavity",
+                        label: "oral cavity",
+                        selected: true,
+                    },
+                    {
+                        count: 6,
+                        key: "pancreas",
+                        label: "pancreas",
+                        selected: false,
+                    },
+                ],
+            },
+        ],
+        onFilter: onFilter,
+    },
+};

package/lib/components/Filter/components/SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton.d.ts

@@ -0,0 +1 @@
+export declare const SearchCloseButton: () => JSX.Element;

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

@@ -0,0 +1,14 @@
+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";
+import { DESKTOP_SM } from "../../../../../../theme/common/breakpoints";
+import { ListboxContext } from "../../../SearchAllFilters/searchAllFilters";
+export const SearchCloseButton = () => {
+    const desktopSmDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
+    const { onClearSearch, onCloseSearch, open, searchTerm } = useContext(ListboxContext);
+    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(CloseRounded, { fontSize: "small" })))));
+};

package/lib/components/Filter/components/SearchAllFiltersSearch/searchAllFiltersSearch.d.ts

@@ -0,0 +1,2 @@
+import { TextFieldProps } from "@mui/material";
+export declare const SearchAllFiltersSearch: ({ inputProps, InputProps, ...props }: TextFieldProps) => JSX.Element;

package/lib/components/Filter/components/SearchAllFiltersSearch/searchAllFiltersSearch.js

@@ -0,0 +1,12 @@
+import React, { useContext } from "react";
+import { SearchIcon } from "../../../common/CustomIcon/components/SearchIcon/searchIcon";
+import { ListboxContext } from "../SearchAllFilters/searchAllFilters";
+import { InputField } from "./searchAllFiltersSearch.styles";
+export const SearchAllFiltersSearch = ({ inputProps, InputProps, ...props }) => {
+    const { searchTerm } = useContext(ListboxContext);
+    delete inputProps?.value; // Control input value from the search term.
+    return (React.createElement(InputField, { ...props, fullWidth: true, InputProps: {
+            ...(InputProps || {}),
+            startAdornment: React.createElement(SearchIcon, { fontSize: "small" }),
+        }, inputProps: { ...(inputProps || {}), spellCheck: false }, placeholder: "Search all filters...", size: "small", value: searchTerm, variant: "outlined" }));
+};

package/lib/components/Filter/components/SearchAllFiltersSearch/searchAllFiltersSearch.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const InputField: import("@emotion/styled").StyledComponent<{
+    variant?: import("@mui/material").TextFieldVariants | undefined;
+} & Omit<import("@mui/material").OutlinedTextFieldProps | import("@mui/material").FilledTextFieldProps | import("@mui/material").StandardTextFieldProps, "variant"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Filter/components/SearchAllFiltersSearch/searchAllFiltersSearch.styles.js

@@ -0,0 +1,34 @@
+import styled from "@emotion/styled";
+import { TextField } from "@mui/material";
+import { inkLight, inkMain } from "../../../../styles/common/mixins/colors";
+export const InputField = styled(TextField) `
+  && {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .MuiInputBase-root {
+      & ::placeholder {
+        color: ${inkLight};
+        opacity: 0.8;
+      }
+
+      &.Mui-focused {
+        & ::placeholder {
+          opacity: 0;
+        }
+      }
+    }
+
+    .MuiOutlinedInput-root {
+      &.MuiInputBase-sizeSmall {
+        padding: 0 0 0 12px;
+
+        .MuiAutocomplete-input {
+          color: ${inkMain};
+          padding: 10px 14px 10px 0;
+        }
+      }
+    }
+  }
+`;

package/lib/components/Index/components/Cell/cell.d.ts

@@ -0,0 +1,7 @@
+export interface CellProps {
+    value?: number | string | string[];
+}
+/**
+ * @deprecated - use BasicCell from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/BasicCell/basicCell"
+ */
+export declare const Cell: ({ value }: CellProps) => JSX.Element;

package/lib/components/Index/components/Cell/cell.js

@@ -0,0 +1,10 @@
+import React from "react";
+/**
+ * @deprecated - use BasicCell from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/BasicCell/basicCell"
+ */
+export const Cell = ({ value = "Unspecified" }) => {
+    if (typeof value === "string" || typeof value === "number") {
+        return React.createElement("div", null, value);
+    }
+    return (React.createElement(React.Fragment, null, value.map((v) => (React.createElement("div", { key: v }, v)))));
+};

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

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

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

@@ -0,0 +1,20 @@
+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, entityName, 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 },
+                entityName,
+                " by ",
+                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;
+}, ("p" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "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,10 @@
+export declare const BAR_GAP = 8;
+export declare const BAR_HEIGHT = 24;
+export declare const DATA_FIELD: {
+    readonly COUNT: "count";
+    readonly LABEL: "label";
+    readonly SELECTED: "selected";
+};
+export declare const MARGIN_LEFT = 136;
+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,10 @@
+export const BAR_GAP = 8;
+export const BAR_HEIGHT = 24;
+export const DATA_FIELD = {
+    COUNT: "count",
+    LABEL: "label",
+    SELECTED: "selected",
+};
+export const MARGIN_LEFT = 136;
+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,91 @@
+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) {
+    const isCategorySelected = isAnyValueSelected(selectCategoryValueViews);
+    const totalCount = getCategoryTotalCount(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,
+        marginLeft: MARGIN_LEFT,
+        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: { order: "descending", y: "x" }, // Sort by count (x-axis), descending.
+                x: DATA_FIELD.COUNT,
+                y: DATA_FIELD.LABEL,
+            }),
+            Plot.text(selectCategoryValueViews, {
+                className: "text-category-label",
+                dx: -TEXT_PADDING,
+                dy: -2,
+                fill: (d) => getCategoryValueTextFill(d, isCategorySelected),
+                lineHeight: 0.8125,
+                lineWidth: (MARGIN_LEFT - TEXT_PADDING) / 13, // "em" unit; font-size is 13px.
+                text: getCategoryValueText,
+                textAnchor: "end",
+                textOverflow: "ellipsis",
+                title: getCategoryValueText,
+                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: (d) => getCountText(d, totalCount),
+                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,
+            type: "band", // Treats number-like strings as categorical labels to prevent numeric scale warnings.
+        },
+    };
+}