@databiosphere/findable-ui 50.7.0 → 50.7.1

package/src/components/Index/components/EntityView/components/views/ChartView/chartView.styles.ts

@@ -1,15 +0,0 @@
-import styled from "@emotion/styled";
-import { Grid } from "@mui/material";
-import { GridPaperSection } from "../../../../../../common/Section/section.styles";
-
-export const StyledGrid = styled(Grid)`
-  display: grid;
-  gap: inherit;
-  overflow-y: auto;
-`;
-
-export const StyledGridPaperSection = styled(GridPaperSection)`
-  &:last-of-type {
-    border-radius: inherit;
-  }
-`;

package/src/components/Index/components/EntityView/components/views/ChartView/chartView.tsx

@@ -1,53 +0,0 @@
-import { Typography } from "@mui/material";
-import { Fragment, JSX } from "react";
-import { getChartSortFn } from "../../../../../../../common/chart/sort/utils";
-import { TYPOGRAPHY_PROPS } from "../../../../../../../styles/common/mui/typography";
-import {
-  Loading,
-  LOADING_PANEL_STYLE,
-} from "../../../../../../Loading/loading";
-import { StyledToolbar } from "../../../../../../Table/components/TableToolbar/tableToolbar.styles";
-import { ViewToggle } from "../../controls/ViewToggle/viewToggle";
-import { StyledGrid, StyledGridPaperSection } from "./chartView.styles";
-import { Chart } from "./components/Chart/chart";
-import { useChartView } from "./hooks/UseChartView/useChartView";
-import { ChartViewProps } from "./types";
-
-export const ChartView = ({
-  categoryFilters,
-  entityName,
-  loading,
-  testId,
-}: ChartViewProps): JSX.Element | null => {
-  const { chartViewRef, selectCategoryViews, width } =
-    useChartView(categoryFilters);
-  if (selectCategoryViews.length === 0) return null;
-  return (
-    <Fragment>
-      <StyledToolbar>
-        <ViewToggle />
-      </StyledToolbar>
-      <Loading
-        appear={false}
-        autoPosition={false}
-        loading={loading}
-        panelStyle={LOADING_PANEL_STYLE.INHERIT}
-      />
-      <StyledGrid data-testid={testId} ref={chartViewRef}>
-        {selectCategoryViews.map(({ chart, key, label, values }) => (
-          <StyledGridPaperSection key={key}>
-            <Typography variant={TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL}>
-              {entityName} by {label}
-            </Typography>
-            <Chart
-              selectCategoryValueViews={[...values].sort(
-                getChartSortFn(chart?.sortBy),
-              )}
-              width={width}
-            />
-          </StyledGridPaperSection>
-        ))}
-      </StyledGrid>
-    </Fragment>
-  );
-};

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/barX/constants.ts

@@ -1,15 +0,0 @@
-export const BAR_GAP = 8;
-
-export const BAR_HEIGHT = 24;
-
-export const DATA_FIELD = {
-  COUNT: "count",
-  LABEL: "label",
-  SELECTED: "selected",
-} as const;
-
-export const MARGIN_LEFT = 136;
-
-export const TEXT_PADDING = 8;
-
-export const TICKS = 6;

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/barX/plot.ts

