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

package/esm/LinearGenomeView/sharedScaleContainer.d.ts

@@ -0,0 +1,18 @@
+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
+ * `LinearSyntenyView/sharedFit.ts`.
+ */
+export type SharedFit = {
+    answered: false;
+} | {
+    answered: true;
+    bpPerPx: number;
+};
+export interface SharedScaleContainer {
+    sharedFit: SharedFit;
+}
+export declare function isSharedScaleContainer(thing: unknown): thing is SharedScaleContainer;
+export declare function sharedScaleContainerOf(node: IAnyStateTreeNode): SharedScaleContainer | undefined;

package/esm/LinearGenomeView/sharedScaleContainer.js

@@ -0,0 +1,17 @@
+import { getParent, hasParent, isAlive } from '@jbrowse/mobx-state-tree';
+export function isSharedScaleContainer(thing) {
+    return typeof thing === 'object' && thing !== null && 'sharedFit' in thing;
+}
+// Walks rather than using findParentThatIs because having no such container is
+// the ordinary standalone case here, not the error that helper reports.
+export function sharedScaleContainerOf(node) {
+    let current = node;
+    let found;
+    while (!found && hasParent(current) && isAlive(current)) {
+        current = getParent(current);
+        if (isSharedScaleContainer(current)) {
+            found = current;
+        }
+    }
+    return found;
+}

package/esm/LinearGenomeView/showRegionsWithUndo.d.ts

@@ -0,0 +1,35 @@
+import type { LinearGenomeViewModel } from './model.ts';
+import type { Region } from '@jbrowse/core/util/types';
+/**
+ * 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.
+ *
+ * This is the "navigate the view you are looking at" half of a launcher, as
+ * against `session.addView`, which opens a second one. Two features do it —
+ * plugin-canvas's collapsed introns and plugin-alignments' "view mate region" —
+ * and both had their own copy of the same fifteen lines, including the same two
+ * decisions worth stating once:
+ *
+ * - **`fitAllRegions`, not `showAllRegions`.** The caller named the regions it
+ *   wants, so it gets the width. `showAllRegions` goes to the zoom-out LIMIT,
+ *   whose 10% margin is a framing choice for "show me everything" and dead frame
+ *   here — and both of these callers already padded their regions by the context
+ *   they wanted, so a second margin is one nothing asked for.
+ * - **The captured viewport is a bp WINDOW, not a pixel pair.** A capture and its
+ *   Undo can be a window resize apart, and pixels mean nothing without the width
+ *   they were measured at. Both copies captured `{bpPerPx, offsetPx}` and
+ *   restored through `setNewView`, so undoing after a resize landed somewhere
+ *   else. `displayedRegions` rides along by reference: it is a `types.frozen`,
+ *   so the array is already immutable and `getSnapshot` would refuse it anyway.
+ *
+ * `alsoUndo` is for state the caller changed that is not the view's location —
+ * the collapsed-intron launch isolates the track to one gene, and an Undo that
+ * restored the regions and left the isolation on would be a worse lie than not
+ * offering one.
+ */
+export declare function showRegionsWithUndo({ view, regions, message, alsoUndo, }: {
+    view: LinearGenomeViewModel;
+    regions: Region[];
+    message: string;
+    alsoUndo?: () => void;
+}): void;

package/esm/LinearGenomeView/showRegionsWithUndo.js

