@jbrowse/core 4.3.0 → 5.0.0-beta.10

package/esm/ui/launchTargetsMenuItem.js

@@ -0,0 +1,24 @@
+/**
+ * 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
+ * changes the answer, so the name is always on screen — a single dataset gets
+ * the same submenu as several rather than a flat item that leaves it unsaid.
+ *
+ * Kept apart from the discovery it is fed so the shape is testable on plain
+ * 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),
+                })),
+            },
+        ]
+        : [];
+}

package/esm/ui/launchViewMenu.d.ts

@@ -0,0 +1,4 @@
+import type { MenuItem } from './MenuTypes.ts';
+export declare const LAUNCH_LABEL = "Launch";
+export declare function pushIntoSubMenu(items: MenuItem[], label: string, item: MenuItem): void;
+export declare function pushLaunchViewMenuItem(items: MenuItem[], item: MenuItem): void;

package/esm/ui/launchViewMenu.js

@@ -0,0 +1,46 @@
+// The submenu every "open something for this region" contribution collects
+// under, in a track menu, a view menu and the rubberband menu alike. One word,
+// because half of what it now launches is not a view — a consensus dialog, the
+// MAF subsequence widget, a sequence readout — and the rubberband menu has
+// spelled it this way all along.
+export const LAUNCH_LABEL = 'Launch';
+// Add `item` under the `label` submenu of `items`, creating that submenu the
+// 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) {
+    // `'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) {
+        const { subMenu } = existing;
+        if (typeof subMenu === 'function') {
+            existing.subMenu = () => [...subMenu(), item];
+        }
+        else {
+            subMenu.push(item);
+        }
+    }
+    else {
+        items.push({ label, type: 'subMenu', subMenu: [item] });
+    }
+}
+// Several independent plugins (dotplot-view, linear-comparative-view, …) each
+// contribute one "open another view for this feature" context-menu item. Call
+// this instead of pushing a top-level item so the contributions land in a
+// single "Launch" submenu regardless of which plugin's extension runs
+// first. The `group` option on `addViewMenuItems`/`addDisplayMenuItems` does the
+// same thing for a contributor registered that way, and is the shorter road to
+// it.
+//
+// The rubberband menu has its own seam for the same job —
+// `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: `@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

@@ -0,0 +1,16 @@
+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 `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.
+ *
+ * `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?: SettingRowOptions): MenuItem;

package/esm/ui/legendMenuItem.js

@@ -0,0 +1,17 @@
+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 `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.
+ *
+ * `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) {
+    return checkboxItem('Show legend', checked, onToggle, opts);
+}

package/esm/ui/legendSpec.d.ts

@@ -0,0 +1,69 @@
+import type { ShapeName } from '../util/markEncodingTypes.ts';
+import type { RampStop } from './colorScale.ts';
+export interface LegendSwatch {
+    color: string;
+    shape?: ShapeName;
+}
+export interface LegendGradient {
+    stops: RampStop[];
+    minLabel: string;
+    maxLabel: string;
+}
+export interface ColorLegendEntry {
+    key: string;
+    label: string;
+    color?: string;
+    swatches?: LegendSwatch[];
+    hidden?: boolean;
+    gradient?: LegendGradient;
+}
+export interface LegendItem {
+    value?: string;
+    color?: string;
+    swatches?: LegendSwatch[];
+    gradient?: LegendGradient;
+    label: string;
+    hidden?: boolean;
+}
+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;
+    sections: 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
+ * of every row, which is the thing a key exists instead of.
+ */
+export declare const MAX_LEGEND_ITEMS = 20;
+/**
+ * Whether a key built from these items is worth the rows it costs, for a
+ * display that has to *decide* — one whose key is only sometimes the thing
+ * naming its colors, and which therefore asks before drawing.
+ *
+ * Two questions, and both have drawn a useless key on a real track:
+ *
+ * - **Short enough to read?** A list longer than a reader can scan is worse
+ *   than whatever it was going to explain. Ask this of the collapsed items, not
+ *   of the row count — a cohort track's key is one row per group, so 4,390
+ *   cells in nine cell types is nine rows and passes, while the same cells
+ *   ungrouped are 4,390 and do not.
+ * - **Does it distinguish anything?** A key maps colors to names, so it needs
+ *   more than one color to map. Items that all share one — every swatch having
+ *   resolved to the same fallback, which is what a track carrying no identity
+ *   color produces — spend rows over the plot to say nothing. This is why
+ *   `LegendItem.color` should be resolved before it gets here: an unresolved
+ *   `undefined` compares equal to every other `undefined` only by accident.
+ *
+ * Displays whose key is unconditional (alignments, variants) don't need this;
+ * their vocabulary is always worth naming.
+ */
+export declare function legendIsReadable(items: LegendItem[], maxItems?: number): boolean;