@@ -1,110 +0,0 @@
-import * as Plot from "@observablehq/plot";
-import { PlotOptions } from "@observablehq/plot";
-import { SelectCategoryValueView } from "../../../../../../../../../../common/entities";
-import { PALETTE } from "../../../../../../../../../../styles/common/constants/palette";
-import { formatCountSize } from "../../../../../../../../../../utils/formatCountSize";
-import { DATA_FIELD, MARGIN_LEFT, TEXT_PADDING } from "./constants";
-import {
-  getCategoryValueText,
-  getCategoryValueTextFill,
-  getColorRangeValue,
-  getCountText,
-  getCountTextFill,
-  getPlotHeight,
-  getTicks,
-  getXDomain,
-  getYPaddingInner,
-  getYPaddingOuter,
-  isAnyValueSelected,
-  renderText,
-} from "./utils";
-
-export function getPlotOptions(
-  selectCategoryValueViews: SelectCategoryValueView[],
-  totalCount: number,
-  width: number,
-): PlotOptions {
-  const isCategorySelected = isAnyValueSelected(selectCategoryValueViews);
-  return {
-    color: {
-      domain: [false, true], // false = unselected, true = selected.
-      legend: false,
-      range: [getColorRangeValue(isCategorySelected), PALETTE.PRIMARY_MAIN],
-    },
-    height: getPlotHeight(selectCategoryValueViews.length),
-    margin: 0,
-    marginBottom: 32,
-    marginLeft: MARGIN_LEFT,
-    marks: [
-      Plot.axisX({
-        className: "x-axis",
-        tickFormat: formatCountSize,
-        tickPadding: 8,
-        tickSize: 0,
-        ticks: getTicks(selectCategoryValueViews),
-      }),
-      Plot.gridX({
-        stroke: PALETTE.SMOKE_MAIN,
-        strokeOpacity: 1,
-        ticks: getTicks(selectCategoryValueViews),
-      }),
-      Plot.barX(selectCategoryValueViews, {
-        className: "x-bar",
-        fill: DATA_FIELD.SELECTED,
-        rx1: 0,
-        rx2: 4,
-        x: DATA_FIELD.COUNT,
-        y: DATA_FIELD.LABEL,
-      }),
-      Plot.text(selectCategoryValueViews, {
-        className: "text-category-label",
-        dx: -TEXT_PADDING,
-        dy: -2,
-        fill: (d) => getCategoryValueTextFill(d, isCategorySelected),
-        lineHeight: 0.8125,
-        lineWidth: (MARGIN_LEFT - TEXT_PADDING) / 13, // "em" unit; font-size is 13px.
-        text: getCategoryValueText,
-        textAnchor: "end",
-        textOverflow: "ellipsis",
-        title: getCategoryValueText,
-        x: 0,
-        y: DATA_FIELD.LABEL,
-      }),
-      Plot.text(selectCategoryValueViews, {
-        className: "text-count",
-        dx: -TEXT_PADDING,
-        dy: -2,
-        fill: (d) => getCountTextFill(d, isCategorySelected),
-        fontWeight: 500,
-        lineHeight: 0.8125,
-        render: renderText,
-        text: (d) => getCountText(d, totalCount),
-        textAnchor: "end",
-        x: DATA_FIELD.COUNT,
-        y: DATA_FIELD.LABEL,
-      }),
-    ],
-    style: {
-      dominantBaseline: "middle",
-      font: "inherit",
-      overflow: "visible",
-    },
-    width,
-    x: {
-      domain: getXDomain(selectCategoryValueViews),
-      grid: false,
-      label: null,
-      line: false,
-    },
-    y: {
-      domain: selectCategoryValueViews.map((d) => d.label), // Preserve the order of the pre-sorted data.
-      label: null,
-      line: false,
-      paddingInner: getYPaddingInner(),
-      paddingOuter: getYPaddingOuter(),
-      tickFormat: () => "",
-      tickSize: 0,
-      type: "band", // Treats number-like strings as categorical labels to prevent numeric scale warnings.
-    },
-  };
-}

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/barX/utils.ts

@@ -1,278 +0,0 @@
-import {
-  ChannelValues,
-  Context,
-  Dimensions,
-  RenderFunction,
-  ScaleFunctions,
-} from "@observablehq/plot";
-import { SelectCategoryValueView } from "../../../../../../../../../../common/entities";
-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: SelectCategoryValueView[],
-): number {
-  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: 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";
-}
-
-/**
- * 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: SelectCategoryValueView,
-  total: number,
-): string {
-  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: SelectCategoryValueView,
-  total: number,
-): string {
-  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: 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.
- */
-export 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 < 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/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/chart.styles.ts

@@ -1,36 +0,0 @@
-import styled from "@emotion/styled";
-import { Button } from "@mui/material";
-import { FONT } from "../../../../../../../../../styles/common/constants/font";
-import { bpDownSm } from "../../../../../../../../../styles/common/mixins/breakpoints";
-import { BarX } from "../../../../../../../../Plot/components/BarX/barX";
-
-export const StyledBarX = styled(BarX)`
-  font: ${FONT.BODY_SMALL_400};
-
-  svg {
-    g.x-axis {
-      text {
-        &:nth-of-type(1) {
-          text-anchor: start;
-        }
-
-        &:nth-last-of-type(1) {
-          text-anchor: end;
-        }
-
-        ${bpDownSm} {
-          display: none;
-          &:nth-of-type(1),
-          &:nth-last-of-type(1) {
-            display: block;
-          }
-        }
-      }
-    }
-  }
-`;
-
-export const StyledButton = styled(Button)`
-  align-self: flex-start;
-  text-transform: none;
-`;

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/chart.tsx

