react-cheminfo 0.9.0 → 0.10.0

package/src/scatter/ui/ScatterMatrixDiagonal.tsx

@@ -0,0 +1,182 @@
+import type { CSSProperties, ReactElement } from 'react';
+
+import type { ChartBins } from '../../chart/core/chartBins.ts';
+import type { ChartExtent } from '../../chart/core/chartExtent.ts';
+import type { MatrixLike } from '../../chart/core/matrix.ts';
+import type { ChartFrameRender } from '../../chart/ui/ChartFrame.tsx';
+
+import type { ScatterGroupSpread } from './scatterGroupSpread.ts';
+import type { ScatterMatrixAxis } from './scatterMatrixProps.ts';
+
+/**
+ * What the grid works out once and every one of its cells reads.
+ *
+ * It lives here rather than beside the grid's own props only because that file
+ * has no room left for it, and this is the leaf of the three.
+ */
+export interface ScatterMatrixGrid {
+  /** The coordinates, read where they stand. */
+  scores: MatrixLike;
+  /** The axes, indexed by row and by column alike. */
+  axes: readonly ScatterMatrixAxis[];
+  /** How many axes are laid out, after any reduction for width. */
+  shown: number;
+  /** Side of every plot rectangle, in pixels — the same in every cell. */
+  side: number;
+  /** Room the left column and the bottom row keep for their ticks and titles. */
+  room: { left: number; bottom: number };
+  /** One range per axis, so a column reads across and a row reads down. */
+  extents: readonly ChartExtent[];
+  /** One counted distribution per axis, for the diagonal. */
+  spread: readonly ChartBins[];
+  /**
+   * Every group measured over every laid-out axis, for the outlines, or
+   * nothing when none are drawn: no groups were named, or the cells came out
+   * too small to hold a readable outline.
+   */
+  groupSpread: ScatterGroupSpread | undefined;
+  /** One colour per group, or nothing when no group was named. */
+  colors: readonly string[] | undefined;
+  /** Which group each row belongs to, or nothing when they are one crowd. */
+  groupOf: ArrayLike<number> | undefined;
+  /** One entry per row; a zero draws that row faint. */
+  mask: Uint8Array | undefined;
+  /** Radius of a dot, in pixels. */
+  pointRadius: number;
+  /** What a cell hands its pair of axes to when it is clicked. */
+  onSelectPair: ((xAxis: number, yAxis: number) => void) | undefined;
+  /** What a cell hands the row under the pointer to. */
+  onHoverChange: ((index: number) => void) | undefined;
+}
+
+/** What one diagonal cell of a `ScatterMatrix` draws. */
+export interface ScatterMatrixDiagonalProps {
+  /** Everything the grid worked out once, including the counted spread. */
+  grid: ScatterMatrixGrid;
+  /** Which axis the cell stands on, both across and up. */
+  axis: number;
+  /** The rectangle and the two scales the cell was given. */
+  frame: ChartFrameRender;
+}
+
+/**
+ * The axis' own distribution, split by group and stacked.
+ *
+ * This is the cell a pair grid normally spends on the line `y = x`. That line
+ * is the same in every grid ever drawn, so it says nothing about the data at
+ * all, and a reader who has not been told otherwise takes a rising diagonal
+ * for a correlation — the opposite of what orthogonal axes mean. A
+ * distribution answers the question the reader actually brought: does this
+ * component pull my groups apart on its own, or only in company? Two humps
+ * that barely touch say yes; one hump says no, whatever the scatters around it
+ * look like.
+ *
+ * The bars are counted over the same edges as the column's shared domain, so a
+ * peak here sits directly above the dots it is made of.
+ * @param props - See {@link ScatterMatrixDiagonalProps}.
+ * @returns The distribution.
+ */
+export function ScatterMatrixDiagonal(
+  props: ScatterMatrixDiagonalProps,
+): ReactElement {
+  const { grid, axis, frame } = props;
+  const named = grid.axes[axis];
+  const share = named?.share;
+
+  return (
+    <g>
+      {bars(props)}
+      <text
+        x={frame.plot.left + CORNER_INSET}
+        y={frame.plot.top + CORNER_BASELINE}
+        style={NAME_STYLE}
+      >
+        {named?.name ?? ''}
+      </text>
+      {share === undefined ||
+      !Number.isFinite(share) ||
+      frame.plot.width < BOTH_CAPTIONS ? null : (
+        <text
+          x={frame.plot.right - CORNER_INSET}
+          y={frame.plot.top + CORNER_BASELINE}
+          textAnchor="end"
+          style={SHARE_STYLE}
+        >
+          {`${(share * 100).toFixed(1)} %`}
+        </text>
+      )}
+    </g>
+  );
+}
+
+/** The ink the counts take when no group was named. */
+const NO_GROUP_INK = 'var(--text-muted)';
+
+/** How solid a band is: readable, and still honest where two overlap. */
+const BAND_OPACITY = 0.55;
+
+/** How far the corner captions sit inside the plot, and how far down. */
+const CORNER_INSET = 6;
+const CORNER_BASELINE = 13;
+
+/**
+ * The narrowest cell that holds the name and the share at once. Below it the
+ * share is dropped rather than run into the name, because which component the
+ * cell is comes first: a reader can find the share along the foot of the grid.
+ */
+const BOTH_CAPTIONS = 82;
+
+/** The axis' name, in the corner a reader looks at first. */
+const NAME_STYLE = {
+  fill: 'var(--text)',
+  fontSize: 10,
+  fontWeight: 600,
+  userSelect: 'none',
+} as const satisfies CSSProperties;
+
+/** Its share, kept quieter than the name it qualifies. */
+const SHARE_STYLE = {
+  fill: 'var(--text-muted)',
+  fontSize: 10,
+  fontVariantNumeric: 'tabular-nums',
+  userSelect: 'none',
+} as const satisfies CSSProperties;
+
+function bars(props: ScatterMatrixDiagonalProps): ReactElement[] {
+  const { grid, axis, frame } = props;
+  const { x, y } = frame;
+  const counted = grid.spread[axis];
+  const marks: ReactElement[] = [];
+  if (counted === undefined) return marks;
+
+  for (let bin = 0; bin < counted.bins; bin++) {
+    const from = counted.edges[bin];
+    const to = counted.edges[bin + 1];
+    if (from === undefined || to === undefined) continue;
+    const left = x.offset + from * x.factor;
+    const width = Math.max(1, x.offset + to * x.factor - left);
+
+    let base = 0;
+    for (let series = 0; series < counted.series; series++) {
+      const count = counted.counts[series * counted.bins + bin] ?? 0;
+      if (count === 0) continue;
+      const top = y.offset + (base + count) * y.factor;
+      marks.push(
+        <rect
+          key={`${series}-${bin}`}
+          x={left}
+          y={top}
+          width={width}
+          height={Math.max(0, y.offset + base * y.factor - top)}
+          style={bandStyle(grid.colors?.[series] ?? NO_GROUP_INK)}
+        />,
+      );
+      base += count;
+    }
+  }
+  return marks;
+}
+
+function bandStyle(color: string): CSSProperties {
+  return { fill: color, fillOpacity: BAND_OPACITY };
+}

