react-cheminfo 0.10.0 → 0.11.0

package/src/projection/ui/ProjectionSpaceControls.tsx

@@ -0,0 +1,219 @@
+import type { ReactElement } from 'react';
+
+import type { OverlayTier } from '../../overlay/core/overlayTiers.ts';
+import type { OverlayChipSetting } from '../../overlay/ui/OverlayChip.tsx';
+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 { CloudGesture } from '../../scatter3d/core/cloudGesture.ts';
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
+import type {
+  ProjectionColorBy,
+  ProjectionOptions,
+} from '../core/projectionOptions.ts';
+
+import type { ProjectionReading } from './projectionBarReadings.ts';
+import { CLOUD_GESTURE_CHOICES } from './projectionCloudChoices.ts';
+import { ellipseKey, ellipseSize } from './projectionEllipse.ts';
+import { ellipsoidChoices } from './projectionEllipsoid.ts';
+import { projectionColourChoices } from './projectionMapChoices.ts';
+
+/** What the cloud's controls are drawn from, wherever in the bar they sit. */
+export interface ProjectionSpaceControlsProps {
+  /** What the cloud is showing, already resolved against the result. */
+  options: ProjectionOptions;
+  /** Called with only the options that changed, for the viewer to merge. */
+  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
+   * nothing, so their control is greyed rather than removed.
+   * @default false
+   */
+  hasGroups?: boolean;
+  /**
+   * 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
+   */
+  readings?: readonly ProjectionReading[];
+  /**
+   * How much of itself the bar is writing.
+   * @default 'full'
+   */
+  tier?: OverlayTier;
+}
+
+/**
+ * The cloud settings a reader changes while looking at the picture.
+ *
+ * One of them is not on the map's bar at all, and it is the first: what a
+ * plain drag does. Turning the box and drawing a lasso both want that drag,
+ * and neither can be given a modifier without taking one that already means
+ * "add" or "take away" inside a lasso — so the choice is written on the bar
+ * where the reader can see it, rather than left as a shortcut they would have
+ * to be told about. It leads the row because it is the only setting on the bar
+ * that changes what the reader's own hand does.
+ *
+ * The rest are the map's, unchanged: how large the shells are, and the two
+ * name switches. The axes and the dot size wait behind the cog exactly as they
+ * do on the map.
+ * @param props - See {@link ProjectionSpaceControlsProps}.
+ * @returns The controls.
+ */
+export function ProjectionSpaceControls(
+  props: ProjectionSpaceControlsProps,
+): ReactElement {
+  const { options, onChange, copy, groupLabel, hasGroups = false } = props;
+  const { readings = NO_READINGS, tier = 'full' } = props;
+  const { bar, help } = copy;
+
+  const uncoloured = !hasGroups || options.colorBy === 'none';
+  const names = (
+    <>
+      <OverlayToggle
+        label={bar.switches.showGroupLabels}
+        help={help.showGroupLabels}
+        icon={GROUP_LABELS_GLYPH}
+        hideLabel
+        checked={options.showGroupLabels}
+        disabled={uncoloured}
+        onChange={(showGroupLabels) => onChange({ showGroupLabels })}
+      />
+      <OverlayToggle
+        label={bar.switches.showIds}
+        help={help.showIds}
+        icon={IDS_GLYPH}
+        hideLabel
+        checked={options.showIds}
+        onChange={(showIds) => onChange({ showIds })}
+      />
+    </>
+  );
+
+  if (tier === 'chip' || tier === 'tiny') {
+    return (
+      <>
+        <OverlayChip label={bar.settings} settings={chipSettings(readings)}>
+          <SpaceSettings
+            options={options}
+            onChange={onChange}
+            copy={copy}
+            groupLabel={groupLabel}
+            hasGroups={hasGroups}
+          />
+        </OverlayChip>
+        {names}
+      </>
+    );
+  }
+
+  return (
+    <>
+      <OverlayValueMenu<CloudGesture>
+        label={help.cloudGesture.title}
+        keyWord={bar.key.cloudGesture}
+        showKey={tier === 'full'}
+        value={options.cloudGesture}
+        options={CLOUD_GESTURE_CHOICES}
+        onChange={(cloudGesture) => onChange({ cloudGesture })}
+      />
+      <OverlayValueMenu
+        label={help.ellipse.title}
+        keyWord={bar.key.ellipse}
+        showKey={tier === 'full'}
+        value={ellipseKey(options.ellipse)}
+        disabled={uncoloured}
+        disabledReason={UNCOLOURED_REASON}
+        options={ellipsoidChoices(options.ellipse)}
+        onChange={(value) => onChange({ ellipse: ellipseSize(value) })}
+      />
+      {names}
+    </>
+  );
+}
+
+/**
+ * What the chip reads out, which is every setting spelled in full.
+ * @param readings - What the settings currently read.
+ * @returns The chip's own settings.
+ */
+function chipSettings(
+  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;
+}
+
+/** What the captioned pair behind the chip is drawn from. */
+interface SpaceSettingsProps {
+  /** What the cloud is showing, already resolved against the result. */
+  options: ProjectionOptions;
+  /** Called with only the options that changed. */
+  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;
+}
+
+/**
+ * The same settings with their captions, for the panel the chip opens.
+ * @param props - See {@link SpaceSettingsProps}.
+ * @returns The captioned controls.
+ */
+function SpaceSettings(props: SpaceSettingsProps): ReactElement {
+  const { options, onChange, copy, groupLabel, hasGroups } = props;
+  const { bar, help } = copy;
+
+  return (
+    <>
+      <OverlaySegmented<CloudGesture>
+        label={help.cloudGesture.title}
+        help={help.cloudGesture}
+        value={options.cloudGesture}
+        options={CLOUD_GESTURE_CHOICES}
+        onChange={(cloudGesture) => onChange({ cloudGesture })}
+      />
+      <OverlaySegmented<ProjectionColorBy>
+        label={help.colorBy.title}
+        help={help.colorBy}
+        value={options.colorBy}
+        disabled={!hasGroups}
+        options={projectionColourChoices(groupLabel, bar.uncoloured)}
+        onChange={(colorBy) => onChange({ colorBy })}
+      />
+      <OverlaySelect
+        label={help.ellipse.title}
+        help={help.ellipse}
+        value={ellipseKey(options.ellipse)}
+        disabled={!hasGroups || options.colorBy === 'none'}
+        options={ellipsoidChoices(options.ellipse)}
+        onChange={(value) => onChange({ ellipse: ellipseSize(value) })}
+      />
+    </>
+  );
+}
+
+/** The two glyphs the name switches ride as, the same pair the map uses. */
+const GROUP_LABELS_GLYPH = 'tag';
+const IDS_GLYPH = 'id-number';
+
+const UNCOLOURED_REASON =
+  'Shells follow the groups, so colour the cloud by them first.';
+
+/** No readings at all, which is what the panel behind the cog is handed. */
+const NO_READINGS: readonly ProjectionReading[] = [];

