react-cheminfo 0.22.0 → 0.24.0

package/src/overlay/core/overlayMarks.ts

@@ -10,25 +10,62 @@
 
 /** Which mark a legend entry, a marker or a series stands for. */
 export type OverlayMarkShape =
-  'dot' | 'ring' | 'square' | 'line' | 'dashed' | 'cross';
+  | 'dot'
+  | 'ring'
+  | 'square'
+  | 'triangle'
+  | 'diamond'
+  | 'triangle-down'
+  | 'line'
+  | 'dashed'
+  | 'cross';
+
+/**
+ * The shapes a sample's own dot can take, which is how a second grouping of
+ * the same samples is drawn while colour keeps the first.
+ */
+export type OverlaySampleShape = Extract<
+  OverlayMarkShape,
+  'dot' | 'square' | 'triangle' | 'diamond' | 'triangle-down'
+>;
 
 /**
  * Every mark, in the order a picker offers them.
  *
- * The first three separate one filled thing from another by colour alone; the
- * last three carry a second meaning on one figure — a line for a component
- * beside dots for the samples — which is what keeps a figure readable when the
- * colours run out or the reader does not separate two of them.
+ * The filled ones come first and separate one thing from another by colour or
+ * by outline alone; the last three carry a second meaning on one figure — a
+ * line for a component beside dots for the samples — which is what keeps a
+ * figure readable when the colours run out or the reader does not separate two
+ * of them.
  */
 export const OVERLAY_MARK_SHAPES: readonly OverlayMarkShape[] = [
   'dot',
   'ring',
   'square',
+  'triangle',
+  'diamond',
+  'triangle-down',
   'line',
   'dashed',
   'cross',
 ];
 
+/**
+ * The shapes a second grouping is given, in the order its groups are listed.
+ *
+ * Five, because that is about where a reader stops telling small shapes apart
+ * at a glance. None of them is a ring or a cross: a ring is a sample placed
+ * into a finished model and a cross is a group's average, and a sample drawn
+ * as either would be read as one of those.
+ */
+export const OVERLAY_SAMPLE_SHAPES: readonly OverlaySampleShape[] = [
+  'dot',
+  'square',
+  'triangle',
+  'diamond',
+  'triangle-down',
+];
+
 /**
  * Whether a mark is drawn as a solid area rather than as a stroke.
  *
@@ -39,5 +76,13 @@ export const OVERLAY_MARK_SHAPES: readonly OverlayMarkShape[] = [
  * @returns `true` for the filled marks, `false` for the drawn ones.
  */
 export function isFilledMark(shape: OverlayMarkShape): boolean {
-  return shape === 'dot' || shape === 'square';
+  return FILLED_MARKS.has(shape);
 }
+
+const FILLED_MARKS: ReadonlySet<OverlayMarkShape> = new Set<OverlayMarkShape>([
+  'dot',
+  'square',
+  'triangle',
+  'diamond',
+  'triangle-down',
+]);

package/src/overlay/ui/OverlayLegendMark.tsx