package/src/scatter/ui/ScatterPlot.tsx

@@ -0,0 +1,234 @@
+import type { ReactElement } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+
+import { ChartFrame } from '../../chart/ui/ChartFrame.tsx';
+
+import { ScatterEllipseLayer } from './ScatterEllipseLayer.tsx';
+import { ScatterLabelLayer } from './ScatterLabelLayer.tsx';
+import { ScatterMarkLayer } from './ScatterMarkLayer.tsx';
+import { ScatterPointLayer } from './ScatterPointLayer.tsx';
+import {
+  SCATTER_GROUP_LABEL_SIZE,
+  SCATTER_LABEL_SIZE,
+} from './scatterLabelBoxes.ts';
+import { placeScatterLabels } from './scatterLabelPlacement.ts';
+import { scatterGroupLabels, scatterPointLabels } from './scatterLabels.ts';
+import {
+  LASSO_STYLE,
+  SCATTER_HOVER_SLACK,
+  scatterGroupInk,
+  scatterPixelMarks,
+  scatterPlotLabel,
+} from './scatterPlotModel.ts';
+import type { ScatterPlotProps } from './scatterPlotProps.ts';
+import { useScatterFrame } from './useScatterFrame.ts';
+import { useScatterInteraction } from './useScatterInteraction.ts';
+
+export type {
+  ScatterGroup,
+  ScatterMarker,
+  ScatterPlotProps,
+} from './scatterPlotProps.ts';
+
+/**
+ * A cloud of points with a lasso, group outlines and a hover card.
+ *
+ * It knows nothing about what produced the coordinates, so the same component
+ * draws a scores map, a k-means result and a UMAP embedding. The point layer
+ * carries no event handlers at all — one transparent rectangle takes every
+ * gesture and the hit tests run over a coordinate array — which is what keeps
+ * two thousand dots inside a frame and what would let a canvas replace the
+ * layer without touching anything else.
+ * @param props - See {@link ScatterPlotProps}.
+ * @returns The plot.
+ */
+export function ScatterPlot(props: ScatterPlotProps): ReactElement {
+  const {
+    x,
+    y,
+    width,
+    height,
+    xAxis,
+    yAxis,
+    groupOf,
+    groups,
+    mutedGroups,
+    ellipse = null,
+    ellipseMinimumPoints,
+    ellipseFillOpacity,
+    showGroupMeans,
+    markers,
+    pointRadius = 3.5,
+    outlinedFrom,
+    pointLabels,
+    showGroupLabels = false,
+    selected,
+    defaultSelected,
+    onSelectionChange,
+    selectMode,
+    onHoverChange,
+    onPinChange,
+    onLassoChange,
+    touchLasso,
+    viewport,
+    onViewportChange,
+    wheelZoom,
+    wheelZoomDelay,
+    overlay,
+    label,
+    testId,
+  } = props;
+
+  const frame = useScatterFrame({
+    x,
+    y,
+    width,
+    height,
+    xAxis,
+    yAxis,
+    viewport,
+    onViewportChange,
+    wheelZoom,
+    wheelZoomDelay,
+  });
+  const { points, rect, toX, toY, inside, ref: surface, reset } = frame;
+  const ink = useMemo(
+    () => scatterGroupInk(groups, mutedGroups),
+    [groups, mutedGroups],
+  );
+  const named = useMemo(
+    () =>
+      pointLabels === undefined
+        ? undefined
+        : placeScatterLabels(
+            scatterPointLabels(points, pointLabels, {
+              groupOf,
+              colors: ink.colors,
+            }),
+            {
+              fontSize: SCATTER_LABEL_SIZE,
+              radius: pointRadius,
+              bounds: rect,
+            },
+          ),
+    [points, pointLabels, groupOf, ink.colors, pointRadius, rect],
+  );
+  const crowds = useMemo(
+    () =>
+      showGroupLabels && groups !== undefined
+        ? placeScatterLabels(
+            scatterGroupLabels(
+              points,
+              groups.map((group) => group.label),
+              {
+                groupOf,
+                colors: ink.colors,
+              },
+            ),
+            {
+              fontSize: SCATTER_GROUP_LABEL_SIZE,
+              bold: true,
+              centered: true,
+              radius: pointRadius,
+              bounds: rect,
+            },
+          )
+        : undefined,
+    [points, showGroupLabels, groups, groupOf, ink.colors, pointRadius, rect],
+  );
+  const interaction = useScatterInteraction({
+    points,
+    originX: rect.x,
+    originY: rect.y,
+    selected,
+    defaultSelected,
+    onSelectionChange,
+    selectMode,
+    touchLasso,
+    included: inside,
+    hoverRadius: pointRadius + SCATTER_HOVER_SLACK,
+    onHoverChange,
+    onPinChange,
+  });
+
+  // Held in a ref so an inline arrow, which is how every caller writes it, does
+  // not put the callback in the effect's dependencies and report a drag that
+  // never changed on every render.
+  const report = useRef(onLassoChange);
+  useLayoutEffect(() => {
+    report.current = onLassoChange;
+  });
+  const drawing = interaction.lasso.drawing;
+  useEffect(() => {
+    report.current?.(drawing);
+  }, [drawing]);
+
+  return (
+    <ChartFrame
+      width={width}
+      height={height}
+      x={frame.xAxis}
+      y={frame.yAxis}
+      busy={drawing}
+      overlay={overlay}
+      testId={testId}
+      label={label ?? scatterPlotLabel(xAxis, yAxis, points.x.length)}
+    >
+      {() => (
+        <>
+          {ellipse === null || groupOf === undefined ? null : (
+            <ScatterEllipseLayer
+              x={x}
+              y={y}
+              groupOf={groupOf}
+              colors={ink.colors}
+              opacities={ink.opacities}
+              scaleX={toX}
+              scaleY={toY}
+              size={ellipse}
+              minimumPoints={ellipseMinimumPoints}
+              fillOpacity={ellipseFillOpacity}
+            />
+          )}
+          <ScatterPointLayer
+            points={points}
+            groupOf={groupOf}
+            colors={ink.colors}
+            opacities={ink.opacities}
+            radius={pointRadius}
+            outlinedFrom={outlinedFrom}
+          />
+          <ScatterMarkLayer
+            points={points}
+            selected={interaction.selection.mask}
+            hovered={interaction.hover.hovered}
+            focused={interaction.keyboard.cursor}
+            radius={pointRadius}
+            groupOf={groupOf}
+            colors={ink.colors}
+            showGroupMeans={showGroupMeans}
+            marks={scatterPixelMarks(markers, toX, toY)}
+          />
+          {named === undefined ? null : (
+            <ScatterLabelLayer labels={named} radius={pointRadius} />
+          )}
+          {crowds === undefined ? null : (
+            <ScatterLabelLayer labels={crowds} radius={pointRadius} strong />
+          )}
+          {interaction.lasso.pathData === '' ? null : (
+            <path d={interaction.lasso.pathData} {...LASSO_STYLE} />
+          )}
+          <rect
+            {...rect}
+            ref={surface}
+            fill="transparent"
+            tabIndex={0}
+            onKeyDown={interaction.keyboard.onKeyDown}
+            onDoubleClick={reset}
+            {...interaction.surface}
+          />
+        </>
+      )}
+    </ChartFrame>
+  );
+}

