react-cheminfo 0.11.0 → 0.12.0

package/src/scatter/core/screenPoints.ts

@@ -1,3 +1,5 @@
+import { chartGroupIndex } from '../../chart/core/chartGroups.ts';
+
 /**
  * Where every point sits on screen, as two parallel arrays.
  *
@@ -68,7 +70,9 @@ export function nearestPointIndex(
     const deltaX = pointX - x;
     const deltaY = pointY - y;
     const distance = deltaX * deltaX + deltaY * deltaY;
-    if (distance > limit) continue;
+    // Written so a point that is not a number is out of reach, rather than
+    // taken as the first match and then never beaten by a real one.
+    if (!(distance <= limit)) continue;
     if (nearest === -1 || distance < nearestDistance) {
       nearest = index;
       nearestDistance = distance;
@@ -108,3 +112,36 @@ export function pointsWithinBounds(
   }
   return mask;
 }
+
+/**
+ * Each group's running total over the pixels, as `x`, `y` and how many points
+ * landed in it, at `group * 3`, `group * 3 + 1` and `group * 3 + 2`.
+ *
+ * Averaging pixels is the same answer as averaging data values on a linear
+ * axis and one pass fewer. A group's name and the cross at its average are
+ * both placed from here, so turning both on marks one spot rather than two.
+ * @param points - Where every point sits on screen.
+ * @param groupOf - Which group each point belongs to.
+ * @param groups - How many groups there are.
+ * @returns The sums; divide by the count for the mean, and skip a group whose count is zero.
+ */
+export function scatterGroupPixelSums(
+  points: ScreenPoints,
+  groupOf: ArrayLike<number>,
+  groups: number,
+): Float64Array {
+  const sums = new Float64Array(Math.max(0, groups) * 3);
+  const count = Math.min(points.x.length, points.y.length, groupOf.length);
+  for (let index = 0; index < count; index++) {
+    const group = chartGroupIndex(groupOf, index, groups);
+    if (group === -1) continue;
+    const x = points.x[index] ?? Number.NaN;
+    const y = points.y[index] ?? Number.NaN;
+    if (!Number.isFinite(x) || !Number.isFinite(y)) continue;
+    const slot = group * 3;
+    sums[slot] = (sums[slot] ?? 0) + x;
+    sums[slot + 1] = (sums[slot + 1] ?? 0) + y;
+    sums[slot + 2] = (sums[slot + 2] ?? 0) + 1;
+  }
+  return sums;
+}

package/src/scatter/ui/ScatterEllipseLayer.tsx

@@ -1,9 +1,14 @@
 import type { ReactElement } from 'react';
-import { memo, useEffect, useRef } from 'react';
+import { memo } from 'react';
 
 import type { ChartScale } from '../../chart/core/chartScale.ts';
-import type { EllipsePoint, EllipseSize } from '../core/confidenceEllipse.ts';
-import { confidenceEllipse } from '../core/confidenceEllipse.ts';
+import { columnMatrix } from '../../chart/core/matrix.ts';
+import type { EllipseSize } from '../core/confidenceEllipse.ts';
+import { DEFAULT_ELLIPSE_SIZE } from '../core/confidenceEllipse.ts';
+import {
+  scatterGroupSpread,
+  scatterPairEllipse,
+} from '../core/scatterGroupSpread.ts';
 
 import { scatterOutlineShape } from './scatterOutlineShape.tsx';
 
