@databiosphere/findable-ui 23.0.0 → 25.0.0

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

@@ -0,0 +1,196 @@
+import { PALETTE } from "../../../../../../../../../styles/common/mui/palette";
+import { BAR_GAP, BAR_HEIGHT, TEXT_PADDING, TICKS } from "./constants";
+/**
+ * Returns the text for the category value point.
+ * @param d - Data point.
+ * @returns Formatted text string.
+ */
+export function getCategoryValueText(d) {
+    if (d.selected)
+        return `${d.label} (selected)`;
+    return d.label;
+}
+/**
+ * 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 function getCategoryValueTextFill(d, isCategorySelected) {
+    if (d.selected)
+        return PALETTE.INK_MAIN;
+    if (isCategorySelected)
+        return PALETTE.INK_LIGHT;
+    return PALETTE.INK_MAIN;
+}
+/**
+ * Returns the color range value for "false" (unselected).
+ * @param isCategorySelected - Flag indicating if any value is selected.
+ * @returns Color range value.
+ */
+export function getColorRangeValue(isCategorySelected) {
+    return isCategorySelected ? PALETTE.SMOKE_LIGHT : "#C5E3FC";
+}
+/**
+ * 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 function getCountTextFill(d, isCategorySelected) {
+    if (d.selected)
+        return PALETTE.COMMON_WHITE;
+    if (isCategorySelected)
+        return PALETTE.SMOKE_DARK;
+    return PALETTE.INK_MAIN;
+}
+/**
+ * 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 function getPlotHeight(numberOfBars) {
+    return (numberOfBars + 2) * BAR_HEIGHT + (numberOfBars - 1) * BAR_GAP + 32;
+}
+/**
+ * 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 function getStop(n) {
+    if (n <= 10)
+        return 10;
+    // Calculate the magnitude e.g. 10, 100, 1000
+    const magnitude = Math.pow(10, Math.floor(Math.log10(n)));
+    for (const multiplier of [1, 2.5, 5, 7.5, 10]) {
+        if (n <= magnitude * multiplier) {
+            return magnitude * multiplier;
+        }
+    }
+    return magnitude * 10;
+}
+/**
+ * Returns the ticks for the x-axis.
+ * @param data - Data.
+ * @returns Ticks.
+ */
+export function getTicks(data) {
+    const domain = getXDomain(data);
+    return getXRange(domain[0], domain[1]);
+}
+/**
+ * Returns the `x` domain.
+ * @param data - Data.
+ * @returns Domain.
+ */
+export function getXDomain(data) {
+    const max = Math.max(...data.map((d) => d.count));
+    return [0, getStop(max)];
+}
+/**
+ * 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 function getXRange(start, stop) {
+    const ticks = [];
+    const steps = TICKS;
+    const step = getStop(stop) / (steps - 1);
+    for (let i = 0; i < steps; i++) {
+        ticks.push(start + i * step);
+    }
+    return ticks;
+}
+/**
+ * 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 function getYPaddingInner() {
+    return BAR_GAP / (BAR_HEIGHT + BAR_GAP);
+}
+/**
+ * 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 function getYPaddingOuter() {
+    return BAR_HEIGHT / (BAR_HEIGHT + BAR_GAP);
+}
+/**
+ * Checks if any value in the data array is selected.
+ * @param data - Data.
+ * @returns True if any value is selected, false otherwise.
+ */
+export function isAnyValueSelected(data) {
+    return data.some(({ selected }) => selected);
+}
+/**
+ * Parses a transform `translate` string and returns the x and y coordinates.
+ * @param translate - The transform `translate` string.
+ * @returns A tuple of the x and y coordinates.
+ */
+function parseTranslate(translate) {
+    const match = translate?.match(/translate\(\s*([-\d.]+)[,\s]+([-\d.]+)\s*\)/);
+    let tx = 0;
+    let ty = 0;
+    if (match) {
+        tx = parseFloat(match[1]);
+        ty = parseFloat(match[2]);
+    }
+    return [tx, ty];
+}
+/**
+ * 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 function renderText(index, scales, values, dimensions, context, next) {
+    const g = next?.(index, scales, values, dimensions, context);
+    if (!g)
+        return null;
+    requestAnimationFrame(() => {
+        const textEls = g.querySelectorAll("text");
+        for (const textEl of textEls) {
+            const ctm = textEl.getCTM();
+            const bBox = textEl.getBBox();
+            if (!ctm || !bBox)
+                continue;
+            // If the text doesn't fit inside the bar, reposition it outside.
+            if (ctm.e - bBox.width - TEXT_PADDING < 0) {
+                const [tx, ty] = parseTranslate(textEl.getAttribute("transform"));
+                // Translate by the width of the bar plus padding on each side.
+                textEl.setAttribute("transform", `translate(${tx + bBox.width + TEXT_PADDING * 2}, ${ty})`);
+                // If the text fill is white, change it to ink.
+                const fill = textEl.getAttribute("fill");
+                if (fill === PALETTE.COMMON_WHITE) {
+                    textEl.setAttribute("fill", PALETTE.INK_MAIN);
+                }
+            }
+        }
+    });
+    return g;
+}

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/chart.d.ts

@@ -0,0 +1,2 @@
+import { ChartProps } from "./types";
+export declare const Chart: ({ selectCategoryValueViews, testId, width, }: ChartProps) => JSX.Element;

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/chart.js

@@ -0,0 +1,7 @@
+import React, { useMemo } from "react";
+import { getPlotOptions } from "./barX/plot";
+import { StyledBarX } from "./chart.styles";
+export const Chart = ({ selectCategoryValueViews, testId, width, }) => {
+    const options = useMemo(() => getPlotOptions(selectCategoryValueViews, width), [selectCategoryValueViews, width]);
+    return React.createElement(StyledBarX, { options: options, testId: testId });
+};

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

@@ -0,0 +1,3 @@
+export declare const StyledBarX: import("@emotion/styled").StyledComponent<import("../../../../../../../Plot/components/BarX/types").BarXProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/chart.styles.js

@@ -0,0 +1,29 @@
+import styled from "@emotion/styled";
+import { mediaTabletDown } from "../../../../../../../../styles/common/mixins/breakpoints";
+import { textBodySmall400 } from "../../../../../../../../styles/common/mixins/fonts";
+import { BarX } from "../../../../../../../Plot/components/BarX/barX";
+export const StyledBarX = styled(BarX) `
+  ${textBodySmall400};
+
+  svg {
+    g.x-axis {
+      text {
+        &:nth-of-type(1) {
+          text-anchor: start;
+        }
+
+        &:nth-last-of-type(1) {
+          text-anchor: end;
+        }
+
+        ${mediaTabletDown} {
+          display: none;
+          &:nth-of-type(1),
+          &:nth-last-of-type(1) {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1 @@
+export declare const CHART_TEST_ID = "chart";

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

@@ -0,0 +1 @@
+export const CHART_TEST_ID = "chart";

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/stories/args.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps } from "react";
+import { Chart } from "../chart";
+export declare const CHART_ARGS: ComponentProps<typeof Chart>;
+export declare const SELECT_CHART_ARGS: ComponentProps<typeof Chart>;

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/stories/args.js

@@ -0,0 +1,70 @@
+export const CHART_ARGS = {
+    selectCategoryValueViews: [
+        {
+            count: 248890,
+            key: "female",
+            label: "female",
+            selected: false,
+        },
+        {
+            count: 204935,
+            key: "male",
+            label: "male",
+            selected: false,
+        },
+        {
+            count: 240,
+            key: "mixed",
+            label: "mixed",
+            selected: false,
+        },
+        {
+            count: 78715,
+            key: "unknown",
+            label: "unknown",
+            selected: false,
+        },
+        {
+            count: 1561,
+            key: null,
+            label: "Unspecified",
+            selected: false,
+        },
+    ],
+    width: 800,
+};
+export const SELECT_CHART_ARGS = {
+    selectCategoryValueViews: [
+        {
+            count: 248890,
+            key: "female",
+            label: "female",
+            selected: false,
+        },
+        {
+            count: 204935,
+            key: "male",
+            label: "male",
+            selected: true,
+        },
+        {
+            count: 240,
+            key: "mixed",
+            label: "mixed",
+            selected: false,
+        },
+        {
+            count: 78715,
+            key: "unknown",
+            label: "unknown",
+            selected: false,
+        },
+        {
+            count: 1561,
+            key: null,
+            label: "Unspecified",
+            selected: true,
+        },
+    ],
+    width: 800,
+};

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/stories/chart.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Chart } from "../chart";
+declare const meta: Meta<typeof Chart>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Selected: Story;

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/stories/chart.stories.js

@@ -0,0 +1,19 @@
+import { Box } from "@mui/material";
+import React from "react";
+import { PALETTE } from "../../../../../../../../../styles/common/mui/palette";
+import { Chart } from "../chart";
+import { CHART_ARGS, SELECT_CHART_ARGS } from "./args";
+const meta = {
+    args: CHART_ARGS,
+    component: Chart,
+    decorators: [
+        (Story, context) => (React.createElement(Box, { sx: { backgroundColor: PALETTE.COMMON_WHITE, padding: 5 } },
+            React.createElement(Story, { ...context }))),
+    ],
+    title: "Components/Entities/EntitiesView/ChartView/Chart",
+};
+export default meta;
+export const Default = {};
+export const Selected = {
+    args: SELECT_CHART_ARGS,
+};

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/types.d.ts

@@ -0,0 +1,6 @@
+import { PlotOptions } from "@observablehq/plot";
+import { SelectCategoryValueView } from "../../../../../../../../common/entities";
+import { TestIdProps } from "../../../../../../../types";
+export interface ChartProps extends Required<Pick<PlotOptions, "width">>, TestIdProps {
+    selectCategoryValueViews: SelectCategoryValueView[];
+}

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/types.js

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

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

@@ -0,0 +1 @@
+export declare const CHART_VIEW_TEST_ID = "chart-view";

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

@@ -0,0 +1 @@
+export const CHART_VIEW_TEST_ID = "chart-view";

package/lib/components/Index/components/EntitiesView/components/ChartView/hooks/UseChartView/types.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from "react";
+import { SelectCategoryView } from "../../../../../../../../common/entities";
+export interface UseChartView {
+    chartViewRef: RefObject<HTMLDivElement> | null;
+    selectCategoryViews: SelectCategoryView[];
+    width: number;
+}

package/lib/components/Index/components/EntitiesView/components/ChartView/hooks/UseChartView/types.js

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

package/lib/components/Index/components/EntitiesView/components/ChartView/hooks/UseChartView/useChartView.d.ts

@@ -0,0 +1,3 @@
+import { CategoryFilter } from "../../../../../../../Filter/components/Filters/filters";
+import { UseChartView } from "./types";
+export declare const useChartView: (categoryFilters: CategoryFilter[]) => UseChartView;

package/lib/components/Index/components/EntitiesView/components/ChartView/hooks/UseChartView/useChartView.js

@@ -0,0 +1,11 @@
+import { useMemo, useRef } from "react";
+import { getBorderBoxSize, useResizeObserver, } from "../../../../../../../../hooks/useResizeObserver";
+import { getSelectCategoryViews, getSVGWidth } from "../../utils";
+export const useChartView = (categoryFilters) => {
+    const chartViewRef = useRef(null);
+    const selectCategoryViews = useMemo(() => getSelectCategoryViews(categoryFilters), [categoryFilters]);
+    const shouldObserve = useMemo(() => selectCategoryViews.length > 0, [selectCategoryViews]);
+    const chartViewRect = useResizeObserver(chartViewRef, getBorderBoxSize, shouldObserve);
+    const width = getSVGWidth(chartViewRect?.width);
+    return { chartViewRef, selectCategoryViews, width };
+};

package/lib/components/Index/components/EntitiesView/components/ChartView/stories/args.d.ts

@@ -0,0 +1,3 @@
+import { ComponentProps } from "react";
+import { ChartView } from "../chartView";
+export declare const CHART_VIEW_ARGS: ComponentProps<typeof ChartView>;

package/lib/components/Index/components/EntitiesView/components/ChartView/stories/args.js

@@ -0,0 +1,96 @@
+export const CHART_VIEW_ARGS = {
+    categoryFilters: [
+        {
+            categoryViews: [
+                {
+                    enableChartView: true,
+                    key: "biological-sex",
+                    label: "Biological Sex",
+                    values: [
+                        {
+                            count: 248890,
+                            key: "female",
+                            label: "female",
+                            selected: false,
+                        },
+                        {
+                            count: 204935,
+                            key: "male",
+                            label: "male",
+                            selected: false,
+                        },
+                        {
+                            count: 240,
+                            key: "mixed",
+                            label: "mixed",
+                            selected: false,
+                        },
+                        {
+                            count: 78715,
+                            key: "unknown",
+                            label: "unknown",
+                            selected: false,
+                        },
+                        {
+                            count: 1561,
+                            key: null,
+                            label: "Unspecified",
+                            selected: false,
+                        },
+                    ],
+                },
+                {
+                    enableChartView: true,
+                    key: "genusSpecies",
+                    label: "Genus Species",
+                    values: [
+                        {
+                            count: 824,
+                            key: "canis lupus familiaris",
+                            label: "canis lupus familiaris",
+                            selected: false,
+                        },
+                        {
+                            count: 243550,
+                            key: "Homo sapiens",
+                            label: "Homo sapiens",
+                            selected: false,
+                        },
+                        {
+                            count: 277513,
+                            key: "Mus musculus",
+                            label: "Mus musculus",
+                            selected: true,
+                        },
+                        {
+                            count: 1292,
+                            key: null,
+                            label: "Unspecified",
+                            selected: false,
+                        },
+                    ],
+                },
+                {
+                    enableChartView: false,
+                    key: "pairedEnd",
+                    label: "Paired End",
+                    values: [
+                        {
+                            count: 148558,
+                            key: "false",
+                            label: "false",
+                            selected: false,
+                        },
+                        {
+                            count: 366376,
+                            key: "true",
+                            label: "true",
+                            selected: false,
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+    loading: false,
+};

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ChartView } from "../chartView";
+declare const meta: Meta<typeof ChartView>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { GridPaper } from "../../../../../../common/Paper/paper.styles";
+import { ChartView } from "../chartView";
+import { CHART_VIEW_ARGS } from "./args";
+const meta = {
+    args: CHART_VIEW_ARGS,
+    component: ChartView,
+    decorators: [
+        (Story, context) => (React.createElement(GridPaper, null,
+            React.createElement(Story, { ...context }))),
+    ],
+    parameters: { layout: "fullscreen" },
+    title: "Components/Entities/EntitiesView/ChartView",
+};
+export default meta;
+export const Default = {};

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

@@ -0,0 +1,6 @@
+import { CategoryFilter } from "../../../../../Filter/components/Filters/filters";
+import { TestIdProps } from "../../../../../types";
+export interface ChartViewProps extends TestIdProps {
+    categoryFilters: CategoryFilter[];
+    loading: boolean;
+}

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

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

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

@@ -0,0 +1,14 @@
+import { SelectCategoryView } from "../../../../../../common/entities";
+import { CategoryFilter } from "../../../../../Filter/components/Filters/filters";
+/**
+ * Returns the set of select category views that have chart view enabled.
+ * @param categoryFilters - Category filters.
+ * @returns Set of category views with chart view enabled.
+ */
+export declare function getSelectCategoryViews(categoryFilters: CategoryFilter[]): SelectCategoryView[];
+/**
+ * Returns the available SVG `width` from the container width.
+ * @param width - View width.
+ * @returns width.
+ */
+export declare function getSVGWidth(width?: number): number;

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

