react-cheminfo 0.9.0 → 0.11.0

package/src/scatter/ui/scatterMarkGlyph.tsx

@@ -0,0 +1,94 @@
+/**
+ * A point drawn over the cloud that is not a sample, and the glyph it takes.
+ *
+ * It is its own module because three unrelated things place such a point — a
+ * caller's cluster centre, a group's own average, a rule laid across the plot
+ * — and only the first of them is anything the layer knows about.
+ */
+
+import type { ReactElement } from 'react';
+
+import type { OverlayMarkShape } from '../../overlay/core/overlayMarks.ts';
+
+/** A point drawn over the cloud that is not a sample, already in pixels. */
+export interface ScatterPixelMark {
+  /** What it is called, which is what a hover card and an end-to-end test ask for. */
+  label: string;
+  /** Horizontal position, in the frame's pixels. */
+  x: number;
+  /** Vertical position, in the frame's pixels. */
+  y: number;
+  /** Its colour, normally the colour of the group it stands for. */
+  color: string;
+  /**
+   * The glyph it is drawn with, which is how a reader tells it from a sample.
+   * @default 'cross'
+   */
+  shape?: OverlayMarkShape;
+}
+
+/**
+ * One mark, drawn as the glyph its shape asks for.
+ *
+ * A rule laid across the cloud names no point, so the two rule shapes are
+ * drawn as the default cross.
+ * @param mark - What to draw, already in the frame's pixels.
+ * @param size - Side of the square the glyph is drawn in, in pixels.
+ * @param key - What React reconciles the glyph by.
+ * @returns The glyph.
+ */
+export function markGlyph(
+  mark: ScatterPixelMark,
+  size: number,
+  key: string,
+): 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);
+  // `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.
+  const shared = { 'data-mark': label };
+  if (shape === 'dot' || shape === 'ring') {
+    const filled = shape === 'dot';
+    return (
+      <circle
+        key={key}
+        {...shared}
+        cx={round(x)}
+        cy={round(y)}
+        r={half}
+        fill={filled ? color : 'none'}
+        stroke={filled ? 'none' : color}
+      />
+    );
+  }
+  if (shape === 'square') {
+    return (
+      <rect
+        key={key}
+        {...shared}
+        x={near}
+        y={top}
+        width={size}
+        height={size}
+        fill={color}
+        stroke="none"
+      />
+    );
+  }
+  return (
+    <path
+      key={key}
+      {...shared}
+      d={`M${near} ${top}L${far} ${foot}M${far} ${top}L${near} ${foot}`}
+      fill="none"
+      stroke={color}
+    />
+  );
+}
+
+const round = (value: number): number => Math.round(value * 100) / 100;

package/src/scatter/ui/scatterMatrixDots.tsx