package/esm/ui/legendSpec.js

@@ -0,0 +1,69 @@
+// The boxes a row draws: its explicit list, else its single color, else nothing
+// at all (a heading).
+export function legendSwatches(item) {
+    return (item.swatches ?? (item.color === undefined ? [] : [{ color: item.color }]));
+}
+// Drop sections with nothing in them, so a heading can never end up with no
+// swatches under it.
+export function nonEmptyLegendSections(sections) {
+    return sections.filter(s => s.items.length > 0);
+}
+// Flatten a legend spec into `SvgColorLegend` rows: a color-less row reads as a
+// heading rather than a swatch. Section titles appear only when more than one
+// section survives — a lone vocabulary needs no title above it — which is the
+// rule `FloatingLegend` applies on screen, so an export and the live legend
+// agree about when headings show. A box-level `title` is unconditional, like its
+// on-screen counterpart, and `''` is no heading in either.
+export function legendEntries(spec) {
+    const sections = nonEmptyLegendSections(spec.sections);
+    const titled = sections.length > 1;
+    return [
+        ...(spec.title ? [{ key: 'legend-title', label: spec.title }] : []),
+        ...sections.flatMap(section => [
+            ...(titled && section.title
+                ? [{ key: `${section.id}-title`, label: section.title }]
+                : []),
+            ...(section.note === undefined
+                ? []
+                : [{ key: `${section.id}-note`, label: section.note }]),
+            ...section.items.map((item, idx) => ({
+                key: `${section.id}-${idx}`,
+                label: item.label,
+                color: item.color,
+                swatches: item.swatches,
+                hidden: item.hidden,
+                gradient: item.gradient,
+            })),
+        ]),
+    ];
+}
+/**
+ * How many rows a color key may have and still be one. Past this it is a list
+ * of every row, which is the thing a key exists instead of.
+ */
+export const MAX_LEGEND_ITEMS = 20;
+/**
+ * Whether a key built from these items is worth the rows it costs, for a
+ * display that has to *decide* — one whose key is only sometimes the thing
+ * naming its colors, and which therefore asks before drawing.
+ *
+ * Two questions, and both have drawn a useless key on a real track:
+ *
+ * - **Short enough to read?** A list longer than a reader can scan is worse
+ *   than whatever it was going to explain. Ask this of the collapsed items, not
+ *   of the row count — a cohort track's key is one row per group, so 4,390
+ *   cells in nine cell types is nine rows and passes, while the same cells
+ *   ungrouped are 4,390 and do not.
+ * - **Does it distinguish anything?** A key maps colors to names, so it needs
+ *   more than one color to map. Items that all share one — every swatch having
+ *   resolved to the same fallback, which is what a track carrying no identity
+ *   color produces — spend rows over the plot to say nothing. This is why
+ *   `LegendItem.color` should be resolved before it gets here: an unresolved
+ *   `undefined` compares equal to every other `undefined` only by accident.
+ *
+ * Displays whose key is unconditional (alignments, variants) don't need this;
+ * their vocabulary is always worth naming.
+ */
+export function legendIsReadable(items, maxItems = MAX_LEGEND_ITEMS) {
+    return items.length <= maxItems && new Set(items.map(i => i.color)).size > 1;
+}

package/esm/ui/loadingDotKeyframes.d.ts