@@ -0,0 +1,21 @@
+/**
+ * Returns the set of select category views that have chart view enabled.
+ * @param categoryFilters - Category filters.
+ * @returns Set of category views with chart view enabled.
+ */
+export function getSelectCategoryViews(categoryFilters) {
+    return categoryFilters
+        .flatMap(({ categoryViews }) => categoryViews)
+        .filter(({ enableChartView = true }) => enableChartView)
+        .filter(({ values }) => values.length > 0);
+}
+/**
+ * Returns the available SVG `width` from the container width.
+ * @param width - View width.
+ * @returns width.
+ */
+export function getSVGWidth(width) {
+    if (!width)
+        return 0;
+    return width - 40; // 20px padding on each side.
+}

package/lib/components/Index/components/EntitiesView/components/EntityList/entityList.d.ts

@@ -0,0 +1,2 @@
+import { EntityListProps } from "./types";
+export declare const EntityList: ({ entityListType, }: EntityListProps) => JSX.Element | null;

package/lib/components/Index/components/EntitiesView/components/EntityList/entityList.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { useConfig } from "../../../../../../hooks/useConfig";
+import { useExploreState } from "../../../../../../hooks/useExploreState";
+import { TableCreator } from "../../../../../TableCreator/tableCreator";
+export const EntityList = ({ entityListType, }) => {
+    const { entityConfig } = useConfig();
+    const { exploreState } = useExploreState();
+    const { listItems, loading } = exploreState;
+    const { getId: getRowId, list, listView } = entityConfig;
+    const { columns: columnsConfig } = list;
+    // required currently for client-side fetching as the pre-rendered page
+    // loads with the previous tabs data on the first render after switching tabs. (or similar)
+    if (entityListType !== exploreState.tabValue)
+        return null;
+    return (React.createElement(TableCreator, { columns: columnsConfig, getRowId: getRowId, items: listItems ?? [], listView: listView, loading: loading }));
+};

