react-cheminfo 0.21.0 → 0.23.0

package/src/projection/core/projectionSamples.ts

@@ -1,7 +1,4 @@
-import {
-  CHART_SERIES_COLORS,
-  chartSeriesColor,
-} from '../../chart/core/chartPalette.ts';
+import type { OverlaySampleShape } from '../../overlay/core/overlayMarks.ts';
 
 /** One line of the card that appears when the pointer rests on a sample. */
 export interface ProjectionField {
@@ -11,46 +8,72 @@ export interface ProjectionField {
   value: string;
 }
 
-/** Who the rows are: what they are called, what they belong to, what is known. */
-export interface ProjectionSamples {
+/**
+ * One way of sorting the rows into groups — a species, a batch, the cluster a
+ * run put each sample in.
+ */
+export interface ProjectionGrouping {
   /**
-   * A stable name per row, in the score matrix's row order. It is the currency
-   * of the selection callbacks, so a caller never has to keep a second index.
+   * What the options name it by, e.g. `species`. It is kept apart from the
+   * label so that a saved choice still finds the grouping once its label is
+   * reworded, and it may not be `none`, which is the word for no grouping.
    */
-  ids: readonly string[];
+  id: string;
+  /** What the set of groups is called, for the key and the hover card: `Species`. */
+  label: string;
   /**
-   * What each row belongs to — a species, a batch, a cluster. A row with no
+   * Which group each row is in, in the score matrix's row order. A row with no
    * group is drawn in the muted ink and left out of every outline.
-   * @default undefined — every row is one crowd
    */
-  groups?: ReadonlyArray<string | undefined>;
+  groups: ReadonlyArray<string | undefined>;
   /**
-   * The order the groups are listed and coloured in.
+   * The order the groups are listed, coloured and shaped in.
    * @default the order the groups first appear in `groups`
    */
-  groupOrder?: readonly string[];
-  /**
-   * What the set of groups is called, for the legend's heading and the hover
-   * card — `Species`, `Cluster`, `Batch`.
-   * @default 'Group'
-   */
-  groupLabel?: string;
+  order?: readonly string[];
   /**
    * A colour per group. Anything not named here takes the next unused colour
    * of the shared palette, so two groups never share one.
    * @default undefined — every group is coloured from the palette
    */
-  groupColors?: Readonly<Record<string, string>>;
+  colors?: Readonly<Record<string, string>>;
+}
+
+/** Who the rows are: what they are called, what they belong to, what is known. */
+export interface ProjectionSamples {
+  /**
+   * A stable key per row, in the score matrix's row order. It is the currency
+   * of the selection callbacks, so a caller never has to keep a second index.
+   */
+  ids: readonly string[];
+  /**
+   * What each row is written as: the title of its hover card and the name
+   * beside its dot. A page whose keys are not names a reader should read — a
+   * database id, a spectrum's uuid — writes its names here and keeps `ids`
+   * stable, and two samples may then share a name without either becoming
+   * impossible to select.
+   * @default the ids
+   */
+  labels?: readonly string[];
+  /**
+   * The ways the rows are grouped. The first colours the dots until the reader
+   * picks another, and the next one gives them their shapes, so two groupings
+   * of the same samples — the clusters a run found and the classes the reader
+   * gave — are compared on one picture. Every one of them is written on the
+   * hover card.
+   * @default undefined — every row is one crowd
+   */
+  groupings?: readonly ProjectionGrouping[];
   /**
    * Everything else worth showing about one row. A callback rather than an
    * array, so a table of ten thousand rows builds one record when a reader
    * points at one row, and none otherwise.
-   * @default undefined — the card shows the id, the group and the two axes
+   * @default undefined — the card shows the id, the groups and the two axes
    */
   fields?: (index: number) => readonly ProjectionField[];
 }
 
-/** The groups as the viewer draws them, resolved once per change. */
+/** The grouping that colours the dots, as the viewer draws it. */
 export interface ResolvedProjectionGroups {
   /** What the set of groups is called. */
   label: string;
@@ -69,102 +92,21 @@ export interface ResolvedProjectionGroups {
   groupOf: Int32Array;
 }
 
-const NO_GROUP = -1;
-const DEFAULT_GROUP_LABEL = 'Group';
-
-interface GroupEntry {
-  id: string;
+/** The grouping that shapes the dots, as the viewer draws it. */
+export interface ResolvedProjectionShapes {
+  /** What the set of groups is called. */
   label: string;
-  color: string;
-  count: number;
-}
-
-/**
- * The groups a set of samples has, in a shape a legend and a plot can both
- * read.
- *
- * A group named in `groupOrder` but held by no row is kept, so a legend does
- * not reshuffle when a filter empties one; a row naming a group that is not in
- * `groupOrder` is appended in the order it appears.
- * @param samples - Who the rows are.
- * @param count - How many rows there are, which is the score matrix's height.
- * @returns The resolved groups. A set of samples with no `groups` gives no
- * entries at all, and every row lands at `-1`.
- */
-export function resolveProjectionGroups(
-  samples: ProjectionSamples,
-  count: number,
-): ResolvedProjectionGroups {
-  const rowCount = Number.isFinite(count) ? Math.max(0, Math.floor(count)) : 0;
-  const label = samples.groupLabel ?? DEFAULT_GROUP_LABEL;
-  const groupOf = new Int32Array(rowCount).fill(NO_GROUP);
-  const { groups, groupColors, groupOrder } = samples;
-  if (groups === undefined) return { label, entries: [], groupOf };
-
-  const entries: GroupEntry[] = [];
-  const indexOfGroup = new Map<string, number>();
-  if (groupOrder !== undefined) {
-    for (const id of groupOrder) appendGroup(entries, indexOfGroup, id);
-  }
-
-  for (let row = 0; row < rowCount; row++) {
-    const id = groups[row];
-    if (id === undefined) continue;
-    const at = appendGroup(entries, indexOfGroup, id);
-    groupOf[row] = at;
-    const entry = entries[at];
-    if (entry !== undefined) entry.count++;
-  }
-
-  paintGroups(entries, groupColors);
-  return { label, entries, groupOf };
-}
-
-function appendGroup(
-  entries: GroupEntry[],
-  indexOfGroup: Map<string, number>,
-  id: string,
-): number {
-  const known = indexOfGroup.get(id);
-  if (known !== undefined) return known;
-  const at = entries.length;
-  indexOfGroup.set(id, at);
-  entries.push({ id, label: id, color: '', count: 0 });
-  return at;
-}
-
-function paintGroups(
-  entries: GroupEntry[],
-  pinned: Readonly<Record<string, string>> | undefined,
-): void {
-  // Every pinned colour is taken out of the palette before any group draws
-  // from it, so pinning the third group's hue onto the first does not leave
-  // two groups wearing it.
-  const taken = new Set<string>();
-  if (pinned !== undefined) {
-    for (const entry of entries) {
-      const color = pinned[entry.id];
-      if (color !== undefined) taken.add(color.toLowerCase());
-    }
-  }
-
-  let cursor = 0;
-  for (const entry of entries) {
-    const own = pinned?.[entry.id];
-    if (own !== undefined) {
-      entry.color = own;
-      continue;
-    }
-    let color = chartSeriesColor(cursor, 'group');
-    while (
-      cursor < CHART_SERIES_COLORS.length &&
-      taken.has(color.toLowerCase())
-    ) {
-      cursor++;
-      color = chartSeriesColor(cursor, 'group');
-    }
-    cursor++;
-    taken.add(color.toLowerCase());
-    entry.color = color;
-  }
+  /** The groups, in the order they are listed and given their shapes. */
+  entries: ReadonlyArray<{
+    /** The group's own name, which is also its id. */
+    id: string;
+    /** What it is called. */
+    label: string;
+    /** Its shape. */
+    shape: OverlaySampleShape;
+    /** How many rows are in it. */
+    count: number;
+  }>;
+  /** Which group each row is in, as an index into `entries`, or `-1`. */
+  shapeOf: Int32Array;
 }

package/src/projection/core/projectionStrings.ts

@@ -70,6 +70,14 @@ export const PROJECTION_HELP: Record<ProjectionOptionId, ProjectionHelp> = {
     title: 'Colour by',
     body: 'What a dot’s colour stands for. Colouring by nothing is useful when the groups are what you are trying to find rather than what you already know.',
   },
+  shapeBy: {
+    title: 'Shape by',
+    body: 'What a dot’s shape stands for. With colour for one grouping and shape for another, you see at a glance where two ways of sorting the same samples disagree — the clusters a run found against the classes you gave. Past five groups the shapes stop being told apart, so a grouping that large is not offered.',
+    example: {
+      code: 'Colour = cluster · Shape = class',
+      note: 'A square among circles of the same colour is a sample the clustering put with another class.',
+    },
+  },
   ellipse: {
     title: 'Group outlines',
     body: 'Each outline is drawn to cover about that share of its group’s samples, assuming the group is roughly bell-shaped. It is a summary of where a group sits, not a boundary.',
@@ -95,7 +103,7 @@ export const PROJECTION_HELP: Record<ProjectionOptionId, ProjectionHelp> = {
     body: 'Writes every sample’s own name beside its dot. It is what turns a dot sitting on its own into something you can go and look up. In a crowd there is only room for some of the names, so the ones that do not fit are left out rather than written over each other.',
     example: {
       code: '0326_3a',
-      note: 'The name is whatever you handed in as the sample’s id, so it is the one you can find again in your own files.',
+      note: 'The name is the one the sample was loaded with, so it is the one you can find again in your own files.',
     },
   },
   pairCount: {
@@ -189,6 +197,8 @@ export interface ProjectionBarWords {
   };
   /** What "the colour stands for nothing" reads. */
   uncoloured: string;
+  /** What "the shape stands for nothing" reads. */
+  unshaped: string;
   /** What "no outlines at all" reads where there is no room for a sentence. */
   noOutlines: string;
   /** What the settings gathered into one chip are called together. */
@@ -218,6 +228,7 @@ export const PROJECTION_BAR_WORDS: ProjectionBarWords = {
     showIds: 'Show sample ID',
   },
   uncoloured: 'Nothing',
+  unshaped: 'Nothing',
   noOutlines: 'None',
   settings: 'How this is drawn',
   view: {

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,