@@ -0,0 +1,18 @@
+export declare const dot1: {
+    name: string;
+    styles: string;
+    anim: 1;
+    toString: () => string;
+} & string;
+export declare const dot2: {
+    name: string;
+    styles: string;
+    anim: 1;
+    toString: () => string;
+} & string;
+export declare const dot3: {
+    name: string;
+    styles: string;
+    anim: 1;
+    toString: () => string;
+} & string;

package/esm/ui/loadingDotKeyframes.js

@@ -0,0 +1,17 @@
+import { keyframes } from '../util/tss-react/index.js';
+// Animate opacity (a compositor-offloaded property) rather than visibility so
+// the animation keeps running on the GPU compositor thread while the main
+// thread is busy. visibility/width/color animations run on the main thread and
+// freeze during jank.
+export const dot1 = keyframes `
+  0%, 25% { opacity: 0; }
+  25.1%, 100% { opacity: 1; }
+`;
+export const dot2 = keyframes `
+  0%, 50% { opacity: 0; }
+  50.1%, 100% { opacity: 1; }
+`;
+export const dot3 = keyframes `
+  0%, 75% { opacity: 0; }
+  75.1%, 100% { opacity: 1; }
+`;

package/esm/ui/makeSizeMenu.d.ts

@@ -0,0 +1,24 @@
+import type { MenuItem } from './MenuTypes.ts';
+import type { SliderScale } from './sliderScale.ts';
+interface SizeMenuOptions {
+    label: string;
+    title: string;
+    help?: string;
+    getValue: () => number;
+    min?: number;
+    max?: number;
+    step?: number;
+    unit?: string;
+    scale?: SliderScale;
+    format?: (n: number) => string;
+    commitOnRelease?: boolean;
+    onChange: (n: number) => void;
+    onReset: () => void;
+}
+export declare function makeSizeMenu(opts: SizeMenuOptions & {
+    isDefault: boolean;
+}): MenuItem;
+export declare function makeSizeSubMenu(opts: SizeMenuOptions & {
+    isDefault: boolean;
+}): MenuItem;
+export {};

package/esm/ui/makeSizeMenu.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, lazy } from 'react';
+import { INLINE_MENU_ROW_WIDTH } from './inlineMenuRowWidth.js';
+// The row's drawn half is `lazy()` because this builder is called from state
+// models and menu modules, which are eager, and the row is the only route by
+// which MUI
+// `Slider` — the largest single Material component in the eager graph — reached
+// a host's first paint. `type: 'custom'` already made `render` a thunk, so the
+// laziness is free at call time; it is the module edge that had to go.
+//
+// The fallback holds the row's footprint so the open menu doesn't reflow when
+// the chunk lands. Height is the row's natural one (caption line + slider); it
+// is approximate on purpose, since being a few px out for one frame is
+// invisible where a collapse to zero is not.
+const SizeSliderRow = lazy(() => import('./SizeSliderRow.js').then(m => ({ default: m.SizeSliderRow })));
+const sizeRowFallbackHeight = 46;
+// Shared inline "size" control as a single menu row (was a submenu of
+// slider/reset/default). Callers own their config slot/semantics and wire the
+// accessors + a title (which also derives the slider's test id). Used by wiggle
+// point-size/line-width, GWAS Manhattan point-size, arc width, the alignments
+// modification threshold and GC-content window/step sizes, so the
+// slider/reset behavior can't drift. Pass `scale: 'log'` for values spanning
+// orders of magnitude, and `format` to label non-`px` units.
+export function makeSizeMenu(opts) {
+    return sizeMenu(opts, opts.isDefault);
+}
+// The same control one hop down: a plain submenu row whose only child is the
+// size row above.
+//
+// For a menu where a slider drawn inline is the odd one out. Every other row
+// there is `label + [?] + (checkbox | chevron)` and a size row is a two-line
+// block with a widget of its own, so a menu holding several reads as a form to
+// fill in rather than a list to pick from — and the comparative views' settings
+// menus hold three each. Behind a chevron the row shape is uniform top to
+// bottom, and the value moves inside next to the slider that sets it, which is
+// where the radio submenus already keep their state.
+//
+// `help` lands on the submenu row, which is the row a reader sees: the size row
+// behind the chevron never reaches the menu's shared trailing column, and a "?"
+// of its own would only be a second one for the same setting, a hover away.
+export function makeSizeSubMenu(opts) {
+    return {
+        label: opts.title,
+        helpText: opts.help,
+        subMenu: [makeSizeMenu(opts)],
+    };
+}
+function sizeMenu(opts, isDefault) {
+    const { label, title, getValue, min = 0.5, max = 12, step = 0.5, unit = 'px', scale = 'linear', format = (n) => `${n}${unit}`, commitOnRelease, onChange, onReset, } = opts;
+    return {
+        label,
+        type: 'custom',
+        render: () => (_jsx(Suspense, { fallback: _jsx("div", { style: {
+                    width: INLINE_MENU_ROW_WIDTH,
+                    height: sizeRowFallbackHeight,
+                } }), children: _jsx(SizeSliderRow, { title: title, getValue: getValue, min: min, max: max, step: step, scale: scale, format: format, isDefault: isDefault, commitOnRelease: commitOnRelease, onChange: onChange, onReset: onReset }) })),
+    };
+}

