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

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

@@ -1,8 +1,5 @@
-import type { LinearGenomeViewModel } from '../index.ts';
 import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
-declare function TrackLabelDragHandle({ trackId, view, track, }: {
-    trackId: string;
+declare const TrackLabelDragHandle: ({ track, }: {
     track: BaseTrackModel;
-    view: LinearGenomeViewModel;
-}): import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default TrackLabelDragHandle;

package/esm/LinearGenomeView/components/TrackLabelDragHandle.js

@@ -1,6 +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';
 const useStyles = makeStyles()({
     dragHandle: {
         cursor: 'grab',
@@ -11,8 +13,10 @@ const useStyles = makeStyles()({
         pointerEvents: 'none',
     },
 });
-function TrackLabelDragHandle({ trackId, view, track, }) {
+const TrackLabelDragHandle = observer(function TrackLabelDragHandle({ track, }) {
     const { classes } = useStyles();
+    const view = getContainingView(track);
+    const trackId = track.trackId;
     return (_jsx("span", { draggable: true, className: classes.dragHandle, onDragStart: event => {
             const target = event.currentTarget;
             if (target.parentNode) {
@@ -23,5 +27,5 @@ function TrackLabelDragHandle({ trackId, view, track, }) {
         }, onDragEnd: () => {
             view.setDraggingTrackId(undefined);
         }, "data-testid": `dragHandle-${view.id}-${trackId}`, children: _jsx(DragIcon, { className: classes.dragHandleIcon, fontSize: "small" }) }));
-}
+});
 export default TrackLabelDragHandle;

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

@@ -1,5 +1,5 @@
 import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 declare const TrackLabelMenu: ({ track, }: {
     track: BaseTrackModel;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default TrackLabelMenu;

package/esm/LinearGenomeView/components/TrackLabelMenu.js

@@ -1,100 +1,47 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback } from 'react';
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import { getContainingView, getSession } from '@jbrowse/core/util';
-import AddIcon from '@mui/icons-material/Add';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
-import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import LowPriorityIcon from '@mui/icons-material/LowPriority';
-import MinimizeIcon from '@mui/icons-material/Minimize';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import PushPinIcon from '@mui/icons-material/PushPin';
 import { observer } from 'mobx-react';
+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
+// hence the offset the track body gets. 3px trims the label to 23px while
+// keeping a hit area past the 17px icon; 2px reads as too compact.
+const useStyles = makeStyles()({
+    menuButton: {
+        padding: 3,
+    },
+});
 const TrackLabelMenu = observer(function TrackLabelMenu({ track, }) {
+    const { classes } = useStyles();
     const view = getContainingView(track);
     const session = getSession(track);
-    const getMenuItems = useCallback(() => {
-        const trackConf = track.configuration;
-        const minimized = track.minimized;
-        const pinned = track.pinned;
-        const { isTopLevelView } = view;
-        const trackMenuItems = track.trackMenuItems();
-        const saveTrackData = trackMenuItems.find(item => 'label' in item && item.label === 'Save track data');
-        const remainingTrackMenuItems = trackMenuItems.filter(item => !('label' in item) || item.label !== 'Save track data');
-        const sessionItems = session.getTrackActionMenuItems?.(trackConf, saveTrackData ? [saveTrackData] : []) || [];
+    function getMenuItems() {
+        const orderSubMenu = getTrackOrderSubMenu({ view, track });
+        const sessionItems = session.getTrackActionMenuItems?.({
+            config: track.configuration,
+            view,
+        }) ?? [];
         return [
-            {
-                label: 'Track order',
-                icon: LowPriorityIcon,
-                type: 'subMenu',
-                priority: 1000,
-                subMenu: [
-                    ...(!isTopLevelView
-                        ? []
-                        : [
-                            {
-                                label: pinned ? 'Unpin track' : 'Pin track',
-                                icon: PushPinIcon,
-                                onClick: () => {
-                                    track.setPinned(!pinned);
-                                },
-                            },
-                        ]),
+            ...(orderSubMenu.length
+                ? [
                     {
-                        label: minimized ? 'Restore track' : 'Minimize track',
-                        icon: minimized ? AddIcon : MinimizeIcon,
-                        onClick: () => {
-                            track.setMinimized(!minimized);
-                        },
+                        label: 'Track order',
+                        icon: LowPriorityIcon,
+                        type: 'subMenu',
+                        priority: 1000,
+                        subMenu: orderSubMenu,
                     },
-                    ...(view.tracks.length > 2
-                        ? [
-                            {
-                                label: 'Move track to top',
-                                icon: KeyboardDoubleArrowUpIcon,
-                                onClick: () => {
-                                    view.moveTrackToTop(track.id);
-                                },
-                            },
-                        ]
-                        : []),
-                    ...(view.tracks.length > 1
-                        ? [
-                            {
-                                label: 'Move track up',
-                                icon: KeyboardArrowUpIcon,
-                                onClick: () => {
-                                    view.moveTrackUp(track.id);
-                                },
-                            },
-                            {
-                                label: 'Move track down',
-                                icon: KeyboardArrowDownIcon,
-                                onClick: () => {
-                                    view.moveTrackDown(track.id);
-                                },
-                            },
-                        ]
-                        : []),
-                    ...(view.tracks.length > 2
-                        ? [
-                            {
-                                label: 'Move track to bottom',
-                                icon: KeyboardDoubleArrowDownIcon,
-                                onClick: () => {
-                                    view.moveTrackToBottom(track.id);
-                                },
-                            },
-                        ]
-                        : []),
-                ],
-            },
+                ]
+                : []),
             ...sessionItems,
-            ...remainingTrackMenuItems,
-        ].sort((a, b) => (b.priority || 0) - (a.priority || 0));
-    }, [track, view, session]);
-    return (_jsx(CascadingMenuButton, { menuItems: getMenuItems, "data-testid": "track_menu_icon", children: _jsx(MoreVertIcon, { fontSize: "small" }) }));
+            track.saveTrackDataMenuItem,
+            ...track.trackMenuItems(),
+        ].sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+    }
+    return (_jsx(CascadingMenuButton, { menuItems: getMenuItems, className: classes.menuButton, "data-testid": "track_menu_icon", "data-trackid": track.trackId, tooltip: "Track settings", children: _jsx(MoreVertIcon, { fontSize: "small" }) }));
 });
 export default TrackLabelMenu;

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

@@ -0,0 +1,22 @@
+import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
+/**
+ * The track label's warning for a file whose reference names have nothing in
+ * common with the assembly's — the commonest data-configuration mistake in
+ * JBrowse, and until now a silent one: the track draws nothing and reads
+ * exactly like a track with no features in view.
+ *
+ * The label rather than the display chrome, deliberately. The chrome's states
+ * are `displayPhase`'s, which are mutually exclusive and two of which replace
+ * the display's subtree; a mismatch is neither an error to retry nor a phase to
+ * be in, and routing it through `model.error` would put a red banner and a dead
+ * Retry over a track that, if the check is ever wrong, is drawing fine. This
+ * sits next to the track's own close/minimize buttons, costs the display
+ * nothing, and reaches every track type at once.
+ *
+ * The tooltip is the summary and the dialog is the disclosure — a hover nobody
+ * performs is not a way of telling someone their data is misconfigured.
+ */
+declare const TrackLabelRefNameWarning: ({ track, }: {
+    track: BaseTrackModel;
+}) => import("react").JSX.Element | null;
+export default TrackLabelRefNameWarning;

package/esm/LinearGenomeView/components/TrackLabelRefNameWarning.js

@@ -0,0 +1,46 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { refNameMismatchMessage } from '@jbrowse/core/assemblyManager/assembly';
+import { InfoDialog } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import WarningIcon from '@mui/icons-material/Warning';
+import { IconButton, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+const useStyles = makeStyles()(theme => ({
+    iconButton: {
+        padding: 0,
+        color: theme.palette.warning.main,
+    },
+}));
+/**
+ * The track label's warning for a file whose reference names have nothing in
+ * common with the assembly's — the commonest data-configuration mistake in
+ * JBrowse, and until now a silent one: the track draws nothing and reads
+ * exactly like a track with no features in view.
+ *
+ * The label rather than the display chrome, deliberately. The chrome's states
+ * are `displayPhase`'s, which are mutually exclusive and two of which replace
+ * the display's subtree; a mismatch is neither an error to retry nor a phase to
+ * be in, and routing it through `model.error` would put a red banner and a dead
+ * Retry over a track that, if the check is ever wrong, is drawing fine. This
+ * sits next to the track's own close/minimize buttons, costs the display
+ * nothing, and reaches every track type at once.
+ *
+ * The tooltip is the summary and the dialog is the disclosure — a hover nobody
+ * performs is not a way of telling someone their data is misconfigured.
+ */
+const TrackLabelRefNameWarning = observer(function TrackLabelRefNameWarning({ track, }) {
+    const { classes } = useStyles();
+    const [open, setOpen] = useState(false);
+    const { refNameMismatch } = track;
+    if (!refNameMismatch) {
+        return null;
+    }
+    const message = refNameMismatchMessage(refNameMismatch);
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { onClick: () => {
+                    setOpen(true);
+                }, className: classes.iconButton, title: message, "data-testid": `track-refname-warning-${track.trackId}`, children: _jsx(WarningIcon, { fontSize: "small" }) }), open ? (_jsxs(InfoDialog, { open: true, title: "Reference names do not match the assembly", onClose: () => {
+                    setOpen(false);
+                }, children: [_jsx(Typography, { children: message }), _jsx(Typography, { variant: "body2", style: { marginTop: 8 }, children: "The track menu's \"About track\" shows every reference name the file uses." })] })) : null] }));
+});
+export default TrackLabelRefNameWarning;

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

@@ -4,5 +4,5 @@ type LGV = LinearGenomeViewModel;
 declare const TrackRenderingContainer: ({ model, track, }: {
     model: LGV;
     track: BaseTrackModel;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default TrackRenderingContainer;

package/esm/LinearGenomeView/components/TrackRenderingContainer.js

@@ -1,45 +1,99 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, useEffect, useRef } from 'react';
-import { LoadingEllipses } from '@jbrowse/core/ui';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, useCallback } from 'react';
+import { LoadingOverlay } from '@jbrowse/core/ui';
+import { getSession } from '@jbrowse/core/util';
+import { getTrackName } from '@jbrowse/core/util/tracks';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
+import { MINIMIZED_TRACK_HEIGHT } from '../consts.js';
 const useStyles = makeStyles()({
+    // aligns with block boundaries. check for example the breakpoint split view
+    // demo to see if features align if wanting to change things. the -1 left
+    // offset (cancels the Paper's 1px border) is applied inline since it's
+    // conditional on showTrackOutlines, the same condition the border is gated on
     renderingComponentContainer: {
         position: 'absolute',
-        left: -1,
         height: '100%',
         width: '100%',
     },
+    // Tracks never scroll natively on this outer container — every display owns
+    // its own vertical scroll: canvas displays scroll an inner sticky-canvas
+    // container (FeatureComponent), while alignments and variants draw a custom
+    // VerticalScrollbar overlay and redraw the canvas at `scrollTop`. A native
+    // scroll port here only produced a *second*, spurious scrollbar whenever a
+    // display's absolutely-positioned overlays extended a pixel past `height`
+    // (the reported double/flickering/full-height scrollbars). So there is
+    // deliberately no `overflow` here: `contain: strict` includes paint
+    // containment, which clips to the padding box on its own, and adding an
+    // `overflow` would reintroduce the scroll container — one the browser can
+    // still scroll silently (focus, scrollIntoView, scroll anchoring) even with
+    // no scrollbar shown, desyncing track content from the scalebar.
+    //
+    // `contain: strict` is also what makes every piece of display chrome reach the
+    // track's overlay layer through `TrackOverlayPortal` — containment creates a
+    // stacking context, so nothing in here can paint above `PaddingBlocks`, which
+    // is a later sibling. That looks like a tax worth removing (swap for a bare
+    // `overflow: clip`, which clips without a scroll container AND without a
+    // stacking context, and the portals become plain z-indexes). It was measured:
+    // `browser-tests/probe-containment.ts`. Under DOM load that swap costs 2.6x
+    // paint time on a track height change and 4.0x on a pan, at identical paint
+    // counts. The stacking context IS the paint isolation — the two can't be
+    // separated, so the portal is the price of the isolation, not a workaround
+    // for it. Layout containment measured free; the paint half is the load-bearing
+    // one. ADR-058.
     trackRenderingContainer: {
-        overflowY: 'auto',
-        overflowX: 'hidden',
         whiteSpace: 'nowrap',
         position: 'relative',
         background: 'none',
         contain: 'strict',
     },
 });
+// The box every LGV display is mounted in, and the ONLY place in the tree where
+// a track's pixels get a name and a role — one component rather than an
+// `aria-label` per display type, the same way `TrackOverlaySlot` is one paint
+// order rather than one per display.
+//
+// Its own observer for a measured reason. The "what is on screen" half of the
+// name is the settled locstring, which changes whenever navigation settles; read
+// from `TrackRenderingContainer` below, that would re-render every track's
+// container (and re-run its `useStyles`) on every settle. Here the re-render is
+// this one `<div>`: `children` is the same React element object the parent
+// already handed it, so React bails out of the display's whole subtree.
+//
+// **`role="figure"`, not `role="img"`.** `img` is the textbook role for a canvas
+// and would be right if the box held only pixels — but it makes every descendant
+// presentational, and a display's chrome does not all portal out of the sandbox:
+// alignments draws its group collapse/expand `<button>`s inline
+// (`GroupLabelsOverlay`), which under `img` would be focusable and announced as
+// nothing. `figure` names the box and keeps what is inside it reachable. Revisit
+// if inline interactive chrome ever goes away.
+const TrackDisplayRegion = observer(function TrackDisplayRegion({ model, track, children, ...divProps }) {
+    const trackName = getTrackName(track.configuration, getSession(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 { classes } = useStyles();
-    const display = track.displays[0];
+    // 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, id, scaleFactor } = model;
+    const { trackRefs, showTrackOutlines } = model;
     const trackId = track.trackId;
-    const ref = useRef(null);
     const minimized = track.minimized;
-    useEffect(() => {
-        if (ref.current) {
-            trackRefs[trackId] = ref.current;
+    // 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;
         }
-        return () => {
+        else {
             delete trackRefs[trackId];
-        };
+        }
     }, [trackRefs, trackId]);
     return (_jsx("div", { className: classes.trackRenderingContainer, style: {
-            height: minimized ? 20 : height,
-        }, onScroll: evt => display.setScrollTop(evt.currentTarget.scrollTop), "data-testid": `trackRenderingContainer-${id}-${trackId}`, children: !minimized ? (_jsxs(_Fragment, { children: [_jsx("div", { ref: ref, className: classes.renderingComponentContainer, style: {
-                        transform: scaleFactor !== 1 ? `scaleX(${scaleFactor})` : undefined,
-                    }, children: _jsx(Suspense, { fallback: _jsx(LoadingEllipses, {}), children: _jsx(RenderingComponent, { model: display, onHorizontalScroll: model.horizontalScroll }) }) }), DisplayBlurb ? (_jsx("div", { 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: {
                         position: 'absolute',
                         left: 0,
                         top: display.height - 20,

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

@@ -3,5 +3,5 @@ type LGV = LinearGenomeViewModel;
 declare const TracksContainer: ({ children, model, }: {
     children: React.ReactNode;
     model: LGV;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default TracksContainer;

package/esm/LinearGenomeView/components/TracksContainer.js

@@ -1,49 +1,82 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useRef } from 'react';
-import { Menu } from '@jbrowse/core/ui';
-import { getEnv } from '@jbrowse/core/util';
+import { PluggableElements } from '@jbrowse/core/ui';
+import { OverlayPointerProvider } from '@jbrowse/core/ui/highlightChipReveal';
+import { useMouseTracking } from '@jbrowse/core/ui/useMouseTracking';
+import { getEnv, getSession } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-import Gridlines from "./Gridlines.js";
-import Rubberband from "./Rubberband.js";
-import Scalebar from "./Scalebar.js";
-import VerticalGuide from "./VerticalGuide.js";
-import { SCALE_BAR_HEIGHT } from "../consts.js";
-import { useRangeSelect } from "./useRangeSelect.js";
-import { useSideScroll } from "./useSideScroll.js";
-import { useWheelScroll } from "./useWheelScroll.js";
-const CenterLine = lazy(() => import("./CenterLine.js"));
-const Highlight = lazy(() => import("./Highlight.js"));
-const RubberbandSpan = lazy(() => import("./RubberbandSpan.js"));
+import { SCALE_BAR_HEIGHT } from '../consts.js';
+import Gridlines from './Gridlines.js';
+import OverviewHighlightBand from './OverviewHighlightBand.js';
+import PaddingBlocks from './PaddingBlocks.js';
+import RangeSelectOverlay from './RangeSelectOverlay.js';
+import Rubberband from './Rubberband.js';
+import Scalebar from './Scalebar.js';
+import VerticalGuide from './VerticalGuide.js';
+import { useRangeSelect } from './useRangeSelect.js';
+import { useSideScroll } from './useSideScroll.js';
+import { getHighlightColor, highlightKey } from './util.js';
+const CenterLine = lazy(() => import('./CenterLine.js'));
+const Highlight = lazy(() => import('./Highlight.js'));
 const useStyles = makeStyles()({
     tracksContainer: {
         position: 'relative',
         contain: 'layout style',
     },
+    scalebarHighlights: {
+        position: 'absolute',
+        top: 0,
+        height: SCALE_BAR_HEIGHT,
+        width: '100%',
+        // above Rubberband div (825) so bands show over the scalebar,
+        // below RubberbandSpan (830) so the selection rect stays on top
+        zIndex: 826,
+        pointerEvents: 'none',
+    },
 });
 const TracksContainer = observer(function TracksContainer({ children, model, }) {
     const { classes } = useStyles();
     const { pluginManager } = getEnv(model);
-    const { mouseDown: mouseDown1, mouseUp } = useSideScroll(model);
-    const { stickyViewHeaders, rubberbandTop, showGridlines, showCenterLine, isScalebarRefNameMenuOpen, } = model;
+    const { mouseDown: sideScrollMouseDown, mouseUp } = useSideScroll(model);
+    const { showGridlines, showCenterLine } = model;
     const ref = useRef(null);
-    const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, isClick, clickBpOffset, handleMenuItemClick, handleClose, mouseMove, mouseDown: mouseDown2, } = useRangeSelect(ref, model, true);
-    useWheelScroll(ref, model);
-    const additional = pluginManager.evaluateExtensionPoint('LinearGenomeView-TracksContainerComponent', undefined, { model });
-    return (_jsxs("div", { ref: ref, "data-testid": "tracksContainer", className: classes.tracksContainer, onMouseDown: event => {
-            mouseDown1(event);
-            mouseDown2(event);
-        }, onMouseMove: mouseMove, onMouseUp: mouseUp, children: [showGridlines ? _jsx(Gridlines, { model: model }) : null, _jsx(Suspense, { fallback: null, children: showCenterLine ? _jsx(CenterLine, { model: model }) : null }), guideX !== undefined && !isScalebarRefNameMenuOpen ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn ? (_jsx(Suspense, { fallback: null, children: _jsx(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: rubberbandTop, sticky: stickyViewHeaders }) })) : null, model.volatileGuides.map((guide, idx) => (_jsx(VerticalGuide, { model: model, coordX: guide.xPos }, idx))), anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
-                    left: anchorPosition.clientX,
-                    top: anchorPosition.clientY,
-                }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: isClick && clickBpOffset
-                    ? model.rubberbandClickMenuItems(clickBpOffset)
-                    : model.rubberBandMenuItems() })) : null, _jsx(Rubberband, { model: model, ControlComponent: _jsx(Scalebar, { model: model, style: {
-                        height: SCALE_BAR_HEIGHT,
-                        boxSizing: 'border-box',
-                    } }) }), _jsx(HighlightGroup, { model: model }), additional, children] }));
+    // shift-drag range select over the whole tracks area. This is intentionally
+    // a separate range-select instance from the one inside <Rubberband> (the
+    // scalebar control); don't dedupe them — they cover different regions.
+    const range = useRangeSelect(ref, model, true);
+    // published rather than held (see `useMouseTracking`): the highlight bands
+    // read it, and a position in state here would re-render the whole tracks area
+    // every frame the pointer moves over it
+    const { mouseTracker, handleMouseMove, handleMouseLeave } = useMouseTracking();
+    return (_jsx("div", { ref: ref, "data-testid": "tracksContainer", className: classes.tracksContainer, onMouseDown: event => {
+            sideScrollMouseDown(event);
+            range.mouseDown(event);
+        }, onMouseMove: event => {
+            handleMouseMove(event);
+            range.mouseMove(event);
+        }, onMouseLeave: () => {
+            handleMouseLeave();
+            range.mouseOut();
+        }, onMouseUp: mouseUp, children: _jsxs(OverlayPointerProvider, { value: mouseTracker, children: [showGridlines ? (_jsxs(_Fragment, { children: [_jsx(Gridlines, { model: model }), _jsx(PaddingBlocks, { model: model })] })) : null, _jsx(Suspense, { fallback: null, children: showCenterLine ? _jsx(CenterLine, { model: model }) : null }), _jsx(RangeSelectOverlay, { model: model, range: range }), model.volatileGuides.map((guide, idx) => (_jsx(VerticalGuide, { model: model, coordX: guide.xPos }, idx))), _jsx(Rubberband, { model: model, ControlComponent: _jsx(Scalebar, { model: model, style: {
+                            height: SCALE_BAR_HEIGHT,
+                            boxSizing: 'border-box',
+                        } }) }), _jsx(ScalebarHighlightGroup, { model: model }), _jsx(HighlightGroup, { model: model }), _jsx(PluggableElements, { pluginManager: pluginManager, name: "LinearGenomeView-TracksContainerComponent", props: { model } }), children] }) }));
 });
 const HighlightGroup = observer(function HighlightGroup({ model, }) {
-    return model.highlightsVisible && model.highlight.length ? (_jsx(Suspense, { fallback: null, children: model.highlight.map((highlight, idx) => (_jsx(Highlight, { model: model, highlight: highlight }, `${JSON.stringify(highlight)}-${idx}`))) })) : null;
+    return getSession(model).highlightsVisible && model.highlight.length ? (_jsx(Suspense, { fallback: null, children: model.highlight.map((highlight, idx) => (_jsx(Highlight, { model: model, highlight: highlight }, highlightKey(highlight, idx)))) })) : null;
+});
+const ScalebarHighlightGroup = observer(function ScalebarHighlightGroup({ model, }) {
+    const theme = useTheme();
+    const { pluginManager } = getEnv(model);
+    const { classes } = useStyles();
+    const viewBands = getSession(model).highlightsVisible
+        ? model.highlight.map((h, idx) => {
+            const coords = model.getHighlightCoords(h);
+            return coords ? (_jsx(OverviewHighlightBand, { coords: coords, background: getHighlightColor(h, theme).toRgbString() }, highlightKey(h, idx))) : null;
+        })
+        : [];
+    return (_jsxs("div", { className: classes.scalebarHighlights, children: [viewBands, _jsx(PluggableElements, { pluginManager: pluginManager, name: "LinearGenomeView-ScalebarHighlightComponent", props: { model } })] }));
 });
 export default TracksContainer;

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

@@ -3,5 +3,5 @@ type LGV = LinearGenomeViewModel;
 declare const VerticalGuide: ({ model, coordX, }: {
     model: LGV;
     coordX: number;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default VerticalGuide;

package/esm/LinearGenomeView/components/VerticalGuide.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { stringify } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
+import { GuideLabel } from '../../shared/coordLabels.js';
+import { stickyChromeTops } from '../stickyChrome.js';
 const useStyles = makeStyles()({
     guide: {
         pointerEvents: 'none',
@@ -13,19 +14,11 @@ const useStyles = makeStyles()({
         background: 'red',
         zIndex: 1001,
     },
-    tooltipTarget: {
-        position: 'sticky',
-        left: 0,
-        width: 1,
-    },
 });
 const VerticalGuide = observer(function VerticalGuide({ model, coordX, }) {
     const { classes } = useStyles();
-    const { stickyViewHeaders, rubberbandTop } = model;
-    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { open: true, placement: "top", title: stringify(model.pxToBp(coordX)), arrow: true, children: _jsx("div", { className: classes.tooltipTarget, style: {
-                        transform: `translateX(${coordX + 6}px)`,
-                        top: rubberbandTop,
-                        position: stickyViewHeaders ? 'sticky' : undefined,
-                    } }) }), _jsx("div", { className: classes.guide, style: { transform: `translateX(${coordX}px)` } })] }));
+    const { width, stickyViewHeaders, headerHeight } = model;
+    const { scalebar } = stickyChromeTops({ stickyViewHeaders, headerHeight });
+    return (_jsxs(_Fragment, { children: [_jsx(GuideLabel, { coordX: coordX, viewWidth: width, stickyTop: scalebar, children: stringify(model.pxToBp(coordX)) }), _jsx("div", { className: classes.guide, style: { transform: `translateX(${coordX}px)` } })] }));
 });
 export default VerticalGuide;

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

@@ -0,0 +1,7 @@
+import type { LinearGenomeViewModel } from '../index.ts';
+declare const ZoomButton: ({ model, direction, small, }: {
+    model: LinearGenomeViewModel;
+    direction: 'in' | 'out';
+    small?: boolean;
+}) => import("react").JSX.Element;
+export default ZoomButton;

package/esm/LinearGenomeView/components/ZoomButton.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ZoomIn from '@mui/icons-material/ZoomIn';
+import ZoomOut from '@mui/icons-material/ZoomOut';
+import { IconButton, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
+// epsilon guards against the button flickering to disabled from float rounding
+// exactly at the zoom limit
+const EPSILON = 0.0001;
+const ZoomButton = observer(function ZoomButton({ model, direction, small, }) {
+    // disabled tracks the debounced coarseBpPerPx (not live bpPerPx) so it doesn't
+    // flicker disabled during a zoom animation
+    const { maxBpPerPx, minBpPerPx, coarseBpPerPx } = model;
+    const out = direction === 'out';
+    const disabled = out
+        ? 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
+            // 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 })) }) }) }));
+});
+export default ZoomButton;

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

@@ -0,0 +1,9 @@
+import type { LinearGenomeViewModel } from '../index.ts';
+import type { ReactNode } from 'react';
+type LGV = LinearGenomeViewModel;
+declare const ZoomTransform: ({ model, offset, children, }: {
+    model: LGV;
+    offset?: number;
+    children: ReactNode;
+}) => import("react").JSX.Element;
+export default ZoomTransform;