@jbrowse/core 5.0.0-beta.7 → 5.0.0-beta.9

package/esm/ui/VerticalScrollbar.js

@@ -1,31 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
+import { observer } from 'mobx-react';
 import { clamp } from '../util/numericUtils.js';
 import { makeStyles } from '../util/tss-react/index.js';
 import { usePointerDrag } from '../util/usePointerDrag.js';
 import { useRafCommit } from '../util/useRafCommit.js';
 import { useVirtualScrollWheel } from '../util/useVirtualScrollWheel.js';
 /**
- * How much of a display's right edge this occupies while it is drawn.
- *
- * Exported because the things that have to *clear* it are drawn by the displays
- * that mount it, not by this file: the bottom-right indicator row and the
- * alignments coverage axis label. Both kept a private copy of the number (and
- * the alignments indicator row kept none at all, so its chips were drawn over
- * the thumb), which is a copy that can only be checked by looking at two files
- * at once.
+ * How much of a display's right edge this occupies while it is drawn, for the
+ * chrome the displays draw beside it.
  */
 export const VERTICAL_SCROLLBAR_WIDTH = 12;
-/**
- * Where the right edge of anything that has to sit *beside* the thumb goes: the
- * track's width plus a hair of air, so a chip or an axis label doesn't touch it.
- *
- * The four call sites all spelled `VERTICAL_SCROLLBAR_WIDTH + 2` inline, which
- * is the same copy the width constant was exported to stop — one addition
- * further along. The `+ 2` is a gap and belongs to the thing being cleared, not
- * to the scrollbar's own geometry, so it is named rather than folded into the
- * width (`right: 2` on the thumb is a different 2 and must not move with it).
- */
+/** Where the right edge of something sitting beside the thumb goes. */
 export const VERTICAL_SCROLLBAR_CLEARANCE = VERTICAL_SCROLLBAR_WIDTH + 2;
 const MIN_THUMB_HEIGHT = 20;
 const useStyles = makeStyles()(theme => ({
@@ -35,12 +21,8 @@ const useStyles = makeStyles()(theme => ({
         width: VERTICAL_SCROLLBAR_WIDTH,
         cursor: 'default',
         zIndex: 10,
-        // `usePointerDrag`'s one caller-owned requirement: without it the browser
-        // claims a touch drag on this strip as a page scroll and no pointer stream
-        // arrives at all, so the thumb simply doesn't drag by finger.
+        // without it the browser claims a touch drag as a page scroll
         touchAction: 'none',
-        // theme-aware so the thumb stays visible in dark mode (a hardcoded black
-        // thumb vanished against a dark canvas)
         '&:hover > *': {
             background: theme.palette.action.active,
         },
@@ -55,71 +37,41 @@ const useStyles = makeStyles()(theme => ({
     },
 }));
 /**
- * Draggable vertical scrollbar overlay for canvas-backed displays that scroll
- * their content via a `scrollTop` value (alignments pileup, variant matrix).
- * Renders nothing when the content fits the viewport. The thumb geometry and
- * the drag-to-scroll mapping live here so the consumers don't each re-derive
- * them; the wheel handling stays per-display (their gesture semantics differ).
+ * Draggable vertical scrollbar overlay for a virtually scrolled display.
+ * Renders nothing when the content fits.
  *
- * Deliberately NOT a keyboard tab stop: the surrounding views have no working
- * keyboard navigation to reach the scrolled content anyway, so a per-track
- * `tabIndex` would only add noise to the tab order. The `role="scrollbar"` +
- * `aria-value*` semantics are kept — they cost nothing and expose scroll
- * position to pointer/voice assistive tech.
+ * Not a keyboard tab stop: the views have no keyboard navigation to reach the
+ * scrolled content, so `tabIndex` would only add noise. The `role="scrollbar"`
+ * semantics stay for pointer and voice assistive tech.
  */
-export default function VerticalScrollbar({ scrollTop, setScrollTop, viewportHeight, contentHeight, controlsId, top = 0, }) {
+const VerticalScrollbar = observer(function VerticalScrollbar({ model, controlsId, top = 0, }) {
     const { classes } = useStyles();
-    // ephemeral drag anchor; null when not dragging. Pointer capture (set on the
-    // track) delivers move/up here even when the pointer leaves the thin track,
-    // and auto-releases on unmount — so no document listeners or effect cleanup.
     const dragRef = useRef(undefined);
     const [trackEl, setTrackEl] = useState(null);
-    // A thumb drag's pointermove can fire faster than the frame rate, so coalesce
-    // its scroll writes to one commit per frame; pointer-up flushes the final
-    // (absolute) target so the resting position is exact.
-    const { schedule: scheduleScroll, flush: flushScroll } = useRafCommit(setScrollTop);
-    const scrollableHeight = Math.max(0, contentHeight - viewportHeight);
-    // Wheeling while the pointer is over the scrollbar always scrolls the panel,
-    // never zooms the view. The scrollbar overlay is a sibling of the canvas, so
-    // its wheel events would otherwise bubble straight past the canvas's own
-    // handler to the containing view's scroll-zoom. A native non-passive listener
-    // here (via useVirtualScrollWheel) consumes the vertical delta into
-    // setScrollTop and stopPropagation keeps it from reaching that scroll-zoom.
-    useVirtualScrollWheel(trackEl, (e, applyScroll) => {
-        applyScroll(e, { scrollTop, viewportHeight, scrollableHeight }, n => {
-            setScrollTop(n);
-        });
+    const { schedule: scheduleScroll, flush: flushScroll } = useRafCommit((n) => {
+        model.setScrollTop(n);
+    });
+    const { scrollTop, scrollableHeight, scrollViewportHeight: viewportHeight, } = model;
+    // Wheeling the scrollbar always scrolls the panel, whatever `scrollZoom`
+    // says, and never reaches the view.
+    useVirtualScrollWheel(trackEl, model, (e, scroll) => {
+        scroll();
         e.stopPropagation();
     });
     const clampedScrollTop = clamp(scrollTop, 0, scrollableHeight);
-    // never taller than the track itself — on a very short viewport the
-    // MIN_THUMB_HEIGHT floor would otherwise exceed viewportHeight, pushing
-    // thumbTop negative (thumb drawn above the track) and making usableTrack
-    // negative (drag mapping dead)
+    const contentHeight = viewportHeight + scrollableHeight;
     const thumbHeight = Math.min(viewportHeight, Math.max(MIN_THUMB_HEIGHT, viewportHeight * (viewportHeight / contentHeight)));
     const usableTrack = viewportHeight - thumbHeight;
-    // clamp so a scrollTop past scrollableHeight (virtual-scroll displays don't
-    // self-correct like a native overflow container) can't draw the thumb below
-    // the track
     const thumbTop = clamp((clampedScrollTop / scrollableHeight) * usableTrack, 0, usableTrack);
-    // The press lifecycle is `usePointerDrag`'s: primary button only, one drag per
-    // pointer, capture on the track so moves keep arriving once the pointer leaves
-    // the 12px strip, and auto-release on unmount. Hand-rolled here before that
-    // existed, which cost two of the bugs it is written to prevent — a right-press
-    // started a drag that then ran underneath its own context menu, and a second
-    // finger landing mid-drag re-anchored the gesture.
+    // A press on the track above or below the thumb pages one viewport toward it
+    // rather than starting a drag; `dragRef` staying unset makes the captured
+    // moves that follow do nothing.
     const drag = usePointerDrag({
-        // Click-to-page: a press on the track above/below the thumb jumps one
-        // viewport toward it (like a native scrollbar) rather than starting a drag.
-        // The thumb is pointerEvents:none so every press lands on the track; decide
-        // page-vs-drag from its Y relative to the thumb. `dragRef` staying undefined
-        // is what makes the paging branch ignore the moves that follow — the pointer
-        // is captured either way, and a page press simply has nothing to do with them.
         onDragStart: e => {
             const clickY = e.clientY - e.currentTarget.getBoundingClientRect().top;
             if (clickY < thumbTop || clickY > thumbTop + thumbHeight) {
                 const dir = clickY < thumbTop ? -1 : 1;
-                setScrollTop(clamp(clampedScrollTop + dir * viewportHeight, 0, scrollableHeight));
+                model.setScrollTop(clamp(clampedScrollTop + dir * viewportHeight, 0, scrollableHeight));
             }
             else {
                 dragRef.current = { startY: e.clientY, startScroll: clampedScrollTop };
@@ -137,22 +89,16 @@ export default function VerticalScrollbar({ scrollTop, setScrollTop, viewportHei
             dragRef.current = undefined;
         },
     });
-    // Below every hook, not above the geometry it reads: "the content fits" is a
-    // prop-driven condition that flips while mounted, so an early return above
-    // `usePointerDrag` would call a different number of hooks per render. The
-    // geometry it closes over is computed either way and simply goes unused here —
-    // nothing renders, so nothing can dispatch a pointer event at it.
+    // below every hook: "the content fits" flips while mounted
     if (scrollableHeight <= 0) {
         return null;
     }
     return (_jsx("div", { ref: setTrackEl, "data-testid": "vertical-scrollbar", "data-gesture-owner": "true", className: classes.track, style: { top, height: viewportHeight }, role: "scrollbar", "aria-label": "Vertical scrollbar", "aria-controls": controlsId, "aria-orientation": "vertical", "aria-valuemin": 0, "aria-valuemax": Math.round(scrollableHeight), "aria-valuenow": Math.round(clampedScrollTop), ...drag, 
-        // Wraps the hook's own handler rather than replacing it: stopPropagation
-        // so the press doesn't also pan the view, and it runs for every button, so
-        // a right-press the drag ignores still doesn't reach the view. No
-        // preventDefault, so the native focus shift can still close open popups
-        // and the context menu still opens.
+        // every button, so a right-press the drag ignores doesn't pan the view
+        // either; no preventDefault, so focus still moves and menus still open
         onPointerDown: e => {
             e.stopPropagation();
             drag.onPointerDown(e);
         }, children: _jsx("div", { className: classes.thumb, style: { top: thumbTop, height: thumbHeight } }) }));
-}
+});
+export default VerticalScrollbar;

package/esm/ui/ViewLoadingScreen.d.ts

@@ -17,8 +17,8 @@
  * {@link LoadingProgress} directly — bare, it renders an unconstrained
  * full-width bar under an unaligned label.
  */
-export default function ViewLoadingScreen({ message, fraction, source, }: {
+export default function ViewLoadingScreen({ message, progress, source, }: {
     message?: string;
-    fraction?: number;
+    progress?: number;
     source?: string;
 }): import("react").JSX.Element;

package/esm/ui/ViewLoadingScreen.js

@@ -69,8 +69,8 @@ function useStalled(key) {
  * {@link LoadingProgress} directly — bare, it renders an unconstrained
  * full-width bar under an unaligned label.
  */
-export default function ViewLoadingScreen({ message, fraction, source, }) {
+export default function ViewLoadingScreen({ message, progress, source, }) {
     const { classes } = useStyles();
-    const stalled = useStalled(`${message}|${fraction}|${source}`);
-    return (_jsxs("div", { className: classes.root, children: [_jsx(LoadingProgress, { variant: "h6", message: message, fraction: fraction, barClassName: classes.bar }), stalled && source ? (_jsxs(Typography, { variant: "body2", className: classes.stalled, children: ["still waiting on ", source] })) : null] }));
+    const stalled = useStalled(`${message}|${progress}|${source}`);
+    return (_jsxs("div", { className: classes.root, children: [_jsx(LoadingProgress, { variant: "h6", message: message, fraction: progress, barClassName: classes.bar }), stalled && source ? (_jsxs(Typography, { variant: "body2", className: classes.stalled, children: ["still waiting on ", source] })) : null] }));
 }

package/esm/ui/colorScale.d.ts

@@ -7,10 +7,17 @@ import type { LegendSpec, LegendSwatch } from './legendSpec.ts';
  */
 export interface CategoricalEntry {
     value: string;
+    /**
+     * Every value painted in this row's color where the key is derived from
+     * the painting (`derivedColorScale`), `value` being the first; the label
+     * names them all. A row declared one value at a time leaves it unset.
+     */
+    values?: string[];
     label: string;
     color?: string;
     swatches?: LegendSwatch[];
     hidden?: boolean;
+    missing?: boolean;
 }
 /**
  * A color vocabulary: a finite set of values, each drawn in one color. ADR-094's
@@ -22,6 +29,9 @@ export interface CategoricalScale {
     id: string;
     title?: string;
     entries: CategoricalEntry[];
+    domain?: readonly string[];
+    focusesRows?: boolean;
+    note?: string;
 }
 /** One stop of a continuous ramp, `offset` in `[0, 1]`. */
 export interface RampStop {
@@ -33,7 +43,9 @@ export interface RampStop {
  * A scalar through a color ramp: ADR-094's scalar-through-a-scale
  * cardinality. `stops` are what the painter samples — read them out of the
  * same LUT the GPU uploads (`stopsFromRampLut`) so the bar is byte-identical
- * to the plot. `format` prints the domain ends; `toLocale` by default.
+ * to the plot. `format` prints the domain ends; `formatScore` by default, so
+ * a domain measured off the data prints `24.4` and not the float it was
+ * measured as.
  */
 export interface RampScale {
     kind: 'ramp';
@@ -60,5 +72,18 @@ export type ColorScale = CategoricalScale | RampScale;
  * name over its values) and a lone ramp's goes on its row.
  */
 export declare function legendSpecOf(scales: ColorScale[]): LegendSpec;
+/**
+ * The no-value row goes after every value, in whatever orders the values: a
+ * `domain` never lists it, so ordering by the domain alone ranks it with the
+ * values the domain leaves out and the bracket its label starts with floats it
+ * above them all. Both places a key is ordered read this — `sectionOf` for the
+ * rows it draws, and `derivedColorScale` for the entries it hands back, which a
+ * display reads for what its key lists.
+ */
+export declare function missingRowLast(a: {
+    missing?: boolean;
+}, b: {
+    missing?: boolean;
+}): number;
 /** Whether a scale has anything for a key to show. */
 export declare function colorScaleIsEmpty(scale: ColorScale): boolean;

package/esm/ui/colorScale.js

@@ -1,8 +1,9 @@
-import { toLocale } from '../util/numericUtils.js';
+import { groupKeyComparator } from '../util/groupKeys.js';
+import { formatScore } from '../util/numericUtils.js';
 // A lone ramp names itself on its row: `FloatingLegend` and `legendEntries`
 // draw a section's title only beside other sections, and a bar of numbers
 // with nothing saying what they count is not a key.
-function rampItem({ title, domain, stops, format = toLocale }, lone) {
+function rampItem({ title, domain, stops, format = formatScore }, lone) {
     const [min, max] = domain;
     return {
         label: lone ? (title ?? '') : '',
@@ -10,12 +11,23 @@ function rampItem({ title, domain, stops, format = toLocale }, lone) {
     };
 }
 function sectionOf(scale, lone) {
+    if (scale.kind !== 'categorical') {
+        return { id: scale.id, title: scale.title, items: [rampItem(scale, lone)] };
+    }
+    const items = scale.entries.map(entry => ({ ...entry }));
+    const compare = scale.domain?.length
+        ? groupKeyComparator(scale.domain)
+        : undefined;
+    // The sort is stable and the value half is skipped without a domain, so a
+    // key a display ordered itself keeps that order and only its no-value row
+    // moves.
+    items.sort((a, b) => missingRowLast(a, b) || (compare ? compare(a.value, b.value) : 0));
     return {
         id: scale.id,
         title: scale.title,
-        items: scale.kind === 'categorical'
-            ? scale.entries.map(entry => ({ ...entry }))
-            : [rampItem(scale, lone)],
+        note: scale.note,
+        items,
+        focusesRows: scale.focusesRows,
     };
 }
 /**
@@ -35,6 +47,17 @@ export function legendSpecOf(scales) {
         sections: scales.map(scale => sectionOf(scale, scales.length === 1)),
     };
 }
+/**
+ * The no-value row goes after every value, in whatever orders the values: a
+ * `domain` never lists it, so ordering by the domain alone ranks it with the
+ * values the domain leaves out and the bracket its label starts with floats it
+ * above them all. Both places a key is ordered read this — `sectionOf` for the
+ * rows it draws, and `derivedColorScale` for the entries it hands back, which a
+ * display reads for what its key lists.
+ */
+export function missingRowLast(a, b) {
+    return Number(a.missing ?? false) - Number(b.missing ?? false);
+}
 /** Whether a scale has anything for a key to show. */
 export function colorScaleIsEmpty(scale) {
     return scale.kind === 'categorical' && scale.entries.length === 0;

package/esm/ui/colors.d.ts

@@ -29,6 +29,23 @@ export declare 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 declare const categoricalPalette: string[];
 /**
@@ -38,10 +55,41 @@ export declare const categoricalPalette: string[];
  * paint it pink. A non-negative integer takes the slot it names, anchored at
  * 1, so `1`, `2`, `3` walk the palette in order and stay distinct; anything
  * else hashes in, stable for the same reason at the cost of an occasional
- * collision.
+ * collision. `categoricalScale` is the same rule with a domain.
  */
 export declare function categoricalValueColor(value: string): string;
 export declare function categoricalValueColor<T>(value: string, palette: readonly T[]): T;
+/**
+ * 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 declare function categoricalScale<T>(domain: readonly (string | number)[] | undefined, range: readonly T[], { fallback, isNear, }?: {
+    fallback?: readonly T[];
+    isNear?: (a: T, b: T) => boolean;
+}): (value: string) => T;
+/**
+ * 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 declare function similarColors(a: string, b: string): boolean;
+/**
+ * `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 declare function categoricalColorScale(domain: readonly (string | number)[] | undefined, palette?: readonly string[]): (value: string) => string;
+/**
+ * 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 declare function categoricalColor(value: unknown, domain?: readonly string[], palette?: readonly string[]): string;
 /**
  * Deterministic non-negative 32-bit hash of a string.
  */

package/esm/ui/colors.js

@@ -1,4 +1,7 @@
-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 { valueText } from '../util/groupKeys.js';
 const category10 = [
     '#1f77b4',
     '#ff7f0e',
@@ -108,16 +111,148 @@ 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) {
-    const n = palette.length;
+    return palette[valueSlot(value, palette.length)];
+}
+function valueSlot(value, n) {
     const num = Number(value);
     return value !== '' && Number.isInteger(num) && num >= 0
-        ? palette[(num + n - 1) % n]
-        : palette[hashString(value) % n];
+        ? (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

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';
@@ -60,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';
@@ -78,7 +80,7 @@ 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 declare const VIEW_HEADER_HEIGHT = 28;
+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';