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

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,12 +15,11 @@ 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;
-            if (target.parentNode) {
-                const parent = target.parentNode;
+            const parent = event.currentTarget.parentElement;
+            if (parent) {
                 event.dataTransfer.setDragImage(parent, 20, 20);
                 view.setDraggingTrackId(track.id);
             }

package/esm/LinearGenomeView/components/TrackLabelMenu.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
-import { getContainingView, getSession } from '@jbrowse/core/util';
+import { TRACK_MENU_PRIORITY, subMenuIfAny } from '@jbrowse/core/ui/menuItems';
+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 +19,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 });
@@ -26,21 +28,16 @@ const TrackLabelMenu = observer(function TrackLabelMenu({ track, }) {
             view,
         }) ?? [];
         return [
-            ...(orderSubMenu.length
-                ? [
-                    {
-                        label: 'Track order',
-                        icon: LowPriorityIcon,
-                        type: 'subMenu',
-                        priority: 1000,
-                        subMenu: orderSubMenu,
-                    },
-                ]
-                : []),
+            ...subMenuIfAny({
+                label: 'Track order',
+                icon: LowPriorityIcon,
+                priority: TRACK_MENU_PRIORITY.trackOrder,
+                subMenu: orderSubMenu,
+            }),
             ...sessionItems,
             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" }) }));
 });

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

@@ -1,9 +1,8 @@
 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 track label's warning for a file that does not fit its assembly: its
+ * reference names have nothing in common with the assembly's, so the track
+ * draws nothing, or its contig lengths say it was made against another build.
  *
  * The label rather than the display chrome, deliberately. The chrome's states
  * are `displayPhase`'s, which are mutually exclusive and two of which replace

package/esm/LinearGenomeView/components/TrackLabelRefNameWarning.js

@@ -1,6 +1,6 @@
 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 { contigLengthMismatchMessage, 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';
@@ -12,11 +12,24 @@ const useStyles = makeStyles()(theme => ({
         color: theme.palette.warning.main,
     },
 }));
