@databiosphere/findable-ui 47.0.2 → 48.1.0

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

@@ -1,230 +0,0 @@
-import { PALETTE } from "../../../../../../../../../styles/common/constants/palette";
-import { BAR_GAP, BAR_HEIGHT, MARGIN_LEFT, TEXT_PADDING, TICKS, } from "./constants";
-/**
- * Calculates the total count of all category values from the provided array of category value views.
- * @param selectCategoryValueViews - An array of objects representing category values, where each object contains a count property.
- * @returns The total sum of the count property from all category value objects in the array.
- */
-export function getCategoryTotalCount(selectCategoryValueViews) {
-    return selectCategoryValueViews.reduce((acc, { count }) => acc + count, 0);
-}
-/**
- * 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";
-}
-/**
- * Calculates the percentage representation of a count value relative to a total.
- * @param d - Data point containing the count value to calculate the percentage for.
- * @param total - The total value used as the denominator to compute the percentage.
- * @returns The calculated percentage value, rounded to one decimal place.
- */
-export function getCountPercentage(d, total) {
-    if (total === 0)
-        return "0";
-    const percentage = (d.count / total) * 100;
-    const roundedPercentage = Math.round(percentage * 10) / 10;
-    if (roundedPercentage < 0.1)
-        return "< 0.1";
-    // Round to one decimal place.
-    return roundedPercentage.toFixed(1);
-}
-/**
- * Returns the text for the count point.
- * Includes the count and its percentage of the total.
- * @param d - Data point.
- * @param total - Total count.
- * @returns Text string.
- */
-export function getCountText(d, total) {
-    return `${d.count.toLocaleString()} (${getCountPercentage(d, total)}%)`;
-}
-/**
- * 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.
- */
-export 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 < MARGIN_LEFT) {
-                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

@@ -1,2 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

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

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

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

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

@@ -1,4 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,18 +0,0 @@
-import { Box } from "@mui/material";
-import React from "react";
-import { PALETTE } from "../../../../../../../../../styles/common/constants/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 }))),
-    ],
-};
-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

@@ -1,6 +0,0 @@
-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

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

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

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

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

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

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

@@ -1,7 +0,0 @@
-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

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

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

@@ -1,3 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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,
-                        },
-                    ],
-                },
-            ],
-        },
-    ],
-    entityName: "Projects",
-    loading: false,
-};

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

@@ -1,6 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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" },
-};
-export default meta;
-export const Default = {};

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

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

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

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

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

@@ -1,14 +0,0 @@
-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

@@ -1,23 +0,0 @@
-import { isSelectCategoryView } from "../../../../../../common/categories/views/select/typeGuards";
-/**
- * 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(isSelectCategoryView)
-        .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

@@ -1,3 +0,0 @@
-import { RowData } from "@tanstack/react-table";
-import { EntityListProps } from "./types";
-export declare const EntityList: <T extends RowData>({ entityListType, loading, table, }: EntityListProps<T>) => JSX.Element | null;

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

@@ -1,14 +0,0 @@
-import React from "react";
-import { useConfig } from "../../../../../../hooks/useConfig";
-import { useExploreState } from "../../../../../../hooks/useExploreState";
-import { TableCreator } from "../../../../../TableCreator/tableCreator";
-export const EntityList = ({ entityListType, loading, table, }) => {
-    const { entityConfig } = useConfig();
-    const { exploreState } = useExploreState();
-    const { listView } = entityConfig;
-    // 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, { listView: listView, loading: loading, table: table });
-};

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

@@ -1,6 +0,0 @@
-import { RowData, Table } from "@tanstack/react-table";
-export interface EntityListProps<T extends RowData> {
-    entityListType: string;
-    loading: boolean;
-    table: Table<T>;
-}

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

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

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

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

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

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

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

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