package/src/scatter/ui/ScatterPointLayer.tsx

@@ -0,0 +1,168 @@
+import type { ReactElement } from 'react';
+import { memo } from 'react';
+
+import type { ScreenPoints } from '../core/screenPoints.ts';
+
+/** What {@link ScatterPointLayer} draws. */
+export interface ScatterPointLayerProps {
+  /**
+   * Where every point already sits, in the frame's pixels. The layer never
+   * sees a data value, which is what lets a zoom, a resize and a change of
+   * axis all arrive here as the same thing.
+   */
+  points: ScreenPoints;
+  /**
+   * Which group each point belongs to, as an index into `colors`. An entry of
+   * `-1`, or one outside the range, is a point in no group.
+   * @default undefined — every point is one crowd
+   */
+  groupOf?: ArrayLike<number>;
+  /**
+   * The colour of each group, in the order the groups were given.
+   * @default undefined — every point takes `fallbackColor`
+   */
+  colors?: readonly string[];
+  /**
+   * How strongly each group is drawn, in the same order. This is what a
+   * legend entry switching a group off actually changes — the dots stay where
+   * they are, so the reader can still see the shape they are hiding.
+   * @default undefined — every group is drawn at full strength
+   */
+  opacities?: readonly number[];
+  /**
+   * Colour of a point belonging to no group. It has to be the one ink on the
+   * plot that names nothing, or a reader counts it as one more group.
+   * @default 'var(--text-faint)'
+   */
+  fallbackColor?: string;
+  /**
+   * Radius of a dot, in pixels.
+   * @default 3.5
+   */
+  radius?: number;
+  /**
+   * The index from which points are drawn as outlines rather than filled.
+   *
+   * It is how a sample the model was built from is told from one placed into
+   * it afterwards: the first kind helped choose where the axes point and is
+   * bound to sit somewhere reasonable, while the second can land anywhere.
+   * Points before it are filled, points from it on are hollow.
+   * @default undefined — every point is filled
+   */
+  outlinedFrom?: number;
+}
+
+/**
+ * Every sample as one dot, and nothing else.
+ *
+ * It carries no event handler, no closure per point and no state: the gestures
+ * all land on one transparent rectangle above it and are answered from a
+ * coordinate array. That is what keeps two thousand dots inside a frame, and
+ * it is the whole reason this layer could be swapped for a canvas one day
+ * without a single other file changing.
+ *
+ * A hollow dot is the same dot at the same radius with its colour moved from
+ * the fill to the stroke, so the two read as one kind of thing seen at two
+ * levels of confidence rather than as two unrelated marks.
+ * @param props - See {@link ScatterPointLayerProps}.
+ * @returns The cloud.
+ */
+export const ScatterPointLayer = memo(function ScatterPointLayer(
+  props: ScatterPointLayerProps,
+): ReactElement {
+  const {
+    points,
+    groupOf,
+    colors,
+    opacities,
+    fallbackColor = 'var(--text-faint)',
+    radius = 3.5,
+    outlinedFrom,
+  } = props;
+
+  const xs = points.x;
+  const ys = points.y;
+  const count = Math.min(xs.length, ys.length);
+  const hollowFrom = outlineStart(outlinedFrom, count);
+  const ink = groupInk(colors, opacities, fallbackColor);
+
+  const dots: ReactElement[] = [];
+  for (let index = 0; index < count; index++) {
+    const x = xs[index];
+    const y = ys[index];
+    if (x === undefined || y === undefined) break;
+    if (!Number.isFinite(x) || !Number.isFinite(y)) continue;
+    const slot = (groupOf?.[index] ?? -1) + 1;
+    const color = ink.colors[slot] ?? fallbackColor;
+    const hollow = index >= hollowFrom;
+    dots.push(
+      <circle
+        key={index}
+        cx={round(x)}
+        cy={round(y)}
+        r={radius}
+        fill={hollow ? 'none' : color}
+        stroke={hollow ? color : undefined}
+        strokeWidth={hollow ? OUTLINE_WIDTH : undefined}
+        opacity={ink.opacities[slot]}
+      />,
+    );
+  }
+
+  return <g data-layer="points">{dots}</g>;
+});
+
+/**
+ * Where the hollow dots begin.
+ * @param outlinedFrom - The index the caller asked for, if any.
+ * @param count - How many points there are.
+ * @returns The first index drawn as an outline; `count` when none is.
+ */
+function outlineStart(outlinedFrom: number | undefined, count: number): number {
+  if (outlinedFrom === undefined || !Number.isFinite(outlinedFrom)) {
+    return count;
+  }
+  return Math.max(0, Math.floor(outlinedFrom));
+}
+
+/**
+ * A dot's ink, worked out once per group instead of once per point.
+ *
+ * Both arrays are offset by one, so a point in no group — which arrives as
+ * `-1` — reads its fallback through the same indexed read as every other
+ * point, and a group index past the end simply reads past the end. An opacity
+ * of one is stored as `undefined` because that is the value the attribute is
+ * then left out with.
+ * @param colors - The colour of each group, in group order.
+ * @param opacities - How strongly each group is drawn, in the same order.
+ * @param fallbackColor - Colour of a point belonging to no group.
+ * @returns The colour and the written opacity of every group, from slot 1.
+ */
+function groupInk(
+  colors: readonly string[] | undefined,
+  opacities: readonly number[] | undefined,
+  fallbackColor: string,
+): { colors: string[]; opacities: Array<number | undefined> } {
+  const groups = colors?.length ?? 0;
+  const inks: string[] = [fallbackColor];
+  const alphas: Array<number | undefined> = [undefined];
+  for (let group = 0; group < groups; group++) {
+    inks.push(colors?.[group] ?? fallbackColor);
+    const alpha = opacities?.[group] ?? 1;
+    alphas.push(alpha === 1 ? undefined : alpha);
+  }
+  return { colors: inks, opacities: alphas };
+}
+
+/**
+ * Heavy enough that a ring of it beside a filled dot of the same radius reads
+ * as the same colour. A hairline would read as a paler group instead, which is
+ * exactly the wrong thing to say about a projected sample.
+ */
+const OUTLINE_WIDTH = 1.5;
+
+/*
+ * Two decimals, which is under a tenth of a device pixel at any zoom a browser
+ * offers and keeps the markup short enough to read in a failing test.
+ */
+const round = (value: number): number => Math.round(value * 100) / 100;