@@ -0,0 +1,134 @@
+/**
+ * The dots of one cell of a pair grid, and the surface that finds them again.
+ *
+ * They are not an element each. Six axes over five thousand samples is a
+ * hundred and eighty thousand marks, and a browser handed that many nodes
+ * stops answering the pointer long before it paints; one path of zero-length
+ * round-capped segments a colour is at most sixteen nodes a cell and draws the
+ * same discs. The scores are read where they stand for the same reason: a grid
+ * copying a column per cell allocates n² arrays to show n.
+ */
+
+import type { CSSProperties, PointerEvent, ReactElement } from 'react';
+
+import type { ChartFrameRender } from '../../chart/ui/ChartFrame.tsx';
+
+import type { ScatterMatrixGrid } from './ScatterMatrixDiagonal.tsx';
+
+/**
+ * Every dot of one cell, as one path per colour, plus the rectangle that turns
+ * a pointer position back into a row when the caller wants hovering.
+ * @param grid - Everything the grid worked out once and every cell reads.
+ * @param row - Which row the cell sits in, which is the axis up its side.
+ * @param column - Which column, which is the axis along its foot.
+ * @param frame - The rectangle and the two scales the cell was given.
+ * @returns The marks, in the order they stack.
+ */
+export function scatterMatrixDots(
+  grid: ScatterMatrixGrid,
+  row: number,
+  column: number,
+  frame: ChartFrameRender,
+): ReactElement[] {
+  const { scores, colors, groupOf, mask, pointRadius, onHoverChange } = grid;
+  const { x, y, plot } = frame;
+  const inks = (colors?.length ?? 0) + 1;
+  const paths: string[] = new Array(inks * 2).fill('');
+
+  for (let index = 0; index < scores.rows; index++) {
+    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 slot =
+      inkOf(groupOf, index, inks - 1) * 2 + (mask?.[index] === 0 ? 1 : 0);
+    paths[slot] = `${paths[slot] ?? ''}M${atX} ${atY}h0`;
+  }
+
+  const marks: ReactElement[] = [];
+  for (let slot = 0; slot < paths.length; slot++) {
+    const data = paths[slot];
+    if (data === undefined || data === '') continue;
+    const ink = colors?.[slot >> 1] ?? NO_GROUP_INK;
+    const style = dotStyle(ink, pointRadius, slot);
+    marks.push(<path key={slot} d={data} style={style} />);
+  }
+  if (onHoverChange !== undefined) {
+    marks.push(
+      <rect
+        key="tracking"
+        x={plot.left}
+        y={plot.top}
+        width={plot.width}
+        height={plot.height}
+        style={TRACKING_STYLE}
+        onPointerMove={(event) =>
+          onHoverChange(nearestRow(event, grid, row, column, frame))
+        }
+        onPointerLeave={() => onHoverChange(-1)}
+      />,
+    );
+  }
+  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;
+const NO_GROUP_INK = 'var(--text-muted)';
+
+/** The rectangle that takes the pointer, over the dots and invisible. */
+const TRACKING_STYLE = {
+  fill: 'none',
+  pointerEvents: 'all',
+} as const satisfies CSSProperties;
+
+function nearestRow(
+  event: PointerEvent<SVGRectElement>,
+  grid: ScatterMatrixGrid,
+  row: number,
+  column: number,
+  frame: ChartFrameRender,
+): number {
+  const { offsetX, offsetY } = event.nativeEvent;
+  const { scores } = grid;
+  const { x, y } = frame;
+  let best = -1;
+  let closest = HOVER_REACH * HOVER_REACH;
+
+  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 away = awayX * awayX + awayY * awayY;
+    if (away < closest) {
+      closest = away;
+      best = index;
+    }
+  }
+  return best;
+}
+
+function dotStyle(color: string, radius: number, slot: number): CSSProperties {
+  return {
+    fill: 'none',
+    stroke: color,
+    strokeWidth: radius * 2,
+    strokeLinecap: 'round',
+    strokeOpacity: (slot & 1) === 1 ? FAINT_OPACITY : POINT_OPACITY,
+  };
+}
+
+function inkOf(
+  groupOf: ArrayLike<number> | undefined,
+  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;
+}

package/src/scatter/ui/scatterMatrixLayout.ts

