@jbrowse/plugin-linear-genome-view 3.6.5 → 4.0.0

package/esm/LinearGenomeView/components/TrackContainer.js

@@ -2,45 +2,57 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { ErrorMessage, ResizeHandle } from '@jbrowse/core/ui';
 import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary';
+import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
+import { isAlive } from '@jbrowse/mobx-state-tree';
 import { Paper } from '@mui/material';
 import { observer } from 'mobx-react';
-import { isAlive } from 'mobx-state-tree';
-import { makeStyles } from 'tss-react/mui';
-import Gridlines from './Gridlines';
-import TrackLabelContainer from './TrackLabelContainer';
-import TrackRenderingContainer from './TrackRenderingContainer';
-const useStyles = makeStyles()({
+import Gridlines from "./Gridlines.js";
+import TrackLabelContainer from "./TrackLabelContainer.js";
+import TrackRenderingContainer from "./TrackRenderingContainer.js";
+import { shouldSwapTracks } from "./util.js";
+const useStyles = makeStyles()(theme => ({
     root: {
         marginTop: 2,
         overflow: 'hidden',
         position: 'relative',
+        contain: 'layout style paint',
     },
     unpinnedTrack: {
         background: 'none',
     },
     resizeHandle: {
-        height: 3,
+        height: 4,
         boxSizing: 'border-box',
         position: 'relative',
+        background: 'transparent',
+        '&:hover': {
+            background: theme.palette.divider,
+        },
     },
-});
-const TrackContainer = observer(function ({ model, track, }) {
-    const { classes, cx } = useStyles();
+}));
+const TrackContainer = observer(function TrackContainer({ model, track, }) {
+    const { classes } = useStyles();
     const display = track.displays[0];
     const { draggingTrackId, showTrackOutlines } = model;
     const ref = useRef(null);
     return (_jsxs(Paper, { ref: ref, className: cx(classes.root, track.pinned ? null : classes.unpinnedTrack), variant: showTrackOutlines ? 'outlined' : undefined, elevation: showTrackOutlines ? undefined : 0, onClick: event => {
-            var _a;
-            if (event.detail === 2 && !track.displays[0].featureIdUnderMouse) {
-                const left = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0;
+            if (event.detail === 2 && !display.featureIdUnderMouse) {
+                const left = ref.current?.getBoundingClientRect().left || 0;
                 model.zoomTo(model.bpPerPx / 2, event.clientX - left, true);
             }
-        }, children: [track.pinned ? _jsx(Gridlines, { model: model, offset: 1 }) : null, _jsx(TrackLabelContainer, { track: track, view: model }), _jsx(ErrorBoundary, { FallbackComponent: e => _jsx(ErrorMessage, { error: e.error }), children: _jsx(TrackRenderingContainer, { model: model, track: track, onDragEnter: () => {
-                        if (isAlive(display) &&
-                            draggingTrackId !== undefined &&
-                            draggingTrackId !== display.id) {
-                            model.moveTrack(draggingTrackId, track.id);
-                        }
-                    } }) }), _jsx(ResizeHandle, { onDrag: display.resizeHeight, className: classes.resizeHandle })] }));
+        }, onDragOver: event => {
+            if (isAlive(display) &&
+                draggingTrackId !== undefined &&
+                draggingTrackId !== display.id) {
+                const draggingIdx = model.tracks.findIndex(t => t.id === draggingTrackId);
+                const targetIdx = model.tracks.findIndex(t => t.id === track.id);
+                const movingDown = targetIdx > draggingIdx;
+                const currentY = event.clientY;
+                if (shouldSwapTracks(model.lastTrackDragY, currentY, movingDown)) {
+                    model.setLastTrackDragY(currentY);
+                    model.moveTrack(draggingTrackId, track.id);
+                }
+            }
+        }, children: [track.pinned ? _jsx(Gridlines, { model: model, offset: 1 }) : null, _jsx(TrackLabelContainer, { track: track, view: model }), _jsx(ErrorBoundary, { FallbackComponent: e => _jsx(ErrorMessage, { error: e.error }), children: _jsx(TrackRenderingContainer, { model: model, track: track }) }), _jsx(ResizeHandle, { onDrag: display.resizeHeight, className: classes.resizeHandle })] }));
 });
 export default TrackContainer;

package/esm/LinearGenomeView/components/TrackLabel.js

@@ -1,15 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { getConf } from '@jbrowse/core/configuration';
 import { SanitizedHTML } from '@jbrowse/core/ui';
 import { getContainingView, getSession } from '@jbrowse/core/util';
 import { getTrackName } from '@jbrowse/core/util/tracks';
+import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
 import CloseIcon from '@mui/icons-material/Close';
 import { IconButton, Paper, Typography, alpha } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import TrackLabelDragHandle from './TrackLabelDragHandle';
