react-cheminfo 0.22.0 → 0.24.0

package/src/projection/core/resolveProjectionOptions.ts

@@ -8,8 +8,12 @@ import type {
   ProjectionOptionId,
   ProjectionOptions,
 } from './projectionOptions.ts';
-import { DEFAULT_PROJECTION_OPTIONS } from './projectionOptions.ts';
+import {
+  DEFAULT_PROJECTION_OPTIONS,
+  NO_GROUPING,
+} from './projectionOptions.ts';
 import type { ProjectionResult } from './projectionResult.ts';
+import type { ProjectionGrouping } from './projectionSamples.ts';
 import { drawableVariablesView } from './variablesView.ts';
 
 /**
@@ -19,15 +23,20 @@ import { drawableVariablesView } from './variablesView.ts';
  * A saved option outlives the data it was made on: reload with fewer samples
  * and axis eight no longer exists. Rather than let a plot ask for a column
  * that is not there, the two axes are pulled back inside what was computed and
- * kept apart, the counts are held inside what exists, and a view whose data is
- * missing falls back to `weights`.
+ * kept apart, the counts are held inside what exists, a view whose data is
+ * missing falls back to `weights`, and the colour and the shape name groupings
+ * the samples actually carry.
  * @param overrides - What the caller asked for.
  * @param result - The reduced space the options will be applied to.
+ * @param groupings - The groupings the samples carry.
+ * @default undefined — the colour and the shape are left as they were asked
+ * for, since nothing says which groupings exist
  * @returns Every option, complete and safe.
  */
 export function resolveProjectionOptions(
   overrides: Partial<ProjectionOptions> | undefined,
   result: ProjectionResult,
+  groupings?: readonly ProjectionGrouping[],
 ): ProjectionOptions {
   const axisCount = result.axes.length;
   const lastAxis = Math.max(0, axisCount - 1);
@@ -36,6 +45,7 @@ export function resolveProjectionOptions(
     pick(overrides, 'yAxis'),
     axisCount,
   );
+  const colorBy = colourChoice(pick(overrides, 'colorBy'), groupings);
 
   return {
     xAxis,
@@ -46,7 +56,8 @@ export function resolveProjectionOptions(
       lastAxis,
     ),
     cloudGesture: pick(overrides, 'cloudGesture'),
-    colorBy: pick(overrides, 'colorBy'),
+    colorBy,
+    shapeBy: shapeChoice(pick(overrides, 'shapeBy'), groupings, colorBy),
     ellipse: pick(overrides, 'ellipse'),
     pointRadius: atLeast(pick(overrides, 'pointRadius'), 3.5, 0),
     showGroupMeans: pick(overrides, 'showGroupMeans'),
@@ -90,6 +101,57 @@ function pick<Key extends ProjectionOptionId>(
   return value === undefined ? DEFAULT_PROJECTION_OPTIONS[key] : value;
 }
 
+/**
+ * The grouping the colour will actually stand for.
+ *
+ * A saved choice outlives the data it was made on, so an id no grouping
+ * carries — or the empty string, which is how "the usual one" is asked for —
+ * falls to the first grouping, while `none` stays none.
+ * @param wanted - The id asked for.
+ * @param groupings - The groupings the samples carry.
+ * @returns A grouping's id, or `none`.
+ */
+function colourChoice(
+  wanted: string,
+  groupings: readonly ProjectionGrouping[] | undefined,
+): string {
+  if (wanted === NO_GROUPING || groupings === undefined) return wanted;
+  const ids = groupingIds(groupings);
+  return ids.includes(wanted) ? wanted : (ids[0] ?? NO_GROUPING);
+}
+
+/**
+ * The grouping the shape will actually stand for.
+ *
+ * The usual one is the second grouping, since the first is the colour's; it is
+ * never read as "whichever the colour leaves free", or turning the colour off
+ * would suddenly give the dots shapes they did not have. Only when the colour
+ * has taken the second does the shape fall back to the first.
+ * @param wanted - The id asked for.
+ * @param groupings - The groupings the samples carry.
+ * @param colorBy - The grouping the colour already stands for.
+ * @returns A grouping's id, or `none`.
+ */
+function shapeChoice(
+  wanted: string,
+  groupings: readonly ProjectionGrouping[] | undefined,
+  colorBy: string,
+): string {
+  if (wanted === NO_GROUPING || groupings === undefined) return wanted;
+  const ids = groupingIds(groupings);
+  if (wanted !== colorBy && ids.includes(wanted)) return wanted;
+  const [first, second] = ids;
+  if (second === undefined) return NO_GROUPING;
+  if (second !== colorBy) return second;
+  return first ?? NO_GROUPING;
+}
+
+function groupingIds(groupings: readonly ProjectionGrouping[]): string[] {
+  const ids: string[] = [];
+  for (const { id } of groupings) ids.push(id);
+  return ids;
+}
+
 /**
  * An axis that is none of the ones already drawn.
  *

package/src/projection/ui/ProjectionBar.tsx

@@ -27,8 +27,8 @@ import {
   projectionFoldedCaptionStyle,
 } from './projectionBarStyles.ts';
 import type { ProjectionMapView } from './projectionMapView.ts';
+import type { ProjectionStateApi } from './projectionStateApi.ts';
 import type { ProjectionModels } from './projectionTabModels.ts';
-import type { ProjectionStateApi } from './useProjectionState.ts';
 
 /** What {@link ProjectionBar} needs. */
 interface ProjectionBarProps {
@@ -81,7 +81,8 @@ interface ProjectionBarProps {
 export function ProjectionBar(props: ProjectionBarProps): ReactElement {
   const { state, result, copy, models, map, baseId, panelId } = props;
   const { fileName, width } = props;
-  const { tab, tabs, options, groups, selected, setOptions, setTab } = state;
+  const { tab, tabs, options, groups, groupings, selected } = state;
+  const { setOptions, setTab } = state;
 
   // Read here rather than off the surface below, because the row the bar is
   // laid into is the surface's own parent: it has to know how tall a control
@@ -119,6 +120,7 @@ export function ProjectionBar(props: ProjectionBarProps): ReactElement {
     map,
     options,
     groups,
+    groupings,
     selected,
     width,
     readings,

package/src/projection/ui/ProjectionGroupingPickers.tsx

@@ -0,0 +1,91 @@
+import type { ReactElement } from 'react';
+
+import { OverlaySegmented } from '../../overlay/ui/OverlaySegmented.tsx';
+import { OverlaySelect } from '../../overlay/ui/OverlaySelect.tsx';
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
+import type { ProjectionOptions } from '../core/projectionOptions.ts';
+import type { ProjectionGrouping } from '../core/projectionSamples.ts';
+
+import {
+  projectionColourChoices,
+  projectionColourPatch,
+  projectionShapeChoices,
+} from './projectionMapChoices.ts';
+
+/** What a grouping picker needs. */
+interface ProjectionGroupingPickerProps {
+  /** What the figure is showing, already resolved against the result. */
+  options: ProjectionOptions;
+  /** Called with only the options that changed. */
+  onChange: (patch: Partial<ProjectionOptions>) => void;
+  /** The words the viewer writes. */
+  copy: ProjectionCopy;
+  /** Every grouping the samples carry. */
+  groupings: readonly ProjectionGrouping[];
+  /** What the setting is called beside the control. */
+  label: string;
+}
+
+/** What the shape picker needs on top of what every grouping picker takes. */
+interface ProjectionShapePickerProps extends ProjectionGroupingPickerProps {
+  /** How many rows there are, which is what a grouping is cut over. */
+  rows: number;
+}
+
+/**
+ * What the colour stands for, as segments while the choices fit on one row
+ * and as a list past that.
+ * @param props - See {@link ProjectionGroupingPickerProps}.
+ * @returns The picker, greyed while the samples carry no grouping.
+ */
+export function ProjectionColourPicker(
+  props: ProjectionGroupingPickerProps,
+): ReactElement {
+  const { options, onChange, copy, groupings, label } = props;
+  const choices = projectionColourChoices(groupings, copy.bar.uncoloured);
+  const Picker =
+    choices.length > MOST_SEGMENTS ? OverlaySelect : OverlaySegmented;
+
+  return (
+    <Picker
+      label={label}
+      help={copy.help.colorBy}
+      value={options.colorBy}
+      disabled={groupings.length === 0}
+      options={choices}
+      onChange={(colorBy: string) =>
+        onChange(projectionColourPatch(options, colorBy))
+      }
+    />
+  );
+}
+
+/**
+ * What the shape stands for. It is always a list, so a grouping that cannot be
+ * shaped keeps its name, greyed, with the reason on the pointer.
+ * @param props - See {@link ProjectionShapePickerProps}.
+ * @returns The picker, greyed while the samples carry no grouping.
+ */
+export function ProjectionShapePicker(
+  props: ProjectionShapePickerProps,
+): ReactElement {
+  const { options, onChange, copy, groupings, label, rows } = props;
+
+  return (
+    <OverlaySelect
+      label={label}
+      help={copy.help.shapeBy}
+      value={options.shapeBy}
+      disabled={groupings.length === 0}
+      options={projectionShapeChoices(groupings, options, rows, copy)}
+      onChange={(shapeBy) => onChange({ shapeBy })}
+    />
+  );
+}
+
+/**
+ * How many choices a row of segments holds before it is written as a list: a
+ * segment carries a grouping's whole name, and past three they no longer fit
+ * the width of a panel.
+ */
+const MOST_SEGMENTS = 3;

package/src/projection/ui/ProjectionMapControls.tsx

@@ -2,16 +2,15 @@ import type { ReactElement } from 'react';
 
 import type { OverlayTier } from '../../overlay/core/overlayTiers.ts';
 import { OverlayChip } from '../../overlay/ui/OverlayChip.tsx';
-import { OverlaySegmented } from '../../overlay/ui/OverlaySegmented.tsx';
 import { OverlaySelect } from '../../overlay/ui/OverlaySelect.tsx';
 import { OverlayToggle } from '../../overlay/ui/OverlayToggle.tsx';
 import { OverlayValueMenu } from '../../overlay/ui/OverlayValueMenu.tsx';
 import type { ProjectionCopy } from '../core/projectionCopy.ts';
-import type {
-  ProjectionColorBy,
-  ProjectionOptions,
-} from '../core/projectionOptions.ts';
+import type { ProjectionOptions } from '../core/projectionOptions.ts';
+import { NO_GROUPING } from '../core/projectionOptions.ts';
+import type { ProjectionGrouping } from '../core/projectionSamples.ts';
 
+import { ProjectionColourPicker } from './ProjectionGroupingPickers.tsx';
 import type { ProjectionReading } from './projectionBarReadings.ts';
 import { projectionChipSettings } from './projectionBarReadings.ts';
 import {
@@ -21,6 +20,7 @@ import {
 } from './projectionEllipse.ts';
 import {
   projectionColourChoices,
+  projectionColourPatch,
   projectionOutlineChoices,
 } from './projectionMapChoices.ts';
 
@@ -32,15 +32,13 @@ export interface ProjectionMapControlsProps {
   onChange: (patch: Partial<ProjectionOptions>) => void;
   /** The words the bar writes, already merged over the defaults. */
   copy: ProjectionCopy;
-  /** What the set of groups is called, which is what `Colour by` offers. */
-  groupLabel: string;
   /**
-   * Whether the samples carry groups at all. Without them the colour and the
-   * outlines stand for nothing, so their controls are greyed rather than
-   * removed: a reader who cannot find a control assumes the figure has none.
-   * @default false
+   * Every grouping the samples carry, which is what `Colour by` offers.
+   * Without one the colour and the outlines stand for nothing, so their
+   * controls are greyed rather than removed: a reader who cannot find a
+   * control assumes the figure has none.
    */
-  hasGroups?: boolean;
+  groupings: readonly ProjectionGrouping[];
   /**
    * What the two settings currently read, with the figure's own colours. They
    * are built once for the bar and handed down rather than spelled again here,
@@ -88,18 +86,18 @@ export interface ProjectionMapControlsProps {
 export function ProjectionMapControls(
   props: ProjectionMapControlsProps,
 ): ReactElement {
-  const { options, onChange, copy, groupLabel, hasGroups = false } = props;
+  const { options, onChange, copy, groupings } = props;
   const { readings = NO_READINGS, tier = 'full' } = props;
   const { bar, help, reason } = copy;
 
-  const uncoloured = !hasGroups || options.colorBy === 'none';
+  const hasGroups = groupings.length > 0;
+  const uncoloured = !hasGroups || options.colorBy === NO_GROUPING;
   const settings = (
     <MapSettings
       options={options}
       onChange={onChange}
       copy={copy}
-      groupLabel={groupLabel}
-      hasGroups={hasGroups}
+      groupings={groupings}
     />
   );
 
@@ -142,7 +140,7 @@ export function ProjectionMapControls(
 
   return (
     <>
-      <OverlayValueMenu<ProjectionColorBy>
+      <OverlayValueMenu
         label={help.colorBy.title}
         keyWord={bar.key.colorBy}
         showKey={tier === 'full'}
@@ -150,8 +148,10 @@ export function ProjectionMapControls(
         swatches={swatchesOf(readings)}
         disabled={!hasGroups}
         disabledReason={reason.noGroups}
-        options={projectionColourChoices(groupLabel, bar.uncoloured)}
-        onChange={(colorBy) => onChange({ colorBy })}
+        options={projectionColourChoices(groupings, bar.uncoloured)}
+        onChange={(colorBy) =>
+          onChange(projectionColourPatch(options, colorBy))
+        }
       />
       <OverlayValueMenu
         label={help.ellipse.title}
@@ -191,10 +191,8 @@ interface MapSettingsProps {
   onChange: (patch: Partial<ProjectionOptions>) => void;
   /** The words the panel writes. */
   copy: ProjectionCopy;
-  /** What the set of groups is called. */
-  groupLabel: string;
-  /** Whether the samples carry groups at all. */
-  hasGroups: boolean;
+  /** Every grouping the samples carry. */
+  groupings: readonly ProjectionGrouping[];
 }
 
 /**
@@ -207,24 +205,23 @@ interface MapSettingsProps {
  * @returns The captioned controls.
  */
 function MapSettings(props: MapSettingsProps): ReactElement {
-  const { options, onChange, copy, groupLabel, hasGroups } = props;
-  const { bar, help, outline } = copy;
+  const { options, onChange, copy, groupings } = props;
+  const { help, outline } = copy;
 
   return (
     <>
-      <OverlaySegmented<ProjectionColorBy>
+      <ProjectionColourPicker
         label={help.colorBy.title}
-        help={help.colorBy}
-        value={options.colorBy}
-        disabled={!hasGroups}
-        options={projectionColourChoices(groupLabel, bar.uncoloured)}
-        onChange={(colorBy) => onChange({ colorBy })}
+        options={options}
+        onChange={onChange}
+        copy={copy}
+        groupings={groupings}
       />
       <OverlaySelect
         label={help.ellipse.title}
         help={help.ellipse}
         value={ellipseKey(options.ellipse)}
-        disabled={!hasGroups || options.colorBy === 'none'}
+        disabled={groupings.length === 0 || options.colorBy === NO_GROUPING}
         options={ellipseChoices(options.ellipse, outline)}
         onChange={(value) => onChange({ ellipse: ellipseSize(value) })}
       />

package/src/projection/ui/ProjectionMapLegend.tsx

@@ -3,8 +3,8 @@ import type { ReactElement } from 'react';
 import type { OverlayLegendEntry } from '../../overlay/ui/OverlayLegend.tsx';
 import { OverlayLegend } from '../../overlay/ui/OverlayLegend.tsx';
 
+import { projectionMapCorner } from './projectionMapCorner.ts';
 import type { ProjectionMapCloud } from './projectionMapModel.ts';
-import { projectionMapCorner } from './projectionMapModel.ts';
 import {
   PROJECTION_PLOT_AREA_STYLE,
   PROJECTION_PLOT_ROOM,

package/src/projection/ui/ProjectionMapMore.tsx

@@ -8,9 +8,11 @@ import { OverlaySegmented } from '../../overlay/ui/OverlaySegmented.tsx';
 import { OverlaySelect } from '../../overlay/ui/OverlaySelect.tsx';
 import { OverlayToggle } from '../../overlay/ui/OverlayToggle.tsx';
 import type { ScatterSelectionMode } from '../../scatter/core/scatterSelection.ts';
+import { NO_GROUPING } from '../core/projectionOptions.ts';
 import type { ProjectionResult } from '../core/projectionResult.ts';
 import { PROJECTION_TAB_DEFAULTS } from '../core/projectionTabDefaults.ts';
 
+import { ProjectionShapePicker } from './ProjectionGroupingPickers.tsx';
 import type { ProjectionMapControlsProps } from './ProjectionMapControls.tsx';
 import { projectionAxisChoices } from './projectionAxisChoices.ts';
 import { projectionSelectModeChoices } from './projectionWordChoices.ts';
@@ -34,8 +36,8 @@ interface ProjectionMapMoreProps extends ProjectionMapControlsProps {
 }
 
 /**
- * What the map keeps behind the cog: the axes, the dot size, what a drag does,
- * and the three buttons that act rather than change.
+ * What the map keeps behind the cog: the axes, the dot size and shape, what a
+ * drag does, and the three buttons that act rather than change.
  *
  * Five settings is where a flat list stops being scannable, so they are filed
  * under three headings — the two directions of the picture, the marks drawn in
@@ -54,13 +56,13 @@ interface ProjectionMapMoreProps extends ProjectionMapControlsProps {
  * @returns The panel behind the cog.
  */
 export function ProjectionMapMore(props: ProjectionMapMoreProps): ReactElement {
-  const { result, options, onChange, copy, hasGroups = false } = props;
+  const { result, options, onChange, copy, groupings } = props;
   const { selectedCount = 0, onZoomToSelection } = props;
   const { onResetView, onClearSelection } = props;
   const { action, help, panel, reason, tab } = copy;
 
   const nothingPicked = selectedCount === 0;
-  const uncoloured = !hasGroups || options.colorBy === 'none';
+  const uncoloured = groupings.length === 0 || options.colorBy === NO_GROUPING;
 
   return (
     <OverlayPanel
@@ -124,6 +126,14 @@ export function ProjectionMapMore(props: ProjectionMapMoreProps): ReactElement {
           unit="px"
           onChange={(pointRadius) => onChange({ pointRadius })}
         />
+        <ProjectionShapePicker
+          label={panel.name.shapeBy}
+          options={options}
+          onChange={onChange}
+          copy={copy}
+          groupings={groupings}
+          rows={result.scores.rows}
+        />
         <OverlayToggle
           label={panel.name.showGroupMeans}
           help={help.showGroupMeans}

package/src/projection/ui/ProjectionMapTab.tsx

@@ -7,11 +7,15 @@ import type { ScatterPointOpen } from '../../scatter/ui/scatterFigureProps.ts';
 import type { SelectionChange } from '../../scatter/ui/useScatterSelection.ts';
 import type { ProjectionCopy } from '../core/projectionCopy.ts';
 import type { ProjectionOptions } from '../core/projectionOptions.ts';
+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 { ProjectionMapCaption } from './ProjectionMapCaption.tsx';
@@ -25,14 +29,23 @@ import {
   projectionMapDomain,
   projectionMapMarkers,
   projectionScatterGroups,
+  projectionScatterShapes,
 } from './projectionMapModel.ts';
 
 /** What {@link ProjectionMapTab} needs. */
 interface ProjectionMapTabProps {
   /** What the run produced, whatever produced it. */
   result: ProjectionResult;
-  /** The groups, resolved once by the viewer so every tab colours alike. */
+  /**
+   * The grouping the dots are coloured by, resolved once by the viewer so every
+   * tab colours alike; empty while the colour stands for nothing.
+   */
   groups: ResolvedProjectionGroups;
+  /**
+   * The grouping the dots are shaped by, resolved once by the viewer.
+   * @default null — every dot is a disc
+   */
+  shapes?: ResolvedProjectionShapes | null;
   /** What the map is showing, already resolved against `result`. */
   options: ProjectionOptions;
   /** The words the map writes, already merged over the defaults. */
@@ -44,7 +57,7 @@ interface ProjectionMapTabProps {
    * "Sample ID" setting to write beside its dot.
    * @default undefined — the setting has nothing to write and draws nothing
    */
-  ids?: readonly string[];
+  names?: readonly string[];
   /** Width of the figure, in pixels. */
   width: number;
   /** Height of the figure, in pixels. */
@@ -110,9 +123,10 @@ interface ProjectionMapTabProps {
  * The map: one dot per sample, an outline per group, and a key floating in the
  * emptiest corner of the plot.
  *
- * Colour stands for the group and for nothing else, and a selected dot keeps
- * its colour and gains a ring — recolouring it would trade the answer the
- * reader came for against the question they have just asked. A sample the
+ * Colour stands for one grouping and shape, when there is a second, for that
+ * one, and a selected dot keeps both and gains a ring — recolouring it would
+ * trade the answer the reader came for against the question they have just
+ * asked. A sample the
  * model was built from is drawn filled and one placed into the finished model
  * afterwards is drawn hollow, because the second kind can land anywhere and
  * its landing far out is the finding rather than a fault.
@@ -125,7 +139,8 @@ interface ProjectionMapTabProps {
  */
 export function ProjectionMapTab(props: ProjectionMapTabProps): ReactElement {
   const { result, groups, options, copy, chrome, width, height } = props;
-  const { ids, selected, viewport = null, report = null } = props;
+  const { names, shapes = null, selected } = props;
+  const { viewport = null, report = null } = props;
   const { onSelectionChange, onHoverChange, hoverCard } = props;
   const { onPointDoubleClick } = props;
   const { onViewportChange, wheelZoom, touchLasso, testId } = props;
@@ -147,7 +162,8 @@ export function ProjectionMapTab(props: ProjectionMapTabProps): ReactElement {
     [scores, yAxis],
   );
 
-  const colored = colorBy === 'group' && groups.entries.length > 0;
+  const shapeList = useMemo(() => projectionScatterShapes(shapes), [shapes]);
+  const colored = colorBy !== NO_GROUPING && groups.entries.length > 0;
   const ellipse = colored ? outlines : null;
 
   return (
@@ -160,11 +176,13 @@ export function ProjectionMapTab(props: ProjectionMapTabProps): ReactElement {
       yAxis={{ domain: yDomain, label: projectionAxisTitle(result, yAxis) }}
       groupOf={colored ? groups.groupOf : undefined}
       groups={colored ? projectionScatterGroups(groups) : undefined}
+      shapeOf={shapes?.shapeOf}
+      shapes={shapeList}
       ellipse={ellipse}
       ellipseMinimumPoints={MINIMUM_OUTLINE_POINTS}
       showGroupMeans={colored && showGroupMeans}
       showGroupLabels={colored && showGroupLabels}
-      pointLabels={showIds ? ids : undefined}
+      pointLabels={showIds ? names : undefined}
       markers={projectionMapMarkers(
         markers ?? NO_MARKERS,
         groups,

package/src/projection/ui/ProjectionPairsMore.tsx

@@ -2,15 +2,12 @@ import type { ReactElement } from 'react';
 
 import { OverlayNumber } from '../../overlay/ui/OverlayNumber.tsx';
 import { OverlayPanel } from '../../overlay/ui/OverlayPanel.tsx';
-import { OverlaySegmented } from '../../overlay/ui/OverlaySegmented.tsx';
 import type { ProjectionCopy } from '../core/projectionCopy.ts';
-import type {
-  ProjectionColorBy,
-  ProjectionOptions,
-} from '../core/projectionOptions.ts';
+import type { ProjectionOptions } from '../core/projectionOptions.ts';
+import type { ProjectionGrouping } from '../core/projectionSamples.ts';
 import { PROJECTION_TAB_DEFAULTS } from '../core/projectionTabDefaults.ts';
 
-import { projectionColourChoices } from './projectionMapChoices.ts';
+import { ProjectionColourPicker } from './ProjectionGroupingPickers.tsx';
 import { projectionPairsCeiling } from './projectionPairsCeiling.ts';
 
 /** What the grid keeps behind the cog is drawn from. */
@@ -21,17 +18,12 @@ interface ProjectionPairsMoreProps {
   onChange: (patch: Partial<ProjectionOptions>) => void;
   /** The words the bar writes, already merged over the defaults. */
   copy: ProjectionCopy;
-  /** What the set of groups is called, which is what `Colour by` offers. */
-  groupLabel: string;
+  /** Every grouping the samples carry, which is what `Colour by` offers. */
+  groupings: readonly ProjectionGrouping[];
   /** How many components the run produced, which caps the grid. */
   axisCount: number;
   /** Width of the figure, in pixels, which caps it again. */
   width: number;
-  /**
-   * Whether the samples carry groups at all.
-   * @default false
-   */
-  hasGroups?: boolean;
 }
 
 /**
@@ -52,9 +44,9 @@ interface ProjectionPairsMoreProps {
 export function ProjectionPairsMore(
   props: ProjectionPairsMoreProps,
 ): ReactElement {
-  const { options, onChange, copy, groupLabel, hasGroups = false } = props;
+  const { options, onChange, copy, groupings } = props;
   const { axisCount, width } = props;
-  const { bar, help, panel, tab } = copy;
+  const { help, panel, tab } = copy;
   const ceiling = projectionPairsCeiling(axisCount, width);
 
   return (
@@ -70,13 +62,12 @@ export function ProjectionPairsMore(
         max={ceiling.max}
         onChange={(pairCount) => onChange({ pairCount })}
       />
-      <OverlaySegmented<ProjectionColorBy>
+      <ProjectionColourPicker
         label={panel.name.colorBy}
-        help={help.colorBy}
-        value={options.colorBy}
-        disabled={!hasGroups}
-        options={projectionColourChoices(groupLabel, bar.uncoloured)}
-        onChange={(colorBy) => onChange({ colorBy })}
+        options={options}
+        onChange={onChange}
+        copy={copy}
+        groupings={groupings}
       />
       <OverlayNumber
         label={panel.name.pointRadius}

package/src/projection/ui/ProjectionPairsTab.tsx

@@ -11,7 +11,10 @@ import { fillCopy } from '../core/fillCopy.ts';
 import type { ProjectionCopy } from '../core/projectionCopy.ts';
 import { PROJECTION_COPY } from '../core/projectionCopy.ts';
 import type { ProjectionOptions } from '../core/projectionOptions.ts';
-import { DEFAULT_PROJECTION_OPTIONS } from '../core/projectionOptions.ts';
+import {
+  DEFAULT_PROJECTION_OPTIONS,
+  NO_GROUPING,
+} from '../core/projectionOptions.ts';
 import type { ProjectionResult } from '../core/projectionResult.ts';
 import type { ResolvedProjectionGroups } from '../core/projectionSamples.ts';
 
@@ -96,7 +99,7 @@ export function ProjectionPairsTab(
     [groups],
   );
 
-  const colored = options.colorBy === 'group' && inks.length > 0;
+  const colored = options.colorBy !== NO_GROUPING && inks.length > 0;
 
   return (
     <div style={{ minHeight: height }} data-testid={testId}>

package/src/projection/ui/ProjectionPanel.tsx

@@ -13,10 +13,10 @@ import { ProjectionSharesTab } from './ProjectionSharesTab.tsx';
 import { ProjectionSpaceTab } from './ProjectionSpaceTab.tsx';
 import { ProjectionVariablesTab } from './ProjectionVariablesTab.tsx';
 import type { ProjectionMapView } from './projectionMapView.ts';
+import type { ProjectionStateApi } from './projectionStateApi.ts';
 import type { ProjectionModels } from './projectionTabModels.ts';
 import type { ProjectionVariableTrack } from './projectionVariablesModel.ts';
 import type { ProjectionSampleOpen } from './projectionViewerProps.ts';
-import type { ProjectionStateApi } from './useProjectionState.ts';
 
 /** What {@link ProjectionPanel} needs. */
 interface ProjectionPanelProps {
@@ -172,7 +172,8 @@ export function ProjectionPanel(props: ProjectionPanelProps): ReactElement {
           options={state.options}
           copy={copy}
           chrome={map.spaceChrome}
-          ids={samples.ids}
+          shapes={state.shapes}
+          names={samples.labels ?? samples.ids}
           width={width}
           height={height}
           selected={state.selected}
@@ -192,6 +193,7 @@ export function ProjectionPanel(props: ProjectionPanelProps): ReactElement {
                 result={result}
                 samples={samples}
                 groups={state.groups}
+                colorBy={state.options.colorBy}
                 xAxis={state.options.xAxis}
                 yAxis={state.options.yAxis}
                 zAxis={state.options.zAxis}
@@ -212,7 +214,8 @@ export function ProjectionPanel(props: ProjectionPanelProps): ReactElement {
           options={state.options}
           copy={copy}
           chrome={map.chrome}
-          ids={samples.ids}
+          shapes={state.shapes}
+          names={samples.labels ?? samples.ids}
           viewport={map.viewport}
           onViewportChange={map.setViewport}
           wheelZoom={wheelZoom}
@@ -231,6 +234,7 @@ export function ProjectionPanel(props: ProjectionPanelProps): ReactElement {
                 result={result}
                 samples={samples}
                 groups={state.groups}
+                colorBy={state.options.colorBy}
                 xAxis={state.options.xAxis}
                 yAxis={state.options.yAxis}
                 x={anchor.x}