react-cheminfo 0.10.0 → 0.12.0

package/src/projection/core/projectionStrings.ts

@@ -58,6 +58,14 @@ export const PROJECTION_HELP: Record<ProjectionOptionId, ProjectionHelp> = {
     title: 'Up',
     body: 'Which pattern of difference runs bottom to top.',
   },
+  zAxis: {
+    title: 'Into',
+    body: 'Which pattern of difference runs away from you, into the box. Only the cloud draws it; the map and the pair grid never read it.',
+  },
+  cloudGesture: {
+    title: 'Drag does',
+    body: 'Turning the box and drawing a lasso both want a plain drag, so you say which one it is. Inside a lasso, Shift still adds and Alt still takes away.',
+  },
   colorBy: {
     title: 'Colour by',
     body: 'What a dot’s colour stands for. Colouring by nothing is useful when the groups are what you are trying to find rather than what you already know.',
@@ -137,6 +145,7 @@ export const PROJECTION_HELP: Record<ProjectionOptionId, ProjectionHelp> = {
  */
 export const PROJECTION_SHORT_TAB: Record<ProjectionTab, string> = {
   map: 'Map',
+  space: '3D',
   pairs: 'Pairs',
   variables: 'Differs',
   shares: 'Explains',
@@ -155,6 +164,8 @@ export interface ProjectionBarWords {
     colorBy: string;
     /** In front of how much of a group its outline covers. */
     ellipse: string;
+    /** In front of what a drag over the cloud does. */
+    cloudGesture: string;
     /** In front of how many components the pair grid lays out. */
     pairCount: string;
     /** In front of what the "what differs" panels are drawing. */
@@ -197,6 +208,7 @@ export const PROJECTION_BAR_WORDS: ProjectionBarWords = {
   key: {
     colorBy: 'Colour',
     ellipse: 'Outlines',
+    cloudGesture: 'Drag',
     pairCount: 'Components',
     variablesView: 'Show',
     shareTarget: 'Target',
@@ -215,51 +227,3 @@ export const PROJECTION_BAR_WORDS: ProjectionBarWords = {
     sample: 'Selected sample',
   },
 };
-
-/**
- * What each setting is called in the fixed name column of a settings panel.
- *
- * The column is eight characters wide and a name in it never wraps, so a name
- * written in full overlaps the control it names: `One scale for all` runs into
- * its own switch. Nothing is lost by shortening it, because the sentence the
- * name gives up is the one the help behind the name still says in full — which
- * is the whole point of hanging the explanation off the words.
- */
-export const PROJECTION_PANEL_NAME: Record<ProjectionOptionId, string> = {
-  xAxis: 'Across',
-  yAxis: 'Up',
-  colorBy: 'Colour by',
-  ellipse: 'Outlines',
-  pointRadius: 'Dot size',
-  showGroupMeans: 'Averages',
-  showGroupLabels: 'Category',
-  showIds: 'Sample ID',
-  pairCount: 'Components',
-  variablesView: 'Show',
-  variablesCount: 'Panels',
-  sharedScale: 'One scale',
-  showAverage: 'Average',
-  spread: 'How far',
-  variableOrder: 'Bar order',
-  shareTarget: 'Target',
-  selectMode: 'Drag does',
-};
-
-/**
- * What each cluster of a settings panel is called, written over it in small
- * capitals.
- *
- * They name the question a cluster answers rather than the settings inside it:
- * a heading that repeats the names under it has told the reader nothing and
- * has spent a line of the panel saying it.
- */
-export const PROJECTION_PANEL_SECTION = {
-  /** Which pattern of difference each direction of the map stands for. */
-  axes: 'Axes',
-  /** How the marks themselves are drawn. */
-  drawing: 'Drawing',
-  /** What a drag over the figure does to the selection. */
-  selecting: 'Selecting',
-  /** What the panels of the "what differs" tab are measured against. */
-  scale: 'Scale',
-} as const;

package/src/projection/core/projectionTabDefaults.ts

@@ -31,6 +31,18 @@ export const PROJECTION_TAB_DEFAULTS: Record<
     showIds: DEFAULT_PROJECTION_OPTIONS.showIds,
     selectMode: DEFAULT_PROJECTION_OPTIONS.selectMode,
   },
+  space: {
+    xAxis: DEFAULT_PROJECTION_OPTIONS.xAxis,
+    yAxis: DEFAULT_PROJECTION_OPTIONS.yAxis,
+    zAxis: DEFAULT_PROJECTION_OPTIONS.zAxis,
+    cloudGesture: DEFAULT_PROJECTION_OPTIONS.cloudGesture,
+    colorBy: DEFAULT_PROJECTION_OPTIONS.colorBy,
+    ellipse: DEFAULT_PROJECTION_OPTIONS.ellipse,
+    pointRadius: DEFAULT_PROJECTION_OPTIONS.pointRadius,
+    showGroupLabels: DEFAULT_PROJECTION_OPTIONS.showGroupLabels,
+    showIds: DEFAULT_PROJECTION_OPTIONS.showIds,
+    selectMode: DEFAULT_PROJECTION_OPTIONS.selectMode,
+  },
   pairs: {
     pairCount: DEFAULT_PROJECTION_OPTIONS.pairCount,
     colorBy: DEFAULT_PROJECTION_OPTIONS.colorBy,

package/src/projection/core/projectionTabs.ts

@@ -1,10 +1,18 @@
 import type { ProjectionAxis, ProjectionResult } from './projectionResult.ts';
 
 /** Which tab of a projection viewer is showing. The ids are stable, so a site may put one in its own URL. */
-export type ProjectionTab = 'map' | 'pairs' | 'variables' | 'shares';
+export type ProjectionTab = 'map' | 'space' | 'pairs' | 'variables' | 'shares';
 
 const PAIRS_MINIMUM_AXES = 3;
 
+/**
+ * How many axes a cloud needs, which is one per direction of the box.
+ *
+ * A run that produced two is not shown a third empty axis: the cloud would be
+ * a flat map stood on its edge, which says less than the map it came from.
+ */
+const SPACE_MINIMUM_AXES = 3;
+
 /**
  * The tabs a result can actually fill.
  *
@@ -32,6 +40,7 @@ export function projectionTabs(
   const tabs: ProjectionTab[] = ['map'];
   const enoughAxes = result.axes.length >= PAIRS_MINIMUM_AXES;
 
+  if (result.axes.length >= SPACE_MINIMUM_AXES) tabs.push('space');
   if (enoughAxes) tabs.push('pairs');
   if (result.loadings !== undefined) tabs.push('variables');
   if (enoughAxes && everyAxisPublishesAShare(result.axes)) tabs.push('shares');

package/src/projection/core/resolveProjectionOptions.ts

@@ -0,0 +1,132 @@
+import {
+  clampAxisIndex,
+  clampAxisPair,
+} from '../../chart/core/chartAxisPair.ts';
+import { clamp } from '../../format/core/clamp.ts';
+
+import type {
+  ProjectionOptionId,
+  ProjectionOptions,
+} from './projectionOptions.ts';
+import { DEFAULT_PROJECTION_OPTIONS } from './projectionOptions.ts';
+import type { ProjectionResult } from './projectionResult.ts';
+import { drawableVariablesView } from './variablesView.ts';
+
+/**
+ * The options the viewer will use, with a caller's overrides merged in and
+ * every one of them made safe against the result that actually came back.
+ *
+ * A saved option outlives the data it was made on: reload with fewer samples
+ * and axis eight no longer exists. Rather than let a plot ask for a column
+ * that is not there, the two axes are pulled back inside what was computed and
+ * kept apart, the counts are held inside what exists, and a view whose data is
+ * missing falls back to `weights`.
+ * @param overrides - What the caller asked for.
+ * @param result - The reduced space the options will be applied to.
+ * @returns Every option, complete and safe.
+ */
+export function resolveProjectionOptions(
+  overrides: Partial<ProjectionOptions> | undefined,
+  result: ProjectionResult,
+): ProjectionOptions {
+  const axisCount = result.axes.length;
+  const lastAxis = Math.max(0, axisCount - 1);
+  const { x: xAxis, y: yAxis } = clampAxisPair(
+    pick(overrides, 'xAxis'),
+    pick(overrides, 'yAxis'),
+    axisCount,
+  );
+
+  return {
+    xAxis,
+    yAxis,
+    zAxis: apartFrom(
+      clampAxisIndex(pick(overrides, 'zAxis'), lastAxis),
+      [xAxis, yAxis],
+      lastAxis,
+    ),
+    cloudGesture: pick(overrides, 'cloudGesture'),
+    colorBy: pick(overrides, 'colorBy'),
+    ellipse: pick(overrides, 'ellipse'),
+    pointRadius: atLeast(pick(overrides, 'pointRadius'), 3.5, 0),
+    showGroupMeans: pick(overrides, 'showGroupMeans'),
+    showGroupLabels: pick(overrides, 'showGroupLabels'),
+    showIds: pick(overrides, 'showIds'),
+    pairCount: clampCount(
+      pick(overrides, 'pairCount'),
+      DEFAULT_PROJECTION_OPTIONS.pairCount,
+      SMALLEST_PAIR_GRID,
+      Math.max(SMALLEST_PAIR_GRID, axisCount),
+    ),
+    variablesView: drawableVariablesView(
+      pick(overrides, 'variablesView'),
+      result.loadings,
+    ),
+    variablesCount: clampCount(
+      pick(overrides, 'variablesCount'),
+      DEFAULT_PROJECTION_OPTIONS.variablesCount,
+      SMALLEST_PANEL_COUNT,
+      Math.max(SMALLEST_PANEL_COUNT, axisCount),
+    ),
+    sharedScale: pick(overrides, 'sharedScale'),
+    showAverage: pick(overrides, 'showAverage'),
+    spread: atLeast(pick(overrides, 'spread'), 2, 0),
+    variableOrder: pick(overrides, 'variableOrder'),
+    shareTarget: Math.min(1, atLeast(pick(overrides, 'shareTarget'), 0.95, 0)),
+    selectMode: pick(overrides, 'selectMode'),
+  };
+}
+
+const SMALLEST_PAIR_GRID = 2;
+const SMALLEST_PANEL_COUNT = 1;
+
+function pick<Key extends ProjectionOptionId>(
+  overrides: Partial<ProjectionOptions> | undefined,
+  key: Key,
+): ProjectionOptions[Key] {
+  // Only an absent override defers to the default: `ellipse: null` is a
+  // reader who turned the outlines off, not a reader who said nothing.
+  const value = overrides?.[key];
+  return value === undefined ? DEFAULT_PROJECTION_OPTIONS[key] : value;
+}
+
+/**
+ * An axis that is none of the ones already drawn.
+ *
+ * The cloud's third direction has two axes to avoid rather than one, and an
+ * axis drawn against itself in a box is a flat map stood on its edge — worse
+ * than the diagonal line it is on a map, because the reader cannot see from
+ * the picture that it happened.
+ * @param wanted - The axis asked for, already inside the result.
+ * @param taken - The axes already drawn.
+ * @param lastAxis - The highest axis there is.
+ * @returns The axis to draw; the lowest one still free when the wanted one is taken, and the wanted one back when every axis is.
+ */
+function apartFrom(
+  wanted: number,
+  taken: readonly number[],
+  lastAxis: number,
+): number {
+  if (!taken.includes(wanted)) return wanted;
+  for (let axis = 0; axis <= lastAxis; axis++) {
+    if (!taken.includes(axis)) return axis;
+  }
+  return wanted;
+}
+
+function clampCount(
+  value: number,
+  fallback: number,
+  lowest: number,
+  highest: number,
+): number {
+  return clamp(
+    Number.isFinite(value) ? Math.floor(value) : fallback,
+    lowest,
+    highest,
+  );
+}
+
+function atLeast(value: number, fallback: number, floor: number): number {
+  return Math.max(floor, Number.isFinite(value) ? value : fallback);
+}

package/src/projection/core/variableAxis.ts

@@ -1,3 +1,6 @@
+import { chartValuesExtent } from '../../chart/core/chartExtent.ts';
+import { roundTo } from '../../format/core/roundTo.ts';
+
 /** Measurements laid out along a number line — a spectrum, a chromatogram. */
 export interface ContinuousVariableAxis {
   /** Discriminant. */
@@ -116,7 +119,7 @@ export function variableLabel(
   // wavenumber to a tidier one would name a slot the reader cannot find in
   // their own file.
   const written =
-    decimals === undefined ? String(value) : String(rounded(value, decimals));
+    decimals === undefined ? String(value) : String(roundTo(value, decimals));
   const unit = axis.unit ?? '';
   return unit === '' ? written : `${written} ${unit}`;
 }
@@ -135,25 +138,13 @@ export function variableLabel(
  */
 export function variableDecimals(axis: VariableAxis): number {
   if (axis.kind === 'named') return 0;
-  let min = Number.POSITIVE_INFINITY;
-  let max = Number.NEGATIVE_INFINITY;
-  for (const value of axis.values) {
-    if (!Number.isFinite(value)) continue;
-    if (value < min) min = value;
-    if (value > max) max = value;
-  }
+  const { min, max } = chartValuesExtent(axis.values);
   const span = max - min;
   if (!Number.isFinite(span) || span <= 0) return MOST_DECIMALS;
   const decimals = AXIS_DIGITS - Math.ceil(Math.log10(span));
   return Math.min(MOST_DECIMALS, Math.max(0, decimals));
 }
 
-function rounded(value: number, decimals: number): number {
-  if (!Number.isFinite(value)) return value;
-  const factor = 10 ** decimals;
-  return Math.round(value * factor) / factor;
-}
-
 /** Digits kept above the decimal point when the axis writes a value. */
 const AXIS_DIGITS = 2;
 

package/src/projection/ui/ProjectionBar.tsx

@@ -31,7 +31,7 @@ import type { ProjectionModels } from './projectionTabModels.ts';
 import type { ProjectionStateApi } from './useProjectionState.ts';
 
 /** What {@link ProjectionBar} needs. */
-export interface ProjectionBarProps {
+interface ProjectionBarProps {
   /** The tab, the options and the selection every tab shares. */
   state: ProjectionStateApi;
   /** What the run produced, whatever produced it. */
@@ -193,12 +193,12 @@ function tabNames(
  * row, because the settings and the second tier both have to stay reachable —
  * so its paragraph is written here instead. A reader short of room is exactly
  * the reader who has not been told what they are looking at, which is why it
- * is moved rather than dropped.
+ * is written here rather than left out.
  *
  * It is a band above the panel rather than a row inside it: the panel's rows
  * are settings the reader changes, and a paragraph filed among them is one
  * more thing to scan past on the way to the switch they came for.
- * @param caption - The paragraph the question mark used to open.
+ * @param caption - The paragraph the question mark opens on a wider figure.
  * @param more - The panel the cog already held.
  * @param metrics - The measurements the chrome is drawn from.
  * @returns The panel's contents.

package/src/projection/ui/ProjectionMapCaption.tsx

@@ -14,7 +14,7 @@ export interface SelectionReport {
 }
 
 /** What {@link ProjectionMapCaption} needs. */
-export interface ProjectionMapCaptionProps {
+interface ProjectionMapCaptionProps {
   /** What the last gesture picked out, or `null` before there was one. */
   report: SelectionReport | null;
   /** The words the map writes, already merged over the defaults. */

package/src/projection/ui/ProjectionMapControls.tsx

@@ -1,7 +1,6 @@
 import type { ReactElement } from 'react';
 
 import type { OverlayTier } from '../../overlay/core/overlayTiers.ts';
-import type { OverlayChipSetting } from '../../overlay/ui/OverlayChip.tsx';
 import { OverlayChip } from '../../overlay/ui/OverlayChip.tsx';
 import { OverlaySegmented } from '../../overlay/ui/OverlaySegmented.tsx';
 import { OverlaySelect } from '../../overlay/ui/OverlaySelect.tsx';
@@ -14,6 +13,7 @@ import type {
 } from '../core/projectionOptions.ts';
 
 import type { ProjectionReading } from './projectionBarReadings.ts';
+import { projectionChipSettings } from './projectionBarReadings.ts';
 import {
   ellipseChoices,
   ellipseKey,
@@ -90,7 +90,7 @@ export function ProjectionMapControls(
 ): ReactElement {
   const { options, onChange, copy, groupLabel, hasGroups = false } = props;
   const { readings = NO_READINGS, tier = 'full' } = props;
-  const { bar, help } = copy;
+  const { bar, help, reason } = copy;
 
   const uncoloured = !hasGroups || options.colorBy === 'none';
   const settings = (
@@ -130,7 +130,7 @@ export function ProjectionMapControls(
       <>
         <OverlayChip
           label={bar.settings}
-          settings={chipSettings(readings)}
+          settings={projectionChipSettings(readings)}
           disabled={!hasGroups}
         >
           {settings}
@@ -149,7 +149,7 @@ export function ProjectionMapControls(
         value={options.colorBy}
         swatches={swatchesOf(readings)}
         disabled={!hasGroups}
-        disabledReason={NO_GROUPS_REASON}
+        disabledReason={reason.noGroups}
         options={projectionColourChoices(groupLabel, bar.uncoloured)}
         onChange={(colorBy) => onChange({ colorBy })}
       />
@@ -159,8 +159,8 @@ export function ProjectionMapControls(
         showKey={tier === 'full'}
         value={ellipseKey(options.ellipse)}
         disabled={uncoloured}
-        disabledReason={UNCOLOURED_REASON}
-        options={projectionOutlineChoices(options, bar.noOutlines)}
+        disabledReason={reason.uncolouredOutlines}
+        options={projectionOutlineChoices(options, copy)}
         onChange={(value) => onChange({ ellipse: ellipseSize(value) })}
       />
       {names}
@@ -168,25 +168,6 @@ export function ProjectionMapControls(
   );
 }
 
-/**
- * What the chip reads out, which is every setting spelled in full.
- * @param readings - What the settings currently read.
- * @returns The chip's own settings.
- */
-function chipSettings(
-  readings: readonly ProjectionReading[],
-): readonly OverlayChipSetting[] {
-  const settings: OverlayChipSetting[] = [];
-  for (const reading of readings) {
-    settings.push({
-      label: reading.label,
-      value: reading.value,
-      swatches: reading.swatches,
-    });
-  }
-  return settings;
-}
-
 /**
  * The figure's own colours, from whichever setting decides them.
  * @param readings - What the settings currently read.
@@ -227,7 +208,7 @@ interface MapSettingsProps {
  */
 function MapSettings(props: MapSettingsProps): ReactElement {
   const { options, onChange, copy, groupLabel, hasGroups } = props;
-  const { bar, help } = copy;
+  const { bar, help, outline } = copy;
 
   return (
     <>
@@ -244,14 +225,13 @@ function MapSettings(props: MapSettingsProps): ReactElement {
         help={help.ellipse}
         value={ellipseKey(options.ellipse)}
         disabled={!hasGroups || options.colorBy === 'none'}
-        options={ellipseChoices(options.ellipse)}
+        options={ellipseChoices(options.ellipse, outline)}
         onChange={(value) => onChange({ ellipse: ellipseSize(value) })}
       />
     </>
   );
 }
 
-/** Why the two settings are dead, written as the thing the data is missing. */
 /**
  * The two glyphs the switches ride as.
  *
@@ -263,9 +243,5 @@ function MapSettings(props: MapSettingsProps): ReactElement {
 const GROUP_LABELS_GLYPH = 'tag';
 const IDS_GLYPH = 'id-number';
 
-const NO_GROUPS_REASON = 'These samples carry no groups to colour by.';
-const UNCOLOURED_REASON =
-  'Outlines follow the groups, so colour the map by them first.';
-
 /** No readings at all, which is what the panel behind the cog is handed. */
 const NO_READINGS: readonly ProjectionReading[] = [];

package/src/projection/ui/ProjectionMapLegend.tsx

@@ -11,7 +11,7 @@ import {
 } from './projectionTabStyles.ts';
 
 /** What {@link ProjectionMapLegend} needs. */
-export interface ProjectionMapLegendProps {
+interface ProjectionMapLegendProps {
   /** The one short sentence naming what the colour means here. */
   title: string;
   /** What each mark on the map means, in the order they are written. */

package/src/projection/ui/ProjectionMapMore.tsx

@@ -1,26 +1,22 @@
 import type { ReactElement } from 'react';
 
-import { chartAxisTitle } from '../../chart/core/chartLabels.ts';
 import { OverlayAction } from '../../overlay/ui/OverlayAction.tsx';
 import { OverlayGroup } from '../../overlay/ui/OverlayGroup.tsx';
 import { OverlayNumber } from '../../overlay/ui/OverlayNumber.tsx';
 import { OverlayPanel } from '../../overlay/ui/OverlayPanel.tsx';
-import type { OverlayOption } from '../../overlay/ui/OverlayRow.tsx';
 import { OverlaySegmented } from '../../overlay/ui/OverlaySegmented.tsx';
 import { OverlaySelect } from '../../overlay/ui/OverlaySelect.tsx';
 import { OverlayToggle } from '../../overlay/ui/OverlayToggle.tsx';
 import type { ScatterSelectionMode } from '../../scatter/core/scatterSelection.ts';
 import type { ProjectionResult } from '../core/projectionResult.ts';
-import {
-  PROJECTION_PANEL_NAME,
-  PROJECTION_PANEL_SECTION,
-} from '../core/projectionStrings.ts';
 import { PROJECTION_TAB_DEFAULTS } from '../core/projectionTabDefaults.ts';
 
 import type { ProjectionMapControlsProps } from './ProjectionMapControls.tsx';
+import { projectionAxisChoices } from './projectionAxisChoices.ts';
+import { projectionSelectModeChoices } from './projectionWordChoices.ts';
 
 /** What {@link ProjectionMapMore} needs beyond the map's own controls. */
-export interface ProjectionMapMoreProps extends ProjectionMapControlsProps {
+interface ProjectionMapMoreProps extends ProjectionMapControlsProps {
   /** The reduced space the controls apply to; its axes fill the two pickers. */
   result: ProjectionResult;
   /**
@@ -61,7 +57,7 @@ export function ProjectionMapMore(props: ProjectionMapMoreProps): ReactElement {
   const { result, options, onChange, copy, hasGroups = false } = props;
   const { selectedCount = 0, onZoomToSelection } = props;
   const { onResetView, onClearSelection } = props;
-  const { action, help, tab } = copy;
+  const { action, help, panel, reason, tab } = copy;
 
   const nothingPicked = selectedCount === 0;
   const uncoloured = !hasGroups || options.colorBy === 'none';
@@ -92,25 +88,33 @@ export function ProjectionMapMore(props: ProjectionMapMoreProps): ReactElement {
         </>
       }
     >
-      <OverlayGroup label={PROJECTION_PANEL_SECTION.axes} divider={false}>
+      <OverlayGroup label={panel.section.axes} divider={false}>
         <OverlaySelect
-          label={PROJECTION_PANEL_NAME.xAxis}
+          label={panel.name.xAxis}
           help={help.xAxis}
           value={String(options.xAxis)}
-          options={axisChoices(result, options.yAxis)}
+          options={projectionAxisChoices(
+            result,
+            [options.yAxis],
+            reason.axisTakenOnMap,
+          )}
           onChange={(value) => onChange({ xAxis: Number(value) })}
         />
         <OverlaySelect
-          label={PROJECTION_PANEL_NAME.yAxis}
+          label={panel.name.yAxis}
           help={help.yAxis}
           value={String(options.yAxis)}
-          options={axisChoices(result, options.xAxis)}
+          options={projectionAxisChoices(
+            result,
+            [options.xAxis],
+            reason.axisTakenOnMap,
+          )}
           onChange={(value) => onChange({ yAxis: Number(value) })}
         />
       </OverlayGroup>
-      <OverlayGroup label={PROJECTION_PANEL_SECTION.drawing}>
+      <OverlayGroup label={panel.section.drawing}>
         <OverlayNumber
-          label={PROJECTION_PANEL_NAME.pointRadius}
+          label={panel.name.pointRadius}
           help={help.pointRadius}
           value={options.pointRadius}
           min={1}
@@ -121,58 +125,22 @@ export function ProjectionMapMore(props: ProjectionMapMoreProps): ReactElement {
           onChange={(pointRadius) => onChange({ pointRadius })}
         />
         <OverlayToggle
-          label={PROJECTION_PANEL_NAME.showGroupMeans}
+          label={panel.name.showGroupMeans}
           help={help.showGroupMeans}
           checked={options.showGroupMeans}
           disabled={uncoloured}
           onChange={(showGroupMeans) => onChange({ showGroupMeans })}
         />
       </OverlayGroup>
-      <OverlayGroup label={PROJECTION_PANEL_SECTION.selecting}>
+      <OverlayGroup label={panel.section.selecting}>
         <OverlaySegmented<ScatterSelectionMode>
-          label={PROJECTION_PANEL_NAME.selectMode}
+          label={panel.name.selectMode}
           help={help.selectMode}
           value={options.selectMode}
-          options={SELECT_MODE_CHOICES}
+          options={projectionSelectModeChoices(copy)}
           onChange={(selectMode) => onChange({ selectMode })}
         />
       </OverlayGroup>
     </OverlayPanel>
   );
 }
-
-const AXIS_TAKEN_NOTE = 'Already drawn on the other axis.';
-
-/**
- * What a plain drag does. Three words rather than a sentence, because a
- * segment has room for one word and the line over the plot says the rest while
- * the drag is under way.
- */
-const SELECT_MODE_CHOICES: ReadonlyArray<OverlayOption<ScatterSelectionMode>> =
-  [
-    { value: 'replace', label: 'Replace' },
-    { value: 'add', label: 'Add' },
-    { value: 'remove', label: 'Remove' },
-  ];
-
-/**
- * The axes one picker offers, with the one already drawn kept but unreachable.
- * @param result - The reduced space being drawn.
- * @param taken - The axis the other picker is showing.
- * @returns The choices, in the order the run produced them.
- */
-function axisChoices(result: ProjectionResult, taken: number): OverlayOption[] {
-  const choices: OverlayOption[] = [];
-  for (let index = 0; index < result.axes.length; index++) {
-    const axis = result.axes[index];
-    if (axis === undefined) continue;
-    const drawn = index === taken;
-    choices.push({
-      value: String(index),
-      label: chartAxisTitle(axis.name, { share: axis.share }),
-      disabled: drawn,
-      title: drawn ? AXIS_TAKEN_NOTE : undefined,
-    });
-  }
-  return choices;
-}

package/src/projection/ui/ProjectionMapTab.tsx

@@ -3,6 +3,7 @@ import { useMemo, useState } from 'react';
 
 import type { ChartViewport } from '../../chart/core/chartViewport.ts';
 import { ScatterPlot } from '../../scatter/ui/ScatterPlot.tsx';
+import type { ScatterPointOpen } from '../../scatter/ui/scatterFigureProps.ts';
 import type { SelectionChange } from '../../scatter/ui/useScatterSelection.ts';
 import type { ProjectionCopy } from '../core/projectionCopy.ts';
 import type { ProjectionOptions } from '../core/projectionOptions.ts';
@@ -27,7 +28,7 @@ import {
 } from './projectionMapModel.ts';
 
 /** What {@link ProjectionMapTab} needs. */
-export interface ProjectionMapTabProps {
+interface ProjectionMapTabProps {
   /** What the run produced, whatever produced it. */
   result: ProjectionResult;
   /** The groups, resolved once by the viewer so every tab colours alike. */
@@ -82,6 +83,11 @@ export interface ProjectionMapTabProps {
    * @default undefined
    */
   onHoverChange?: (index: number) => void;
+  /**
+   * Called when the reader double-clicks a sample.
+   * @default undefined
+   */
+  onPointDoubleClick?: (point: ScatterPointOpen) => void;
   /**
    * The card that follows the pointer. The viewer builds it, because it has to
    * say the same thing on every tab.
@@ -121,6 +127,7 @@ export function ProjectionMapTab(props: ProjectionMapTabProps): ReactElement {
   const { result, groups, options, copy, chrome, width, height } = props;
   const { ids, selected, viewport = null, report = null } = props;
   const { onSelectionChange, onHoverChange, hoverCard } = props;
+  const { onPointDoubleClick } = props;
   const { onViewportChange, wheelZoom, touchLasso, testId } = props;
   const { scores, fittedCount, markers } = result;
   const { xAxis, yAxis, colorBy, showGroupMeans, pointRadius } = options;
@@ -173,6 +180,7 @@ export function ProjectionMapTab(props: ProjectionMapTabProps): ReactElement {
       onSelectionChange={onSelectionChange}
       selectMode={selectMode}
       onHoverChange={onHoverChange}
+      onPointDoubleClick={onPointDoubleClick}
       onLassoChange={setDrawing}
       touchLasso={touchLasso}
       testId={testId}

package/src/projection/ui/ProjectionPairsControls.tsx

@@ -8,7 +8,7 @@ import type { ProjectionOptions } from '../core/projectionOptions.ts';
 import { projectionPairsCeiling } from './projectionPairsCeiling.ts';
 
 /** What the pair grid's own stepper is drawn from. */
-export interface ProjectionPairsControlsProps {
+interface ProjectionPairsControlsProps {
   /** What the grid is showing, already resolved against the result. */
   options: ProjectionOptions;
   /** Called with only the options that changed, for the viewer to merge. */