@jbrowse/plugin-linear-genome-view 5.0.0-beta.1 → 5.0.0-beta.10

package/esm/LinearGenomeView/sharedScaleContainer.d.ts

@@ -3,7 +3,7 @@ import type { IAnyStateTreeNode } from '@jbrowse/mobx-state-tree';
  * A container's zoom-out ceiling for the rows it stacks. Unanswered is its own
  * state rather than a zero: a row that has not been laid out yet cannot supply
  * a fit, and reading that as "no shared ceiling" is a different claim. See
- * `LinearComparativeView/sharedFit.ts`.
+ * `LinearSyntenyView/sharedFit.ts`.
  */
 export type SharedFit = {
     answered: false;

package/esm/LinearGenomeView/showRegionsWithUndo.js

@@ -1,4 +1,5 @@
 import { getNotificationSink } from '@jbrowse/core/util';
+import { transaction } from 'mobx';
 /**
  * Replace a view's displayed regions with a set someone asked for, frame them,
  * and offer an Undo that puts the view back exactly as it was.
@@ -32,7 +33,12 @@ export function showRegionsWithUndo({ view, regions, message, alsoUndo, }) {
         windowWidthBp: view.windowWidthBp,
         windowStartBp: view.windowStartBp,
     };
-    view.showRegions(regions);
+    // two root actions in one transaction: `fitAllRegions` reads as the reader's
+    // own gesture to a synteny follow, which `showRegions` does not
+    transaction(() => {
+        view.setDisplayedRegions(regions);
+        view.fitAllRegions();
+    });
     getNotificationSink(view).notify(message, 'info', {
         name: 'Undo',
         onClick: () => {

package/esm/LinearGenomeView/stickyChrome.d.ts

@@ -1,14 +1,10 @@
 /**
  * Where the sticky boxes below the view's chrome pin, as CSS rather than as a
- * pixel sum.
- *
- * The model's `rubberbandTop` / `pinnedTracksTop` answer the same question in
- * numbers, and still have to — `height`, `getTrackYOffset` and the SVG export
- * have no DOM to read. But the numbers are nominal. Both boxes above are now
- * minimum-height, since pinning them to their constants clipped their content
- * at a larger root font size, and one of them is briefly absent during a slow
- * load. Anything positioning against them in the DOM reads what they publish
- * and keeps the constant only as the fallback for the first frame.
+ * pixel sum. Both boxes above are minimum-height, since pinning them to their
+ * constants clipped their content at a larger root font size, and one of them
+ * is briefly absent during a slow load, so a sum of their constants is only
+ * nominal. Anything positioning against them reads what they publish and keeps
+ * the constant only as the fallback for the first frame.
  */
 export declare function stickyChromeTops({ stickyViewHeaders, headerHeight, }: {
     stickyViewHeaders: boolean;

package/esm/LinearGenomeView/stickyChrome.js

@@ -3,15 +3,11 @@ import { LGV_HEADER_HEIGHT_VAR, VIEW_HEADER_HEIGHT_VAR, } from '@jbrowse/core/ut
 import { SCALE_BAR_HEIGHT } from './consts.js';
 /**
  * Where the sticky boxes below the view's chrome pin, as CSS rather than as a
- * pixel sum.
- *
- * The model's `rubberbandTop` / `pinnedTracksTop` answer the same question in
- * numbers, and still have to — `height`, `getTrackYOffset` and the SVG export
- * have no DOM to read. But the numbers are nominal. Both boxes above are now
- * minimum-height, since pinning them to their constants clipped their content
- * at a larger root font size, and one of them is briefly absent during a slow
- * load. Anything positioning against them in the DOM reads what they publish
- * and keeps the constant only as the fallback for the first frame.
+ * pixel sum. Both boxes above are minimum-height, since pinning them to their
+ * constants clipped their content at a larger root font size, and one of them
+ * is briefly absent during a slow load, so a sum of their constants is only
+ * nominal. Anything positioning against them reads what they publish and keeps
+ * the constant only as the fallback for the first frame.
  */
 export function stickyChromeTops({ stickyViewHeaders, headerHeight, }) {
     // `scalebar` is undefined rather than 0 when the chrome does not pin: its

package/esm/LinearGenomeView/svgcomponents/SVGGridlines.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SvgClipRect } from '@jbrowse/core/svg/SvgExport';
 import { svgNodeId } from '@jbrowse/core/svg/svgId';
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
 import { getStrokeProps } from '@jbrowse/core/util';
-import { useTheme } from '@mui/material';
 import { gridlineTickXs, vlinePath } from './util.js';
 export default function SVGGridlines({ model, height, }) {
     const { width } = model;
-    const theme = useTheme();
+    const palette = usePalette();
     // share the on-screen gridline colors; getStrokeProps splits the rgba alpha
     // into strokeOpacity so the exported SVG stays renderer-safe
-    const minorProps = getStrokeProps(theme.palette.gridlineMinor);
-    const majorProps = getStrokeProps(theme.palette.gridlineMajor);
+    const minorProps = getStrokeProps(palette.gridlineMinor);
+    const majorProps = getStrokeProps(palette.gridlineMajor);
     const { major, minor } = gridlineTickXs(model);
     // gridlineTicks spans the whole staticBlocks frame, which overhangs the
     // viewport on both sides, so clip to the view width rather than letting ticks

package/esm/LinearGenomeView/svgcomponents/SVGHeader.d.ts

@@ -1,6 +1,9 @@
 import type { LinearGenomeViewModel } from '../index.ts';
-export default function SVGHeader({ model, fontSize, rulerHeight, }: {
+import type { HeaderLayout } from './util.ts';
+export default function SVGHeader({ model, fontSize, rulerHeight, layout, showCytobands, }: {
     model: LinearGenomeViewModel;
     rulerHeight: number;
     fontSize: number;
+    layout: HeaderLayout;
+    showCytobands: boolean;
 }): import("react").JSX.Element | null;

package/esm/LinearGenomeView/svgcomponents/SVGHeader.js

@@ -1,18 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
 import { getSession, stripAlpha } from '@jbrowse/core/util';
 import { createOverviewLayout, getOverviewRegionPxSpan, } from '@jbrowse/core/util/Base1DUtils';
 import calculateDynamicBlocks from '@jbrowse/core/util/calculateDynamicBlocks';
-import { useTheme } from '@mui/material';
 import Cytobands from '../components/Cytobands.js';
 import OverviewScalebarPolygon from '../components/OverviewScalebarPolygon.js';
 import { getCytobands } from '../components/util.js';
 import { HEADER_OVERVIEW_HEIGHT } from '../consts.js';
 import SVGRuler from './SVGRuler.js';
 import SVGScalebar from './SVGScalebar.js';
-import { getHeaderLayout } from './util.js';
 // "you are here" cytoband overview rendered above the ruler. Self-contained so
 // the overview-layout work only runs when cytobands are actually shown.
-function CytobandOverview({ model, assembly, y, }) {
+function CytobandOverview({ model, y, }) {
     const { width, displayedRegions, minimumBlockWidth, bpPerPx } = model;
     const overview = createOverviewLayout({
         displayedRegions,
@@ -27,27 +26,15 @@ function CytobandOverview({ model, assembly, y, }) {
         bpPerPx,
         blocks: model.dynamicBlocks.blocks,
     });
-    return block && span ? (_jsxs("g", { transform: `translate(0 ${y})`, children: [_jsx(Cytobands, { overview: overview, cytobands: getCytobands(assembly, block.refName), block: block }), _jsx("rect", { stroke: "red", fill: "rgb(255,0,0)", fillOpacity: 0.1, width: Math.max(span.rightPx - span.leftPx, 0.5), height: HEADER_OVERVIEW_HEIGHT - 1, x: span.leftPx, y: 0.5 }), _jsx("g", { transform: `translate(0,${HEADER_OVERVIEW_HEIGHT})`, children: _jsx(OverviewScalebarPolygon, { overview: overview, model: model, exportSvg: true }) })] })) : null;
+    return block && span ? (_jsxs("g", { transform: `translate(0 ${y})`, children: [_jsx(Cytobands, { overview: overview, cytobands: getCytobands(getSession(model).assemblyManager.get(block.assemblyName), block.refName), block: block }), _jsx("rect", { stroke: "red", fill: "rgb(255,0,0)", fillOpacity: 0.1, width: Math.max(span.rightPx - span.leftPx, 0.5), height: HEADER_OVERVIEW_HEIGHT - 1, x: span.leftPx, y: 0.5 }), _jsx("g", { transform: `translate(0,${HEADER_OVERVIEW_HEIGHT})`, children: _jsx(OverviewScalebarPolygon, { overview: overview, model: model, exportSvg: true }) })] })) : null;
 }
-export default function SVGHeader({ model, fontSize, rulerHeight, }) {
-    const { assemblyNames, effectiveShowCytobands } = model;
-    const { assemblyManager } = getSession(model);
-    // cytobands need a single unambiguous assembly, but the header label names
-    // every assembly in the view
-    const cytobandAssemblyName = assemblyNames.length === 1 ? assemblyNames[0] : undefined;
-    const assembly = cytobandAssemblyName
-        ? assemblyManager.get(cytobandAssemblyName)
-        : undefined;
-    const theme = useTheme();
-    const fill = stripAlpha(theme.palette.text.primary);
+export default function SVGHeader({ model, fontSize, rulerHeight, layout, showCytobands, }) {
+    const palette = usePalette();
+    const fill = stripAlpha(palette.text.primary);
     // nothing on screen to label: no assembly name, scalebar or ruler
     if (!model.hasVisibleContent) {
         return null;
     }
-    const { assemblyLabelBaselineY, cytobandTop, scalebarLineY, rulerTop } = getHeaderLayout({
-        fontSize,
-        showCytobands: effectiveShowCytobands,
-        rulerHeight,
-    });
-    return (_jsxs("g", { id: "header", children: [_jsx("text", { x: 0, y: assemblyLabelBaselineY, fontSize: fontSize, fill: fill, children: assemblyNames.join(', ') }), effectiveShowCytobands ? (_jsx(CytobandOverview, { model: model, assembly: assembly, y: cytobandTop })) : null, _jsx("g", { transform: `translate(0 ${scalebarLineY})`, children: _jsx(SVGScalebar, { model: model, fontSize: fontSize }) }), _jsx("g", { transform: `translate(0 ${rulerTop})`, children: _jsx(SVGRuler, { model: model, rulerHeight: rulerHeight }) })] }));
+    const { assemblyLabelBaselineY, cytobandTop, scalebarLineY, rulerTop } = layout;
+    return (_jsxs("g", { id: "header", children: [_jsx("text", { x: 0, y: assemblyLabelBaselineY, fontSize: fontSize, fill: fill, children: model.assemblyNames.join(', ') }), showCytobands ? (_jsx(CytobandOverview, { model: model, y: cytobandTop })) : null, _jsx("g", { transform: `translate(0 ${scalebarLineY})`, children: _jsx(SVGScalebar, { model: model, fontSize: fontSize }) }), _jsx("g", { transform: `translate(0 ${rulerTop})`, children: _jsx(SVGRuler, { model: model, rulerHeight: rulerHeight }) })] }));
 }

package/esm/LinearGenomeView/svgcomponents/SVGHighlights.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyleTheme } from '@jbrowse/core/ui/PaletteContext';
 import { getSession } from '@jbrowse/core/util';
-import { useTheme } from '@mui/material';
 import SVGHighlightBand from '../components/SVGHighlightBand.js';
 import { getHighlightColor, highlightKey } from '../components/util.js';
-// Native LGV highlights (model.highlight) drawn as full-height bands over the
-// tracks area, with an optional label at the top. Bookmark highlights are added
-// separately via the LinearGenomeView-HighlightSVGComponent extension point.
+// The view's highlights drawn as full-height bands over the tracks area, with
+// an optional label at the top.
 //
 // Deliberately NOT an observer, and that is the whole of what keeps a live
 // figure coherent. `useViewSvgFigure` freezes a figure by memoizing it against
@@ -16,11 +15,12 @@ import { getHighlightColor, highlightKey } from '../components/util.js';
 // The file export renders the whole document in one synchronous pass, so it
 // never needed the subscription either.
 export default function SVGHighlights({ model, height, }) {
-    const theme = useTheme();
-    return getSession(model).highlightsVisible
-        ? model.highlight.map((h, idx) => {
+    const theme = useStyleTheme();
+    const session = getSession(model);
+    return session.highlightsVisible
+        ? model.highlights.map((h, idx) => {
             const coords = model.getHighlightCoords(h);
-            return coords ? (_jsx(SVGHighlightBand, { coords: coords, height: height, color: getHighlightColor(h, theme).toRgbString(), label: model.labelsVisible ? h.label : undefined, labelColor: theme.palette.text.primary }, highlightKey(h, idx))) : null;
+            return coords ? (_jsx(SVGHighlightBand, { coords: coords, height: height, color: getHighlightColor(h, theme).toRgbString(), label: session.highlightLabelsVisible ? h.label : undefined, labelColor: theme.palette.text.primary }, highlightKey(h, idx))) : null;
         })
         : null;
 }

package/esm/LinearGenomeView/svgcomponents/SVGHighlightsOverlay.js

@@ -4,9 +4,9 @@ import { svgNodeId } from '@jbrowse/core/svg/svgId';
 import { PluggableElements } from '@jbrowse/core/ui';
 import { getEnv } from '@jbrowse/core/util';
 import SVGHighlights from './SVGHighlights.js';
-// The highlight layer over one view's tracks area: native LGV highlights plus
-// whatever plugins contribute (bookmarks), clipped to the view width. Callers
-// translate this to the top-left of the tracks area.
+// The highlight layer over one view's tracks area: the view's highlights plus
+// whatever plugins contribute, clipped to the view width. Callers translate
+// this to the top-left of the tracks area.
 export default function SVGHighlightsOverlay({ model, tracksHeight, }) {
     const { pluginManager } = getEnv(model);
     return (_jsxs(SvgClipRect, { id: `highlight-clip-${svgNodeId(model)}`, width: model.width, height: tracksHeight, children: [_jsx(SVGHighlights, { model: model, height: tracksHeight }), _jsx(PluggableElements, { pluginManager: pluginManager, name: "LinearGenomeView-HighlightSVGComponent", props: { model, height: tracksHeight } })] }));

package/esm/LinearGenomeView/svgcomponents/SVGLinearGenomeView.js

@@ -24,7 +24,7 @@ export async function renderToSvg(model, opts) {
     const { fontSize = 13, 
     // the label band scales with the font it holds; destructured after
     // fontSize so the default can read it
-    textHeight = defaultTextHeight(fontSize), rulerHeight = 34, trackLabels = 'offset', themeName = 'default', fontFamily, showGridlines = false, Wrapper, } = opts;
+    textHeight = defaultTextHeight(fontSize), rulerHeight = 34, trackLabels = 'offset', themeName, fontFamily, showGridlines = false, Wrapper, } = opts;
     const session = getSession(model);
     const theme = session.getActiveThemeOptions?.(themeName);
     // owns the two orderings this used to spell out by hand: legendWidth before
@@ -43,19 +43,15 @@ export async function renderToSvg(model, opts) {
         reserveLegendWidth: true,
     });
     notifySkippedSvgTracks(session, skippedTracks);
-    // The view geometry is read *after* the displays' waits, never before —
-    // SVGHeader re-reads both of these when it renders (later still, inside
-    // wrapSvgExport) and lays itself out with the same getHeaderLayout call, so a
-    // value that moved during the awaits would leave the reserved `tracksTop` and
-    // the drawn header describing different rows. Same rule the dotplot, circular
-    // and synteny exports each shipped a violation of.
+    // read after the displays' waits, and handed to SVGHeader rather than read
+    // again, so the reserved `tracksTop` and the drawn header are one layout
     const { width, effectiveShowCytobands } = model;
-    const { tracksTop } = getHeaderLayout({
+    const headerLayout = getHeaderLayout({
         fontSize,
         showCytobands: effectiveShowCytobands,
         rulerHeight,
     });
-    const height = tracksHeight + tracksTop + exportMargin;
+    const { tracksTop } = headerLayout;
     const trackLabelOffset = trackLabelLeftOffset({
         tracks,
         trackLabels,
@@ -68,7 +64,7 @@ export async function renderToSvg(model, opts) {
     return wrapSvgExport({
         theme,
         width: w,
-        height,
+        height: tracksTop + tracksHeight + exportMargin,
         fontFamily,
         Wrapper,
         children: (_jsx("g", { transform: `translate(${exportMargin} 0)`, children: _jsx(SVGView, { view: model, displayResults: displayResults, 
@@ -76,6 +72,6 @@ export async function renderToSvg(model, opts) {
                 // header is the full one: cytoband overview and total-bp scalebar as
                 // well as the assembly name and ruler. `tracksTop` is the height
                 // getHeaderLayout gave it.
-                header: _jsx(SVGHeader, { model: model, fontSize: fontSize, rulerHeight: rulerHeight }), fontSize: fontSize, textHeight: textHeight, trackLabels: trackLabels, trackLabelOffset: trackLabelOffset, contentTop: tracksTop, tracksHeight: tracksHeight, showGridlines: showGridlines, leftBuffer: exportMargin, legendWidth: legendWidth }) })),
+                header: _jsx(SVGHeader, { model: model, fontSize: fontSize, rulerHeight: rulerHeight, layout: headerLayout, showCytobands: effectiveShowCytobands }), fontSize: fontSize, textHeight: textHeight, trackLabels: trackLabels, trackLabelOffset: trackLabelOffset, contentTop: tracksTop, tracksHeight: tracksHeight, showGridlines: showGridlines, leftBuffer: exportMargin, legendWidth: legendWidth }) })),
     });
 }

package/esm/LinearGenomeView/svgcomponents/SVGRegionSeparators.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useTheme } from '@mui/material';
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
 // SVG counterpart of the on-screen PaddingBlocks region separators: an opaque
 // 3px bar at the right edge of every displayed region, in the same per-mode grey
 // (a translucent fill would tint the track data it masks rather than hide it).
@@ -15,10 +15,7 @@ import { useTheme } from '@mui/material';
 // close the "divergence".
 export default function SVGRegionSeparators({ model, height, }) {
     const { dynamicBlocks, offsetPx } = model;
-    const theme = useTheme();
-    const fill = theme.palette.mode === 'dark'
-        ? theme.palette.grey[500]
-        : theme.palette.grey[600];
+    const fill = usePalette().regionSeparator;
     return (_jsx(_Fragment, { children: dynamicBlocks.contentBlocks
             .filter(block => block.isRightEndOfDisplayedRegion)
             .map(block => (_jsx("rect", { x: block.offsetPx + block.widthPx - offsetPx - 1, width: 3, y: 0, height: height, fill: fill }, block.key))) }));

package/esm/LinearGenomeView/svgcomponents/SVGRowHeader.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
 import { stripAlpha } from '@jbrowse/core/util';
-import { useTheme } from '@mui/material';
 import SVGRuler from './SVGRuler.js';
 import SVGScalebar from './SVGScalebar.js';
 import { getRowHeaderLayout } from './util.js';
@@ -10,9 +10,8 @@ import { getRowHeaderLayout } from './util.js';
 // draws the cytoband overview — there is room for that above a single view, and
 // none between two rows of a synteny stack.
 export default function SVGRowHeader({ view, fontSize, 
-// Must be the height the caller also passes SVGView as `contentTop`: the
-// ruler hangs its ticks off the bottom of this budget so they meet the
-// tracks, and the tracks start at `contentTop`.
+// SVGStackedRow passes the same value as SVGView's `contentTop`, so the
+// ticks hanging off this budget meet the tracks
 rulerHeight, 
 // Whether this row draws its assembly name. Default true, which is what a
 // stack of DIFFERENT assemblies wants — a synteny export names each row
@@ -28,10 +27,10 @@ showAssemblyName = true,
 // band and every caller has to reserve that much before asking for it. See
 // getRowHeaderLayout for what it is for.
 showScalebar = false, }) {
-    const theme = useTheme();
+    const palette = usePalette();
     const { assemblyLabelBaselineY, scalebarLineY } = getRowHeaderLayout({
         fontSize,
         showScalebar,
     });
-    return (_jsxs(_Fragment, { children: [showAssemblyName ? (_jsx("text", { x: 0, y: assemblyLabelBaselineY, fontSize: fontSize, fill: stripAlpha(theme.palette.text.primary), children: view.assemblyNames.join(', ') })) : null, scalebarLineY === undefined ? null : (_jsx("g", { transform: `translate(0 ${scalebarLineY})`, children: _jsx(SVGScalebar, { model: view, fontSize: fontSize }) })), _jsx(SVGRuler, { model: view, rulerHeight: rulerHeight })] }));
+    return (_jsxs(_Fragment, { children: [showAssemblyName ? (_jsx("text", { x: 0, y: assemblyLabelBaselineY, fontSize: fontSize, fill: stripAlpha(palette.text.primary), children: view.assemblyNames.join(', ') })) : null, scalebarLineY === undefined ? null : (_jsx("g", { transform: `translate(0 ${scalebarLineY})`, children: _jsx(SVGScalebar, { model: view, fontSize: fontSize }) })), _jsx(SVGRuler, { model: view, rulerHeight: rulerHeight })] }));
 }

package/esm/LinearGenomeView/svgcomponents/SVGRuler.js

@@ -1,11 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SvgClipRect } from '@jbrowse/core/svg/SvgExport';
 import { svgNodeId } from '@jbrowse/core/svg/svgId';
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
 import { stripAlpha } from '@jbrowse/core/util';
-import { useTheme } from '@mui/material';
-import { REF_NAME_LABEL_FONT_SIZE, getScalebarRefNameLabels, labelFitsInBlock, refNameLabelFitsInView, tickLabelWidth, } from '../util.js';
+import { REF_NAME_LABEL_FONT_SIZE, TICK_LABEL_FONT_SIZE, getScalebarRefNameLabels, labelFitsInBlock, refNameLabelFitsInView, tickLabelWidth, } from '../util.js';
 import SVGRegionSeparators from './SVGRegionSeparators.js';
-import { RULER_MAJOR_TICK, RULER_MINOR_TICK, RULER_TICK_FONT_SIZE, getRulerLayout, gridlineTickXs, refNameLabelBaselineY, refNameLabelBoxHeight, vlinePath, } from './util.js';
+import { RULER_MAJOR_TICK, RULER_MINOR_TICK, getRulerLayout, gridlineTickXs, refNameLabelBaselineY, refNameLabelBoxHeight, vlinePath, } from './util.js';
 // Tick marks and their coordinate labels, read from the same model getters the
 // on-screen Gridlines/ScalebarCoordinateLabels use (gridlineTicks /
 // scalebarLabels), so tick pitch, label text and label placement can't drift
@@ -13,8 +13,8 @@ import { RULER_MAJOR_TICK, RULER_MINOR_TICK, RULER_TICK_FONT_SIZE, getRulerLayou
 // the viewport, so shift by the view's `staticBlocksTranslateX` and let the
 // caller's clip trim the overhang.
 function Ruler({ model, tickTopY, numbersBaselineY, }) {
-    const theme = useTheme();
-    const color = stripAlpha(theme.palette.text.secondary);
+    const palette = usePalette();
+    const color = stripAlpha(palette.text.secondary);
     const { scalebarLabels, width } = model;
     const { dx, major, minor } = gridlineTickXs(model);
     // major and minor marks share a stroke and differ only in length, so both
@@ -26,15 +26,14 @@ function Ruler({ model, tickTopY, numbersBaselineY, }) {
                 const w = tickLabelWidth(label);
                 return labelFitsInBlock(dx + x - w / 2, w, width);
             })
-                .map(({ x, label, key }) => (_jsx("text", { x: dx + x, y: numbersBaselineY, textAnchor: "middle", fontSize: RULER_TICK_FONT_SIZE, fill: color, children: label }, key)))] }));
+                .map(({ x, label, key }) => (_jsx("text", { x: dx + x, y: numbersBaselineY, textAnchor: "middle", fontSize: TICK_LABEL_FONT_SIZE, fill: color, children: label }, key)))] }));
 }
 // Chromosome/refName labels along the ruler. Reuses the on-screen scalebar's
 // sticky-label logic (getScalebarRefNameLabels) so the exported name stays
 // pinned to the viewport's left edge when a region has scrolled off — otherwise
 // the name renders off-canvas whenever you export a view zoomed into a
 // chromosome interior. No assembly-name prefix here (unlike the on-screen
-// scalebar): the SVG export already draws a standalone assembly-name label
-// above the ruler, so folding it into this one too is redundant.
+// scalebar): the SVG export already draws the assembly name above the ruler.
 //
 // `orientation` is not redundant, and this is the surface that needed it most.
 // A stacked export gives each row SVGRowHeader — assembly name, ruler, refName
@@ -42,8 +41,8 @@ function Ruler({ model, tickTopY, numbersBaselineY, }) {
 // counting down as the only evidence it was flipped. On screen the search box
 // says so; a figure has no search box.
 function SVGRefNameLabels({ model }) {
-    const theme = useTheme();
-    const fill = stripAlpha(theme.palette.text.primary);
+    const palette = usePalette();
+    const fill = stripAlpha(palette.text.primary);
     const { labels, caption } = getScalebarRefNameLabels({
         blocks: model.staticBlocks.blocks,
         offsetPx: model.offsetPx,

package/esm/LinearGenomeView/svgcomponents/SVGScalebar.js

@@ -1,15 +1,15 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
 import { getBpDisplayStr, stripAlpha } from '@jbrowse/core/util';
-import { useTheme } from '@mui/material';
 import { SVG_SCALEBAR_CAP } from '../consts.js';
 import { labelBaselineFromTop } from './util.js';
 export default function SVGScalebar({ model, fontSize, }) {
     const { offsetPx, dynamicBlocks: { totalWidthPxWithoutBorders: totalWidthPx, totalBp }, } = model;
-    const theme = useTheme();
+    const palette = usePalette();
     const displayBp = getBpDisplayStr(totalBp);
     const x0 = Math.max(-offsetPx, 0);
     const x1 = x0 + totalWidthPx;
-    const color = stripAlpha(theme.palette.text.secondary);
+    const color = stripAlpha(palette.text.secondary);
     // the bar is drawn on this component's own origin (y=0), with capped ends and
     // the bp label hanging just below; callers translate it to the desired line y
     return (_jsxs(_Fragment, { children: [_jsx("line", { x1: x0, x2: x1, y1: 0, y2: 0, stroke: color }), _jsx("line", { x1: x0, x2: x0, y1: -SVG_SCALEBAR_CAP, y2: SVG_SCALEBAR_CAP, stroke: color }), _jsx("line", { x1: x1, x2: x1, y1: -SVG_SCALEBAR_CAP, y2: SVG_SCALEBAR_CAP, stroke: color }), _jsx("text", { x: (x0 + x1) / 2, y: labelBaselineFromTop(SVG_SCALEBAR_CAP, fontSize), textAnchor: "middle", fontSize: fontSize, fill: color, children: displayBp })] }));

package/esm/LinearGenomeView/svgcomponents/SVGStackedRow.d.ts

@@ -0,0 +1,27 @@
+import type { LinearGenomeViewModel } from '../index.ts';
+import type { SvgDisplayResult } from './util.ts';
+import type { TrackLabelMode } from '@jbrowse/display-kit/types';
+/**
+ * One view of a stacked export: its ruler, with the assembly name and scalebar
+ * above it, over its track bodies. `top` is where the ruler starts; the caller
+ * reserves `getRowHeaderLayout().bandHeight` above it for the header to draw
+ * into, and the row is `rulerHeight + rendered.tracksHeight` tall below it.
+ */
+export default function SVGStackedRow({ view, rendered, top, margin, fontSize, textHeight, rulerHeight, trackLabels, trackLabelOffset, showGridlines, legendWidth, showAssemblyName, showScalebar, }: {
+    view: LinearGenomeViewModel;
+    rendered: {
+        displayResults: SvgDisplayResult[];
+        tracksHeight: number;
+    };
+    top: number;
+    margin: number;
+    fontSize: number;
+    textHeight: number;
+    rulerHeight: number;
+    trackLabels: TrackLabelMode;
+    trackLabelOffset: number;
+    showGridlines: boolean;
+    legendWidth?: number;
+    showAssemblyName?: boolean;
+    showScalebar?: boolean;
+}): import("react").JSX.Element;

package/esm/LinearGenomeView/svgcomponents/SVGStackedRow.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SVGRowHeader from './SVGRowHeader.js';
+import SVGView from './SVGView.js';
+/**
+ * One view of a stacked export: its ruler, with the assembly name and scalebar
+ * above it, over its track bodies. `top` is where the ruler starts; the caller
+ * reserves `getRowHeaderLayout().bandHeight` above it for the header to draw
+ * into, and the row is `rulerHeight + rendered.tracksHeight` tall below it.
+ */
+export default function SVGStackedRow({ view, rendered, top, margin, fontSize, textHeight, rulerHeight, trackLabels, trackLabelOffset, showGridlines, legendWidth, showAssemblyName, showScalebar, }) {
+    return (_jsx("g", { transform: `translate(${margin} ${top})`, children: _jsx(SVGView, { view: view, displayResults: rendered.displayResults, header: _jsx(SVGRowHeader, { view: view, fontSize: fontSize, rulerHeight: rulerHeight, showAssemblyName: showAssemblyName, showScalebar: showScalebar }), fontSize: fontSize, textHeight: textHeight, trackLabels: trackLabels, trackLabelOffset: trackLabelOffset, contentTop: rulerHeight, tracksHeight: rendered.tracksHeight, showGridlines: showGridlines, leftBuffer: margin, legendWidth: legendWidth }) }));
+}

package/esm/LinearGenomeView/svgcomponents/SVGTrackLabel.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
 import { stripAlpha } from '@jbrowse/core/util';
-import { useTheme } from '@mui/material';
 import { TRACK_LABEL_GAP, insetLabelBaselineY, offsetLabelBaselineY, } from './util.js';
 // Where the label sits, per mode. 'left' right-aligns in the gutter
 // trackLabelLeftOffset reserved (hence the shared TRACK_LABEL_GAP); the other
 // modes hang off the leftmost visible content at `x`, either just above the
-// track body ('offset') or inset over it ('overlay').
+// track body ('offset') or inset over it ('overlapping').
 //
 // Every mode is placed on its alphabetic baseline (the SVG default, so no
 // dominantBaseline is emitted at all): 'offset' so its descenders land a known
 // distance above the track body — the band it sits in is `textHeight` tall, and
-// offsetLabelBaselineY owns that arithmetic — and 'left'/'overlay' so their
+// offsetLabelBaselineY owns that arithmetic — and 'left'/'overlapping' so their
 // ascenders stay inside the track box they align with. 'left' used to be pinned
 // at a hardcoded y=20 on a hanging baseline, which neither scaled with fontSize
 // nor stayed inside a track shorter than ~35px.
@@ -32,8 +32,8 @@ function labelPosition({ trackLabels, trackLabelOffset, textHeight, fontSize, x,
     return { x: x + 5, y: insetLabelBaselineY(fontSize) };
 }
 export default function SVGTrackLabel({ trackLabels, trackName, fontSize, textHeight, trackLabelOffset, x, }) {
-    const theme = useTheme();
-    if (trackLabels === 'none') {
+    const palette = usePalette();
+    if (trackLabels === 'hidden') {
         return null;
     }
     const pos = labelPosition({
@@ -43,5 +43,14 @@ export default function SVGTrackLabel({ trackLabels, trackName, fontSize, textHe
         fontSize,
         x,
     });
-    return (_jsx("text", { x: pos.x, y: pos.y, textAnchor: pos.textAnchor, fontSize: fontSize, fill: stripAlpha(theme.palette.text.primary), children: trackName }));
+    // 'overlapping' prints over the track's own data, which the on-screen label
+    // clears with a paper box, so it carries the halo text over a plot needs
+    const halo = trackLabels === 'overlapping'
+        ? {
+            stroke: stripAlpha(palette.background.paper),
+            strokeWidth: 3,
+            paintOrder: 'stroke',
+        }
+        : {};
+    return (_jsx("text", { x: pos.x, y: pos.y, textAnchor: pos.textAnchor, fontSize: fontSize, fill: stripAlpha(palette.text.primary), ...halo, children: trackName }));
 }

package/esm/LinearGenomeView/svgcomponents/SVGTracks.d.ts

@@ -7,9 +7,9 @@ export default function SVGTracks({ displayResults, model, textHeight, fontSize,
     model: LGV;
     textHeight: number;
     fontSize: number;
-    trackLabels?: TrackLabelMode;
-    trackLabelOffset?: number;
-    leftBuffer?: number;
-    legendWidth?: number;
+    trackLabels: TrackLabelMode;
+    trackLabelOffset: number;
+    leftBuffer: number;
+    legendWidth: number;
 }): import("react").JSX.Element;
 export {};

package/esm/LinearGenomeView/svgcomponents/SVGTracks.js

@@ -3,19 +3,20 @@ import { SvgClipRect } from '@jbrowse/core/svg/SvgExport';
 import { svgNodeId } from '@jbrowse/core/svg/svgId';
 import { svgTrackName } from '@jbrowse/core/svg/trackNames';
 import { getSession } from '@jbrowse/core/util';
+import { exportsTooLargeNote } from '@jbrowse/display-kit/renderDisplaySvg';
 import SVGRegionSeparators from './SVGRegionSeparators.js';
 import SVGTrackLabel from './SVGTrackLabel.js';
-import { labelOffset, trackBoxOffsets } from './util.js';
-export default function SVGTracks({ displayResults, model, textHeight, fontSize, trackLabels = 'offset', trackLabelOffset = 0, leftBuffer = 0, legendWidth = 0, }) {
+import { labelOffset, trackBoxOffsets, trackLabelMode } from './util.js';
+export default function SVGTracks({ displayResults, model, textHeight, fontSize, trackLabels, trackLabelOffset, leftBuffer, legendWidth, }) {
     const session = getSession(model);
-    const textOffset = labelOffset(trackLabels, textHeight);
     const x = Math.max(-model.offsetPx, 0);
-    const offsets = trackBoxOffsets(displayResults.map(r => r.track), textOffset);
+    const offsets = trackBoxOffsets(displayResults.map(r => r.track), trackLabels, textHeight);
     return (_jsx(_Fragment, { children: displayResults.map(({ track, result }, i) => {
             const conf = track.configuration;
             const trackName = svgTrackName(track, session);
             const display = track.displays[0];
             const currentOffset = offsets[i];
-            return (_jsxs("g", { transform: `translate(0 ${currentOffset})`, children: [_jsx(SvgClipRect, { id: `track-clip-${svgNodeId(model)}-${conf.trackId}`, x: -leftBuffer, y: textOffset, width: model.width + trackLabelOffset + leftBuffer + legendWidth, height: display.height, children: _jsxs("g", { transform: `translate(${trackLabelOffset} ${textOffset})`, children: [result, _jsx(SVGRegionSeparators, { model: model, height: display.height })] }) }), _jsx(SVGTrackLabel, { trackName: trackName, fontSize: fontSize, textHeight: textHeight, trackLabels: trackLabels, trackLabelOffset: trackLabelOffset, x: x })] }, conf.trackId));
+            const textOffset = labelOffset(track, trackLabels, textHeight);
+            return (_jsxs("g", { transform: `translate(0 ${currentOffset})`, children: [_jsx(SvgClipRect, { id: `track-clip-${svgNodeId(model)}-${conf.trackId}`, x: -leftBuffer, y: textOffset, width: model.width + trackLabelOffset + leftBuffer + legendWidth, height: display.height, children: _jsxs("g", { transform: `translate(${trackLabelOffset} ${textOffset})`, children: [result, exportsTooLargeNote(display) ? null : (_jsx(SVGRegionSeparators, { model: model, height: display.height }))] }) }), _jsx(SVGTrackLabel, { trackName: trackName, fontSize: fontSize, textHeight: textHeight, trackLabels: trackLabelMode(track, trackLabels), trackLabelOffset: trackLabelOffset, x: x })] }, conf.trackId));
         }) }));
 }

package/esm/LinearGenomeView/svgcomponents/SVGView.d.ts

@@ -13,6 +13,6 @@ export default function SVGView({ view, displayResults, header, fontSize, textHe
     contentTop: number;
     tracksHeight: number;
     showGridlines: boolean;
-    leftBuffer?: number;
+    leftBuffer: number;
     legendWidth?: number;
 }): import("react").JSX.Element;

package/esm/LinearGenomeView/svgcomponents/SVGView.js

@@ -8,6 +8,6 @@ import SVGTracks from './SVGTracks.js';
 // linear-synteny and breakpoint-split rows — so their per-view layout can't
 // drift. It did drift while the standalone export kept its own copy of these
 // four groups: only that copy widened the per-track clip by `legendWidth`.
-export default function SVGView({ view, displayResults, header, fontSize, textHeight, trackLabels, trackLabelOffset, contentTop, tracksHeight, showGridlines, leftBuffer = 0, legendWidth = 0, }) {
+export default function SVGView({ view, displayResults, header, fontSize, textHeight, trackLabels, trackLabelOffset, contentTop, tracksHeight, showGridlines, leftBuffer, legendWidth = 0, }) {
     return (_jsxs(_Fragment, { children: [_jsx("g", { transform: `translate(${trackLabelOffset})`, children: header }), showGridlines ? (_jsx("g", { transform: `translate(${trackLabelOffset} ${contentTop})`, children: _jsx(SVGGridlines, { model: view, height: tracksHeight }) })) : null, _jsx("g", { transform: `translate(0 ${contentTop})`, children: _jsx(SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: view, displayResults: displayResults, trackLabelOffset: trackLabelOffset, leftBuffer: leftBuffer, legendWidth: legendWidth }) }), _jsx("g", { transform: `translate(${trackLabelOffset} ${contentTop})`, children: _jsx(SVGHighlightsOverlay, { model: view, tracksHeight: tracksHeight }) })] }));
 }

package/esm/LinearGenomeView/svgcomponents/figureContract.js

@@ -1,25 +1,25 @@
 import { useEffect, useRef } from 'react';
 import { svgNodeId } from '@jbrowse/core/svg/svgId';
+import { contractReportsOn, reportContractViolation, } from '@jbrowse/render-core/contractReports';
 /**
- * Dev-only checks that a live SVG figure is being used the way it can work.
- * No-ops in production.
+ * Checks that a live SVG figure is being used the way it can work.
  *
  * `useViewSvgFigure` publishes a figure whose two halves are drawn at different
  * moments and only agree by construction, and both ways of breaking that are
  * invisible in the output: the drawing is still a plausible picture of
  * somewhere, just not of one moment or not with its own clips. So the run
  * reports instead, through the `[jbrowse <family> contract]` channel every
- * dev-only check in the tree uses — `config/jest/contractGate.js` fails the test
- * that collects one, and ARCHITECTURAL_LIMITS.md §"Ordering is the contract" is
- * the register. `figure` rather than `svg-figure` because the gate's family
- * pattern is `\w+`, which a hyphen is not.
+ * check in the tree uses — `config/jest/contractGate.js` fails the test that
+ * collects one, and ARCHITECTURAL_LIMITS.md §"Ordering is the contract" is the
+ * register. `figure` rather than `svg-figure` because the gate's family pattern
+ * is `\w+`, which a hyphen is not.
  *
- * `console.error` and never a throw, as the rest of that family: a figure is
- * chrome a host renders beside its own, and taking the host's tree down over a
- * drawing is worse than the drawing being wrong.
+ * Reported and never thrown, as the rest of that family: a figure is chrome a
+ * host renders beside its own, and taking the host's tree down over a drawing
+ * is worse than the drawing being wrong.
  */
 function report(message) {
-    console.error(`[jbrowse figure contract] ${message}`);
+    reportContractViolation('figure', message);
 }
 // Live figures per view, keyed the way their SVG ids are. A count rather than a
 // flag: the report belongs on the second mount, and the first has to survive the
@@ -43,9 +43,6 @@ const figuresPerView = new Map();
  */
 export function useOneFigurePerView(view) {
     useEffect(() => {
-        if (process.env.NODE_ENV === 'production') {
-            return undefined;
-        }
         // captured, not re-derived on cleanup: by then the view may have left the
         // tree, and `svgNodeId` walks it
         const key = svgNodeId(view);
@@ -99,7 +96,10 @@ export function useFrozenFigureContract(ref, snapshot) {
     rendered.current = snapshot;
     useEffect(() => {
         const el = ref.current;
-        if (process.env.NODE_ENV === 'production' || !el) {
+        // the one check here with a cost of its own — a `MutationObserver` over the
+        // whole figure subtree — so unlike its neighbour it asks whether the
+        // channel is armed rather than running and reporting into it
+        if (!contractReportsOn() || !el) {
             return undefined;
         }
         const observer = new MutationObserver(() => {

package/esm/LinearGenomeView/svgcomponents/renderViewTracks.js

@@ -59,7 +59,7 @@ export async function renderViewTracks({ view, opts, theme, textHeight, trackLab
     return {
         tracks,
         displayResults,
-        tracksHeight: totalHeight(tracks, textHeight, trackLabels),
+        tracksHeight: totalHeight(tracks, trackLabels, textHeight),
         legendWidth,
         skippedTracks,
     };