+function warningFor(track) {
+    const { refNameMismatch, contigLengthMismatch } = track;
+    return refNameMismatch
+        ? {
+            title: 'Reference names do not match the assembly',
+            message: refNameMismatchMessage(refNameMismatch),
+        }
+        : contigLengthMismatch
+            ? {
+                title: 'Reference sequence lengths do not match the assembly',
+                message: contigLengthMismatchMessage(contigLengthMismatch),
+            }
+            : undefined;
+}
 /**
- * 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 track label's warning for a file that does not fit its assembly: its
+ * reference names have nothing in common with the assembly's, so the track
+ * draws nothing, or its contig lengths say it was made against another build.
  *
  * The label rather than the display chrome, deliberately. The chrome's states
  * are `displayPhase`'s, which are mutually exclusive and two of which replace
@@ -32,15 +45,15 @@ const useStyles = makeStyles()(theme => ({
 const TrackLabelRefNameWarning = observer(function TrackLabelRefNameWarning({ track, }) {
     const { classes } = useStyles();
     const [open, setOpen] = useState(false);
-    const { refNameMismatch } = track;
-    if (!refNameMismatch) {
+    const warning = warningFor(track);
+    if (!warning) {
         return null;
     }
-    const message = refNameMismatchMessage(refNameMismatch);
+    const { title, message } = warning;
     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: () => {
+                }, className: classes.iconButton, title: message, "data-testid": `track-refname-warning-${track.trackId}`, children: _jsx(WarningIcon, { fontSize: "small" }) }), open ? (_jsxs(InfoDialog, { open: true, title: title, 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] }));
+                }, 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, with the lengths it states." })] })) : null] }));
 });
 export default TrackLabelRefNameWarning;

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

@@ -1,8 +1,10 @@
-import type { LinearGenomeViewModel } from '../index.ts';
-import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
+import type { LinearGenomeViewModel, LinearGenomeViewTrack } from '../index.ts';
+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;
+    track: LinearGenomeViewTrack;
+    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
@@ -17,7 +18,7 @@ const useStyles = makeStyles()({
         width: '100%',
     },
     // Tracks never scroll natively on this outer container — every display owns
-    // its own vertical scroll: canvas displays scroll an inner sticky-canvas
+    // its own vertical scroll: feature 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
@@ -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 { showGridlines, showCenterLine } = model;
+    const sideScroll = useSideScroll(model);
+    const { axisGrid: 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, ...sideScroll, 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/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/fetchSequence.js

@@ -1,5 +1,5 @@
 import { getSequenceAdapterConfig } from '@jbrowse/core/assemblyManager/assembly';
-import { getSession } from '@jbrowse/core/util';
+import { assembleLocString, getSession } from '@jbrowse/core/util';
 export async function fetchSequence(model, regions, opts = {}) {
     const session = getSession(model);
     const assemblyNames = new Set(regions.map(r => r.assemblyName));
@@ -25,10 +25,18 @@ export async function fetchSequence(model, regions, opts = {}) {
     if (!adapterConfig) {
         throw new Error(`assembly ${assemblyName} has no resolved configuration, so its sequence adapter cannot be read`);
     }
-    const sessionId = 'getSequence';
-    return rpcManager.call(sessionId, 'CoreGetFeatures', {
-        adapterConfig,
-        regions,
-        ...opts,
-    });
+    // one call per region: a multi-region fetch merges its regions' streams in
+    // the order they finish, and a region the sequence lacks yields nothing,
+    // where the reader wants one entry per selected region, in selection order
+    return Promise.all(regions.map(async (region) => {
+        const [feature] = await rpcManager.call('getSequence', 'CoreGetFeatures', {
+            adapterConfig,
+            regions: [region],
+            ...opts,
+        });
+        if (!feature) {
+            throw new Error(`no sequence found for ${assembleLocString(region)} in assembly ${assemblyName}`);
+        }
+        return 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/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,12 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { getRelativeX } from '@jbrowse/core/util/getRelativeX';
+import { isClaimedPress, isFromPortal } from '@jbrowse/core/util/pressOwner';
+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,69 +18,37 @@ 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) {
+        if (event.button !== 0 ||
+            (shiftOnly
+                ? !event.shiftKey || isClaimedPress(event)
+                : isFromPortal(event))) {
             return;
         }
         // a press with the refName menu already open reopens it on the label under
@@ -90,13 +62,14 @@ 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);
     }
     function mouseMove(event) {
         // Keep the rubberband visible while a drag-selection menu is open
-        if (anchorPosition?.isClick === false) {
+        if (anchorPosition?.isClick === false || isFromPortal(event)) {
             return;
         }
         const wantsGuide = !mouseDragging && (!shiftOnly || event.shiftKey);
@@ -111,11 +84,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 +101,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/useSearchBoxPrefs.d.ts

@@ -22,5 +22,7 @@ export type SearchBoxPrefs = ReturnType<typeof useSearchBoxPrefs>;
 /**
  * The menu rows that drive those prefs. "Stacked" rather than "Vertical": the
  * two headers name the same state and had drifted apart on it once already.
+ * A caller spreading the rows into a "Show" submenu passes `'Search boxes'`
+ * as the toggle's label.
  */
-export declare function searchBoxMenuItems({ showSearchBoxes, setShowSearchBoxes, sideBySide, setSideBySide, }: SearchBoxPrefs): MenuItem[];
+export declare function searchBoxMenuItems({ showSearchBoxes, setShowSearchBoxes, sideBySide, setSideBySide, }: SearchBoxPrefs, toggleLabel?: string): MenuItem[];

package/esm/LinearGenomeView/components/useSearchBoxPrefs.js

@@ -22,11 +22,13 @@ export function useSearchBoxPrefs(prefix, numViews) {
 /**
  * The menu rows that drive those prefs. "Stacked" rather than "Vertical": the
  * two headers name the same state and had drifted apart on it once already.
+ * A caller spreading the rows into a "Show" submenu passes `'Search boxes'`
+ * as the toggle's label.
  */
-export function searchBoxMenuItems({ showSearchBoxes, setShowSearchBoxes, sideBySide, setSideBySide, }) {
+export function searchBoxMenuItems({ showSearchBoxes, setShowSearchBoxes, sideBySide, setSideBySide, }, toggleLabel = 'Show search boxes') {
     return [
         {
-            label: 'Show search boxes',
+            label: toggleLabel,
             type: 'checkbox',
             checked: showSearchBoxes,
             onClick: () => {