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

package/esm/LaunchLinearGenomeView/index.js

@@ -1,22 +1,11 @@
-import { linearGenomeViewPropKeys, partitionLaunchKeys, warnUnknownLaunchKeys, } from '../LinearGenomeView/initKeys.js';
 export default function LaunchLinearGenomeViewF(pluginManager) {
     /** #extensionPoint LaunchView-LinearGenomeView | async | Programmatically launch a linear genome view */
     pluginManager.addToExtensionPoint('LaunchView-LinearGenomeView', args => {
-        const { session, id, ...spec } = args;
+        const { session, ...spec } = args;
         if (!spec.assembly) {
             throw new Error('No assembly provided when launching linear genome view');
         }
-        // Resolution keys go into the one-shot `init` blob afterAttach applies and
-        // discards; plain props go straight onto the view snapshot, where MST
-        // restores them natively (and, except for the purely localStorage-backed
-        // showCenterLine, persist on save). Anything in neither set is a typo — MST
-        // drops unknown snapshot keys and `init` is a frozen blob, so nothing
-        // downstream would notice.
-        const { init, viewProps, unknown } = partitionLaunchKeys(spec, linearGenomeViewPropKeys(pluginManager));
-        warnUnknownLaunchKeys('LaunchView-LinearGenomeView', unknown);
-        // A provided id is passed top-level so MST's optional identifier honors it
-        // (undefined falls back to an auto-generated id).
-        session.addView('LinearGenomeView', { id, ...viewProps, init });
+        session.addView('LinearGenomeView', spec);
         return args;
     });
 }

package/esm/LinearGenomeView/afterAttach.js

@@ -2,18 +2,9 @@ import { getSession, isSessionModelWithWidgets, localStorageSetItem, resolveName
 import { coerceHighlight } from '@jbrowse/core/util/highlights';
 import { installInitAutorun } from '@jbrowse/core/util/installInitAutorun';
 import { normalizeTrackInit } from '@jbrowse/core/util/tracks';
-import { addDisposer, getPropertyMembers } from '@jbrowse/mobx-state-tree';
+import { addDisposer } from '@jbrowse/mobx-state-tree';
 import { autorun, when } from 'mobx';
 import { SearchResultsNotFoundError } from '../searchUtils.js';
-import { partitionLaunchKeys, warnUnknownLaunchKeys } from './initKeys.js';
-function warnInitKeyProblems(self, init) {
-    const { viewProps, unknown } = partitionLaunchKeys(init, new Set(Object.keys(getPropertyMembers(self).properties)));
-    const viewPropKeys = Object.keys(viewProps);
-    warnUnknownLaunchKeys('LinearGenomeView init', unknown);
-    if (viewPropKeys.length) {
-        console.warn(`LinearGenomeView init ignored view prop(s): ${viewPropKeys.join(', ')} — set these on the view alongside init, not inside it`);
-    }
-}
 // `init` is a frozen blob that often comes from hand-authored JSON, where a
 // lone entry gets written bare (`tracks: 'genes'`). A string is iterable, so
 // looping over it directly walked its characters — one track opened per letter.
@@ -103,7 +94,11 @@ async function navigateInit(self, session, init) {
             // navToLocString waits for the assembly itself, and this autorun only
             // runs once `initialized` confirms init.assembly has loaded regions, so
             // no explicit waitForAssembly is needed here
-            await self.navToLocString(init.loc, init.assembly, init.grow);
+            // a spec that listed its tracks gets those tracks; one that only named
+            // a gene gets the track the gene was found in, as the search box would
+            await self.navToLocString(init.loc, init.assembly, init.grow, {
+                showHitTrack: asArray(init.tracks).length === 0,
+            });
         }
         else if (init.displayedRegionNames?.length) {
             // an explicit region list is a navigation request just like `loc`, so it
@@ -134,12 +129,13 @@ async function navigateInit(self, session, init) {
         }
     }
 }