package/esm/ui/mapStackTrace.d.ts

@@ -0,0 +1,8 @@
+export interface StackFrame {
+    name: string;
+    uri: string;
+    line: number;
+    column: number;
+}
+export declare function parseStackLine(line: string): StackFrame | undefined;
+export declare function mapStackTrace(stack: string): Promise<string>;

package/esm/ui/mapStackTrace.js

@@ -0,0 +1,108 @@
+import { SourceMapConsumer } from 'source-map-js';
+const sourceMappingUrlRe = /\/\/# sourceMappingURL=(.*)/g;
+// blob: urls (worker scripts) embed a second scheme, so blob: has to be part of
+// the match: without it the uri truncates to a script that doesn't exist
+const protocolRe = /(?:blob:)?(?:https?|file):\/\//;
+const digitsRe = /^\d+$/;
+async function myfetchtext(uri) {
+    const res = await fetch(uri);
+    if (!res.ok) {
+        throw new Error(`HTTP ${res.status} fetching ${uri}: ${await res.text()}`);
+    }
+    return res.text();
+}
+function sourceMapUrl(script, uri) {
+    // the real annotation is the last one — a bundle can carry the literal
+    // earlier in an inlined dependency
+    const mapUri = [...script.matchAll(sourceMappingUrlRe)].at(-1)?.[1]?.trim();
+    let url;
+    if (mapUri) {
+        url = new URL(mapUri, uri);
+        // vite serves scripts as /foo.js?v=hash and the sibling .map needs the same
+        // query; never touch an inline data: map or a map url with its own query
+        if (!url.search && url.protocol !== 'data:') {
+            url.search = new URL(uri).search;
+        }
+    }
+    return url?.href;
+}
+async function loadSourceMap(uri) {
+    try {
+        const mapUrl = sourceMapUrl(await myfetchtext(uri), uri);
+        return mapUrl
+            ? new SourceMapConsumer(JSON.parse(await myfetchtext(mapUrl)))
+            : undefined;
+    }
+    catch {
+        // a frame can point at a script with no map, an unreachable url, or a
+        // revoked blob: worker url. Those frames stay raw instead of failing the
+        // whole trace
+        return undefined;
+    }
+}
+// one load attempt per script per session; loadSourceMap never rejects, so a
+// miss is cached like a hit rather than refetched for every frame
+const sourceMaps = new Map();
+function getSourceMap(uri) {
+    const existing = sourceMaps.get(uri);
+    if (existing) {
+        return existing;
+    }
+    else {
+        const map = loadSourceMap(uri);
+        sourceMaps.set(uri, map);
+        return map;
+    }
+}
+// parses a frame line like "  at f (file:///foo.js:12:34)", or firefox's
+// "f@file:///foo.js:12:34", into its function name, source uri, line and
+// column. undefined when the line has no uri:line:column reference, e.g. the
+// message line that chrome puts first
+export function parseStackLine(line) {
+    const protocolMatch = protocolRe.exec(line);
+    if (!protocolMatch) {
+        return undefined;
+    }
+    const urlStart = protocolMatch.index;
+    const rest = line.slice(urlStart).replace(/\)$/, '');
+    const lastColon = rest.lastIndexOf(':');
+    const secondLastColon = rest.lastIndexOf(':', lastColon - 1);
+    const lineStr = rest.slice(secondLastColon + 1, lastColon);
+    const columnStr = rest.slice(lastColon + 1);
+    return secondLastColon > 0 &&
+        digitsRe.test(lineStr) &&
+        digitsRe.test(columnStr)
+        ? {
+            name: line
+                .slice(0, urlStart)
+                .trim()
+                .replace(/^at\b\s*/, '')
+                .replace(/\s*\($/, '')
+                .replace(/@$/, ''),
+            uri: rest.slice(0, secondLastColon),
+            line: +lineStr,
+            column: +columnStr,
+        }
+        : undefined;
+}
+async function mapStackLine(line) {
+    const frame = parseStackLine(line);
+    const consumer = frame ? await getSourceMap(frame.uri) : undefined;
+    if (frame && consumer) {
+        const pos = consumer.originalPositionFor({
+            line: frame.line,
+            // stack traces report 1-based columns, source maps are 0-based
+            column: frame.column - 1,
+        });
+        const { source, line: origLine, column } = pos;
+        return source !== null && origLine !== null && column !== null
+            ? `${source}:${origLine}:${column + 1}${frame.name ? ` (${frame.name})` : ''}`
+            : line;
+    }
+    else {
+        return line;
+    }
+}
+export async function mapStackTrace(stack) {
+    return (await Promise.all(stack.split('\n').map(mapStackLine))).join('\n');
+}

