@jbrowse/core 5.0.0-beta.11 → 5.0.0-beta.14

package/esm/ui/colors.js

@@ -98,11 +98,9 @@ export const paletteColors = {
  * The wide qualitative palette: every scheme above, in order, deduped and with
  * the neutrals dropped. ~40 entries.
  *
- * One list, because "give each row a distinct color" is one question this repo
- * answers in two places — the multi-row painter handing colors out by row
- * index, and the arrangement dialog's palette-by-attribute — and two lists
- * would mean a track's automatic colors and the colors it takes when a user
- * palettes it by hand were different palettes for no reason a reader could see.
+ * A feature's categorical color deals from it; a row's deals from
+ * `rowPaletteColorAt`, which re-lights tableau10 rather than reaching for
+ * another scheme's hues.
  *
  * `tableau10` leads because its hues are the most evenly separated, so a track
  * with a handful of rows spends only that. The tail is what makes the 26
@@ -114,21 +112,16 @@ export const paletteColors = {
  * re-palettes), while a by-position painter has no value to hash and wraps.
  *
  * **It holds 14 pairs `similarColors` calls the same** — five schemes' blues,
- * oranges, greens, reds and pinks — and deduping it at construction is the
- * wrong reading of that, measured on the 38 GENCODE gene biotypes. Hashed,
- * which is what a track with no `colorDomain` does, 30 of them land on 22
- * colors and 38 on 26; the loss is the birthday collision on 40 slots, not the
- * near-twins, and only 3 of the pairs they land on read alike. Pruning to the
- * 30 distinct entries makes that 23 and 24, so it costs ten colors and buys
- * nothing.
+ * oranges, greens, reds and pinks. A dealt scale (`categoricalScale`'s `held`)
+ * steps over a twin of a color already dealt, so they cost a track only once
+ * it has more values than the 30 distinct entries.
  *
- * The near-twins bite the PINNED case instead, where a `domain` spends the
- * list in order: 30 listed values take 30 colors today and 7 of those pairs
- * read alike. Ordering the distinct 30 first and the twins behind them fixes
- * that outright (0 pairs at 30 listed values, 11 at 38 where the twins are
- * reached anyway) and costs no colors — but it moves every hashed color in
- * marks, GWAS, canvas, multi-row and the arrangement dialog, so it is a pass
- * with a figure refresh in it.
+ * The near-twins bite a `domain` instead, which spends the list in order: 30
+ * listed values take 30 colors and 7 of those pairs read alike. Ordering the
+ * distinct 30 first and the twins behind them fixes that outright (0 pairs at
+ * 30 listed values, 11 at 38 where the twins are reached anyway) and costs no
+ * colors — but it moves every hashed color in marks, GWAS, canvas, multi-row
+ * and the arrangement dialog, so it is a pass with a figure refresh in it.
  */
 export const categoricalPalette = [
     ...new Set([...tableau10, ...set1, ...dark2, ...set2, ...category10].filter(hex => !NEUTRALS.has(hex.toLowerCase()))),
@@ -159,19 +152,24 @@ function freeSlot(value, size, taken) {
     return slot;
 }
 /**
- * The categorical rule every scaled channel resolves through. With no
- * `domain` a value takes `categoricalValueColor`'s slot in `range`. With one,
- * the listed values take `range` in order, continuing into the `fallback`
- * entries `range` lacks past its end, and any other value takes a slot of the
- * whole list derived from itself that no listed value holds, nor one
- * `isNear` calls the same. A value's entry depends only on the value and the
- * declaration, so every region agrees on it, and adding a listed value moves
- * only the unlisted values on the slots it takes.
+ * The categorical rule every scaled channel resolves through. The values
+ * `domain` lists take `range` in order, continuing into the `fallback`
+ * entries `range` lacks past its end. Any other value takes the slot derived
+ * from itself (`categoricalValueColor`'s, with no `domain`) unless a listed
+ * value holds it or one `isNear` calls the same, and then another slot derived
+ * from itself.
+ *
+ * With `held`, a value is dealt once, on first sight: its slot avoids every
+ * slot `held` already records and their near twins as well, so values met
+ * together never share an entry while the list has room, and the slot is
+ * recorded so the value keeps it as others arrive. A value nothing else
+ * collides with keeps the entry it takes without `held`. With no `domain`, the
+ * deal spends `range` before spilling into the `fallback` entries it lacks.
  */
-export function categoricalScale(domain, range, { fallback = [], isNear, } = {}) {
+export function categoricalScale(domain, range, { fallback = [], isNear, held, } = {}) {
     const base = range.length ? range : fallback;
     const listed = [...new Set((domain ?? []).map(String))].filter(v => v !== '');
-    if (listed.length === 0) {
+    if (listed.length === 0 && !held) {
         return value => base[valueSlot(value, base.length)];
     }
     const seen = new Set(base.map(entryKey));
@@ -183,19 +181,44 @@ export function categoricalScale(domain, range, { fallback = [], isNear, } = {})
         }),
     ];
     const size = entries.length;
+    const twins = [];
+    const twinsOf = (slot) => (twins[slot] ??= entries.flatMap((entry, i) => i === slot || isNear?.(entries[slot], entry) ? [i] : []));
     const rank = new Map(listed.map((value, i) => [value, i]));
-    const listedSlots = new Set(listed.map((_, i) => i % size));
-    const taken = new Set(entries.flatMap((entry, i) => listedSlots.has(i) ||
-        (isNear && [...listedSlots].some(j => isNear(entries[j], entry)))
-        ? [i]
-        : []));
+    const listedTaken = new Set(listed.flatMap((_, i) => twinsOf(i % size)));
+    const tiers = listed.length > 0
+        ? [[0, size]]
+        : [[0, base.length], [base.length, size]];
+    const deal = (value, taken) => {
+        for (const [from, to] of tiers) {
+            const inTier = from === 0 && to === size
+                ? taken
+                : new Set([...taken].filter(s => s >= from && s < to).map(s => s - from));
+            if (inTier.size < to - from) {
+                return from + freeSlot(value, to - from, inTier);
+            }
+        }
+        return valueSlot(value, tiers[0][1]);
+    };
     return value => {
         const i = rank.get(value);
-        return entries[i !== undefined
-            ? i % size
-            : taken.size < size
-                ? freeSlot(value, size, taken)
-                : valueSlot(value, size)];
+        if (i !== undefined) {
+            return entries[i % size];
+        }
+        if (!held) {
+            return entries[deal(value, listedTaken)];
+        }
+        let slot = held.get(value);
+        if (slot === undefined) {
+            const taken = new Set(listedTaken);
+            for (const s of held.values()) {
+                for (const twin of twinsOf(s)) {
+                    taken.add(twin);
+                }
+            }
+            slot = deal(value, taken);
+            held.set(value, slot);
+        }
+        return entries[slot];
     };
 }
 const oklabByColor = new Map();
@@ -219,12 +242,14 @@ export function similarColors(a, b) {
 /**
  * `categoricalScale` for a color channel: `palette` (the wide palette when
  * empty) spent in `domain` order and continued into the wide palette, and an
- * unlisted value never on a listed value's color or one that reads the same.
+ * unlisted value never on a listed value's color or one that reads the same,
+ * nor, with `held`, on the color of a value met before it.
  */
-export function categoricalColorScale(domain, palette = []) {
+export function categoricalColorScale(domain, palette = [], held) {
     return categoricalScale(domain, palette, {
         fallback: categoricalPalette,
         isNear: similarColors,
+        held,
     });
 }
 const MAX_CACHED_SCALES = 16;
@@ -316,11 +341,23 @@ const PALETTE_LAP_TONES = [
     // and pinks all pin against the top of the sRGB gamut and converge there.
     { lightnessShift: 0.18, chromaScale: 0.8 },
 ];
+// The color at `position` in `hexes`, each lap past the end re-lit.
+function lapColorAt(hexes, position) {
+    const hex = hexes[position % hexes.length];
+    const lap = PALETTE_LAP_TONES[Math.floor(position / hexes.length) % PALETTE_LAP_TONES.length];
+    return lap ? relight(hex, lap.lightnessShift, lap.chromaScale) : hex;
+}
 /** The palette color for a chromosome at `position` in its assembly. */
 export function refNamePaletteColorAt(position) {
-    const hex = refNameColorHexes[position % refNameColorHexes.length];
-    const lap = PALETTE_LAP_TONES[Math.floor(position / refNameColorHexes.length) % PALETTE_LAP_TONES.length];
-    return lap ? relight(hex, lap.lightnessShift, lap.chromaScale) : hex;
+    return lapColorAt(refNameColorHexes, position);
+}
+const rowColorHexes = tableau10.filter(hex => !NEUTRALS.has(hex));
+/**
+ * The color the row palette deals the row or value at `position`: tableau10
+ * less its grey, then re-lit laps of it, as a karyotype's are.
+ */
+export function rowPaletteColorAt(position) {
+    return lapColorAt(rowColorHexes, position);
 }
 /**
  * The color a refName paints, BY POSITION IN THE ASSEMBLY where the caller
@@ -353,7 +390,7 @@ const okabeIto = [
     '#d55e00',
     '#cc79a7',
 ];
-// Paul Tol, "Colour Schemes", SRON/EPS/TN/09-002 (2021), the bright scheme
+// Paul Tol, "Color Schemes", SRON/EPS/TN/09-002 (2021), the bright scheme
 const tolBright = [
     '#4477aa',
     '#ee6677',
@@ -362,7 +399,7 @@ const tolBright = [
     '#66ccee',
     '#aa3377',
 ];
-// Paul Tol, "Colour Schemes", SRON/EPS/TN/09-002 (2021), the muted scheme
+// Paul Tol, "Color Schemes", SRON/EPS/TN/09-002 (2021), the muted scheme
 const tolMuted = [
     '#cc6677',
     '#332288',
@@ -411,7 +448,7 @@ const namedPalettes = {
 };
 /**
  * A palette named in `namedPalettes`, or a comma-separated list of CSS
- * colours; undefined, with a warning, for anything else.
+ * colors; undefined, with a warning, for anything else.
  */
 export function paletteFromSpec(spec) {
     if (typeof spec !== 'string' || spec === '') {
@@ -424,7 +461,7 @@ export function paletteFromSpec(spec) {
     if (colors.every(isCssColor)) {
         return colors;
     }
-    console.warn(`palette "${spec}" is neither one of ${Object.keys(namedPalettes).join(', ')} nor a comma-separated list of CSS colours`);
+    console.warn(`palette "${spec}" is neither one of ${Object.keys(namedPalettes).join(', ')} nor a comma-separated list of CSS colors`);
     return undefined;
 }
 export { category10, set1 };

package/esm/ui/filterMenuItems.d.ts

@@ -13,7 +13,7 @@ import type { MenuItem } from './MenuTypes.ts';
  *   layout-affecting, and reachable only from the pinned feature's own
  *   right-click menu, so a pin left on another chromosome could not be reached);
  * - an undo derived from the state's ABSENCE, so it vanished with the thing it
- *   undid (the canvas colour key's "×" was a one-way door for the session);
+ *   undid (the canvas color key's "×" was a one-way door for the session);
  * - a count derived from a different predicate than the state's actual effect
  *   ("Filter by... (1)" for opening the filter dialog and pressing Submit).
  *
@@ -57,41 +57,20 @@ export declare function clearAll(items: Reversibles): void;
 export declare function undoItems(items: Reversibles, priority?: number): MenuItem[];
 export interface FilterMenuOpts {
     /**
-     * The display's narrowings, declared once (see {@link Reversible}). Supplying
-     * this derives `activeCount`, `recoveryItems` and `onClear` together, so the
-     * count in the label, the rows inside the submenu and what "Clear all filters"
-     * actually clears cannot disagree. Prefer it to spelling the three out.
+     * The display's narrowings, declared once (see {@link Reversible}). The count
+     * in the label, the undo rows inside the submenu and what "Clear all filters"
+     * clears all derive from it, so they cannot disagree. Count a narrowing when
+     * its value is not its **no-op** value, which is not always its config
+     * default: the alignments flag masks default non-zero and are the
+     * no-filtering state.
      */
-    narrowings?: Reversibles;
-    /**
-     * How many independent filters are narrowing the view right now, so the label
-     * can say that something is hiding data. Count a filter when its value is not
-     * its **no-op** value, which is not always its config default: the LD
-     * display's `minorAlleleFrequencyFilter` ships at 0.1 and is genuinely
-     * dropping variants, while the alignments flag masks default non-zero and are
-     * the no-filtering state, so they count only when edited away from it.
-     *
-     * This is usually the only affordance telling the user a filter is silently
-     * hiding rows — nothing else in the track chrome says so.
-     *
-     * Ignored when `narrowings` is given.
-     */
-    activeCount?: number;
+    narrowings: Reversibles;
     /** Opens the display's filter dialog, where it has a single one. */
     onEdit?: () => void;
     /** Controls that belong inside the submenu (inline sliders, further dialogs). */
     subItems?: MenuItem[];
-    /**
-     * Recovery rows offered alongside "Clear all filters" once something is
-     * filtering — the canvas display's "Show N hidden features", for one.
-     */
-    recoveryItems?: MenuItem[];
-    /** Turn every filter off. Offered only while `activeCount` is non-zero. */
-    onClear?: () => void;
-    /** Rides the top-level row; see the canvas display's RECOVERY_PRIORITY. */
+    /** Rides the top-level row, `TRACK_MENU_PRIORITY.recovery` on the canvas display. */
     priority?: number;
-    /** Label for the dialog opener inside the submenu. */
-    editLabel?: string;
 }
 /**
  * The "Filter by..." family, in the one shape every display uses.
@@ -109,4 +88,4 @@ export interface FilterMenuOpts {
  * multi-sample variant track said nothing, anywhere, about the rows it was
  * dropping.
  */
-export declare function filterMenuItems({ narrowings, activeCount: explicitCount, onEdit, subItems, recoveryItems: explicitRecovery, onClear: explicitClear, priority, editLabel, }: FilterMenuOpts): MenuItem[];
+export declare function filterMenuItems({ narrowings, onEdit, subItems, priority, }: FilterMenuOpts): MenuItem[];

package/esm/ui/filterMenuItems.js

@@ -46,36 +46,35 @@ export function undoItems(items, priority) {
  * multi-sample variant track said nothing, anywhere, about the rows it was
  * dropping.
  */
-export function filterMenuItems({ narrowings, activeCount: explicitCount = 0, onEdit, subItems = [], recoveryItems: explicitRecovery = [], onClear: explicitClear, priority, editLabel = 'Edit filters...', }) {
-    // One declaration drives all three, or the caller supplies them separately —
-    // the pre-`Reversible` shape, kept for the displays that haven't adopted it.
-    const count = narrowings ? activeCount(narrowings) : explicitCount;
-    const recoveryItems = narrowings ? undoItems(narrowings) : explicitRecovery;
-    const onClear = narrowings
-        ? () => {
-            clearAll(narrowings);
-        }
-        : explicitClear;
+export function filterMenuItems({ narrowings, onEdit, subItems = [], priority, }) {
+    const count = activeCount(narrowings);
     const label = count > 0 ? `Filter by... (${count})` : 'Filter by...';
     const editItem = onEdit
         ? [
             {
-                label: editLabel,
+                label: 'Edit filters...',
                 icon: FilterAltIcon,
                 onClick: onEdit,
             },
         ]
         : [];
-    const clearItem = onClear && count > 0
+    const clearItem = count > 0
         ? [
             {
                 label: 'Clear all filters',
                 icon: FilterAltOffIcon,
-                onClick: onClear,
+                onClick: () => {
+                    clearAll(narrowings);
+                },
             },
         ]
         : [];
-    const rows = [...editItem, ...subItems, ...recoveryItems, ...clearItem];
+    const rows = [
+        ...editItem,
+        ...subItems,
+        ...undoItems(narrowings),
+        ...clearItem,
+    ];
     if (!rows.length) {
         return [];
     }

package/esm/ui/index.d.ts

@@ -81,7 +81,7 @@ export { hoverBoxStyle } from './hoverBoxStyle.ts';
 export { useMouseState, useMouseTracking } from './useMouseTracking.ts';
 export type { MouseState, MouseTracker } from './useMouseTracking.ts';
 export { VIEW_HEADER_HEIGHT } from './viewHeaderHeight.ts';
-export { LEGEND_ROW_HEIGHT, LEGEND_SVG_GUTTER_WIDTH, LEGEND_SWATCH, default as SvgColorLegend, } from './SvgColorLegend.tsx';
+export { LEGEND_ROW_HEIGHT, LEGEND_SWATCH, default as SvgColorLegend, } from './SvgColorLegend.tsx';
 export type { ColorLegendEntry } from './SvgColorLegend.tsx';
 export { measureLegendText } from './measureLegendText.ts';
 export { LegendSwatchGlyph } from './LegendSwatchGlyph.tsx';

package/esm/ui/index.js

@@ -75,7 +75,7 @@ export { default as Crosshairs } from './Crosshairs.js';
 export { hoverBoxStyle } from './hoverBoxStyle.js';
 export { useMouseState, useMouseTracking } from './useMouseTracking.js';
 export { VIEW_HEADER_HEIGHT } from './viewHeaderHeight.js';
-export { LEGEND_ROW_HEIGHT, LEGEND_SVG_GUTTER_WIDTH, LEGEND_SWATCH, default as SvgColorLegend, } from './SvgColorLegend.js';
+export { LEGEND_ROW_HEIGHT, LEGEND_SWATCH, default as SvgColorLegend, } from './SvgColorLegend.js';
 export { measureLegendText } from './measureLegendText.js';
 export { LegendSwatchGlyph } from './LegendSwatchGlyph.js';
 export { MAX_LEGEND_ITEMS, legendEntries, legendIsReadable, legendSwatches, nonEmptyLegendSections, } from './legendSpec.js';

package/esm/ui/launchTargetsMenuItem.js

@@ -1,3 +1,4 @@
+import { subMenuIfAny } from './MenuTypes.js';
 /**
  * One launch offer, over the datasets that can serve it: nothing at all when
  * none can, otherwise a submenu naming each. Which dataset a launch reads from
@@ -8,17 +9,12 @@
  * data.
  */
 export function launchTargetsMenuItem({ label, icon, entries, entryLabel, onSelect, }) {
-    return entries.length
-        ? [
-            {
-                label,
-                icon,
-                type: 'subMenu',
-                subMenu: entries.map(entry => ({
-                    label: entryLabel(entry),
-                    onClick: onSelect(entry),
-                })),
-            },
-        ]
-        : [];
+    return subMenuIfAny({
+        label,
+        icon,
+        subMenu: entries.map(entry => ({
+            label: entryLabel(entry),
+            onClick: onSelect(entry),
+        })),
+    });
 }

package/esm/ui/legendMenuItem.d.ts

@@ -1,9 +1,9 @@
 import type { MenuItem } from './MenuTypes.ts';
 import type { SettingRowOptions } from './toggleMenuItems.ts';
 /**
- * The "Show legend" checkbox behind `LegendMixin`'s row and the circular
- * view's. Takes the value and the toggle, in `checkboxItem`'s order, which is
- * all this adds a label to.
+ * The "Show legend" checkbox for a menu with no "Show..." submenu, such as the
+ * circular view's. Inside "Show..." the row reads "Legend"
+ * (`legendCheckboxItem` in `@jbrowse/display-kit/LegendMixin`).
  *
  * The `showLegend` **config slots** stay per display: their default values
  * legitimately differ (a Hi-C color scale is off by default, a variant genotype
@@ -12,5 +12,5 @@ import type { SettingRowOptions } from './toggleMenuItems.ts';
  * `synteny-core`'s color-by legend has no toggle at all: it comes up with the
  * modes that have a key and is dismissed from its own close button.
  */
-/** #menuBuilder showLegendCheckboxItem | the shared "Show legend" checkbox */
+/** #menuBuilder showLegendCheckboxItem | a "Show legend" checkbox outside a "Show..." submenu */
 export declare function showLegendCheckboxItem(checked: boolean, onToggle: () => void, opts?: SettingRowOptions): MenuItem;

package/esm/ui/legendMenuItem.js

@@ -1,8 +1,8 @@
 import { checkboxItem } from './toggleMenuItems.js';
 /**
- * The "Show legend" checkbox behind `LegendMixin`'s row and the circular
- * view's. Takes the value and the toggle, in `checkboxItem`'s order, which is
- * all this adds a label to.
+ * The "Show legend" checkbox for a menu with no "Show..." submenu, such as the
+ * circular view's. Inside "Show..." the row reads "Legend"
+ * (`legendCheckboxItem` in `@jbrowse/display-kit/LegendMixin`).
  *
  * The `showLegend` **config slots** stay per display: their default values
  * legitimately differ (a Hi-C color scale is off by default, a variant genotype
@@ -11,7 +11,7 @@ import { checkboxItem } from './toggleMenuItems.js';
  * `synteny-core`'s color-by legend has no toggle at all: it comes up with the
  * modes that have a key and is dismissed from its own close button.
  */
-/** #menuBuilder showLegendCheckboxItem | the shared "Show legend" checkbox */
+/** #menuBuilder showLegendCheckboxItem | a "Show legend" checkbox outside a "Show..." submenu */
 export function showLegendCheckboxItem(checked, onToggle, opts) {
     return checkboxItem('Show legend', checked, onToggle, opts);
 }

package/esm/ui/menuItemAdornment.d.ts

@@ -3,7 +3,7 @@ import type { MenuItem } from './MenuTypes.ts';
  * The trailing control a menu row draws, resolved at the point of drawing.
  *
  * `endAdornment` is an element the builder already made — synteny's and
- * wiggle's colour swatches — so the row hands it straight through.
+ * wiggle's color swatches — so the row hands it straight through.
  *
  * Lives in one place rather than at each of the four render sites, because the
  * "does any row have one?" predicate and the rendering have to agree — a row

package/esm/ui/menuItemAdornment.js

@@ -2,7 +2,7 @@
  * The trailing control a menu row draws, resolved at the point of drawing.
  *
  * `endAdornment` is an element the builder already made — synteny's and
- * wiggle's colour swatches — so the row hands it straight through.
+ * wiggle's color swatches — so the row hands it straight through.
  *
  * Lives in one place rather than at each of the four render sites, because the
  * "does any row have one?" predicate and the rendering have to agree — a row

package/esm/ui/menuItems.d.ts

@@ -19,5 +19,5 @@ export { withHint } from './menuLabels.ts';
 export { makeRadioSubMenu } from './radioSubMenu.ts';
 export { showLegendCheckboxItem } from './legendMenuItem.ts';
 export type { RadioOption, SettingRowOptions } from './toggleMenuItems.ts';
-export { resolveSubMenu, staysOpenOnClick } from './MenuTypes.ts';
+export { TRACK_MENU_PRIORITY, resolveSubMenu, staysOpenOnClick, subMenuIfAny, } from './MenuTypes.ts';
 export type { BaseMenuItem, CheckboxMenuItem, ClickableMenuItem, CustomMenuItem, MenuDivider, MenuItem, MenuItemClickHandler, MenuItemsGetter, MenuSubHeader, NormalMenuItem, RadioMenuItem, SubMenuItem, } from './MenuTypes.ts';

package/esm/ui/menuItems.js

@@ -18,4 +18,4 @@ export { checkboxItem, radioItem, radioItems, toggleItem, withSubHeader, } from
 export { withHint } from './menuLabels.js';
 export { makeRadioSubMenu } from './radioSubMenu.js';
 export { showLegendCheckboxItem } from './legendMenuItem.js';
-export { resolveSubMenu, staysOpenOnClick } from './MenuTypes.js';
+export { TRACK_MENU_PRIORITY, resolveSubMenu, staysOpenOnClick, subMenuIfAny, } from './MenuTypes.js';

package/esm/ui/menuLabels.d.ts

@@ -14,7 +14,7 @@
 /**
  * #menuBuilder withHint | a row label carrying an aside that is only sometimes there
  *
- * `withHint('Show row separators', tooShort ? 'needs rows 4px or taller' :
+ * `withHint('Row separators', tooShort ? 'needs rows 4px or taller' :
  * undefined)`.
  *
  * The rows that want this are the ones that can be on, correctly on, and doing
@@ -29,7 +29,7 @@
  * has no reason to hover, since from the tick it looks like it already works.
  *
  * AN EM DASH, NOT PARENTHESES. Two of these labels already end in a
- * parenthetical of their own ("Show conservation (% identity)", "Codon changes
+ * parenthetical of their own ("Conservation (% identity)", "Codon changes
  * (amino acids)"), and a second pair straight after the first reads as a typo.
  * It also keeps the aside distinct from the ` - ` that names a permanent half of
  * a label ("Square view - average bp per pixel").

package/esm/ui/menuLabels.js

@@ -14,7 +14,7 @@
 /**
  * #menuBuilder withHint | a row label carrying an aside that is only sometimes there
  *
- * `withHint('Show row separators', tooShort ? 'needs rows 4px or taller' :
+ * `withHint('Row separators', tooShort ? 'needs rows 4px or taller' :
  * undefined)`.
  *
  * The rows that want this are the ones that can be on, correctly on, and doing
@@ -29,7 +29,7 @@
  * has no reason to hover, since from the tick it looks like it already works.
  *
  * AN EM DASH, NOT PARENTHESES. Two of these labels already end in a
- * parenthetical of their own ("Show conservation (% identity)", "Codon changes
+ * parenthetical of their own ("Conservation (% identity)", "Codon changes
  * (amino acids)"), and a second pair straight after the first reads as a typo.
  * It also keeps the aside distinct from the ` - ` that names a permanent half of
  * a label ("Square view - average bp per pixel").

package/esm/ui/multiTrackMenuItems.d.ts

@@ -1,10 +1,10 @@
 import type PluginManager from '../PluginManager.ts';
-import type { AnyConfigurationModel } from '../configuration/index.ts';
+import type { AnyTrackConfig } from '../configuration/index.ts';
 import type { AbstractSessionModel } from '../util/types/index.ts';
 import type { MenuItem } from './MenuTypes.ts';
 import type { IStateTreeNode } from '@jbrowse/mobx-state-tree';
 export interface MultiTrackSelection extends IStateTreeNode {
-    selection: AnyConfigurationModel[];
+    selection: AnyTrackConfig[];
 }
 export interface MultiTrackMenuItemsProps {
     session: AbstractSessionModel;

package/esm/ui/palette.d.ts

@@ -253,10 +253,10 @@ export interface JBrowsePalette extends StringColors, NeutralTokens, SemanticCol
     mode: 'light' | 'dark';
     primary: ColorQuad;
     /**
-     * The primary colour where it marks something on the page's own ground,
+     * The primary color where it marks something on the page's own ground,
      * such as a checked box or a selected row. `primary.main` in light mode. In
      * dark mode a primary as deep as midnight vanishes against the background,
-     * so it is the secondary text colour, which the Material controls take there
+     * so it is the secondary text color, which the Material controls take there
      * too.
      */
     accent: string;

package/esm/ui/palette.js

@@ -264,7 +264,7 @@ export const colorPairRR = '#5555bb';
 // the dullest (C* 20.4 against 34.6), which together is what "reads as a smudge"
 // means. Reported on `cancer_sv/k562_bcr_abl_split`: "the arcs for the
 // interchromosomal reads are very dark". The tell is a 2 px stroke — at that
-// weight it was the only colour in either scheme that disappeared, while as a
+// weight it was the only color in either scheme that disappeared, while as a
 // large flat read fill it was merely dull. This slot has to survive both.
 //
 // The fix is that unmappedMate left the warm family (see its own note), which
@@ -330,7 +330,7 @@ export const colorShortInsert = '#f582c0';
  * #color alignments-pair-orientation | Mate unmapped | Mate aligned nowhere
  * #color alignments-insert-size | Mate unmapped | Mate aligned nowhere
  */
-// A NON-COLOUR, at the dark end of the neutral scale on BOTH themes. It takes
+// A NON-COLOR, at the dark end of the neutral scale on BOTH themes. It takes
 // the first half of the `readOverlap` pattern and not the second, and that split
 // is the thing to understand here.
 //
@@ -371,7 +371,7 @@ export const colorShortInsert = '#f582c0';
 // has to survive, not a 40 px square.
 //
 // White was the previous dark value, and it reads as the loudest thing in a dark
-// pileup — louder than the coloured categories it is meant to be quieter than —
+// pileup — louder than the colored categories it is meant to be quieter than —
 // which is the "glaring near-white blocks" failure `colorPairLRDark` already
 // exists to avoid. Going dark also drops the one real cost white carried, dE 9.4
 // to `readOverlap`'s dark #e4e4e4 — which the note that shipped it called dE 7,
@@ -385,10 +385,10 @@ export const colorShortInsert = '#f582c0';
 //
 // IGV goes further than any of this: `setPairOrientation` requires
 // `mate.isMapped()`, so an unmapped mate falls through every branch and takes
-// the default read colour. Going that far loses the one thing the category is
+// the default read color. Going that far loses the one thing the category is
 // for — under insert size, tlen is 0 and would otherwise paint
 // `colorShortInsert`, a false claim — so it keeps a mark, and makes the mark a
-// non-colour.
+// non-color.
 export const colorUnmappedMate = '#000000';
 // See colorUnmappedMate: the same dark neutral, lifted off the #121212 ground by
 // the least that still reads as a read rather than as a hole.
@@ -594,12 +594,12 @@ const defaultBases = {
 };
 const defaultFramesCDS = [
     null,
-    { main: '#FF8080' },
-    { main: '#80FF80' },
+    { main: '#F46868' },
+    { main: '#2EAA2E' },
     { main: '#8080FF' },
     { main: '#8080FF' },
-    { main: '#80FF80' },
-    { main: '#FF8080' },
+    { main: '#2EAA2E' },
+    { main: '#F46868' },
 ];
 const defaultFrames = [
     null,
@@ -726,7 +726,7 @@ export function resolvePalette(args = {}) {
     const preset = presets[themeName] ?? presets.default ?? {};
     const declared = themeName === 'default' ? { ...preset, ...configTheme?.palette } : preset;
     // A palette that declares a `mode` is pinned to it: an admin who registers a
-    // dark `extraThemes` entry picked its colours for dark, and the light half
+    // dark `extraThemes` entry picked its colors for dark, and the light half
     // they never wrote is not JBrowse's to invent. A `mode` in the config `theme`
     // slot is the opposite — the site's starting point for the one palette that
     // merges it — so a reader's own pick wins over that.

package/esm/ui/radioSubMenu.d.ts

@@ -1,4 +1,5 @@
 import type { MenuItem } from './MenuTypes.ts';
+import type { RadioOption } from './toggleMenuItems.ts';
 import type React from 'react';
 /**
  * Build a radio submenu from a `[value, label]` option table keyed on the
@@ -8,7 +9,7 @@ import type React from 'react';
  * appended after the radios (e.g. a related checkbox) within the same submenu.
  *
  * Every display has a submenu of this shape naming the one thing it draws —
- * wiggle's "Plot type", MAF's "Row coloring", Hi-C's "Color scheme", the arc
+ * wiggle's and MAF's "Plot type", Hi-C's "Color scheme", the arc
  * display's "Display mode". The labels stay display-specific (they name
  * genuinely different choices); the construction is shared so a hand-rolled
  * copy can't forget that a settings row keeps the menu open.
@@ -20,9 +21,10 @@ import type React from 'react';
 export declare function makeRadioSubMenu<T extends string>(opts: {
     label: string;
     icon?: React.ElementType;
-    value: T;
+    value: T | undefined;
     onChange: (value: T) => void;
-    options: readonly (readonly [T, string])[];
+    /** `[value, label]` pairs, or `RadioOption`s for rows gated one by one */
+    options: readonly (readonly [T, string] | RadioOption<T>)[];
     extraItems?: MenuItem[];
     /**
      * Prose for the group, on the row that opens it. One "?" here rather than one