@jbrowse/plugin-linear-genome-view 5.0.0-beta.8 → 5.0.0-beta.9

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/svgcomponents/SVGCloseUpFrame.d.ts

@@ -0,0 +1,5 @@
+export default function SVGCloseUpFrame({ x, width, height, }: {
+    x: number;
+    width: number;
+    height: number;
+}): import("react").JSX.Element;

package/esm/LinearGenomeView/svgcomponents/SVGCloseUpFrame.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from '@mui/material';
+import { CLOSE_UP_FRAME_WIDTH, closeUpColor } from '../closeUps.js';
+export default function SVGCloseUpFrame({ x, width, height, }) {
+    const theme = useTheme();
+    const inset = CLOSE_UP_FRAME_WIDTH / 2;
+    return (_jsx("rect", { x: x + inset, y: inset, width: width - CLOSE_UP_FRAME_WIDTH, height: height - CLOSE_UP_FRAME_WIDTH, fill: "none", stroke: closeUpColor(theme), strokeWidth: CLOSE_UP_FRAME_WIDTH }));
+}

package/esm/LinearGenomeView/svgcomponents/SVGHighlights.js

@@ -3,9 +3,8 @@ 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
@@ -18,7 +17,7 @@ import { getHighlightColor, highlightKey } from '../components/util.js';
 export default function SVGHighlights({ model, height, }) {
     const theme = useTheme();
     return getSession(model).highlightsVisible
-        ? model.highlight.map((h, idx) => {
+        ? 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;
         })

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

@@ -1,13 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { exportMargin } from '@jbrowse/core/svg/constants';
-import { awaitViewInitialized } from '@jbrowse/core/svg/svgReady';
+import { awaitSvgRenders, awaitViewInitialized, } from '@jbrowse/core/svg/svgReady';
 import { notifySkippedSvgTracks } from '@jbrowse/core/svg/trackNames';
 import { wrapSvgExport } from '@jbrowse/core/svg/wrapSvgExport';
 import { getSession } from '@jbrowse/core/util';
+import { closeUpStackRows } from '../closeUps.js';
+import OverviewScalebarPolygon from '../components/OverviewScalebarPolygon.js';
+import SVGCloseUpFrame from './SVGCloseUpFrame.js';
 import SVGHeader from './SVGHeader.js';
+import SVGRowHeader from './SVGRowHeader.js';
 import SVGView from './SVGView.js';
 import { renderViewTracks } from './renderViewTracks.js';
-import { defaultTextHeight, getHeaderLayout, trackLabelLeftOffset, } from './util.js';
+import { defaultTextHeight, getHeaderLayout, getRowHeaderLayout, trackLabelLeftOffset, } from './util.js';
 export async function renderToSvg(model, opts) {
     await awaitViewInitialized(model);
     // `initialized` only answers "have the assemblies loaded" — navigating is the
@@ -24,7 +28,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
@@ -32,17 +36,32 @@ export async function renderToSvg(model, opts) {
     // own readiness wait — an LGV display through `renderDisplaySvg`'s
     // `awaitSvgReady`, a non-LGV one (dotplot, synteny, circular) by calling that
     // itself.
-    const { tracks, displayResults, tracksHeight, legendWidth, skippedTracks } = await renderViewTracks({
-        view: model,
-        opts,
-        theme,
-        textHeight,
-        trackLabels,
-        // the standalone export is the one with room to give: it widens its
-        // canvas below so a legend sits beside the plot rather than over it
-        reserveLegendWidth: true,
-    });
-    notifySkippedSvgTracks(session, skippedTracks);
+    const closeUps = model.closeUpViews;
+    const stack = closeUpStackRows(model, closeUps);
+    const [{ tracks, displayResults, tracksHeight, legendWidth, skippedTracks }, closeUpTracks,] = await awaitSvgRenders([
+        renderViewTracks({
+            view: model,
+            opts,
+            theme,
+            textHeight,
+            trackLabels,
+            // the standalone export is the one with room to give: it widens its
+            // canvas below so a legend sits beside the plot rather than over it
+            reserveLegendWidth: true,
+        }),
+        // a close-up is a stacked row, like a synteny row: no room for a legend
+        awaitSvgRenders(closeUps.map(closeUp => renderViewTracks({
+            view: closeUp,
+            opts,
+            theme,
+            textHeight,
+            trackLabels,
+        }))),
+    ]);
+    notifySkippedSvgTracks(session, [
+        ...skippedTracks,
+        ...closeUpTracks.flatMap(r => r.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
@@ -55,27 +74,79 @@ export async function renderToSvg(model, opts) {
         showCytobands: effectiveShowCytobands,
         rulerHeight,
     });
-    const height = tracksHeight + tracksTop + exportMargin;
+    // one gutter for the whole export, wide enough for the widest label in any
+    // close-up, so the close-ups stay aligned with the view
     const trackLabelOffset = trackLabelLeftOffset({
-        tracks,
+        tracks: [...tracks, ...closeUpTracks.flatMap(r => r.tracks)],
         trackLabels,
         fontSize,
         fontFamily,
         session,
     });
     const w = width + trackLabelOffset + legendWidth;
+    // The view under its full header, then each close-up under the trapezoid
+    // joining it to the row above, in the order `closeUpStackRows` gives — which
+    // is the order the screen draws too.
+    //
+    // A close-up's row header is a scalebar and no assembly name — the opposite
+    // of a synteny row's. Every close-up is the host's own assembly, named once
+    // in the host's own header, while the span each close-up covers is the whole
+    // point of the stack and is the one thing a ruler at figure size cannot be
+    // read for.
+    const rowTopGap = 6;
+    const { bandHeight } = getRowHeaderLayout({
+        fontSize,
+        showScalebar: true,
+        reserveAssemblyName: false,
+    });
+    const rendered = new Map(closeUps.map((closeUp, i) => [closeUp.id, closeUpTracks[i]]));
+    const closeUpRow = (closeUp) => {
+        const { tracksHeight, displayResults } = rendered.get(closeUp.id);
+        const rowTop = rowTopGap + bandHeight;
+        const height = rowTop + rulerHeight + tracksHeight;
+        return {
+            key: closeUp.id,
+            height,
+            node: (_jsxs(_Fragment, { children: [_jsx("g", { transform: `translate(${exportMargin} ${rowTop})`, children: _jsx(SVGView, { view: closeUp, displayResults: displayResults, header: _jsx(SVGRowHeader, { view: closeUp, fontSize: fontSize, rulerHeight: rulerHeight, showAssemblyName: false, showScalebar: true }), fontSize: fontSize, textHeight: textHeight, trackLabels: trackLabels, trackLabelOffset: trackLabelOffset, contentTop: rulerHeight, tracksHeight: tracksHeight, showGridlines: showGridlines, leftBuffer: exportMargin }) }), _jsx(SVGCloseUpFrame, { x: exportMargin + trackLabelOffset, width: closeUp.width, height: height })] })),
+        };
+    };
+    const connectorRow = (closeUp, context) => ({
+        key: `connector-${closeUp.id}`,
+        // the band the reader set by dragging one of them, since how steep the
+        // connectors read is the whole of what that drag is for
+        height: model.closeUpConnectorHeight,
+        node: (_jsx("g", { transform: `translate(${exportMargin + trackLabelOffset} 0)`, children: _jsx(OverviewScalebarPolygon, { model: closeUp, overview: context, overviewOffsetPx: -context.offsetPx, height: model.closeUpConnectorHeight, gradient: true }) })),
+    });
+    const hostRow = {
+        key: model.id,
+        height: tracksTop + tracksHeight,
+        node: (_jsx("g", { transform: `translate(${exportMargin} 0)`, children: _jsx(SVGView, { view: model, displayResults: displayResults, 
+                // the standalone export is the one with room above the tracks, so its
+                // 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 }) })),
+    };
+    const rows = [
+        hostRow,
+        ...stack.flatMap(({ closeUp, context }) => [
+            connectorRow(closeUp, context),
+            closeUpRow(closeUp),
+        ]),
+    ];
+    let y = 0;
+    const children = rows.map(row => {
+        const top = y;
+        y += row.height;
+        return (_jsx("g", { transform: `translate(0 ${top})`, children: row.node }, row.key));
+    });
     // the xlink namespace is used for rendering <image> tag
     return wrapSvgExport({
         theme,
         width: w,
-        height,
+        height: y + exportMargin,
         fontFamily,
         Wrapper,
-        children: (_jsx("g", { transform: `translate(${exportMargin} 0)`, children: _jsx(SVGView, { view: model, displayResults: displayResults, 
-                // the standalone export is the one with room above the tracks, so its
-                // 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 }) })),
+        children,
     });
 }

package/esm/LinearGenomeView/svgcomponents/SVGRuler.js

@@ -3,9 +3,9 @@ import { SvgClipRect } from '@jbrowse/core/svg/SvgExport';
 import { svgNodeId } from '@jbrowse/core/svg/svgId';
 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
@@ -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

package/esm/LinearGenomeView/svgcomponents/SVGTrackLabel.js

@@ -5,12 +5,12 @@ import { TRACK_LABEL_GAP, insetLabelBaselineY, offsetLabelBaselineY, } from './u
 // 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.
@@ -33,7 +33,7 @@ function labelPosition({ trackLabels, trackLabelOffset, textHeight, fontSize, x,
 }
 export default function SVGTrackLabel({ trackLabels, trackName, fontSize, textHeight, trackLabelOffset, x, }) {
     const theme = useTheme();
-    if (trackLabels === 'none') {
+    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(theme.palette.background.paper),
+            strokeWidth: 3,
+            paintOrder: 'stroke',
+        }
+        : {};
+    return (_jsx("text", { x: pos.x, y: pos.y, textAnchor: pos.textAnchor, fontSize: fontSize, fill: stripAlpha(theme.palette.text.primary), ...halo, children: trackName }));
 }

package/esm/LinearGenomeView/svgcomponents/SVGTracks.js

@@ -5,17 +5,17 @@ import { svgTrackName } from '@jbrowse/core/svg/trackNames';
 import { getSession } from '@jbrowse/core/util';
 import SVGRegionSeparators from './SVGRegionSeparators.js';
 import SVGTrackLabel from './SVGTrackLabel.js';
-import { labelOffset, trackBoxOffsets } from './util.js';
+import { labelOffset, trackBoxOffsets, trackLabelMode } from './util.js';
 export default function SVGTracks({ displayResults, model, textHeight, fontSize, trackLabels = 'offset', trackLabelOffset = 0, leftBuffer = 0, legendWidth = 0, }) {
     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, _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/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,
     };

package/esm/LinearGenomeView/svgcomponents/useViewSvgFigure.js

@@ -1,14 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useRef, useSyncExternalStore, } from 'react';
+import { SvgThemeProviders } from '@jbrowse/core/svg/SvgThemeProviders';
 import { exportMargin } from '@jbrowse/core/svg/constants';
+import { svgNodeId } from '@jbrowse/core/svg/svgId';
 import { svgTrackName } from '@jbrowse/core/svg/trackNames';
-import { StyleThemeProvider } from '@jbrowse/core/ui/PaletteContext';
-import { resolveStyleTheme } from '@jbrowse/core/ui/styleTheme';
-import { createJBrowseTheme } from '@jbrowse/core/ui/theme';
 import { getSession } from '@jbrowse/core/util';
 import { useFetch } from '@jbrowse/core/util/useFetch';
-import { isAlive } from '@jbrowse/mobx-state-tree';
-import { ThemeProvider } from '@mui/material';
+import { getSnapshot, isAlive } from '@jbrowse/mobx-state-tree';
 import { reaction } from 'mobx';
 import SVGRowHeader from './SVGRowHeader.js';
 import SVGView from './SVGView.js';
@@ -87,17 +85,16 @@ async function renderFigure(view, opts) {
  * render. Where it matters, this line is the only thing holding the two halves
  * together.
  *
- * Both providers, as `wrapSvgExport` mounts for the file path, and for the same
- * reason: the chrome takes its colors from the Material UI theme and a
- * `makeStyles` component would take its own from the style theme, so a figure
- * mounted in a host that installs neither would otherwise draw itself in
- * JBrowse's *default light* theme whatever the session is set to.
+ * The export's theme providers, as the file path mounts them: a host that
+ * installs neither would otherwise get JBrowse's default light theme whatever
+ * the session is set to.
  *
  * No background rect, unlike a file — that has nothing behind it, and a figure
- * in a page has the page. No `resetSvgClipIds` either, and that is the opposite
- * decision from the file path on purpose: the counter is document-global, so
- * resetting it here would renumber ids that a figure already on the page is
- * pointing at. Letting it run is what makes several live figures unique.
+ * in a page has the page. No `withFreshSvgClipIds` either, and that is the
+ * opposite decision from the file path on purpose: the counter is
+ * document-global, so restarting it here would reuse ids that a figure already
+ * on the page is pointing at. Letting it run is what makes several live figures
+ * unique.
  */
 const FrozenSvgFigure = memo(function FrozenSvgFigure({ view, snapshot, }) {
     const { width, height, margin, theme } = snapshot;
@@ -105,20 +102,20 @@ const FrozenSvgFigure = memo(function FrozenSvgFigure({ view, snapshot, }) {
     // INSIDE the tree, which the memo above is not between
     const ref = useRef(null);
     useFrozenFigureContract(ref, snapshot);
-    return (_jsx(ThemeProvider, { theme: createJBrowseTheme(theme), children: _jsx(StyleThemeProvider, { theme: resolveStyleTheme({ configTheme: theme }), children: _jsx("svg", { ref: ref, width: width, height: height, viewBox: `0 0 ${width} ${height}`, 
-                // It is a vector, so a narrower container scales it rather than
-                // clipping it; the height attribute stays, so a box reserved for it
-                // does not change size when that happens. Deliberately not a prop:
-                // anything passed per-render would have to reach past the memo above,
-                // which is the one thing holding the figure's two halves together. A
-                // host that wants other sizing wraps this in a box of its own.
-                style: { display: 'block', maxWidth: '100%' }, children: _jsx("g", { transform: `translate(${margin} ${snapshot.bandHeight})`, children: _jsx(SVGView, { view: view, displayResults: snapshot.displayResults, header: _jsx(SVGRowHeader, { view: view, fontSize: snapshot.fontSize, rulerHeight: snapshot.rulerHeight, showScalebar: snapshot.showScalebar }), fontSize: snapshot.fontSize, textHeight: snapshot.textHeight, trackLabels: snapshot.trackLabels, trackLabelOffset: snapshot.trackLabelOffset, 
-                        // the row header is exactly the ruler, so the bodies start at its
-                        // height
-                        contentTop: snapshot.rulerHeight, tracksHeight: snapshot.tracksHeight, showGridlines: snapshot.showGridlines, 
-                        // the left gutter the per-track clip may bleed into, so content
-                        // drawn left of zero — a wiggle's y-axis — survives
-                        leftBuffer: snapshot.margin, legendWidth: snapshot.legendWidth }) }) }) }) }));
+    return (_jsx(SvgThemeProviders, { theme: theme, children: _jsx("svg", { ref: ref, width: width, height: height, viewBox: `0 0 ${width} ${height}`, 
+            // It is a vector, so a narrower container scales it rather than
+            // clipping it; the height attribute stays, so a box reserved for it
+            // does not change size when that happens. Deliberately not a prop:
+            // anything passed per-render would have to reach past the memo above,
+            // which is the one thing holding the figure's two halves together. A
+            // host that wants other sizing wraps this in a box of its own.
+            style: { display: 'block', maxWidth: '100%' }, children: _jsx("g", { transform: `translate(${margin} ${snapshot.bandHeight})`, children: _jsx(SVGView, { view: view, displayResults: snapshot.displayResults, header: _jsx(SVGRowHeader, { view: view, fontSize: snapshot.fontSize, rulerHeight: snapshot.rulerHeight, showScalebar: snapshot.showScalebar }), fontSize: snapshot.fontSize, textHeight: snapshot.textHeight, trackLabels: snapshot.trackLabels, trackLabelOffset: snapshot.trackLabelOffset, 
+                    // the row header is exactly the ruler, so the bodies start at its
+                    // height
+                    contentTop: snapshot.rulerHeight, tracksHeight: snapshot.tracksHeight, showGridlines: snapshot.showGridlines, 
+                    // the left gutter the per-track clip may bleed into, so content
+                    // drawn left of zero — a wiggle's y-axis — survives
+                    leftBuffer: snapshot.margin, legendWidth: snapshot.legendWidth }) }) }) }));
 });
 /**
  * What "the figure is out of date" means, as a string.
@@ -141,11 +138,10 @@ const FrozenSvgFigure = memo(function FrozenSvgFigure({ view, snapshot, }) {
  * highlight bands**, which are drawn in the figure and are the one thing in it a
  * reader adds without navigating anywhere.
  *
- * A plugin's own overlay (grid-bookmark's bookmarks, through
- * `LinearGenomeView-HighlightSVGComponent`) is state this cannot see, so a
- * bookmark added under a drawn figure shows up at its next redraw rather than at
- * once. Subscribing from inside the figure is the thing that must not happen —
- * see the note at the top of the file.
+ * A plugin's own overlay, through `LinearGenomeView-HighlightSVGComponent`, is
+ * state this cannot see, so a change to it shows up at the figure's next
+ * redraw rather than at once. Subscribing from inside the figure is the thing
+ * that must not happen — see the note at the top of the file.
  */
 function figureKey(view, themeName) {
     // A closed view is not an error, it is a host doing an ordinary thing in an
@@ -156,10 +152,10 @@ function figureKey(view, themeName) {
     // throw a TypeError inside the reaction, where MobX swallows it. No key means
     // no figure, which is what a host that closed the view wanted anyway.
     //
-    // `view.width` throws by design before the view has been measured, and
-    // `ready` is the gate that says it has been — and that there are regions to
-    // draw, which is the second async step `initialized` does not cover
-    if (!isAlive(view) || !view.ready) {
+    // `view.width` throws by design before the view has been measured. `status`
+    // is ready only once it has been AND there are regions to draw — `ready` is
+    // also true for a view nothing has told where to look, measured or not
+    if (!isAlive(view) || view.status.type !== 'ready') {
         return '';
     }
     const session = getSession(view);
@@ -167,13 +163,11 @@ function figureKey(view, themeName) {
         view.coarseVisibleLocStrings,
         view.coarseBpPerPx,
         view.width,
-        view.tracks.map(track => [
-            track.configuration.trackId,
-            track.minimized,
-            track.displays[0]?.height,
-        ]),
+        // the snapshot carries pinned, minimized and the display settings a body
+        // bakes in; the effective height is a getter, so it is read beside it
+        view.tracks.map(track => [getSnapshot(track), track.displays[0]?.height]),
         session.getActiveThemeOptions?.(themeName),
-        session.highlightsVisible ? view.highlight : false,
+        session.highlightsVisible ? view.highlights : false,
         view.labelsVisible,
     ]);
 }
@@ -212,25 +206,7 @@ function useFigureKey(view, themeName) {
 export function useViewSvgFigure(view, { fontSize = 12, rulerHeight = 30, trackLabels = 'offset', showGridlines = true, showScalebar = true, rasterizeLayers = false, margin = exportMargin, themeName, } = {}) {
     const key = useFigureKey(view, themeName);
     useOneFigurePerView(view);
-    const { data: snapshot, error, isLoading, } = useFetch(
-    // Every option is in the key by value, so an inline options object costs
-    // nothing and a changed option redraws. A null key is `useFetch`'s own "not
-    // yet", which is what an unready view reports.
-    key
-        ? [
-            'lgv-svg-figure',
-            key,
-            JSON.stringify([
-                fontSize,
-                rulerHeight,
-                trackLabels,
-                showGridlines,
-                showScalebar,
-                rasterizeLayers,
-                margin,
-            ]),
-        ]
-        : null, () => renderFigure(view, {
+    const opts = {
         fontSize,
         rulerHeight,
         trackLabels,
@@ -239,7 +215,20 @@ export function useViewSvgFigure(view, { fontSize = 12, rulerHeight = 30, trackL
         rasterizeLayers,
         margin,
         themeName,
-    }));
+    };
+    const { data: snapshot, error, isLoading, } = useFetch(
+    // Every option is in the key by value, so an inline options object costs
+    // nothing and a changed option redraws. The view's id too: two views can
+    // share every other term. A null key is `useFetch`'s own "not yet", which
+    // is what an unready view reports.
+    key
+        ? [
+            'lgv-svg-figure',
+            svgNodeId(view),
+            key,
+            JSON.stringify(opts),
+        ]
+        : null, () => renderFigure(view, opts));
     // Written in an effect and read during render, which is the order that makes
     // it work: a key change clears `data` on the render where the ref still holds
     // the previous commit's size, so the host's box keeps the height it had rather

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

@@ -5,6 +5,7 @@ import type { ReactNode } from 'react';
 interface TrackHeights {
     displays: {
         height: number;
+        prefersOffset?: boolean;
     }[];
 }
 export interface SvgDisplayResult {
@@ -50,9 +51,10 @@ export declare function labelBaselineFromTop(topY: number, fontSize: number): nu
 export declare function defaultTextHeight(fontSize: number): number;
 export declare function offsetLabelBaselineY(textHeight: number, fontSize: number): number;
 export declare function insetLabelBaselineY(fontSize: number): number;
-export declare function getRowHeaderLayout({ fontSize, showScalebar, }: {
+export declare function getRowHeaderLayout({ fontSize, showScalebar, reserveAssemblyName, }: {
     fontSize: number;
     showScalebar: boolean;
+    reserveAssemblyName?: boolean;
 }): {
     scalebarLineY: number | undefined;
     assemblyLabelBaselineY: number;
@@ -71,14 +73,14 @@ export declare function getHeaderLayout({ fontSize, showCytobands, rulerHeight,
 };
 export declare const RULER_MAJOR_TICK = 5;
 export declare const RULER_MINOR_TICK = 3;
-export declare const RULER_TICK_FONT_SIZE = 11;
 export declare function getRulerLayout(rulerHeight: number): {
     tickTopY: number;
     numbersBaselineY: number;
 };
 export declare const refNameLabelBoxHeight: number;
 export declare const refNameLabelBaselineY: number;
-export declare function labelOffset(trackLabels: TrackLabelMode, textHeight: number): number;
+export declare function trackLabelMode(track: TrackHeights, trackLabels: TrackLabelMode): TrackLabelMode;
+export declare function labelOffset(track: TrackHeights, trackLabels: TrackLabelMode, textHeight: number): number;
 export declare const TRACK_LABEL_GAP = 40;
 export declare function trackLabelLeftOffset({ tracks, trackLabels, fontSize, fontFamily, session, }: {
     tracks: {
@@ -89,7 +91,7 @@ export declare function trackLabelLeftOffset({ tracks, trackLabels, fontSize, fo
     fontFamily?: string;
     session: TrackCatalog;
 }): number;
-export declare function trackBoxHeight(track: TrackHeights, textOffset: number): number;
-export declare function trackBoxOffsets(tracks: TrackHeights[], textOffset: number): number[];
-export declare function totalHeight(tracks: TrackHeights[], textHeight: number, trackLabels: TrackLabelMode): number;
+export declare function trackBoxHeight(track: TrackHeights, trackLabels: TrackLabelMode, textHeight: number): number;
+export declare function trackBoxOffsets(tracks: TrackHeights[], trackLabels: TrackLabelMode, textHeight: number): number[];
+export declare function totalHeight(tracks: TrackHeights[], trackLabels: TrackLabelMode, textHeight: number): number;
 export {};