@@ -0,0 +1,50 @@
+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.
+ *
+ * This is the "navigate the view you are looking at" half of a launcher, as
+ * against `session.addView`, which opens a second one. Two features do it —
+ * plugin-canvas's collapsed introns and plugin-alignments' "view mate region" —
+ * and both had their own copy of the same fifteen lines, including the same two
+ * decisions worth stating once:
+ *
+ * - **`fitAllRegions`, not `showAllRegions`.** The caller named the regions it
+ *   wants, so it gets the width. `showAllRegions` goes to the zoom-out LIMIT,
+ *   whose 10% margin is a framing choice for "show me everything" and dead frame
+ *   here — and both of these callers already padded their regions by the context
+ *   they wanted, so a second margin is one nothing asked for.
+ * - **The captured viewport is a bp WINDOW, not a pixel pair.** A capture and its
+ *   Undo can be a window resize apart, and pixels mean nothing without the width
+ *   they were measured at. Both copies captured `{bpPerPx, offsetPx}` and
+ *   restored through `setNewView`, so undoing after a resize landed somewhere
+ *   else. `displayedRegions` rides along by reference: it is a `types.frozen`,
+ *   so the array is already immutable and `getSnapshot` would refuse it anyway.
+ *
+ * `alsoUndo` is for state the caller changed that is not the view's location —
+ * the collapsed-intron launch isolates the track to one gene, and an Undo that
+ * restored the regions and left the isolation on would be a worse lie than not
+ * offering one.
+ */
+export function showRegionsWithUndo({ view, regions, message, alsoUndo, }) {
+    const previous = {
+        displayedRegions: view.displayedRegions,
+        windowWidthBp: view.windowWidthBp,
+        windowStartBp: view.windowStartBp,
+    };
+    // 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: () => {
+            view.setDisplayedRegions(previous.displayedRegions);
+            view.setWindow(previous.windowWidthBp, previous.windowStartBp);
+            alsoUndo?.();
+        },
+    });
+}

package/esm/LinearGenomeView/stickyChrome.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Where the sticky boxes below the view's chrome pin, as CSS rather than as a
+ * 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;
+    headerHeight: number;
+}): {
+    scalebar: string | undefined;
+    pinnedTracks: string;
+};

package/esm/LinearGenomeView/stickyChrome.js

@@ -0,0 +1,26 @@
+import { VIEW_HEADER_HEIGHT } from '@jbrowse/core/ui';
+import { LGV_HEADER_HEIGHT_VAR, VIEW_HEADER_HEIGHT_VAR, } from '@jbrowse/core/util/hooks';
+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. 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
+    // readers use that to stay in flow. A pinned *track* block pins either way —
+    // pinning tracks is its own feature — so it always has a top, and with no
+    // chrome above it that top is the container's own edge.
+    const scalebar = stickyViewHeaders
+        ? `calc(var(${VIEW_HEADER_HEIGHT_VAR}, ${VIEW_HEADER_HEIGHT}px) + var(${LGV_HEADER_HEIGHT_VAR}, ${headerHeight}px))`
+        : undefined;
+    return {
+        scalebar,
+        pinnedTracks: scalebar
+            ? `calc(${scalebar} + ${SCALE_BAR_HEIGHT}px)`
+            : '0px',
+    };
+}

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

@@ -3,5 +3,5 @@ type LGV = LinearGenomeViewModel;
 export default function SVGGridlines({ model, height, }: {
     model: LGV;
     height: number;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export {};

package/esm/LinearGenomeView/svgcomponents/SVGGridlines.js

@@ -1,20 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { stripAlpha } from '@jbrowse/core/util';
-import { useTheme } from '@mui/material';
-import { makeTicks } from "../util.js";
+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 { gridlineTickXs, vlinePath } from './util.js';
 export default function SVGGridlines({ model, height, }) {
-    const { dynamicBlocks: { contentBlocks }, offsetPx: viewOffsetPx, bpPerPx, } = model;
-    const theme = useTheme();
-    const c = stripAlpha(theme.palette.divider);
-    return (_jsx(_Fragment, { children: contentBlocks.map(block => {
-            const { start, end, key, reversed, offsetPx, widthPx } = block;
-            const offset = offsetPx - viewOffsetPx;
-            const ticks = makeTicks(start, end, bpPerPx, true, true);
-            const clipid = `gridline-clip-${key}`;
-            return (_jsxs("g", { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipid, children: _jsx("rect", { x: 0, y: 0, width: widthPx, height: height }) }) }), _jsx("g", { transform: `translate(${offset} 0)`, clipPath: `url(#${clipid})`, children: ticks.map(tick => {
-                            const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
-                            const isMajor = tick.type === 'major';
-                            return (_jsx("line", { x1: x, x2: x, y1: 0, y2: height, strokeWidth: 1, stroke: c, strokeOpacity: isMajor ? 0.3 : 0.15 }, `gridline-${tick.base}`));
-                        }) })] }, key));
-        }) }));
+    const { width } = model;
+    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(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
+    // bleed into the export margin
+    return (_jsxs(SvgClipRect, { id: `gridline-clip-${svgNodeId(model)}`, width: width, height: height, children: [_jsx("path", { d: vlinePath(minor, 0, height), strokeWidth: 1, fill: "none", ...minorProps }), _jsx("path", { d: vlinePath(major, 0, height), strokeWidth: 1, fill: "none", ...majorProps })] }));
 }

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

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