-// showTrack funnels through showTrackGeneric, which surfaces any failure
-// (unresolved id, bad config, etc) as its own snackbar
-function showInitTracks(self, init) {
+// launchTrack funnels through showTrackGeneric, which surfaces any failure
+// (unresolved id, bad config, etc) as its own snackbar, and loads the picked
+// display's state model first when it is registered lazily
+async function showInitTracks(self, init) {
     for (const t of asArray(init.tracks)) {
         const { trackId, trackSnapshot, displaySnapshot } = normalizeTrackInit(t);
-        self.showTrack(trackId, trackSnapshot, displaySnapshot);
+        await self.launchTrack(trackId, trackSnapshot, displaySnapshot);
     }
 }
 // backfill assemblyName on any session-authored highlights that omitted it so
@@ -182,14 +178,13 @@ export function applyInitHighlights(self, session, init) {
 }
 async function applyInit(self, init, { superseded }) {
     const session = getSession(self);
-    warnInitKeyProblems(self, init);
     if (init.tracklist) {
         await openTracklist(self, session, superseded);
     }
     // `superseded`, not a bare isAlive: it subsumes the liveness check (the view
     // may have been removed while the drawer or the navigation resolved, and
     // reading or mutating a detached node throws) and also covers the case
-    // isAlive misses — a newer setInit landed mid-apply, so the rest of *this*
+    // isAlive misses — a newer setLaunch landed mid-apply, so the rest of *this*
     // blob is stale. Finishing it anyway appends its tracks and highlights under
     // the one that replaced it, and addToHighlights pushes, so a re-launch of the
     // same spec (a StrictMode remount) doubles the bands. The drain loop applies
@@ -205,7 +200,10 @@ async function applyInit(self, init, { superseded }) {
     if (superseded()) {
         return;
     }
-    showInitTracks(self, init);
+    await showInitTracks(self, init);
+    if (superseded()) {
+        return;
+    }
     if (init.nav !== undefined) {
         self.setHideHeader(!init.nav);
     }

package/esm/LinearGenomeView/components/ExportSvgDialog.d.ts

@@ -5,7 +5,7 @@ export default function ExportSvgDialog({ model, handleClose, }: {
         exportSvg(opts: BaseExportSvgOptions & {
             trackLabels: TrackLabelMode;
             showGridlines: boolean;
-        }): Promise<void>;
+        }): Promise<unknown>;
     };
     handleClose: () => void;
 }): import("react").JSX.Element;

package/esm/LinearGenomeView/components/PaddingBlocks.d.ts

@@ -3,5 +3,5 @@ type LGV = LinearGenomeViewModel;
 declare const PaddingBlocks: ({ model, offset, }: {
     model: LGV;
     offset?: number;
-}) => import("react").JSX.Element;
+}) => import("react").JSX.Element | null;
 export default PaddingBlocks;

package/esm/LinearGenomeView/components/PaddingBlocks.js

@@ -41,11 +41,21 @@ const PaddingBlocks = observer(function PaddingBlocks({ model, offset = 0, }) {
     // the geometry is `model.paddingSpans` -- shared with any host drawing this
     // itself, so a seam here and a seam in an embedder's own chrome can't be
     // computed two different ways. This file owns only what the spans look like.
+    const spans = model.paddingSpans;
+    // Nothing to mask, so no positioned container to hold it — the common case,
+    // since a view sitting inside one contig has no seam, elision or boundary.
+    // The wrapper is not free: `ZoomTransform` reads `staticBlocks`, so an empty
+    // one still re-rendered and rewrote its transform on every gesture frame, per
+    // track. The view returns one shared array here, so this bails without even
+    // re-rendering.
+    if (spans.length === 0) {
+        return null;
+    }
     const kindClass = {
         seam: classes.regionSeparator,
         elided: classes.elided,
         boundary: classes.boundaryBlock,
     };
-    return (_jsx(ZoomTransform, { model: model, offset: offset, children: _jsx("div", { className: classes.absoluteFill, children: model.paddingSpans.map(({ key, x, width, kind }) => (_jsx("div", { className: cx(classes.block, kindClass[kind]), style: { transform: `translateX(${x}px)`, width } }, key))) }) }));
+    return (_jsx(ZoomTransform, { model: model, offset: offset, children: _jsx("div", { className: classes.absoluteFill, children: spans.map(({ x, width, kind }, i) => (_jsx("div", { className: cx(classes.block, kindClass[kind]), style: { transform: `translateX(${x}px)`, width } }, i))) }) }));
 });
 export default PaddingBlocks;

package/esm/LinearGenomeView/components/ScalebarRefNameLabels.js

@@ -5,7 +5,7 @@ import { assembleLocString, assembleLocStrings } from '@jbrowse/core/util';
 import { copyText } from '@jbrowse/core/util/copyText';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { REF_NAME_LABEL_FONT_SIZE, regionMoveActions, withRegionMoved, withRegionRemoved, withRegionReversed, } from '../util.js';
