react-cheminfo 0.21.0 → 0.23.0

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}

package/src/projection/ui/ProjectionReadout.tsx

@@ -19,8 +19,14 @@ interface ProjectionReadoutProps {
   result: ProjectionResult;
   /** Who the rows are. */
   samples: ProjectionSamples;
-  /** The groups as the figure draws them, for the row's group and its colour. */
+  /** The grouping the figure is coloured by, for the colour of the row's group. */
   groups: ResolvedProjectionGroups;
+  /**
+   * Which grouping colours the figure, so the row of that grouping carries the
+   * colour its dot is drawn in.
+   * @default undefined — no row carries a colour
+   */
+  colorBy?: string;
   /** Which axis is drawn horizontally, from 0. */
   xAxis: number;
   /** Which axis is drawn vertically. */
@@ -85,6 +91,7 @@ export function ProjectionReadout(props: ProjectionReadoutProps): ReactElement {
     result,
     samples,
     groups,
+    colorBy,
     xAxis,
     yAxis,
     zAxis,
@@ -104,8 +111,12 @@ export function ProjectionReadout(props: ProjectionReadoutProps): ReactElement {
     [xAxis, yAxis, zAxis],
   );
   const rows = useMemo(
-    () => readoutRows(index, result, samples, groups, drawn, formatValue),
-    [drawn, formatValue, groups, index, result, samples],
+    () =>
+      readoutRows(index, result, samples, drawn, formatValue, {
+        groups,
+        colorBy,
+      }),
+    [colorBy, drawn, formatValue, groups, index, result, samples],
   );
 
   return (
@@ -114,7 +125,7 @@ export function ProjectionReadout(props: ProjectionReadoutProps): ReactElement {
       y={y}
       boxWidth={boxWidth}
       boxHeight={boxHeight}
-      title={samples.ids[index] ?? ''}
+      title={samples.labels?.[index] ?? samples.ids[index] ?? ''}
       rows={rows}
       maxRows={maxRows}
       pinned={pinned}
@@ -128,9 +139,9 @@ function readoutRows(
   index: number,
   result: ProjectionResult,
   samples: ProjectionSamples,
-  groups: ResolvedProjectionGroups,
   drawn: readonly number[],
   formatValue: (value: number) => string,
+  coloured: { groups: ResolvedProjectionGroups; colorBy?: string },
 ): OverlayReadoutRow[] {
   const rows: OverlayReadoutRow[] = [];
   const { axes, scores } = result;
@@ -145,9 +156,18 @@ function readoutRows(
     });
   }
 
-  const group = groups.entries[groups.groupOf[index] ?? -1];
-  if (group !== undefined) {
-    rows.push({ label: groups.label, value: group.label, color: group.color });
+  // Every grouping is written, the one the dots are coloured by with its
+  // colour: a card naming only the colour's group would hide the very
+  // grouping the shapes stand for.
+  const { groups, colorBy } = coloured;
+  for (const grouping of samples.groupings ?? []) {
+    const value = grouping.groups[index];
+    if (value === undefined) continue;
+    const group =
+      grouping.id === colorBy
+        ? groups.entries[groups.groupOf[index] ?? -1]
+        : undefined;
+    rows.push({ label: grouping.label, value, color: group?.color });
   }
 
   if (known && samples.fields !== undefined) {

package/src/projection/ui/ProjectionSpaceControls.tsx

@@ -8,11 +8,11 @@ import { OverlayToggle } from '../../overlay/ui/OverlayToggle.tsx';
 import { OverlayValueMenu } from '../../overlay/ui/OverlayValueMenu.tsx';
 import type { CloudGesture } from '../../scatter3d/core/cloudGesture.ts';
 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 {
@@ -20,7 +20,6 @@ import {
   ellipseKey,
   ellipseSize,
 } from './projectionEllipse.ts';
-import { projectionColourChoices } from './projectionMapChoices.ts';
 import { projectionCloudGestureChoices } from './projectionWordChoices.ts';
 
 /** What the cloud's controls are drawn from, wherever in the bar they sit. */
@@ -31,14 +30,11 @@ export interface ProjectionSpaceControlsProps {
   onChange: (patch: Partial<ProjectionOptions>) => void;
   /** The words the bar writes, already merged over the defaults. */
   copy: ProjectionCopy;
-  /** What the set of groups is called. */
-  groupLabel: string;
   /**
-   * Whether the samples carry groups at all. Without them the shells stand for
+   * Every grouping the samples carry. Without one the shells stand for
    * nothing, so their control is greyed rather than removed.
-   * @default false
    */
-  hasGroups?: boolean;
+  groupings: readonly ProjectionGrouping[];
   /**
    * What the settings currently read, built once for the bar and handed down.
    * @default [] — nothing is written, which is what the cog's panel wants
@@ -71,11 +67,12 @@ export interface ProjectionSpaceControlsProps {
 export function ProjectionSpaceControls(
   props: ProjectionSpaceControlsProps,
 ): 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, outline, reason } = copy;
 
-  const uncoloured = !hasGroups || options.colorBy === 'none';
+  const hasGroups = groupings.length > 0;
+  const uncoloured = !hasGroups || options.colorBy === NO_GROUPING;
   const names = (
     <>
       <OverlayToggle
@@ -109,8 +106,7 @@ export function ProjectionSpaceControls(
             options={options}
             onChange={onChange}
             copy={copy}
-            groupLabel={groupLabel}
-            hasGroups={hasGroups}
+            groupings={groupings}
           />
         </OverlayChip>
         {names}
@@ -151,10 +147,8 @@ interface SpaceSettingsProps {
   onChange: (patch: Partial<ProjectionOptions>) => void;
   /** The words the panel writes. */
   copy: ProjectionCopy;
-  /** What the set of groups is called, which is what `Colour by` offers. */
-  groupLabel: string;
-  /** Whether the samples carry groups at all. */
-  hasGroups: boolean;
+  /** Every grouping the samples carry. */
+  groupings: readonly ProjectionGrouping[];
 }
 
 /**
@@ -163,8 +157,8 @@ interface SpaceSettingsProps {
  * @returns The captioned controls.
  */
 function SpaceSettings(props: SpaceSettingsProps): ReactElement {
-  const { options, onChange, copy, groupLabel, hasGroups } = props;
-  const { bar, help, outline } = copy;
+  const { options, onChange, copy, groupings } = props;
+  const { help, outline } = copy;
 
   return (
     <>
@@ -175,19 +169,18 @@ function SpaceSettings(props: SpaceSettingsProps): ReactElement {
         options={projectionCloudGestureChoices(copy)}
         onChange={(cloudGesture) => onChange({ cloudGesture })}
       />
-      <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, 'space')}
         onChange={(value) => onChange({ ellipse: ellipseSize(value) })}
       />

package/src/projection/ui/ProjectionSpaceMore.tsx

@@ -11,6 +11,7 @@ import type { CloudGesture } from '../../scatter3d/core/cloudGesture.ts';
 import type { ProjectionResult } from '../core/projectionResult.ts';
 import { PROJECTION_TAB_DEFAULTS } from '../core/projectionTabDefaults.ts';
 
+import { ProjectionShapePicker } from './ProjectionGroupingPickers.tsx';
 import type { ProjectionSpaceControlsProps } from './ProjectionSpaceControls.tsx';
 import { projectionAxisChoices } from './projectionAxisChoices.ts';
 import {
@@ -35,8 +36,8 @@ interface ProjectionSpaceMoreProps extends ProjectionSpaceControlsProps {
 }
 
 /**
- * What the cloud keeps behind the cog: its three axes, the dot size, and what
- * the two drags do.
+ * What the cloud keeps behind the cog: its three axes, the dot size and shape,
+ * and what the two drags do.
  *
  * It is the map's panel with one picker more and one action fewer. There is no
  * "zoom to selection" here, because a box has no frame to draw round a crowd:
@@ -49,7 +50,7 @@ interface ProjectionSpaceMoreProps extends ProjectionSpaceControlsProps {
 export function ProjectionSpaceMore(
   props: ProjectionSpaceMoreProps,
 ): ReactElement {
-  const { result, options, onChange, copy } = props;
+  const { result, options, onChange, copy, groupings } = props;
   const { selectedCount = 0, onResetView, onClearSelection } = props;
   const { action, help, panel, reason, tab } = copy;
 
@@ -122,6 +123,14 @@ export function ProjectionSpaceMore(
           unit="px"
           onChange={(pointRadius) => onChange({ pointRadius })}
         />
+        <ProjectionShapePicker
+          label={panel.name.shapeBy}
+          options={options}
+          onChange={onChange}
+          copy={copy}
+          groupings={groupings}
+          rows={result.scores.rows}
+        />
       </OverlayGroup>
       <OverlayGroup label={panel.section.handling}>
         <OverlaySegmented<CloudGesture>

package/src/projection/ui/ProjectionSpaceTab.tsx

@@ -7,8 +7,12 @@ import type { OrbitCamera } from '../../scatter3d/core/orbitCamera.ts';
 import { ScatterCloud } from '../../scatter3d/ui/ScatterCloud.tsx';
 import type { ProjectionCopy } from '../core/projectionCopy.ts';
 import type { ProjectionOptions } from '../core/projectionOptions.ts';
+import { NO_GROUPING } from '../core/projectionOptions.ts';
 import type { 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';
@@ -19,6 +23,7 @@ import {
   projectionAxisTitle,
   projectionMapCloud,
   projectionScatterGroups,
+  projectionScatterShapes,
 } from './projectionMapModel.ts';
 import { MINIMUM_SHELL_POINTS } from './projectionSpaceModel.ts';
 
@@ -26,8 +31,16 @@ import { MINIMUM_SHELL_POINTS } from './projectionSpaceModel.ts';
 interface ProjectionSpaceTabProps {
   /** 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 cloud is showing, already resolved against `result`. */
   options: ProjectionOptions;
   /** The words the cloud writes, already merged over the defaults. */
@@ -38,7 +51,7 @@ interface ProjectionSpaceTabProps {
    * What each sample is called, in the score matrix's row order.
    * @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. */
@@ -113,7 +126,8 @@ export function ProjectionSpaceTab(
   props: ProjectionSpaceTabProps,
 ): ReactElement {
   const { result, groups, options, copy, chrome, width, height } = props;
-  const { ids, selected, report = null, camera, zoom } = props;
+  const { names, shapes = null, selected } = props;
+  const { report = null, camera, zoom } = props;
   const { onCameraChange, onZoomChange, wheelZoom } = props;
   const { onSelectionChange, onHoverChange, hoverCard, testId } = props;
   const { onPointDoubleClick } = props;
@@ -131,7 +145,8 @@ export function ProjectionSpaceTab(
     [scores, zAxis],
   );
 
-  const colored = colorBy === 'group' && groups.entries.length > 0;
+  const shapeList = useMemo(() => projectionScatterShapes(shapes), [shapes]);
+  const colored = colorBy !== NO_GROUPING && groups.entries.length > 0;
 
   return (
     <div style={{ position: 'relative' }} data-testid={testId}>
@@ -146,10 +161,12 @@ export function ProjectionSpaceTab(
         zLabel={axisName(result, zAxis)}
         groupOf={colored ? groups.groupOf : undefined}
         groups={colored ? projectionScatterGroups(groups) : undefined}
+        shapeOf={shapes?.shapeOf}
+        shapes={shapeList}
         ellipsoid={colored ? shells : null}
         ellipsoidMinimumPoints={MINIMUM_SHELL_POINTS}
         showGroupLabels={colored && showGroupLabels}
-        pointLabels={showIds ? ids : undefined}
+        pointLabels={showIds ? names : undefined}
         pointRadius={pointRadius}
         outlinedFrom={fittedCount}
         selected={selected}

package/src/projection/ui/ProjectionViewer.tsx

@@ -64,6 +64,7 @@ export function ProjectionViewer(props: ProjectionViewerProps): ReactElement {
     result,
     copy,
     groups: state.groups,
+    shapes: state.shapes,
     options: state.options,
     selected: state.selected,
     onSettle: state.settleSelection,