@databiosphere/findable-ui 23.0.0 → 25.0.0

package/src/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/utils.ts

@@ -0,0 +1,229 @@
+import {
+  ChannelValues,
+  Context,
+  Dimensions,
+  RenderFunction,
+  ScaleFunctions,
+} from "@observablehq/plot";
+import { SelectCategoryValueView } from "../../../../../../../../../common/entities";
+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: SelectCategoryValueView): string {
+  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: SelectCategoryValueView,
+  isCategorySelected: boolean
+): string {
+  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: boolean): string {
+  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: SelectCategoryValueView,
+  isCategorySelected: boolean
+): string {
+  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: number): number {
+  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: number): number {
+  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: SelectCategoryValueView[]): number[] {
+  const domain = getXDomain(data);
+  return getXRange(domain[0], domain[1]);
+}
+
+/**
+ * Returns the `x` domain.
+ * @param data - Data.
+ * @returns Domain.
+ */
+export function getXDomain(data: SelectCategoryValueView[]): [number, number] {
+  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: number, stop: number): number[] {
+  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(): number {
+  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(): number {
+  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: SelectCategoryValueView[]): boolean {
+  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: string | null): [number, number] {
+  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: number[],
+  scales: ScaleFunctions,
+  values: ChannelValues,
+  dimensions: Dimensions,
+  context: Context,
+  next?: RenderFunction
+): SVGElement | null {
+  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/src/components/Index/components/EntitiesView/components/ChartView/components/Chart/chart.styles.ts

@@ -0,0 +1,30 @@
+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/src/components/Index/components/EntitiesView/components/ChartView/components/Chart/chart.tsx

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

package/src/components/Index/components/EntitiesView/components/ChartView/components/Chart/constants.ts

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

package/src/components/Index/components/EntitiesView/components/ChartView/components/Chart/stories/args.ts

@@ -0,0 +1,74 @@
+import { ComponentProps } from "react";
+import { Chart } from "../chart";
+
+export const CHART_ARGS: ComponentProps<typeof Chart> = {
+  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: ComponentProps<typeof Chart> = {
+  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/src/components/Index/components/EntitiesView/components/ChartView/components/Chart/stories/chart.stories.tsx

@@ -0,0 +1,29 @@
+import { Box } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+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: Meta<typeof Chart> = {
+  args: CHART_ARGS,
+  component: Chart,
+  decorators: [
+    (Story, context): JSX.Element => (
+      <Box sx={{ backgroundColor: PALETTE.COMMON_WHITE, padding: 5 }}>
+        <Story {...context} />
+      </Box>
+    ),
+  ],
+  title: "Components/Entities/EntitiesView/ChartView/Chart",
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Selected: Story = {
+  args: SELECT_CHART_ARGS,
+};

package/src/components/Index/components/EntitiesView/components/ChartView/components/Chart/types.ts

@@ -0,0 +1,9 @@
+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/src/components/Index/components/EntitiesView/components/ChartView/constants.ts

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

package/src/components/Index/components/EntitiesView/components/ChartView/hooks/UseChartView/types.ts

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

package/src/components/Index/components/EntitiesView/components/ChartView/hooks/UseChartView/useChartView.ts

@@ -0,0 +1,29 @@
+import { useMemo, useRef } from "react";
+import {
+  getBorderBoxSize,
+  useResizeObserver,
+} from "../../../../../../../../hooks/useResizeObserver";
+import { CategoryFilter } from "../../../../../../../Filter/components/Filters/filters";
+import { getSelectCategoryViews, getSVGWidth } from "../../utils";
+import { UseChartView } from "./types";
+
+export const useChartView = (
+  categoryFilters: CategoryFilter[]
+): UseChartView => {
+  const chartViewRef = useRef<HTMLDivElement>(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/src/components/Index/components/EntitiesView/components/ChartView/stories/args.ts

@@ -0,0 +1,99 @@
+import { ComponentProps } from "react";
+import { ChartView } from "../chartView";
+
+export const CHART_VIEW_ARGS: ComponentProps<typeof ChartView> = {
+  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/src/components/Index/components/EntitiesView/components/ChartView/stories/chartView.stories.tsx

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

package/src/components/Index/components/EntitiesView/components/ChartView/types.ts

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

package/src/components/Index/components/EntitiesView/components/ChartView/utils.ts

@@ -0,0 +1,26 @@
+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 function getSelectCategoryViews(
+  categoryFilters: CategoryFilter[]
+): SelectCategoryView[] {
+  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?: number): number {
+  if (!width) return 0;
+  return width - 40; // 20px padding on each side.
+}

package/src/components/Index/components/EntitiesView/components/EntityList/entityList.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { useConfig } from "../../../../../../hooks/useConfig";
+import { useExploreState } from "../../../../../../hooks/useExploreState";
+import { TableCreator } from "../../../../../TableCreator/tableCreator";
+import { EntityListProps } from "./types";
+
+export const EntityList = ({
+  entityListType,
+}: EntityListProps): JSX.Element | null => {
+  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 (
+    <TableCreator
+      columns={columnsConfig}
+      getRowId={getRowId}
+      items={listItems ?? []}
+      listView={listView}
+      loading={loading}
+    />
+  );
+};

package/src/components/Index/components/EntitiesView/components/EntityList/types.ts

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

package/src/components/Index/components/EntitiesView/constants.ts

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

package/src/components/Index/components/EntitiesView/entitiesView.styles.ts

@@ -0,0 +1,21 @@
+import styled from "@emotion/styled";
+import { white } from "../../../../styles/common/mixins/colors";
+import { FluidPaper } from "../../../common/Paper/paper.styles";
+
+export const StyledFluidPaper = styled(FluidPaper)`
+  &.MuiPaper-root {
+    position: relative; /* required; positions table loading indicator */
+
+    .MuiToolbar-root {
+      background-color: ${white};
+      padding: 20px;
+
+      .MuiToggleButtonGroup-root {
+        .MuiToggleButton-root {
+          padding: 8px 16px;
+          text-transform: none;
+        }
+      }
+    }
+  }
+`;