+import { REF_NAME_LABEL_FONT_SIZE, regionMoveActions, regionRunBounds, setDisplayedRegionsKeepingCenter, withRegionMoved, withRegionRemoved, withRegionReversed, } from '../util.js';
 const useStyles = makeStyles()(theme => ({
     refLabel: {
         // the width the fit test in getScalebarRefNameLabels measures against
@@ -104,6 +104,16 @@ const RefNameMenu = observer(function RefNameMenu({ model, menuState, onClose, }
     const locString = oneRegion
         ? assembleLocString(displayedRegions[idx])
         : assembleLocStrings(labeled);
+    // The region this label's blocks were cut out of. Taken over the WHOLE run
+    // rather than `labeled`, which the viewport clips: a collapsed-introns view
+    // zoomed into two exons would otherwise offer a span that is not the gene's.
+    const { first: runFirst, last: runLast } = regionRunBounds(displayedRegions, idx, lastIdx);
+    const run = displayedRegions.slice(runFirst, runLast + 1);
+    const wholeSpan = {
+        ...run[0],
+        start: Math.min(...run.map(r => r.start)),
+        end: Math.max(...run.map(r => r.end)),
+    };
     return (_jsx(Menu, { anchorEl: menuState.anchorEl, open: true, onClose: onClose, onMenuItemClick: callback => {
             callback();
             onClose();
@@ -126,7 +136,31 @@ const RefNameMenu = observer(function RefNameMenu({ model, menuState, onClose, }
                             ? 'Show only this region'
                             : `Show only ${refName}`,
                         onClick: () => {
-                            model.setDisplayedRegions(labeled);
+                            setDisplayedRegionsKeepingCenter(model, labeled);
+                        },
+                    },
+                ]
+                : []),
+            ...(runLast > runFirst
+                ? [
+                    {
+                        // Names its subject the way the two rows above it do; the span
+                        // it lands on is not spelled into the label, which would move
+                        // under the reader as they navigate.
+                        label: `Show the whole span of ${refName}`,
+                        // Focused rather than centre-kept: the rejoined region is one
+                        // the old viewport never saw, so there is no centre to hold,
+                        // and showing the span is the whole point of the row.
+                        onClick: () => {
+                            model.setDisplayedRegions([
+                                ...displayedRegions.slice(0, runFirst),
+                                wholeSpan,
+                                ...displayedRegions.slice(runLast + 1),
+                            ]);
+                            model.moveTo({ index: runFirst, offset: 0 }, {
+                                index: runFirst,
+                                offset: wholeSpan.end - wholeSpan.start,
+                            });
                         },
                     },
                 ]
@@ -170,7 +204,7 @@ const RefNameMenu = observer(function RefNameMenu({ model, menuState, onClose, }
                                     {
                                         label: 'Remove this region from view',
                                         onClick: () => {
-                                            model.setDisplayedRegions(withRegionRemoved(displayedRegions, idx));
+                                            setDisplayedRegionsKeepingCenter(model, withRegionRemoved(displayedRegions, idx));
                                         },
                                     },
                                 ]

package/esm/LinearGenomeView/components/SequenceSearchDialog.d.ts

@@ -1,7 +1,7 @@
 declare const SequenceSearchDialog: ({ model, handleClose, }: {
     model: {
         assemblyNames: string[];
-        showTrack: (trackId: string) => void;
+        launchTrack: (trackId: string) => Promise<unknown>;
     };
     handleClose: () => void;
 }) => import("react").JSX.Element;

package/esm/LinearGenomeView/components/TrackContainer.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { ErrorBanner, ResizeHandle } from '@jbrowse/core/ui';
 import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary';
 import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
 import { TrackOverlaySlot } from '@jbrowse/display-ui';
+import { isAlive } from '@jbrowse/mobx-state-tree';
 import { Paper } from '@mui/material';
 import { observer } from 'mobx-react';
 import { RESIZE_HANDLE_HEIGHT, TRACK_OUTLINE_BORDER, TRACK_TOP_GAP, } from '../consts.js';
@@ -16,8 +18,8 @@ const useStyles = makeStyles()({
     // described in TrackRenderingContainer. flow-root keeps the block formatting
     // context that `overflow: hidden` used to establish as a side effect (neither
     // `clip` nor no overflow does), so child margins still can't collapse through
-    // and shift the track — which the breakpoint split view would pick up, since
-    // its connector overlay measures trackRefs' getBoundingClientRect().top.
+    // and shift the track — which would put the pixels off the model's offset
+    // arithmetic, which the breakpoint split view draws its connectors from.
     root: {
         marginTop: TRACK_TOP_GAP,
         position: 'relative',
@@ -63,6 +65,45 @@ const useStyles = makeStyles()({
         position: 'absolute',
     },
 });
+// Measures the in-flow label band, the distance from the Paper's content top to
+// the rendering container, into the model. Observes the Paper: it grows and
+// shrinks with the label, the label setting, and the display, and each of those
+// can move the container. Published after a requestAnimationFrame like
+// useWidthSetter, and cleared on unmount so a removed track leaves no band.
+function useTrackLabelBand(model, trackId) {
+    const [paper, setPaper] = useState(null);
+    const [container, setContainer] = useState(null);
+    useEffect(() => {
+        if (paper && container && 'ResizeObserver' in window) {
+            let token;
+            const publish = () => {
+                token = requestAnimationFrame(() => {
+                    if (isAlive(model)) {
+                        const paperRect = paper.getBoundingClientRect();
+                        const band = container.getBoundingClientRect().top -
+                            paperRect.top -
+                            paper.clientTop;
+                        model.setTrackLabelBand(trackId, band);
+                    }
+                });
+            };
+            publish();
+            const observer = new ResizeObserver(publish);
+            observer.observe(paper);
+            return () => {
+                observer.disconnect();
+                if (token !== undefined) {
+                    cancelAnimationFrame(token);
+                }
+                if (isAlive(model)) {
+                    model.setTrackLabelBand(trackId, 0);
+                }
+            };
+        }
+        return undefined;
+    }, [paper, container, model, trackId]);
+    return { setPaper, setContainer };
+}
 const TrackContainer = observer(function TrackContainer({ model, track, }) {
     const { classes } = useStyles();
     // an LGV track always holds at least one linear display (activeDisplay =
@@ -79,9 +120,10 @@ const TrackContainer = observer(function TrackContainer({ model, track, }) {
     const trackLabelStyle = model.effectiveTrackLabels !== 'overlapping' || display.prefersOffset
         ? classes.trackLabelOffset
         : classes.trackLabelOverlap;
-    return (_jsxs(Paper, { className: cx(classes.root, track.pinned ? null : classes.unpinnedTrack), variant: showTrackOutlines ? 'outlined' : undefined, elevation: showTrackOutlines ? undefined : 0, onDragOver: event => {
+    const { setPaper, setContainer } = useTrackLabelBand(model, track.trackId);
+    return (_jsxs(Paper, { ref: setPaper, className: cx(classes.root, track.pinned ? null : classes.unpinnedTrack), variant: showTrackOutlines ? 'outlined' : undefined, elevation: showTrackOutlines ? undefined : 0, onDragOver: event => {
             model.onTrackDragOver(track.id, event.clientY);
-        }, children: [track.pinned ? _jsx(Gridlines, { model: model, offset: outlineOffset }) : null, model.effectiveTrackLabels !== 'hidden' ? (_jsx(TrackLabel, { track: track, className: trackLabelStyle })) : null, _jsx(TrackOverlaySlot, { zIndex: 100, overlayStyle: { left: -outlineOffset }, children: _jsx(ErrorBoundary, { resetKeys: [display.id], FallbackComponent: e => (_jsx(ErrorBanner, { error: e.error, onReset: e.resetErrorBoundary })), children: _jsx(TrackRenderingContainer, { model: model, track: track }) }) }), _jsx(PaddingBlocks, { model: model, offset: outlineOffset }), _jsx(ResizeHandle, { style: { height: RESIZE_HANDLE_HEIGHT }, onDrag: distance => display.resizeHeight(distance), 
+        }, children: [track.pinned ? _jsx(Gridlines, { model: model, offset: outlineOffset }) : null, model.effectiveTrackLabels !== 'hidden' ? (_jsx(TrackLabel, { track: track, className: trackLabelStyle })) : null, _jsx(TrackOverlaySlot, { zIndex: 100, overlayStyle: { left: -outlineOffset }, children: _jsx(ErrorBoundary, { resetKeys: [display.id], FallbackComponent: e => (_jsx(ErrorBanner, { error: e.error, onReset: e.resetErrorBoundary })), children: _jsx(TrackRenderingContainer, { model: model, track: track, ref: setContainer }) }) }), _jsx(PaddingBlocks, { model: model, offset: outlineOffset }), _jsx(ResizeHandle, { style: { height: RESIZE_HANDLE_HEIGHT }, onDrag: distance => display.resizeHeight(distance), 
                 // the drag's shortcut: grow the track by whatever it is scrolled over,
                 // so a pileup showing three rows of forty opens to all forty
                 // Optional: only a display that scrolls its own content has anything

package/esm/LinearGenomeView/components/TrackLabelButtons.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getContainingView } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CloseIcon from '@mui/icons-material/Close';
 import { IconButton } from '@mui/material';
 import { observer } from 'mobx-react';
+import { containingLgv } from '../../LinearGenomeView/containingLgv.js';
 const useStyles = makeStyles()({
     iconButton: {
         padding: 0,
@@ -21,7 +21,7 @@ const useStyles = makeStyles()({
 // write it.
 export const TrackLabelCloseButton = observer(function TrackLabelCloseButton({ track, }) {
     const { classes } = useStyles();
-    const view = getContainingView(track);
+    const view = containingLgv(track);
     return (_jsx(IconButton, { onClick: () => view.hideTrack(track.trackId), className: classes.iconButton, title: "close this track", "data-testid": `track-close-${track.trackId}`, children: _jsx(CloseIcon, { fontSize: "small" }) }));
 });
 export const TrackLabelMinimizeButton = observer(function TrackLabelMinimizeButton({ track }) {

package/esm/LinearGenomeView/components/TrackLabelDragHandle.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getContainingView } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import DragIcon from '@mui/icons-material/DragIndicator';
 import { observer } from 'mobx-react';
+import { containingLgv } from '../../LinearGenomeView/containingLgv.js';
 const useStyles = makeStyles()({
     dragHandle: {
         cursor: 'grab',
@@ -15,7 +15,7 @@ const useStyles = makeStyles()({
 });
 const TrackLabelDragHandle = observer(function TrackLabelDragHandle({ track, }) {
     const { classes } = useStyles();
-    const view = getContainingView(track);
+    const view = containingLgv(track);
     const trackId = track.trackId;
     return (_jsx("span", { draggable: true, className: classes.dragHandle, onDragStart: event => {
             const target = event.currentTarget;

package/esm/LinearGenomeView/components/TrackLabelMenu.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
-import { getContainingView, getSession } from '@jbrowse/core/util';
+import { getSession } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import LowPriorityIcon from '@mui/icons-material/LowPriority';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { observer } from 'mobx-react';
+import { containingLgv } from '../../LinearGenomeView/containingLgv.js';
 import { getTrackOrderSubMenu } from './trackLabelMenuItems.js';
 // IconButton's default 5px padding made this the tallest thing in the label
 // (27px), so it, not the text or the other controls, set the label height and
@@ -17,7 +18,7 @@ const useStyles = makeStyles()({
 });
 const TrackLabelMenu = observer(function TrackLabelMenu({ track, }) {
     const { classes } = useStyles();
-    const view = getContainingView(track);
+    const view = containingLgv(track);
     const session = getSession(track);
     function getMenuItems() {
         const orderSubMenu = getTrackOrderSubMenu({ view, track });

package/esm/LinearGenomeView/components/TrackRenderingContainer.d.ts

@@ -1,8 +1,9 @@
 import type { LinearGenomeViewModel } from '../index.ts';
 import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 type LGV = LinearGenomeViewModel;
-declare const TrackRenderingContainer: ({ model, track, }: {
+declare const TrackRenderingContainer: ({ model, track, ref, }: {
     model: LGV;
     track: BaseTrackModel;
+    ref?: React.Ref<HTMLDivElement>;
 }) => import("react").JSX.Element;
 export default TrackRenderingContainer;

package/esm/LinearGenomeView/components/TrackRenderingContainer.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, useCallback } from 'react';
+import { Suspense } from 'react';
 import { LoadingOverlay } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
 import { getTrackName } from '@jbrowse/core/util/tracks';
@@ -72,28 +72,18 @@ const TrackDisplayRegion = observer(function TrackDisplayRegion({ model, track,
     const loc = model.coarseVisibleLocStrings;
     return (_jsx("div", { ...divProps, role: "figure", "aria-label": loc ? `${trackName} track, showing ${loc}` : `${trackName} track`, children: children }));
 });
-const TrackRenderingContainer = observer(function TrackRenderingContainer({ model, track, }) {
+const TrackRenderingContainer = observer(function TrackRenderingContainer({ model, track, ref, }) {
     const { classes } = useStyles();
     // an LGV track always holds at least one linear display (activeDisplay =
     // displays[0]); narrow to the linear shape for height/RenderingComponent
     const display = track.activeDisplay;
     const { height, RenderingComponent, DisplayBlurb } = display;
-    const { trackRefs, showTrackOutlines } = model;
+    const { showTrackOutlines } = model;
     const trackId = track.trackId;
     const minimized = track.minimized;
-    // callback ref keeps trackRefs in sync as the rendering div mounts/unmounts
-    // (e.g. on minimize/restore), unlike a useEffect that misses the toggle
-    const setRef = useCallback((el) => {
-        if (el) {
-            trackRefs[trackId] = el;
-        }
-        else {
-            delete trackRefs[trackId];
-        }
-    }, [trackRefs, trackId]);
-    return (_jsx("div", { className: classes.trackRenderingContainer, style: {
+    return (_jsx("div", { ref: ref, className: classes.trackRenderingContainer, style: {
             height: minimized ? MINIMIZED_TRACK_HEIGHT : height,
-        }, "data-testid": `trackRenderingContainer-${model.id}-${trackId}`, children: !minimized ? (_jsxs(_Fragment, { children: [_jsx(TrackDisplayRegion, { model: model, track: track, ref: setRef, className: classes.renderingComponentContainer, style: { left: showTrackOutlines ? -1 : 0 }, children: _jsx(Suspense, { fallback: _jsx(LoadingOverlay, { isVisible: true, immediate: true }), children: _jsx(RenderingComponent, { model: display, onHorizontalScroll: model.horizontalScroll }) }) }), DisplayBlurb ? (_jsx("div", { style: {
+        }, "data-testid": `trackRenderingContainer-${model.id}-${trackId}`, children: !minimized ? (_jsxs(_Fragment, { children: [_jsx(TrackDisplayRegion, { model: model, track: track, className: classes.renderingComponentContainer, style: { left: showTrackOutlines ? -1 : 0 }, children: _jsx(Suspense, { fallback: _jsx(LoadingOverlay, { isVisible: true, immediate: true }), children: _jsx(RenderingComponent, { model: display, onHorizontalScroll: model.horizontalScroll }) }) }), DisplayBlurb ? (_jsx("div", { style: {
                         position: 'absolute',
                         left: 0,
                         top: display.height - 20,

package/esm/LinearGenomeView/components/ZoomButton.js

@@ -15,7 +15,12 @@ const ZoomButton = observer(function ZoomButton({ model, direction, small, }) {
         ? coarseBpPerPx >= maxBpPerPx - EPSILON
         : coarseBpPerPx <= minBpPerPx + EPSILON;
     const fontSize = small ? 'small' : undefined;
-    return (_jsx(Tooltip, { title: out ? 'Zoom out 2x' : 'Zoom in 2x', children: _jsx("span", { children: _jsx(IconButton, { "data-testid": out ? 'zoom_out' : 'zoom_in', size: small ? 'small' : undefined, disabled: disabled, onClick: () => {
+    return (_jsx(Tooltip, { title: out ? 'Zoom out 2x' : 'Zoom in 2x', children: _jsx("span", { children: _jsx(IconButton
+            // on the button, not left to the Tooltip: its title lands on the
+            // <span> the disabled case needs, so the button itself reached the
+            // accessibility tree unnamed and nothing driving by name could aim at
+            // it
+            , { "aria-label": out ? 'Zoom out' : 'Zoom in', "data-testid": out ? 'zoom_out' : 'zoom_in', size: small ? 'small' : undefined, disabled: disabled, onClick: () => {
                     model.zoom(out ? model.bpPerPx * 2 : model.bpPerPx / 2);
                 }, children: out ? (_jsx(ZoomOut, { fontSize: fontSize })) : (_jsx(ZoomIn, { fontSize: fontSize })) }) }) }));
 });

package/esm/LinearGenomeView/components/ZoomTransform.js

@@ -13,6 +13,10 @@ const useStyles = makeStyles()({
         position: 'absolute',
         height: '100%',
         pointerEvents: 'none',
+        // its own compositor layer: a pan then moves the layer instead of
+        // re-rasterizing the root layer's tiles, which paid for the gridline paths
+        // on every frame
+        willChange: 'transform',
     },
 });
 // Shared zoom/scroll-transform wrapper for the gridline ticks and padding-block

package/esm/LinearGenomeView/components/searchModes.d.ts

@@ -1,6 +1,6 @@
 export interface SequenceSearchModel {
     assemblyNames: string[];
-    showTrack: (trackId: string) => void;
+    launchTrack: (trackId: string) => Promise<unknown>;
 }
 export interface SequenceSearchModeProps {
     model: SequenceSearchModel;

package/esm/LinearGenomeView/components/searchModes.js

@@ -14,7 +14,7 @@ export function addReferenceScanTrack(model, args) {
             type: 'FeatureTrack',
             adapter: args.adapter,
         });
-        model.showTrack(args.trackId);
+        void model.launchTrack(args.trackId);
     }
     else {
         session.notify('This session does not support adding tracks', 'warning');

package/esm/LinearGenomeView/consts.js

@@ -14,7 +14,7 @@ export const SVG_SCALEBAR_CAP = 5;
 // TrackContainer lays its Paper out from these same three and nothing else —
 // the previous spelling had the model on a 3 while the CSS rendered 2 + 1 + 4,
 // which put every model-derived track offset 5px per track above the pixels.
-// The track *label* is deliberately not among them; see `trackChromeHeight`.
+// The track *label* is not among them: it is measured, see `trackLabelBand`.
 export const RESIZE_HANDLE_HEIGHT = 4;
 export const TRACK_TOP_GAP = 2;
 export const TRACK_OUTLINE_BORDER = 1;

package/esm/LinearGenomeView/containingLgv.d.ts

@@ -0,0 +1,15 @@
+import type { LinearGenomeViewModel } from './model.ts';
+import type { IStateTreeNode } from '@jbrowse/mobx-state-tree';
+/**
+ * The containing view as the linear genome view itself, for a display that
+ * needs `pxToBp`, `showTrack`, `navTo` or the view's own chrome settings.
+ *
+ * The twin of display-kit's `containingHost`, and deliberately not the same
+ * function: `RegionHost` is the region contract display-kit reads, and widening
+ * it to carry the LGV's own surface is how the display layer would come to
+ * depend on the view plugin. A display that wants the view names the view.
+ *
+ * Components and structural helpers taking duck-typed model shapes keep calling
+ * `getContainingView` — the same carve-out `containingHost` documents.
+ */
+export declare function containingLgv(self: IStateTreeNode): LinearGenomeViewModel;

package/esm/LinearGenomeView/containingLgv.js

@@ -0,0 +1,16 @@
+import { getContainingView } from '@jbrowse/core/util';
+/**
+ * The containing view as the linear genome view itself, for a display that
+ * needs `pxToBp`, `showTrack`, `navTo` or the view's own chrome settings.
+ *
+ * The twin of display-kit's `containingHost`, and deliberately not the same
+ * function: `RegionHost` is the region contract display-kit reads, and widening
+ * it to carry the LGV's own surface is how the display layer would come to
+ * depend on the view plugin. A display that wants the view names the view.
+ *
+ * Components and structural helpers taking duck-typed model shapes keep calling
+ * `getContainingView` — the same carve-out `containingHost` documents.
+ */
+export function containingLgv(self) {
+    return getContainingView(self);
+}

package/esm/LinearGenomeView/index.d.ts

@@ -25,6 +25,7 @@ declare module '@jbrowse/core/PluginManager' {
 }
 export default function LinearGenomeViewF(pluginManager: PluginManager): void;
 export { stateModelFactory } from './model.ts';
+export { lgvLaunchKeys } from './launchKeys.ts';
 export type { LinearGenomeViewModel, LinearGenomeViewStateModel, } from './model.ts';
 export type { BpOffset, ExportSvgOptions, HighlightType, InitState, LinearGenomeViewLaunchProps, NavLocation, TrackLabelMode, VolatileGuide, } from './types.ts';
 export { type SyncableViewAction, installLinkedViewSync, } from './linkedViewSync.ts';

package/esm/LinearGenomeView/index.js

@@ -1,17 +1,24 @@
 import { lazy } from 'react';
 import { ViewType } from '@jbrowse/core/pluggableElementTypes';
+import { lgvLaunchKeys } from './launchKeys.js';
 import { stateModelFactory } from './model.js';
 export default function LinearGenomeViewF(pluginManager) {
     pluginManager.addViewType(() => {
+        // annotated against the registry rather than inferred, which is what
+        // makes a hand-written augmentation earn what `getViewType` promises
+        // its callers — see `ViewTypeRegistry`
+        const stateModel = stateModelFactory(pluginManager);
         return new ViewType({
             name: 'LinearGenomeView',
             displayName: 'Linear genome view',
-            stateModel: stateModelFactory(pluginManager),
+            stateModel,
+            launchKeys: lgvLaunchKeys,
             ReactComponent: lazy(() => import('./components/LinearGenomeView.js')),
         });
     });
 }
 export { stateModelFactory } from './model.js';
+export { lgvLaunchKeys } from './launchKeys.js';
 export { installLinkedViewSync, } from './linkedViewSync.js';
 export { default as HighlightBand } from './components/HighlightBand.js';
 export { default as HighlightChip } from './components/HighlightChip.js';

package/esm/LinearGenomeView/launchKeys.d.ts

@@ -0,0 +1,2 @@
+import type { InitState } from './types.ts';
+export declare const lgvLaunchKeys: import("@jbrowse/core/util/withLaunchInput").LaunchKeyRegistration<InitState, "bpPerPx" | "offsetPx">;

package/esm/LinearGenomeView/launchKeys.js

@@ -0,0 +1,23 @@
+import { defineLaunchKeys } from '@jbrowse/core/util/withLaunchInput';
+// The argument is `Record<keyof InitState, LaunchKeySpec>`, so a command this
+// view interprets and nobody registered here is a compile error rather than a
+// key that partitions as a typo.
+//
+// `bpPerPx`/`offsetPx` are the viewport spelling from before it was stored as a
+// window. They are no longer declared properties, so the partition would read
+// them as typos; the model's own preProcessSnapshot still converts them, so a
+// URL or saved spec naming them goes on working. Deletable with `legacyBpPerPx`.
+//
+// #launchKeys LinearGenomeView — the URL parameters page renders this list
+// rather than restating it; each of these keys has its own `&param=` section
+// there, which is why no description is attached here.
+export const lgvLaunchKeys = defineLaunchKeys()({
+    loc: { kind: 'launch' },
+    grow: { kind: 'launch' },
+    assembly: { kind: 'launch' },
+    displayedRegionNames: { kind: 'launch' },
+    tracklist: { kind: 'launch' },
+    nav: { kind: 'launch' },
+    tracks: { kind: 'trackEntries' },
+    highlight: { kind: 'highlightEntries' },
+}, { passThrough: ['bpPerPx', 'offsetPx'] });

package/esm/LinearGenomeView/lazyDialogs.d.ts

@@ -7,7 +7,7 @@ export declare const ReturnToImportFormDialog: import("react").LazyExoticCompone
 export declare const SequenceSearchDialog: import("react").LazyExoticComponent<({ model, handleClose, }: {
     model: {
         assemblyNames: string[];
-        showTrack: (trackId: string) => void;
+        launchTrack: (trackId: string) => Promise<unknown>;
     };
     handleClose: () => void;
 }) => import("react").JSX.Element>;

package/esm/LinearGenomeView/linkedViewSync.d.ts

@@ -6,7 +6,7 @@ import type { IStateTreeNode } from '@jbrowse/mobx-state-tree';
  * arrays in each parent view) means the dispatch below stays exhaustive and a
  * typo can't silently produce a no-op sync.
  */
-export type SyncableViewAction = 'horizontalScroll' | 'zoomTo' | 'showTrack' | 'toggleTrack' | 'hideTrack' | 'setTrackLabels' | 'setShowCenterLine';
+export type SyncableViewAction = 'horizontalScroll' | 'zoomTo' | 'showTrack' | 'toggleTrack' | 'launchTrack' | 'launchToggleTrack' | 'hideTrack' | 'setTrackLabels' | 'setShowCenterLine';
 interface LinkableViews {
     linkViews: boolean;
     views: LinearGenomeViewModel[];

package/esm/LinearGenomeView/linkedViewSync.js

@@ -13,6 +13,12 @@ function applyViewAction(view, name, args) {
         case 'toggleTrack':
             view.toggleTrack(args[0]);
             break;
+        case 'launchTrack':
+            void view.launchTrack(args[0]);
+            break;
+        case 'launchToggleTrack':
+            void view.launchToggleTrack(args[0]);
+            break;
         case 'hideTrack':
             view.hideTrack(args[0]);
             break;