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

package/esm/ui/colors.js

@@ -1,4 +1,8 @@
-import { relight } from '../util/color/index.js';
+import * as convert from '../util/color-bits/convert.js';
+import { NO_CATEGORY_COLOR, relight } from '../util/color/index.js';
+import { cssColorToNormalizedRgb } from '../util/colorBits.js';
+import { isCssColor } from '../util/cssColorParse.js';
+import { valueText } from '../util/groupKeys.js';
 const category10 = [
     '#1f77b4',
     '#ff7f0e',
@@ -108,10 +112,149 @@ export const paletteColors = {
  * Past the end is the caller's problem, and the two callers answer differently
  * on purpose: an attribute palette-by hashes the VALUE (stable across
  * 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.
+ *
+ * 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.
  */
 export const categoricalPalette = [
     ...new Set([...tableau10, ...set1, ...dark2, ...set2, ...category10].filter(hex => !NEUTRALS.has(hex.toLowerCase()))),
 ];
+export function categoricalValueColor(value, palette = categoricalPalette) {
+    return palette[valueSlot(value, palette.length)];
+}
+function valueSlot(value, n) {
+    const num = Number(value);
+    return value !== '' && Number.isInteger(num) && num >= 0
+        ? (num + n - 1) % n
+        : hashString(value) % n;
+}
+function entryKey(entry) {
+    return typeof entry === 'string' ? entry.toLowerCase() : entry;
+}
+// The first slot derived from the value that `taken` does not hold, trying
+// rehashes before walking, so the values landing on a taken slot spread over
+// the free ones instead of piling onto the next.
+function freeSlot(value, size, taken) {
+    let slot = valueSlot(value, size);
+    for (let salt = 1; taken.has(slot) && salt <= size; salt++) {
+        slot = hashString(`${salt}:${value}`) % size;
+    }
+    for (let step = 0; taken.has(slot) && step < size; step++) {
+        slot = (slot + 1) % size;
+    }
+    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.
+ */
+export function categoricalScale(domain, range, { fallback = [], isNear, } = {}) {
+    const base = range.length ? range : fallback;
+    const listed = [...new Set((domain ?? []).map(String))].filter(v => v !== '');
+    if (listed.length === 0) {
+        return value => base[valueSlot(value, base.length)];
+    }
+    const seen = new Set(base.map(entryKey));
+    const entries = [
+        ...base,
+        ...fallback.filter(entry => {
+            const key = entryKey(entry);
+            return seen.has(key) ? false : (seen.add(key), true);
+        }),
+    ];
+    const size = entries.length;
+    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]
+        : []));
+    return value => {
+        const i = rank.get(value);
+        return entries[i !== undefined
+            ? i % size
+            : taken.size < size
+                ? freeSlot(value, size, taken)
+                : valueSlot(value, size)];
+    };
+}
+const oklabByColor = new Map();
+function oklabOf(color) {
+    let lab = oklabByColor.get(color);
+    if (lab === undefined) {
+        lab = convert.xyzd65ToOklab(...convert.xyzd50ToD65(...convert.srgbToXyzd50(...cssColorToNormalizedRgb(color))));
+        oklabByColor.set(color, lab);
+    }
+    return lab;
+}
+/**
+ * Whether two CSS colors read as one: under 0.05 apart in OKLab, where the
+ * wide palette's tableau and category10 oranges sit 0.003 apart.
+ */
+export function similarColors(a, b) {
+    const [l1, a1, b1] = oklabOf(a);
+    const [l2, a2, b2] = oklabOf(b);
+    return Math.hypot(l1 - l2, a1 - a2, b1 - b2) < 0.05;
+}
+/**
+ * `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.
+ */
+export function categoricalColorScale(domain, palette = []) {
+    return categoricalScale(domain, palette, {
+        fallback: categoricalPalette,
+        isNear: similarColors,
+    });
+}
+const MAX_CACHED_SCALES = 16;
+const scaleCache = new Map();
+function cachedColorScale(domain, palette) {
+    const key = `${domain.join('\u001F')}\u001E${palette.join('\u001F')}`;
+    let scale = scaleCache.get(key);
+    if (scale === undefined) {
+        if (scaleCache.size >= MAX_CACHED_SCALES) {
+            scaleCache.delete(scaleCache.keys().next().value);
+        }
+        scale = categoricalColorScale(domain, palette);
+        scaleCache.set(key, scale);
+    }
+    return scale;
+}
+/**
+ * The color one value of a categorical color channel paints, by
+ * `categoricalColorScale`. A value-less feature is neutral grey, and an array
+ * value joins the way a group key does.
+ */
+export function categoricalColor(value, domain = [], palette = []) {
+    const label = valueText(value);
+    if (label === '') {
+        return NO_CATEGORY_COLOR;
+    }
+    return domain.length === 0 && palette.length === 0
+        ? categoricalValueColor(label)
+        : cachedColorScale(domain, palette)(label);
+}
 // only category10 and set1 are imported by name; the rest are reached through
 // paletteColors above
 /**
@@ -198,4 +341,90 @@ export function refNameColor(name, position) {
         ? refNameColorHexes[hashString(name) % refNameColorHexes.length]
         : refNamePaletteColorAt(position);
 }
+// The four below are as their sources publish them less the black or grey,
+// which reads as "no value" on a fill (see NEUTRALS).
+// Okabe & Ito, "Color Universal Design" (2008), jfly.uni-koeln.de/color
+const okabeIto = [
+    '#e69f00',
+    '#56b4e9',
+    '#009e73',
+    '#f0e442',
+    '#0072b2',
+    '#d55e00',
+    '#cc79a7',
+];
+// Paul Tol, "Colour Schemes", SRON/EPS/TN/09-002 (2021), the bright scheme
+const tolBright = [
+    '#4477aa',
+    '#ee6677',
+    '#228833',
+    '#ccbb44',
+    '#66ccee',
+    '#aa3377',
+];
+// Paul Tol, "Colour Schemes", SRON/EPS/TN/09-002 (2021), the muted scheme
+const tolMuted = [
+    '#cc6677',
+    '#332288',
+    '#ddcc77',
+    '#117733',
+    '#88ccee',
+    '#882255',
+    '#44aa99',
+    '#999933',
+    '#aa4499',
+];
+// Tableau 20, Tableau 10.0's paired palette (Maureen Stone, 2016)
+const tableau20 = [
+    '#4e79a7',
+    '#a0cbe8',
+    '#f28e2b',
+    '#ffbe7d',
+    '#59a14f',
+    '#8cd17d',
+    '#b6992d',
+    '#f1ce63',
+    '#499894',
+    '#86bcb6',
+    '#e15759',
+    '#ff9d9a',
+    '#d37295',
+    '#fabfd2',
+    '#b07aa1',
+    '#d4a6c8',
+    '#9d7660',
+    '#d7b5a6',
+];
+/** The palettes a capture run can deal the rows from by name (`paletteFromSpec`). */
+const namedPalettes = {
+    set1: () => set1,
+    categoricalPalette: () => categoricalPalette,
+    tableau10: () => tableau10,
+    // ColorBrewer Set2, which d3-scale-chromatic publishes as schemeSet2
+    schemeSet2: () => set2,
+    okabeIto: () => okabeIto,
+    tolBright: () => tolBright,
+    tolMuted: () => tolMuted,
+    tableau20: () => tableau20,
+    // every lap `refNamePaletteColorAt` re-lights category10 through
+    relit: () => Array.from({ length: refNameColorHexes.length * PALETTE_LAP_TONES.length }, (_, i) => refNamePaletteColorAt(i)),
+};
+/**
+ * A palette named in `namedPalettes`, or a comma-separated list of CSS
+ * colours; undefined, with a warning, for anything else.
+ */
+export function paletteFromSpec(spec) {
+    if (typeof spec !== 'string' || spec === '') {
+        return undefined;
+    }
+    if (Object.hasOwn(namedPalettes, spec)) {
+        return namedPalettes[spec]();
+    }
+    const colors = spec.split(/,(?![^(]*\))/).map(c => c.trim());
+    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`);
+    return undefined;
+}
 export { category10, set1 };

package/esm/ui/hoverBoxStyle.d.ts

@@ -5,7 +5,19 @@ import type { CSSProperties } from 'react';
  * washes them out.
  *
  * One definition because the alternative was proven to fail: `highlightBoxColors`
- * exists for the same reason, after two backends drifted apart on their own alpha
- * literals kept in step by a comment.
+ * below exists for the same reason, after two backends drifted apart on their own
+ * alpha literals kept in step by a comment.
  */
 export declare const hoverBoxStyle: CSSProperties;
+/**
+ * The border and fill of a pinned highlight box, off the palette's highlight
+ * hue. The chrome draws it on screen and `renderDisplaySvg` bakes it into the
+ * export, so both reach one definition.
+ *
+ * JBrowse's own `alpha`, not Material UI's: the SVG export reaches this module
+ * and should not drag @mui/material along.
+ */
+export declare function highlightBoxColors(highlightMain: string): {
+    border: string;
+    fill: string;
+};

package/esm/ui/hoverBoxStyle.js

@@ -1,13 +1,28 @@
+import { alpha } from './palette.js';
 /**
  * The hover mark for a cell or block on a canvas display: a white wash plus a
  * dark border, never a color tint — the cell colors are the data, and a tint
  * washes them out.
  *
  * One definition because the alternative was proven to fail: `highlightBoxColors`
- * exists for the same reason, after two backends drifted apart on their own alpha
- * literals kept in step by a comment.
+ * below exists for the same reason, after two backends drifted apart on their own
+ * alpha literals kept in step by a comment.
  */
 export const hoverBoxStyle = {
     border: '1px solid rgba(0,0,0,0.5)',
     background: 'rgba(255,255,255,0.3)',
 };
+/**
+ * The border and fill of a pinned highlight box, off the palette's highlight
+ * hue. The chrome draws it on screen and `renderDisplaySvg` bakes it into the
+ * export, so both reach one definition.
+ *
+ * JBrowse's own `alpha`, not Material UI's: the SVG export reaches this module
+ * and should not drag @mui/material along.
+ */
+export function highlightBoxColors(highlightMain) {
+    return {
+        border: alpha(highlightMain, 0.9),
+        fill: alpha(highlightMain, 0.25),
+    };
+}

package/esm/ui/index.d.ts

@@ -1,4 +1,4 @@
-export { type JBrowseTheme, type SerializableThemeArgs, type ThemeMap, colorFwdStrand, colorInterchrom, colorLongInsert, colorLongreadInv, colorNeutralRead, colorPairLL, colorPairLR, colorPairLRDark, colorPairRL, colorPairRR, colorRevStrand, colorShortInsert, colorSplitReadInversion, colorSupplementary, colorUnmappedMate, colorUnmappedMateDark, createJBrowseBaseTheme, createJBrowseTheme, createJBrowseThemeFromArgs, defaultThemes, methylated5hmC, methylated5mC, tagColorPalette, unmethylated5mC, } from './theme.ts';
+export { type JBrowseTheme, type SerializableThemeArgs, type ThemeMap, colorFwdStrand, colorInterchrom, colorLongInsert, colorLongreadInv, colorPairLL, colorPairLR, colorPairLRDark, colorPairRL, colorPairRR, colorRevStrand, colorShortInsert, colorSplitReadInversion, colorSupplementary, colorUnmappedMate, colorUnmappedMateDark, createJBrowseBaseTheme, createJBrowseTheme, createJBrowseThemeFromArgs, defaultThemes, methylated5hmC, methylated5mC, tagColorPalette, unmethylated5mC, } from './theme.ts';
 export { default as BaseExportSvgDialog } from './BaseExportSvgDialog.tsx';
 export type { BaseExportSvgOptions } from './BaseExportSvgDialog.tsx';
 export { default as ExportSvgDialog } from './ExportSvgDialog.tsx';
@@ -8,7 +8,8 @@ export { default as AssemblySelector } from './AssemblySelector.tsx';
 export { useAssemblySelection } from './useAssemblySelection.ts';
 export { useRecentLocations } from './useRecentLocations.ts';
 export type { RecentLocation } from './useRecentLocations.ts';
-export { RefNameAutocompleteEndAdornment, adornmentReservePx, getInputWidth, default as RefNameAutocomplete, } from './RefNameAutocomplete/index.tsx';
+export { RefNameAutocompleteEndAdornment, default as RefNameAutocomplete, } from './RefNameAutocomplete/index.tsx';
+export { adornmentReservePx, getInputWidth, } from './RefNameAutocomplete/util.ts';
 export { default as CascadingMenu } from './CascadingMenu.tsx';
 export { default as CascadingMenuButton } from './CascadingMenuButton.tsx';
 export { default as ContextMenu } from './ContextMenu.tsx';
@@ -37,7 +38,7 @@ export { default as MonospaceTextField } from './MonospaceTextField.tsx';
 export { default as ShareLinkField } from './ShareLinkField.tsx';
 export { default as SingleSlider } from './SingleSlider.tsx';
 export { default as SliderTooltip } from './SliderTooltip.tsx';
-export { makePromotableSizeMenu, makeSizeMenu, makeSizeSubMenu, } from './makeSizeMenu.tsx';
+export { makeSizeMenu, makeSizeSubMenu } from './makeSizeMenu.tsx';
 export { INLINE_MENU_ROW_WIDTH, ResetToDefaultButton, } from './InlineMenuControls.tsx';
 export { sliderScale } from './sliderScale.ts';
 export type { SliderScale } from './sliderScale.ts';
@@ -48,6 +49,7 @@ export { default as StatusProgressBar } from './StatusProgressBar.tsx';
 export { default as Menu } from './Menu.tsx';
 export { default as PrerenderedCanvas } from './PrerenderedCanvas.tsx';
 export { default as ResizeHandle } from './ResizeHandle.tsx';
+export { default as ScrollChrome } from './ScrollChrome.tsx';
 export { default as ScrollEdgeShadow } from './ScrollEdgeShadow.tsx';
 export { default as VerticalScrollbar } from './VerticalScrollbar.tsx';
 export { default as SubmitDialog } from './SubmitDialog.tsx';
@@ -59,6 +61,7 @@ export { default as SettingsChangesTable } from './SettingsChangesTable.tsx';
 export { default as ActionLink } from './ActionLink.tsx';
 export { default as ExternalLink } from './ExternalLink.tsx';
 export { default as SanitizedHTML } from './SanitizedHTML.tsx';
+export { default as BaseTooltip } from './LazyBaseTooltip.tsx';
 export { default as PluggableComponent } from './PluggableComponent.tsx';
 export { default as PluggableComponents } from './PluggableComponents.tsx';
 export type { ComponentExtensionPointName } from './PluggableComponents.tsx';
@@ -70,23 +73,20 @@ export type { SlotExtensionPointName, SlotProps, WrapperProps, } from './wrapCom
 export { matchesTrackSelector } from './extensionSelectors.ts';
 export type { TrackSelector } from './extensionSelectors.ts';
 export type { BaseMenuItem, CheckboxMenuItem, ClickableMenuItem, CustomMenuItem, MenuDivider, MenuItem, MenuItemClickHandler, MenuItemsGetter, MenuSubHeader, NormalMenuItem, RadioMenuItem, SubMenuItem, } from './MenuTypes.ts';
-export { staysOpenOnClick } from './MenuTypes.ts';
+export { resolveSubMenu, staysOpenOnClick } from './MenuTypes.ts';
 export { LAUNCH_LABEL, pushIntoSubMenu, pushLaunchViewMenuItem, } from './launchViewMenu.ts';
 export { launchTargetsMenuItem } from './launchTargetsMenuItem.ts';
 export { default as Crosshairs } from './Crosshairs.tsx';
 export { hoverBoxStyle } from './hoverBoxStyle.ts';
 export { useMouseState, useMouseTracking } from './useMouseTracking.ts';
 export type { MouseState, MouseTracker } from './useMouseTracking.ts';
-export { PinAdornment } from './PinAdornment.tsx';
-export { promotableRadioItem, promotableRadioItems, promotableToggleItem, } from './promotableMenuItems.ts';
-export { displayTypesWithPromotableSlots, promotableSlotsWithoutPin, } from './promotablePinCoverage.ts';
-export declare const VIEW_HEADER_HEIGHT = 28;
-export { GRADIENT_LEGEND_HEIGHT, GRADIENT_LEGEND_SVG_AREA_WIDTH, GRADIENT_LEGEND_WIDTH, default as SvgGradientLegend, } from './SvgGradientLegend.tsx';
-export type { GradientLabel, GradientStop } from './SvgGradientLegend.tsx';
-export { LEGEND_ROW_HEIGHT, LEGEND_SWATCH, default as SvgColorLegend, } from './SvgColorLegend.tsx';
+export { VIEW_HEADER_HEIGHT } from './viewHeaderHeight.ts';
+export { LEGEND_ROW_HEIGHT, LEGEND_SVG_GUTTER_WIDTH, LEGEND_SWATCH, default as SvgColorLegend, } from './SvgColorLegend.tsx';
 export type { ColorLegendEntry } from './SvgColorLegend.tsx';
 export { measureLegendText } from './measureLegendText.ts';
 export { LegendSwatchGlyph } from './LegendSwatchGlyph.tsx';
 export { MAX_LEGEND_ITEMS, legendEntries, legendIsReadable, legendSwatches, nonEmptyLegendSections, } from './legendSpec.ts';
-export type { LegendItem, LegendMark, LegendSection, LegendSpec, LegendSwatch, } from './legendSpec.ts';
+export type { LegendGradient, LegendItem, LegendSection, LegendSpec, LegendSwatch, } from './legendSpec.ts';
+export { colorScaleIsEmpty, legendSpecOf } from './colorScale.ts';
+export type { CategoricalEntry, CategoricalScale, ColorScale, RampScale, RampStop, } from './colorScale.ts';
 export { checkboxItem, radioItems } from './toggleMenuItems.ts';

package/esm/ui/index.js

@@ -1,4 +1,4 @@
-export { colorFwdStrand, colorInterchrom, colorLongInsert, colorLongreadInv, colorNeutralRead, colorPairLL, colorPairLR, colorPairLRDark, colorPairRL, colorPairRR, colorRevStrand, colorShortInsert, colorSplitReadInversion, colorSupplementary, colorUnmappedMate, colorUnmappedMateDark, createJBrowseBaseTheme, createJBrowseTheme, createJBrowseThemeFromArgs, defaultThemes, methylated5hmC, methylated5mC, tagColorPalette, unmethylated5mC, } from './theme.js';
+export { colorFwdStrand, colorInterchrom, colorLongInsert, colorLongreadInv, colorPairLL, colorPairLR, colorPairLRDark, colorPairRL, colorPairRR, colorRevStrand, colorShortInsert, colorSplitReadInversion, colorSupplementary, colorUnmappedMate, colorUnmappedMateDark, createJBrowseBaseTheme, createJBrowseTheme, createJBrowseThemeFromArgs, defaultThemes, methylated5hmC, methylated5mC, tagColorPalette, unmethylated5mC, } from './theme.js';
 export { default as BaseExportSvgDialog } from './BaseExportSvgDialog.js';
 export { default as ExportSvgDialog } from './ExportSvgDialog.js';
 export { useExportSvgPreference } from './useExportSvgPreference.js';
@@ -6,7 +6,8 @@ export { LogoFull, Logomark } from './Logo.js';
 export { default as AssemblySelector } from './AssemblySelector.js';
 export { useAssemblySelection } from './useAssemblySelection.js';
 export { useRecentLocations } from './useRecentLocations.js';
-export { RefNameAutocompleteEndAdornment, adornmentReservePx, getInputWidth, default as RefNameAutocomplete, } from './RefNameAutocomplete/index.js';
+export { RefNameAutocompleteEndAdornment, default as RefNameAutocomplete, } from './RefNameAutocomplete/index.js';
+export { adornmentReservePx, getInputWidth, } from './RefNameAutocomplete/util.js';
 export { default as CascadingMenu } from './CascadingMenu.js';
 export { default as CascadingMenuButton } from './CascadingMenuButton.js';
 export { default as ContextMenu } from './ContextMenu.js';
@@ -34,7 +35,7 @@ export { default as MonospaceTextField } from './MonospaceTextField.js';
 export { default as ShareLinkField } from './ShareLinkField.js';
 export { default as SingleSlider } from './SingleSlider.js';
 export { default as SliderTooltip } from './SliderTooltip.js';
-export { makePromotableSizeMenu, makeSizeMenu, makeSizeSubMenu, } from './makeSizeMenu.js';
+export { makeSizeMenu, makeSizeSubMenu } from './makeSizeMenu.js';
 export { INLINE_MENU_ROW_WIDTH, ResetToDefaultButton, } from './InlineMenuControls.js';
 export { sliderScale } from './sliderScale.js';
 export { default as ErrorBar } from './ErrorBar.js';
@@ -44,6 +45,7 @@ export { default as StatusProgressBar } from './StatusProgressBar.js';
 export { default as Menu } from './Menu.js';
 export { default as PrerenderedCanvas } from './PrerenderedCanvas.js';
 export { default as ResizeHandle } from './ResizeHandle.js';
+export { default as ScrollChrome } from './ScrollChrome.js';
 export { default as ScrollEdgeShadow } from './ScrollEdgeShadow.js';
 export { default as VerticalScrollbar } from './VerticalScrollbar.js';
 export { default as SubmitDialog } from './SubmitDialog.js';
@@ -55,37 +57,27 @@ export { default as SettingsChangesTable } from './SettingsChangesTable.js';
 export { default as ActionLink } from './ActionLink.js';
 export { default as ExternalLink } from './ExternalLink.js';
 export { default as SanitizedHTML } from './SanitizedHTML.js';
-// BaseTooltip is deliberately NOT re-exported here: it reaches @floating-ui
-// (~266KB), and this barrel is imported by eager plugin entries, so the
-// re-export alone held that dependency on the startup path. Every consumer
-// deep-imports '@jbrowse/core/ui/BaseTooltip' instead.
+// The eager BaseTooltip reaches @floating-ui (~266KB), and this barrel is
+// imported by eager plugin entries, so the barrel serves the lazy wrapper:
+// published apollo reads `BaseTooltip` off the served ui namespace. In-tree
+// consumers deep-import '@jbrowse/core/ui/BaseTooltip'.
+export { default as BaseTooltip } from './LazyBaseTooltip.js';
 export { default as PluggableComponent } from './PluggableComponent.js';
 export { default as PluggableComponents } from './PluggableComponents.js';
 export { default as PluggableElements } from './PluggableElements.js';
 export { addExtensionElement } from './addExtensionElement.js';
 export { wrapComponent } from './wrapComponent.js';
 export { matchesTrackSelector } from './extensionSelectors.js';
-export { staysOpenOnClick } from './MenuTypes.js';
+export { resolveSubMenu, staysOpenOnClick } from './MenuTypes.js';
 export { LAUNCH_LABEL, pushIntoSubMenu, pushLaunchViewMenuItem, } from './launchViewMenu.js';
 export { launchTargetsMenuItem } from './launchTargetsMenuItem.js';
 export { default as Crosshairs } from './Crosshairs.js';
 export { hoverBoxStyle } from './hoverBoxStyle.js';
 export { useMouseState, useMouseTracking } from './useMouseTracking.js';
-export { PinAdornment } from './PinAdornment.js';
-export { promotableRadioItem, promotableRadioItems, promotableToggleItem, } from './promotableMenuItems.js';
-// Not on the React-free `menuItems.ts` entry beside the two builders above: this
-// reads a config's slot table, so it pulls `configuration/promotableSlots.ts`
-// in, and that entry exists precisely to stay out of every plugin's eager graph.
-//
-// `pinnedSlots`, the walk underneath it, stays module-private: the question a
-// caller has is "which promotable slots does this menu miss", and answering the
-// half of it that lists what a menu *does* offer needs the schema's slot table
-// to mean anything.
-export { displayTypesWithPromotableSlots, promotableSlotsWithoutPin, } from './promotablePinCoverage.js';
-export const VIEW_HEADER_HEIGHT = 28;
-export { GRADIENT_LEGEND_HEIGHT, GRADIENT_LEGEND_SVG_AREA_WIDTH, GRADIENT_LEGEND_WIDTH, default as SvgGradientLegend, } from './SvgGradientLegend.js';
-export { LEGEND_ROW_HEIGHT, LEGEND_SWATCH, default as SvgColorLegend, } from './SvgColorLegend.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 { measureLegendText } from './measureLegendText.js';
 export { LegendSwatchGlyph } from './LegendSwatchGlyph.js';
 export { MAX_LEGEND_ITEMS, legendEntries, legendIsReadable, legendSwatches, nonEmptyLegendSections, } from './legendSpec.js';
+export { colorScaleIsEmpty, legendSpecOf } from './colorScale.js';
 export { checkboxItem, radioItems } from './toggleMenuItems.js';

package/esm/ui/launchViewMenu.js

@@ -8,9 +8,19 @@ export const LAUNCH_LABEL = 'Launch';
 // first time. What makes several plugins' contributions collect in one place
 // instead of each becoming its own top-level row, whatever order they ran in.
 export function pushIntoSubMenu(items, label, item) {
-    const existing = items.find((i) => i.type === 'subMenu' && i.label === label);
+    // `'subMenu' in i`, not `i.type === 'subMenu'`: `type` is OPTIONAL on a
+    // submenu row and most of the tree omits it, so the type test would miss an
+    // existing group and push a second top-level row under the same label — two
+    // rows that then share a React key and an open/closed state.
+    const existing = items.find((i) => 'subMenu' in i && i.label === label);
     if (existing) {
-        existing.subMenu.push(item);
+        const { subMenu } = existing;
+        if (typeof subMenu === 'function') {
+            existing.subMenu = () => [...subMenu(), item];
+        }
+        else {
+            subMenu.push(item);
+        }
     }
     else {
         items.push({ label, type: 'subMenu', subMenu: [item] });
@@ -28,9 +38,9 @@ export function pushIntoSubMenu(items, label, item) {
 // `rubberBandLaunchMenuItems()` on the linear genome view — because there the
 // grouping is the model's, not each contributor's, to do.
 //
-// Keeps its name while the label loses a word: this one is pinned by
-// `abiBaseline.json`, so a published plugin bundle reads it off the host at
-// module scope and a rename is `undefined` inside an already-shipped UMD.
+// Keeps its name while the label loses a word: `@jbrowse/core/ui` serves it, so
+// a published plugin bundle reads it off the host at module scope and a rename
+// is `undefined` inside an already-shipped UMD.
 export function pushLaunchViewMenuItem(items, item) {
     pushIntoSubMenu(items, LAUNCH_LABEL, item);
 }

package/esm/ui/legendMenuItem.d.ts

@@ -1,38 +1,16 @@
-import type { Pin } from '../configuration/promotablePin.ts';
 import type { MenuItem } from './MenuTypes.ts';
+import type { SettingRowOptions } from './toggleMenuItems.ts';
 /**
- * The "Show legend" checkbox, which seven displays build by hand — Hi-C, LD,
- * alignments, LGVSynteny, multi-wiggle, multi-row features, both multi-sample
- * variant displays and the Manhattan plot.
+ * 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.
  *
- * Takes the value and the toggle rather than a `{ showLegend, setShowLegend }`
- * model, because the Manhattan plot's pair is named for the LD legend it draws
- * and would otherwise need an adapter object at the call site. Same argument
- * order as `checkboxItem`, which is all this adds a label to.
+ * The `showLegend` **config slots** stay per display: their default values
+ * legitimately differ (a Hi-C color scale is off by default, a variant genotype
+ * key on), and their descriptions describe genuinely different legends.
  *
- * The `showLegend` **config slots** stay per display: their `promotedBase`
- * values legitimately differ (a Hi-C color scale is off by default, a variant
- * genotype key on), and their descriptions describe genuinely different legends.
- * What they now share is being *promotable* — pass `opts.pin` and the row gains
- * the pin that makes the current state this display type's session-wide
- * default. Every display whose legend is backed by a config slot passes one,
- * and gets it from `LegendMixin`'s `showLegendDisplayTypeDefault` rather than
- * calling `makePin` itself: the slot is the per-display half, the accessors
- * over it are not.
- *
- * `pin` is optional because two callers have no slot to promote: the Manhattan
- * plot's LD legend and `LinearBasicDisplay`'s color key are a volatile and a
- * per-legend `dismissed` flag respectively, neither of which is config at all.
- * They get the plain row, which is what `checkboxItem` builds either way — the
- * promotable form is that same row plus the pin, per `promotableToggleItem`.
- *
- * Deliberately not used by `synteny-core`'s "Show color legend", which sits
- * inside a "Color by..." submenu where the bare word would not say which legend.
+ * `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 */
-export declare function showLegendCheckboxItem(checked: boolean, onToggle: () => void, opts?: {
-    helpText?: string;
-    disabled?: boolean;
-    disabledHelpText?: string;
-    pin?: Pin;
-}): MenuItem;
+export declare function showLegendCheckboxItem(checked: boolean, onToggle: () => void, opts?: SettingRowOptions): MenuItem;

package/esm/ui/legendMenuItem.js

@@ -1,44 +1,17 @@
-import { promotableToggleItem } from './promotableMenuItems.js';
 import { checkboxItem } from './toggleMenuItems.js';
 /**
- * The "Show legend" checkbox, which seven displays build by hand — Hi-C, LD,
- * alignments, LGVSynteny, multi-wiggle, multi-row features, both multi-sample
- * variant displays and the Manhattan plot.
+ * 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.
  *
- * Takes the value and the toggle rather than a `{ showLegend, setShowLegend }`
- * model, because the Manhattan plot's pair is named for the LD legend it draws
- * and would otherwise need an adapter object at the call site. Same argument
- * order as `checkboxItem`, which is all this adds a label to.
+ * The `showLegend` **config slots** stay per display: their default values
+ * legitimately differ (a Hi-C color scale is off by default, a variant genotype
+ * key on), and their descriptions describe genuinely different legends.
  *
- * The `showLegend` **config slots** stay per display: their `promotedBase`
- * values legitimately differ (a Hi-C color scale is off by default, a variant
- * genotype key on), and their descriptions describe genuinely different legends.
- * What they now share is being *promotable* — pass `opts.pin` and the row gains
- * the pin that makes the current state this display type's session-wide
- * default. Every display whose legend is backed by a config slot passes one,
- * and gets it from `LegendMixin`'s `showLegendDisplayTypeDefault` rather than
- * calling `makePin` itself: the slot is the per-display half, the accessors
- * over it are not.
- *
- * `pin` is optional because two callers have no slot to promote: the Manhattan
- * plot's LD legend and `LinearBasicDisplay`'s color key are a volatile and a
- * per-legend `dismissed` flag respectively, neither of which is config at all.
- * They get the plain row, which is what `checkboxItem` builds either way — the
- * promotable form is that same row plus the pin, per `promotableToggleItem`.
- *
- * Deliberately not used by `synteny-core`'s "Show color legend", which sits
- * inside a "Color by..." submenu where the bare word would not say which legend.
+ * `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 */
 export function showLegendCheckboxItem(checked, onToggle, opts) {
-    const { pin, ...rest } = opts ?? {};
-    return pin
-        ? promotableToggleItem({
-            label: 'Show legend',
-            checked,
-            onToggle,
-            pin,
-            ...rest,
-        })
-        : checkboxItem('Show legend', checked, onToggle, rest);
+    return checkboxItem('Show legend', checked, onToggle, opts);
 }

package/esm/ui/legendSpec.d.ts

@@ -1,8 +1,13 @@
-import type { ReactNode } from 'react';
-export type LegendMark = 'fill' | 'line' | 'curve';
+import type { ShapeName } from '../util/markEncodingTypes.ts';
+import type { RampStop } from './colorScale.ts';
 export interface LegendSwatch {
     color: string;
-    mark?: LegendMark;
+    shape?: ShapeName;
+}
+export interface LegendGradient {
+    stops: RampStop[];
+    minLabel: string;
+    maxLabel: string;
 }
 export interface ColorLegendEntry {
     key: string;
@@ -10,12 +15,13 @@ export interface ColorLegendEntry {
     color?: string;
     swatches?: LegendSwatch[];
     hidden?: boolean;
-    marker?: ReactNode;
+    gradient?: LegendGradient;
 }
 export interface LegendItem {
+    value?: string;
     color?: string;
-    mark?: LegendMark;
     swatches?: LegendSwatch[];
+    gradient?: LegendGradient;
     label: string;
     hidden?: boolean;
 }
@@ -23,14 +29,15 @@ export declare function legendSwatches(item: LegendItem): LegendSwatch[];
 export interface LegendSection {
     id: string;
     title?: string;
+    note?: string;
     items: LegendItem[];
+    focusesRows?: boolean;
 }
 export interface LegendSpec {
     title?: string;
-    items?: LegendItem[];
-    sections?: LegendSection[];
+    sections: LegendSection[];
 }
-export declare function nonEmptyLegendSections({ items, sections }: LegendSpec): LegendSection[];
+export declare function nonEmptyLegendSections(sections: readonly LegendSection[]): LegendSection[];
 export declare function legendEntries(spec: LegendSpec): ColorLegendEntry[];
 /**
  * How many rows a color key may have and still be one. Past this it is a list