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

package/esm/LinearGenomeView/components/AddCloseUpDialog.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { SubmitDialog } from '@jbrowse/core/ui';
+import { assembleLocStrings } from '@jbrowse/core/util';
+import { Checkbox, FormControlLabel, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+/**
+ * The one thing a close-up still needs deciding once a drag has named its
+ * span: whether it opens showing what this view shows, or empty for a track
+ * chosen afterwards.
+ *
+ * The span is the selection's, named here the way the same menu's "Copy range"
+ * names it, so the dialog says what it is about to open rather than describing
+ * the feature. The model's action takes the same two offsets, for a stack an
+ * agent or a spec builds outright.
+ */
+const AddCloseUpDialog = observer(function AddCloseUpDialog({ model, leftOffset, rightOffset, handleClose, }) {
+    const [copyTracks, setCopyTracks] = useState(true);
+    const rangeString = assembleLocStrings(model.getSelectedRegions(leftOffset, rightOffset));
+    return (_jsx(SubmitDialog, { open: true, maxWidth: "xs", fullWidth: true, title: "Add close-up view", onCancel: handleClose, submitText: "Add", onSubmit: () => {
+            model.addCloseUpForSpan(leftOffset, rightOffset, {
+                trackIds: copyTracks ? undefined : [],
+            });
+            handleClose();
+        }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 }, children: [_jsxs(Typography, { children: ["A closer view of ", rangeString, ", below the tracks. It stays centred on this view, which moves to the middle of that span."] }), _jsx(FormControlLabel, { label: "Copy this view's tracks", control: _jsx(Checkbox, { size: "small", checked: copyTracks, "data-testid": "close-up-copy-tracks", onChange: event => {
+                            setCopyTracks(event.target.checked);
+                        } }) })] }) }));
+});
+export default AddCloseUpDialog;

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

@@ -0,0 +1,5 @@
+import type { LinearGenomeViewModel } from '../index.ts';
+declare const CloseUps: ({ model, }: {
+    model: LinearGenomeViewModel;
+}) => import("react").JSX.Element | null;
+export default CloseUps;

package/esm/LinearGenomeView/components/CloseUps.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { useResizeDrag } from '@jbrowse/core/util/useResizeDrag';
+import { observer } from 'mobx-react';
+import { CLOSE_UP_FRAME_WIDTH, closeUpColor, closeUpStackRows, } from '../closeUps.js';
+import LinearGenomeView from './LinearGenomeView.js';
+import OverviewScalebarPolygon from './OverviewScalebarPolygon.js';
+const useStyles = makeStyles()(theme => ({
+    connector: {
+        position: 'relative',
+    },
+    polygon: {
+        display: 'block',
+        width: '100%',
+        height: '100%',
+        overflow: 'visible',
+        pointerEvents: 'none',
+    },
+    closeUp: {
+        position: 'relative',
+        '&::after': {
+            content: '""',
+            position: 'absolute',
+            inset: 0,
+            border: `${CLOSE_UP_FRAME_WIDTH}px solid ${closeUpColor(theme)}`,
+            pointerEvents: 'none',
+            zIndex: 1,
+        },
+    },
+    // The whole band is the handle — a 4px bar under a 16px trapezoid is a
+    // smaller target than the shape it sizes — and `useResizeDrag` rather than
+    // `ResizeHandle` because that one's hover paints its whole surface, which
+    // here is the figure. A rule at the edge it drags says the same thing over
+    // the top of nothing.
+    grab: {
+        position: 'absolute',
+        inset: 0,
+        cursor: 'row-resize',
+        touchAction: 'none',
+        '&:hover': {
+            borderBottom: `2px solid ${theme.palette.action.disabled}`,
+        },
+    },
+}));
+/**
+ * The trapezoid from the span `close-up` shows, as it sits in `context`, out to
+ * `close-up`'s full width: the header overview's "you are here", drawn between
+ * two rows of the stack instead. A close-up is scrolled, where the header
+ * overview never is, so its left edge is what its origin is shifted by.
+ *
+ * Its height belongs to the stack rather than to this pair, so a drag on any
+ * band moves all of them: the bands are a ladder the eye reads down, and one
+ * rung of its own height reads as a difference in the data. The height is worth
+ * dragging at all because the band is a picture of a ratio — a row ten times
+ * wider than the one under it narrows to a tenth of the width there — and how
+ * steep that reads is the figure's to decide, not ours.
+ */
+const CloseUpConnector = observer(function CloseUpConnector({ host, context, closeUp, }) {
+    const { classes } = useStyles();
+    const height = host.closeUpConnectorHeight;
+    const handleProps = useResizeDrag({
+        onDrag: delta => {
+            host.setCloseUpConnectorHeight(host.closeUpConnectorHeight + delta);
+        },
+    });
+    return context.initialized && closeUp.initialized ? (_jsxs("div", { className: classes.connector, style: { height }, children: [_jsx("svg", { className: classes.polygon, children: _jsx(OverviewScalebarPolygon, { model: closeUp, overview: context, overviewOffsetPx: -context.offsetPx, height: height, gradient: true }) }), _jsx("div", { ...handleProps, "data-testid": `close-up-connector-${closeUp.id}`, className: classes.grab })] })) : null;
+});
+const CloseUps = observer(function CloseUps({ model, }) {
+    const closeUps = model.closeUpViews;
+    const { classes } = useStyles();
+    const rows = closeUpStackRows(model, closeUps);
+    return rows.length ? (_jsx("div", { "data-testid": `close-ups-${model.id}`, children: rows.map(({ closeUp, context }) => (_jsxs(Fragment, { children: [_jsx(CloseUpConnector, { host: model, context: context, closeUp: closeUp }), _jsx("div", { className: classes.closeUp, children: _jsx(LinearGenomeView, { model: closeUp }) })] }, closeUp.id))) })) : null;
+});
+export default CloseUps;

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