@@ -73,6 +73,11 @@ const MARK_GEOMETRY: Record<OverlayMarkShape, ReactElement> = {
   dot: <circle cx="6" cy="6" r="4.2" />,
   ring: <circle cx="6" cy="6" r="3.4" strokeWidth="2.2" />,
   square: <rect x="2" y="2" width="8" height="8" rx="1.5" />,
+  // Balanced on the centre of the box, as the dots they name are balanced on
+  // their samples.
+  triangle: <path d="M6 0.8L10.5 8.6L1.5 8.6Z" />,
+  diamond: <path d="M6 1L11 6L6 11L1 6Z" />,
+  'triangle-down': <path d="M1.5 3.4L10.5 3.4L6 11.2Z" />,
   line: <line x1="0.5" y1="6" x2="11.5" y2="6" strokeWidth="2.8" />,
   dashed: (
     <line

package/src/projection/core/index.ts

@@ -35,13 +35,15 @@ export type { ProjectionCopy } from './projectionCopy.ts';
 export { PROJECTION_COPY } from './projectionCopy.ts';
 export type { ProjectionCopyPatch } from './projectionCopyPatch.ts';
 export type {
-  ProjectionColorBy,
   ProjectionOptionId,
   ProjectionOptions,
   ProjectionVariablesView,
 } from './projectionOptions.ts';
 export { mergeProjectionCopy } from './mergeProjectionCopy.ts';
-export { DEFAULT_PROJECTION_OPTIONS } from './projectionOptions.ts';
+export {
+  DEFAULT_PROJECTION_OPTIONS,
+  NO_GROUPING,
+} from './projectionOptions.ts';
 export type {
   ProjectionChoiceWords,
   ProjectionOutlineWords,
@@ -56,10 +58,16 @@ export type {
 } from './projectionResult.ts';
 export type {
   ProjectionField,
+  ProjectionGrouping,
   ProjectionSamples,
   ResolvedProjectionGroups,
+  ResolvedProjectionShapes,
 } from './projectionSamples.ts';
-export { resolveProjectionGroups } from './projectionSamples.ts';
+export {
+  projectionGrouping,
+  resolveProjectionGroups,
+  resolveProjectionShapes,
+} from './projectionGroupings.ts';
 export type {
   ProjectionBarWords,
   ProjectionHelp,

package/src/projection/core/projectionCopy.ts

@@ -86,6 +86,8 @@ export interface ProjectionCopy {
     projected: string;
     /** The title of a key whose colour stands for nothing, so only shape is left. */
     shapes: string;
+    /** What the shape stands for, after what the colour does. Carries `{shapes}`. */
+    shapedBy: string;
   };
   /** The sentences the viewer builds from the data. */
   sentence: {
@@ -208,6 +210,7 @@ export const PROJECTION_COPY: ProjectionCopy = {
     notOutlined: 'Not outlined: too few samples.',
     projected: 'Hollow = added after the map was built',
     shapes: 'Shape = what each mark is.',
+    shapedBy: 'Shape = {shapes}.',
   },
   sentence: {
     sharesFirst:

package/src/projection/core/projectionGroupings.ts

@@ -0,0 +1,174 @@
+/**
+ * How the groupings a page hands in become what a figure draws: the one that
+ * colours the dots, painted from the shared palette, and the one that shapes
+ * them, given one shape per group.
+ *
+ * Both are cut the same way — the page's own order first, then every group in
+ * the order its first row names it — so a group keeps its colour and its shape
+ * however the rows are filtered.
+ */
+
+import {
+  CHART_SERIES_COLORS,
+  chartSeriesColor,
+} from '../../chart/core/chartPalette.ts';
+import { OVERLAY_SAMPLE_SHAPES } from '../../overlay/core/overlayMarks.ts';
+
+import type {
+  ProjectionGrouping,
+  ProjectionSamples,
+  ResolvedProjectionGroups,
+  ResolvedProjectionShapes,
+} from './projectionSamples.ts';
+
+/**
+ * The grouping a set of samples is coloured by, in a shape a legend and a plot
+ * can both read.
+ *
+ * A group named in `order` 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
+ * `order` is appended in the order it appears.
+ * @param grouping - The grouping, or nothing when the dots are not coloured.
+ * @param count - How many rows there are, which is the score matrix's height.
+ * @returns The resolved groups. No grouping gives no entries at all, and every
+ * row lands at `-1`.
+ */
+export function resolveProjectionGroups(
+  grouping: ProjectionGrouping | undefined,
+  count: number,
+): ResolvedProjectionGroups {
+  const { label, entries, rowOf } = partition(grouping, count);
+  const colored = entries.map((entry) => ({ ...entry, color: '' }));
+  paintGroups(colored, grouping?.colors);
+  return { label, entries: colored, groupOf: rowOf };
+}
+
+/**
+ * The grouping a set of samples is shaped by, one shape per group.
+ *
+ * A grouping of more groups than there are shapes is refused as a whole rather
+ * than drawn with two groups sharing a shape, or with the last ones falling
+ * back to a disc: either would put two groups under one mark, which is the one
+ * thing a key cannot undo.
+ * @param grouping - The grouping, or nothing when the dots are not shaped.
+ * @param count - How many rows there are, which is the score matrix's height.
+ * @returns The resolved shapes, or `null` when there is no grouping or its
+ * groups outnumber the shapes.
+ */
+export function resolveProjectionShapes(
+  grouping: ProjectionGrouping | undefined,
+  count: number,
+): ResolvedProjectionShapes | null {
+  if (grouping === undefined) return null;
+  const { label, entries, rowOf } = partition(grouping, count);
+  if (entries.length > OVERLAY_SAMPLE_SHAPES.length) return null;
+  const shaped = entries.map((entry, index) => ({
+    ...entry,
+    shape: OVERLAY_SAMPLE_SHAPES[index] ?? 'dot',
+  }));
+  return { label, entries: shaped, shapeOf: rowOf };
+}
+
+/**
+ * The grouping carrying an id.
+ * @param samples - Who the rows are.
+ * @param id - The id asked for.
+ * @returns The grouping, or `undefined` when none carries it.
+ */
+export function projectionGrouping(
+  samples: ProjectionSamples,
+  id: string,
+): ProjectionGrouping | undefined {
+  for (const grouping of samples.groupings ?? NO_GROUPINGS) {
+    if (grouping.id === id) return grouping;
+  }
+  return undefined;
+}
+
+const NO_GROUP = -1;
+const DEFAULT_GROUP_LABEL = 'Group';
+const NO_GROUPINGS: readonly ProjectionGrouping[] = [];
+
+interface GroupEntry {
+  id: string;
+  label: string;
+  count: number;
+}
+
+interface ColoredEntry extends GroupEntry {
+  color: string;
+}
+
+function partition(
+  grouping: ProjectionGrouping | undefined,
+  count: number,
+): { label: string; entries: GroupEntry[]; rowOf: Int32Array } {
+  const rowCount = Number.isFinite(count) ? Math.max(0, Math.floor(count)) : 0;
+  const label = grouping?.label ?? DEFAULT_GROUP_LABEL;
+  const rowOf = new Int32Array(rowCount).fill(NO_GROUP);
+  const entries: GroupEntry[] = [];
+  if (grouping === undefined) return { label, entries, rowOf };
+
+  const indexOfGroup = new Map<string, number>();
+  for (const id of grouping.order ?? []) {
+    appendGroup(entries, indexOfGroup, id);
+  }
+  for (let row = 0; row < rowCount; row++) {
+    const id = grouping.groups[row];
+    if (id === undefined) continue;
+    const at = appendGroup(entries, indexOfGroup, id);
+    rowOf[row] = at;
+    const entry = entries[at];
+    if (entry !== undefined) entry.count++;
+  }
+  return { label, entries, rowOf };
+}
+
+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, count: 0 });
+  return at;
+}
+
+function paintGroups(
+  entries: ColoredEntry[],
+  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;
+  }
+}

package/src/projection/core/projectionOptions.ts

@@ -14,10 +14,10 @@ export type ProjectionVariablesView =
   | 'sample';
 
 /**
- * What decides a dot's colour on the map: `'group'`, `'none'`, or nothing else
- * in this release.
+ * The word for "no grouping" wherever an option names one, which is why no
+ * grouping may be called it.
  */
-export type ProjectionColorBy = 'group' | 'none';
+export const NO_GROUPING = 'none';
 
 /** What the figure is currently showing. Every field is a control in the floating bar. */
 export interface ProjectionOptions {
@@ -43,10 +43,20 @@ export interface ProjectionOptions {
    */
   cloudGesture: CloudGesture;
   /**
-   * What decides a dot's colour.
-   * @default 'group'
+   * Which grouping colours the dots, by its id, or `'none'`. An id no grouping
+   * carries — the empty string, or one saved on other data — takes the first
+   * grouping.
+   * @default ''
    */
-  colorBy: ProjectionColorBy;
+  colorBy: string;
+  /**
+   * Which grouping gives the dots their shapes, by its id, or `'none'`. An id
+   * no grouping carries takes the second grouping — the first when the colour
+   * has taken the second — and a grouping of more groups than there are
+   * shapes is not drawn.
+   * @default ''
+   */
+  shapeBy: string;
   /**
    * How large the group outlines are, or `null` for none.
    * @default { kind: 'coverage', probability: 0.95 }
@@ -134,7 +144,8 @@ export const DEFAULT_PROJECTION_OPTIONS: ProjectionOptions = {
   yAxis: 1,
   zAxis: 2,
   cloudGesture: 'turn',
-  colorBy: 'group',
+  colorBy: '',
+  shapeBy: '',
   ellipse: { kind: 'coverage', probability: 0.95 },
   pointRadius: 3.5,
   showGroupMeans: false,

package/src/projection/core/projectionPanelWords.ts

@@ -44,6 +44,12 @@ export interface ProjectionPanelWords {
 export interface ProjectionReasonWords {
   /** Why the colour cannot be set: the samples carry no groups. */
   noGroups: string;
+  /** Why the shape cannot be set: the samples carry no groups. */
+  noGroupsToShape: string;
+  /** Why a grouping is greyed in the shape picker: the colour already draws it. */
+  shapeIsColour: string;
+  /** Why a grouping is greyed in the shape picker: it has more groups than shapes. */
+  tooManyShapes: string;
   /** Why the map's outlines cannot be set while nothing is coloured. */
   uncolouredOutlines: string;
   /** Why the cloud's shells cannot be set while nothing is coloured. */
@@ -97,6 +103,7 @@ export const PROJECTION_PANEL_WORDS: ProjectionPanelWords = {
     zAxis: 'Into',
     cloudGesture: 'Drag does',
     colorBy: 'Colour by',
+    shapeBy: 'Shape by',
     ellipse: 'Outlines',
     pointRadius: 'Dot size',
     showGroupMeans: 'Averages',
@@ -124,6 +131,9 @@ export const PROJECTION_PANEL_WORDS: ProjectionPanelWords = {
 /** The reasons a greyed control gives when a site overrides nothing. */
 export const PROJECTION_REASON_WORDS: ProjectionReasonWords = {
   noGroups: 'These samples carry no groups to colour by.',
+  noGroupsToShape: 'These samples carry no groups to shape by.',
+  shapeIsColour: 'The colour already stands for these groups.',
+  tooManyShapes: 'More groups than there are shapes to tell apart.',
   uncolouredOutlines:
     'Outlines follow the groups, so colour the map by them first.',
   uncolouredShells:

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: {