package/lib/components/Index/components/EntitiesView/components/EntityList/types.d.ts

@@ -0,0 +1,3 @@
+export interface EntityListProps {
+    entityListType: string;
+}

package/lib/components/Index/components/EntitiesView/components/EntityList/types.js

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

package/lib/components/Index/components/EntitiesView/constants.d.ts

@@ -0,0 +1 @@
+export declare const ENTITIES_VIEW_TEST_ID = "entities-view";

package/lib/components/Index/components/EntitiesView/constants.js

@@ -0,0 +1 @@
+export const ENTITIES_VIEW_TEST_ID = "entities-view";

package/lib/components/Index/components/EntitiesView/entitiesView.d.ts

@@ -0,0 +1,2 @@
+import { EntitiesViewProps } from "./types";
+export declare const EntitiesView: ({ children, onChange, testId, viewMode, viewStatus, }: EntitiesViewProps) => JSX.Element;

package/lib/components/Index/components/EntitiesView/entitiesView.js

@@ -0,0 +1,14 @@
+import { ToggleButton, ToggleButtonGroup, Toolbar } from "@mui/material";
+import React from "react";
+import { GridPaper } from "../../../common/Paper/paper.styles";
+import { StyledFluidPaper } from "./entitiesView.styles";
+import { VIEW_MODE } from "./hooks/UseEntitiesView/types";
+export const EntitiesView = ({ children, onChange, testId, viewMode, viewStatus, }) => {
+    return (React.createElement(StyledFluidPaper, { testId: testId },
+        React.createElement(GridPaper, null,
+            viewStatus.disabled ? null : (React.createElement(Toolbar, null,
+                React.createElement(ToggleButtonGroup, { exclusive: true, value: viewMode, onChange: onChange },
+                    React.createElement(ToggleButton, { value: VIEW_MODE.TABLE }, "Table View"),
+                    React.createElement(ToggleButton, { value: VIEW_MODE.CHART }, "Chart View")))),
+            children)));
+};

package/lib/components/Index/components/EntitiesView/entitiesView.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledFluidPaper: import("@emotion/styled").StyledComponent<import("../../../common/Paper/paper").PaperProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;