@databiosphere/findable-ui 46.1.2 → 47.0.2

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

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

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

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

@@ -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,18 @@
+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

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