react-cheminfo 0.11.0 → 0.13.0

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;
+}

package/src/projection/ui/projectionBarReadings.ts

@@ -8,15 +8,15 @@
  * `Colour by species` and folding the bar at the wrong width.
  */
 
+import { chartShare } from '../../chart/core/chartLabels.ts';
 import type { OverlayMetrics } from '../../overlay/core/overlayMetrics.ts';
+import type { OverlayChipSetting } from '../../overlay/ui/OverlayChip.tsx';
 import type { ProjectionCopy } from '../core/projectionCopy.ts';
 import type { ProjectionOptions } from '../core/projectionOptions.ts';
 import type { ResolvedProjectionGroups } from '../core/projectionSamples.ts';
 import type { ProjectionTab } from '../core/projectionTabs.ts';
 
 import { ellipseCoverageText } from './projectionEllipse.ts';
-import { ellipsoidCoverageText } from './projectionEllipsoid.ts';
-import { WHOLE_SHARE } from './projectionTabStyles.ts';
 
 /** One setting on the bar, as the reader sees it right now. */
 export interface ProjectionReading {
@@ -41,7 +41,7 @@ export interface ProjectionReading {
 }
 
 /** What the readings of the tab showing are built from. */
-export interface ProjectionReadingsInput {
+interface ProjectionReadingsInput {
   /** The tab showing, whose own settings sit at the far end of the bar. */
   tab: ProjectionTab;
   /** The words the viewer writes, already merged over the defaults. */
@@ -61,7 +61,7 @@ export function projectionBarReadings(
   input: ProjectionReadingsInput,
 ): readonly ProjectionReading[] {
   const { tab, copy, options, groups } = input;
-  const { bar, help } = copy;
+  const { bar, choice, help } = copy;
 
   if (tab === 'pairs') {
     return [
@@ -83,19 +83,20 @@ export function projectionBarReadings(
     ];
   }
   if (tab === 'space') {
+    const coverage =
+      options.colorBy === 'group' && groups.entries.length > 0
+        ? ellipseCoverageText(options.ellipse, 'space')
+        : '';
     return [
       {
         key: bar.key.cloudGesture,
         label: help.cloudGesture.title,
-        value: options.cloudGesture === 'turn' ? 'Turn' : 'Select',
+        value: choice.cloudGesture[options.cloudGesture],
       },
       {
         key: bar.key.ellipse,
         label: help.ellipse.title,
-        value:
-          options.colorBy === 'group' && groups.entries.length > 0
-            ? ellipsoidCoverageText(options.ellipse)
-            : bar.noOutlines,
+        value: coverage === '' ? bar.noOutlines : coverage,
       },
     ];
   }
@@ -104,7 +105,7 @@ export function projectionBarReadings(
       {
         key: bar.key.shareTarget,
         label: help.shareTarget.title,
-        value: `${Math.round(options.shareTarget * WHOLE_SHARE)}%`,
+        value: `${chartShare(options.shareTarget, 0)}%`,
         stepper: true,
       },
     ];
@@ -136,6 +137,26 @@ export function projectionUnwrittenRoom(
   return extra;
 }
 
+/**
+ * What the chip a narrow bar gathers the settings into reads out, which is
+ * every reading spelled in full.
+ * @param readings - What the settings currently read.
+ * @returns The chip's own settings.
+ */
+export function projectionChipSettings(
+  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 colours the map is painting the groups in, for the swatch glyph.
  *

package/src/projection/ui/projectionBarSlots.tsx

@@ -27,7 +27,7 @@ import {
 import type { ProjectionModels } from './projectionTabModels.ts';
 
 /** The three things one tab puts in the bar. */
-export interface ProjectionBarSlots {
+interface ProjectionBarSlots {
   /** The settings of the tab showing, written to the rung the bar is on. */
   end: ReactNode;
   /** What waits behind the cog; nothing at all draws no cog. */
@@ -37,7 +37,7 @@ export interface ProjectionBarSlots {
 }
 
 /** What the tab showing is asked for, to fill the bar with. */
-export interface ProjectionBarSlotsInput {
+interface ProjectionBarSlotsInput {
   /** The tab showing. */
   tab: ProjectionTab;
   /** What the run produced. */

package/src/projection/ui/projectionBarStyles.ts

@@ -133,8 +133,8 @@ export function projectionBarEndStyle(metrics: OverlayMetrics): CSSProperties {
  *
  * On the narrowest figures the question mark is the glyph that goes, because
  * the reader still has to be able to reach the settings and the second tier —
- * so the paragraph it used to open is written at the head of the panel the cog
- * opens instead. Not one word of it is dropped in the move.
+ * so the paragraph it opens on a wider figure is written, whole, at the head
+ * of the panel the cog opens instead.
  *
  * It brings its own room and its own hairline, because the panel under it
  * brings both of those and the popover holding the two brings neither: a

package/src/projection/ui/projectionEllipse.ts

@@ -5,41 +5,68 @@
  * All of it in one module because the same size has to be written twice — in
  * the control that sets it and in the legend sentence that explains it — and a
  * pair like that drifts apart the moment each file spells it for itself.
+ *
+ * The map's flat outlines and the cloud's solid shells share it. They differ in
+ * one place only, and it is the one that matters: the same number of standard
+ * deviations holds a smaller share in three dimensions than in two, so every
+ * function that writes a share is told which figure it is written for.
  */
 
+import { chartShare } from '../../chart/core/chartLabels.ts';
 import type { OverlayOption } from '../../overlay/ui/OverlayRow.tsx';
 import type { EllipseSize } from '../../scatter/core/confidenceEllipse.ts';
 import { coverageForStandardDeviations } from '../../scatter/core/ellipseCoverage.ts';
+import { coverageForStandardDeviations3 } from '../../scatter3d/core/ellipsoidCoverage.ts';
+import { fillCopy } from '../core/fillCopy.ts';
+import type { ProjectionOutlineWords } from '../core/projectionPanelWords.ts';
 
 /**
  * How much of a group its outline holds, written the way a sentence wants it.
  *
  * A share rather than a multiple of the spread, because on a map a number of
  * standard deviations does not hold the fraction everyone has been taught it
- * does — two of them cover about 86 % of a group and not 95 % — and a legend
- * quoting the multiple is how a figure comes to promise more than it draws.
+ * does — two of them cover about 86 % of a flat group, 74 % of a solid one, and
+ * not 95 % of either — and a legend quoting the multiple is how a figure comes
+ * to promise more than it draws.
  * @param size - How large the outlines are, or `null` for none.
+ * @param figure - Whether the outline is the map's ellipse or the cloud's shell.
  * @returns The share, e.g. `95%`; the empty string when nothing is outlined.
  */
-export function ellipseCoverageText(size: EllipseSize | null): string {
+export function ellipseCoverageText(
+  size: EllipseSize | null,
+  figure: 'map' | 'space' = 'map',
+): string {
   if (size === null) return '';
   const share =
     size.kind === 'coverage'
       ? size.probability
-      : coverageForStandardDeviations(size.standardDeviations);
-  return `${Math.round(share * 100)}%`;
+      : figure === 'space'
+        ? coverageForStandardDeviations3(size.standardDeviations)
+        : coverageForStandardDeviations(size.standardDeviations);
+  return `${chartShare(share, 0)}%`;
 }
 
 /**
  * What one choice of the outline picker reads.
  * @param size - The size that choice stands for, or `null` for no outlines.
+ * @param words - How an outline size is written.
+ * @param figure - Whether the outline is the map's ellipse or the cloud's shell.
  * @returns The label, e.g. `95% of samples`, or `2 SD (about 86%)`.
  */
-export function ellipseSizeLabel(size: EllipseSize | null): string {
-  if (size === null) return NO_OUTLINES_LABEL;
-  const share = ellipseCoverageText(size);
-  if (size.kind === 'coverage') return `${share} of samples`;
-  return `${size.standardDeviations} SD (about ${share})`;
+export function ellipseSizeLabel(
+  size: EllipseSize | null,
+  words: ProjectionOutlineWords,
+  figure: 'map' | 'space' = 'map',
+): string {
+  if (size === null) {
+    return figure === 'space' ? words.noShells : words.noOutlines;
+  }
+  const share = ellipseCoverageText(size, figure);
+  if (size.kind === 'coverage') return fillCopy(words.coverage, { share });
+  return fillCopy(words.standardDeviations, {
+    count: String(size.standardDeviations),
+    share,
+  });
 }
 
 /**
@@ -47,24 +74,38 @@ export function ellipseSizeLabel(size: EllipseSize | null): string {
  *
  * A site that asked for a size of its own — a multiple of the spread, or a
  * share the four do not cover — keeps its place at the head of the list, so
- * opening the picker never silently changes the figure.
- * @param current - The size the map is drawn at, or `null` for no outlines.
+ * opening the picker never silently changes the figure. The map and the cloud
+ * offer the same shares, because a share means the same thing in both
+ * pictures.
+ * @param current - The size the figure is drawn at, or `null` for no outlines.
+ * @param words - How an outline size is written.
+ * @param figure - Whether the outline is the map's ellipse or the cloud's shell.
  * @returns The choices, in the order they are offered.
  */
-export function ellipseChoices(current: EllipseSize | null): OverlayOption[] {
+export function ellipseChoices(
+  current: EllipseSize | null,
+  words: ProjectionOutlineWords,
+  figure: 'map' | 'space' = 'map',
+): OverlayOption[] {
   const choices: OverlayOption[] = [
-    { value: NO_ELLIPSE, label: ellipseSizeLabel(null) },
+    { value: NO_ELLIPSE, label: ellipseSizeLabel(null, words, figure) },
   ];
   for (const probability of ELLIPSE_SHARES) {
     const size: EllipseSize = { kind: 'coverage', probability };
-    choices.push({ value: ellipseKey(size), label: ellipseSizeLabel(size) });
+    choices.push({
+      value: ellipseKey(size),
+      label: ellipseSizeLabel(size, words, figure),
+    });
   }
 
   const key = ellipseKey(current);
   for (const choice of choices) {
     if (choice.value === key) return choices;
   }
-  choices.splice(1, 0, { value: key, label: ellipseSizeLabel(current) });
+  choices.splice(1, 0, {
+    value: key,
+    label: ellipseSizeLabel(current, words, figure),
+  });
   return choices;
 }
 
@@ -101,4 +142,3 @@ export function ellipseSize(key: string): EllipseSize | null {
 const ELLIPSE_SHARES: readonly number[] = [0.5, 0.9, 0.95, 0.99];
 
 const NO_ELLIPSE = 'none';
-const NO_OUTLINES_LABEL = 'No outlines';

package/src/projection/ui/projectionFormat.ts

@@ -1,3 +1,5 @@
+import { formatTrimmed } from '../../format/core/numbers.ts';
+
 /**
  * A number as a hover card writes it.
  *
@@ -11,7 +13,7 @@
  */
 export function formatProjectionValue(value: number): string {
   if (!Number.isFinite(value)) return UNKNOWN_VALUE;
-  return String(Number(value.toFixed(DECIMALS)));
+  return formatTrimmed(value, DECIMALS);
 }
 
 const DECIMALS = 3;

package/src/projection/ui/projectionMapChoices.ts

@@ -8,6 +8,7 @@
  */
 
 import type { OverlayOption } from '../../overlay/ui/OverlayRow.tsx';
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
 import type {
   ProjectionColorBy,
   ProjectionOptions,
@@ -44,19 +45,20 @@ export function projectionColourChoices(
  * the one case where the share alone hides which size a site actually asked
  * for.
  * @param options - What the map is showing.
- * @param noOutlines - What "no outlines at all" reads.
+ * @param copy - The words the viewer writes: the bar's short "no outlines",
+ * and how a size is written in full.
  * @returns The choices, in the order they are offered.
  */
 export function projectionOutlineChoices(
   options: ProjectionOptions,
-  noOutlines: string,
+  copy: ProjectionCopy,
 ): readonly OverlayOption[] {
   const choices: OverlayOption[] = [];
-  for (const choice of ellipseChoices(options.ellipse)) {
+  for (const choice of ellipseChoices(options.ellipse, copy.outline)) {
     const share = ellipseCoverageText(ellipseSize(choice.value));
     choices.push({
       value: choice.value,
-      label: share === '' ? noOutlines : share,
+      label: share === '' ? copy.bar.noOutlines : share,
       title: choice.label,
     });
   }

package/src/projection/ui/projectionMapChrome.ts

@@ -8,19 +8,19 @@
  * honest as the controls around it change.
  */
 
+import { formatInteger } from '../../format/core/numbers.ts';
 import type { OverlayLegendEntry } from '../../overlay/ui/OverlayLegend.tsx';
 import type { EllipseSize } from '../../scatter/core/confidenceEllipse.ts';
+import { fillCopy } from '../core/fillCopy.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 { ellipsoidCoverageText } from './projectionEllipsoid.ts';
 import { UNGROUPED_INK } from './projectionMapModel.ts';
 
 /** What the map's chrome is built from. */
-export interface ProjectionMapChromeInput {
+interface ProjectionMapChromeInput {
   /** The words the map writes, already merged over the defaults. */
   copy: ProjectionCopy;
   /** The groups as the map colours them. */
@@ -96,7 +96,7 @@ export function projectionMapChrome(
         color: entry.color,
         shape: 'dot',
         count: entry.count,
-        note: thin ? NOT_OUTLINED_NOTE : undefined,
+        note: thin ? copy.legend.notOutlined : undefined,
       });
     }
     if (showGroupMeans) {
@@ -114,7 +114,7 @@ export function projectionMapChrome(
   if (hollow) {
     entries.push({
       id: 'projected',
-      label: HOLLOW_LEGEND_LABEL,
+      label: copy.legend.projected,
       color: 'var(--text-muted)',
       shape: 'ring',
     });
@@ -149,31 +149,28 @@ export function projectionSelectionSentence(
 ): string {
   if (count === 0) return copy.sentence.selectionNone;
   return fillCopy(copy.sentence.selection, {
-    count: count.toLocaleString(),
-    total: total.toLocaleString(),
+    count: formatInteger(count),
+    total: formatInteger(total),
   });
 }
 
-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 sentence over the legend.
  *
- * 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.
+ * 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.
+ * @param copy - The words the map writes.
+ * @param groups - The groups as the map colours them.
+ * @param colored - Whether colour stands for the group at all.
+ * @returns The title.
  */
-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;
+  if (!colored || groups.entries.length === 0) return copy.legend.shapes;
   return fillCopy(copy.legend.mapNoEllipse, {
     groups: groups.label.toLowerCase(),
   });
@@ -196,16 +193,14 @@ function captionFor(
   if (colored && ellipse !== null) {
     sentence += ` ${fillCopy(solid ? copy.legend.space : copy.legend.map, {
       groups: groups.label.toLowerCase(),
-      coverage: solid
-        ? ellipsoidCoverageText(ellipse)
-        : ellipseCoverageText(ellipse),
+      coverage: ellipseCoverageText(ellipse, figure),
     })}`;
   }
   if (skipped.length > 0) {
     const names = skipped.join(', ');
     sentence += ` ${fillCopy(copy.sentence.skippedGroups, { names })}`;
   }
-  if (hollow) sentence += ` ${HOLLOW_SENTENCE}`;
+  if (hollow) sentence += ` ${copy.sentence.projected}`;
   return sentence;
 }
 

package/src/projection/ui/projectionMapModel.ts

@@ -16,10 +16,8 @@ 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 { ScatterGroup } from '../../scatter/ui/scatterFigureProps.ts';
+import type { ScatterMarker } from '../../scatter/ui/scatterPlotProps.ts';
 import type {
   ProjectionMarker,
   ProjectionResult,

package/src/projection/ui/projectionMapView.ts

@@ -38,7 +38,7 @@ import {
 import { MINIMUM_SHELL_POINTS } from './projectionSpaceModel.ts';
 
 /** What {@link useProjectionMapView} needs. */
-export interface ProjectionMapViewInput {
+interface ProjectionMapViewInput {
   /** What the run produced, whatever produced it. */
   result: ProjectionResult;
   /** The words the viewer writes, already merged over the defaults. */

package/src/projection/ui/projectionPairsCeiling.ts

@@ -14,7 +14,7 @@ import {
 } from '../../scatter/ui/scatterMatrixLayout.ts';
 
 /** How few and how many components the grid may be asked to lay out. */
-export interface ProjectionPairsCeiling {
+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. */