@@ -0,0 +1,133 @@
+/**
+ * How much room a pair grid gives each of its cells.
+ *
+ * The numbers are the grid's own rather than the chart family's: a figure
+ * standing alone can afford ten pixels of quiet around its plot, and a grid
+ * repeating that margin thirty-six times inside somebody else's page spends a
+ * fifth of its width on nothing. What a tick label and an axis title need is
+ * still taken from the chart, because that is a property of the type and not
+ * of the figure.
+ */
+
+import {
+  CHART_TICK_ROOM as TICKS,
+  CHART_TITLE_ROOM as TITLES,
+} from '../../chart/ui/chartStyles.ts';
+
+/** Room a cell keeps around its plot before its outer edges ask for more. */
+export const SCATTER_MATRIX_MARGINS = {
+  top: 4,
+  right: 8,
+  bottom: 4,
+  left: 8,
+} as const;
+
+/**
+ * Gap between two cells, which is what tells one plot from the next.
+ *
+ * The three numbers across a join — this and the two margins beside it — have
+ * to hold two tick labels facing each other, since the label on a plot's last
+ * tick is centred on its edge and reaches into the gap from both sides. Twenty
+ * two pixels is where `4` and `-1.5` stop reading as `4-1.5`.
+ */
+export const SCATTER_MATRIX_GAP = 6;
+
+/** Room the left column and the bottom row keep for their ticks and titles. */
+export const SCATTER_MATRIX_ROOM = {
+  left: SCATTER_MATRIX_MARGINS.left + TICKS.left + TITLES.left,
+  bottom: SCATTER_MATRIX_MARGINS.bottom + TICKS.bottom + TITLES.bottom,
+} as const;
+
+/**
+ * The most axes a grid ever lays out, and the fewest it falls back to.
+ *
+ * Six is where the reading stops being worth the room: the sixth component of
+ * a real model usually carries a per cent of the differences, and thirty-six
+ * cells is already more than a reader compares in one sitting. It is a
+ * ceiling, not a target — {@link scatterMatrixAxesThatFit} drops axes until
+ * the cells are readable, so a narrow embed draws three of them.
+ */
+export const SCATTER_MATRIX_MOST_AXES = 6;
+const SMALLEST_GRID = 2;
+
+/**
+ * The smallest plot the grid draws.
+ *
+ * Below it the dots merge and the ticks collide, so an axis is dropped
+ * instead: three components a reader can see beat six they cannot.
+ */
+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
+ * 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
+ * needs to know which cell they are looking at.
+ */
+export const SCATTER_MATRIX_SHARE_IN_TITLE = 110;
+
+/**
+ * The smallest plot a group outline is drawn in.
+ *
+ * An outline holding ninety-five per cent of its group covers most of the cell
+ * it is drawn in, so under about sixty-four pixels the boundary runs along the
+ * edges and the fill reads as a tinted cell rather than as a region — a blob
+ * that says where the group is not. The dots still say it, so the outline is
+ * simply left out.
+ */
+export const SCATTER_MATRIX_SMALLEST_OUTLINE = 64;
+
+/**
+ * How many axes fit in the width at a readable size.
+ * @param width - What the grid was given, in pixels.
+ * @param wanted - How many the caller asked for.
+ * @returns The count to lay out, never below two.
+ */
+export function scatterMatrixAxesThatFit(
+  width: number,
+  wanted: number,
+): number {
+  for (let count = wanted; count > SMALLEST_GRID; count--) {
+    if (scatterMatrixPlotSide(width, count) >= SCATTER_MATRIX_SMALLEST_PLOT) {
+      return count;
+    }
+  }
+  return Math.max(0, Math.min(wanted, SMALLEST_GRID));
+}
+
+/**
+ * The side of every plot rectangle once the chrome has taken its share.
+ * @param width - What the grid was given, in pixels.
+ * @param count - How many axes are laid out.
+ * @returns The side, in pixels, which the caller floors at the smallest plot.
+ */
+export function scatterMatrixPlotSide(width: number, count: number): number {
+  if (count < 1) return SCATTER_MATRIX_SMALLEST_PLOT;
+  const inner = SCATTER_MATRIX_MARGINS.left + SCATTER_MATRIX_GAP;
+  const chrome =
+    SCATTER_MATRIX_ROOM.left +
+    (count - 1) * inner +
+    count * SCATTER_MATRIX_MARGINS.right;
+  return (Math.max(0, width) - chrome) / count;
+}
+
+/**
+ * How many ticks a cell's axis aims for.
+ *
+ * Four labels on a ninety-pixel axis run into one another and the reader
+ * reads none of them; two ends and nothing else is enough to say which way the
+ * component grows, which is all a cell of a grid is asked.
+ * @param side - The side of the plot rectangle, in pixels.
+ * @returns The tick count to ask the axis for.
+ */
+export function scatterMatrixTickCount(side: number): number {
+  if (side < CROWDED_AXIS) return 2;
+  return side < ROOMY_AXIS ? 3 : 4;
+}
+
+/** Where an axis stops holding three tick labels, and where it holds four. */
+const CROWDED_AXIS = 90;
+const ROOMY_AXIS = 150;

package/src/scatter/ui/scatterMatrixOutlines.tsx