-import TrackLabelMenu from './TrackLabelMenu';
+import TrackLabelDragHandle from "./TrackLabelDragHandle.js";
+import TrackLabelMenu from "./TrackLabelMenu.js";
 const useStyles = makeStyles()(theme => ({
     root: {
         zIndex: 200,
@@ -19,25 +18,25 @@ const useStyles = makeStyles()(theme => ({
         },
     },
     trackName: {
+        margin: '0 auto',
+        width: '90%',
         fontSize: '0.8rem',
+        pointerEvents: 'none',
     },
     iconButton: {
         padding: theme.spacing(1),
     },
 }));
 const TrackLabel = observer(forwardRef(function TrackLabel2({ track, className }, ref) {
-    const { classes, cx } = useStyles();
+    const { classes } = useStyles();
     const view = getContainingView(track);
     const session = getSession(track);
-    const trackConf = track.configuration;
     const { minimized } = track;
-    const trackId = getConf(track, 'trackId');
-    const trackName = getTrackName(trackConf, session);
+    const trackId = track.trackId;
+    const trackName = getTrackName(track.configuration, session);
     return (_jsxs(Paper, { ref: ref, className: cx(className, classes.root), onClick: event => {
             event.stopPropagation();
-        }, children: [_jsx(TrackLabelDragHandle, { track: track, trackId: trackId, view: view }), _jsx(IconButton, { onClick: () => view.hideTrack(trackId), className: classes.iconButton, title: "close this track", children: _jsx(CloseIcon, { fontSize: "small" }) }), _jsx(Typography, { variant: "body1", component: "span", className: classes.trackName, onMouseDown: event => {
-                    event.stopPropagation();
-                }, children: _jsx(SanitizedHTML, { html: [trackName, minimized ? '(minimized)' : '']
+        }, children: [_jsx(TrackLabelDragHandle, { track: track, trackId: trackId, view: view }), _jsx(IconButton, { onClick: () => view.hideTrack(trackId), className: classes.iconButton, title: "close this track", children: _jsx(CloseIcon, { fontSize: "small" }) }), _jsx(Typography, { variant: "body1", component: "span", className: classes.trackName, children: _jsx(SanitizedHTML, { html: [trackName, minimized ? '(minimized)' : '']
                         .filter(f => !!f)
                         .join(' ') }) }), _jsx(TrackLabelMenu, { track: track })] }));
 }));

package/esm/LinearGenomeView/components/TrackLabelContainer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import TrackLabel from './TrackLabel';
+import TrackLabel from "./TrackLabel.js";
 const useStyles = makeStyles()({
     trackLabel: {
         zIndex: 2,
@@ -14,13 +14,12 @@ const useStyles = makeStyles()({
         position: 'absolute',
     },
 });
-const TrackLabelContainer = observer(function ({ track, view, }) {
-    const { classes, cx } = useStyles();
+const TrackLabelContainer = observer(function TrackLabelContainer({ track, view, }) {
+    const { classes } = useStyles();
     const display = track.displays[0];
-    const { trackLabel, trackLabelOverlap, trackLabelOffset } = classes;
     const labelStyle = view.trackLabelsSetting !== 'overlapping' || display.prefersOffset
-        ? trackLabelOffset
-        : trackLabelOverlap;
-    return view.trackLabelsSetting !== 'hidden' ? (_jsx(TrackLabel, { track: track, className: cx(trackLabel, labelStyle) })) : null;
+        ? classes.trackLabelOffset
+        : classes.trackLabelOverlap;
+    return view.trackLabelsSetting !== 'hidden' ? (_jsx(TrackLabel, { track: track, className: cx(classes.trackLabel, labelStyle) })) : null;
 });
 export default TrackLabelContainer;

package/esm/LinearGenomeView/components/TrackLabelDragHandle.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import DragIcon from '@mui/icons-material/DragIndicator';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     dragHandle: {
         cursor: 'grab',

package/esm/LinearGenomeView/components/TrackLabelMenu.js

@@ -1,4 +1,5 @@
 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';
@@ -6,83 +7,94 @@ 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 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';
-const TrackLabelMenu = observer(function ({ track, }) {
-    var _a;
+const TrackLabelMenu = observer(function TrackLabelMenu({ track, }) {
     const view = getContainingView(track);
     const session = getSession(track);
-    const trackConf = track.configuration;
-    const minimized = track.minimized;
-    const pinned = track.pinned;
-    const { isTopLevelView } = view;
-    const items = [
-        ...(!isTopLevelView
-            ? []
-            : [
-                {
-                    label: pinned ? 'Unpin track' : 'Pin track',
-                    icon: PushPinIcon,
-                    onClick: () => {
-                        track.setPinned(!pinned);
-                    },
-                },
-            ]),
-        {
-            label: 'Track order',
-            type: 'subMenu',
-            priority: 2000,
-            subMenu: [
-                {
-                    label: minimized ? 'Restore track' : 'Minimize track',
-                    icon: minimized ? AddIcon : MinimizeIcon,
-                    onClick: () => {
-                        track.setMinimized(!minimized);
-                    },
-                },
-                ...(view.tracks.length > 2
-                    ? [
-                        {
-                            label: 'Move track to top',
-                            icon: KeyboardDoubleArrowUpIcon,
-                            onClick: () => {
-                                view.moveTrackToTop(track.id);
+    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] : []) || [];
+        return [
+            {
+                label: 'Track order',
+                icon: LowPriorityIcon,
+                type: 'subMenu',
+                priority: 1000,
+                subMenu: [
+                    ...(!isTopLevelView
+                        ? []
+                        : [
+                            {
+                                label: pinned ? 'Unpin track' : 'Pin track',
+                                icon: PushPinIcon,
+                                onClick: () => {
+                                    track.setPinned(!pinned);
+                                },
                             },
+                        ]),
+                    {
+                        label: minimized ? 'Restore track' : 'Minimize track',
+                        icon: minimized ? AddIcon : MinimizeIcon,
+                        onClick: () => {
+                            track.setMinimized(!minimized);
                         },
-                    ]
-                    : []),
-                {
-                    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);
+                    ...(view.tracks.length > 2
+                        ? [
+                            {
+                                label: 'Move track to top',
+                                icon: KeyboardDoubleArrowUpIcon,
+                                onClick: () => {
+                                    view.moveTrackToTop(track.id);
+                                },
                             },
-                        },
-                    ]
-                    : []),
-            ],
-        },
-        ...(((_a = session.getTrackActionMenuItems) === null || _a === void 0 ? void 0 : _a.call(session, trackConf)) || []),
-        ...track.trackMenuItems(),
-    ].sort((a, b) => ((b === null || b === void 0 ? void 0 : b.priority) || 0) - ((a === null || a === void 0 ? void 0 : a.priority) || 0));
-    return (_jsx(CascadingMenuButton, { menuItems: items, "data-testid": "track_menu_icon", children: _jsx(MoreVertIcon, { fontSize: "small" }) }));
+                        ]
+                        : []),
+                    ...(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" }) }));
 });
 export default TrackLabelMenu;

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

@@ -1,9 +1,8 @@
 import type { LinearGenomeViewModel } from '..';
 import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 type LGV = LinearGenomeViewModel;
-declare const TrackRenderingContainer: ({ model, track, onDragEnter, }: {
+declare const TrackRenderingContainer: ({ model, track, }: {
     model: LGV;
     track: BaseTrackModel;
-    onDragEnter: () => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default TrackRenderingContainer;

package/esm/LinearGenomeView/components/TrackRenderingContainer.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, useEffect, useRef } from 'react';
-import { getConf } from '@jbrowse/core/configuration';
 import { LoadingEllipses } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     renderingComponentContainer: {
         position: 'absolute',
@@ -17,14 +16,15 @@ const useStyles = makeStyles()({
         whiteSpace: 'nowrap',
         position: 'relative',
         background: 'none',
+        contain: 'strict',
     },
 });
-const TrackRenderingContainer = observer(function ({ model, track, onDragEnter, }) {
+const TrackRenderingContainer = observer(function TrackRenderingContainer({ model, track, }) {
     const { classes } = useStyles();
     const display = track.displays[0];
     const { height, RenderingComponent, DisplayBlurb } = display;
     const { trackRefs, id, scaleFactor } = model;
-    const trackId = getConf(track, 'trackId');
+    const trackId = track.trackId;
     const ref = useRef(null);
     const minimized = track.minimized;
     useEffect(() => {
@@ -37,7 +37,7 @@ const TrackRenderingContainer = observer(function ({ model, track, onDragEnter,
     }, [trackRefs, trackId]);
     return (_jsx("div", { className: classes.trackRenderingContainer, style: {
             height: minimized ? 20 : height,
-        }, onScroll: evt => display.setScrollTop(evt.currentTarget.scrollTop), onDragEnter: onDragEnter, "data-testid": `trackRenderingContainer-${id}-${trackId}`, children: !minimized ? (_jsxs(_Fragment, { children: [_jsx("div", { ref: ref, className: classes.renderingComponentContainer, style: {
+        }, 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: {
                         position: 'absolute',

package/esm/LinearGenomeView/components/TracksContainer.js

@@ -2,22 +2,23 @@ import { 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 { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import Gridlines from './Gridlines';
-import Rubberband from './Rubberband';
-import Scalebar from './Scalebar';
-import VerticalGuide from './VerticalGuide';
-import { SCALE_BAR_HEIGHT } from '../consts';
-import { useRangeSelect } from './useRangeSelect';
-import { useSideScroll } from './useSideScroll';
-import { useWheelScroll } from './useWheelScroll';
-const CenterLine = lazy(() => import('./CenterLine'));
-const Highlight = lazy(() => import('./Highlight'));
-const RubberbandSpan = lazy(() => import('./RubberbandSpan'));
+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"));
 const useStyles = makeStyles()({
     tracksContainer: {
         position: 'relative',
+        contain: 'layout style',
     },
 });
 const TracksContainer = observer(function TracksContainer({ children, model, }) {
@@ -26,16 +27,18 @@ const TracksContainer = observer(function TracksContainer({ children, model, })
     const { mouseDown: mouseDown1, mouseUp } = useSideScroll(model);
     const { stickyViewHeaders, rubberbandTop, showGridlines, showCenterLine } = model;
     const ref = useRef(null);
-    const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown: mouseDown2, } = useRangeSelect(ref, model, true);
+    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 => {
+    return (_jsxs("div", { ref: ref, "data-testid": "tracksContainer", className: classes.tracksContainer, style: { '--offset-px': `${model.offsetPx}px` }, 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 ? (_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, anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
                     left: anchorPosition.clientX,
                     top: anchorPosition.clientY,
-                }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null, _jsx(Rubberband, { model: model, ControlComponent: _jsx(Scalebar, { model: model, style: {
+                }, 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] }));

package/esm/LinearGenomeView/components/VerticalGuide.js

@@ -1,19 +1,21 @@
 import { jsx as _jsx, Fragment as _Fragment, 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 { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     guide: {
         pointerEvents: 'none',
         height: '100%',
         width: 1,
         position: 'absolute',
+        left: 0,
         background: 'red',
         zIndex: 1001,
     },
     tooltipTarget: {
         position: 'sticky',
+        left: 0,
         width: 1,
     },
 });
@@ -21,9 +23,9 @@ 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: {
-                        left: coordX + 6,
+                        transform: `translateX(${coordX + 6}px)`,
                         top: rubberbandTop,
                         position: stickyViewHeaders ? 'sticky' : undefined,
-                    } }) }), _jsx("div", { className: classes.guide, style: { left: coordX } })] }));
+                    } }) }), _jsx("div", { className: classes.guide, style: { transform: `translateX(${coordX}px)` } })] }));
 });
 export default VerticalGuide;

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

@@ -1,4 +1,9 @@
-import type { LinearGenomeViewModel } from '../model';
+import type { BpOffset } from '../types.ts';
 import type { Feature } from '@jbrowse/core/util';
 import type { Region } from '@jbrowse/core/util/types';
-export declare function fetchSequence(model: LinearGenomeViewModel, regions: Region[]): Promise<Feature[]>;
+export declare function fetchSequence(model: {
+    leftOffset?: BpOffset;
+    rightOffset?: BpOffset;
+    getSelectedRegions: (left?: BpOffset, right?: BpOffset) => Region[];
+    setOffsets: (left?: BpOffset, right?: BpOffset) => void;
+}, regions: Region[]): Promise<Feature[]>;

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

@@ -4,24 +4,49 @@ interface AnchorPosition {
     offsetX: number;
     clientX: number;
     clientY: number;
+    isClick?: boolean;
 }
 export declare function useRangeSelect(ref: React.RefObject<HTMLDivElement | null>, model: LinearGenomeViewModel, shiftOnly?: boolean): {
     open: boolean;
+    isClick: boolean | undefined;
+    clickBpOffset: {
+        coord: number;
+        index: number;
+        refName: string;
+        oob: boolean;
+        assemblyName: string;
+        offset: number;
+        start: number;
+        end: number;
+        reversed?: boolean;
+    } | undefined;
     guideX: number | undefined;
     mouseDown: (event: React.MouseEvent<HTMLDivElement>) => void;
     mouseMove: (event: React.MouseEvent<HTMLDivElement>) => void;
     mouseOut: () => void;
+    handleClose: () => void;
     handleMenuItemClick: (_: unknown, callback: () => void) => void;
+    anchorPosition: AnchorPosition | undefined;
     rubberbandOn?: undefined;
-    handleClose?: undefined;
     leftBpOffset?: undefined;
     rightBpOffset?: undefined;
-    anchorPosition?: undefined;
     numOfBpSelected?: undefined;
     width?: undefined;
     left?: undefined;
 } | {
     open: boolean;
+    isClick: boolean | undefined;
+    clickBpOffset: {
+        coord: number;
+        index: number;
+        refName: string;
+        oob: boolean;
+        assemblyName: string;
+        offset: number;
+        start: number;
+        end: number;
+        reversed?: boolean;
+    } | undefined;
     rubberbandOn: boolean;
     mouseDown: (event: React.MouseEvent<HTMLDivElement>) => void;
     mouseMove: (event: React.MouseEvent<HTMLDivElement>) => void;