package/esm/ui/measureLegendText.d.ts

@@ -0,0 +1 @@
+export declare function measureLegendText(str: string, fontSize: number): number;

package/esm/ui/measureLegendText.js

@@ -0,0 +1,8 @@
+import { measureText } from '../util/measureText.js';
+// measureText uses a Helvetica width table, but SVG legend <text> nodes have no
+// font-family and render in the wider app font (Roboto), so scale the estimate
+// up before sizing the white paper behind a label or it clips.
+const APP_FONT_WIDTH_RATIO = 1.1;
+export function measureLegendText(str, fontSize) {
+    return measureText(str, fontSize) * APP_FONT_WIDTH_RATIO;
+}

package/esm/ui/menuItemAdornment.d.ts

@@ -0,0 +1,22 @@
+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.
+ *
+ * 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
+ * that draws an adornment the column-reservation pass didn't count is a
+ * misaligned menu, not a crash.
+ */
+export declare function menuItemAdornment(item: MenuItem): import("react").ReactNode;
+/**
+ * Whether this row draws something in the shared trailing column — the question
+ * `getMenuColumnFlags` asks to decide whether to reserve that column on every
+ * row of the menu.
+ *
+ * A `type: 'custom'` row renders its own content edge to edge and never reaches
+ * `menuItemAdornment`, so it cannot draw in that column however it is declared.
+ */
+export declare function hasMenuItemAdornment(item: MenuItem): boolean;

package/esm/ui/menuItemAdornment.js

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ *
+ * 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
+ * that draws an adornment the column-reservation pass didn't count is a
+ * misaligned menu, not a crash.
+ */
+export function menuItemAdornment(item) {
+    return 'endAdornment' in item ? item.endAdornment : undefined;
+}
+/**
+ * Whether this row draws something in the shared trailing column — the question
+ * `getMenuColumnFlags` asks to decide whether to reserve that column on every
+ * row of the menu.
+ *
+ * A `type: 'custom'` row renders its own content edge to edge and never reaches
+ * `menuItemAdornment`, so it cannot draw in that column however it is declared.
+ */
+export function hasMenuItemAdornment(item) {
+    if (item.type === 'custom') {
+        return false;
+    }
+    return 'endAdornment' in item && !!item.endAdornment;
+}

