@jbrowse/plugin-linear-genome-view 5.0.0-beta.13 → 5.0.0-beta.16

package/esm/LinearGenomeView/model.js

@@ -1,14 +1,13 @@
-import { lazy } from 'react';
+import { canonicalLocString } from '@jbrowse/core/TextSearch/places';
 import { getConf } from '@jbrowse/core/configuration';
 import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
 import { exportViewSvg } from '@jbrowse/core/svg/exportViewSvg';
-import { assembleLocString, clamp, getBpDisplayStr, getDialogHost, getSession, getTickDisplayStr, isSessionModelWithWidgets, localStorageGetBoolean, localStorageGetItem, springAnimate, sum, } from '@jbrowse/core/util';
+import { assembleLocString, clamp, getBpDisplayStr, getNotificationSink, getSession, isSessionModelWithWidgets, localStorageGetBoolean, localStorageGetItem, localStorageSetBoolean, localStorageSetItem, springAnimate, sum, } from '@jbrowse/core/util';
 import { bpToLinearBp, bpToPx, computeMoveToLayout, createOverviewLayout, getLayoutHighlightCoords, getOverviewRegionPxSpan, moveTo, pxToBp, } from '@jbrowse/core/util/Base1DUtils';
 import { scaleBandHeights } from '@jbrowse/core/util/bandHeight';
 import { wholeBaseRegions } from '@jbrowse/core/util/blockTypes';
 import calculateDynamicBlocks from '@jbrowse/core/util/calculateDynamicBlocks';
 import calculateStaticBlocks from '@jbrowse/core/util/calculateStaticBlocks';
-import { tickLabelsWorthDrawing } from '@jbrowse/core/util/tickLabels';
 import { hideTrackGeneric, launchToggleTrackGeneric, launchTrackGeneric, showTrackGeneric, toggleTrackGeneric, } from '@jbrowse/core/util/tracks';
 import { ElementId } from '@jbrowse/core/util/types/mst';
 import { highlightsOnAssemblies } from '@jbrowse/core/util/viewHighlights';
@@ -18,7 +17,7 @@ import { MIN_DISPLAY_HEIGHT } from '@jbrowse/display-kit/const';
 import { contentRightEdgePx } from '@jbrowse/display-kit/regionHost';
 import { cast, getParent, hasParent, isAlive, types, } from '@jbrowse/mobx-state-tree';
 import { observable, when } from 'mobx';
-import { handleSelectedRegion, navToOption } from '../searchUtils.js';
+import { handleSelectedRegion, isOpenInView, navToOption, } from '../searchUtils.js';
 import { doAfterAttach } from './afterAttach.js';
 import { getCytobands, shouldSwapTracks } from './components/util.js';
 import { HEADER_BAR_HEIGHT, HEADER_OVERVIEW_HEIGHT, MIN_BP_PER_PX, MINIMIZED_TRACK_HEIGHT, MINIMUM_BLOCK_WIDTH, RESIZE_ALL_HANDLE_HEIGHT, RESIZE_HANDLE_HEIGHT, SCALE_BAR_HEIGHT, SHOW_ALL_REGIONS_FILL, TRACK_OUTLINE_BORDER, TRACK_TOP_GAP, } from './consts.js';
@@ -27,13 +26,7 @@ import { setupKeyboardHandler } from './keyboardHandler.js';
 import { lgvLaunchKeys } from './launchKeys.js';
 import { buildHighlightsSubMenuItems, buildMenuItems, buildRubberBandMenuItems, buildRubberbandClickMenuItems, } from './menuItems.js';
 import { sharedScaleContainerOf } from './sharedScaleContainer.js';
