react-cheminfo 0.22.0 → 0.23.0

package/src/projection/ui/projectionBarReadings.ts

@@ -13,6 +13,7 @@ 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 { NO_GROUPING } from '../core/projectionOptions.ts';
 import type { ResolvedProjectionGroups } from '../core/projectionSamples.ts';
 import type { ProjectionTab } from '../core/projectionTabs.ts';
 
@@ -48,7 +49,10 @@ interface ProjectionReadingsInput {
   copy: ProjectionCopy;
   /** What the figure is showing, already made safe against the result. */
   options: ProjectionOptions;
-  /** The groups as every figure draws them, whose colours the map writes. */
+  /**
+   * The grouping the figures are coloured by, whose colours the map writes;
+   * empty while nothing colours them.
+   */
   groups: ResolvedProjectionGroups;
 }
 
@@ -83,10 +87,9 @@ export function projectionBarReadings(
     ];
   }
   if (tab === 'space') {
-    const coverage =
-      options.colorBy === 'group' && groups.entries.length > 0
-        ? ellipseCoverageText(options.ellipse, 'space')
-        : '';
+    const coverage = isColoured(options, groups)
+      ? ellipseCoverageText(options.ellipse, 'space')
+      : '';
     return [
       {
         key: bar.key.cloudGesture,
@@ -163,14 +166,14 @@ export function projectionChipSettings(
  * Empty while the colour stands for nothing, so a bar that says `Nothing`
  * does not carry a row of dots contradicting it.
  * @param options - What the figure is showing.
- * @param groups - The groups as every figure draws them.
+ * @param groups - The grouping the figures are coloured by.
  * @returns The colours, in the order the figure draws them.
  */
 function projectionGroupColors(
   options: ProjectionOptions,
   groups: ResolvedProjectionGroups,
 ): readonly string[] {
-  if (options.colorBy !== 'group') return NO_COLORS;
+  if (!isColoured(options, groups)) return NO_COLORS;
   const colors: string[] = [];
   for (const entry of groups.entries) colors.push(entry.color);
   return colors;
@@ -195,7 +198,7 @@ function mapReadings(
   groups: ResolvedProjectionGroups,
 ): readonly ProjectionReading[] {
   const { bar, help } = copy;
-  const colored = options.colorBy === 'group';
+  const colored = isColoured(options, groups);
   const coverage = ellipseCoverageText(options.ellipse);
   return [
     {
@@ -212,5 +215,18 @@ function mapReadings(
   ];
 }
 
+/**
+ * Whether the colour stands for a grouping at all.
+ * @param options - What the figure is showing.
+ * @param groups - The grouping the figures are coloured by.
+ * @returns `true` when the dots are painted by group.
+ */
+function isColoured(
+  options: ProjectionOptions,
+  groups: ResolvedProjectionGroups,
+): boolean {
+  return options.colorBy !== NO_GROUPING && groups.entries.length > 0;
+}
+
 /** No colours at all, which is what an uncoloured map paints. */
 const NO_COLORS: readonly string[] = [];

package/src/projection/ui/projectionBarSlots.tsx

@@ -4,7 +4,10 @@ import type { OverlayTier } from '../../overlay/core/overlayTiers.ts';
 import type { ProjectionCopy } from '../core/projectionCopy.ts';
 import type { ProjectionOptions } from '../core/projectionOptions.ts';
 import type { ProjectionResult } from '../core/projectionResult.ts';
-import type { ResolvedProjectionGroups } from '../core/projectionSamples.ts';
+import type {
+  ProjectionGrouping,
+  ResolvedProjectionGroups,
+} from '../core/projectionSamples.ts';
 import type { ProjectionTab } from '../core/projectionTabs.ts';
 
 import { ProjectionMapControls } from './ProjectionMapControls.tsx';
@@ -50,8 +53,10 @@ interface ProjectionBarSlotsInput {
   map: ProjectionMapView;
   /** Every option, already made safe against the result. */
   options: ProjectionOptions;
-  /** The groups as every figure draws them. */
+  /** The grouping the figures are coloured by; empty while nothing colours them. */
   groups: ResolvedProjectionGroups;
+  /** Every grouping the samples carry, which the pickers choose between. */
+  groupings: readonly ProjectionGrouping[];
   /** The selected rows, as indices. */
   selected: readonly number[];
   /** Width of the viewer, in pixels. */
@@ -79,16 +84,14 @@ export function projectionBarSlots(
   input: ProjectionBarSlotsInput,
 ): ProjectionBarSlots {
   const { tab, result, copy, models, map, readings, tier } = input;
-  const { options, groups, selected, width, onChange } = input;
+  const { options, groups, groupings, selected, width, onChange } = input;
 
-  const hasGroups = groups.entries.length > 0;
-  const colored = options.colorBy === 'group' && hasGroups;
-  const shared = { options, onChange, copy, groupLabel: groups.label };
+  const colored = groups.entries.length > 0;
+  const shared = { options, onChange, copy, groupings };
 
   if (tab === 'pairs') {
     const pairs = {
       ...shared,
-      hasGroups,
       axisCount: result.axes.length,
       width,
     };
@@ -102,7 +105,6 @@ export function projectionBarSlots(
     const space = {
       ...shared,
       result,
-      hasGroups,
       selectedCount: selected.length,
       onResetView: map.resetSpaceView,
       onClearSelection: map.clearSelection,
@@ -144,7 +146,6 @@ export function projectionBarSlots(
   const forMap = {
     ...shared,
     result,
-    hasGroups,
     selectedCount: selected.length,
     onZoomToSelection: map.zoomToSelection,
     onResetView: map.resetView,

package/src/projection/ui/projectionMapChoices.ts

@@ -1,5 +1,5 @@
 /**
- * What the map's two settings offer, in the two lengths the bar needs.
+ * What the map's settings offer, in the lengths the bar needs.
  *
  * The same choices are written twice — once as bare shares on a value menu
  * whose own heading already says what they are shares of, and once as whole
@@ -9,10 +9,10 @@
 
 import type { OverlayOption } from '../../overlay/ui/OverlayRow.tsx';
 import type { ProjectionCopy } from '../core/projectionCopy.ts';
-import type {
-  ProjectionColorBy,
-  ProjectionOptions,
-} from '../core/projectionOptions.ts';
+import { resolveProjectionShapes } from '../core/projectionGroupings.ts';
+import type { ProjectionOptions } from '../core/projectionOptions.ts';
+import { NO_GROUPING } from '../core/projectionOptions.ts';
+import type { ProjectionGrouping } from '../core/projectionSamples.ts';
 
 import {
   ellipseChoices,
@@ -21,19 +21,76 @@ import {
 } from './projectionEllipse.ts';
 
 /**
- * What the colour may stand for.
- * @param groupLabel - What the set of groups is called.
+ * What the colour may stand for: each grouping the samples carry, or nothing.
+ * @param groupings - The groupings the samples carry.
  * @param uncoloured - What "the colour stands for nothing" reads.
- * @returns The two choices.
+ * @returns The choices, in the order the groupings were handed in.
  */
 export function projectionColourChoices(
-  groupLabel: string,
+  groupings: readonly ProjectionGrouping[],
   uncoloured: string,
-): ReadonlyArray<OverlayOption<ProjectionColorBy>> {
-  return [
-    { value: 'group', label: groupLabel },
-    { value: 'none', label: uncoloured },
-  ];
+): readonly OverlayOption[] {
+  const choices: OverlayOption[] = [];
+  for (const { id, label } of groupings) choices.push({ value: id, label });
+  choices.push({ value: NO_GROUPING, label: uncoloured });
+  return choices;
+}
+
+/**
+ * What the shape may stand for: each grouping the samples carry, or nothing.
+ *
+ * A grouping the colour already stands for is kept in the list but greyed, as
+ * is one of more groups than there are shapes, so the reader sees why it cannot
+ * be picked rather than wondering where it went.
+ * @param groupings - The groupings the samples carry.
+ * @param options - What the figure is showing, whose colour is taken.
+ * @param rows - How many rows there are, which is what a grouping is cut over.
+ * @param copy - The words the viewer writes.
+ * @returns The choices, in the order the groupings were handed in.
+ */
+export function projectionShapeChoices(
+  groupings: readonly ProjectionGrouping[],
+  options: ProjectionOptions,
+  rows: number,
+  copy: ProjectionCopy,
+): readonly OverlayOption[] {
+  const choices: OverlayOption[] = [];
+  for (const grouping of groupings) {
+    const { id, label } = grouping;
+    const reason =
+      id === options.colorBy
+        ? copy.reason.shapeIsColour
+        : resolveProjectionShapes(grouping, rows) === null
+          ? copy.reason.tooManyShapes
+          : undefined;
+    choices.push({
+      value: id,
+      label,
+      disabled: reason !== undefined,
+      title: reason,
+    });
+  }
+  choices.push({ value: NO_GROUPING, label: copy.bar.unshaped });
+  return choices;
+}
+
+/**
+ * What changes when the colour is given to another grouping.
+ *
+ * A grouping drawn as the shape that is picked for the colour swaps places
+ * with it rather than being dropped, so the reader never loses one of the two
+ * groupings they were comparing by trading them round.
+ * @param options - What the figure is showing.
+ * @param colorBy - The grouping picked for the colour.
+ * @returns The options that change.
+ */
+export function projectionColourPatch(
+  options: ProjectionOptions,
+  colorBy: string,
+): Partial<ProjectionOptions> {
+  return colorBy !== NO_GROUPING && colorBy === options.shapeBy
+    ? { colorBy, shapeBy: options.colorBy }
+    : { colorBy };
 }
 
 /**

package/src/projection/ui/projectionMapChrome.ts

@@ -8,13 +8,15 @@
  * 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 type { ProjectionMarker } from '../core/projectionResult.ts';
-import type { ResolvedProjectionGroups } from '../core/projectionSamples.ts';
+import type {
+  ResolvedProjectionGroups,
+  ResolvedProjectionShapes,
+} from '../core/projectionSamples.ts';
 
 import { ellipseCoverageText } from './projectionEllipse.ts';
 import { UNGROUPED_INK } from './projectionMapModel.ts';
@@ -27,6 +29,8 @@ interface ProjectionMapChromeInput {
   groups: ResolvedProjectionGroups;
   /** Whether colour stands for the group at all. */
   colored: boolean;
+  /** The grouping the dots are shaped by, or `null` while they are all discs. */
+  shapes: ResolvedProjectionShapes | null;
   /** How large the group outlines are, or `null` for none. */
   ellipse: EllipseSize | null;
   /** How many samples a group needs before it is outlined at all. */
@@ -82,6 +86,7 @@ export function projectionMapChrome(
   input: ProjectionMapChromeInput,
 ): ProjectionMapChrome {
   const { copy, groups, colored, ellipse, showGroupMeans, markers } = input;
+  const { shapes } = input;
   const { minimumPoints, fittedCount, total, figure = 'map' } = input;
   const entries: OverlayLegendEntry[] = [];
   const skipped: string[] = [];
@@ -108,6 +113,7 @@ export function projectionMapChrome(
       });
     }
   }
+  appendShapeEntries(entries, shapes);
   appendMarkerEntries(entries, markers, groups);
 
   const hollow = fittedCount < total;
@@ -121,7 +127,7 @@ export function projectionMapChrome(
   }
 
   return {
-    title: legendTitle(copy, groups, colored),
+    title: legendTitle(copy, groups, colored, shapes),
     entries,
     caption: captionFor(
       copy,
@@ -136,44 +142,60 @@ export function projectionMapChrome(
 }
 
 /**
- * The sentence reporting what a gesture picked out.
- * @param copy - The words the map writes.
- * @param count - How many samples are selected.
- * @param total - How many there are in all.
- * @returns The sentence.
- */
-export function projectionSelectionSentence(
-  copy: ProjectionCopy,
-  count: number,
-  total: number,
-): string {
-  if (count === 0) return copy.sentence.selectionNone;
-  return fillCopy(copy.sentence.selection, {
-    count: formatInteger(count),
-    total: formatInteger(total),
-  });
-}
-
-/**
- * The sentence over the legend.
+ * The sentence over the legend, naming what the colour and the shape stand
+ * for.
  *
- * 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.
+ * When neither stands for a grouping the entries left are all marks, 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 it 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.
+ * @param shapes - The grouping the dots are shaped by, or `null`.
  * @returns The title.
  */
 function legendTitle(
   copy: ProjectionCopy,
   groups: ResolvedProjectionGroups,
   colored: boolean,
+  shapes: ResolvedProjectionShapes | null,
 ): string {
-  if (!colored || groups.entries.length === 0) return copy.legend.shapes;
-  return fillCopy(copy.legend.mapNoEllipse, {
-    groups: groups.label.toLowerCase(),
-  });
+  const parts: string[] = [];
+  if (colored && groups.entries.length > 0) {
+    parts.push(
+      fillCopy(copy.legend.mapNoEllipse, {
+        groups: groups.label.toLowerCase(),
+      }),
+    );
+  }
+  if (shapes !== null) {
+    parts.push(
+      fillCopy(copy.legend.shapedBy, { shapes: shapes.label.toLowerCase() }),
+    );
+  }
+  return parts.length === 0 ? copy.legend.shapes : parts.join(' ');
+}
+
+/**
+ * One entry per shape, drawn in the muted ink: a colour on a shape's entry
+ * would claim a group of the colour grouping it does not stand for.
+ * @param entries - The legend, appended to in place.
+ * @param shapes - The grouping the dots are shaped by, or `null`.
+ */
+function appendShapeEntries(
+  entries: OverlayLegendEntry[],
+  shapes: ResolvedProjectionShapes | null,
+): void {
+  if (shapes === null) return;
+  for (const entry of shapes.entries) {
+    entries.push({
+      id: `shape-${entry.id}`,
+      label: entry.label,
+      color: SHAPE_INK,
+      shape: entry.shape,
+      count: entry.count,
+    });
+  }
 }
 
 function captionFor(
@@ -221,3 +243,6 @@ function appendMarkerEntries(
     });
   }
 }
+
+/** The ink a shape's entry is drawn in, the one the key uses for marks that name no colour. */
+const SHAPE_INK = 'var(--text-muted)';

package/src/projection/ui/projectionMapCorner.ts

@@ -0,0 +1,67 @@
+/**
+ * Which corner of the map the floating key takes.
+ *
+ * It is a module of its own because it is the one piece of the map that has to
+ * know where the dots fall before anything is drawn over them, and it is all
+ * arithmetic that can be checked without rendering anything.
+ */
+
+import { emptiestCorner } from '../../overlay/core/emptiestCorner.ts';
+import type { OverlayCorner } from '../../overlay/core/overlayPlacement.ts';
+
+import type { ProjectionMapCloud } from './projectionMapModel.ts';
+
+/**
+ * The corner of the map with the fewest dots under it.
+ *
+ * All four are offered. The chrome that asks is laid out inside the plot
+ * rectangle rather than over the figure's box, so no corner of it costs the
+ * reader an axis label, and the only thing left to weigh is how many samples
+ * each one would cover.
+ * @param cloud - Where every sample sits, in data units.
+ * @param xDomain - The range the horizontal axis covers.
+ * @param yDomain - The range the vertical axis covers.
+ * @param width - Width of the plot rectangle, in pixels.
+ * @param height - Its height.
+ * @returns The corner the card sits in.
+ */
+export function projectionMapCorner(
+  cloud: ProjectionMapCloud,
+  xDomain: readonly [number, number],
+  yDomain: readonly [number, number],
+  width: number,
+  height: number,
+): OverlayCorner {
+  return emptiestCorner(
+    placeAlong(cloud.x, xDomain, width, false),
+    placeAlong(cloud.y, yDomain, height, true),
+    { width, height, cardWidth: CARD_WIDTH, cardHeight: CARD_HEIGHT },
+  );
+}
+
+function placeAlong(
+  values: Float64Array,
+  domain: readonly [number, number],
+  size: number,
+  flip: boolean,
+): Float64Array {
+  const span = domain[1] - domain[0];
+  const factor = span === 0 ? 0 : size / span;
+  const pixels = new Float64Array(values.length);
+  for (let index = 0; index < values.length; index++) {
+    const along = ((values[index] ?? Number.NaN) - domain[0]) * factor;
+    pixels[index] = flip ? size - along : along;
+  }
+  return pixels;
+}
+
+/**
+ * How much of the plot the floating key is expected to cover.
+ *
+ * It is an estimate on purpose — the card has not been laid out when the
+ * corner is chosen — and it is the compact key's size rather than the roomier
+ * card the overlay domain assumes: a corner counted as three species wide
+ * would call a corner busy that the key never reaches.
+ */
+const CARD_WIDTH = 170;
+const CARD_HEIGHT = 84;

package/src/projection/ui/projectionMapModel.ts

@@ -1,5 +1,5 @@
 /**
- * Where a map's samples land, and which corner of the picture is free.
+ * Where a map's samples land, and what a plot is handed to draw them.
  *
  * It sits beside the component rather than inside it because a plot has to
  * know where its dots fall before it can decide where its controls may sit,
@@ -14,15 +14,17 @@ import {
 import { chartAxisTitle } from '../../chart/core/chartLabels.ts';
 import type { ChartViewport } from '../../chart/core/chartViewport.ts';
 import type { MatrixLike } from '../../chart/core/matrix.ts';
-import { emptiestCorner } from '../../overlay/core/emptiestCorner.ts';
-import type { OverlayCorner } from '../../overlay/core/overlayPlacement.ts';
+import type { OverlaySampleShape } from '../../overlay/core/overlayMarks.ts';
 import type { ScatterGroup } from '../../scatter/ui/scatterFigureProps.ts';
 import type { ScatterMarker } from '../../scatter/ui/scatterPlotProps.ts';
 import type {
   ProjectionMarker,
   ProjectionResult,
 } from '../core/projectionResult.ts';
-import type { ResolvedProjectionGroups } from '../core/projectionSamples.ts';
+import type {
+  ResolvedProjectionGroups,
+  ResolvedProjectionShapes,
+} from '../core/projectionSamples.ts';
 
 /** Where every sample sits on the map, in the embedding's own units. */
 export interface ProjectionMapCloud {
@@ -119,34 +121,6 @@ export function projectionMapViewport(
   };
 }
 
-/**
- * The corner of the map with the fewest dots under it.
- *
- * All four are offered. The chrome that asks is laid out inside the plot
- * rectangle rather than over the figure's box, so no corner of it costs the
- * reader an axis label, and the only thing left to weigh is how many samples
- * each one would cover.
- * @param cloud - Where every sample sits, in data units.
- * @param xDomain - The range the horizontal axis covers.
- * @param yDomain - The range the vertical axis covers.
- * @param width - Width of the plot rectangle, in pixels.
- * @param height - Its height.
- * @returns The corner the card sits in.
- */
-export function projectionMapCorner(
-  cloud: ProjectionMapCloud,
-  xDomain: readonly [number, number],
-  yDomain: readonly [number, number],
-  width: number,
-  height: number,
-): OverlayCorner {
-  return emptiestCorner(
-    placeAlong(cloud.x, xDomain, width, false),
-    placeAlong(cloud.y, yDomain, height, true),
-    { width, height, cardWidth: CARD_WIDTH, cardHeight: CARD_HEIGHT },
-  );
-}
-
 /**
  * The reference points of a result, placed on the two axes the map draws.
  * @param markers - The reference points, in the embedding's own units.
@@ -192,6 +166,20 @@ export function projectionScatterGroups(
   return plotted;
 }
 
+/**
+ * The shapes in the order a plot names them by index.
+ * @param shapes - The grouping the dots are shaped by, or `null`.
+ * @returns One shape per group, or nothing while every dot is a disc.
+ */
+export function projectionScatterShapes(
+  shapes: ResolvedProjectionShapes | null,
+): OverlaySampleShape[] | undefined {
+  if (shapes === null) return undefined;
+  const list: OverlaySampleShape[] = [];
+  for (const entry of shapes.entries) list.push(entry.shape);
+  return list;
+}
+
 /**
  * What one axis of the map is called.
  *
@@ -220,32 +208,5 @@ function withRoom(
   return [extent.min, extent.max];
 }
 
-function placeAlong(
-  values: Float64Array,
-  domain: readonly [number, number],
-  size: number,
-  flip: boolean,
-): Float64Array {
-  const span = domain[1] - domain[0];
-  const factor = span === 0 ? 0 : size / span;
-  const pixels = new Float64Array(values.length);
-  for (let index = 0; index < values.length; index++) {
-    const along = ((values[index] ?? Number.NaN) - domain[0]) * factor;
-    pixels[index] = flip ? size - along : along;
-  }
-  return pixels;
-}
-
-/**
- * How much of the plot the floating key is expected to cover.
- *
- * It is an estimate on purpose — the card has not been laid out when the
- * corner is chosen — and it is the compact key's size rather than the roomier
- * card the overlay domain assumes: a corner counted as three species wide
- * would call a corner busy that the key never reaches.
- */
-const CARD_WIDTH = 170;
-const CARD_HEIGHT = 84;
-
 /** Room left around a framed selection, as a share of its own span. */
 const SELECTION_ROOM = 0.1;

package/src/projection/ui/projectionMapView.ts

@@ -18,23 +18,25 @@ import type { OrbitCamera } from '../../scatter3d/core/orbitCamera.ts';
 import { DEFAULT_ORBIT_CAMERA } from '../../scatter3d/core/orbitCamera.ts';
 import type { ProjectionCopy } from '../core/projectionCopy.ts';
 import type { ProjectionOptions } from '../core/projectionOptions.ts';
+import { NO_GROUPING } from '../core/projectionOptions.ts';
 import type {
   ProjectionMarker,
   ProjectionResult,
 } from '../core/projectionResult.ts';
-import type { ResolvedProjectionGroups } from '../core/projectionSamples.ts';
+import type {
+  ResolvedProjectionGroups,
+  ResolvedProjectionShapes,
+} from '../core/projectionSamples.ts';
 
 import type { SelectionReport } from './ProjectionMapCaption.tsx';
 import type { ProjectionMapChrome } from './projectionMapChrome.ts';
-import {
-  projectionMapChrome,
-  projectionSelectionSentence,
-} from './projectionMapChrome.ts';
+import { projectionMapChrome } from './projectionMapChrome.ts';
 import {
   MINIMUM_OUTLINE_POINTS,
   projectionMapDomain,
   projectionMapViewport,
 } from './projectionMapModel.ts';
+import { projectionSelectionSentence } from './projectionSelectionSentence.ts';
 import { MINIMUM_SHELL_POINTS } from './projectionSpaceModel.ts';
 
 /** What {@link useProjectionMapView} needs. */
@@ -45,6 +47,8 @@ interface ProjectionMapViewInput {
   copy: ProjectionCopy;
   /** The groups as every figure of this viewer draws them. */
   groups: ResolvedProjectionGroups;
+  /** The grouping the dots are shaped by, or `null` while they are all discs. */
+  shapes: ResolvedProjectionShapes | null;
   /** Every option, already made safe against the result. */
   options: ProjectionOptions;
   /** The selected rows, as indices into the score matrix. */
@@ -93,7 +97,7 @@ export interface ProjectionMapView {
 export function useProjectionMapView(
   input: ProjectionMapViewInput,
 ): ProjectionMapView {
-  const { result, copy, groups, options, selected, onSettle } = input;
+  const { result, copy, groups, shapes, options, selected, onSettle } = input;
   const { scores, fittedCount, markers } = result;
   const { colorBy, ellipse, showGroupMeans, xAxis, yAxis } = options;
 
@@ -139,13 +143,14 @@ export function useProjectionMapView(
     setCloudZoom(1);
   }, []);
 
-  const colored = colorBy === 'group' && groups.entries.length > 0;
+  const colored = colorBy !== NO_GROUPING && groups.entries.length > 0;
   const chrome = useMemo(
     () =>
       projectionMapChrome({
         copy,
         groups,
         colored,
+        shapes,
         ellipse: colored ? ellipse : null,
         minimumPoints: MINIMUM_OUTLINE_POINTS,
         showGroupMeans,
@@ -157,6 +162,7 @@ export function useProjectionMapView(
       copy,
       groups,
       colored,
+      shapes,
       ellipse,
       showGroupMeans,
       markers,
@@ -171,6 +177,7 @@ export function useProjectionMapView(
         copy,
         groups,
         colored,
+        shapes,
         ellipse: colored ? ellipse : null,
         minimumPoints: MINIMUM_SHELL_POINTS,
         showGroupMeans: false,
@@ -179,7 +186,7 @@ export function useProjectionMapView(
         total: scores.rows,
         figure: 'space',
       }),
-    [copy, groups, colored, ellipse, fittedCount, scores],
+    [copy, groups, colored, shapes, ellipse, fittedCount, scores],
   );
 
   const settle = useCallback(

package/src/projection/ui/projectionSelectionSentence.ts

@@ -0,0 +1,22 @@
+import { formatInteger } from '../../format/core/numbers.ts';
+import { fillCopy } from '../core/fillCopy.ts';
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
+
+/**
+ * The sentence reporting what a gesture picked out.
+ * @param copy - The words the map writes.
+ * @param count - How many samples are selected.
+ * @param total - How many there are in all.
+ * @returns The sentence.
+ */
+export function projectionSelectionSentence(
+  copy: ProjectionCopy,
+  count: number,
+  total: number,
+): string {
+  if (count === 0) return copy.sentence.selectionNone;
+  return fillCopy(copy.sentence.selection, {
+    count: formatInteger(count),
+    total: formatInteger(total),
+  });
+}