@@ -1,7 +1,8 @@
-import type { TrackLabelMode } from '../types.ts';
+import type { TrackLabelMode, ViewTrackLabelMode } from '../types.ts';
 import type { BaseExportSvgOptions } from '@jbrowse/core/ui';
 export default function ExportSvgDialog({ model, handleClose, }: {
     model: {
+        effectiveTrackLabels?: ViewTrackLabelMode;
         exportSvg(opts: BaseExportSvgOptions & {
             trackLabels: TrackLabelMode;
             showGridlines: boolean;

package/esm/LinearGenomeView/components/ExportSvgDialog.js

@@ -4,11 +4,15 @@ import { MenuItem, TextField } from '@mui/material';
 // Shared track-label + gridlines export dialog. Used by LGV, linear-synteny and
 // breakpoint-split views (their lazyDialogs re-export this).
 export default function ExportSvgDialog({ model, handleClose, }) {
-    const [trackLabels, setTrackLabels] = useExportSvgPreference('tracklabels', 'offset');
+    // The view's own setting is already an export mode, so a user who has not
+    // picked one here gets the figure their screen shows. The key is `-mode`
+    // because the modes were once spelled `overlay`/`none`, and a stored one of
+    // those would select nothing in the dropdown.
+    const [trackLabels, setTrackLabels] = useExportSvgPreference('tracklabels-mode', model.effectiveTrackLabels ?? 'offset');
     const [showGridlines, setShowGridlines] = useExportSvgPreference('gridlines', false);
     return (_jsx(BaseExportSvgDialog, { model: model, handleClose: handleClose, exportSvg: opts => model.exportSvg({ ...opts, trackLabels, showGridlines }), checkboxes: _jsx(LabeledCheckbox, { checked: showGridlines, onChange: val => {
                 setShowGridlines(val);
             }, label: "Show gridlines" }), children: _jsxs(TextField, { select: true, label: "Track label positioning", variant: "outlined", style: { minWidth: 200 }, value: trackLabels, onChange: event => {
                 setTrackLabels(event.target.value);
-            }, children: [_jsx(MenuItem, { value: "offset", children: "Offset" }), _jsx(MenuItem, { value: "overlay", children: "Overlay" }), _jsx(MenuItem, { value: "left", children: "Left" }), _jsx(MenuItem, { value: "none", children: "None" })] }) }));
+            }, children: [_jsx(MenuItem, { value: "offset", children: "Offset" }), _jsx(MenuItem, { value: "overlapping", children: "Overlapping" }), _jsx(MenuItem, { value: "left", children: "Left" }), _jsx(MenuItem, { value: "hidden", children: "Hidden" })] }) }));
 }

package/esm/LinearGenomeView/components/GetSequenceDialog.js