-import { calculateVisibleLocStrings, cytobandLabelGutterWidth, expandRegion, fitAllRegionsWindow, generateLocations, getScalebarRefNameLabels, regionsOrientation, groupContiguousBlocks, labelFitsInBlock, makeBlockTicks, runRefNameLabelPx, setDisplayedRegionsKeepingCenter, tickLabelWidth, } from './util.js';
-// lazies
-const SearchResultsDialog = lazy(() => import('./components/SearchResultsDialog.js'));
-// The one array `paddingSpans` returns when a view has nothing to mask, so that
-// computed's value repeats by identity. Frozen because every consumer maps over
-// it and a caller that sorted in place would do so for the whole session.
-const NO_PADDING_SPANS = Object.freeze([]);
+import { calculateVisibleLocStrings, cytobandLabelGutterWidth, expandRegion, fitAllRegionsWindow, generateLocations, getGridlineTicks, getPaddingSpans, getScalebarLabels, getScalebarRefNameLabels, regionsOrientation, setDisplayedRegionsKeepingCenter, } from './util.js';
 /**
  * Calculate the offsetPx needed to center content within a viewport.
  * Returns a negative offset when content is smaller than viewport (padding on left).
@@ -60,13 +53,18 @@ function canonicalHighlight(self, region) {
 // bpPerPx deltas smaller than this are treated as no zoom change, avoiding
 // pointless offset re-anchoring on micro-steps
 const BP_PER_PX_EPSILON = 0.000001;
-// px of the rightmost content kept on-screen at max scroll-right, so the genome
-// can't be scrolled entirely off the left edge. Shared by maxOffset and
-// getSelectedRegions' clamp so the two bounds can't drift apart.
-const MAX_OFFSET_PADDING_PX = 10;
-// px of the leftmost content kept on-screen at max scroll-left, mirroring
-// MAX_OFFSET_PADDING_PX at the other end
-const MIN_OFFSET_PADDING_PX = 30;
+// px of blank space a view may scroll past either end of its regions, enough to
+// read as an edge and too little to lose the content
+const OVERSCROLL_PX = 100;
+// The offsets a view can scroll to: the content edge to edge plus a little
+// overscroll. Content narrower than the view collapses the range to the
+// centered offset, which is what `showAllRegions` and `fitAllRegions` ask for.
+function offsetBounds(contentPx, viewportPx) {
+    const centered = getCenteredOffsetPx(contentPx, viewportPx);
+    return contentPx > viewportPx
+        ? { min: -OVERSCROLL_PX, max: contentPx - viewportPx + OVERSCROLL_PX }
+        : { min: centered, max: centered };
+}
 // whether two BlockSets cover the same blocks, by key and in order
 function sameBlockKeys(a, b) {
     return (a.blocks.length === b.blocks.length &&
@@ -143,6 +141,8 @@ function isTrackSelectorVisible(self) {
 /**
  * #stateModel LinearGenomeView
  * #category view
+ * Stacks tracks under a horizontal axis of one or more genomic regions laid
+ * end to end, which the user scrolls, zooms and searches.
  *
  * #example
  * A `LinearGenomeView` is what you hand-author under `defaultSession.views`, and
@@ -192,17 +192,16 @@ export function stateModelFactory(pluginManager) {
         /**
          * #property
          * Left edge of the viewport, in linearized bp — the concatenated
-         * `displayedRegions` space that `offsetPx` indexes, which carries no
+         * `displayedRegions` space that `offsetPx` indexes, which has no
          * inter-region padding, so the two differ only by `bpPerPx`. May be
-         * negative, which is the view scrolled past the left end.
+         * negative when the view is scrolled past the left end.
          *
-         * The viewport is stored as the genomic WINDOW it frames rather than as
-         * the pixels that framed it, because pixels mean nothing without the
-         * width they were measured at and a snapshot does not carry one. Storing
-         * them anyway is why a session authored in a 1000px window used to open
-         * at 500px showing half the region its author was looking at, while the
-         * same location as a `&loc=` opened correctly — the two ways to share a
-         * view disagreed, and only the one that stores intent was right.
+         * The view stores the genomic window it frames rather than the pixels
+         * that framed it, because pixels mean nothing without the width they
+         * were measured at and a snapshot does not include one. A session
+         * authored in a 1000px window therefore shows the same region when
+         * opened at 500px, as the same location given as a `&loc=` does: both
+         * ways to share a view store intent.
          */
         windowStartBp: types.stripDefault(types.number, 0),
         /**
@@ -215,14 +214,15 @@ export function stateModelFactory(pluginManager) {
         windowWidthBp: types.stripDefault(types.number, 0),
         /**
          * #property
-         * MIGRATION ONLY, and permanent: share links written before the window
-         * was stored carry `bpPerPx`/`offsetPx`, and there are many of them.
+         * Used for migration only, and permanent: share links written before the
+         * window was stored contain `bpPerPx`/`offsetPx`, and there are many of
+         * them.
          *
-         * A snapshot written before the window was stored carries `offsetPx` and
+         * A snapshot written before the window was stored has `offsetPx` and
          * `bpPerPx` but not the width they were measured at, so the window they
          * framed cannot be recovered. `windowStartBp` can (it is
          * `offsetPx * bpPerPx`, no width needed); the width in bp cannot. This
-         * carries the old `bpPerPx` to the first measure, which adopts it at
+         * property holds the old `bpPerPx` until the first measure, which adopts it at
          * whatever width arrives — exactly what the old code did — and clears
          * this. So an old link keeps its old behavior rather than being
          * reinterpreted, and everything authored since restores its window.
@@ -231,9 +231,8 @@ export function stateModelFactory(pluginManager) {
         /**
          * #property
          * currently displayed regions, can be a single chromosome, arbitrary
-         * subsections, or the entire  set of chromosomes in the genome, but it not
-         * advised to use the entire set of chromosomes if your assembly is very
-         * fragmented
+         * subsections, or the entire set of chromosomes in the genome. The entire
+         * set is not advised if your assembly is very fragmented
          */
         displayedRegions: types.stripDefault(types.frozen(), []),
         /**
@@ -267,7 +266,10 @@ export function stateModelFactory(pluginManager) {
         trackSelectorType: types.stripDefault(types.enumeration(['hierarchical']), 'hierarchical'),
         /**
          * #property
-         * show the "center line"
+         * show the "center line". A personal preference: never in a session
+         * snapshot. It, showCytobands, trackLabels, colorByCDS, showAminoAcids
+         * and showTrackOutlines start from this browser's last choice, which
+         * their setters record.
          */
         showCenterLine: types.optional(types.boolean, () => localStorageGetBoolean('lgv-showCenterLine', false)),
         /**
@@ -280,11 +282,11 @@ export function stateModelFactory(pluginManager) {
         /**
          * #property
          * how to display the track labels, can be "overlapping", "offset", or
-         * "hidden", or empty string "" (which results in the
-         * LinearGenomeViewPlugin config default being used). the resolved value
-         * is the `effectiveTrackLabels` getter. see LinearGenomeViewPlugin
-         * https://jbrowse.org/jb2/docs/config/lineargenomeviewconfigschema/ docs for
-         * how conf is used
+         * "hidden", or empty string "" (which uses the LinearGenomeViewPlugin
+         * config default). The resolved value is the `effectiveTrackLabels`
+         * getter. See the LinearGenomeViewPlugin docs at
+         * https://jbrowse.org/jb2/docs/config/lineargenomeviewconfigschema/ for
+         * how the config is used
          */
         trackLabels: types.optional(types.string, () => localStorageGetItem('lgv-trackLabels') ?? ''),
         /**
@@ -355,6 +357,12 @@ export function stateModelFactory(pluginManager) {
              * #volatile
              */
             draggingTrackId: undefined,