package/esm/LinearGenomeView/svgcomponents/SVGHeader.js

@@ -1,41 +1,40 @@
 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 Base1DView from '@jbrowse/core/util/Base1DViewModel';
-import { useTheme } from '@mui/material';
-import SVGRuler from "./SVGRuler.js";
-import SVGScalebar from "./SVGScalebar.js";
-import Cytobands from "../components/Cytobands.js";
-import OverviewScalebarPolygon from "../components/OverviewScalebarPolygon.js";
-import { HEADER_OVERVIEW_HEIGHT } from "../consts.js";
-export default function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight, }) {
-    const { width, assemblyNames, showCytobands, displayedRegions } = model;
-    const { assemblyManager } = getSession(model);
-    const assemblyName = assemblyNames.length > 1 ? '' : assemblyNames[0];
-    const assembly = assemblyManager.get(assemblyName);
-    const theme = useTheme();
-    const c = stripAlpha(theme.palette.text.primary);
-    const overview = Base1DView.create({
-        displayedRegions: JSON.parse(JSON.stringify(displayedRegions)),
-        interRegionPaddingWidth: 0,
-        minimumBlockWidth: model.minimumBlockWidth,
+import { createOverviewLayout, getOverviewRegionPxSpan, } from '@jbrowse/core/util/Base1DUtils';
+import calculateDynamicBlocks from '@jbrowse/core/util/calculateDynamicBlocks';
+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';
+// "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, y, }) {
+    const { width, displayedRegions, minimumBlockWidth, bpPerPx } = model;
+    const overview = createOverviewLayout({
+        displayedRegions,
+        width,
+        minimumBlockWidth,
     });
-    const visibleRegions = model.dynamicBlocks.contentBlocks;
-    if (!visibleRegions.length) {
+    const block = calculateDynamicBlocks(overview).contentBlocks[0];
+    // same span the polygon below draws its top edge from, so the rectangle and
+    // the trapezoid under it always cover the same regions
+    const span = getOverviewRegionPxSpan({
+        overview,
+        bpPerPx,
+        blocks: model.dynamicBlocks.blocks,
+    });
+    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, 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;
     }
-    overview.setVolatileWidth(width);
-    overview.showAllRegions();
-    const block = overview.dynamicBlocks.contentBlocks[0];
-    const first = visibleRegions.at(0);
-    const last = visibleRegions.at(-1);
-    const firstOverviewPx = overview.bpToPx({
-        ...first,
-        coord: first.reversed ? first.end : first.start,
-    }) || 0;
-    const lastOverviewPx = overview.bpToPx({
-        ...last,
-        coord: last.reversed ? last.start : last.end,
-    }) || 0;
-    const y = +showCytobands * cytobandHeight;
-    return (_jsxs("g", { id: "header", children: [_jsx("text", { x: 0, y: 0, dominantBaseline: "hanging", fontSize: fontSize, fill: c, children: assemblyName }), showCytobands ? (_jsxs("g", { transform: `translate(0 ${rulerHeight})`, children: [_jsx(Cytobands, { overview: overview, assembly: assembly, block: block }), _jsx("rect", { stroke: "red", fill: "rgb(255,0,0)", fillOpacity: 0.1, width: Math.max(lastOverviewPx - firstOverviewPx, 0.5), height: HEADER_OVERVIEW_HEIGHT - 1, x: firstOverviewPx, y: 0.5 }), _jsx("g", { transform: `translate(0,${HEADER_OVERVIEW_HEIGHT})`, children: _jsx(OverviewScalebarPolygon, { overview: overview, model: model, useOffset: false }) })] })) : null, _jsx("g", { transform: `translate(0 ${fontSize + y})`, children: _jsx(SVGScalebar, { model: model, fontSize: fontSize }) }), _jsx("g", { transform: `translate(0 ${rulerHeight + y})`, children: _jsx(SVGRuler, { model: model, fontSize: fontSize }) })] }));
+    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.d.ts

@@ -0,0 +1,5 @@
+import type { LinearGenomeViewModel } from '../index.ts';
+export default function SVGHighlights({ model, height, }: {
+    model: LinearGenomeViewModel;
+    height: number;
+}): (import("react").JSX.Element | null)[] | null;

package/esm/LinearGenomeView/svgcomponents/SVGHighlights.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyleTheme } from '@jbrowse/core/ui/PaletteContext';
+import { getSession } from '@jbrowse/core/util';
+import SVGHighlightBand from '../components/SVGHighlightBand.js';
+import { getHighlightColor, highlightKey } from '../components/util.js';
+// 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
+// its snapshot, which stops a parent render from advancing the drawing — but a
+// `memo` cannot stop an observer inside it from re-rendering itself, and an
+// observer here reads `getHighlightCoords`, i.e. `offsetPx`. A pan then slid the
+// bands across track bodies that were still drawn where the snapshot left them.
+// 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 = 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: session.highlightLabelsVisible ? h.label : undefined, labelColor: theme.palette.text.primary }, highlightKey(h, idx))) : null;
+        })
+        : null;
+}

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

