react-cheminfo 0.8.0 → 0.10.0

package/src/projection/ui/projectionMapChrome.ts

@@ -0,0 +1,207 @@
+/**
+ * The words one map writes around its own picture: the legend that says what
+ * colour and shape mean on it, and the sentences under it.
+ *
+ * They are built here rather than in the component so that what the figure
+ * claims can be read, and tested, without rendering a chart — which is the
+ * only way a promise like "this outline covers 95 % of the group" stays
+ * honest as the controls around it change.
+ */
+
+import type { OverlayLegendEntry } from '../../overlay/ui/OverlayLegend.tsx';
+import type { EllipseSize } from '../../scatter/core/confidenceEllipse.ts';
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
+import { fillCopy } from '../core/projectionCopy.ts';
+import type { ProjectionMarker } from '../core/projectionResult.ts';
+import type { ResolvedProjectionGroups } from '../core/projectionSamples.ts';
+
+import { ellipseCoverageText } from './projectionEllipse.ts';
+import { UNGROUPED_INK } from './projectionMapModel.ts';
+
+/** What the map's chrome is built from. */
+export interface ProjectionMapChromeInput {
+  /** The words the map writes, already merged over the defaults. */
+  copy: ProjectionCopy;
+  /** The groups as the map colours them. */
+  groups: ResolvedProjectionGroups;
+  /** Whether colour stands for the group at all. */
+  colored: boolean;
+  /** How large the group outlines are, or `null` for none. */
+  ellipse: EllipseSize | null;
+  /** How many samples a group needs before it is outlined at all. */
+  minimumPoints: number;
+  /** Whether each group's average is marked with a cross. */
+  showGroupMeans: boolean;
+  /** The reference points drawn over the cloud. */
+  markers: readonly ProjectionMarker[];
+  /** How many leading rows the model was built from. */
+  fittedCount: number;
+  /** How many rows there are in all. */
+  total: number;
+}
+
+/** The legend and the standing caption of one map. */
+export interface ProjectionMapChrome {
+  /**
+   * The sentence over the legend, naming what colour and shape mean here.
+   *
+   * It is one short clause, because the legend floats on the picture and its
+   * title is written on a single line: everything else the encoding needs
+   * explaining with — how much of a group an outline holds — is in the
+   * caption, which the reader opens rather than reads over the data.
+   */
+  title: string;
+  /** The legend's entries, in the order they are written. */
+  entries: OverlayLegendEntry[];
+  /** The paragraph the map's question mark hands back. */
+  caption: string;
+}
+
+/**
+ * The legend and the caption of one map.
+ *
+ * The legend's title always names the encoding, because a reader who cannot
+ * say what the colour stands for carries the wrong meaning from one tab to the
+ * next. And every mark the figure can draw that is not a plain filled dot — a
+ * group average, a cluster centre, a sample the model never saw — earns an
+ * entry, because a mark nobody named is a mark the reader counts as one more
+ * group.
+ * @param input - See {@link ProjectionMapChromeInput}.
+ * @returns The legend's title and entries, and the standing caption.
+ */
+export function projectionMapChrome(
+  input: ProjectionMapChromeInput,
+): ProjectionMapChrome {
+  const { copy, groups, colored, ellipse, showGroupMeans, markers } = input;
+  const { minimumPoints, fittedCount, total } = input;
+  const entries: OverlayLegendEntry[] = [];
+  const skipped: string[] = [];
+
+  if (colored) {
+    for (const entry of groups.entries) {
+      const thin = ellipse !== null && entry.count < minimumPoints;
+      if (thin) skipped.push(entry.label);
+      entries.push({
+        id: entry.id,
+        label: entry.label,
+        color: entry.color,
+        shape: 'dot',
+        count: entry.count,
+        note: thin ? NOT_OUTLINED_NOTE : undefined,
+      });
+    }
+    if (showGroupMeans) {
+      entries.push({
+        id: 'group-average',
+        label: copy.help.showGroupMeans.title,
+        color: UNGROUPED_INK,
+        shape: 'cross',
+      });
+    }
+  }
+  appendMarkerEntries(entries, markers, groups);
+
+  const hollow = fittedCount < total;
+  if (hollow) {
+    entries.push({
+      id: 'projected',
+      label: HOLLOW_LEGEND_LABEL,
+      color: 'var(--text-muted)',
+      shape: 'ring',
+    });
+  }
+
+  return {
+    title: legendTitle(copy, groups, colored),
+    entries,
+    caption: captionFor(copy, groups, colored, ellipse, skipped, hollow),
+  };
+}
+
+/**
+ * The sentence reporting what a gesture picked out.
+ * @param copy - The words the map writes.
+ * @param count - How many samples are selected.
+ * @param total - How many there are in all.
+ * @returns The sentence.
+ */
+export function projectionSelectionSentence(
+  copy: ProjectionCopy,
+  count: number,
+  total: number,
+): string {
+  if (count === 0) return copy.sentence.selectionNone;
+  return fillCopy(copy.sentence.selection, {
+    count: count.toLocaleString(),
+    total: total.toLocaleString(),
+  });
+}
+
+const NOT_OUTLINED_NOTE = 'Not outlined: too few samples.';
+const HOLLOW_LEGEND_LABEL = 'Hollow = added after the map was built';
+const HOLLOW_SENTENCE =
+  'The hollow dots were placed on the finished map afterwards, so one of them landing far out is a finding rather than a fault.';
+
+/**
+ * What the legend says when colour stands for nothing.
+ *
+ * The entries left are all shape, so the title names the shape channel: a
+ * legend naming no encoding at all is the one fault this title exists to
+ * prevent, and it is not fixed by leaving the title out.
+ */
+const SHAPE_LEGEND_TITLE = 'Shape = what each mark is.';
+
+function legendTitle(
+  copy: ProjectionCopy,
+  groups: ResolvedProjectionGroups,
+  colored: boolean,
+): string {
+  if (!colored || groups.entries.length === 0) return SHAPE_LEGEND_TITLE;
+  return fillCopy(copy.legend.mapNoEllipse, {
+    groups: groups.label.toLowerCase(),
+  });
+}
+
+function captionFor(
+  copy: ProjectionCopy,
+  groups: ResolvedProjectionGroups,
+  colored: boolean,
+  ellipse: EllipseSize | null,
+  skipped: readonly string[],
+  hollow: boolean,
+): string {
+  let sentence = copy.intro.map;
+  // What an outline actually holds is the one claim the figure makes that the
+  // reader cannot check by looking, so it is said in full here rather than
+  // squeezed onto the key floating over the dots.
+  if (colored && ellipse !== null) {
+    sentence += ` ${fillCopy(copy.legend.map, {
+      groups: groups.label.toLowerCase(),
+      coverage: ellipseCoverageText(ellipse),
+    })}`;
+  }
+  if (skipped.length > 0) {
+    const names = skipped.join(', ');
+    sentence += ` ${fillCopy(copy.sentence.skippedGroups, { names })}`;
+  }
+  if (hollow) sentence += ` ${HOLLOW_SENTENCE}`;
+  return sentence;
+}
+
+function appendMarkerEntries(
+  entries: OverlayLegendEntry[],
+  markers: readonly ProjectionMarker[],
+  groups: ResolvedProjectionGroups,
+): void {
+  const named = new Set<string>();
+  for (const marker of markers) {
+    if (named.has(marker.label)) continue;
+    named.add(marker.label);
+    entries.push({
+      id: `marker-${marker.label}`,
+      label: marker.label,
+      color: groups.entries[marker.group ?? -1]?.color ?? UNGROUPED_INK,
+      shape: marker.shape ?? 'cross',
+    });
+  }
+}