package/src/projection/ui/ProjectionSpaceMore.tsx

@@ -0,0 +1,169 @@
+import type { ReactElement } from 'react';
+
+import { chartAxisTitle } from '../../chart/core/chartLabels.ts';
+import { OverlayAction } from '../../overlay/ui/OverlayAction.tsx';
+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 type { ScatterSelectionMode } from '../../scatter/core/scatterSelection.ts';
+import type { CloudGesture } from '../../scatter3d/core/cloudGesture.ts';
+import type { ProjectionResult } from '../core/projectionResult.ts';
+import {
+  PROJECTION_PANEL_NAME,
+  PROJECTION_PANEL_SECTION,
+} from '../core/projectionStrings.ts';
+import { PROJECTION_TAB_DEFAULTS } from '../core/projectionTabDefaults.ts';
+
+import type { ProjectionSpaceControlsProps } from './ProjectionSpaceControls.tsx';
+import { CLOUD_GESTURE_CHOICES } from './projectionCloudChoices.ts';
+
+/** What {@link ProjectionSpaceMore} needs beyond the cloud's own controls. */
+export interface ProjectionSpaceMoreProps extends ProjectionSpaceControlsProps {
+  /** The reduced space the controls apply to; its axes fill the three pickers. */
+  result: ProjectionResult;
+  /**
+   * How many samples are selected, which is what the clearing action needs
+   * before it can do anything.
+   * @default 0
+   */
+  selectedCount?: number;
+  /** Puts the box back where it was first seen. */
+  onResetView: () => void;
+  /** Empties the selection. */
+  onClearSelection: () => void;
+}
+
+/**
+ * What the cloud keeps behind the cog: its three axes, the dot size, 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:
+ * the reader turns it until the crowd is facing them, which is the gesture the
+ * whole tab exists for, and a button that guessed an angle for them would
+ * usually guess wrong.
+ * @param props - See {@link ProjectionSpaceMoreProps}.
+ * @returns The panel behind the cog.
+ */
+export function ProjectionSpaceMore(
+  props: ProjectionSpaceMoreProps,
+): ReactElement {
+  const { result, options, onChange, copy } = props;
+  const { selectedCount = 0, onResetView, onClearSelection } = props;
+  const { action, help, tab } = copy;
+
+  const nothingPicked = selectedCount === 0;
+
+  return (
+    <OverlayPanel
+      title={tab.space}
+      onReset={() => onChange(PROJECTION_TAB_DEFAULTS.space)}
+      actions={
+        <>
+          <OverlayAction
+            text={action.resetView}
+            icon="reset"
+            onClick={onResetView}
+          />
+          <OverlayAction
+            text={action.clearSelection}
+            icon="cross"
+            disabled={nothingPicked}
+            onClick={onClearSelection}
+          />
+        </>
+      }
+    >
+      <OverlayGroup label={PROJECTION_PANEL_SECTION.axes} divider={false}>
+        <OverlaySelect
+          label={PROJECTION_PANEL_NAME.xAxis}
+          help={help.xAxis}
+          value={String(options.xAxis)}
+          options={axisChoices(result, [options.yAxis, options.zAxis])}
+          onChange={(value) => onChange({ xAxis: Number(value) })}
+        />
+        <OverlaySelect
+          label={PROJECTION_PANEL_NAME.yAxis}
+          help={help.yAxis}
+          value={String(options.yAxis)}
+          options={axisChoices(result, [options.xAxis, options.zAxis])}
+          onChange={(value) => onChange({ yAxis: Number(value) })}
+        />
+        <OverlaySelect
+          label={PROJECTION_PANEL_NAME.zAxis}
+          help={help.zAxis}
+          value={String(options.zAxis)}
+          options={axisChoices(result, [options.xAxis, options.yAxis])}
+          onChange={(value) => onChange({ zAxis: Number(value) })}
+        />
+      </OverlayGroup>
+      <OverlayGroup label={PROJECTION_PANEL_SECTION.drawing}>
+        <OverlayNumber
+          label={PROJECTION_PANEL_NAME.pointRadius}
+          help={help.pointRadius}
+          value={options.pointRadius}
+          min={1}
+          max={12}
+          step={0.5}
+          digits={1}
+          unit="px"
+          onChange={(pointRadius) => onChange({ pointRadius })}
+        />
+      </OverlayGroup>
+      <OverlayGroup label={PROJECTION_PANEL_SECTION.handling}>
+        <OverlaySegmented<CloudGesture>
+          label={PROJECTION_PANEL_NAME.cloudGesture}
+          help={help.cloudGesture}
+          value={options.cloudGesture}
+          options={CLOUD_GESTURE_CHOICES}
+          onChange={(cloudGesture) => onChange({ cloudGesture })}
+        />
+      </OverlayGroup>
+      <OverlayGroup label={PROJECTION_PANEL_SECTION.selecting}>
+        <OverlaySegmented<ScatterSelectionMode>
+          label={PROJECTION_PANEL_NAME.selectMode}
+          help={help.selectMode}
+          value={options.selectMode}
+          options={SELECT_MODE_CHOICES}
+          onChange={(selectMode) => onChange({ selectMode })}
+        />
+      </OverlayGroup>
+    </OverlayPanel>
+  );
+}
+
+const AXIS_TAKEN_NOTE = 'Already drawn on another axis.';
+
+/** The same three words the map's panel offers, for the same reason. */
+const SELECT_MODE_CHOICES: ReadonlyArray<OverlayOption<ScatterSelectionMode>> =
+  [
+    { value: 'replace', label: 'Replace' },
+    { value: 'add', label: 'Add' },
+    { value: 'remove', label: 'Remove' },
+  ];
+
+/**
+ * The axes one picker offers, with the ones already drawn kept but unreachable.
+ * @param result - The reduced space being drawn.
+ * @param taken - The axes the other two pickers are showing.
+ * @returns The choices, in the order the run produced them.
+ */
+function axisChoices(
+  result: ProjectionResult,
+  taken: readonly number[],
+): OverlayOption[] {
+  const choices: OverlayOption[] = [];
+  for (const [index, axis] of result.axes.entries()) {
+    const drawn = taken.includes(index);
+    choices.push({
+      value: String(index),
+      label: chartAxisTitle(axis.name, { share: axis.share }),
+      disabled: drawn,
+      title: drawn ? AXIS_TAKEN_NOTE : undefined,
+    });
+  }
+  return choices;
+}