@@ -0,0 +1,53 @@
+/**
+ * The group outlines of one cell of a pair grid.
+ *
+ * They are the same shapes the map draws, projected through the cell's own two
+ * scales rather than reused from the map's: an ellipse tilted by thirty
+ * degrees in the data is tilted by something else entirely on a plot whose two
+ * axes carry different numbers of pixels per unit, and a grid whose cells
+ * disagree with the map about where a group sits is worse than a grid with no
+ * outlines at all.
+ */
+
+import type { ReactElement } from 'react';
+
+import type { ChartFrameRender } from '../../chart/ui/ChartFrame.tsx';
+
+import type { ScatterMatrixGrid } from './ScatterMatrixDiagonal.tsx';
+import { scatterPairEllipse } from './scatterGroupSpread.ts';
+import { scatterOutlineShape } from './scatterOutlineShape.tsx';
+
+/**
+ * One outline per group, for the pair of axes a cell stands for.
+ *
+ * The whole layer is one element so that its keys cannot collide with the
+ * marks drawn beside it, and so an end-to-end test finds the outlines of a
+ * cell the same way it finds those of the map.
+ * @param grid - Everything the grid worked out once, including the measured groups.
+ * @param row - Which row the cell sits in, which is the axis up its side.
+ * @param column - Which column, which is the axis along its foot.
+ * @param frame - The rectangle and the two scales the cell was given.
+ * @returns The layer, or `null` when the groups were never measured — no groups were named, or the cells came out too small for a readable outline.
+ */
+export function scatterMatrixOutlines(
+  grid: ScatterMatrixGrid,
+  row: number,
+  column: number,
+  frame: ChartFrameRender,
+): ReactElement | null {
+  const { groupSpread, colors } = grid;
+  if (groupSpread === undefined || colors === undefined) return null;
+
+  const outlines: ReactElement[] = [];
+  for (let group = 0; group < groupSpread.groups; group++) {
+    const color = colors[group];
+    if (color === undefined) continue;
+    const measured = scatterPairEllipse(groupSpread, group, column, row);
+    if (measured === null) continue;
+    outlines.push(
+      scatterOutlineShape(group, measured, frame.x, frame.y, { color }),
+    );
+  }
+  if (outlines.length === 0) return null;
+  return <g data-layer="ellipses">{outlines}</g>;
+}

package/src/scatter/ui/scatterMatrixProps.ts

@@ -0,0 +1,103 @@
+/**
+ * What a caller hands a {@link ScatterMatrix}.
+ *
+ * The types live beside the component rather than inside it because the grid's
+ * own file would otherwise be mostly prose: a reader looking for what the
+ * component draws should not have to scroll past twenty documented options to
+ * find it.
+ */
+
+import type { ReactNode } from 'react';
+
+import type { MatrixLike } from '../../chart/core/matrix.ts';
+import type { EllipseSize } from '../core/confidenceEllipse.ts';
+
+import type { ScatterGroup } from './scatterPlotProps.ts';
+
+/** One axis of a {@link ScatterMatrix}. */
+export interface ScatterMatrixAxis {
+  /** What it is called, e.g. `PC 1`. */
+  name: string;
+  /**
+   * The share of the differences it accounts for, between 0 and 1.
+   * @default undefined — nothing is written after the name
+   */
+  share?: number;
+}
+
+/** What {@link ScatterMatrix} needs. */
+export interface ScatterMatrixProps {
+  /** The coordinates: one row per sample, one column per axis. */
+  scores: MatrixLike;
+  /** The axes, in order; only the first `count` are laid out. */
+  axes: readonly ScatterMatrixAxis[];
+  /**
+   * How many axes to lay out, up to six. Reduced on its own when the container
+   * is too narrow for readable cells, and the reduction is shown in the
+   * options rather than applied silently.
+   * @default the smaller of six and the number of axes
+   */
+  count?: number;
+  /** Available width, in pixels, from `useContainerSize`. */
+  width: number;
+  /**
+   * Which group each row belongs to, for the colours, for the outlines and for
+   * the strip along the diagonal.
+   * @default undefined — every row is drawn in one colour
+   */
+  groupOf?: ArrayLike<number>;
+  /**
+   * The groups, in the order they are coloured.
+   * @default undefined
+   */
+  groups?: readonly ScatterGroup[];
+  /**
+   * How large the outline drawn around each group in each cell is, or `null`
+   * for none. Nothing is outlined unless the groups are named.
+   * @default { kind: 'coverage', probability: 0.95 }
+   */
+  ellipse?: EllipseSize | null;
+  /**
+   * How many rows a group needs before it is outlined at all. Below it the
+   * shape says more about the sample than about the group.
+   * @default 3
+   */
+  ellipseMinimumPoints?: number;
+  /**
+   * The rows selected elsewhere; the rest are drawn faint.
+   * @default undefined — every row is drawn at full strength
+   */
+  selected?: readonly number[];
+  /**
+   * Called with the axis pair a cell stands for, so the map tab can take it
+   * over. A diagonal cell offers itself against its neighbour, which is what
+   * the reader meant by clicking it.
+   * @default undefined — the cells are not clickable
+   */
+  onSelectPair?: (xAxis: number, yAxis: number) => void;
+  /**
+   * Called with the row under the pointer, or `-1`.
+   * @default undefined
+   */
+  onHoverChange?: (index: number) => void;
+  /**
+   * How many bins the diagonal's distribution is cut into.
+   * @default 24
+   */
+  bins?: number;
+  /**
+   * Radius of a dot, in pixels.
+   * @default 2
+   */
+  pointRadius?: number;
+  /**
+   * What floats over the grid.
+   * @default undefined
+   */
+  overlay?: ReactNode;
+  /**
+   * Value of the `data-testid` attribute of the wrapper.
+   * @default undefined
+   */
+  testId?: string;
+}

