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

package/esm/LinearGenomeView/components/TrackLabelButtons.js

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

package/esm/LinearGenomeView/components/TrackLabelDragHandle.js

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

package/esm/LinearGenomeView/components/TrackLabelMenu.js

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

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

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

package/esm/LinearGenomeView/components/TrackRenderingContainer.js

@@ -1,11 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, useCallback } from 'react';
+import { Suspense } from 'react';
 import { LoadingOverlay } from '@jbrowse/core/ui';
-import { getSession } from '@jbrowse/core/util';
+import { coarseStripHTML, getSession } from '@jbrowse/core/util';
 import { getTrackName } from '@jbrowse/core/util/tracks';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { TrackOverlayPortal } from '@jbrowse/display-ui';
 import { observer } from 'mobx-react';
-import { MINIMIZED_TRACK_HEIGHT } from '../consts.js';
+import { TRACK_OUTLINE_BORDER } 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
@@ -68,32 +69,19 @@ const useStyles = makeStyles()({
 // 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 trackName = coarseStripHTML(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 TrackRenderingContainer = observer(function TrackRenderingContainer({ model, track, display, ref, }) {
     const { classes } = useStyles();
-    // an LGV track always holds at least one linear display (activeDisplay =
-    // displays[0]); narrow to the linear shape for height/RenderingComponent
-    const display = track.activeDisplay;
-    const { height, RenderingComponent, DisplayBlurb } = display;
-    const { trackRefs, showTrackOutlines } = model;
+    const { RenderingComponent, DisplayBlurb } = display;
+    const { showTrackOutlines } = model;
     const trackId = track.trackId;
     const minimized = track.minimized;
-    // callback ref keeps trackRefs in sync as the rendering div mounts/unmounts
-    // (e.g. on minimize/restore), unlike a useEffect that misses the toggle
-    const setRef = useCallback((el) => {
-        if (el) {
-            trackRefs[trackId] = el;
-        }
-        else {
-            delete trackRefs[trackId];
-        }
-    }, [trackRefs, trackId]);
-    return (_jsx("div", { className: classes.trackRenderingContainer, style: {
-            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: {
+    return (_jsx("div", { ref: ref, className: classes.trackRenderingContainer, style: {
+            height: model.trackHeight(track),
+        }, "data-testid": `trackRenderingContainer-${model.id}-${trackId}`, children: !minimized ? (_jsxs(_Fragment, { children: [_jsx(TrackDisplayRegion, { model: model, track: track, className: classes.renderingComponentContainer, style: { left: showTrackOutlines ? -TRACK_OUTLINE_BORDER : 0 }, children: _jsx(Suspense, { fallback: _jsx(TrackOverlayPortal, { children: _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.js

@@ -1,11 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useRef } from 'react';
 import { PluggableElements } from '@jbrowse/core/ui';
-import { OverlayPointerProvider } from '@jbrowse/core/ui/highlightChipReveal';
-import { useMouseTracking } from '@jbrowse/core/ui/useMouseTracking';
+import { useStyleTheme } from '@jbrowse/core/ui/PaletteContext';
 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 { SCALE_BAR_HEIGHT } from '../consts.js';
 import Gridlines from './Gridlines.js';
@@ -13,7 +11,6 @@ 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';
@@ -24,6 +21,9 @@ const useStyles = makeStyles()({
     tracksContainer: {
         position: 'relative',
         contain: 'layout style',
+        // horizontal drags and pinches are the view's; vertical scroll stays the
+        // page's
+        touchAction: 'pan-y',
     },
     scalebarHighlights: {
         position: 'absolute',
@@ -39,40 +39,28 @@ const useStyles = makeStyles()({
 const TracksContainer = observer(function TracksContainer({ children, model, }) {
     const { classes } = useStyles();
     const { pluginManager } = getEnv(model);
-    const { mouseDown: sideScrollMouseDown, mouseUp } = useSideScroll(model);
+    const sideScroll = useSideScroll(model);
     const { showGridlines, showCenterLine } = model;
     const ref = useRef(null);
     // 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);
+    return (_jsxs("div", { ref: ref, "data-testid": "tracksContainer", className: classes.tracksContainer, onPointerDown: sideScroll.pointerDown, onClickCapture: sideScroll.clickCapture, onMouseDown: range.mouseDown, onMouseMove: 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] }) }));
+        }, 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 }), _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 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;
+    return getSession(model).highlightsVisible && model.highlights.length ? (_jsx(Suspense, { fallback: null, children: model.highlights.map((highlight, idx) => (_jsx(Highlight, { model: model, highlight: highlight }, highlightKey(highlight, idx)))) })) : null;
 });
 const ScalebarHighlightGroup = observer(function ScalebarHighlightGroup({ model, }) {
-    const theme = useTheme();
+    const theme = useStyleTheme();
     const { pluginManager } = getEnv(model);
     const { classes } = useStyles();
     const viewBands = getSession(model).highlightsVisible
-        ? model.highlight.map((h, idx) => {
+        ? model.highlights.map((h, idx) => {
             const coords = model.getHighlightCoords(h);
             return coords ? (_jsx(OverviewHighlightBand, { coords: coords, background: getHighlightColor(h, theme).toRgbString() }, highlightKey(h, idx))) : null;
         })

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

@@ -1,7 +1,6 @@
 import type { LinearGenomeViewModel } from '../index.ts';
-type LGV = LinearGenomeViewModel;
 declare const VerticalGuide: ({ model, coordX, }: {
-    model: LGV;
+    model: LinearGenomeViewModel;
     coordX: number;
 }) => import("react").JSX.Element;
 export default VerticalGuide;

package/esm/LinearGenomeView/components/VerticalGuide.js

@@ -1,24 +1,11 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { stringify } from '@jbrowse/core/util';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { GuideLabel } from '../../shared/coordLabels.js';
+import { VerticalGuideLine } from '../../shared/coordLabels.js';
 import { stickyChromeTops } from '../stickyChrome.js';
-const useStyles = makeStyles()({
-    guide: {
-        pointerEvents: 'none',
-        height: '100%',
-        width: 1,
-        position: 'absolute',
-        left: 0,
-        background: 'red',
-        zIndex: 1001,
-    },
-});
 const VerticalGuide = observer(function VerticalGuide({ model, coordX, }) {
-    const { classes } = useStyles();
     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)` } })] }));
+    return (_jsx(VerticalGuideLine, { coordX: coordX, viewWidth: width, stickyTop: scalebar, children: stringify(model.pxToBp(coordX)) }));
 });
 export default VerticalGuide;

package/esm/LinearGenomeView/components/ZoomButton.js

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

package/esm/LinearGenomeView/components/ZoomTransform.js

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

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

@@ -1,8 +1,7 @@
 import type { StatusCallback } from '@jbrowse/core/util';
-import type { StopToken } from '@jbrowse/core/util/stopToken';
 import type { Region } from '@jbrowse/core/util/types';
 import type { IAnyStateTreeNode } from '@jbrowse/mobx-state-tree';
 export declare function fetchSequence(model: IAnyStateTreeNode, regions: Region[], opts?: {
-    stopToken?: StopToken;
+    signal?: AbortSignal;
     statusCallback?: StatusCallback;
 }): Promise<import("@jbrowse/core/util").Feature[]>;

package/esm/LinearGenomeView/components/recentLocationsMenu.js

@@ -19,6 +19,16 @@ export function recentLocationsMenu({ recentLocations, onNavigate, onClear, }) {
                 label: 'Recent',
                 subMenu: [
                     ...recentLocations.map(({ label, loc }) => ({
+                        // the list dedupes on the location, so two rows can share a
+                        // display string — two features of the same name at different
+                        // loci, or two snippets ellipsized to the same text. `id` is what
+                        // keeps them separate rows to React, which otherwise keys both on
+                        // that one label.
+                        //
+                        // Prefixed, because a freehand row has no location and falls back
+                        // to its label, which may itself be a locstring — unprefixed, that
+                        // row and a recorded one at the same locus share an id.
+                        id: loc ? `loc:${loc}` : `query:${label}`,
                         label,
                         onClick: () => {
                             // a row that recorded a location navigates straight to it; one

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

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

package/esm/LinearGenomeView/components/searchModes.js

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

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

@@ -7,11 +7,8 @@ interface AnchorPosition {
     isClick: boolean;
 }
 export declare function useRangeSelect(ref: React.RefObject<HTMLDivElement | null>, model: LinearGenomeViewModel, shiftOnly?: boolean): {
-    open: boolean;
     isClick: boolean | undefined;
-    clickBpOffset: import("@jbrowse/core/util/Base1DUtils").PxToBpResult | undefined;
     guideX: number | undefined;
-    rubberbandOn: boolean;
     mouseDown: (event: React.MouseEvent<HTMLDivElement>) => void;
     mouseMove: (event: React.MouseEvent<HTMLDivElement>) => void;
     mouseOut: () => void;

package/esm/LinearGenomeView/components/useRangeSelect.js

@@ -1,8 +1,11 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { getRelativeX } from '@jbrowse/core/util/getRelativeX';
+import { useWindowDrag } from '../../shared/useWindowDrag.js';
+import { isOnScalebarRefLabel } from './util.js';
 export function useRangeSelect(ref, model, shiftOnly) {
     const [startX, setStartX] = useState();
     const [currentX, setCurrentX] = useState();
+    const [startedOnRefLabel, setStartedOnRefLabel] = useState(false);
     // clientX and clientY used for anchorPosition for menu
     // offsetX used for calculations about width of selection
     const [anchorPosition, setAnchorPosition] = useState();
@@ -14,67 +17,32 @@ export function useRangeSelect(ref, model, shiftOnly) {
         setCurrentX(undefined);
         setGuideX(undefined);
     }, []);
-    useEffect(() => {
-        const el = ref.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) {
-            if (startX === undefined) {
-                return;
-            }
-            const { clientX, clientY } = event;
-            const offsetX = clientX - left;
-            const isClick = Math.abs(offsetX - startX) <= 3;
-            // Clear the flag unconditionally once consumed: the label's own onClick
-            // also clears it, but that only fires if mouseup lands on the label, so
-            // relying on it alone can leave the flag stuck (swallowing the next
-            // scalebar click) when mouseup drifts a few px off the label edge.
-            const startedOnRefLabel = model.scalebarRefNameClickPending;
-            if (startedOnRefLabel) {
-                model.setScalebarRefNameClickPending(false);
-            }
-            // A click that began on a scalebar refname label is handled by that
-            // label's onClick (opens its menu), not by the rubberband menu here.
-            // Drop the hover guide too: the label's menu covers it while it is open,
-            // and nothing else clears it, so picking an item like "Focus on X" left a
-            // red line stranded on the scalebar with the pointer nowhere near it
+    useWindowDrag(ref, mouseDragging ? startX : undefined, {
+        onMove: setCurrentX,
+        onEnd: ({ startX, endX, isClick, clientX, clientY }) => {
+            // A click on a scalebar refName label belongs to the label's own menu.
+            // Drop the hover guide too: that menu covers it, and nothing else clears
+            // it once the menu closes
             if (isClick && startedOnRefLabel) {
                 setStartX(undefined);
                 setCurrentX(undefined);
                 setGuideX(undefined);
                 return;
             }
-            setAnchorPosition({ offsetX, clientX, clientY, isClick });
+            setAnchorPosition({ offsetX: endX, clientX, clientY, isClick });
             if (isClick) {
-                setGuideX(offsetX);
+                setGuideX(endX);
             }
             else {
-                model.setOffsets(model.pxToBp(Math.min(startX, offsetX)), model.pxToBp(Math.max(startX, offsetX)));
+                model.setOffsets(model.pxToBp(Math.min(startX, endX)), model.pxToBp(Math.max(startX, endX)));
                 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, ref]);
+        },
+        onCancel: () => {
+            setStartX(undefined);
+            setCurrentX(undefined);
+        },
+    });
     function mouseDown(event) {
         if (shiftOnly && !event.shiftKey) {
             return;
@@ -90,6 +58,7 @@ export function useRangeSelect(ref, model, shiftOnly) {
         // clear any leftover menu/selection so a fresh drag isn't blocked by a
         // stale anchorPosition keeping mouseDragging false
         setAnchorPosition(undefined);
+        setStartedOnRefLabel(isOnScalebarRefLabel(event.target));
         const relativeX = getRelativeX(event, ref.current);
         setStartX(relativeX);
         setCurrentX(relativeX);
@@ -111,11 +80,7 @@ export function useRangeSelect(ref, model, shiftOnly) {
         callback();
         handleClose();
     }
-    const open = Boolean(anchorPosition);
     const isClick = anchorPosition?.isClick;
-    const clickBpOffset = isClick
-        ? model.pxToBp(anchorPosition.offsetX)
-        : undefined;
     // rubberband geometry only exists while a drag is in progress (startX set);
     // grouped so a single truthiness check narrows all fields for RubberbandSpan
     let rubberband;
@@ -132,12 +97,8 @@ export function useRangeSelect(ref, model, shiftOnly) {
         };
     }
     return {
-        open,
         isClick,
-        clickBpOffset,
         guideX,
-        // true only mid-drag and not a click — drives RubberbandSpan vs guide
-        rubberbandOn: rubberband !== undefined && !isClick,
         mouseDown,
         mouseMove,
         mouseOut,

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

@@ -1,6 +1,20 @@
 import type { LinearGenomeViewModel } from '../index.ts';
 import type React from 'react';
+/**
+ * Drag to pan and pinch to zoom, on pointer events so a finger works the same
+ * as a mouse. A second finger turns a pan into a pinch: the spread between the
+ * two zooms about their midpoint, and moving the midpoint pans. Lifting either
+ * finger goes back to panning with the other.
+ *
+ * The host sets `touch-action` to leave the browser only the gestures this
+ * does not want (TracksContainer keeps vertical scroll); without it a touch
+ * drag is a page scroll and a pinch zooms the page, and no pointer stream
+ * arrives.
+ *
+ * The window listeners go on in the press handler itself rather than in an
+ * effect, so a release that lands before React commits still finds them.
+ */
 export declare function useSideScroll(model: LinearGenomeViewModel): {
-    mouseDown: (event: React.MouseEvent) => void;
-    mouseUp: (event: React.MouseEvent) => void;
+    pointerDown: (event: React.PointerEvent) => void;
+    clickCapture: (event: React.MouseEvent) => void;
 };