react-cheminfo 0.8.0 → 0.10.0

package/src/scatter/ui/ScatterLabelLayer.tsx

@@ -0,0 +1,135 @@
+import type { ReactElement } from 'react';
+import { memo } from 'react';
+
+import {
+  SCATTER_GROUP_LABEL_SIZE,
+  SCATTER_LABEL_SIZE,
+} from './scatterLabelBoxes.ts';
+import type { PlacedScatterLabel } from './scatterLabelPlacement.ts';
+
+/** What {@link ScatterLabelLayer} draws. */
+export interface ScatterLabelLayerProps {
+  /** The words and where they go, from `placeScatterLabels`. */
+  labels: readonly PlacedScatterLabel[];
+  /**
+   * Radius of the dot a label stands beside, which a line back to it starts
+   * clear of.
+   * @default 3.5
+   */
+  radius?: number;
+  /**
+   * Whether the words are set in the heavier weight, for a group's name over
+   * its own crowd rather than a sample's name beside one dot.
+   * @default false
+   */
+  strong?: boolean;
+}
+
+/**
+ * The words written on a cloud of points.
+ *
+ * Every label is drawn twice over: once in the page's own background as a
+ * thick stroke and once in its colour as a fill. Without that halo a name
+ * landing on a crowd of dots is unreadable exactly where a reader most wants
+ * to read it, and the alternatives — a solid box behind each word, or moving
+ * the words off the data — either hide the dots the label is about or break
+ * the link between the two.
+ *
+ * A word that had to be pushed clear of another word gets a thin line back to
+ * what it names; the lines are drawn first so every halo cuts through them,
+ * which is what keeps a line from striking through the word it arrives at.
+ *
+ * The layer carries no event handler and no state, like every other layer of
+ * the plot: the gestures land on one transparent rectangle above it.
+ * @param props - See {@link ScatterLabelLayerProps}.
+ * @returns The words.
+ */
+export const ScatterLabelLayer = memo(function ScatterLabelLayer(
+  props: ScatterLabelLayerProps,
+): ReactElement {
+  const { labels, radius = 3.5, strong = false } = props;
+
+  const lines: ReactElement[] = [];
+  const written: ReactElement[] = [];
+  for (let index = 0; index < labels.length; index++) {
+    const label = labels[index];
+    if (label === undefined) continue;
+    const leader = label.leader;
+    if (leader !== undefined) {
+      const across = leader.x - label.x;
+      const down = leader.y - label.y;
+      const away = Math.hypot(across, down);
+      const start = Math.min((radius + LEADER_GAP) / away, 1);
+      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)}
+          stroke={label.color}
+          {...LEADER_STYLE}
+        />,
+      );
+    }
+    written.push(
+      <text
+        key={index}
+        x={round(label.textX)}
+        y={round(label.textY)}
+        fill={label.color}
+        textAnchor={label.anchor}
+        dominantBaseline="middle"
+        style={strong ? STRONG_LABEL_STYLE : LABEL_STYLE}
+      >
+        {label.text}
+      </text>,
+    );
+  }
+
+  return (
+    <g data-layer="labels" paintOrder="stroke" stroke="var(--surface)">
+      {lines}
+      {written}
+    </g>
+  );
+});
+
+/** How far a line back to a dot starts clear of that dot. */
+const LEADER_GAP = 2;
+
+/**
+ * The line from a word to what it names. Thin and faint: it is a pointer and
+ * not a reading, and drawn at full strength forty of them read as data.
+ */
+const LEADER_STYLE = {
+  strokeWidth: 0.75,
+  strokeOpacity: 0.55,
+  fill: 'none',
+} as const;
+
+/**
+ * A sample's own name. Small, because there is one per dot and the map is the
+ * thing being read; the halo is what makes it legible rather than the size.
+ */
+const LABEL_STYLE = {
+  fontSize: SCATTER_LABEL_SIZE,
+  strokeWidth: 3,
+  strokeLinejoin: 'round',
+  userSelect: 'none',
+} as const;
+
+/** A group's name, which stands over a crowd and has to win against it. */
+const STRONG_LABEL_STYLE = {
+  fontSize: SCATTER_GROUP_LABEL_SIZE,
+  fontWeight: 600,
+  strokeWidth: 3.5,
+  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

@@ -0,0 +1,245 @@
+import type { ReactElement } from 'react';
+
+import type { ScreenPoints } 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. */
+  points: ScreenPoints;
+  /**
+   * One entry per point, a non-zero entry meaning selected.
+   * @default undefined — nothing is ringed
+   */
+  selected?: Uint8Array;
+  /**
+   * The point under the pointer, or `-1`.
+   * @default -1
+   */
+  hovered?: number;
+  /**
+   * The point the keyboard cursor is on, or `-1`.
+   * @default -1
+   */
+  focused?: number;
+  /**
+   * Radius of a dot in the layer below, which every ring is measured out from.
+   * @default 3.5
+   */
+  radius?: number;
+  /**
+   * Which group each point belongs to; only the group averages read it.
+   * @default undefined — no average can be worked out
+   */
+  groupOf?: ArrayLike<number>;
+  /**
+   * The colour of each group, in group order.
+   * @default undefined
+   */
+  colors?: readonly string[];
+  /**
+   * Whether each group's average is marked with a cross. A sample far from its
+   * own cross is the one the grouping fits worst.
+   * @default false
+   */
+  showGroupMeans?: boolean;
+  /**
+   * Points drawn over the cloud that are not samples — a cluster centre.
+   * @default undefined
+   */
+  marks?: readonly ScatterPixelMark[];
+  /**
+   * Side of the square a mark is drawn in, in pixels.
+   * @default 11
+   */
+  markSize?: number;
+}
+
+/**
+ * The rings, the group averages and the marks that sit over the cloud.
+ *
+ * Selection is a ring and never a change of colour: a dot's colour is the one
+ * thing the reader came for, and recolouring it to say "chosen" trades the
+ * answer for the question. The pointer's ring sits wider and heavier and the
+ * keyboard cursor's is wider again and dashed, so a reader driving the plot by
+ * keyboard while the mouse rests on it can still tell the three apart.
+ * @param props - See {@link ScatterMarkLayerProps}.
+ * @returns The rings and marks.
+ */
+export function ScatterMarkLayer(props: ScatterMarkLayerProps): ReactElement {
+  const {
+    points,
+    selected,
+    hovered = -1,
+    focused = -1,
+    radius = 3.5,
+    groupOf,
+    colors,
+    showGroupMeans = false,
+    marks,
+    markSize = 11,
+  } = props;
+
+  const glyphs = showGroupMeans
+    ? groupMeanGlyphs(points, groupOf, colors, markSize)
+    : [];
+  const laid = marks?.length ?? 0;
+  for (let index = 0; index < laid; index++) {
+    const mark = marks?.[index];
+    if (mark !== undefined) glyphs.push(markGlyph(mark, markSize, `k${index}`));
+  }
+
+  return (
+    <g data-layer="marks" strokeWidth={2.2} strokeLinecap="round">
+      {selectionRings(points, selected, radius)}
+      {ring(points, hovered, radius + GAPS.hover, 'hover', 2)}
+      {ring(points, focused, radius + GAPS.focus, 'focus', 1, '2 2')}
+      {glyphs}
+    </g>
+  );
+}
+
+/**
+ * How far outside the dot each ring sits: tight for a selection, clear of that
+ * for the pointer, clear of both for a cursor that can land where it already is.
+ */
+const GAPS = { selection: 2.5, hover: 5.5, focus: 8.5 } as const;
+const RING_STYLE = { fill: 'none', stroke: 'var(--accent)' } as const;
+const SELECTION_WIDTH = 1.5;
+
+/**
+ * A ring around every selected point, keyed by the point it rings.
+ *
+ * The rings are built here rather than one component per point: a lasso over a
+ * crowd selects thousands at once, and a component call per ring is the cost
+ * this layer exists to avoid.
+ * @param points - Where every point sits, in the frame's pixels.
+ * @param selected - One entry per point, a non-zero entry meaning selected.
+ * @param radius - Radius of a dot in the layer below.
+ * @returns One ring per selected point that has somewhere to be drawn.
+ */
+function selectionRings(
+  points: ScreenPoints,
+  selected: Uint8Array | undefined,
+  radius: number,
+): ReactElement[] {
+  const rings: ReactElement[] = [];
+  if (selected === undefined) return rings;
+  const count = Math.min(points.x.length, points.y.length, selected.length);
+  for (let index = 0; index < count; index++) {
+    if (selected[index] === 0) 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;
+    rings.push(
+      <circle
+        key={index}
+        data-ring="select"
+        cx={round(x)}
+        cy={round(y)}
+        r={radius + GAPS.selection}
+        strokeWidth={SELECTION_WIDTH}
+        {...RING_STYLE}
+      />,
+    );
+  }
+  return rings;
+}
+
+/**
+ * The one ring that says where the pointer or the keyboard cursor is.
+ * @param points - Where every point sits, in the frame's pixels.
+ * @param index - The point to ring, or `-1` for none.
+ * @param radius - Radius of the ring itself, in pixels.
+ * @param kind - What the ring is saying, as its `data-ring` attribute.
+ * @param width - How heavily it is drawn.
+ * @param dashes - Its `stroke-dasharray`, for a cursor that must read as one.
+ * @returns The ring, or `null` when there is no point to draw it on.
+ */
+function ring(
+  points: ScreenPoints,
+  index: number,
+  radius: number,
+  kind: string,
+  width: number,
+  dashes?: string,
+): ReactElement | null {
+  if (index < 0) return null;
+  const x = points.x[index];
+  const y = points.y[index];
+  if (x === undefined || !Number.isFinite(x)) return null;
+  if (y === undefined || !Number.isFinite(y)) return null;
+  return (
+    <circle
+      data-ring={kind}
+      cx={round(x)}
+      cy={round(y)}
+      r={radius}
+      strokeWidth={width}
+      strokeDasharray={dashes}
+      {...RING_STYLE}
+    />
+  );
+}
+
+/**
+ * A cross at each group's average, in the group's own colour.
+ * @param points - Where every point sits, in the frame's pixels.
+ * @param groupOf - Which group each point belongs to.
+ * @param colors - The colour of each group, in group order.
+ * @param size - Side of the square a cross is drawn in, in pixels.
+ * @returns One cross per group that anything belongs to.
+ */
+function groupMeanGlyphs(
+  points: ScreenPoints,
+  groupOf: ArrayLike<number> | undefined,
+  colors: readonly string[] | undefined,
+  size: number,
+): ReactElement[] {
+  const glyphs: ReactElement[] = [];
+  if (groupOf === undefined || colors === undefined) return glyphs;
+  const sums = groupMeans(points, groupOf, colors.length);
+  for (let group = 0; group < colors.length; group++) {
+    const seen = sums[group * 3 + 2] ?? 0;
+    const color = colors[group];
+    if (seen === 0 || color === undefined) continue;
+    const x = (sums[group * 3] ?? 0) / seen;
+    const y = (sums[group * 3 + 1] ?? 0) / seen;
+    const at = { label: 'Group average', x, y, color };
+    glyphs.push(markGlyph(at, size, `m${group}`));
+  }
+  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

@@ -0,0 +1,177 @@
+import type { CSSProperties, ReactElement } from 'react';
+import { useMemo } from 'react';
+
+import type { ChartBins } from '../../chart/core/chartBins.ts';
+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 { 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,
+  SCATTER_MATRIX_MOST_AXES,
+  SCATTER_MATRIX_ROOM as ROOM,
+  SCATTER_MATRIX_SMALLEST_OUTLINE,
+  SCATTER_MATRIX_SMALLEST_PLOT,
+  scatterMatrixAxesThatFit,
+  scatterMatrixPlotSide,
+} 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.
+ *
+ * The diagonal draws the axis' own distribution split by group rather than the
+ * line `y = x`: that line is identical in every grid ever drawn, says nothing
+ * about the data, and reads to an end user as a correlation, which is the
+ * opposite of what orthogonal axes are. The distribution answers the question
+ * the reader actually has — does this component separate my groups on its own?
+ *
+ * Every group is measured once over every laid-out axis rather than once per
+ * cell, so six components cost one pass over the scores and not thirty-six.
+ * @param props - See {@link ScatterMatrixProps}.
+ * @returns The grid.
+ */
+export function ScatterMatrix(props: ScatterMatrixProps): ReactElement {
+  const { 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 { count = Math.min(SCATTER_MATRIX_MOST_AXES, axes.length) } = props;
+
+  const wanted = Math.min(count, axes.length, scores.columns);
+  const shown = scatterMatrixAxesThatFit(width, wanted);
+  const side = Math.max(
+    SCATTER_MATRIX_SMALLEST_PLOT,
+    scatterMatrixPlotSide(width, shown),
+  );
+
+  const shape = useMemo(() => {
+    const series = groups?.length ?? 1;
+    const extents: ChartExtent[] = [];
+    const spread: ChartBins[] = [];
+    for (let axis = 0; axis < shown; axis++) {
+      const over = chartColumnExtent(scores, axis, { padding: EXTENT_PADDING });
+      extents.push(over);
+      spread.push(
+        chartBinCounts(scores, axis, over, bins, groupOf ?? null, series),
+      );
+    }
+    return { extents, spread };
+  }, [scores, shown, bins, groupOf, groups]);
+
+  const colors = useMemo(() => {
+    if (groups === undefined) return undefined;
+    const inks: string[] = [];
+    for (const group of groups) inks.push(group.color);
+    return inks;
+  }, [groups]);
+
+  // Nothing is measured for a grid that will not draw the answer: no groups,
+  // outlines turned off, or cells too small to hold one legibly.
+  const outlined =
+    ellipse !== null &&
+    groupOf !== undefined &&
+    (groups?.length ?? 0) > 0 &&
+    side >= SCATTER_MATRIX_SMALLEST_OUTLINE;
+  const groupSpread = useMemo(() => {
+    if (!outlined || groupOf === undefined || ellipse === null) {
+      return undefined;
+    }
+    return scatterGroupSpread({
+      scores,
+      groupOf,
+      groups: groups?.length ?? 0,
+      axes: shown,
+      size: ellipse,
+      minimumPoints: ellipseMinimumPoints,
+    });
+  }, [outlined, scores, groupOf, groups, shown, ellipse, ellipseMinimumPoints]);
+
+  // An empty selection is not a selection. Dimming exists to set what the
+  // reader picked against what they did not, so with nothing picked there is
+  // nothing to set it against, and dimming every dot would leave the grid
+  // looking blank rather than looking unselected.
+  const mask = useMemo(() => {
+    if (selected === undefined) return undefined;
+    const built = scatterSelectionMask(selected, scores.rows);
+    return built.includes(1) ? built : undefined;
+  }, [selected, scores]);
+
+  const grid: ScatterMatrixGrid = {
+    ...props,
+    ...shape,
+    shown,
+    side,
+    room: ROOM,
+    colors,
+    groupOf,
+    groupSpread,
+    mask,
+    pointRadius,
+    onSelectPair,
+    onHoverChange,
+  };
+  const cells: ReactElement[] = [];
+  for (let row = 0; row < shown; row++) {
+    for (let column = 0; column < shown; column++) {
+      cells.push(
+        <ScatterMatrixCell
+          key={`${column}-${row}`}
+          grid={grid}
+          row={row}
+          column={column}
+        />,
+      );
+    }
+  }
+
+  const rest = Math.max(0, shown - 1);
+  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
+        style={{
+          ...GRID_STYLE,
+          gridTemplateColumns: `${side + MARGINS.right + ROOM.left}px ${inner.repeat(rest)}`,
+          gridTemplateRows: `${above.repeat(rest)}${side + MARGINS.top + ROOM.bottom}px`,
+        }}
+      >
+        {cells}
+      </div>
+      {overlay === undefined ? null : (
+        <OverlayLayer width={width}>{overlay}</OverlayLayer>
+      )}
+    </div>
+  );
+}
+
+/** Bins cut, dot radius and clear space when none is named. */
+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,
+  justifyContent: 'start',
+} as const satisfies CSSProperties;