package/src/scatter/ui/scatterOutlineShape.tsx

@@ -0,0 +1,169 @@
+/**
+ * How one group outline is drawn, wherever it is drawn.
+ *
+ * The map and the pair grid measure their groups differently — the map over
+ * two columns of points, the grid over one shared block of covariances — but a
+ * reader moving between the two tabs has to see the same picture, so the one
+ * decision about fill and the collinear case lives here rather than once per
+ * figure.
+ */
+
+import type { ReactElement } from 'react';
+
+import type { ChartScale } from '../../chart/core/chartScale.ts';
+import type { ConfidenceEllipse } from '../core/confidenceEllipse.ts';
+import type { PixelEllipse } from '../core/ellipseProjection.ts';
+import { ellipsePolygon, projectEllipse } from '../core/ellipseProjection.ts';
+
+/** How one outline is inked. */
+export interface ScatterOutlineInk {
+  /** The group's own colour, which the region is filled with. */
+  color: string;
+  /**
+   * How strongly the whole outline is drawn, which is what a muted legend
+   * entry turns down.
+   * @default undefined — the outline is drawn at full strength
+   */
+  opacity?: number;
+  /**
+   * How solid the region is; `0` draws nothing at all, since the fill is the
+   * whole shape.
+   * @default SCATTER_OUTLINE_FILL_OPACITY
+   */
+  fillOpacity?: number;
+}
+
+/**
+ * One group outline, mapped onto a plot and ready to be drawn.
+ *
+ * The region is fill only, with no boundary drawn: a stroked edge reads as a
+ * measured limit the ellipse never claims to be, and it competes with the dots
+ * the reader is there to count. The fill is deliberately faint for the same
+ * reason it is the whole shape — fills stack where groups overlap, and a tint
+ * heavy enough to see on its own turns two overlapping species into a third
+ * colour the reader then looks for in the legend.
+ *
+ * A group whose points lie on a straight line is drawn as the segment it
+ * actually is, and that one is stroked, since a shape of no height fills to
+ * nothing: that a group is perfectly correlated in these two axes is a
+ * finding, and dropping its outline would hide it.
+ * @param group - Which group it belongs to, for the key and the attribute the tests read.
+ * @param ellipse - The outline in data units, from `confidenceEllipse` or `scatterPairEllipse`.
+ * @param scaleX - Data to pixels, horizontally.
+ * @param scaleY - Data to pixels, vertically; its `factor` is negative.
+ * @param ink - See {@link ScatterOutlineInk}.
+ * @returns The element, keyed by group.
+ */
+export function scatterOutlineShape(
+  group: number,
+  ellipse: ConfidenceEllipse,
+  scaleX: ChartScale,
+  scaleY: ChartScale,
+  ink: ScatterOutlineInk,
+): ReactElement {
+  const drawn = projectEllipse(ellipse, scaleX, scaleY);
+  return drawn === null
+    ? sampledOutline(group, ellipse, scaleX, scaleY, ink)
+    : projectedOutline(group, drawn, ink);
+}
+
+/**
+ * How solid a group's region is.
+ *
+ * Three iris species overlap in the leading components, and fills compound
+ * where they do: at 0.2 two of them stack to 0.36 and read as a fourth group
+ * with a colour of its own, while at 0.1 they stack to 0.19 — denser than
+ * either, plainly still the same family. Below about 0.06 the region stops
+ * being visible against a white ground at all, which is the other failure.
+ * A caller drawing ten groups should turn it down.
+ */
+export const SCATTER_OUTLINE_FILL_OPACITY = 0.1;
+
+/** Firm enough to read over a cloud of its own colour. */
+const SEGMENT_STROKE_WIDTH = 1.5;
+
+const HALF_TURN_DEGREES = 180;
+
+function projectedOutline(
+  group: number,
+  shape: PixelEllipse,
+  ink: ScatterOutlineInk,
+): ReactElement {
+  const { cx, cy, rx, ry, angleDegrees } = shape;
+  const shared = { 'data-group': group, opacity: ink.opacity };
+  if (ry > 0) {
+    return (
+      <ellipse
+        key={group}
+        {...shared}
+        {...fillOf(ink)}
+        cx={round(cx)}
+        cy={round(cy)}
+        rx={round(rx)}
+        ry={round(ry)}
+        transform={`rotate(${round(angleDegrees)} ${round(cx)} ${round(cy)})`}
+      />
+    );
+  }
+  const radians = (angleDegrees * Math.PI) / HALF_TURN_DEGREES;
+  const alongX = rx * Math.cos(radians);
+  const alongY = rx * Math.sin(radians);
+  return (
+    <line
+      key={group}
+      {...shared}
+      fill="none"
+      stroke={ink.color}
+      strokeWidth={SEGMENT_STROKE_WIDTH}
+      x1={round(cx - alongX)}
+      y1={round(cy - alongY)}
+      x2={round(cx + alongX)}
+      y2={round(cy + alongY)}
+    />
+  );
+}
+
+/*
+ * The outline sampled and mapped point by point, for the one case the exact
+ * projection gives up on: coordinates large enough that squaring the mapping
+ * overflows. Mapping each point stays linear and so survives what squaring
+ * does not.
+ */
+function sampledOutline(
+  group: number,
+  ellipse: ConfidenceEllipse,
+  scaleX: ChartScale,
+  scaleY: ChartScale,
+  ink: ScatterOutlineInk,
+): ReactElement {
+  const outline = ellipsePolygon(ellipse);
+  let path = '';
+  for (let index = 0; index < outline.length; index++) {
+    const point = outline[index];
+    if (point === undefined) continue;
+    const px = round(scaleX.offset + point.x * scaleX.factor);
+    const py = round(scaleY.offset + point.y * scaleY.factor);
+    path += `${index === 0 ? 'M' : 'L'}${px} ${py}`;
+  }
+  return (
+    <path
+      key={group}
+      data-group={group}
+      d={path === '' ? path : `${path}Z`}
+      opacity={ink.opacity}
+      {...fillOf(ink)}
+    />
+  );
+}
+
+/* A fill of no opacity is left off the element rather than painted invisibly. */
+function fillOf(ink: ScatterOutlineInk): {
+  fill: string;
+  fillOpacity?: number;
+} {
+  const share = ink.fillOpacity ?? SCATTER_OUTLINE_FILL_OPACITY;
+  if (!(share > 0)) return { fill: 'none' };
+  return { fill: ink.color, fillOpacity: share };
+}
+
+const round = (value: number): number => Math.round(value * 100) / 100;