react-cheminfo 0.11.0 → 0.12.0

package/src/projection/ui/ProjectionSpaceControls.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';
@@ -15,10 +14,14 @@ import type {
 } from '../core/projectionOptions.ts';
 
 import type { ProjectionReading } from './projectionBarReadings.ts';
-import { CLOUD_GESTURE_CHOICES } from './projectionCloudChoices.ts';
-import { ellipseKey, ellipseSize } from './projectionEllipse.ts';
-import { ellipsoidChoices } from './projectionEllipsoid.ts';
+import { projectionChipSettings } from './projectionBarReadings.ts';
+import {
+  ellipseChoices,
+  ellipseKey,
+  ellipseSize,
+} from './projectionEllipse.ts';
 import { projectionColourChoices } from './projectionMapChoices.ts';
+import { projectionCloudGestureChoices } from './projectionWordChoices.ts';
 
 /** What the cloud's controls are drawn from, wherever in the bar they sit. */
 export interface ProjectionSpaceControlsProps {
@@ -70,7 +73,7 @@ export function ProjectionSpaceControls(
 ): ReactElement {
   const { options, onChange, copy, groupLabel, hasGroups = false } = props;
   const { readings = NO_READINGS, tier = 'full' } = props;
-  const { bar, help } = copy;
+  const { bar, help, outline, reason } = copy;
 
   const uncoloured = !hasGroups || options.colorBy === 'none';
   const names = (
@@ -98,7 +101,10 @@ export function ProjectionSpaceControls(
   if (tier === 'chip' || tier === 'tiny') {
     return (
       <>
-        <OverlayChip label={bar.settings} settings={chipSettings(readings)}>
+        <OverlayChip
+          label={bar.settings}
+          settings={projectionChipSettings(readings)}
+        >
           <SpaceSettings
             options={options}
             onChange={onChange}
@@ -119,7 +125,7 @@ export function ProjectionSpaceControls(
         keyWord={bar.key.cloudGesture}
         showKey={tier === 'full'}
         value={options.cloudGesture}
-        options={CLOUD_GESTURE_CHOICES}
+        options={projectionCloudGestureChoices(copy)}
         onChange={(cloudGesture) => onChange({ cloudGesture })}
       />
       <OverlayValueMenu
@@ -128,8 +134,8 @@ export function ProjectionSpaceControls(
         showKey={tier === 'full'}
         value={ellipseKey(options.ellipse)}
         disabled={uncoloured}
-        disabledReason={UNCOLOURED_REASON}
-        options={ellipsoidChoices(options.ellipse)}
+        disabledReason={reason.uncolouredShells}
+        options={ellipseChoices(options.ellipse, outline, 'space')}
         onChange={(value) => onChange({ ellipse: ellipseSize(value) })}
       />
       {names}
@@ -137,25 +143,6 @@ export function ProjectionSpaceControls(
   );
 }
 
-/**
- * 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;
-}
-
 /** What the captioned pair behind the chip is drawn from. */
 interface SpaceSettingsProps {
   /** What the cloud is showing, already resolved against the result. */
@@ -177,7 +164,7 @@ interface SpaceSettingsProps {
  */
 function SpaceSettings(props: SpaceSettingsProps): ReactElement {
   const { options, onChange, copy, groupLabel, hasGroups } = props;
-  const { bar, help } = copy;
+  const { bar, help, outline } = copy;
 
   return (
     <>
@@ -185,7 +172,7 @@ function SpaceSettings(props: SpaceSettingsProps): ReactElement {
         label={help.cloudGesture.title}
         help={help.cloudGesture}
         value={options.cloudGesture}
-        options={CLOUD_GESTURE_CHOICES}
+        options={projectionCloudGestureChoices(copy)}
         onChange={(cloudGesture) => onChange({ cloudGesture })}
       />
       <OverlaySegmented<ProjectionColorBy>
@@ -201,7 +188,7 @@ function SpaceSettings(props: SpaceSettingsProps): ReactElement {
         help={help.ellipse}
         value={ellipseKey(options.ellipse)}
         disabled={!hasGroups || options.colorBy === 'none'}
-        options={ellipsoidChoices(options.ellipse)}
+        options={ellipseChoices(options.ellipse, outline, 'space')}
         onChange={(value) => onChange({ ellipse: ellipseSize(value) })}
       />
     </>
@@ -212,8 +199,5 @@ function SpaceSettings(props: SpaceSettingsProps): ReactElement {
 const GROUP_LABELS_GLYPH = 'tag';
 const IDS_GLYPH = 'id-number';
 
-const UNCOLOURED_REASON =
-  'Shells follow the groups, so colour the cloud 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/ProjectionSpaceMore.tsx

@@ -1,27 +1,25 @@
 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 type { ScatterSelectionMode } from '../../scatter/core/scatterSelection.ts';
 import type { CloudGesture } from '../../scatter3d/core/cloudGesture.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 { ProjectionSpaceControlsProps } from './ProjectionSpaceControls.tsx';
-import { CLOUD_GESTURE_CHOICES } from './projectionCloudChoices.ts';
+import { projectionAxisChoices } from './projectionAxisChoices.ts';
+import {
+  projectionCloudGestureChoices,
+  projectionSelectModeChoices,
+} from './projectionWordChoices.ts';
 
 /** What {@link ProjectionSpaceMore} needs beyond the cloud's own controls. */
-export interface ProjectionSpaceMoreProps extends ProjectionSpaceControlsProps {
+interface ProjectionSpaceMoreProps extends ProjectionSpaceControlsProps {
   /** The reduced space the controls apply to; its axes fill the three pickers. */
   result: ProjectionResult;
   /**
@@ -53,7 +51,7 @@ export function ProjectionSpaceMore(
 ): ReactElement {
   const { result, options, onChange, copy } = props;
   const { selectedCount = 0, onResetView, onClearSelection } = props;
-  const { action, help, tab } = copy;
+  const { action, help, panel, reason, tab } = copy;
 
   const nothingPicked = selectedCount === 0;
 
@@ -77,32 +75,44 @@ export function ProjectionSpaceMore(
         </>
       }
     >
-      <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.zAxis])}
+          options={projectionAxisChoices(
+            result,
+            [options.yAxis, options.zAxis],
+            reason.axisTakenInSpace,
+          )}
           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.zAxis])}
+          options={projectionAxisChoices(
+            result,
+            [options.xAxis, options.zAxis],
+            reason.axisTakenInSpace,
+          )}
           onChange={(value) => onChange({ yAxis: Number(value) })}
         />
         <OverlaySelect
-          label={PROJECTION_PANEL_NAME.zAxis}
+          label={panel.name.zAxis}
           help={help.zAxis}
           value={String(options.zAxis)}
-          options={axisChoices(result, [options.xAxis, options.yAxis])}
+          options={projectionAxisChoices(
+            result,
+            [options.xAxis, options.yAxis],
+            reason.axisTakenInSpace,
+          )}
           onChange={(value) => onChange({ zAxis: 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}
@@ -113,57 +123,24 @@ export function ProjectionSpaceMore(
           onChange={(pointRadius) => onChange({ pointRadius })}
         />
       </OverlayGroup>
-      <OverlayGroup label={PROJECTION_PANEL_SECTION.handling}>
+      <OverlayGroup label={panel.section.handling}>
         <OverlaySegmented<CloudGesture>
-          label={PROJECTION_PANEL_NAME.cloudGesture}
+          label={panel.name.cloudGesture}
           help={help.cloudGesture}
           value={options.cloudGesture}
-          options={CLOUD_GESTURE_CHOICES}
+          options={projectionCloudGestureChoices(copy)}
           onChange={(cloudGesture) => onChange({ cloudGesture })}
         />
       </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 another axis.';
-
-/** The same three words the map's panel offers, for the same reason. */
-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 ones already drawn kept but unreachable.
- * @param result - The reduced space being drawn.
- * @param taken - The axes the other two pickers are showing.
- * @returns The choices, in the order the run produced them.
- */
-function axisChoices(
-  result: ProjectionResult,
-  taken: readonly number[],
-): OverlayOption[] {
-  const choices: OverlayOption[] = [];
-  for (const [index, axis] of result.axes.entries()) {
-    const drawn = taken.includes(index);
-    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/ProjectionSpaceTab.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement, ReactNode } from 'react';
 import { useMemo } from 'react';
 
-import type { ScatterPointOpen } from '../../scatter/ui/scatterPlotProps.ts';
+import type { ScatterPointOpen } from '../../scatter/ui/scatterFigureProps.ts';
 import type { SelectionChange } from '../../scatter/ui/useScatterSelection.ts';
 import type { OrbitCamera } from '../../scatter3d/core/orbitCamera.ts';
 import { ScatterCloud } from '../../scatter3d/ui/ScatterCloud.tsx';
@@ -23,7 +23,7 @@ import {
 import { MINIMUM_SHELL_POINTS } from './projectionSpaceModel.ts';
 
 /** What {@link ProjectionSpaceTab} needs. */
-export interface ProjectionSpaceTabProps {
+interface ProjectionSpaceTabProps {
   /** What the run produced, whatever produced it. */
   result: ProjectionResult;
   /** The groups, resolved once by the viewer so every tab colours alike. */

package/src/projection/ui/ProjectionSurface.tsx

@@ -10,7 +10,7 @@ import {
 } from '../../overlay/ui/overlaySurface.ts';
 
 /** What {@link ProjectionSurface} needs. */
-export interface ProjectionSurfaceProps {
+interface ProjectionSurfaceProps {
   /** The chrome drawn at the compact size: the settings bar, a floating key. */
   children: ReactNode;
   /**

package/src/projection/ui/ProjectionTabStrip.tsx

@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react';
+import type { ReactElement, RefObject } from 'react';
 import { useEffect, useMemo, useRef } from 'react';
 
 import type { OverlayTier } from '../../overlay/core/overlayTiers.ts';
@@ -12,7 +12,7 @@ import {
 } from './projectionBarStyles.ts';
 
 /** What {@link ProjectionTabStrip} needs. */
-export interface ProjectionTabStripProps {
+interface ProjectionTabStripProps {
   /** The tabs the result can fill, in reading order. */
   tabs: readonly ProjectionTab[];
   /** The one showing. */
@@ -97,11 +97,6 @@ export function ProjectionTabStrip(
     [tabs, written],
   );
 
-  useEffect(() => {
-    if (!scrolls) return;
-    showSelected(track.current);
-  }, [scrolls, tab, options, maxWidth]);
-
   return (
     <div ref={track} style={projectionTabTrackStyle(scrolls, maxWidth)}>
       <OverlayPills<ProjectionTab>
@@ -113,10 +108,48 @@ export function ProjectionTabStrip(
         panelId={panelId}
         onChange={onTabChange}
       />
+      {scrolls ? (
+        <SelectedViewInSight
+          track={track}
+          tab={tab}
+          options={options}
+          maxWidth={maxWidth}
+        />
+      ) : null}
     </div>
   );
 }
 
+/** What {@link SelectedViewInSight} watches. */
+interface SelectedViewInSightProps {
+  /** The scrolling strip. */
+  track: RefObject<HTMLDivElement | null>;
+  /** The view in force. */
+  tab: ProjectionTab;
+  /** The pills, whose names decide where the view in force sits. */
+  options: ReadonlyArray<OverlayPillOption<ProjectionTab>>;
+  /** The most room the strip may take, which decides how much of it shows. */
+  maxWidth: number;
+}
+
+/**
+ * Keeps the view in force in sight while the strip scrolls.
+ *
+ * Mounted only while the strip scrolls: a strip that holds every name has
+ * nothing to bring into sight.
+ * @param props - See {@link SelectedViewInSightProps}.
+ * @returns Nothing; it only moves the strip.
+ */
+function SelectedViewInSight(props: SelectedViewInSightProps): null {
+  const { track, tab, options, maxWidth } = props;
+
+  useEffect(() => {
+    showSelected(track.current);
+  }, [track, tab, options, maxWidth]);
+
+  return null;
+}
+
 /**
  * Bring the view in force back into sight inside a scrolling strip.
  *

package/src/projection/ui/ProjectionVariablesControls.tsx

@@ -12,7 +12,7 @@ import type { ProjectionVariablesAvailability } from './projectionViewChoices.ts
 import { projectionViewChoices } from './projectionViewChoices.ts';
 
 /** What the "what differs" picker on the bar is drawn from. */
-export interface ProjectionVariablesControlsProps extends ProjectionVariablesAvailability {
+interface ProjectionVariablesControlsProps extends ProjectionVariablesAvailability {
   /** Every option the panels are drawn from. */
   options: ProjectionOptions;
   /** The words the bar writes, already merged over the defaults. */

package/src/projection/ui/ProjectionVariablesMore.tsx

@@ -3,7 +3,6 @@ import type { ReactElement } from 'react';
 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';
@@ -12,17 +11,14 @@ import type {
   ProjectionOptions,
   ProjectionVariablesView,
 } from '../core/projectionOptions.ts';
-import {
-  PROJECTION_PANEL_NAME,
-  PROJECTION_PANEL_SECTION,
-} from '../core/projectionStrings.ts';
 import { PROJECTION_TAB_DEFAULTS } from '../core/projectionTabDefaults.ts';
 
 import type { ProjectionVariablesAvailability } from './projectionViewChoices.ts';
 import { projectionViewChoices } from './projectionViewChoices.ts';
+import { projectionVariableOrderChoices } from './projectionWordChoices.ts';
 
 /** What the panels keep behind the cog is drawn from. */
-export interface ProjectionVariablesMoreProps extends ProjectionVariablesAvailability {
+interface ProjectionVariablesMoreProps extends ProjectionVariablesAvailability {
   /** Every option the panels are drawn from. */
   options: ProjectionOptions;
   /** The words the bar writes, already merged over the defaults. */
@@ -54,7 +50,7 @@ export function ProjectionVariablesMore(
 ): ReactElement {
   const { options, copy, axisCount, continuous, onChange } = props;
   const { canShowEffect, canRescale, canPickSample } = props;
-  const { help, tab } = copy;
+  const { help, panel, tab } = copy;
 
   return (
     <OverlayPanel
@@ -62,7 +58,7 @@ export function ProjectionVariablesMore(
       onReset={() => onChange(PROJECTION_TAB_DEFAULTS.variables)}
     >
       <OverlaySelect<ProjectionVariablesView>
-        label={PROJECTION_PANEL_NAME.variablesView}
+        label={panel.name.variablesView}
         help={help.variablesView}
         value={options.variablesView}
         options={projectionViewChoices(copy, {
@@ -73,22 +69,22 @@ export function ProjectionVariablesMore(
         onChange={(variablesView) => onChange({ variablesView })}
       />
       <OverlayNumber
-        label={PROJECTION_PANEL_NAME.variablesCount}
+        label={panel.name.variablesCount}
         help={help.variablesCount}
         value={options.variablesCount}
         min={1}
         max={Math.max(1, axisCount)}
         onChange={(variablesCount) => onChange({ variablesCount })}
       />
-      <OverlayGroup label={PROJECTION_PANEL_SECTION.scale}>
+      <OverlayGroup label={panel.section.scale}>
         <OverlayToggle
-          label={PROJECTION_PANEL_NAME.sharedScale}
+          label={panel.name.sharedScale}
           help={help.sharedScale}
           checked={options.sharedScale}
           onChange={(sharedScale) => onChange({ sharedScale })}
         />
         <OverlayNumber
-          label={PROJECTION_PANEL_NAME.spread}
+          label={panel.name.spread}
           help={help.spread}
           value={options.spread}
           min={SMALLEST_REACH}
@@ -99,19 +95,19 @@ export function ProjectionVariablesMore(
           onChange={(spread) => onChange({ spread })}
         />
       </OverlayGroup>
-      <OverlayGroup label={PROJECTION_PANEL_SECTION.drawing}>
+      <OverlayGroup label={panel.section.drawing}>
         <OverlayToggle
-          label={PROJECTION_PANEL_NAME.showAverage}
+          label={panel.name.showAverage}
           help={help.showAverage}
           checked={options.showAverage}
           onChange={(showAverage) => onChange({ showAverage })}
         />
         <OverlaySegmented
-          label={PROJECTION_PANEL_NAME.variableOrder}
+          label={panel.name.variableOrder}
           help={help.variableOrder}
           value={options.variableOrder}
           disabled={continuous}
-          options={ORDER_CHOICES}
+          options={projectionVariableOrderChoices(copy)}
           onChange={(variableOrder) => onChange({ variableOrder })}
         />
       </OverlayGroup>
@@ -119,20 +115,6 @@ export function ProjectionVariablesMore(
   );
 }
 
-/**
- * The two orders the bars of a panel can be drawn in.
- *
- * Both are written as what the reader gets rather than as what the code does,
- * because "original" and "strongest" name the sort rather than the picture it
- * produces.
- */
-const ORDER_CHOICES: ReadonlyArray<
-  OverlayOption<ProjectionOptions['variableOrder']>
-> = [
-  { value: 'original', label: 'Your order' },
-  { value: 'strongest', label: 'Strongest first' },
-];
-
 /**
  * How far the average sample may be pushed, in standard deviations.
  *

package/src/projection/ui/ProjectionVariablesTab.tsx

@@ -30,10 +30,8 @@ import {
 } from './projectionVariablesModel.ts';
 import { axisCaption, legendTitle } from './projectionVariablesWords.ts';
 
-export type { ProjectionVariableTrack } from './projectionVariablesModel.ts';
-
 /** What {@link ProjectionVariablesTab} needs. */
-export interface ProjectionVariablesTabProps {
+interface ProjectionVariablesTabProps {
   /**
    * The panels as the viewer built them, or `null` when the run reported no
    * weights and there is nothing to draw.
@@ -89,7 +87,7 @@ export interface ProjectionVariablesTabProps {
  *
  * Colour is the component here and nothing else: the palette's component order
  * is disjoint from its group order over the first four of each, so a reader
- * who learnt "blue is setosa" on the map never reads "blue is PC 1" here as
+ * who learnt "blue is setosa" on the map never reads "blue is PC1" here as
  * though it meant the same thing. A component's direction is arbitrary, so its
  * sign is carried by geometry — above or below the zero line — and never by a
  * second colour, which would advertise a meaning the arithmetic does not have.

package/src/projection/ui/ProjectionViewer.tsx

@@ -2,7 +2,8 @@ import type { CSSProperties, ReactElement } from 'react';
 import { useId, useMemo, useRef } from 'react';
 
 import { useContainerSize } from '../../hooks/ui/useContainerSize.ts';
-import { mergeProjectionCopy } from '../core/projectionCopy.ts';
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
+import { mergeProjectionCopy } from '../core/mergeProjectionCopy.ts';
 
 import { ProjectionBar } from './ProjectionBar.tsx';
 import { ProjectionPanel } from './ProjectionPanel.tsx';
@@ -13,11 +14,6 @@ import { PROJECTION_TAB_HEIGHT } from './projectionTabStyles.ts';
 import type { ProjectionViewerProps } from './projectionViewerProps.ts';
 import { useProjectionState } from './useProjectionState.ts';
 
-export type { ProjectionVariableTrack } from './ProjectionVariablesTab.tsx';
-export type { ProjectionSelection } from './projectionSelection.ts';
-export type { ProjectionSampleOpen } from './projectionViewerProps.ts';
-export type { ProjectionViewerProps } from './projectionViewerProps.ts';
-
 /**
  * A dimension-reduction result, shown as a map a reader can interrogate.
  *
@@ -31,8 +27,8 @@ export type { ProjectionViewerProps } from './projectionViewerProps.ts';
  * question mark that explains it share a single thirty-pixel row above the
  * picture, and every pixel below that row is the picture. Nothing stands under
  * it — the key floats in the emptiest corner of the plot, and the paragraph
- * that used to sit beneath the figure is behind the question mark, kept whole
- * for the reader who wants it and costing nothing to the reader who does not.
+ * that explains the figure is behind the question mark, kept whole for the
+ * reader who wants it and costing nothing to the reader who does not.
  *
  * The four tabs are one tool rather than four because they share one piece of
  * state: a pair promoted from the grid arrives on the map, and the lasso drawn
@@ -60,6 +56,7 @@ export function ProjectionViewer(props: ProjectionViewerProps): ReactElement {
   const models = useProjectionModels({
     result,
     samples,
+    copy,
     options: state.options,
     selected: state.selected,
   });
@@ -79,11 +76,7 @@ export function ProjectionViewer(props: ProjectionViewerProps): ReactElement {
   return (
     <div
       ref={figure}
-      className={
-        className === undefined
-          ? 'projection-viewer'
-          : `projection-viewer ${className}`
-      }
+      className={joinClassNames('projection-viewer', className)}
       data-testid={testId}
       style={VIEWER_STYLE}
     >

package/src/projection/ui/projectionAxisChoices.ts

@@ -0,0 +1,31 @@
+import { chartAxisTitle } from '../../chart/core/chartLabels.ts';
+import type { OverlayOption } from '../../overlay/ui/OverlayRow.tsx';
+import type { ProjectionResult } from '../core/projectionResult.ts';
+
+/**
+ * The axes one picker offers, with the ones the other pickers already draw kept
+ * in the list but unreachable, so the reader sees why they cannot be picked.
+ * @param result - The reduced space being drawn.
+ * @param taken - The axes the other pickers are showing.
+ * @param takenReason - What the pointer is told about an axis already drawn.
+ * @returns The choices, in the order the run produced them.
+ */
+export function projectionAxisChoices(
+  result: ProjectionResult,
+  taken: readonly number[],
+  takenReason: string,
+): OverlayOption[] {
+  const choices: OverlayOption[] = [];
+  for (let index = 0; index < result.axes.length; index++) {
+    const axis = result.axes[index];
+    if (axis === undefined) continue;
+    const drawn = taken.includes(index);
+    choices.push({
+      value: String(index),
+      label: chartAxisTitle(axis.name, { share: axis.share }),
+      disabled: drawn,
+      title: drawn ? takenReason : undefined,
+    });
+  }
+  return choices;
+}