@@ -0,0 +1,5 @@
+import type { LinearGenomeViewModel } from '../index.ts';
+export default function SVGHighlightsOverlay({ model, tracksHeight, }: {
+    model: LinearGenomeViewModel;
+    tracksHeight: number;
+}): import("react").JSX.Element;

package/esm/LinearGenomeView/svgcomponents/SVGHighlightsOverlay.js

@@ -0,0 +1,13 @@
+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 { 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: 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.d.ts

@@ -2,6 +2,4 @@ import type { LinearGenomeViewModel } from '../index.ts';
 import type { ExportSvgOptions } from '../types.ts';
 type LGV = LinearGenomeViewModel;
 export declare function renderToSvg(model: LGV, opts: ExportSvgOptions): Promise<string>;
-export { default as SVGGridlines } from './SVGGridlines.tsx';
-export { default as SVGRuler } from './SVGRuler.tsx';
-export { default as SVGTracks } from './SVGTracks.tsx';
+export {};

package/esm/LinearGenomeView/svgcomponents/SVGLinearGenomeView.js

@@ -1,45 +1,77 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createJBrowseTheme } from '@jbrowse/core/ui';
-import { getSession, max, measureText, renderToStaticMarkup, } from '@jbrowse/core/util';
-import { getTrackName } from '@jbrowse/core/util/tracks';
-import { ThemeProvider } from '@mui/material';
-import { when } from 'mobx';
-import { isReadyOrHasError } from "../svgExportUtil.js";
-import SVGBackground from "./SVGBackground.js";
-import SVGGridlines from "./SVGGridlines.js";
-import SVGHeader from "./SVGHeader.js";
-import SVGTracks from "./SVGTracks.js";
-import { totalHeight } from "./util.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { exportMargin } from '@jbrowse/core/svg/constants';
+import { 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 SVGHeader from './SVGHeader.js';
+import SVGView from './SVGView.js';
+import { renderViewTracks } from './renderViewTracks.js';
+import { defaultTextHeight, getHeaderLayout, trackLabelLeftOffset, } from './util.js';
 export async function renderToSvg(model, opts) {
-    await when(() => model.initialized);
-    const { textHeight = 18, headerHeight = 40, rulerHeight = 50, fontSize = 13, cytobandHeight = 100, trackLabels = 'offset', themeName = 'default', showGridlines = false, Wrapper = ({ children }) => children, } = opts;
+    await awaitViewInitialized(model);
+    // `initialized` only answers "have the assemblies loaded" — navigating is the
+    // second async step, so an initialized view can still hold no regions: one
+    // sitting on its import form, or one a `clearView` emptied. There is no
+    // ruler, no scalebar and no track content to draw there, and the export used
+    // to save the header's reserved height as a blank themed rectangle. Say why
+    // instead, which the dialog shows as an error banner and a headless caller
+    // (jbrowse-img) gets as a nonzero exit rather than a blank image. Same guard,
+    // and the same reason, as the circular view's import-form export.
+    if (!model.hasDisplayedRegions) {
+        throw new Error('Cannot export: no regions are displayed');
+    }
+    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, fontFamily, showGridlines = false, Wrapper, } = opts;
     const session = getSession(model);
-    const { allThemes } = session;
-    const theme = allThemes?.()[themeName];
-    const jbrowseTheme = createJBrowseTheme(theme);
-    const { width, pinnedTracks, unpinnedTracks, tracks, showCytobands } = model;
-    const shift = 50;
-    const c = +showCytobands * cytobandHeight;
-    const offset = headerHeight + rulerHeight + c + 10;
-    const height = totalHeight(tracks, textHeight, trackLabels) + offset + 100;
-    const legendWidth = max([...pinnedTracks, ...unpinnedTracks].map(track => {
-        const display = track.displays[0];
-        return display?.svgLegendWidth?.(jbrowseTheme) ?? 0;
-    }), 0);
-    const displayResults = await Promise.all([...pinnedTracks, ...unpinnedTracks].map(async (track) => {
-        const display = track.displays[0];
-        await when(() => isReadyOrHasError(display));
-        return {
-            track,
-            result: await display.renderSvg({ ...opts, theme, legendWidth }),
-        };
-    }));
-    const trackLabelMaxLen = max(tracks.map(t => measureText(getTrackName(t.configuration, session), fontSize)), 0) + 40;
-    const trackLabelOffset = trackLabels === 'left' ? trackLabelMaxLen : 0;
+    const theme = session.getActiveThemeOptions?.(themeName);
+    // owns the two orderings this used to spell out by hand: legendWidth before
+    // the awaits, tracksHeight after them. Every display's `renderSvg` owns its
+    // 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);
+    // 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 headerLayout = getHeaderLayout({
+        fontSize,
+        showCytobands: effectiveShowCytobands,
+        rulerHeight,
+    });
+    const { tracksTop } = headerLayout;
+    const trackLabelOffset = trackLabelLeftOffset({
+        tracks,
+        trackLabels,
+        fontSize,
+        fontFamily,
+        session,
+    });
     const w = width + trackLabelOffset + legendWidth;