package/src/scatter/ui/index.ts

@@ -0,0 +1,123 @@
+/**
+ * A scatter plot the reader can interrogate: a lasso to select a crowd, a card
+ * on the point under the pointer, an outline per group, and the grid of every
+ * pair of axes.
+ *
+ * Nothing here knows what produced the coordinates. The same plot draws a
+ * principal component map, a UMAP embedding and a k-means run with its
+ * centroids, which is why it is its own domain rather than part of the viewer
+ * that happens to use it first.
+ */
+
+export type { ScatterEllipseLayerProps } from './ScatterEllipseLayer.tsx';
+export { ScatterEllipseLayer } from './ScatterEllipseLayer.tsx';
+export type { ScatterLabelLayerProps } from './ScatterLabelLayer.tsx';
+export { ScatterLabelLayer } from './ScatterLabelLayer.tsx';
+export type {
+  ScatterMarkLayerProps,
+  ScatterPixelMark,
+} from './ScatterMarkLayer.tsx';
+export { ScatterMarkLayer } from './ScatterMarkLayer.tsx';
+export { ScatterMatrix } from './ScatterMatrix.tsx';
+export type { ScatterMatrixCellProps } from './ScatterMatrixCell.tsx';
+export { ScatterMatrixCell } from './ScatterMatrixCell.tsx';
+export type {
+  ScatterMatrixDiagonalProps,
+  ScatterMatrixGrid,
+} from './ScatterMatrixDiagonal.tsx';
+export { ScatterMatrixDiagonal } from './ScatterMatrixDiagonal.tsx';
+export type {
+  ScatterGroup,
+  ScatterMarker,
+  ScatterPlotProps,
+} from './ScatterPlot.tsx';
+export { ScatterPlot } from './ScatterPlot.tsx';
+export type { ScatterPointLayerProps } from './ScatterPointLayer.tsx';
+export { ScatterPointLayer } from './ScatterPointLayer.tsx';
+export type {
+  FrameSlot,
+  GestureModifiers,
+  LassoGesture,
+  LassoGestureOptions,
+  ScatterSurfaceProps,
+} from './lassoGesture.ts';
+export {
+  DEFAULT_LASSO_MIN_DISTANCE,
+  MINIMUM_RING_VERTICES,
+  capturePointer,
+  dropFrame,
+  modifierMode,
+  scheduleFrame,
+  surfacePosition,
+} from './lassoGesture.ts';
+export type {
+  ScatterGroupSpread,
+  ScatterGroupSpreadOptions,
+} from './scatterGroupSpread.ts';
+export type { LabelBox } from './scatterLabelBoxes.ts';
+export {
+  LabelBoxField,
+  SCATTER_GROUP_LABEL_SIZE,
+  SCATTER_LABEL_SIZE,
+  labelBoxHeight,
+  labelBoxWidth,
+  labelBoxesOverlap,
+} from './scatterLabelBoxes.ts';
+export type { ScatterLabelInk, ScatterPixelLabel } from './scatterLabels.ts';
+export { scatterGroupLabels, scatterPointLabels } from './scatterLabels.ts';
+export type {
+  PlacedScatterLabel,
+  ScatterLabelPlacementOptions,
+} from './scatterLabelPlacement.ts';
+export { placeScatterLabels } from './scatterLabelPlacement.ts';
+export {
+  scatterGroupSpread,
+  scatterPairEllipse,
+} from './scatterGroupSpread.ts';
+export { scatterMatrixDots } from './scatterMatrixDots.tsx';
+export {
+  SCATTER_MATRIX_GAP,
+  SCATTER_MATRIX_MARGINS,
+  SCATTER_MATRIX_MOST_AXES,
+  SCATTER_MATRIX_ROOM,
+  SCATTER_MATRIX_SMALLEST_OUTLINE,
+  SCATTER_MATRIX_SMALLEST_PLOT,
+  scatterMatrixAxesThatFit,
+  scatterMatrixPlotSide,
+  scatterMatrixTickCount,
+} from './scatterMatrixLayout.ts';
+export { scatterMatrixOutlines } from './scatterMatrixOutlines.tsx';
+export type {
+  ScatterMatrixAxis,
+  ScatterMatrixProps,
+} from './scatterMatrixProps.ts';
+export type { ScatterOutlineInk } from './scatterOutlineShape.tsx';
+export {
+  SCATTER_OUTLINE_FILL_OPACITY,
+  scatterOutlineShape,
+} from './scatterOutlineShape.tsx';
+export { useLassoGesture } from './useLassoGesture.ts';
+export type {
+  HoverAnchor,
+  PointHoverApi,
+  PointHoverOptions,
+} from './usePointHover.ts';
+export { DEFAULT_HOVER_RADIUS, usePointHover } from './usePointHover.ts';
+export type { ScatterFrame, ScatterFrameOptions } from './useScatterFrame.ts';
+export { useScatterFrame } from './useScatterFrame.ts';
+export type {
+  ScatterInteractionApi,
+  ScatterInteractionOptions,
+} from './useScatterInteraction.ts';
+export { useScatterInteraction } from './useScatterInteraction.ts';
+export type {
+  ScatterKeyboardApi,
+  ScatterKeyboardOptions,
+} from './useScatterKeyboard.ts';
+export { useScatterKeyboard } from './useScatterKeyboard.ts';
+export type {
+  ScatterSelectionApi,
+  ScatterSelectionOptions,
+  SelectionChange,
+} from './useScatterSelection.ts';
+export { useScatterSelection } from './useScatterSelection.ts';