package/src/projection/ui/ProjectionSpaceTab.tsx

@@ -0,0 +1,217 @@
+import type { ReactElement, ReactNode } from 'react';
+import { useMemo } from 'react';
+
+import type { ScatterPointOpen } from '../../scatter/ui/scatterPlotProps.ts';
+import type { SelectionChange } from '../../scatter/ui/useScatterSelection.ts';
+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 type { ProjectionResult } from '../core/projectionResult.ts';
+import type { ResolvedProjectionGroups } from '../core/projectionSamples.ts';
+
+import type { SelectionReport } from './ProjectionMapCaption.tsx';
+import { ProjectionMapCaption } from './ProjectionMapCaption.tsx';
+import { ProjectionMapLegend } from './ProjectionMapLegend.tsx';
+import { ProjectionSurface } from './ProjectionSurface.tsx';
+import type { ProjectionMapChrome } from './projectionMapChrome.ts';
+import {
+  projectionAxisTitle,
+  projectionMapCloud,
+  projectionScatterGroups,
+} from './projectionMapModel.ts';
+import { MINIMUM_SHELL_POINTS } from './projectionSpaceModel.ts';
+
+/** What {@link ProjectionSpaceTab} needs. */
+export interface ProjectionSpaceTabProps {
+  /** What the run produced, whatever produced it. */
+  result: ProjectionResult;
+  /** The groups, resolved once by the viewer so every tab colours alike. */
+  groups: ResolvedProjectionGroups;
+  /** What the cloud is showing, already resolved against `result`. */
+  options: ProjectionOptions;
+  /** The words the cloud writes, already merged over the defaults. */
+  copy: ProjectionCopy;
+  /** The key's title and entries, built once with the bar's explanation. */
+  chrome: ProjectionMapChrome;
+  /**
+   * 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[];
+  /** Width of the figure, in pixels. */
+  width: number;
+  /** Height of the figure, in pixels. */
+  height: number;
+  /** The selected rows, as indices into the score matrix. */
+  selected: readonly number[];
+  /** Where the reader is standing, which the viewer keeps between visits. */
+  camera: OrbitCamera;
+  /** Called with the camera every frame of a turn leaves behind. */
+  onCameraChange: (camera: OrbitCamera) => void;
+  /** How far in the reader has zoomed. */
+  zoom: number;
+  /** Called with the zoom the wheel asks for. */
+  onZoomChange: (zoom: number) => void;
+  /**
+   * Whether the wheel zooms the box.
+   * @default true
+   */
+  wheelZoom?: boolean;
+  /**
+   * What the last gesture picked out, for the line over the picture.
+   * @default null — nothing has happened yet
+   */
+  report?: SelectionReport | null;
+  /**
+   * Called when a lasso is released or a dot is tapped.
+   * @default undefined
+   */
+  onSelectionChange?: (change: SelectionChange) => void;
+  /**
+   * Called with the row under the pointer, or `-1`.
+   * @default undefined
+   */
+  onHoverChange?: (index: number) => void;
+  /**
+   * Called when the reader double-clicks a sample.
+   * @default undefined
+   */
+  onPointDoubleClick?: (point: ScatterPointOpen) => void;
+  /**
+   * The card that follows the pointer, built by the viewer so that it says the
+   * same thing on every tab.
+   * @default undefined — no card is drawn
+   */
+  hoverCard?: ReactNode;
+  /**
+   * Value of the `data-testid` attribute of the figure.
+   * @default undefined
+   */
+  testId?: string;
+}
+
+/**
+ * The cloud: the same samples as the map, in a box the reader can turn.
+ *
+ * It earns a tab of its own rather than a switch on the map because it answers
+ * a different question. The map shows the two strongest patterns and is the
+ * right picture nine times in ten; the cloud is what a reader reaches for when
+ * two groups sit on top of each other there, because a third component often
+ * pulls them apart and no flat picture can show that.
+ *
+ * Everything it can share with the map it does share — the colours, the
+ * selection, the lasso, the key, the card and the names — so moving between
+ * the two tabs changes the picture and nothing else. What it cannot share is
+ * the scale: all three axes are stretched to one box, because a solid seen
+ * from an angle has nowhere to put three sets of tick labels, and a box drawn
+ * at three scales would tilt a group in a direction the data never did.
+ * @param props - See {@link ProjectionSpaceTabProps}.
+ * @returns The figure.
+ */
+export function ProjectionSpaceTab(
+  props: ProjectionSpaceTabProps,
+): ReactElement {
+  const { result, groups, options, copy, chrome, width, height } = props;
+  const { ids, selected, report = null, camera, zoom } = props;
+  const { onCameraChange, onZoomChange, wheelZoom } = props;
+  const { onSelectionChange, onHoverChange, hoverCard, testId } = props;
+  const { onPointDoubleClick } = props;
+  const { scores, fittedCount } = result;
+  const { xAxis, yAxis, zAxis, colorBy, pointRadius } = options;
+  const { showGroupLabels, showIds, selectMode, cloudGesture } = options;
+  const { ellipse: shells } = options;
+
+  const flat = useMemo(
+    () => projectionMapCloud(scores, xAxis, yAxis),
+    [scores, xAxis, yAxis],
+  );
+  const depth = useMemo(
+    () => projectionMapCloud(scores, zAxis, zAxis).x,
+    [scores, zAxis],
+  );
+
+  const colored = colorBy === 'group' && groups.entries.length > 0;
+
+  return (
+    <div style={{ position: 'relative' }} data-testid={testId}>
+      <ScatterCloud
+        x={flat.x}
+        y={flat.y}
+        z={depth}
+        width={width}
+        height={height}
+        xLabel={axisName(result, xAxis)}
+        yLabel={axisName(result, yAxis)}
+        zLabel={axisName(result, zAxis)}
+        groupOf={colored ? groups.groupOf : undefined}
+        groups={colored ? projectionScatterGroups(groups) : undefined}
+        ellipsoid={colored ? shells : null}
+        ellipsoidMinimumPoints={MINIMUM_SHELL_POINTS}
+        showGroupLabels={colored && showGroupLabels}
+        pointLabels={showIds ? ids : undefined}
+        pointRadius={pointRadius}
+        outlinedFrom={fittedCount}
+        selected={selected}
+        onSelectionChange={onSelectionChange}
+        selectMode={selectMode}
+        onHoverChange={onHoverChange}
+        onPointDoubleClick={onPointDoubleClick}
+        gesture={cloudGesture}
+        camera={camera}
+        onCameraChange={onCameraChange}
+        zoom={zoom}
+        onZoomChange={onZoomChange}
+        wheelZoom={wheelZoom}
+        overlay={
+          <ProjectionSurface>
+            {chrome.entries.length === 0 ? null : (
+              <ProjectionMapLegend
+                title={chrome.title}
+                entries={chrome.entries}
+                cloud={flat}
+                xDomain={CUBE_DOMAIN}
+                yDomain={CUBE_DOMAIN}
+                width={width}
+                height={height}
+              />
+            )}
+            <ProjectionMapCaption
+              report={report}
+              copy={copy}
+              mode={selectMode}
+              drawing={false}
+            />
+            {hoverCard}
+          </ProjectionSurface>
+        }
+      />
+    </div>
+  );
+}
+
+/**
+ * What an arm of the frame is called.
+ *
+ * The frame is the cloud's only record of which axis is which, so an axis the
+ * result cannot name is given its number rather than left blank: an unlabelled
+ * arm reads as a drawing error, and the reader cannot tell which of the three
+ * it was.
+ * @param result - The reduced space being drawn.
+ * @param index - Which axis.
+ * @returns The name to write on that arm.
+ */
+function axisName(result: ProjectionResult, index: number): string {
+  return projectionAxisTitle(result, index) ?? `Axis ${index + 1}`;
+}
+
+/**
+ * The range the key measures emptiness against.
+ *
+ * The key floats in whichever corner of the picture holds fewest dots, and it
+ * works that out from the cloud's own coordinates against a range. A turning
+ * box has no fixed range in data units — the same sample is at a different
+ * corner a second later — so the cube's own is used, which is stable and is
+ * what the corners of the picture actually are.
+ */
+const CUBE_DOMAIN: readonly [number, number] = [-1, 1];