package/src/projection/ui/projectionMapModel.ts

@@ -0,0 +1,253 @@
+/**
+ * Where a map's samples land, and which corner of the picture is free.
+ *
+ * It sits beside the component rather than inside it because a plot has to
+ * know where its dots fall before it can decide where its controls may sit,
+ * and because all of it is arithmetic that can be checked without rendering
+ * anything. The words the same tab writes are in `projectionMapChrome.ts`.
+ */
+
+import {
+  chartColumnExtent,
+  chartPadExtent,
+} from '../../chart/core/chartExtent.ts';
+import { chartAxisTitle } from '../../chart/core/chartLabels.ts';
+import type { ChartViewport } from '../../chart/core/chartViewport.ts';
+import type { MatrixLike } from '../../chart/core/matrix.ts';
+import { emptiestCorner } from '../../overlay/core/emptiestCorner.ts';
+import type { OverlayCorner } from '../../overlay/core/overlayPlacement.ts';
+import type {
+  ScatterGroup,
+  ScatterMarker,
+} from '../../scatter/ui/ScatterPlot.tsx';
+import type {
+  ProjectionMarker,
+  ProjectionResult,
+} from '../core/projectionResult.ts';
+import type { ResolvedProjectionGroups } from '../core/projectionSamples.ts';
+
+/** Where every sample sits on the map, in the embedding's own units. */
+export interface ProjectionMapCloud {
+  /** Horizontal coordinate of every sample, in row order. */
+  x: Float64Array;
+  /** Vertical coordinate of every sample, in the same order. */
+  y: Float64Array;
+}
+
+/**
+ * A dot, a marker or an average that stands for no group at all.
+ *
+ * It has to be the one ink on the map that names nothing, or a reader counts
+ * it as one more group.
+ */
+export const UNGROUPED_INK = 'var(--text-faint)';
+
+/**
+ * How many samples a group needs before it is outlined at all. Below it the
+ * shape of the outline says more about the one sample than about the group.
+ */
+export const MINIMUM_OUTLINE_POINTS = 3;
+
+/**
+ * The two score columns the map draws, read out of the matrix once.
+ *
+ * The columns are copied because a plot takes two arrays and a matrix cannot
+ * hand out one of its columns. It is the only copy the tab makes: every range,
+ * every outline and every hit test afterwards reads the data where it stands.
+ * @param scores - Where every sample landed.
+ * @param xColumn - Which column runs left to right.
+ * @param yColumn - Which one runs bottom to top.
+ * @returns The two columns.
+ */
+export function projectionMapCloud(
+  scores: MatrixLike,
+  xColumn: number,
+  yColumn: number,
+): ProjectionMapCloud {
+  const count = Math.max(0, scores.rows);
+  const x = new Float64Array(count);
+  const y = new Float64Array(count);
+  for (let row = 0; row < count; row++) {
+    x[row] = scores.get(row, xColumn);
+    y[row] = scores.get(row, yColumn);
+  }
+  return { x, y };
+}
+
+/**
+ * The range one axis covers, over every sample or over a chosen few.
+ *
+ * Handing it a selection is what "zoom to selection" is: the same frame drawn
+ * around fewer rows, rather than a second transform layered under the first.
+ * @param scores - Where every sample landed.
+ * @param column - Which column the axis draws.
+ * @param rows - The rows to cover; an empty or absent list covers them all.
+ * @returns The range, as a frame takes it.
+ */
+export function projectionMapDomain(
+  scores: MatrixLike,
+  column: number,
+  rows?: readonly number[],
+): readonly [number, number] {
+  const covered = rows === undefined || rows.length === 0 ? undefined : rows;
+  const extent = chartColumnExtent(scores, column, { indices: covered });
+  return [extent.min, extent.max];
+}
+
+/**
+ * The frame drawn around a chosen few samples, which is what "zoom to
+ * selection" hands the map.
+ *
+ * Room is left around them: a frame pulled tight on the outermost dots puts
+ * half of them on the edge of the picture, where a dot is hard to read and its
+ * name has nowhere to go.
+ * @param scores - Where every sample landed.
+ * @param xColumn - Which column runs left to right.
+ * @param yColumn - Which one runs bottom to top.
+ * @param rows - The rows to frame; an empty or absent list frames them all.
+ * @param padding - Share added at each end. Defaults to {@link SELECTION_ROOM}.
+ * @returns The frame, in the embedding's own units.
+ */
+export function projectionMapViewport(
+  scores: MatrixLike,
+  xColumn: number,
+  yColumn: number,
+  rows?: readonly number[],
+  padding = SELECTION_ROOM,
+): ChartViewport {
+  return {
+    x: withRoom(projectionMapDomain(scores, xColumn, rows), padding),
+    y: withRoom(projectionMapDomain(scores, yColumn, rows), padding),
+  };
+}
+
+/**
+ * The corner of the map with the fewest dots under it.
+ *
+ * All four are offered. The chrome that asks is laid out inside the plot
+ * rectangle rather than over the figure's box, so no corner of it costs the
+ * reader an axis label, and the only thing left to weigh is how many samples
+ * each one would cover.
+ * @param cloud - Where every sample sits, in data units.
+ * @param xDomain - The range the horizontal axis covers.
+ * @param yDomain - The range the vertical axis covers.
+ * @param width - Width of the plot rectangle, in pixels.
+ * @param height - Its height.
+ * @returns The corner the card sits in.
+ */
+export function projectionMapCorner(
+  cloud: ProjectionMapCloud,
+  xDomain: readonly [number, number],
+  yDomain: readonly [number, number],
+  width: number,
+  height: number,
+): OverlayCorner {
+  return emptiestCorner(
+    placeAlong(cloud.x, xDomain, width, false),
+    placeAlong(cloud.y, yDomain, height, true),
+    { width, height, cardWidth: CARD_WIDTH, cardHeight: CARD_HEIGHT },
+  );
+}
+
+/**
+ * The reference points of a result, placed on the two axes the map draws.
+ * @param markers - The reference points, in the embedding's own units.
+ * @param groups - The groups, whose colours the markers borrow.
+ * @param xColumn - Which axis runs left to right.
+ * @param yColumn - Which one runs bottom to top.
+ * @returns The markers a plot can draw; one standing off the two axes drawn is left out.
+ */
+export function projectionMapMarkers(
+  markers: readonly ProjectionMarker[],
+  groups: ResolvedProjectionGroups,
+  xColumn: number,
+  yColumn: number,
+): ScatterMarker[] {
+  const placed: ScatterMarker[] = [];
+  for (const marker of markers) {
+    const x = marker.position[xColumn];
+    const y = marker.position[yColumn];
+    if (x === undefined || y === undefined) continue;
+    placed.push({
+      label: marker.label,
+      x,
+      y,
+      color: groups.entries[marker.group ?? -1]?.color ?? UNGROUPED_INK,
+      shape: marker.shape ?? 'cross',
+    });
+  }
+  return placed;
+}
+
+/**
+ * The groups in the shape a plot colours by.
+ * @param groups - The groups as the viewer resolved them.
+ * @returns One entry per group, in the order they are coloured.
+ */
+export function projectionScatterGroups(
+  groups: ResolvedProjectionGroups,
+): ScatterGroup[] {
+  const plotted: ScatterGroup[] = [];
+  for (const entry of groups.entries) {
+    plotted.push({ id: entry.id, label: entry.label, color: entry.color });
+  }
+  return plotted;
+}
+
+/**
+ * What one axis of the map is called.
+ *
+ * Built by `chartAxisTitle` rather than assembled here, so a component reads
+ * `PC1 — 73.0 %` in exactly the form every other figure in the package writes
+ * it, and a method that publishes no share gets a bare name instead of a
+ * percentage nobody can stand behind.
+ * @param result - The reduced space being drawn.
+ * @param index - Which axis.
+ * @returns The title, or `undefined` for an axis the result does not have.
+ */
+export function projectionAxisTitle(
+  result: ProjectionResult,
+  index: number,
+): string | undefined {
+  const axis = result.axes[index];
+  if (axis === undefined) return undefined;
+  return chartAxisTitle(axis.name, { share: axis.share });
+}
+
+function withRoom(
+  domain: readonly [number, number],
+  padding: number,
+): readonly [number, number] {
+  const extent = chartPadExtent({ min: domain[0], max: domain[1] }, padding);
+  return [extent.min, extent.max];
+}
+
+function placeAlong(
+  values: Float64Array,
+  domain: readonly [number, number],
+  size: number,
+  flip: boolean,
+): Float64Array {
+  const span = domain[1] - domain[0];
+  const factor = span === 0 ? 0 : size / span;
+  const pixels = new Float64Array(values.length);
+  for (let index = 0; index < values.length; index++) {
+    const along = ((values[index] ?? Number.NaN) - domain[0]) * factor;
+    pixels[index] = flip ? size - along : along;
+  }
+  return pixels;
+}
+
+/**
+ * How much of the plot the floating key is expected to cover.
+ *
+ * It is an estimate on purpose — the card has not been laid out when the
+ * corner is chosen — and it is the compact key's size rather than the roomier
+ * card the overlay domain assumes: a corner counted as three species wide
+ * would call a corner busy that the key never reaches.
+ */
+const CARD_WIDTH = 170;
+const CARD_HEIGHT = 84;
+
+/** Room left around a framed selection, as a share of its own span. */
+const SELECTION_ROOM = 0.1;