@@ -1,39 +0,0 @@
-import { Fragment, JSX } from "react";
-import { BUTTON_PROPS } from "../../../../../../../../common/Button/constants";
-import { StyledBarX, StyledButton } from "./chart.styles";
-import { useBarCount } from "./hooks/UseBarCount/hook";
-import { isChartExpandable } from "./hooks/UseBarCount/utils";
-import { usePlotOptions } from "./hooks/UsePlotOptions/hook";
-import { ChartProps } from "./types";
-import { renderButtonText } from "./utils";
-
-export const Chart = ({
-  selectCategoryValueViews,
-  testId,
-  width,
-}: ChartProps): JSX.Element => {
-  const { barCount, onToggleBarCount } = useBarCount(selectCategoryValueViews);
-  const { options } = usePlotOptions(selectCategoryValueViews, width, barCount);
-  return (
-    <Fragment>
-      <StyledBarX options={options} testId={testId} />
-      {isChartExpandable(selectCategoryValueViews) && (
-        <StyledButton
-          {...BUTTON_PROPS.PRIMARY_TEXT}
-          onClick={(e) => {
-            // Scroll, only if we are closing the chart (i.e. barCount is undefined).
-            const shouldScroll = barCount === undefined;
-            onToggleBarCount();
-            if (!shouldScroll) return;
-            // Scroll the chart into view.
-            e.currentTarget
-              ?.closest("div")
-              ?.scrollIntoView({ behavior: "smooth" });
-          }}
-        >
-          {renderButtonText(barCount, selectCategoryValueViews)}
-        </StyledButton>
-      )}
-    </Fragment>
-  );
-};

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/constants.ts

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

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UseBarCount/constants.ts

@@ -1 +0,0 @@
-export const MAX_BAR_COUNT = 20;

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UseBarCount/hook.ts

@@ -1,18 +0,0 @@
-import { useCallback, useState } from "react";
-import { SelectCategoryValueView } from "../../../../../../../../../../../common/entities";
-import { UseBarCount } from "./types";
-import { initBarCount, updateBarCount } from "./utils";
-
-export const useBarCount = (
-  selectCategoryValueViews: SelectCategoryValueView[],
-): UseBarCount => {
-  const [barCount, setBarCount] = useState<number | undefined>(
-    initBarCount(selectCategoryValueViews),
-  );
-
-  const onToggleBarCount = useCallback(() => {
-    setBarCount(updateBarCount);
-  }, []);
-
-  return { barCount, onToggleBarCount };
-};

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UseBarCount/types.ts

@@ -1,4 +0,0 @@
-export type UseBarCount = {
-  barCount: number | undefined;
-  onToggleBarCount: () => void;
-};

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UseBarCount/utils.ts

@@ -1,38 +0,0 @@
-import { SelectCategoryValueView } from "../../../../../../../../../../../common/entities";
-import { MAX_BAR_COUNT } from "./constants";
-
-/**
- * Returns the initial bar count for the chart.
- * @param selectCategoryValueViews - Category value views.
- * @returns Initial bar count.
- */
-export function initBarCount(
-  selectCategoryValueViews: SelectCategoryValueView[],
-): number | undefined {
-  return isChartExpandable(selectCategoryValueViews)
-    ? MAX_BAR_COUNT
-    : undefined;
-}
-
-/**
- * Returns true if the chart is expandable.
- * The chart is expandable if the number of category values is greater than the maximum bar count.
- * @param selectCategoryValueViews - Category value views.
- * @returns True if the chart is expandable.
- */
-export function isChartExpandable(
-  selectCategoryValueViews: SelectCategoryValueView[],
-): boolean {
-  return selectCategoryValueViews.length > MAX_BAR_COUNT;
-}
-
-/**
- * Updates the bar count for the chart.
- * @param barCount - Current bar count.
- * @returns Updated bar count.
- */
-export function updateBarCount(
-  barCount: number | undefined,
-): number | undefined {
-  return barCount === undefined ? MAX_BAR_COUNT : undefined;
-}

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UsePlotOptions/hook.ts

@@ -1,27 +0,0 @@
-import { useMemo } from "react";
-import { SelectCategoryValueView } from "../../../../../../../../../../../common/entities";
-import { getPlotOptions } from "../../barX/plot";
-import { getCategoryTotalCount } from "../../barX/utils";
-import { UsePlotOptions } from "./types";
-
-export const usePlotOptions = (
-  selectCategoryValueViews: SelectCategoryValueView[],
-  width: number,
-  barCount: number | undefined,
-): UsePlotOptions => {
-  // Slice the category values to the number of bars to display.
-  const data = selectCategoryValueViews.slice(0, barCount);
-
-  // Build the plot options.
-  const options = useMemo(
-    () =>
-      getPlotOptions(
-        data,
-        getCategoryTotalCount(selectCategoryValueViews),
-        width,
-      ),
-    [data, selectCategoryValueViews, width],
-  );
-
-  return { options };
-};

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UsePlotOptions/types.ts

@@ -1,5 +0,0 @@
-import { PlotOptions } from "@observablehq/plot";
-
-export interface UsePlotOptions {
-  options: PlotOptions;
-}