package/src/projection/ui/ProjectionViewer.tsx

@@ -15,6 +15,7 @@ import { useProjectionState } from './useProjectionState.ts';
 
 export type { ProjectionVariableTrack } from './ProjectionVariablesTab.tsx';
 export type { ProjectionSelection } from './projectionSelection.ts';
+export type { ProjectionSampleOpen } from './projectionViewerProps.ts';
 export type { ProjectionViewerProps } from './projectionViewerProps.ts';
 
 /**
@@ -45,6 +46,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;
@@ -110,6 +112,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/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

@@ -15,6 +15,7 @@ import type { ResolvedProjectionGroups } from '../core/projectionSamples.ts';
 import type { ProjectionTab } from '../core/projectionTabs.ts';
 
 import { ellipseCoverageText } from './projectionEllipse.ts';
+import { ellipsoidCoverageText } from './projectionEllipsoid.ts';
 import { WHOLE_SHARE } from './projectionTabStyles.ts';
 
 /** One setting on the bar, as the reader sees it right now. */
@@ -81,6 +82,23 @@ export function projectionBarReadings(
       },
     ];
   }
+  if (tab === 'space') {
+    return [
+      {
+        key: bar.key.cloudGesture,
+        label: help.cloudGesture.title,
+        value: options.cloudGesture === 'turn' ? 'Turn' : 'Select',
+      },
+      {
+        key: bar.key.ellipse,
+        label: help.ellipse.title,
+        value:
+          options.colorBy === 'group' && groups.entries.length > 0
+            ? ellipsoidCoverageText(options.ellipse)
+            : bar.noOutlines,
+      },
+    ];
+  }
   if (tab === 'shares') {
     return [
       {