package/src/projection/ui/projectionMapView.ts

@@ -0,0 +1,188 @@
+/**
+ * What the map is showing that is not an option: the frame it is drawn in, the
+ * sentence reporting the last gesture, and the words its key and its question
+ * mark are built from.
+ *
+ * All of it lives above the tab rather than inside it because the bar spanning
+ * the figure is the viewer's, not the map's: "Zoom to selection" is pressed in
+ * the bar and changes the frame the map draws, and "Clear selection" has to
+ * report itself in exactly the words a released lasso does.
+ */
+
+import { useCallback, useMemo, useState } from 'react';
+
+import type { ChartViewport } from '../../chart/core/chartViewport.ts';
+import { chartClampViewport } from '../../chart/core/chartViewport.ts';
+import type { SelectionChange } from '../../scatter/ui/useScatterSelection.ts';
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
+import type { ProjectionOptions } from '../core/projectionOptions.ts';
+import type {
+  ProjectionMarker,
+  ProjectionResult,
+} from '../core/projectionResult.ts';
+import type { ResolvedProjectionGroups } from '../core/projectionSamples.ts';
+
+import type { SelectionReport } from './ProjectionMapCaption.tsx';
+import type { ProjectionMapChrome } from './projectionMapChrome.ts';
+import {
+  projectionMapChrome,
+  projectionSelectionSentence,
+} from './projectionMapChrome.ts';
+import {
+  MINIMUM_OUTLINE_POINTS,
+  projectionMapDomain,
+  projectionMapViewport,
+} from './projectionMapModel.ts';
+
+/** What {@link useProjectionMapView} needs. */
+export interface ProjectionMapViewInput {
+  /** What the run produced, whatever produced it. */
+  result: ProjectionResult;
+  /** The words the viewer writes, already merged over the defaults. */
+  copy: ProjectionCopy;
+  /** The groups as every figure of this viewer draws them. */
+  groups: ResolvedProjectionGroups;
+  /** Every option, already made safe against the result. */
+  options: ProjectionOptions;
+  /** The selected rows, as indices into the score matrix. */
+  selected: readonly number[];
+  /** Settle a selection, whoever caused it. */
+  onSettle: (change: SelectionChange) => void;
+}
+
+/** The map's own state, and the ways a gesture or a button changes it. */
+export interface ProjectionMapView {
+  /** The key's title, the key's entries, and the paragraph behind the `?`. */
+  chrome: ProjectionMapChrome;
+  /** The frame the map is drawn in, or `null` when it is drawn around every sample. */
+  viewport: ChartViewport | null;
+  /** Draw the map in another frame, which is what the wheel does. */
+  setViewport: (viewport: ChartViewport | null) => void;
+  /** What the last gesture picked out, or `null` before there was one. */
+  report: SelectionReport | null;
+  /** Settle a selection and report it in the same breath. */
+  settle: (change: SelectionChange) => void;
+  /** Draw the frame around the selected samples. */
+  zoomToSelection: () => void;
+  /** Put the frame back around every sample. */
+  resetView: () => void;
+  /** Empty the selection. */
+  clearSelection: () => void;
+}
+
+/**
+ * The map's frame, its last report, and the words around it.
+ * @param input - See {@link ProjectionMapViewInput}.
+ * @returns See {@link ProjectionMapView}.
+ */
+export function useProjectionMapView(
+  input: ProjectionMapViewInput,
+): ProjectionMapView {
+  const { result, copy, groups, options, selected, onSettle } = input;
+  const { scores, fittedCount, markers } = result;
+  const { colorBy, ellipse, showGroupMeans, xAxis, yAxis } = options;
+
+  const [zoom, setZoom] = useState<AxisFrame | null>(null);
+  const [report, setReport] = useState<SelectionReport | null>(null);
+
+  // A frame belongs to the pair of axes it was drawn on. Carrying it onto
+  // another pair would show the reader a corner of a picture they never
+  // framed, so changing the axes shows the whole of the new one instead.
+  const viewport =
+    zoom !== null && zoom.xAxis === xAxis && zoom.yAxis === yAxis
+      ? zoom.viewport
+      : null;
+
+  const setViewport = useCallback(
+    (next: ChartViewport | null) => {
+      setZoom(next === null ? null : { xAxis, yAxis, viewport: next });
+    },
+    [xAxis, yAxis],
+  );
+
+  const zoomToSelection = useCallback(() => {
+    if (selected.length === 0) return;
+    setViewport(
+      chartClampViewport(
+        {
+          x: projectionMapDomain(scores, xAxis),
+          y: projectionMapDomain(scores, yAxis),
+        },
+        projectionMapViewport(scores, xAxis, yAxis, selected),
+      ),
+    );
+  }, [scores, selected, setViewport, xAxis, yAxis]);
+
+  const resetView = useCallback(() => {
+    setViewport(null);
+  }, [setViewport]);
+
+  const colored = colorBy === 'group' && groups.entries.length > 0;
+  const chrome = useMemo(
+    () =>
+      projectionMapChrome({
+        copy,
+        groups,
+        colored,
+        ellipse: colored ? ellipse : null,
+        minimumPoints: MINIMUM_OUTLINE_POINTS,
+        showGroupMeans,
+        markers: markers ?? NO_MARKERS,
+        fittedCount: fittedCount ?? scores.rows,
+        total: scores.rows,
+      }),
+    [
+      copy,
+      groups,
+      colored,
+      ellipse,
+      showGroupMeans,
+      markers,
+      fittedCount,
+      scores,
+    ],
+  );
+
+  const settle = useCallback(
+    (change: SelectionChange) => {
+      setReport((previous) => ({
+        text: projectionSelectionSentence(
+          copy,
+          change.indices.length,
+          scores.rows,
+        ),
+        at: (previous?.at ?? 0) + 1,
+      }));
+      onSettle(change);
+    },
+    [copy, onSettle, scores],
+  );
+
+  const clearSelection = useCallback(() => {
+    settle({ indices: NO_SELECTION, mode: 'replace', source: 'clear' });
+  }, [settle]);
+
+  return {
+    chrome,
+    viewport,
+    setViewport,
+    report,
+    settle,
+    zoomToSelection,
+    resetView,
+    clearSelection,
+  };
+}
+
+/** A frame, and the pair of axes it was drawn on. */
+interface AxisFrame {
+  /** Which column ran left to right when the reader framed it. */
+  xAxis: number;
+  /** Which one ran bottom to top. */
+  yAxis: number;
+  /** The frame itself. */
+  viewport: ChartViewport;
+}
+
+const NO_SELECTION: readonly number[] = [];
+const NO_MARKERS: readonly ProjectionMarker[] = [];