@@ -31,7 +36,9 @@ export interface ScatterEllipseLayerProps {
   size?: EllipseSize;
   /**
    * How many points a group needs before it is outlined at all. Below it the
-   * shape says more about the sample than about the group.
+   * shape says more about the sample than about the group. A caption that has
+   * to account for the groups left out reads them from `scatterSkippedGroups`,
+   * over a `scatterGroupSpread` of the same points, size and minimum.
    * @default 3
    */
   minimumPoints?: number;
@@ -47,14 +54,6 @@ export interface ScatterEllipseLayerProps {
    * @default SCATTER_OUTLINE_FILL_OPACITY
    */
   fillOpacity?: number;
-  /**
-   * Called with the groups too small to outline, as indices into `colors`,
-   * whenever that set changes. An outline that quietly fails to appear reads
-   * as a bug in the plot, so the caller is handed what its caption has to
-   * account for.
-   * @default undefined
-   */
-  onSkippedGroups?: (groups: readonly number[]) => void;
 }
 
 /**
@@ -82,72 +81,29 @@ export const ScatterEllipseLayer = memo(function ScatterEllipseLayer(
     colors,
     scaleX,
     scaleY,
-    size = DEFAULT_SIZE,
+    size = DEFAULT_ELLIPSE_SIZE,
     minimumPoints = 3,
     opacities,
     fillOpacity,
-    onSkippedGroups,
   } = props;
 
-  const clouds = groupClouds(x, y, groupOf, colors.length);
+  const spread = scatterGroupSpread({
+    scores: columnMatrix([x, y]),
+    groupOf,
+    groups: colors.length,
+    axes: 2,
+    size,
+    minimumPoints,
+  });
   const outlines: ReactElement[] = [];
-  const skipped: number[] = [];
-  for (let group = 0; group < clouds.length; group++) {
+  for (let group = 0; group < colors.length; group++) {
     const color = colors[group];
-    const cloud = clouds[group];
-    if (color === undefined || cloud === undefined) continue;
-    const measured = confidenceEllipse(cloud, { size, minimumPoints });
-    if (measured === null) {
-      skipped.push(group);
-      continue;
-    }
+    if (color === undefined) continue;
+    const measured = scatterPairEllipse(spread, group, 0, 1);
+    if (measured === null) continue;
     const ink = { color, opacity: opacities?.[group], fillOpacity };
     outlines.push(scatterOutlineShape(group, measured, scaleX, scaleY, ink));
   }
 
-  useSkippedReport(skipped, onSkippedGroups);
   return <g data-layer="ellipses">{outlines}</g>;
 });
-
-/** What a group is outlined at when the caller says nothing. */
-const DEFAULT_SIZE: EllipseSize = { kind: 'coverage', probability: 0.95 };
-
-/* Each group's points, gathered once so every group is measured in one pass. */
-function groupClouds(
-  x: ArrayLike<number>,
-  y: ArrayLike<number>,
-  groupOf: ArrayLike<number>,
-  groups: number,
-): EllipsePoint[][] {
-  const clouds: EllipsePoint[][] = new Array(groups);
-  for (let group = 0; group < groups; group++) clouds[group] = [];
-  const total = Math.min(x.length, y.length, groupOf.length);
-  for (let index = 0; index < total; index++) {
-    const group = groupOf[index];
-    if (group === undefined || group < 0 || group >= groups) continue;
-    const px = x[index];
-    const py = y[index];
-    if (px === undefined || py === undefined) continue;
-    clouds[group]?.push({ x: px, y: py });
-  }
-  return clouds;
-}
-
-/*
- * Report the skipped groups once each time the set changes. A fresh array is
- * built every render, so it is the joined indices that are compared and not
- * the array, which is what keeps a caller storing the answer from re-rendering
- * for ever.
- */
-function useSkippedReport(
-  skipped: readonly number[],
-  report: ((groups: readonly number[]) => void) | undefined,
-): void {
-  const last = useRef('');
-  const key = skipped.join(' ');
-  useEffect(() => {
-    if (last.current === key) return;
-    last.current = key;
-    report?.(skipped);
-  });
-}

package/src/scatter/ui/ScatterLabelLayer.tsx

@@ -1,6 +1,8 @@
 import type { ReactElement } from 'react';
 import { memo } from 'react';
 
+import { chartRoundPixel } from '../../chart/core/chartScale.ts';
+
 import {
   SCATTER_GROUP_LABEL_SIZE,
   SCATTER_LABEL_SIZE,
@@ -63,10 +65,10 @@ export const ScatterLabelLayer = memo(function ScatterLabelLayer(
       lines.push(
         <line
           key={index}
-          x1={round(label.x + across * start)}
-          y1={round(label.y + down * start)}
-          x2={round(leader.x)}
-          y2={round(leader.y)}
+          x1={chartRoundPixel(label.x + across * start)}
+          y1={chartRoundPixel(label.y + down * start)}
+          x2={chartRoundPixel(leader.x)}
+          y2={chartRoundPixel(leader.y)}
           stroke={label.color}
           {...LEADER_STYLE}
         />,
@@ -75,8 +77,8 @@ export const ScatterLabelLayer = memo(function ScatterLabelLayer(
     written.push(
       <text
         key={index}
-        x={round(label.textX)}
-        y={round(label.textY)}
+        x={chartRoundPixel(label.textX)}
+        y={chartRoundPixel(label.textY)}
         fill={label.color}
         textAnchor={label.anchor}
         dominantBaseline="middle"
@@ -127,9 +129,3 @@ const STRONG_LABEL_STYLE = {
   strokeLinejoin: 'round',
   userSelect: 'none',
 } as const;
-
-/*
- * 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/ScatterMarkLayer.tsx

@@ -1,12 +1,12 @@
 import type { ReactElement } from 'react';
 
+import { chartRoundPixel } from '../../chart/core/chartScale.ts';
 import type { ScreenPoints } from '../core/screenPoints.ts';
+import { scatterGroupPixelSums } from '../core/screenPoints.ts';
 
 import type { ScatterPixelMark } from './scatterMarkGlyph.tsx';
 import { markGlyph } from './scatterMarkGlyph.tsx';
 
-export type { ScatterPixelMark } from './scatterMarkGlyph.tsx';
-
 /** What {@link ScatterMarkLayer} draws. */
 export interface ScatterMarkLayerProps {
   /** Where every point sits, in the frame's pixels. */
@@ -140,8 +140,8 @@ function selectionRings(
       <circle
         key={index}
         data-ring="select"
-        cx={round(x)}
-        cy={round(y)}
+        cx={chartRoundPixel(x)}
+        cy={chartRoundPixel(y)}
         r={radius + GAPS.selection}
         strokeWidth={SELECTION_WIDTH}
         {...RING_STYLE}
@@ -177,8 +177,8 @@ function ring(
   return (
     <circle
       data-ring={kind}
-      cx={round(x)}
-      cy={round(y)}
+      cx={chartRoundPixel(x)}
+      cy={chartRoundPixel(y)}
       r={radius}
       strokeWidth={width}
       strokeDasharray={dashes}
@@ -203,7 +203,7 @@ function groupMeanGlyphs(
 ): ReactElement[] {
   const glyphs: ReactElement[] = [];
   if (groupOf === undefined || colors === undefined) return glyphs;
-  const sums = groupMeans(points, groupOf, colors.length);
+  const sums = scatterGroupPixelSums(points, groupOf, colors.length);
   for (let group = 0; group < colors.length; group++) {
     const seen = sums[group * 3 + 2] ?? 0;
     const color = colors[group];
@@ -215,31 +215,3 @@ function groupMeanGlyphs(
   }
   return glyphs;
 }
-
-/*
- * Each group's running total, as `x`, `y` and how many landed in it. Averaging
- * pixels is the same answer as averaging data values on a linear axis and one
- * pass fewer; one flat array costs nothing for a group nobody belongs to.
- */
-function groupMeans(
-  points: ScreenPoints,
-  groupOf: ArrayLike<number>,
-  groups: number,
-): Float64Array {
-  const sums = new Float64Array(groups * 3);
-  const total = Math.min(points.x.length, points.y.length, groupOf.length);
-  for (let index = 0; index < total; index++) {
-    const group = groupOf[index];
-    if (group === undefined || group < 0 || group >= groups) continue;
-    const x = points.x[index];
-    const y = points.y[index];
-    if (x === undefined || !Number.isFinite(x)) continue;
-    if (y === undefined || !Number.isFinite(y)) continue;
-    sums[group * 3] = (sums[group * 3] ?? 0) + x;
-    sums[group * 3 + 1] = (sums[group * 3 + 1] ?? 0) + y;
-    sums[group * 3 + 2] = (sums[group * 3 + 2] ?? 0) + 1;
-  }
-  return sums;
-}
-
-const round = (value: number): number => Math.round(value * 100) / 100;

package/src/scatter/ui/ScatterMatrix.tsx

@@ -6,12 +6,12 @@ import { chartBinCounts } from '../../chart/core/chartBins.ts';
 import type { ChartExtent } from '../../chart/core/chartExtent.ts';
 import { chartColumnExtent } from '../../chart/core/chartExtent.ts';
 import { OverlayLayer } from '../../overlay/ui/OverlayLayer.tsx';
-import type { EllipseSize } from '../core/confidenceEllipse.ts';
+import { DEFAULT_ELLIPSE_SIZE } from '../core/confidenceEllipse.ts';
+import { scatterGroupSpread } from '../core/scatterGroupSpread.ts';
 import { scatterSelectionMask } from '../core/scatterSelection.ts';
 
 import { ScatterMatrixCell } from './ScatterMatrixCell.tsx';
 import type { ScatterMatrixGrid } from './ScatterMatrixDiagonal.tsx';
-import { scatterGroupSpread } from './scatterGroupSpread.ts';
 import {
   SCATTER_MATRIX_GAP as GAP,
   SCATTER_MATRIX_MARGINS as MARGINS,
@@ -24,11 +24,6 @@ import {
 } from './scatterMatrixLayout.ts';
 import type { ScatterMatrixProps } from './scatterMatrixProps.ts';
 
-export type {
-  ScatterMatrixAxis,
-  ScatterMatrixProps,
-} from './scatterMatrixProps.ts';
-
 /**
  * The same map drawn for every pair of axes, sharing one scale per axis.
  *
@@ -44,10 +39,10 @@ export type {
  * @returns The grid.
  */
 export function ScatterMatrix(props: ScatterMatrixProps): ReactElement {
-  const { scores, axes, width, groupOf, groups, selected } = props;
+  const { className, scores, axes, width, groupOf, groups, selected } = props;
   const { overlay, testId, onSelectPair, onHoverChange } = props;
   const { bins = DEFAULT_BINS, pointRadius = DEFAULT_RADIUS } = props;
-  const { ellipse = DEFAULT_ELLIPSE, ellipseMinimumPoints = 3 } = props;
+  const { ellipse = DEFAULT_ELLIPSE_SIZE, ellipseMinimumPoints = 3 } = props;
   const { count = Math.min(SCATTER_MATRIX_MOST_AXES, axes.length) } = props;
 
   const wanted = Math.min(count, axes.length, scores.columns);
@@ -141,7 +136,11 @@ export function ScatterMatrix(props: ScatterMatrixProps): ReactElement {
   const inner = `${side + MARGINS.right + MARGINS.left}px `;
   const above = `${side + MARGINS.top + MARGINS.bottom}px `;
   return (
-    <div style={{ position: 'relative', width }} data-testid={testId}>
+    <div
+      className={className}
+      style={{ position: 'relative', width }}
+      data-testid={testId}
+    >
       <div
         style={{
           ...GRID_STYLE,
@@ -163,13 +162,6 @@ const DEFAULT_BINS = 24;
 const DEFAULT_RADIUS = 2;
 const EXTENT_PADDING = 0.06;
 
-/**
- * What a group is outlined at when the caller says nothing, held as one
- * constant so that a grid redrawn on a hover does not measure its groups again
- * for a size that never changed.
- */
-const DEFAULT_ELLIPSE: EllipseSize = { kind: 'coverage', probability: 0.95 };
-
 const GRID_STYLE = {
   display: 'grid',
   gap: GAP,

package/src/scatter/ui/ScatterMatrixCell.tsx

@@ -124,7 +124,7 @@ function frameProps(
 }
 
 // A diagonal cell has no pair of its own, so it offers itself against the
-// neighbour it is nearest: whoever clicked `PC 3` wants to see PC 3, and the
+// neighbour it is nearest: whoever clicked `PC3` wants to see PC3, and the
 // map has to plot it against something.
 function opener(
   grid: ScatterMatrixGrid,

package/src/scatter/ui/ScatterMatrixDiagonal.tsx

@@ -4,8 +4,9 @@ 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 { formatPercent } from '../../format/core/numbers.ts';
+import type { ScatterGroupSpread } from '../core/scatterGroupSpread.ts';
 
-import type { ScatterGroupSpread } from './scatterGroupSpread.ts';
 import type { ScatterMatrixAxis } from './scatterMatrixProps.ts';
 
 /**
@@ -102,7 +103,7 @@ export function ScatterMatrixDiagonal(
           textAnchor="end"
           style={SHARE_STYLE}
         >
-          {`${(share * 100).toFixed(1)} %`}
+          {formatPercent(share)}
         </text>
       )}
     </g>

package/src/scatter/ui/ScatterOverlayLayers.tsx

@@ -0,0 +1,40 @@
+import type { ReactElement } from 'react';
+
+import { ScatterLabelLayer } from './ScatterLabelLayer.tsx';
+import { LASSO_STYLE } from './scatterPlotModel.ts';
+import type { ScatterLabels } from './useScatterLabels.ts';
+
+/** What {@link ScatterOverlayLayers} draws. */
+interface ScatterOverlayLayersProps {
+  /** The seated words, from `useScatterLabels`. */
+  labels: ScatterLabels;
+  /** Radius of a dot, which a line back to a moved word starts clear of. */
+  radius: number;
+  /** The lasso being drawn, as an SVG `d`; `''` between drags. */
+  lassoPath: string;
+}
+
+/**
+ * What a scatter figure draws over its dots and under the surface that takes
+ * the pointer: the names of the points, the names of the groups, and the lasso
+ * while it is being dragged — in that order, so a group's name is never hidden
+ * under a sample's and the lasso is never hidden under either.
+ * @param props - See {@link ScatterOverlayLayersProps}.
+ * @returns The layers.
+ */
+export function ScatterOverlayLayers(
+  props: ScatterOverlayLayersProps,
+): ReactElement {
+  const { labels, radius, lassoPath } = props;
+  return (
+    <>
+      {labels.named === undefined ? null : (
+        <ScatterLabelLayer labels={labels.named} radius={radius} />
+      )}
+      {labels.crowds === undefined ? null : (
+        <ScatterLabelLayer labels={labels.crowds} radius={radius} strong />
+      )}
+      {lassoPath === '' ? null : <path d={lassoPath} {...LASSO_STYLE} />}
+    </>
+  );
+}

package/src/scatter/ui/ScatterPlot.tsx

@@ -1,21 +1,13 @@
 import type { MouseEvent as ReactMouseEvent, ReactElement } from 'react';
-import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { useMemo } 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 { ScatterOverlayLayers } from './ScatterOverlayLayers.tsx';
 import { ScatterPointLayer } from './ScatterPointLayer.tsx';
-import { surfacePosition } from './lassoGesture.ts';
 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,
@@ -24,13 +16,7 @@ import {
 import type { ScatterPlotProps } from './scatterPlotProps.ts';
 import { useScatterFrame } from './useScatterFrame.ts';
 import { useScatterInteraction } from './useScatterInteraction.ts';
-
-export type {
-  ScatterGroup,
-  ScatterMarker,
-  ScatterPlotProps,
-  ScatterPointOpen,
-} from './scatterPlotProps.ts';
+import { useScatterLabels } from './useScatterLabels.ts';
 
 /**
  * A cloud of points with a lasso, group outlines and a hover card.
@@ -45,42 +31,15 @@ export type {
  * @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,
-    onPointDoubleClick,
-    onLassoChange,
-    touchLasso,
-    viewport,
-    onViewportChange,
-    wheelZoom,
-    wheelZoomDelay,
-    overlay,
-    label,
-    testId,
-  } = props;
+  const { x, y, width, height, xAxis, yAxis, groupOf, groups } = props;
+  const { mutedGroups, ellipse = null, ellipseMinimumPoints } = props;
+  const { ellipseFillOpacity, showGroupMeans, markers } = props;
+  const { pointRadius = 3.5, outlinedFrom, pointLabels } = props;
+  const { showGroupLabels = false, selected, defaultSelected } = props;
+  const { onSelectionChange, selectMode, onHoverChange, onPinChange } = props;
+  const { onPointDoubleClick, onLassoChange, touchLasso, viewport } = props;
+  const { onViewportChange, wheelZoom, wheelZoomDelay, overlay } = props;
+  const { label, className, testId } = props;
 
   const frame = useScatterFrame({
     x,
@@ -94,51 +53,21 @@ export function ScatterPlot(props: ScatterPlotProps): ReactElement {
     wheelZoom,
     wheelZoomDelay,
   });
-  const { points, rect, toX, toY, inside, ref: surface, reset } = frame;
+  const { points, rect, toX, toY, inside, geometry } = frame;
+  const { 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 labels = useScatterLabels(points, {
+    pointLabels,
+    showGroupLabels,
+    groups,
+    groupOf,
+    colors: ink.colors,
+    radius: pointRadius,
+    bounds: rect,
+  });
   const interaction = useScatterInteraction({
     points,
     originX: rect.x,
@@ -152,44 +81,28 @@ export function ScatterPlot(props: ScatterPlotProps): ReactElement {
     hoverRadius: pointRadius + SCATTER_HOVER_SLACK,
     onHoverChange,
     onPinChange,
+    onLassoChange,
   });
 
   function handleDoubleClick(event: ReactMouseEvent<SVGRectElement>): void {
-    const at = surfacePosition(event, rect.x, rect.y);
-    const index = interaction.pointAt(at.x, at.y);
-    if (index === -1 || onPointDoubleClick === undefined) {
+    const opened = interaction.openAt(event);
+    if (opened === null || onPointDoubleClick === undefined) {
       reset();
       return;
     }
-    onPointDoubleClick({
-      index,
-      x: at.x,
-      y: at.y,
-      clientX: event.clientX,
-      clientY: event.clientY,
-    });
+    onPointDoubleClick(opened);
   }
 
-  // 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}
+      geometry={geometry}
+      busy={interaction.lasso.drawing}
       overlay={overlay}
+      className={className}
       testId={testId}
       label={label ?? scatterPlotLabel(xAxis, yAxis, points.x.length)}
     >
@@ -228,15 +141,11 @@ export function ScatterPlot(props: ScatterPlotProps): ReactElement {
             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} />
-          )}
+          <ScatterOverlayLayers
+            labels={labels}
+            radius={pointRadius}
+            lassoPath={interaction.lasso.pathData}
+          />
           <rect
             {...rect}
             ref={surface}