package/src/scatter/ui/ScatterMatrixCell.tsx

@@ -0,0 +1,140 @@
+import type { CSSProperties, ReactElement } from 'react';
+
+import { chartAxisTitle } from '../../chart/core/chartLabels.ts';
+import type { ChartFrameProps } from '../../chart/ui/ChartFrame.tsx';
+import { ChartFrame } from '../../chart/ui/ChartFrame.tsx';
+
+import type { ScatterMatrixGrid } from './ScatterMatrixDiagonal.tsx';
+import { ScatterMatrixDiagonal } from './ScatterMatrixDiagonal.tsx';
+import { scatterMatrixDots } from './scatterMatrixDots.tsx';
+import {
+  SCATTER_MATRIX_MARGINS as MARGINS,
+  SCATTER_MATRIX_SHARE_IN_TITLE,
+  scatterMatrixTickCount,
+} from './scatterMatrixLayout.ts';
+import { scatterMatrixOutlines } from './scatterMatrixOutlines.tsx';
+
+/** What one cell of a `ScatterMatrix` needs. */
+export interface ScatterMatrixCellProps {
+  /** Everything the grid worked out once and every cell reads. */
+  grid: ScatterMatrixGrid;
+  /** Which row it sits in, which is the axis up its side. */
+  row: number;
+  /** Which column, which is the axis along its foot. */
+  column: number;
+}
+
+/**
+ * One cell of the grid: a frame on the two shared scales, the group outlines
+ * and a cloud of dots — or the distribution that stands in for `y = x` where
+ * the two axes are the same.
+ *
+ * Every cell reads one shared object rather than props of its own, because the
+ * ranges, the counted distributions and the measured groups belong to the grid
+ * and not to any one of its thirty-six cells.
+ * @param props - See {@link ScatterMatrixCellProps}.
+ * @returns The cell.
+ */
+export function ScatterMatrixCell(props: ScatterMatrixCellProps): ReactElement {
+  const { grid, row, column } = props;
+  const open = opener(grid, row, column);
+  const pair = `${grid.axes[row]?.name ?? ''} versus ${grid.axes[column]?.name ?? ''}`;
+
+  return (
+    <div
+      data-scatter-cell={`${column},${row}`}
+      role={open === undefined ? 'img' : 'button'}
+      tabIndex={open === undefined ? undefined : 0}
+      aria-label={open === undefined ? pair : `${pair} — open`}
+      style={open === undefined ? undefined : CLICKABLE_STYLE}
+      onClick={open}
+      onKeyDown={(event) => {
+        if (open === undefined) return;
+        if (event.key !== 'Enter' && event.key !== ' ') return;
+        event.preventDefault();
+        open();
+      }}
+    >
+      <ChartFrame {...frameProps(grid, row, column)}>
+        {(frame) =>
+          row === column ? (
+            <ScatterMatrixDiagonal grid={grid} axis={column} frame={frame} />
+          ) : (
+            <>
+              {scatterMatrixOutlines(grid, row, column, frame)}
+              {scatterMatrixDots(grid, row, column, frame)}
+            </>
+          )
+        }
+      </ChartFrame>
+    </div>
+  );
+}
+
+const CLICKABLE_STYLE = {
+  cursor: 'pointer',
+  borderRadius: 'var(--radius)',
+} as const satisfies CSSProperties;
+
+function frameProps(
+  grid: ScatterMatrixGrid,
+  row: number,
+  column: number,
+): Omit<ChartFrameProps, 'children'> {
+  const { shown, side, axes, extents, spread, room } = grid;
+  const across = axes[column];
+  const up = axes[row];
+  const first = column === 0;
+  const last = row === shown - 1;
+  const margins = {
+    top: MARGINS.top,
+    right: MARGINS.right,
+    left: first ? room.left : MARGINS.left,
+    bottom: last ? room.bottom : MARGINS.bottom,
+  };
+  const ticks = scatterMatrixTickCount(side);
+  const wide =
+    side + MARGINS.right + MARGINS.left >= SCATTER_MATRIX_SHARE_IN_TITLE;
+  const alongTitle = chartAxisTitle(across?.name ?? '', wide ? across : {});
+  const upTitle = chartAxisTitle(up?.name ?? '', wide ? up : {});
+  return {
+    width: side + MARGINS.right + margins.left,
+    height: side + MARGINS.top + margins.bottom,
+    margins,
+    x: {
+      domain: [extents[column]?.min ?? 0, extents[column]?.max ?? 1],
+      label: last ? alongTitle : undefined,
+      showTicks: last,
+      tickCount: ticks,
+    },
+    y:
+      row === column
+        ? {
+            domain: [0, spread[column]?.peak ?? 1],
+            showTicks: false,
+            showGrid: false,
+          }
+        : {
+            domain: [extents[row]?.min ?? 0, extents[row]?.max ?? 1],
+            label: first ? upTitle : undefined,
+            showTicks: first,
+            tickCount: ticks,
+          },
+  };
+}
+
+// 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
+// map has to plot it against something.
+function opener(
+  grid: ScatterMatrixGrid,
+  row: number,
+  column: number,
+): (() => void) | undefined {
+  const { onSelectPair, shown } = grid;
+  if (onSelectPair === undefined) return undefined;
+  if (row !== column) return () => onSelectPair(column, row);
+  if (shown < 2) return () => onSelectPair(row, row);
+  const ending = row === shown - 1;
+  return () => onSelectPair(ending ? row - 1 : row, ending ? row : row + 1);
+}