react-cheminfo 0.10.0 → 0.12.0

package/src/scatter/ui/ScatterPointLayer.tsx

@@ -1,6 +1,8 @@
 import type { ReactElement } from 'react';
 import { memo } from 'react';
 
+import { chartGroupIndex } from '../../chart/core/chartGroups.ts';
+import { chartRoundPixel } from '../../chart/core/chartScale.ts';
 import type { ScreenPoints } from '../core/screenPoints.ts';
 
 /** What {@link ScatterPointLayer} draws. */
@@ -40,6 +42,18 @@ export interface ScatterPointLayerProps {
    * @default 3.5
    */
   radius?: number;
+  /**
+   * One radius per point, in pixels, for a figure whose dots are not all the
+   * same size — a cloud draws the dots at the front of its box larger.
+   * @default undefined — every dot takes `radius`
+   */
+  radii?: ArrayLike<number>;
+  /**
+   * The rows in the order they are painted, for a figure where a dot in front
+   * has to cover the one behind it.
+   * @default undefined — the rows are painted in their own order
+   */
+  order?: ArrayLike<number>;
   /**
    * The index from which points are drawn as outlines rather than filled.
    *
@@ -77,30 +91,36 @@ export const ScatterPointLayer = memo(function ScatterPointLayer(
     opacities,
     fallbackColor = 'var(--text-faint)',
     radius = 3.5,
+    radii,
+    order,
     outlinedFrom,
   } = props;
 
   const xs = points.x;
   const ys = points.y;
   const count = Math.min(xs.length, ys.length);
+  const steps = order === undefined ? count : Math.min(count, order.length);
   const hollowFrom = outlineStart(outlinedFrom, count);
+  const groups = colors?.length ?? 0;
   const ink = groupInk(colors, opacities, fallbackColor);
 
   const dots: ReactElement[] = [];
-  for (let index = 0; index < count; index++) {
+  for (let step = 0; step < steps; step++) {
+    const index = order === undefined ? step : (order[step] as number);
     const x = xs[index];
     const y = ys[index];
-    if (x === undefined || y === undefined) break;
+    if (x === undefined || y === undefined) continue;
     if (!Number.isFinite(x) || !Number.isFinite(y)) continue;
-    const slot = (groupOf?.[index] ?? -1) + 1;
+    const slot = chartGroupIndex(groupOf, index, groups) + 1;
     const color = ink.colors[slot] ?? fallbackColor;
     const hollow = index >= hollowFrom;
+    const size = radii?.[index];
     dots.push(
       <circle
         key={index}
-        cx={round(x)}
-        cy={round(y)}
-        r={radius}
+        cx={chartRoundPixel(x)}
+        cy={chartRoundPixel(y)}
+        r={size === undefined ? radius : chartRoundPixel(size)}
         fill={hollow ? 'none' : color}
         stroke={hollow ? color : undefined}
         strokeWidth={hollow ? OUTLINE_WIDTH : undefined}
@@ -130,9 +150,8 @@ function outlineStart(outlinedFrom: number | undefined, count: number): number {
  *
  * 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.
+ * point. 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.
@@ -160,9 +179,3 @@ function groupInk(
  * 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

@@ -13,10 +13,8 @@ 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 type { ScatterMarkLayerProps } from './ScatterMarkLayer.tsx';
+export type { ScatterPixelMark } from './scatterMarkGlyph.tsx';
 export { ScatterMarkLayer } from './ScatterMarkLayer.tsx';
 export { ScatterMatrix } from './ScatterMatrix.tsx';
 export type { ScatterMatrixCellProps } from './ScatterMatrixCell.tsx';
@@ -26,12 +24,15 @@ export type {
   ScatterMatrixGrid,
 } from './ScatterMatrixDiagonal.tsx';
 export { ScatterMatrixDiagonal } from './ScatterMatrixDiagonal.tsx';
+export { ScatterPlot } from './ScatterPlot.tsx';
 export type {
   ScatterGroup,
-  ScatterMarker,
-  ScatterPlotProps,
-} from './ScatterPlot.tsx';
-export { ScatterPlot } from './ScatterPlot.tsx';
+  ScatterGroupProps,
+  ScatterInteractionProps,
+  ScatterPointOpen,
+} from './scatterFigureProps.ts';
+export type { ScatterGroupInk, ScatterPlotView } from './scatterPlotModel.ts';
+export type { ScatterMarker, ScatterPlotProps } from './scatterPlotProps.ts';
 export type { ScatterPointLayerProps } from './ScatterPointLayer.tsx';
 export { ScatterPointLayer } from './ScatterPointLayer.tsx';
 export type {
@@ -40,6 +41,7 @@ export type {
   LassoGesture,
   LassoGestureOptions,
   ScatterSurfaceProps,
+  SurfaceEvent,
 } from './lassoGesture.ts';
 export {
   DEFAULT_LASSO_MIN_DISTANCE,
@@ -50,10 +52,6 @@ export {
   scheduleFrame,
   surfacePosition,
 } from './lassoGesture.ts';
-export type {
-  ScatterGroupSpread,
-  ScatterGroupSpreadOptions,
-} from './scatterGroupSpread.ts';
 export type { LabelBox } from './scatterLabelBoxes.ts';
 export {
   LabelBoxField,
@@ -70,10 +68,6 @@ export type {
   ScatterLabelPlacementOptions,
 } from './scatterLabelPlacement.ts';
 export { placeScatterLabels } from './scatterLabelPlacement.ts';
-export {
-  scatterGroupSpread,
-  scatterPairEllipse,
-} from './scatterGroupSpread.ts';
 export { scatterMatrixDots } from './scatterMatrixDots.tsx';
 export {
   SCATTER_MATRIX_GAP,
@@ -108,7 +102,7 @@ export { useScatterFrame } from './useScatterFrame.ts';
 export type {
   ScatterInteractionApi,
   ScatterInteractionOptions,
-} from './useScatterInteraction.ts';
+} from './scatterInteractionTypes.ts';
 export { useScatterInteraction } from './useScatterInteraction.ts';
 export type {
   ScatterKeyboardApi,

package/src/scatter/ui/lassoGesture.ts

@@ -163,6 +163,16 @@ export function modifierMode(
   return resting;
 }
 
+/** The little of an event that says where on the surface it happened. */
+export interface SurfaceEvent {
+  /** The element the handler is on, which is the rectangle being measured. */
+  currentTarget: Element;
+  /** Where the event happened, in the window. */
+  clientX: number;
+  /** Where the event happened, in the window. */
+  clientY: number;
+}
+
 /**
  * Where the pointer is, in the space the points were measured in.
  *
@@ -170,13 +180,16 @@ export function modifierMode(
  * the plot's own corner, so the answer can be compared with a point coordinate
  * without the caller mapping anything. An element that cannot be measured —
  * a server render — reports the corner itself rather than throwing.
- * @param event - The pointer event.
+ *
+ * It takes the three fields it actually reads rather than a pointer event,
+ * because a double click arrives as a mouse event and asks the same question.
+ * @param event - The event, or anything carrying those three fields.
  * @param originX - The rectangle's left edge in the points' space.
  * @param originY - Its top edge.
  * @returns The position, in pixels.
  */
 export function surfacePosition(
-  event: ReactPointerEvent<Element>,
+  event: SurfaceEvent,
   originX: number,
   originY: number,
 ): { x: number; y: number } {

package/src/scatter/ui/scatterFigureProps.ts

@@ -0,0 +1,191 @@
+/**
+ * What the flat map and the turning cloud are both handed.
+ *
+ * The two figures share their groups, their labels, their selection and their
+ * hover card on purpose — a reader who has learned one has learned the other —
+ * so the options that drive those are declared once here and each figure's
+ * own props add only what its frame needs.
+ */
+
+import type { ReactNode } from 'react';
+
+import type { ScatterSelectionMode } from '../core/scatterSelection.ts';
+
+import type { SelectionChange } from './useScatterSelection.ts';
+
+/** One group of points on a scatter plot. */
+export interface ScatterGroup {
+  /** A stable id, named in the legend and in a group's own callbacks. */
+  id: string;
+  /** What it is called, in the reader's words. */
+  label: string;
+  /** Its colour, normally from `chartSeriesColor`. */
+  color: string;
+}
+
+/** A point the reader opened, and where they opened it. */
+export interface ScatterPointOpen {
+  /** Its row, as an index into the arrays the caller passed. */
+  index: number;
+  /** Where the reader clicked, in pixels from the figure's left edge. */
+  x: number;
+  /** Where they clicked, in pixels from its top edge. */
+  y: number;
+  /**
+   * Where they clicked in the window, which is what an editor floating over
+   * the page — a menu, a popover, a dialog anchored on the point — is placed
+   * from. The pair above is the figure's own space, for a caller drawing
+   * inside it.
+   */
+  clientX: number;
+  /** Where they clicked in the window. */
+  clientY: number;
+}
+
+/** How the points of a scatter figure are grouped, sized and named. */
+export interface ScatterGroupProps {
+  /**
+   * Which group each point belongs to, as an index into `groups`. A point with
+   * `-1`, `NaN`, or an index outside the range, is drawn in the muted ink and
+   * left out of every outline.
+   * @default undefined — every point is one crowd
+   */
+  groupOf?: ArrayLike<number>;
+  /**
+   * The groups, in the order they are coloured and listed.
+   * @default undefined
+   */
+  groups?: readonly ScatterGroup[];
+  /**
+   * Which groups are drawn faint, by id — what a legend entry switches.
+   * @default undefined — every group is drawn in full
+   */
+  mutedGroups?: ReadonlySet<string>;
+  /**
+   * Radius of a dot, in pixels. A cloud draws the dot at the middle of its box
+   * at this size, one at the front larger and one at the back smaller.
+   * @default 3.5
+   */
+  pointRadius?: 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;
+  /**
+   * What each point is called, written beside its own dot. A point whose entry
+   * is `undefined` is left unnamed, so a caller may label the twenty samples
+   * it cares about and leave the crowd alone.
+   *
+   * Names are placed so that no two overlap: one that cannot be fitted near
+   * its own dot is moved aside with a line back to it, and one with nowhere
+   * left to go is dropped rather than written over another.
+   * @default undefined — no point is named
+   */
+  pointLabels?: ReadonlyArray<string | undefined>;
+  /**
+   * Whether each group's name is written once, over the middle of that group.
+   * It needs `groupOf` and `groups`, since it is their names it writes. They
+   * are placed like `pointLabels`, biggest group first, so the name that
+   * speaks for the most samples keeps the middle of its own crowd.
+   * @default false
+   */
+  showGroupLabels?: boolean;
+}
+
+/** How a reader picks, hovers and opens the points of a scatter figure. */
+export interface ScatterInteractionProps {
+  /**
+   * The selected rows. Present, the caller owns the selection; the outline
+   * drawn while a lasso is being dragged stays inside the component either
+   * way, so a controlled parent is never asked to re-render sixty times a
+   * second.
+   * @default undefined — the figure keeps its own
+   */
+  selected?: readonly number[];
+  /**
+   * The rows selected before the reader touches anything.
+   * @default undefined — nothing is selected
+   */
+  defaultSelected?: readonly number[];
+  /**
+   * Called when a lasso is released, a dot is clicked, or the keyboard commits
+   * — never while a lasso is being drawn, and never while a cloud is turned.
+   * @default undefined
+   */
+  onSelectionChange?: (change: SelectionChange) => void;
+  /**
+   * What a gesture does to the selection when no modifier is held. Shift
+   * always adds and Alt always removes, whatever this says.
+   * @default 'replace'
+   */
+  selectMode?: ScatterSelectionMode;
+  /**
+   * Called with the row under the pointer, or `-1` when the pointer is on
+   * none.
+   * @default undefined
+   */
+  onHoverChange?: (index: number) => void;
+  /**
+   * Called with the row whose card the reader pinned, or `-1`.
+   * @default undefined
+   */
+  onPinChange?: (index: number) => void;
+  /**
+   * Called when the reader double-clicks a point: the gesture for "tell me
+   * more about this one", or "let me change it".
+   *
+   * A double click is also two clicks, so the point is selected first and its
+   * card pinned. That is deliberate: the alternative is to hold every single
+   * click for the length of the double-click interval before acting on it, and
+   * clicking a dot is the commonest gesture in the figure — making it feel
+   * slow to save a redundant selection on the rarest one is the wrong trade.
+   * On a cloud it fires whichever gesture a drag is set to, since a double
+   * click is not a drag.
+   * @default undefined
+   */
+  onPointDoubleClick?: (point: ScatterPointOpen) => void;
+  /**
+   * Called when a lasso starts being drawn and again when it ends, and never
+   * in between.
+   *
+   * The floating chrome reads the drag from the overlay surface instead, which
+   * costs the caller nothing. This is for the piece of chrome that has to say
+   * what letting go will do while sitting *outside* the figure — a caption in
+   * the flow beneath it, which cannot reach that surface.
+   * @default undefined
+   */
+  onLassoChange?: (drawing: boolean) => void;
+  /**
+   * How long the pointer has to rest over the figure before the wheel is
+   * caught, in milliseconds.
+   * @default CHART_WHEEL_DWELL
+   */
+  wheelZoomDelay?: number;
+  /**
+   * What floats over the figure — an `OverlayBar`, a legend, a caption, a
+   * readout.
+   * @default undefined
+   */
+  overlay?: ReactNode;
+  /**
+   * What a screen reader is told the figure shows.
+   * @default a sentence built from the axis names and the point count
+   */
+  label?: string;
+  /**
+   * A class for the figure's outermost element, for a site placing it.
+   * @default undefined
+   */
+  className?: string;
+  /**
+   * Value of the `data-testid` attribute of the wrapper.
+   * @default undefined
+   */
+  testId?: string;
+}

package/src/scatter/ui/scatterInteractionTypes.ts

@@ -0,0 +1,127 @@
+/**
+ * What `useScatterInteraction` is asked for and what it hands back, kept apart
+ * from the hook so the hook's own file stays about the decisions it makes.
+ */
+
+import type { ScatterSelectionMode } from '../core/scatterSelection.ts';
+import type { ScreenPoints } from '../core/screenPoints.ts';
+
+import type {
+  LassoGesture,
+  ScatterSurfaceProps,
+  SurfaceEvent,
+} from './lassoGesture.ts';
+import type { ScatterPointOpen } from './scatterFigureProps.ts';
+import type { PointHoverApi } from './usePointHover.ts';
+import type { ScatterKeyboardApi } from './useScatterKeyboard.ts';
+import type {
+  ScatterSelectionApi,
+  SelectionChange,
+} from './useScatterSelection.ts';
+
+/** What `useScatterInteraction` needs. */
+export interface ScatterInteractionOptions {
+  /** Where every point sits on screen; how many there are is read from it. */
+  points: ScreenPoints;
+  /**
+   * Where the plot's left edge is, so a gesture lands in the same space the
+   * points were measured in.
+   * @default 0
+   */
+  originX?: number;
+  /**
+   * Where its top edge is.
+   * @default 0
+   */
+  originY?: number;
+  /**
+   * The selected rows when the caller owns them.
+   * @default undefined — the hook keeps them
+   */
+  selected?: readonly number[];
+  /**
+   * The rows selected before the reader touches anything.
+   * @default undefined
+   */
+  defaultSelected?: readonly number[];
+  /**
+   * Called once per settled gesture, never during a drag.
+   * @default undefined
+   */
+  onSelectionChange?: (change: SelectionChange) => void;
+  /**
+   * What a gesture with no modifier held does to the selection.
+   * @default 'replace'
+   */
+  selectMode?: ScatterSelectionMode;
+  /**
+   * Whether a drag draws a lasso at all. The hover card works either way.
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * Whether a finger draws one rather than scrolling the page.
+   * @default false
+   */
+  touchLasso?: boolean;
+  /**
+   * How near the pointer a point must be to be hovered or clicked, in pixels.
+   * @default 12
+   */
+  hoverRadius?: number;
+  /**
+   * One entry per point, a zero meaning it cannot be hovered or clicked.
+   * @default undefined — every point can be
+   */
+  included?: Uint8Array;
+  /**
+   * Called with the row under the pointer, or `-1`.
+   * @default undefined
+   */
+  onHoverChange?: (index: number) => void;
+  /**
+   * Called with the row whose card is pinned, or `-1`.
+   * @default undefined
+   */
+  onPinChange?: (index: number) => void;
+  /**
+   * Called when a lasso starts being drawn and again when it ends.
+   * @default undefined
+   */
+  onLassoChange?: (drawing: boolean) => void;
+}
+
+/** Everything a scatter needs to be touched, in five pieces. */
+export interface ScatterInteractionApi {
+  /** Spread onto the transparent rectangle over the plot. */
+  surface: ScatterSurfaceProps;
+  /** What is picked, including what a half-drawn lasso would pick. */
+  selection: ScatterSelectionApi;
+  /** The point a card is about, and where to put it. */
+  hover: PointHoverApi;
+  /** The roving cursor, whose `onKeyDown` goes on the focusable wrapper. */
+  keyboard: ScatterKeyboardApi;
+  /** The outline being drawn, for the plot to stroke. */
+  lasso: LassoGesture;
+  /**
+   * Which point is near a position, or `-1`.
+   *
+   * The same search a click runs, offered on its own so that a gesture the
+   * hook does not own — a double click, which the plot answers because only
+   * the plot knows what a double click on empty ground means — asks it in the
+   * same words and with the same radius.
+   */
+  pointAt: (x: number, y: number) => number;
+  /**
+   * What a click at a position does: select and pin the nearest point, or,
+   * on empty ground, let the card go and clear a replacing selection. For a
+   * gesture the hook does not own that ends in a click — a tap on a cloud
+   * being turned.
+   */
+  clickAt: (x: number, y: number, mode: ScatterSelectionMode) => void;
+  /**
+   * The point a double click landed on, with where it landed, or `null` on
+   * empty ground.
+   */
+  openAt: (event: SurfaceEvent) => ScatterPointOpen | null;
+}

package/src/scatter/ui/scatterLabels.ts

@@ -12,7 +12,9 @@
  * anything.
  */
 
+import { chartGroupIndex } from '../../chart/core/chartGroups.ts';
 import type { ScreenPoints } from '../core/screenPoints.ts';
+import { scatterGroupPixelSums } from '../core/screenPoints.ts';
 
 /** One word written on the plot, already placed. */
 export interface ScatterPixelLabel {
@@ -81,7 +83,7 @@ export function scatterPointLabels(
     const y = points.y[index];
     if (x === undefined || !Number.isFinite(x)) continue;
     if (y === undefined || !Number.isFinite(y)) continue;
-    const group = groupOf?.[index] ?? -1;
+    const group = chartGroupIndex(groupOf, index, colors?.length ?? 0);
     placed.push({ x, y, text, color: colors?.[group] ?? fallbackColor });
   }
   return placed;
@@ -110,20 +112,7 @@ export function scatterGroupLabels(
   const placed: ScatterPixelLabel[] = [];
   if (groupOf === undefined) return placed;
 
-  const sums = new Float64Array(names.length * 3);
-  const count = Math.min(points.x.length, points.y.length, groupOf.length);
-  for (let index = 0; index < count; index++) {
-    const group = groupOf[index];
-    if (group === undefined || group < 0 || group >= names.length) 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;
-  }
-
+  const sums = scatterGroupPixelSums(points, groupOf, names.length);
   for (let group = 0; group < names.length; group++) {
     const seen = sums[group * 3 + 2] ?? 0;
     const text = names[group];

package/src/scatter/ui/scatterMarkGlyph.tsx

@@ -8,6 +8,7 @@
 
 import type { ReactElement } from 'react';
 
+import { chartRoundPixel } from '../../chart/core/chartScale.ts';
 import type { OverlayMarkShape } from '../../overlay/core/overlayMarks.ts';
 
 /** A point drawn over the cloud that is not a sample, already in pixels. */
@@ -44,10 +45,10 @@ export function markGlyph(
 ): ReactElement {
   const { label, x, y, color, shape = 'cross' } = mark;
   const half = size / 2;
-  const near = round(x - half);
-  const far = round(x + half);
-  const top = round(y - half);
-  const foot = round(y + half);
+  const near = chartRoundPixel(x - half);
+  const far = chartRoundPixel(x + half);
+  const top = chartRoundPixel(y - half);
+  const foot = chartRoundPixel(y + half);
   // `key` is passed on each element rather than spread: React reads a key
   // out of JSX itself, and one arriving through a spread is dropped with a
   // warning that only shows up once the page is running.
@@ -58,8 +59,8 @@ export function markGlyph(
       <circle
         key={key}
         {...shared}
-        cx={round(x)}
-        cy={round(y)}
+        cx={chartRoundPixel(x)}
+        cy={chartRoundPixel(y)}
         r={half}
         fill={filled ? color : 'none'}
         stroke={filled ? 'none' : color}
@@ -90,5 +91,3 @@ export function markGlyph(
     />
   );
 }
-
-const round = (value: number): number => Math.round(value * 100) / 100;

package/src/scatter/ui/scatterMatrixDots.tsx

@@ -11,9 +11,13 @@
 
 import type { CSSProperties, PointerEvent, ReactElement } from 'react';
 
+import { chartGroupIndex } from '../../chart/core/chartGroups.ts';
+import { chartRoundPixel } from '../../chart/core/chartScale.ts';
 import type { ChartFrameRender } from '../../chart/ui/ChartFrame.tsx';
 
 import type { ScatterMatrixGrid } from './ScatterMatrixDiagonal.tsx';
+import { surfacePosition } from './lassoGesture.ts';
+import { SCATTER_HOVER_SLACK } from './scatterPlotModel.ts';
 
 /**
  * Every dot of one cell, as one path per colour, plus the rectangle that turns
@@ -39,8 +43,8 @@ export function scatterMatrixDots(
     const valueX = scores.get(index, column);
     const valueY = scores.get(index, row);
     if (!Number.isFinite(valueX) || !Number.isFinite(valueY)) continue;
-    const atX = Math.round((x.offset + valueX * x.factor) * 10) / 10;
-    const atY = Math.round((y.offset + valueY * y.factor) * 10) / 10;
+    const atX = chartRoundPixel(x.offset + valueX * x.factor, 1);
+    const atY = chartRoundPixel(y.offset + valueY * y.factor, 1);
     const slot =
       inkOf(groupOf, index, inks - 1) * 2 + (mask?.[index] === 0 ? 1 : 0);
     paths[slot] = `${paths[slot] ?? ''}M${atX} ${atY}h0`;
@@ -73,9 +77,6 @@ export function scatterMatrixDots(
   return marks;
 }
 
-/** How far from a dot the pointer still counts as resting on it, in pixels. */
-const HOVER_REACH = 10;
-
 /** Opacity of a dot in the selection, of one outside it, and the ungrouped ink. */
 const POINT_OPACITY = 0.85;
 const FAINT_OPACITY = 0.16;
@@ -94,17 +95,22 @@ function nearestRow(
   column: number,
   frame: ChartFrameRender,
 ): number {
-  const { offsetX, offsetY } = event.nativeEvent;
-  const { scores } = grid;
-  const { x, y } = frame;
+  const { scores, pointRadius } = grid;
+  const { x, y, plot } = frame;
+  const at = surfacePosition(event, plot.left, plot.top);
+  const reach = pointRadius + SCATTER_HOVER_SLACK;
+  const limit = reach * reach;
   let best = -1;
-  let closest = HOVER_REACH * HOVER_REACH;
+  let closest = 0;
 
   for (let index = 0; index < scores.rows; index++) {
-    const awayX = x.offset + scores.get(index, column) * x.factor - offsetX;
-    const awayY = y.offset + scores.get(index, row) * y.factor - offsetY;
+    const awayX = x.offset + scores.get(index, column) * x.factor - at.x;
+    const awayY = y.offset + scores.get(index, row) * y.factor - at.y;
     const away = awayX * awayX + awayY * awayY;
-    if (away < closest) {
+    // The rule `nearestPointIndex` keeps on the map: a dot exactly at the reach
+    // counts, a tie goes to the lower row, a missing value is never in reach.
+    if (!(away <= limit)) continue;
+    if (best === -1 || away < closest) {
       closest = away;
       best = index;
     }
@@ -127,8 +133,6 @@ function inkOf(
   row: number,
   groups: number,
 ): number {
-  const raw = groupOf?.[row];
-  if (raw === undefined || !Number.isFinite(raw)) return groups;
-  const group = Math.trunc(raw);
-  return group < 0 || group >= groups ? groups : group;
+  const group = chartGroupIndex(groupOf, row, groups);
+  return group === -1 ? groups : group;
 }

package/src/scatter/ui/scatterMatrixLayout.ts

@@ -61,7 +61,7 @@ export const SCATTER_MATRIX_SMALLEST_PLOT = 50;
 /**
  * The narrowest cell that writes its share into its axis title.
  *
- * `PC 1 — 73.0 %` is about a hundred pixels of type, and an axis title is
+ * `PC1 — 73.0 %` is about a hundred pixels of type, and an axis title is
  * centred on a cell that may be seventy: three of them along the foot of a
  * narrow grid run into one another and none of the three can be read. Under
  * this the title is the component's name alone, which is the half a reader