+            /**
+             * #volatile
+             * Set by a search whose hits name more than one place, until the user
+             * picks one or closes it.
+             */
+            searchPicker: undefined,
             /**
              * #volatile
              */
@@ -650,8 +658,8 @@ export function stateModelFactory(pluginManager) {
         },
         /**
          * #getter
-         * What the loading screen says while `showLoading`, read off the
-         * assembly whose load is the wait; undefined otherwise.
+         * The loading screen's text while `showLoading`, taken from the
+         * assembly being waited on; undefined otherwise.
          */
         get loading() {
             return viewLoading(this.showLoading, () => this.loadingAssembly);
@@ -705,12 +713,12 @@ export function stateModelFactory(pluginManager) {
          * `width`/`staticBlocks` throw by design before the view has been
          * measured and navigated.
          *
-         * **Not `initialized`**, which is the trap this getter exists to close.
+         * Use this getter rather than `initialized`.
          * That one answers "have the assembly's regions loaded", which is only
          * the first of two async steps: navigating then populates
          * `displayedRegions`, and in the window between the two `initialized` is
          * already true while there is still nothing on screen. `showLoading`
-         * folds in `awaitingInitNavigation`, the getter that exists for exactly
+         * folds in `awaitingInitNavigation`, the getter for exactly
          * that gap.
          *
          * `error` is the third outcome and is why this is not a bare
@@ -787,7 +795,7 @@ export function stateModelFactory(pluginManager) {
         },
         /**
          * #method
-         * rendered height of a single track, collapsing to a fixed height when
+         * rendered height of a single track, using a fixed height when
          * minimized. Shared by trackHeights and getTrackYOffset so the two can't
          * disagree. Reads `activeDisplay` — the display TrackContainer actually
          * mounts — rather than re-picking `displays[0]`, so the view's height math
@@ -917,8 +925,8 @@ export function stateModelFactory(pluginManager) {
          * or 0 for a standalone view, a mode that is off, and a stack that cannot
          * answer yet.
          *
-         * Pulled rather than pushed down into a volatile: the number is a
-         * function of every row's fit, all of which move on a resize, and a
+         * A getter rather than a volatile the container writes: the number is a
+         * function of every row's fit, all of which change on a resize, and a
          * stored copy would be stale by the next layout.
          */
         get sharedFitBpPerPx() {
@@ -967,15 +975,13 @@ export function stateModelFactory(pluginManager) {
          * #getter
          */
         get maxOffset() {
-            // objectively determined to keep the linear genome on the main screen
-            return this.displayedRegionsTotalPx - MAX_OFFSET_PADDING_PX;
+            return offsetBounds(this.displayedRegionsTotalPx, self.width).max;
         },
         /**
          * #getter
          */
         get minOffset() {
-            // objectively determined to keep the linear genome on the main screen
-            return -self.width + MIN_OFFSET_PADDING_PX;
+            return offsetBounds(this.displayedRegionsTotalPx, self.width).min;
         },
         /**
          * #getter
@@ -1020,6 +1026,15 @@ export function stateModelFactory(pluginManager) {
         getActiveDisplayId(trackId) {
             return this.getTrack(trackId)?.activeDisplay.configuration.displayId;
         },
+    }))
+        .actions(self => ({
+        /**
+         * #action
+         * Dismiss the search picker without choosing a place.
+         */
+        closeSearchPicker() {
+            self.searchPicker = undefined;
+        },
     }))
         .actions(self => ({
         /**
@@ -1027,6 +1042,7 @@ export function stateModelFactory(pluginManager) {
          */
         setShowTrackOutlines(arg) {
             self.showTrackOutlines = arg;
+            localStorageSetBoolean('lgv-showTrackOutlines', arg);
         },
         /**
          * #action
@@ -1039,18 +1055,21 @@ export function stateModelFactory(pluginManager) {
          */
         setColorByCDS(flag) {
             self.colorByCDS = flag;
+            localStorageSetBoolean('lgv-colorByCDS', flag);
         },
         /**
          * #action
          */
         setShowAminoAcids(flag) {
             self.showAminoAcids = flag;
+            localStorageSetBoolean('lgv-showAminoAcids', flag);
         },
         /**
          * #action
          */
         setShowCytobands(flag) {
             self.showCytobands = flag;
+            localStorageSetBoolean('lgv-showCytobands', flag);
         },
         /**
          * #action
@@ -1236,17 +1255,46 @@ export function stateModelFactory(pluginManager) {
             model: self,
             assemblyName,
         })) {
-            getDialogHost(self).queueDialog(handleClose => [
-                SearchResultsDialog,
-                {
-                    model: self,
-                    searchResults,
-                    searchQuery,
-                    handleClose,
-                    assemblyName,
-                    onPick,
+            const session = getSession(self);
+            const assembly = session.assemblyManager.get(assemblyName);
+            const ordered = [...searchResults].sort((a, b) => Number(isOpenInView(b, self)) -
+                Number(isOpenInView(a, self)));
+            const picker = {
+                query: searchQuery,
+                assemblyName,
+                rows: ordered.map(result => {
+                    const location = result.getLocation() ?? '';
+                    const trackId = result.getTrackId();
+                    return {
+                        id: result.getId(),
+                        label: result.getLabel(),
+                        location: assembly && location
+                            ? canonicalLocString(location, assembly)
+                            : location,
+                        trackName: trackId
+                            ? (session.getTrackById(trackId)?.name ?? '')
+                            : '',
+                    };
+                }),
+                pick: async (id) => {
+                    const picked = ordered.find(result => result.getId() === id);
+                    try {
+                        if (picked) {
+                            await onPick(picked);
+                        }
+                    }
+                    catch (e) {
+                        console.error(e);
+                        if (isAlive(self)) {
+                            getNotificationSink(self).notifyError(`${e}`, e);
+                        }
+                    }
+                    if (isAlive(self) && self.searchPicker === picker) {
+                        self.closeSearchPicker();
+                    }
                 },
-            ]);
+            };
+            self.searchPicker = picker;
         },
         /**
          * #action
@@ -1372,12 +1420,14 @@ export function stateModelFactory(pluginManager) {
          */
         setTrackLabels(setting) {
             self.trackLabels = setting;
+            localStorageSetItem('lgv-trackLabels', setting);
         },
         /**
          * #action
          */
         setShowCenterLine(b) {
             self.showCenterLine = b;
+            localStorageSetBoolean('lgv-showCenterLine', b);
         },
         /**
          * #action
@@ -1403,7 +1453,7 @@ export function stateModelFactory(pluginManager) {
         /**
          * #method
          * Helper method for the fetchSequence.
-         * Retrieves the corresponding regions that were selected by the
+         * Returns the regions the user selected with the
          * rubberband
          *
          * @param leftOffset - `object as {start, end, index, offset}`, offset = start
@@ -1426,7 +1476,8 @@ export function stateModelFactory(pluginManager) {
             const { bpPerPx, offsetPx: rawOffsetPx } = computeMoveToLayout(layout, leftOffset, rightOffset);
             // mirror Base1DView.scrollTo clamping: raw offsetPx can be far outside
             // the valid range when both offsets are oob on the same side
-            const offsetPx = clamp(rawOffsetPx, self.minOffset, self.totalBp / bpPerPx - MAX_OFFSET_PADDING_PX);
+            const { min, max } = offsetBounds(self.totalBp / bpPerPx, self.width);
+            const offsetPx = clamp(rawOffsetPx, min, max);
             return wholeBaseRegions(calculateDynamicBlocks({
                 ...layout,
                 bpPerPx,
@@ -1477,16 +1528,6 @@ export function stateModelFactory(pluginManager) {
         setLaunch(launch) {
             self.launch = launch;
         },
-        /**
-         * #method
-         * renders the view to SVG markup, which it returns; saves it through
-         * FileSaver unless `save: false`
-         */
-        // Promise<string> is stated: renderToSvg is typed against this very
-        // model, so an inferred return makes the type reference itself (TS2456)
-        async exportSvg(opts = {}) {
-            return exportViewSvg(self, opts, () => import('./svgcomponents/SVGLinearGenomeView.js'));
-        },
     }))
         .actions(self => {
         let cancelLastSlide = () => { };
@@ -1542,8 +1583,8 @@ export function stateModelFactory(pluginManager) {
         }
         /**
          * #action
-         * cancel an in-flight animated zoom. The animation already yields to any
-         * other zoom on its own, so this is for stopping it *without* changing the
+         * cancel an in-flight animated zoom. Any other zoom already stops the
+         * animation, so this is for stopping it *without* changing the
          * zoom — the slider grabbing the thumb, before it has a value to commit.
          */
         function cancelZoomAnimation() {
@@ -1571,8 +1612,8 @@ export function stateModelFactory(pluginManager) {
          * #getter
          * an ideogram only reads correctly against an entire chromosome: on a
          * sub-region it is a meaningless slice of bands, and the centromere shows
-         * up as a lone half-triangle. The chromosome needs bands of its own too:
-         * a cytoband file often lists only the main chromosomes, not chrM or the
+         * up as a lone half-triangle. The chromosome also needs bands: a cytoband
+         * file often lists only the main chromosomes, not chrM or the
          * unplaced scaffolds
          */
         get canShowCytobands() {
@@ -1584,7 +1625,7 @@ export function stateModelFactory(pluginManager) {
         /**
          * #getter
          * the `showCytobands` setting gated by whether cytobands can be shown at
-         * all (whole chromosome with bands of its own) and by the header
+         * all (whole chromosome with bands in the cytoband file) and by the header
          * overview they draw in being on, which the SVG export follows too
          */
         get effectiveShowCytobands() {
@@ -1708,9 +1749,8 @@ export function stateModelFactory(pluginManager) {
             /**
              * #getter
              * dynamic blocks represent the exact coordinates of the currently
-             * visible genome regions on the screen. they are similar to static
-             * blocks, but static blocks can go offscreen while dynamic blocks
-             * represent exactly what is on screen
+             * visible genome regions on the screen. Static blocks can go
+             * offscreen, while dynamic blocks represent exactly what is on screen
              */
             get dynamicBlocks() {
                 return calculateDynamicBlocks(self);
@@ -1752,12 +1792,10 @@ export function stateModelFactory(pluginManager) {
              * The frame exists because those three are laid out across every
              * displayed region rather than across the viewport — it overhangs on
              * both sides — so their `x` values are stable under a scroll and only
-             * this number moves. `scalebarRefNameLabels` is the exception and says
-             * so: its `transform` is already a screen x, because a sticky label's
+             * this number moves. `scalebarRefNameLabels` is the exception: its `transform` is already a screen x, because a sticky label's
              * position is a function of the scroll rather than of block geometry.
              *
-             * **The subtraction must happen here, in float64, and that is the
-             * load-bearing part.** `offsetPx` is a whole-genome pixel coordinate —
+             * **The subtraction must happen here, in float64.** `offsetPx` is a whole-genome pixel coordinate —
              * hg38 chr1 at base resolution is already past 1e10 — and a length that
              * size does not survive the trip through CSS: the transform matrix is
              * float32 by the time it reaches the compositor, where consecutive
@@ -1769,13 +1807,12 @@ export function stateModelFactory(pluginManager) {
              * assemblies at high zoom, which is not where anyone tests. Both
              * operands here are large and their difference is bounded by the
              * overhang (a block or two), so what reaches CSS is small and exact.
-             * Same rule as the GPU side, one layer up —
+             * This applies the GPU side's rule one layer up; see
              * `agent-docs/reference/BP_PRECISION.md`.
              *
              * Published because it is the one piece of coordinate arithmetic a host
              * drawing its own chrome would otherwise have to know, and because
-             * having it written out at each call site is how the two in-tree copies
-             * came to disagree about rounding. Round it where the content is text
+             * copies written out at each call site disagree about rounding. Round it where the content is text
              * (a fractional offset blurs a label); leave it alone for paths and
              * boxes.
              */
@@ -1790,21 +1827,12 @@ export function stateModelFactory(pluginManager) {
              * than recomputing the makeTicks loop per component.
              */
             get gridlineTicks() {
-                const { bpPerPx } = self;
                 const { blocks, offsetPx: firstBlockOffset } = this.staticBlocks;
-                const ticks = [];
-                // iterate merged region runs (like scalebarLabels) so a tick on an
-                // internal ~800px chunk boundary isn't emitted twice (once as a
-                // chunk's right edge, once as the next chunk's left edge)
-                for (const run of groupContiguousBlocks(blocks)) {
-                    const runLeft = run.offsetPx - firstBlockOffset;
-                    for (const { type, x } of makeBlockTicks(run, bpPerPx)) {
-                        if (x >= 0 && x <= run.widthPx) {
-                            ticks.push({ x: runLeft + x, major: type === 'major' });
-                        }
-                    }
-                }
-                return ticks;
+                return getGridlineTicks({
+                    blocks,
+                    firstBlockOffset,
+                    bpPerPx: self.bpPerPx,
+                });
             },
             /**
              * #getter
@@ -1822,33 +1850,13 @@ export function stateModelFactory(pluginManager) {
              * reads as the same number repeated across the row.
              */
             get scalebarLabels() {
-                const { bpPerPx } = self;
                 const { blocks, offsetPx: firstBlockOffset } = this.staticBlocks;
-                const labels = [];
-                const runs = groupContiguousBlocks(blocks);
-                const refNameLabelPx = runRefNameLabelPx(runs, self.displayedRegionsOrientation);
-                for (const [i, run] of runs.entries()) {
-                    const runLeft = run.offsetPx - firstBlockOffset;
-                    const runLabels = [];
-                    for (const { base, x } of makeBlockTicks(run, bpPerPx, false)) {
-                        const label = getTickDisplayStr(base + 1, bpPerPx);
-                        const w = tickLabelWidth(label);
-                        // the bold refName label pinned at the run's left edge takes
-                        // precedence, as it does on the overview scalebar
-                        if (x - w / 2 >= refNameLabelPx[i] &&
-                            labelFitsInBlock(x - w / 2, w, run.widthPx)) {
-                            runLabels.push({
-                                x: runLeft + x,
-                                label,
-                                key: `${run.offsetPx}-${base}`,
-                            });
-                        }
-                    }
-                    if (tickLabelsWorthDrawing(runLabels.length)) {
-                        labels.push(...runLabels);
-                    }
-                }
-                return labels;
+                return getScalebarLabels({
+                    blocks,
+                    firstBlockOffset,
+                    bpPerPx: self.bpPerPx,
+                    orientation: self.displayedRegionsOrientation,
+                });
             },
             /**
              * #getter
@@ -1857,11 +1865,11 @@ export function stateModelFactory(pluginManager) {
              * sticky, transform, maxWidth, paddingLeft, text}` each. One per run of
              * same-refName regions, plus a "sticky" one pinned to the viewport's
              * left edge naming the refName under it, so panning into a chromosome
-             * does not scroll its own name off the screen.
+             * does not scroll the chromosome's name off the screen.
              *
-             * Three rules live in here that a host drawing region names will
-             * otherwise rediscover the hard way, and two of them are invisible until
-             * the data is awkward:
+             * This getter applies three rules that a host drawing region names would
+             * otherwise have to rediscover, and two of them are invisible until the
+             * data is awkward:
              *
              * - the sticky label rides the rightmost run that has scrolled off the
              *   left, not the region's first block — that one is gone from
@@ -1873,7 +1881,7 @@ export function stateModelFactory(pluginManager) {
              *   is fitted to the whole run, and `displayedRegionIndex` /
              *   `lastDisplayedRegionIndex` bracket what it stands for.
              * - a name is drawn whole or not at all, measured against the space its
-             *   run leaves. Clipped to its own width, `chr16` reads as `chr1` —
+             *   run leaves. Clipped to that space, `chr16` reads as `chr1` —
              *   a different chromosome rather than a shortened name, which is why
              *   this is a fit test rather than an ellipsis.
              *
@@ -1893,7 +1901,7 @@ export function stateModelFactory(pluginManager) {
              * pins to its right edge rather than the viewport's, and the coordinate
              * numbers stay out from under it. The SVG export deliberately
              * calls `getScalebarRefNameLabels` itself with no prefix rather than
-             * reading this, since it draws its own assembly name above the ruler.
+             * reading this, since it draws the assembly name itself above the ruler.
              */
             get scalebarRefNameLabels() {
                 return getScalebarRefNameLabels({
@@ -1908,7 +1916,7 @@ export function stateModelFactory(pluginManager) {
              * Every span along the row that is not track data, as plain geometry in
              * the staticBlocks frame — the same frame as gridlineTicks and
              * scalebarLabels, so one `translateX(staticBlocksTranslateX)` places all
-             * three. A host drawing its own chrome needs all three kinds:
+             * three. A host that draws the row's chrome itself needs all three kinds:
              *
              * - `seam`: the 3px bar at a region's right edge. Displayed regions are
              *   laid out **contiguously** (calculateStaticBlocks emits boundary
@@ -1923,11 +1931,11 @@ export function stateModelFactory(pluginManager) {
              *   but the 24 chromosomes are under a pixel wide), so a host that
              *   skips them leaves that part of the row empty.
              * - `boundary`: past the start of the first region or the end of the
-             *   last. Greying it shows the last region's seam as the edge of a
+             *   last. Greying it makes the last region's seam read as the edge of a
              *   filled area, where it would otherwise look like a line in the
              *   middle of the track.
              *
-             * Elided blocks get no seam even though they carry the flag: at the
+             * Elided blocks get no seam even though they have the flag: at the
              * zoom where regions elide, one bar per region would fill the row solid
              * grey.
              *
@@ -1946,38 +1954,7 @@ export function stateModelFactory(pluginManager) {
             // cannot drift without failing here.
             get paddingSpans() {
                 const { blocks, offsetPx: firstBlockOffset } = this.staticBlocks;
-                const spans = [];
-                for (const block of blocks) {
-                    const x = block.offsetPx - firstBlockOffset;
-                    if (block.type === 'ContentBlock') {
-                        if (block.isRightEndOfDisplayedRegion) {
-                            spans.push({
-                                key: `${block.key}-sep`,
-                                x: x + block.widthPx - 1,
-                                width: 3,
-                                kind: 'seam',
-                            });
-                        }
-                    }
-                    else {
-                        spans.push({
-                            key: block.key,
-                            x,
-                            width: block.widthPx,
-                            kind: block.type === 'ElidedBlock'
-                                ? 'elided'
-                                : 'boundary',
-                        });
-                    }
-                }
-                // One shared array when there is nothing to draw, so the computed's
-                // value repeats and MobX's `===` stops the chain here. This is the
-                // COMMON case, not an edge one: a view sitting inside one contig has
-                // no region seam, no elision and no boundary, and that is where a
-                // reader spends nearly all of a session. A fresh `[]` each frame
-                // instead re-rendered a PaddingBlocks per track plus one for the
-                // container, every frame of every gesture, to draw nothing.
-                return spans.length > 0 ? spans : NO_PADDING_SPANS;
+                return getPaddingSpans(blocks, firstBlockOffset);
             },
             /**
              * #getter
@@ -2050,7 +2027,7 @@ export function stateModelFactory(pluginManager) {
             /**
              * #getter
              * Right edge (px, viewport-relative) of the on-screen content, clamped
-             * to the track — where a right-pinned overlay such as a wiggle's colour
+             * to the track — where a right-pinned overlay such as a wiggle's color
              * or score legend belongs, rather than out in the empty gutter the
              * regions can leave at whole-genome zoom. `@jbrowse/display-kit`'s
              * `contentRightEdgePx` states the rule; an SVG export applies the same
@@ -2060,7 +2037,7 @@ export function stateModelFactory(pluginManager) {
              * array of fresh objects on every pan and zoom frame, so a component
              * that derived this number itself re-rendered on every frame of every
              * gesture — to produce, whenever content fills the track, the unchanged
-             * `trackWidthPx`. Reading the scalar lets MobX's `===` stop the chain at
+             * `trackWidthPx`. A component that reads the scalar lets MobX's `===` stop the chain at
              * this computed instead. Measured over 20 zoom frames: the wiggle
              * family's three body instances fell from 66 renders to 7.
              */
@@ -2199,17 +2176,16 @@ export function stateModelFactory(pluginManager) {
          * as a navigation that didn't happen, and wiggle's autoscale domain is
          * computed over the window the user just left — measured at `[0,200]`
          * against a correct `[0,300]` when a 40bp coarse window survived a jump to
-         * 4040bp on screen. Only the per-region fetch moving to the leading edge
-         * made that reachable: at 600ms the data never landed inside the hole.
+         * 4040bp on screen.
          *
-         * **The continuous paths deliberately do not come through here.** The
+         * **The continuous paths do not call this.** The
          * spring zoom writes through `zoomTo` per frame and a drag through
          * `scrollTo`, so this adds no per-frame work; the settle is idempotent
          * (`setCoarseDynamicBlocks` compares block keys), so the debounced
-         * autorun's own follow-up run costs nothing.
+         * autorun's follow-up run costs nothing.
          *
-         * Every placer calls it, and `placersSettleCoarseBlocks.test.ts` is what
-         * makes that true of the next one — it scans this file for the writes and
+         * Every placer calls it, and `placersSettleCoarseBlocks.test.ts` enforces
+         * that for the next one: it scans this file for the writes and
          * fails on a placer that reaches neither the settle nor its named list of
          * continuous paths. Two passes by hand missed four.
          */
@@ -2219,6 +2195,42 @@ export function stateModelFactory(pluginManager) {
             }
         },
     }))
+        .actions(self => {
+        function layOutAt(width) {
+            self.setWidth(width);
+            self.settleCoarseBlocks();
+        }
+        return {
+            /**
+             * #method
+             * renders the view to SVG markup, which it returns; saves it through
+             * FileSaver unless `save: false`. A `viewWidth` lays the view out at
+             * that many pixels for the export, as a window that wide would, and
+             * puts the on-screen width back after.
+             */
+            // Promise<string> is stated: renderToSvg is typed against this very
+            // model, so an inferred return makes the type reference itself (TS2456)
+            async exportSvg(opts = {}) {
+                const { width } = self;
+                const { viewWidth = width } = opts;
+                // The on-screen tracks redraw at `viewWidth` until the export ends. A
+                // hidden copy of the view would keep them still, but it needs a
+                // session slot that autosave and undo skip, and new ids for the view,
+                // its tracks and displays, since widgets find them by id.
+                if (viewWidth !== width) {
+                    layOutAt(viewWidth);
+                }
+                try {
+                    return await exportViewSvg(self, opts, () => import('./svgcomponents/SVGLinearGenomeView.js'));
+                }
+                finally {
+                    if (viewWidth !== width) {
+                        layOutAt(width);
+                    }
+                }
+            },
+        };
+    })
         .actions(self => ({
         /**
          * #action
@@ -2234,8 +2246,8 @@ export function stateModelFactory(pluginManager) {
         },
         /**
          * #action
-         * Place the viewport by the pair of PIXEL quantities it used to be stored
-         * as. Prefer `setWindow`: pixels mean nothing without the width they were
+         * Place the viewport by `bpPerPx` and `offsetPx`, the pixel pair the view
+         * stored before it stored the window. Prefer `setWindow`: pixels mean nothing without the width they were
          * measured at, so a round trip through here is only exact while the width
          * holds still. Kept for callers that genuinely have pixels — a wheel
          * gesture, a rubberband.
@@ -2248,7 +2260,7 @@ export function stateModelFactory(pluginManager) {
         /**
          * #action
          * Place the viewport by the pair it is actually STORED as: the window's
-         * width and left edge, both in bp. `setNewView`'s bp-space twin, and the
+         * width and left edge, both in bp. The bp-space counterpart of `setNewView`, and the
          * right one for anything that captures a viewport and puts it back later
          * (an Undo, a saved location) — those two moments can be a window resize
          * apart, and this pair survives one where a pixel pair does not.
@@ -2278,8 +2290,8 @@ export function stateModelFactory(pluginManager) {
         },
         /**
          * #action
-         * The worst jump of them to leave unsettled: the coarse blocks are keyed
-         * by `displayedRegionIndex`, so a set that outlives the region list has a
+         * Settles the coarse blocks, since this is the worst jump to leave
+         * unsettled: they are keyed by `displayedRegionIndex`, so a set that outlives the region list has a
          * consumer reading one contig's data against another's blocks.
          */
         setDisplayedRegions(regions) {
@@ -2498,8 +2510,7 @@ export function stateModelFactory(pluginManager) {
         // unrelated files lose their parameter types to it.
         async navToLocString(input, optAssemblyName, grow, opts) {
             const { assemblyNames } = self;
-            const session = getSession(self);
-            const { assemblyManager } = session;
+            const { assemblyManager } = getSession(self);
             const assemblyName = optAssemblyName || assemblyNames[0];
             if (assemblyName) {
                 await assemblyManager.waitForAssembly(assemblyName);
@@ -2739,7 +2750,7 @@ export function stateModelFactory(pluginManager) {
         /**
          * #method
          * returns menu items for a highlight context menu. plugins can extend
-         * this via Core-extendPluggableElement to add their own items
+         * this via Core-extendPluggableElement to add items
          */
         highlightMenuItems(_highlight) {
             return [];
@@ -2911,22 +2922,13 @@ export function stateModelFactory(pluginManager) {
         };
     })
         .postProcessSnapshot(snap => {
-        // showCenterLine is purely a localStorage-backed preference (see
-        // setupLocalStorageAutorun in afterAttach.ts) and is never persisted
-        // into session snapshots. The remaining fields are also
-        // localStorage-backed, but still persist when non-default: their strip
-        // baseline is the universal default (hardcoded here), not the
-        // localStorage-derived creation default, so a localStorage-set value
-        // stays portable across browsers.
-        const { showCenterLine, showCytobands, trackLabels, colorByCDS, showAminoAcids, showTrackOutlines, ...rest } = snap;
-        return {
-            ...rest,
-            ...(!showCytobands ? { showCytobands } : {}),
-            ...(trackLabels ? { trackLabels } : {}),
-            ...(colorByCDS ? { colorByCDS } : {}),
-            ...(!showAminoAcids ? { showAminoAcids } : {}),
-            ...(!showTrackOutlines ? { showTrackOutlines } : {}),
-        };
+        // showCenterLine is a personal preference and stays out of the session.
+        // The other localStorage-seeded settings are always written: the
+        // receiving browser's localStorage fills an absent one, so stripping a
+        // default would show a share link's reader their own setting instead
+        // of the author's.
+        const { showCenterLine, ...rest } = snap;
+        return rest;
     });
 }
 // #endregion