package/src/projection/ui/projectionPairsCeiling.ts

@@ -0,0 +1,45 @@
+/**
+ * How many components the pair grid may be asked to lay out.
+ *
+ * The bar and the panel behind the cog both offer the count, and a ceiling
+ * worked out twice is a ceiling that ends up different in the two places — so
+ * the reader would find the same stepper dead on one and live on the other.
+ * It sits apart from both of them because it is arithmetic rather than a
+ * control, and a module that exports a component exports nothing else.
+ */
+
+import {
+  SCATTER_MATRIX_MOST_AXES,
+  scatterMatrixAxesThatFit,
+} from '../../scatter/ui/scatterMatrixLayout.ts';
+
+/** How few and how many components the grid may be asked to lay out. */
+export interface ProjectionPairsCeiling {
+  /** The fewest, which is the smallest grid worth drawing. */
+  min: number;
+  /** The most, once the run and the width have both had their say. */
+  max: number;
+}
+
+/**
+ * The range the grid's count is held inside.
+ *
+ * Three things cap it at once: six, which is where thirty-six cells stop being
+ * worth the room; what the run produced; and what the width can draw at a
+ * readable size. Pressing past any of them is dead rather than silently
+ * ignored, so the number in the bar is the number on the screen.
+ * @param axisCount - How many components the run produced.
+ * @param width - Width of the figure, in pixels; `0` before it is measured.
+ * @returns See {@link ProjectionPairsCeiling}.
+ */
+export function projectionPairsCeiling(
+  axisCount: number,
+  width: number,
+): ProjectionPairsCeiling {
+  const wanted = Math.min(SCATTER_MATRIX_MOST_AXES, Math.max(0, axisCount));
+  const fits = width > 0 ? scatterMatrixAxesThatFit(width, wanted) : wanted;
+  return { min: SMALLEST_GRID, max: Math.max(SMALLEST_GRID, fits) };
+}
+
+/** The fewest components a grid is worth drawing for. */
+const SMALLEST_GRID = 2;