@@ -32,12 +32,12 @@ const GetSequenceDialog = observer(function GetSequenceDialog({ model, regions,
     // a selection this dialog will happily take is a whole chromosome of
     // sequence, so both handles are forwarded: closing the dialog stops the
     // read rather than leaving the worker on it, and the wait is named
-    async (_name, _locs, stopToken, statusCallback) => {
+    async (_name, _locs, signal, statusCallback) => {
         if (regions.length === 0) {
             throw new Error('Selected region is out of bounds');
         }
         const chunks = await fetchSequence(model, regions, {
-            stopToken,
+            signal,
             statusCallback,
         });
         // validate here (in the async path) so a length mismatch surfaces via the

package/esm/LinearGenomeView/components/Header.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import ScrollZoomToggle from '@jbrowse/core/ui/ScrollZoomToggle';
+import { getSession } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import useMeasure from '@jbrowse/core/util/useMeasure';
+import MenuIcon from '@mui/icons-material/Menu';
 import { observer } from 'mobx-react';
 import { HEADER_BAR_HEIGHT } from '../consts.js';
 import { headerFit } from '../headerFit.js';
@@ -35,12 +38,14 @@ const Controls = observer(function Controls({ model, }) {
     // row
     const [ref, { width }] = useMeasure('width');
     const highlighted = highlightedDisplays(model);
+    const viewMenu = getSession(model).viewTitleBars === false;
     const fit = headerFit({
         width,
         searchBoxPx: searchBoxWidth(model.coarseVisibleLocStrings),
         clearHighlight: highlighted.length > 0,
+        viewMenu,
     });
-    return (_jsxs("div", { className: classes.headerBar, ref: ref, children: [_jsx(HeaderTrackSelectorButton, { model: model, indent: fit.trackSelectorIndent }), _jsx(ScrollZoomToggle, { model: model, iconOnly: !fit.scrollZoomLabel }), _jsx("div", { className: classes.spacer }), _jsx(HeaderPanControls, { model: model, compact: !fit.panButtonSpacing }), _jsx(SearchBox, { model: model }), _jsx(HeaderClearHighlightButton, { highlighted: highlighted }), fit.regionWidth ? _jsx(HeaderRegionWidth, { model: model }) : null, _jsx(HeaderZoomControls, { model: model, showSlider: fit.zoomSlider }), _jsx("div", { className: classes.spacer })] }));
+    return (_jsxs("div", { className: classes.headerBar, ref: ref, children: [viewMenu ? (_jsx(CascadingMenuButton, { menuItems: () => model.menuItems(), "data-testid": "view_menu_icon", children: _jsx(MenuIcon, {}) })) : null, _jsx(HeaderTrackSelectorButton, { model: model, indent: fit.trackSelectorIndent }), _jsx(ScrollZoomToggle, { model: model, iconOnly: !fit.scrollZoomLabel }), _jsx("div", { className: classes.spacer }), _jsx(HeaderPanControls, { model: model, compact: !fit.panButtonSpacing }), _jsx(SearchBox, { model: model }), _jsx(HeaderClearHighlightButton, { highlighted: highlighted }), fit.regionWidth ? _jsx(HeaderRegionWidth, { model: model }) : null, _jsx(HeaderZoomControls, { model: model, showSlider: fit.zoomSlider }), _jsx("div", { className: classes.spacer })] }));
 });
 const LinearGenomeViewHeader = observer(function LinearGenomeViewHeader({ model, }) {
     const { hideHeader, hideHeaderOverview } = model;

package/esm/LinearGenomeView/components/HeaderZoomControls.js

@@ -1,14 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { lazy, useState } from 'react';
+import { useState } from 'react';
 import { SingleSlider } from '@jbrowse/core/ui';
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
-import { getBpDisplayStr, getDialogHost } from '@jbrowse/core/util';
+import { getBpDisplayStr } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import MoreVert from '@mui/icons-material/MoreVert';
 import { observer } from 'mobx-react';
-import { showAllRegionsMenuItem } from '../menuItems.js';
+import { zoomMenuItems } from '../menuItems.js';
 import ZoomButton from './ZoomButton.js';
-const RegionWidthEditorDialog = lazy(() => import('./RegionWidthEditorDialog.js'));
 const useStyles = makeStyles()(theme => ({
     container: {
         display: 'flex',
@@ -29,35 +28,6 @@ const useStyles = makeStyles()(theme => ({
         },
     },
 }));
-function getZoomMenuItems(model) {
-    return [
-        ...[10, 50, 100].map(r => ({
-            label: `Zoom in ${r}x`,
-            onClick: () => {
-                model.zoom(model.bpPerPx / r);
-            },
-        })),
-        ...[10, 50, 100].map(r => ({
-            label: `Zoom out ${r}x`,
-            onClick: () => {
-                model.zoom(model.bpPerPx * r);
-            },
-        })),
-        showAllRegionsMenuItem(model),
-        {
-            label: 'Custom zoom',
-            onClick: () => {
-                getDialogHost(model).queueDialog(handleClose => [
-                    RegionWidthEditorDialog,
-                    {
-                        model,
-                        handleClose,
-                    },
-                ]);
-            },
-        },
-    ];
-}
 // The slider tracks live `bpPerPx`, which changes on every animation frame of a
 // zoom. Isolated into its own observer so the surrounding zoom buttons/menu —
 // whose MUI Tooltip/IconButton machinery is comparatively expensive and only
@@ -82,6 +52,6 @@ const ZoomSlider = observer(function ZoomSlider({ model, }) {
 });
 const HeaderZoomControls = observer(function HeaderZoomControls({ model, showSlider = true, }) {
     const { classes } = useStyles();
-    return (_jsxs("div", { className: classes.container, children: [_jsx(ZoomButton, { model: model, direction: "out" }), showSlider ? _jsx(ZoomSlider, { model: model }) : null, _jsx(ZoomButton, { model: model, direction: "in" }), _jsx(CascadingMenuButton, { menuItems: () => getZoomMenuItems(model), children: _jsx(MoreVert, {}) })] }));
+    return (_jsxs("div", { className: classes.container, children: [_jsx(ZoomButton, { model: model, direction: "out" }), showSlider ? _jsx(ZoomSlider, { model: model }) : null, _jsx(ZoomButton, { model: model, direction: "in" }), _jsx(CascadingMenuButton, { menuItems: () => zoomMenuItems(model), children: _jsx(MoreVert, {}) })] }));
 });
 export default HeaderZoomControls;

package/esm/LinearGenomeView/components/Highlight.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useHighlightChip } from '@jbrowse/core/ui/highlightChipReveal';
 import { getSession } from '@jbrowse/core/util';
 import CloseIcon from '@mui/icons-material/Close';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
@@ -16,13 +15,12 @@ const Highlight = observer(function Highlight({ model, highlight, }) {
     const coords = model.getHighlightCoords(highlight);
     const bandColor = getHighlightColor(highlight, theme);
     const label = model.labelsVisible ? highlight.label : undefined;
-    const { chipVisible, setMenuOpen } = useHighlightChip(coords, model.showHighlightChips);
-    return coords ? (_jsx(HighlightBand, { coords: coords, background: bandColor.toRgbString(), label: label, children: chipVisible && coords.width >= CHIP_MIN_WIDTH ? (_jsx(HighlightChip, { color: bandColor, label: label, tooltip: highlight.label ?? 'Highlighted region', setOpen: setMenuOpen, menuItems: [
+    return coords ? (_jsx(HighlightBand, { coords: coords, background: bandColor.toRgbString(), label: label, children: coords.width >= CHIP_MIN_WIDTH ? (_jsx(HighlightChip, { color: bandColor, label: label, tooltip: highlight.label ?? 'Highlighted region', menuItems: [
                 {
                     label: 'Dismiss highlight',
                     icon: CloseIcon,
                     onClick: () => {
-                        model.removeHighlight(highlight);
+                        getSession(model).removeHighlight(highlight);
                     },
                 },
                 {

package/esm/LinearGenomeView/components/HighlightBand.js

@@ -24,8 +24,8 @@ const useStyles = makeStyles()(theme => ({
         color: theme.palette.text.primary,
     },
 }));
-// Shared band renderer for LGV and grid-bookmark highlights; OverviewHighlight
-// stays separate (different bpToPx API). A non-interactive colored band with an
+// OverviewHighlight stays separate (different bpToPx API). A non-interactive
+// colored band with an
 // optional top label; when `children` (the highlight chip) is passed it renders
 // that instead of the plain label. Visibility is toggled from the view menu
 export default function HighlightBand({ coords, background, label, children, }) {

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

@@ -1,9 +1,8 @@
 import type { MenuItem } from '@jbrowse/core/ui';
 import type { Colord } from '@jbrowse/core/util/colord';
-export default function HighlightChip({ color, label, tooltip, menuItems, setOpen, }: {
+export default function HighlightChip({ color, label, tooltip, menuItems, }: {
     color: Colord;
     label?: string;
     tooltip?: string;
     menuItems: MenuItem[];
-    setOpen?: (arg: boolean) => void;
 }): import("react").JSX.Element;

package/esm/LinearGenomeView/components/HighlightChip.js

@@ -2,14 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import LinkIcon from '@mui/icons-material/Link';
 import { Box, Tooltip, Typography } from '@mui/material';
-// Interactive chip drawn inside a highlight band while the band is revealing it
-// (see `useHighlightChip`): a link icon tinted to the band color plus an
-// optional inline label, wrapped in a context menu. Sets its own pointer-events
-// since the band is click-through. `setOpen` is how the band learns to keep the
-// chip drawn while the menu is up.
-export default function HighlightChip({ color, label, tooltip, menuItems, setOpen, }) {
+// Interactive chip drawn inside a highlight band: a link icon tinted to the
+// band color plus an optional inline label, wrapped in a context menu. Sets its
+// own pointer-events since the band is click-through.
+export default function HighlightChip({ color, label, tooltip, menuItems, }) {
     // hide the icon color when the band is fully transparent ("label-only"
     // highlight); otherwise bump to 0.8 alpha so the chip stays legible
     const chipAlpha = color.alpha() === 0 ? 0 : 0.8;
-    return (_jsx(Box, { sx: { pointerEvents: 'auto' }, children: _jsx(CascadingMenuButton, { "data-testid": "highlight-chip", menuItems: menuItems, setOpen: setOpen, children: _jsx(Tooltip, { title: tooltip, arrow: true, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(LinkIcon, { fontSize: "small", sx: { color: color.alpha(chipAlpha).toRgbString() } }), label ? (_jsx(Typography, { variant: "caption", noWrap: true, children: label })) : null] }) }) }) }));
+    return (_jsx(Box, { sx: { pointerEvents: 'auto' }, children: _jsx(CascadingMenuButton, { "data-testid": "highlight-chip", menuItems: menuItems, children: _jsx(Tooltip, { title: tooltip, arrow: true, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(LinkIcon, { fontSize: "small", sx: { color: color.alpha(chipAlpha).toRgbString() } }), label ? (_jsx(Typography, { variant: "caption", noWrap: true, children: label })) : null] }) }) }) }));
 }

package/esm/LinearGenomeView/components/ImportForm.js

@@ -84,12 +84,12 @@ const LinearGenomeViewImportForm = observer(function LinearGenomeViewImportForm(
                                 // reason.
                                 model.setError(undefined);
                                 setSelectedAssemblyName(val);
-                            }, session: session, selected: selectedAsm }), selectedAsm ? (assemblyError ? (_jsx(CloseIcon, { color: "error" })) : regions ? (_jsx(RefNameAutocomplete, { fetchResults: (queryString, stopToken) => fetchResults({
+                            }, session: session, selected: selectedAsm }), selectedAsm ? (assemblyError ? (_jsx(CloseIcon, { color: "error" })) : regions ? (_jsx(RefNameAutocomplete, { fetchResults: (queryString, signal) => fetchResults({
                                 queryString,
                                 assembly,
                                 textSearchManager,
                                 assemblyName: selectedAsm,
-                                stopToken,
+                                signal,
                             }), session: session, assemblyName: selectedAsm, value: value, minWidth: 270, adornmentWidth: adornmentReservePx({
                                 menuItemCount: recentMenuItems.length,
                             }), onChange: v => {

package/esm/LinearGenomeView/components/LinearGenomeView.js

@@ -6,9 +6,9 @@ import LinearGenomeViewContainer from './LinearGenomeViewContainer.js';
 // lazies
 const ImportForm = lazy(() => import('./ImportForm.js'));
 const LinearGenomeView = observer(function LinearGenomeView({ model, }) {
-    const { showLoading, showImportForm, loadingMessage, loadingProgress } = model;
-    if (showLoading) {
-        return (_jsx(ViewLoadingScreen, { message: loadingMessage, fraction: loadingProgress, source: model.loadingSource }));
+    const { loading, showImportForm } = model;
+    if (loading) {
+        return _jsx(ViewLoadingScreen, { ...loading });
     }
     else if (showImportForm) {
         return _jsx(ImportForm, { model: model });

package/esm/LinearGenomeView/components/LinearGenomeViewContainer.js

@@ -9,6 +9,7 @@ import Paper from '@mui/material/Paper';
 import { observer } from 'mobx-react';
 import { SCALE_BAR_HEIGHT } from '../consts.js';
 import { stickyChromeTops } from '../stickyChrome.js';
+import CloseUps from './CloseUps.js';
 import Header from './Header.js';
 import MiniControls from './MiniControls.js';
 import NavigationAnnouncer from './NavigationAnnouncer.js';
@@ -105,7 +106,7 @@ const LinearGenomeViewContainer = observer(function LinearGenomeViewContainer({
                     .map(d => d.hoveredFeature)
                     .find(Boolean);
                 session.setHovered({ hoverPosition, hoverFeature });
-            }, children: [_jsx(NavigationAnnouncer, { model: model }), _jsxs("div", { ref: headerRef, className: classes.header, style: { position: stickyViewHeaders ? 'sticky' : undefined }, children: [_jsx(Header, { model: model }), hideHeader ? _jsx(MiniControls, { model: model }) : null] }), _jsx("div", { ref: tracksRef, children: model.scalebarOnly ? (_jsx(Rubberband, { model: model, ControlComponent: _jsx(Scalebar, { model: model, style: { height: SCALE_BAR_HEIGHT, boxSizing: 'border-box' } }) })) : (_jsx(TracksContainer, { model: model, children: !tracks.length ? (_jsx(Suspense, { fallback: null, children: _jsx(NoTracksActiveButton, { model: model }) })) : (_jsxs(_Fragment, { children: [pinnedTracks.length ? (_jsx(Paper, { elevation: 6, className: classes.pinnedTracks, style: {
+            }, children: [_jsx(NavigationAnnouncer, { model: model }), _jsxs("div", { ref: headerRef, "data-testid": `lgv-header-${model.id}`, className: classes.header, style: { position: stickyViewHeaders ? 'sticky' : undefined }, children: [_jsx(Header, { model: model }), hideHeader ? _jsx(MiniControls, { model: model }) : null] }), _jsx("div", { ref: tracksRef, children: model.scalebarOnly ? (_jsx(Rubberband, { model: model, ControlComponent: _jsx(Scalebar, { model: model, style: { height: SCALE_BAR_HEIGHT, boxSizing: 'border-box' } }) })) : (_jsx(TracksContainer, { model: model, children: !tracks.length ? (_jsx(Suspense, { fallback: null, children: _jsx(NoTracksActiveButton, { model: model }) })) : (_jsxs(_Fragment, { children: [pinnedTracks.length ? (_jsx(Paper, { elevation: 6, className: classes.pinnedTracks, style: {
                                         top: stickyTops.pinnedTracks,
                                         // the scroll port this sticks in, not the window: it is
                                         // under the app bar in the classic stack, a dockview
@@ -113,6 +114,6 @@ const LinearGenomeViewContainer = observer(function LinearGenomeViewContainer({
                                         // The fallback is what an unbounded embed gets, where
                                         // the page itself is the scroller
                                         maxHeight: `calc(var(${SCROLL_PORT_HEIGHT_VAR}, 100vh) - ${stickyTops.pinnedTracks})`,
-                                    }, children: pinnedTracks.map(track => (_jsx(TrackContainer, { model: model, track: track }, track.id))) })) : null, unpinnedTracks.map(track => (_jsx(TrackContainer, { model: model, track: track }, track.id)))] })) })) })] }) }));
+                                    }, children: pinnedTracks.map(track => (_jsx(TrackContainer, { model: model, track: track }, track.id))) })) : null, unpinnedTracks.map(track => (_jsx(TrackContainer, { model: model, track: track }, track.id)))] })) })) }), _jsx(CloseUps, { model: model })] }) }));
 });
 export default LinearGenomeViewContainer;

package/esm/LinearGenomeView/components/OverviewHighlight.js

@@ -11,7 +11,7 @@ const OverviewHighlight = observer(function OverviewHighlight({ model, }) {
     // gate on highlightsVisible to match the main-view band, scalebar band, and
     // SVG export — otherwise "Turn off highlights" leaves the overview bands up
     return getSession(model).highlightsVisible
-        ? model.highlight
+        ? model.highlights
             .map(highlight => {
             const coords = model.getOverviewHighlightCoords(highlight);
             return coords ? { coords, highlight } : undefined;

package/esm/LinearGenomeView/components/OverviewHighlightBand.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Tooltip } from '@mui/material';
-// Renders a single absolute-positioned band over the overview scalebar. Used
-// for both LGV `view.highlight` entries and grid-bookmark bookmark highlights.
-// The 1px border keeps very narrow bands visible.
+// A single absolute-positioned band over the overview scalebar. The 1px border
+// keeps very narrow bands visible.
 const useStyles = makeStyles()({
     highlight: {
         height: '100%',

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

@@ -12,11 +12,17 @@ import type { ViewLayout } from '@jbrowse/core/util/Base1DUtils';
  * @param exportSvg - serialize explicit fill/stroke attributes (the split the
  * `getFill/StrokeProps` helpers exist for) instead of the on-screen CSS class,
  * which wouldn't survive into a standalone exported SVG.
+ * @param gradient - a close-up's connector: a fill fading from the narrow edge
+ * to the wide one, outlined in the colour of the frame it opens into, so the
+ * close-up below reads as an inset of the row above rather than a second view
+ * at the same zoom.
  */
-declare const OverviewScalebarPolygon: ({ model, overview, overviewOffsetPx, exportSvg, }: {
+declare const OverviewScalebarPolygon: ({ model, overview, overviewOffsetPx, height, exportSvg, gradient, }: {
     model: LinearGenomeViewModel;
     overview: ViewLayout;
     overviewOffsetPx?: number;
+    height?: number;
     exportSvg?: boolean;
+    gradient?: boolean;
 }) => import("react").JSX.Element | null;
 export default OverviewScalebarPolygon;

package/esm/LinearGenomeView/components/OverviewScalebarPolygon.js

@@ -1,9 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { svgNodeId } from '@jbrowse/core/svg/svgId';
 import { alpha } from '@jbrowse/core/ui/palette';
-import { getFillProps, getStrokeProps } from '@jbrowse/core/util';
+import { getFillProps, getStrokeProps, stripAlpha } from '@jbrowse/core/util';
 import { regionBlocksPxExtent, transformPxSpan, } from '@jbrowse/core/util/Base1DUtils';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
+import { CLOSE_UP_FRAME_WIDTH, closeUpColor } from '../closeUps.js';
 import { HEADER_BAR_HEIGHT } from '../consts.js';
 /**
  * SVG points for a trapezoid with horizontal top and bottom edges, wound as a
@@ -24,10 +26,14 @@ function trapezoidPoints(top, bottom, height) {
 // class computed once per theme (makeStyles memoizes) — an on-screen zoom frame
 // then does zero color parsing. SVG export can't carry a CSS class, so that path
 // serializes explicit fill/stroke attributes instead (see `exportSvg` below).
+const FILL_OPACITY = 0.3;
+const STROKE_OPACITY = 0.8;
+const CLOSE_UP_FILL_TOP = 0.6;
+const CLOSE_UP_FILL_BOTTOM = 0.2;
 const useStyles = makeStyles()(theme => ({
     polygon: {
-        fill: alpha(theme.palette.tertiary.light, 0.3),
-        stroke: alpha(theme.palette.tertiary.light, 0.8),
+        fill: alpha(theme.palette.tertiary.light, FILL_OPACITY),
+        stroke: alpha(theme.palette.tertiary.light, STROKE_OPACITY),
     },
 }));
 /**
@@ -42,8 +48,12 @@ const useStyles = makeStyles()(theme => ({
  * @param exportSvg - serialize explicit fill/stroke attributes (the split the
  * `getFill/StrokeProps` helpers exist for) instead of the on-screen CSS class,
  * which wouldn't survive into a standalone exported SVG.
+ * @param gradient - a close-up's connector: a fill fading from the narrow edge
+ * to the wide one, outlined in the colour of the frame it opens into, so the
+ * close-up below reads as an inset of the row above rather than a second view
+ * at the same zoom.
  */
-const OverviewScalebarPolygon = observer(function OverviewScalebarPolygon({ model, overview, overviewOffsetPx = 0, exportSvg = false, }) {
+const OverviewScalebarPolygon = observer(function OverviewScalebarPolygon({ model, overview, overviewOffsetPx = 0, height = HEADER_BAR_HEIGHT, exportSvg = false, gradient = false, }) {
     const { classes, theme } = useStyles();
     const { offsetPx, bpPerPx, dynamicBlocks } = model;
     const extent = regionBlocksPxExtent(dynamicBlocks.blocks);
@@ -56,7 +66,12 @@ const OverviewScalebarPolygon = observer(function OverviewScalebarPolygon({ mode
     // the scroll offset
     const top = transformPxSpan(extent, bpPerPx / overview.bpPerPx, overviewOffsetPx);
     const bottom = transformPxSpan(extent, 1, -offsetPx);
-    const points = trapezoidPoints(top, bottom, HEADER_BAR_HEIGHT);
-    return exportSvg ? (_jsx("polygon", { points: points, ...getFillProps(alpha(theme.palette.tertiary.light, 0.3)), ...getStrokeProps(alpha(theme.palette.tertiary.light, 0.8)) })) : (_jsx("polygon", { points: points, className: classes.polygon }));
+    const points = trapezoidPoints(top, bottom, height);
+    if (gradient) {
+        const id = `close-up-connector-${svgNodeId(model)}`;
+        const color = stripAlpha(theme.palette.tertiary.light);
+        return (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsxs("linearGradient", { id: id, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: color, stopOpacity: CLOSE_UP_FILL_TOP }), _jsx("stop", { offset: "100%", stopColor: color, stopOpacity: CLOSE_UP_FILL_BOTTOM })] }) }), _jsx("polygon", { points: points, fill: `url(#${id})`, stroke: closeUpColor(theme), strokeWidth: CLOSE_UP_FRAME_WIDTH, strokeLinejoin: "round" })] }));
+    }
+    return exportSvg ? (_jsx("polygon", { points: points, ...getFillProps(alpha(theme.palette.tertiary.light, FILL_OPACITY)), ...getStrokeProps(alpha(theme.palette.tertiary.light, STROKE_OPACITY)) })) : (_jsx("polygon", { points: points, className: classes.polygon }));
 });
 export default OverviewScalebarPolygon;

package/esm/LinearGenomeView/components/SVGHighlightBand.js

@@ -1,9 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getFillProps } from '@jbrowse/core/util';
 // One full-height SVG highlight band with an optional label at the top,
-// mirroring the on-screen HighlightBand div. Shared by the LGV native-highlight
-// export (SVGHighlights) and the grid-bookmark export (LGVHighlightSVG). The
-// label is hidden on bands too narrow to fit it.
+// mirroring the on-screen HighlightBand div. The label is hidden on bands too
+// narrow to fit it.
 export default function SVGHighlightBand({ coords, height, color, label, labelColor, }) {
     return (_jsxs(_Fragment, { children: [_jsx("rect", { x: coords.left, y: 0, width: coords.width, height: height, ...getFillProps(color) }), label && coords.width > 3 ? (_jsx("text", { x: coords.left + 3, y: 2, fontSize: 11, dominantBaseline: "hanging", ...getFillProps(labelColor), children: label })) : null] }));
 }

package/esm/LinearGenomeView/components/ScalebarRefNameLabels.js

@@ -31,34 +31,24 @@ const useStyles = makeStyles()(theme => ({
         overflow: 'clip',
         whiteSpace: 'nowrap',
     },
-    // only a refName label opens a menu. The assembly-name chip beside it is a
-    // caption, and wearing the pointer and the hover tint made it look like the
-    // one thing on the row that does nothing when clicked
+    // refName labels only: the caption chip opens no menu
     clickable: {
         cursor: 'pointer',
         '&:hover': {
-            // action.hover is a mode-aware translucent overlay; the old hardcoded
-            // grey[300] stayed light in dark mode, washing out the light label text
             background: theme.palette.action.hover,
         },
     },
-    prefixLabel: {
+    caption: {
         zIndex: 100,
     },
 }));
 const ScalebarRefNameLabels = observer(function ScalebarRefNameLabels({ model, }) {
     const { classes, cx } = useStyles();
     const [menuState, setMenuState] = useState();
-    // `model.scalebarRefNameLabels`, not a getScalebarRefNameLabels call of its
-    // own: a host drawing its own region names reads the same getter, so the
-    // sticky/dedup/fit rules can't be one thing here and another there. The SVG
-    // export still calls the helper directly, deliberately and with no prefix.
     const { labels, caption } = model.scalebarRefNameLabels;
     return (_jsxs(_Fragment, { children: [labels.map((label, i) => (_jsx(RefLabel
             // eslint-disable-next-line @eslint-react/no-array-index-key -- position IS the identity here; keying by the run makes the list churn on zoom
-            , { model: model, label: label, onOpenMenu: state => {
-                    setMenuState(state);
-                } }, i))), caption === undefined ? null : (_jsx("span", { className: cx(classes.prefixLabel, classes.refLabel), "data-testid": "refLabel-prefix", children: caption })), menuState ? (_jsx(RefNameMenu, { model: model, menuState: menuState, onClose: () => {
+            , { model: model, label: label, onOpenMenu: setMenuState }, i))), caption === undefined ? null : (_jsx("span", { className: cx(classes.caption, classes.refLabel), "data-testid": "refLabel-prefix", children: caption })), menuState ? (_jsx(RefNameMenu, { model: model, menuState: menuState, onClose: () => {
                     model.setIsScalebarRefNameMenuOpen(false);
                     setMenuState(undefined);
                 } })) : null] }));
@@ -69,7 +59,7 @@ const ScalebarRefNameLabels = observer(function ScalebarRefNameLabels({ model, }
 // this label's own onClick instead of opening the range menu.
 function RefLabel({ model, label, onOpenMenu, }) {
     const { classes, cx } = useStyles();
-    const { refName, displayedRegionIndex, lastDisplayedRegionIndex, transform, maxWidth, paddingLeft, text, } = label;
+    const { refName, transform, maxWidth, paddingLeft, text } = label;
     return (_jsx("span", { className: cx(classes.refLabel, classes.clickable), style: {
             transform: `translateX(${transform}px)`,
             paddingLeft,
@@ -79,17 +69,12 @@ function RefLabel({ model, label, onOpenMenu, }) {
         }, onClick: e => {
             model.setScalebarRefNameClickPending(false);
             model.setIsScalebarRefNameMenuOpen(true);
-            onOpenMenu({
-                anchorEl: e.currentTarget,
-                refName,
-                displayedRegionIndex,
-                lastDisplayedRegionIndex,
-            });
+            onOpenMenu({ anchorEl: e.currentTarget, label });
         }, children: text }));
 }
 const RefNameMenu = observer(function RefNameMenu({ model, menuState, onClose, }) {
     const { displayedRegions } = model;
-    const { refName, displayedRegionIndex: idx, lastDisplayedRegionIndex: lastIdx, } = menuState;
+    const { refName, displayedRegionIndex: idx, lastDisplayedRegionIndex: lastIdx, } = menuState.label;
     const numRegions = displayedRegions.length;
     const labeled = displayedRegions.slice(idx, lastIdx + 1);
     // A label naming several regions is the collapsed-intron case: adjacent

package/esm/LinearGenomeView/components/SearchBox.js

@@ -56,12 +56,12 @@ const SearchBox = observer(function SearchBox({ model, showHelp = true, minWidth
     });
     return (_jsx(RefNameAutocomplete, { onSelect: option => {
             navigate(option).catch(() => { });
-        }, assemblyName: assemblyName, fetchResults: (queryString, stopToken) => fetchResults({
+        }, assemblyName: assemblyName, fetchResults: (queryString, signal) => fetchResults({
             queryString,
             assemblyName,
             textSearchManager,
             assembly,
-            stopToken,
+            signal,
         }), session: session, value: model.coarseVisibleLocStrings, minWidth: minWidth, maxWidth: maxWidth, adornmentWidth: adornmentReservePx({
             showHelp,
             menuItemCount: recentMenuItems.length,

package/esm/LinearGenomeView/components/TrackContainer.js

@@ -107,7 +107,8 @@ function useTrackLabelBand(model, trackId) {
 const TrackContainer = observer(function TrackContainer({ model, track, }) {
     const { classes } = useStyles();
     // an LGV track always holds at least one linear display (activeDisplay =
-    // displays[0]); narrow to the linear shape for prefersOffset/resizeHeight
+    // displays[0]). The one narrowing to the linear shape, handed down rather
+    // than repeated, so a track's chrome and its body can't read two displays.
     const display = track.activeDisplay;
     const { showTrackOutlines } = model;
     // The Paper's 1px border, present iff outlines are on. Everything laid out in
@@ -117,13 +118,19 @@ const TrackContainer = observer(function TrackContainer({ model, track, }) {
     // the data. One binding rather than three copies of the ternary, because the
     // three agreeing is the whole point.
     const outlineOffset = showTrackOutlines ? TRACK_OUTLINE_BORDER : 0;
-    const trackLabelStyle = model.effectiveTrackLabels !== 'overlapping' || display.prefersOffset
-        ? classes.trackLabelOffset
-        : classes.trackLabelOverlap;
+    // A label in flow is a row of track height, which is most of what minimizing
+    // buys back — so a minimized track overlaps its label whatever the setting
+    // says, and there is nothing under it to print over. `prefersOffset` is the
+    // display asking for the offset row in 'overlapping' mode, because its left
+    // edge carries an axis or a sidebar the label would cover.
+    const trackLabelStyle = track.minimized ||
+        (model.effectiveTrackLabels === 'overlapping' && !display.prefersOffset)
+        ? classes.trackLabelOverlap
+        : classes.trackLabelOffset;
     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, ref: setContainer }) }) }), _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, display: display, 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