-    const tracksHeight = totalHeight(tracks, textHeight, trackLabels);
-    return renderToStaticMarkup(_jsx(ThemeProvider, { theme: createJBrowseTheme(theme), children: _jsx(Wrapper, { children: _jsxs("svg", { width: w, height: height, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, w + shift * 2, height].toString(), children: [_jsx(SVGBackground, { width: w, height: height, shift: shift }), _jsxs("g", { transform: `translate(${shift} 0)`, children: [_jsx("g", { transform: `translate(${trackLabelOffset})`, children: _jsx(SVGHeader, { model: model, fontSize: fontSize, rulerHeight: rulerHeight, cytobandHeight: cytobandHeight }) }), showGridlines ? (_jsx("g", { transform: `translate(${trackLabelOffset} ${offset})`, children: _jsx(SVGGridlines, { model: model, height: tracksHeight }) })) : null, _jsx("g", { transform: `translate(0 ${offset})`, children: _jsx(SVGTracks, { textHeight: textHeight, fontSize: fontSize, model: model, displayResults: displayResults, trackLabels: trackLabels, trackLabelOffset: trackLabelOffset }) })] })] }) }) }));
+    // the xlink namespace is used for rendering <image> tag
+    return wrapSvgExport({
+        theme,
+        width: w,
+        height: tracksTop + tracksHeight + 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, layout: headerLayout, showCytobands: effectiveShowCytobands }), fontSize: fontSize, textHeight: textHeight, trackLabels: trackLabels, trackLabelOffset: trackLabelOffset, contentTop: tracksTop, tracksHeight: tracksHeight, showGridlines: showGridlines, leftBuffer: exportMargin, legendWidth: legendWidth }) })),
+    });
 }