package/esm/ui/menuItems.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Menu-item *builders*, and nothing that draws one.
+ *
+ * These builders return plain objects, and their callers are state models
+ * and `menuItems.ts` / `trackMenus.ts` modules across a dozen plugins — code
+ * that is evaluated when a plugin installs, before any session can be read.
+ * Reaching them through `@jbrowse/core/ui` meant reaching them through a barrel
+ * that re-exports ~80 Material UI components, and the union of what those eager
+ * callers happened to name was most of Material UI in every host's first paint
+ * (reference/EAGER_BUNDLE.md).
+ *
+ * So the split is not stylistic: **import menu builders from here, components
+ * from `@jbrowse/core/ui`.** This entry must never reach react, @mui or
+ * @emotion, and `menuItems.purity.test.ts` fails if it starts to — including
+ * transitively, which is the only way the failure would ever show up.
+ */
+export { checkboxItem, radioItem, radioItems, toggleItem, withSubHeader, } from './toggleMenuItems.ts';
+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 type { BaseMenuItem, CheckboxMenuItem, ClickableMenuItem, CustomMenuItem, MenuDivider, MenuItem, MenuItemClickHandler, MenuItemsGetter, MenuSubHeader, NormalMenuItem, RadioMenuItem, SubMenuItem, } from './MenuTypes.ts';

package/esm/ui/menuItems.js

@@ -0,0 +1,21 @@
+/**
+ * Menu-item *builders*, and nothing that draws one.
+ *
+ * These builders return plain objects, and their callers are state models
+ * and `menuItems.ts` / `trackMenus.ts` modules across a dozen plugins — code
+ * that is evaluated when a plugin installs, before any session can be read.
+ * Reaching them through `@jbrowse/core/ui` meant reaching them through a barrel
+ * that re-exports ~80 Material UI components, and the union of what those eager
+ * callers happened to name was most of Material UI in every host's first paint
+ * (reference/EAGER_BUNDLE.md).
+ *
+ * So the split is not stylistic: **import menu builders from here, components
+ * from `@jbrowse/core/ui`.** This entry must never reach react, @mui or
+ * @emotion, and `menuItems.purity.test.ts` fails if it starts to — including
+ * transitively, which is the only way the failure would ever show up.
+ */
+export { checkboxItem, radioItem, radioItems, toggleItem, withSubHeader, } from './toggleMenuItems.js';
+export { withHint } from './menuLabels.js';
+export { makeRadioSubMenu } from './radioSubMenu.js';
+export { showLegendCheckboxItem } from './legendMenuItem.js';
+export { resolveSubMenu, staysOpenOnClick } from './MenuTypes.js';

package/esm/ui/menuLabels.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Menu row LABELS, as opposed to the rows themselves — the builders that make a
+ * row live in `toggleMenuItems.ts` and its neighbours, and take a label they do
+ * not compose.
+ *
+ * Its own module because a label is not a row: `withHint` is reached from radio
+ * options and from hand-written literals as often as from a builder, so filing
+ * it under the checkbox builders put it behind an import that half its callers
+ * had no other reason to make.
+ *
+ * Same purity boundary as the rest of `menuItems.ts` — no react, @mui or
+ * @emotion, ever (`menuItems.purity.test.ts`).
+ */
+/**
+ * #menuBuilder withHint | a row label carrying an aside that is only sometimes there
+ *
+ * `withHint('Show 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
+ * nothing observable -- a band overridden by the summary tier, a separator
+ * below the height it draws at. The tick keeps reporting what the user chose,
+ * so silence would leave the setting looking broken.
+ *
+ * IN THE LABEL rather than a `subLabel`, which is what these were: a second
+ * line under the row is heavy for a clarifier this short, and rather than a
+ * `helpText`, which would reserve a "?" column across the whole menu for one
+ * conditional row and hide the reason behind a hover -- on a control the reader
+ * 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
+ * (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").
+ *
+ * KEEP THE HINT SHORT -- a few words, not a sentence. A menu sizes to its widest
+ * row, so a long one widens every row for as long as it fires, which is the same
+ * cost that rules out `helpText` above.
+ */
+export declare function withHint(label: string, hint: string | undefined): string;