react-cheminfo 0.10.0 → 0.12.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,10 +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 { ProjectionViewerProps } from './projectionViewerProps.ts';
-
 /**
  * A dimension-reduction result, shown as a map a reader can interrogate.
  *
@@ -30,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
@@ -45,6 +42,7 @@ export type { ProjectionViewerProps } from './projectionViewerProps.ts';
 export function ProjectionViewer(props: ProjectionViewerProps): ReactElement {
   const { result, samples, className, testId, onTrackVariable } = props;
   const { onHoverSample, touchLasso, height = PROJECTION_TAB_HEIGHT } = props;
+  const { onSampleDoubleClick } = props;
   const { wheelZoom = true } = props;
   const { formatValue = formatProjectionValue, fileName = 'projection' } =
     props;
@@ -58,6 +56,7 @@ export function ProjectionViewer(props: ProjectionViewerProps): ReactElement {
   const models = useProjectionModels({
     result,
     samples,
+    copy,
     options: state.options,
     selected: state.selected,
   });
@@ -77,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}
     >
@@ -110,6 +105,7 @@ export function ProjectionViewer(props: ProjectionViewerProps): ReactElement {
         panelId={panelId}
         strip={strip}
         onHoverSample={onHoverSample}
+        onSampleDoubleClick={onSampleDoubleClick}
         onTrackVariable={onTrackVariable}
         touchLasso={touchLasso}
         wheelZoom={wheelZoom}

package/src/projection/ui/index.ts

@@ -13,6 +13,7 @@
 
 export type { PcaViewerProps } from './PcaViewer.tsx';
 export { PcaViewer } from './PcaViewer.tsx';
+export type { ProjectionSampleOpen } from './projectionViewerProps.ts';
 export type { ProjectionSelection } from './projectionSelection.ts';
 export type { ProjectionVariableTrack } from './projectionVariablesModel.ts';
 export type { ProjectionViewerProps } from './projectionViewerProps.ts';

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/projectionBarModel.ts

@@ -71,7 +71,8 @@ export interface ProjectionBarRoom {
  */
 export function projectionBarGlyphs(tab: ProjectionTab): number {
   if (tab === 'shares') return SAVE_GLYPHS + 1;
-  return SAVE_GLYPHS + (tab === 'map' ? MAP_BAR_GLYPHS : BAR_GLYPHS);
+  const named = tab === 'map' || tab === 'space';
+  return SAVE_GLYPHS + (named ? MAP_BAR_GLYPHS : BAR_GLYPHS);
 }
 
 /** The one that takes the figure off the page, on every tab. */
@@ -80,7 +81,7 @@ const SAVE_GLYPHS = 1;
 /** The question mark and the cog, which almost every tab carries. */
 const BAR_GLYPHS = 2;
 
-/** Those two, and the map's own pair of switches. */
+/** Those two, and the pair of name switches the map and the cloud both carry. */
 const MAP_BAR_GLYPHS = 4;
 
 /**

package/src/projection/ui/projectionBarReadings.ts

@@ -8,14 +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 { WHOLE_SHARE } from './projectionTabStyles.ts';
 
 /** One setting on the bar, as the reader sees it right now. */
 export interface ProjectionReading {
@@ -40,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. */
@@ -60,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 [
@@ -81,12 +82,30 @@ 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: choice.cloudGesture[options.cloudGesture],
+      },
+      {
+        key: bar.key.ellipse,
+        label: help.ellipse.title,
+        value: coverage === '' ? bar.noOutlines : coverage,
+      },
+    ];
+  }
   if (tab === 'shares') {
     return [
       {
         key: bar.key.shareTarget,
         label: help.shareTarget.title,
-        value: `${Math.round(options.shareTarget * WHOLE_SHARE)}%`,
+        value: `${chartShare(options.shareTarget, 0)}%`,
         stepper: true,
       },
     ];
@@ -118,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

@@ -13,6 +13,8 @@ import { ProjectionPairsControls } from './ProjectionPairsControls.tsx';
 import { ProjectionPairsMore } from './ProjectionPairsMore.tsx';
 import { ProjectionSharesControls } from './ProjectionSharesControls.tsx';
 import { ProjectionSharesMore } from './ProjectionSharesMore.tsx';
+import { ProjectionSpaceControls } from './ProjectionSpaceControls.tsx';
+import { ProjectionSpaceMore } from './ProjectionSpaceMore.tsx';
 import { ProjectionVariablesControls } from './ProjectionVariablesControls.tsx';
 import { ProjectionVariablesMore } from './ProjectionVariablesMore.tsx';
 import type { ProjectionReading } from './projectionBarReadings.ts';
@@ -25,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. */
@@ -35,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. */
@@ -96,6 +98,23 @@ export function projectionBarSlots(
       info: projectionPairsInfo(copy, groups.label, colored),
     };
   }
+  if (tab === 'space') {
+    const space = {
+      ...shared,
+      result,
+      hasGroups,
+      selectedCount: selected.length,
+      onResetView: map.resetSpaceView,
+      onClearSelection: map.clearSelection,
+    };
+    return {
+      end: (
+        <ProjectionSpaceControls {...space} readings={readings} tier={tier} />
+      ),
+      more: <ProjectionSpaceMore {...space} />,
+      info: map.spaceChrome.caption,
+    };
+  }
   if (tab === 'variables') {
     const variables = {
       options,

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,
     });
   }