-export { default as SVGGridlines } from "./SVGGridlines.js";
-export { default as SVGRuler } from "./SVGRuler.js";
-export { default as SVGTracks } from "./SVGTracks.js";

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

@@ -3,5 +3,5 @@ type LGV = LinearGenomeViewModel;
 export default function SVGRegionSeparators({ model, height, }: {
     height: number;
     model: LGV;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export {};

package/esm/LinearGenomeView/svgcomponents/SVGRegionSeparators.js

@@ -1,5 +1,22 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+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).
+// Keyed off isRightEndOfDisplayedRegion like PaddingBlocks, so the bar at the
+// last region's right edge isn't dropped.
+//
+// The seam is ALL of PaddingBlocks this draws, which is why it walks
+// dynamicBlocks itself rather than reading `model.paddingSpans` like the
+// on-screen component. The other two span kinds are chrome for an interactive
+// row, not information a figure carries: `elided`'s striped grey says "regions
+// here are too narrow to draw", which in a static image is noise, and at
+// whole-genome zoom it is most of the row. Don't put this on paddingSpans to
+// close the "divergence".
 export default function SVGRegionSeparators({ model, height, }) {
-    const { dynamicBlocks, offsetPx, interRegionPaddingWidth } = model;
-    return (_jsx(_Fragment, { children: dynamicBlocks.contentBlocks.slice(1).map(block => (_jsx("rect", { x: block.offsetPx - offsetPx - interRegionPaddingWidth, width: interRegionPaddingWidth, y: 0, height: height, fill: "grey" }, block.key))) }));
+    const { dynamicBlocks, offsetPx } = model;
+    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.d.ts

@@ -0,0 +1,8 @@
+import type { LinearGenomeViewModel } from '../index.ts';
+export default function SVGRowHeader({ view, fontSize, rulerHeight, showAssemblyName, showScalebar, }: {
+    view: LinearGenomeViewModel;
+    fontSize: number;
+    rulerHeight: number;
+    showAssemblyName?: boolean;
+    showScalebar?: boolean;
+}): import("react").JSX.Element;

package/esm/LinearGenomeView/svgcomponents/SVGRowHeader.js

@@ -0,0 +1,36 @@
+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 SVGRuler from './SVGRuler.js';
+import SVGScalebar from './SVGScalebar.js';
+import { getRowHeaderLayout } from './util.js';
+// The compact header a *stacked* export gives each of its rows: the assembly
+// name, optionally the total-bp scalebar, and the ruler. The standalone LGV
+// export fills the same slot in SVGView with SVGHeader, which additionally
+// 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, 
+// 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
+// because each row is a different genome. A breakpoint split view is usually
+// one assembly seen at several loci, and there the name is the same string
+// printed once per panel, so that caller passes false on every row after the
+// first whose assembly matches the row above it. The reserved band above the
+// ruler is unchanged either way: it is the caller's offset, not this
+// component's.
+showAssemblyName = true, 
+// Whether this row draws the capped bar labelled with its span. Off by
+// default, since it costs `getRowHeaderLayout().bandHeight` of the caller's
+// band and every caller has to reserve that much before asking for it. See
+// getRowHeaderLayout for what it is for.
+showScalebar = false, }) {
+    const palette = usePalette();
+    const { assemblyLabelBaselineY, scalebarLineY } = getRowHeaderLayout({
+        fontSize,
+        showScalebar,
+    });
+    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.d.ts

@@ -1,7 +1,7 @@
 import type { LinearGenomeViewModel } from '../index.ts';
 type LGV = LinearGenomeViewModel;
-export default function SVGRuler({ model, fontSize, }: {
+export default function SVGRuler({ model, rulerHeight, }: {
     model: LGV;
-    fontSize: number;
-}): import("react/jsx-runtime").JSX.Element;
+    rulerHeight: number;
+}): import("react").JSX.Element;
 export {};