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

package/esm/LinearGenomeView/components/Header.js

@@ -1,7 +1,11 @@
 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 { useMediaQuery } from '@mui/material';
 import { observer } from 'mobx-react';
 import { HEADER_BAR_HEIGHT } from '../consts.js';
 import { headerFit } from '../headerFit.js';
@@ -35,12 +39,18 @@ const Controls = observer(function Controls({ model, }) {
     // row
     const [ref, { width }] = useMeasure('width');
     const highlighted = highlightedDisplays(model);
+    const viewMenu = getSession(model).viewTitleBars === false;
+    const touch = useMediaQuery('(pointer: coarse)', {
+        noSsr: true,
+    });
     const fit = headerFit({
         width,
         searchBoxPx: searchBoxWidth(model.coarseVisibleLocStrings),
         clearHighlight: highlighted.length > 0,
+        viewMenu,
+        touch,
     });
-    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 }), touch ? null : (_jsx(ScrollZoomToggle, { model: model, iconOnly: !fit.scrollZoomLabel })), _jsx("div", { className: classes.spacer }), touch ? null : (_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/HeaderClearHighlightButton.js

@@ -24,9 +24,9 @@ export function highlightedDisplays(model) {
         .filter(isFeatureHighlightCapable)
         .filter(d => d.featureHighlights.length > 0);
 }
-// Clears every highlight in the view at once. Shown only while there is one.
+// Clears every feature highlight in the view. Shown only while there is one.
 const HeaderClearHighlightButton = observer(function HeaderClearHighlightButton({ highlighted, }) {
-    return highlighted.length > 0 ? (_jsx(IconButton, { "data-testid": "clear_search_highlight", title: "Clear highlights", onClick: () => {
+    return highlighted.length > 0 ? (_jsx(IconButton, { "data-testid": "clear_search_highlight", title: "Clear feature highlights", onClick: () => {
             for (const d of highlighted) {
                 d.clearFeatureHighlights();
             }

package/esm/LinearGenomeView/components/HeaderPanControls.js

@@ -1,8 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { alpha } from '@jbrowse/core/ui/palette';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import { Button, alpha } from '@mui/material';
+import { Button } from '@mui/material';
 import { SPACING, WIDGET_HEIGHT } from '../consts.js';
 const useStyles = makeStyles()(theme => ({
     panButton: {

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,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useHighlightChip } from '@jbrowse/core/ui/highlightChipReveal';
+import { useStyleTheme } from '@jbrowse/core/ui/PaletteContext';
 import { getSession } from '@jbrowse/core/util';
 import CloseIcon from '@mui/icons-material/Close';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
-import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
 import HighlightBand from './HighlightBand.js';
 import HighlightChip from './HighlightChip.js';
@@ -12,17 +11,18 @@ import { getHighlightColor } from './util.js';
 // width the chip is dropped (the band itself still draws).
 const CHIP_MIN_WIDTH = 24;
 const Highlight = observer(function Highlight({ model, highlight, }) {
-    const theme = useTheme();
+    const theme = useStyleTheme();
     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: [
+    const label = getSession(model).highlightLabelsVisible
+        ? highlight.label
+        : undefined;
+    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/HoverPositionHighlight.js

@@ -6,9 +6,9 @@ const useStyles = makeStyles()(theme => ({
     highlight: {
         height: '100%',
         position: 'absolute',
-        background: alpha(theme.palette.primary.main, 0.4),
-        borderLeft: `2px solid ${theme.palette.primary.main}`,
-        borderRight: `2px solid ${theme.palette.primary.main}`,
+        background: alpha(theme.palette.accent, 0.4),
+        borderLeft: `2px solid ${theme.palette.accent}`,
+        borderRight: `2px solid ${theme.palette.accent}`,
         pointerEvents: 'none',
         zIndex: 10,
     },

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

@@ -7,13 +7,12 @@ import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { useWheelZoom } from '@jbrowse/core/util/usePanZoom';
 import Paper from '@mui/material/Paper';
 import { observer } from 'mobx-react';
-import { SCALE_BAR_HEIGHT } from '../consts.js';
 import { stickyChromeTops } from '../stickyChrome.js';
 import Header from './Header.js';
 import MiniControls from './MiniControls.js';
 import NavigationAnnouncer from './NavigationAnnouncer.js';
+import ResizeAllTracksHandle from './ResizeAllTracksHandle.js';
 import Rubberband from './Rubberband.js';
-import Scalebar from './Scalebar.js';
 import TrackContainer from './TrackContainer.js';
 import TracksContainer from './TracksContainer.js';
 // lazies
@@ -105,7 +104,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 })) : (_jsx(TracksContainer, { model: model, children: !tracks.length ? (_jsx(Suspense, { fallback: null, children: _jsx(NoTracksActiveButton, { model: model }) })) : (_jsxs(_Fragment, { children: [pinnedTracks.length ? (_jsx(Paper, { elevation: 2, "data-testid": "pinned-tracks", 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 +112,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(ResizeAllTracksHandle, { model: model })] })) })) })] }) }));
 });
 export default LinearGenomeViewContainer;

package/esm/LinearGenomeView/components/MiniControls.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
+import { alpha } from '@jbrowse/core/ui/palette';
 import { getSession } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import AddIcon from '@mui/icons-material/Add';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import RemoveIcon from '@mui/icons-material/Remove';
-import { IconButton, Paper, Tooltip, alpha } from '@mui/material';
+import { IconButton, Paper, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
 import ZoomButton from './ZoomButton.js';
 const useStyles = makeStyles()(theme => ({
@@ -27,7 +28,7 @@ const MiniControls = observer(function MiniControls({ model, }) {
     const { focusedViewId } = getSession(model);
     return (_jsx(Paper, { className: classes.background, children: _jsxs(Paper, { className: focusedViewId === id ? classes.focusedBackground : undefined, children: [_jsx(Tooltip, { title: "Open track selector", children: _jsx(IconButton, { size: "small", onClick: () => {
                             model.activateTrackSelector();
-                        }, children: _jsx(TrackSelectorIcon, { fontSize: "small" }) }) }), _jsx(CascadingMenuButton, { menuItems: () => model.menuItems(), children: _jsx(MoreVertIcon, { fontSize: "small" }) }), _jsx(Tooltip, { title: scalebarOnly ? 'Expand tracks' : 'Collapse to ruler', children: _jsx(IconButton, { size: "small", onClick: () => {
+                        }, children: _jsx(TrackSelectorIcon, { fontSize: "small" }) }) }), _jsx(CascadingMenuButton, { menuItems: () => model.menuItems(), children: _jsx(MoreVertIcon, { fontSize: "small" }) }), _jsx(Tooltip, { title: scalebarOnly ? 'Show tracks' : 'Show ruler only', children: _jsx(IconButton, { size: "small", onClick: () => {
                             model.setScalebarOnly(!scalebarOnly);
                         }, children: scalebarOnly ? (_jsx(AddIcon, { fontSize: "small" })) : (_jsx(RemoveIcon, { fontSize: "small" })) }) }), _jsx(ZoomButton, { model: model, direction: "out", small: true }), _jsx(ZoomButton, { model: model, direction: "in", small: true })] }) }));
 });

package/esm/LinearGenomeView/components/OverviewHighlight.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyleTheme } from '@jbrowse/core/ui/PaletteContext';
 import { getSession, notEmpty } from '@jbrowse/core/util';
 import { colord } from '@jbrowse/core/util/colord';
-import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
 import OverviewHighlightBand from './OverviewHighlightBand.js';
 import { getHighlightColor, highlightKey } from './util.js';
 const OverviewHighlight = observer(function OverviewHighlight({ model, }) {
-    const theme = useTheme();
+    const theme = useStyleTheme();
     const themed = colord(theme.palette.highlight.main);
     // 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/OverviewRubberband.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { getNotificationSink, stringify } from '@jbrowse/core/util';
 import { getRelativeX } from '@jbrowse/core/util/getRelativeX';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
 import RubberbandSpan from '../../shared/RubberbandSpan.js';
+import { useWindowDrag } from '../../shared/useWindowDrag.js';
 import OverviewRubberbandHoverTooltip from './OverviewRubberbandHoverTooltip.js';
 import { overviewPxToBp } from './util.js';
 const useStyles = makeStyles()({
@@ -25,57 +26,31 @@ const OverviewRubberband = observer(function OverviewRubberband({ model, overvie
     const controlsRef = useRef(null);
     const { classes } = useStyles();
     const mouseDragging = startX !== undefined;
-    useEffect(() => {
-        const el = controlsRef.current;
-        if (!mouseDragging || !el) {
-            return;
-        }
-        // the container's left edge is fixed for the duration of a drag, so measure
-        // it once here rather than calling getBoundingClientRect on every mousemove
-        const { left } = el.getBoundingClientRect();
-        function globalMouseMove(event) {
-            setCurrentX(event.clientX - left);
-        }
-        function globalMouseUp(event) {
-            // read the up position from the event so currentX state doesn't need to
-            // be a dep (which would re-subscribe these listeners every mousemove)
-            if (startX !== undefined) {
-                const offsetX = event.clientX - left;
-                if (Math.abs(offsetX - startX) > 3) {
-                    const leftPx = Math.min(startX, offsetX);
-                    const rightPx = Math.max(startX, offsetX);
-                    model.moveTo(overviewPxToBp(overview, leftPx, cytobandOffset), overviewPxToBp(overview, rightPx, cytobandOffset));
+    useWindowDrag(controlsRef, startX, {
+        onMove: setCurrentX,
+        onEnd: ({ startX, endX, isClick }) => {
+            if (!isClick) {
+                model.moveTo(overviewPxToBp(overview, Math.min(startX, endX), cytobandOffset), overviewPxToBp(overview, Math.max(startX, endX), cytobandOffset));
+            }
+            else {
+                const click = overviewPxToBp(overview, startX, cytobandOffset);
+                if (click.refName) {
+                    model.centerAt(click.coord0, click.refName, click.index);
                 }
                 else {
-                    const click = overviewPxToBp(overview, startX, cytobandOffset);
-                    if (click.refName) {
-                        model.centerAt(click.coord0, click.refName, click.index);
-                    }
-                    else {
-                        getNotificationSink(model).notify('unknown position clicked');
-                        console.error('unknown position clicked', click);
-                    }
+                    getNotificationSink(model).notify('unknown position clicked');
+                    console.error('unknown position clicked', click);
                 }
             }
             setStartX(undefined);
             setCurrentX(undefined);
             setGuideX(undefined);
-        }
-        function globalKeyDown(event) {
-            if (event.key === 'Escape') {
-                setStartX(undefined);
-                setCurrentX(undefined);
-            }
-        }
-        window.addEventListener('mousemove', globalMouseMove);
-        window.addEventListener('mouseup', globalMouseUp);
-        window.addEventListener('keydown', globalKeyDown);
-        return () => {
-            window.removeEventListener('mousemove', globalMouseMove);
-            window.removeEventListener('mouseup', globalMouseUp);
-            window.removeEventListener('keydown', globalKeyDown);
-        };
-    }, [startX, mouseDragging, model, overview, cytobandOffset]);
+        },
+        onCancel: () => {
+            setStartX(undefined);
+            setCurrentX(undefined);
+        },
+    });
     function mouseDown(event) {
         event.preventDefault();
         event.stopPropagation();

package/esm/LinearGenomeView/components/OverviewScalebar.js

@@ -1,8 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PluggableElements } from '@jbrowse/core/ui';
+import { alpha } from '@jbrowse/core/ui/palette';
 import { getEnv, getSession } from '@jbrowse/core/util';
 import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
-import { Typography, alpha, useTheme } from '@mui/material';
+import { Typography } from '@mui/material';
 import { observer } from 'mobx-react';
 import { HEADER_BAR_HEIGHT, HEADER_OVERVIEW_HEIGHT } from '../consts.js';
 import { REF_NAME_LABEL_FONT_SIZE, getBlockRefName, showRefNameLabels, } from '../util.js';
@@ -89,8 +90,7 @@ const useStyles = makeStyles()(theme => ({
     },
 }));
 const OverviewBox = observer(function OverviewBox({ model, block, showRefName, }) {
-    const { classes } = useStyles();
-    const theme = useTheme();
+    const { classes, theme } = useStyles();
     const { cytobandOffset, effectiveShowCytobands, overviewLayout: overview, } = model;
     const { reversed, refName, assemblyName } = block;
     const { assemblyManager } = getSession(model);
@@ -120,8 +120,7 @@ const OverviewBox = observer(function OverviewBox({ model, block, showRefName, }
         }, children: [showRefName ? (_jsx(Typography, { style: { color: refNameColor, left: 3 }, className: classes.scalebarRefName, children: refName })) : null, _jsx(OverviewScalebarTickLabels, { model: model, block: block, refNameColor: refNameColor, showRefName: showRefName })] }));
 });
 const VisibleRegionBox = observer(function VisibleRegionBox({ model, }) {
-    const { classes } = useStyles();
-    const theme = useTheme();
+    const { classes, theme } = useStyles();
     const { effectiveShowCytobands, cytobandOffset, overviewRegionPxSpan: span, } = model;
     if (!span) {
         return null;

package/esm/LinearGenomeView/components/OverviewScalebarPolygon.js

@@ -24,10 +24,12 @@ 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 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),
     },
 }));
 /**
@@ -57,6 +59,6 @@ const OverviewScalebarPolygon = observer(function OverviewScalebarPolygon({ mode
     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 }));
+    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/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

@@ -16,15 +16,10 @@ const useStyles = makeStyles()(theme => ({
     boundaryBlock: {
         background: theme.palette.action.disabledBackground,
     },
+    // opaque, since a translucent fill would darken unevenly where the
+    // container-level and per-track PaddingBlocks overlap
     regionSeparator: {
-        // opaque (not text.disabled, which is translucent): regions are now laid
-        // out contiguously so the separator paints directly over track data on both
-        // sides. A translucent fill would tint the data instead of masking it, and
-        // would darken unevenly where the container-level and per-track
-        // PaddingBlocks overlap. An opaque grey masks cleanly and stays seamless.
-        background: theme.palette.mode === 'dark'
-            ? theme.palette.grey[500]
-            : theme.palette.grey[600],
+        background: theme.palette.regionSeparator,
     },
     elided: {
         ...elidedBlockStyles,
@@ -41,11 +36,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/RangeSelectOverlay.js

@@ -1,20 +1,19 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, lazy } from 'react';
 import { Menu } from '@jbrowse/core/ui';
 import { getBpDisplayStr, stringify } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
+import RubberbandSpan from '../../shared/RubberbandSpan.js';
 import { stickyChromeTops } from '../stickyChrome.js';
 import VerticalGuide from './VerticalGuide.js';
-const RubberbandSpan = lazy(() => import('../../shared/RubberbandSpan.js'));
 const RangeSelectOverlay = observer(function RangeSelectOverlay({ model, range, menuOffsetX = 0, }) {
     const { stickyViewHeaders, headerHeight, isScalebarRefNameMenuOpen } = model;
     const { scalebar } = stickyChromeTops({ stickyViewHeaders, headerHeight });
-    const { guideX, rubberbandOn, rubberband, anchorPosition, open, isClick, clickBpOffset, handleMenuItemClick, handleClose, } = range;
-    return (_jsxs(_Fragment, { children: [guideX !== undefined && !isScalebarRefNameMenuOpen ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn && rubberband ? (_jsx(Suspense, { fallback: null, children: _jsx(RubberbandSpan, { left: rubberband.left, width: rubberband.width, viewWidth: model.width, stickyTop: scalebar, leftLabel: stringify(rubberband.leftBpOffset), rightLabel: stringify(rubberband.rightBpOffset), size: getBpDisplayStr(rubberband.numOfBpSelected) }) })) : null, anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
+    const { guideX, rubberband, anchorPosition, isClick, handleMenuItemClick, handleClose, } = range;
+    return (_jsxs(_Fragment, { children: [guideX !== undefined && !isScalebarRefNameMenuOpen ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberband && !isClick ? (_jsx(RubberbandSpan, { left: rubberband.left, width: rubberband.width, viewWidth: model.width, stickyTop: scalebar, leftLabel: stringify(rubberband.leftBpOffset), rightLabel: stringify(rubberband.rightBpOffset), size: getBpDisplayStr(rubberband.numOfBpSelected) })) : null, anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
                     left: anchorPosition.clientX + menuOffsetX,
                     top: anchorPosition.clientY,
-                }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: isClick && clickBpOffset
-                    ? model.rubberbandClickMenuItems(clickBpOffset)
+                }, onMenuItemClick: handleMenuItemClick, open: true, onClose: handleClose, menuItems: isClick
+                    ? model.rubberbandClickMenuItems(model.pxToBp(anchorPosition.offsetX))
                     : model.rubberBandMenuItems() })) : null] }));
 });
 export default RangeSelectOverlay;

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

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