@jbrowse/plugin-linear-genome-view 3.0.5 → 3.2.0

package/esm/BaseLinearDisplay/components/BlockLoadingMessage.d.ts

@@ -0,0 +1,6 @@
+declare const BlockLoadingMessage: ({ model, }: {
+    model: {
+        status?: string;
+    };
+}) => import("react/jsx-runtime").JSX.Element;
+export default BlockLoadingMessage;

package/esm/BaseLinearDisplay/components/BlockLoadingMessage.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LoadingEllipses } from '@jbrowse/core/ui';
+import { observer } from 'mobx-react';
+import { getParent } from 'mobx-state-tree';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()(theme => {
+    const bg = theme.palette.action.disabledBackground;
+    return {
+        loading: {
+            paddingLeft: '0.6em',
+            backgroundColor: theme.palette.background.default,
+            backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 5px, ${bg} 5px, ${bg} 10px)`,
+            textAlign: 'center',
+        },
+    };
+});
+const BlockLoadingMessage = observer(function ({ model, }) {
+    const { classes } = useStyles();
+    const { status: blockStatus } = model;
+    const { message: displayStatus } = getParent(model, 2);
+    const status = displayStatus || blockStatus;
+    return (_jsx("div", { className: classes.loading, children: _jsx(LoadingEllipses, { message: status }) }));
+});
+export default BlockLoadingMessage;

package/esm/BaseLinearDisplay/components/BlockMsg.js

@@ -9,7 +9,9 @@ const useStyles = makeStyles()({
 });
 export default function BlockMsg({ message, severity, action, }) {
     const { classes } = useStyles();
-    return (_jsx(Alert, { onClick: event => {
+    return (_jsx(Alert, { severity: severity, action: action, classes: {
+            message: classes.ellipses,
+        }, onMouseDown: event => {
             event.stopPropagation();
-        }, severity: severity, action: action, classes: { message: classes.ellipses }, children: _jsx(Tooltip, { title: message, children: _jsx("div", { children: message }) }) }));
+        }, children: _jsx(Tooltip, { title: message, children: _jsx("div", { children: message }) }) }));
 }

package/esm/BaseLinearDisplay/components/ServerSideRenderedBlockContent.js

@@ -1,38 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Suspense, isValidElement, lazy } from 'react';
-import { LoadingEllipses } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
-import { getParent } from 'mobx-state-tree';
-import { makeStyles } from 'tss-react/mui';
+import BlockLoadingMessage from './BlockLoadingMessage';
 import BlockMsg from './BlockMsg';
-const BlockError = lazy(() => import('./BlockError'));
-const useStyles = makeStyles()(theme => {
-    const bg = theme.palette.action.disabledBackground;
-    return {
-        loading: {
-            paddingLeft: '0.6em',
-            backgroundColor: theme.palette.background.default,
-            backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 5px, ${bg} 5px, ${bg} 10px)`,
-            textAlign: 'center',
-        },
-    };
-});
-const LoadingMessage = observer(({ model }) => {
-    const { classes } = useStyles();
-    const { status: blockStatus } = model;
-    const { message: displayStatus } = getParent(model, 2);
-    const status = displayStatus || blockStatus;
-    return (_jsx("div", { className: classes.loading, children: _jsx(LoadingEllipses, { message: status }) }));
-});
+const BlockErrorMessage = lazy(() => import('./BlockErrorMessage'));
 const ServerSideRenderedBlockContent = observer(function ({ model, }) {
     if (model.error) {
-        return (_jsx(Suspense, { fallback: null, children: _jsx(BlockError, { model: model }) }));
+        return (_jsx(Suspense, { fallback: null, children: _jsx(BlockErrorMessage, { model: model }) }));
     }
     else if (model.message) {
         return isValidElement(model.message) ? (model.message) : (_jsx(BlockMsg, { message: `${model.message}`, severity: "info" }));
     }
     else if (!model.filled) {
-        return _jsx(LoadingMessage, { model: model });
+        return _jsx(BlockLoadingMessage, { model: model });
     }
     else {
         return model.reactElement;

package/esm/BaseLinearDisplay/models/BaseLinearDisplayModel.js

@@ -78,14 +78,14 @@ function stateModelFactory() {
             return (_b = (_a = self.blockState.get(blockKey)) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.getByID(id);
         },
         searchFeatureByID(id) {
+            var _a;
             let ret;
-            self.blockState.forEach(block => {
-                var _a;
+            for (const block of self.blockState.values()) {
                 const val = (_a = block.layout) === null || _a === void 0 ? void 0 : _a.getByID(id);
                 if (val) {
                     ret = val;
                 }
-            });
+            }
             return ret;
         },
     }))
@@ -138,9 +138,9 @@ function stateModelFactory() {
                 self.setError();
                 self.setCurrStatsBpPerPx(0);
                 self.clearFeatureDensityStats();
-                [...self.blockState.values()].forEach(val => {
+                for (const val of self.blockState.values()) {
                     val.doReload();
-                });
+                }
                 superReload();
             },
         };
@@ -230,17 +230,17 @@ function stateModelFactory() {
                 if (!view.initialized) {
                     return;
                 }
-                self.blockDefinitions.contentBlocks.forEach(block => {
+                for (const block of self.blockDefinitions.contentBlocks) {
                     blocksPresent[block.key] = true;
                     if (!self.blockState.has(block.key)) {
                         self.addBlock(block.key, block);
                     }
-                });
-                self.blockState.forEach((_, key) => {
+                }
+                for (const key of self.blockState.keys()) {
                     if (!blocksPresent[key]) {
                         self.deleteBlock(key);
                     }
-                });
+                }
             }));
         },
     }))

package/esm/LaunchLinearGenomeView/index.js

@@ -20,7 +20,7 @@ export default function LaunchLinearGenomeViewF(pluginManager) {
                 view.setHideHeader(!nav);
             }
             if (highlight !== undefined) {
-                highlight.forEach(async (h) => {
+                for (const h of highlight) {
                     const p = parseLocString(h, refName => assemblyManager.isValidRefName(refName, assembly));
                     const { start, end } = p;
                     if (start !== undefined && end !== undefined) {
@@ -31,13 +31,17 @@ export default function LaunchLinearGenomeViewF(pluginManager) {
                             assemblyName: assembly,
                         });
                     }
-                });
+                }
             }
-            await handleSelectedRegion({ input: loc, model: view, assembly: asm });
+            await handleSelectedRegion({
+                input: loc,
+                model: view,
+                assembly: asm,
+            });
             const idsNotFound = [];
-            tracks.forEach(track => {
+            for (const track of tracks) {
                 tryTrack(view, track, idsNotFound);
-            });
+            }
             if (idsNotFound.length) {
                 throw new Error(`Could not resolve identifiers: ${idsNotFound.join(',')}`);
             }

package/esm/LinearGenomeView/components/CenterLine.js

@@ -6,7 +6,7 @@ const useStyles = makeStyles()(theme => ({
     centerLineContainer: {
         background: 'transparent',
         height: '100%',
-        zIndex: 5,
+        zIndex: 4,
         position: 'absolute',
         border: `1px ${theme.palette.action.active} dashed`,
         borderTop: 'none',

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

@@ -1,6 +1,7 @@
 import type { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
-declare const Gridlines: ({ model }: {
+declare const Gridlines: ({ model, offset, }: {
     model: LGV;
+    offset?: number;
 }) => import("react/jsx-runtime").JSX.Element;
 export default Gridlines;

package/esm/LinearGenomeView/components/Gridlines.js

@@ -6,15 +6,14 @@ import { makeTicks } from '../util';
 const useStyles = makeStyles()(theme => ({
     verticalGuidesZoomContainer: {
         position: 'absolute',
+        top: 0,
         height: '100%',
         width: '100%',
-        zIndex: 1,
         pointerEvents: 'none',
     },
     verticalGuidesContainer: {
         position: 'absolute',
         height: '100%',
-        zIndex: 1,
         pointerEvents: 'none',
         display: 'flex',
     },
@@ -56,13 +55,13 @@ const RenderedVerticalGuides = observer(({ model }) => {
             return null;
         }) }));
 });
-const Gridlines = observer(function ({ model }) {
+const Gridlines = observer(function ({ model, offset = 0, }) {
     const { classes } = useStyles();
     const offsetLeft = model.staticBlocks.offsetPx - model.offsetPx;
     return (_jsx("div", { className: classes.verticalGuidesZoomContainer, style: {
             transform: model.scaleFactor !== 1 ? `scaleX(${model.scaleFactor})` : undefined,
         }, children: _jsx("div", { className: classes.verticalGuidesContainer, style: {
-                left: offsetLeft,
+                left: offsetLeft - offset,
                 width: model.staticBlocks.totalWidthPx,
             }, children: _jsx(RenderedVerticalGuides, { model: model }) }) }));
 });

package/esm/LinearGenomeView/components/Header.js

@@ -8,9 +8,11 @@ import HeaderTrackSelectorButton from './HeaderTrackSelectorButton';
 import HeaderZoomControls from './HeaderZoomControls';
 import OverviewScalebar from './OverviewScalebar';
 import SearchBox from './SearchBox';
+import { HEADER_BAR_HEIGHT } from '../consts';
 const useStyles = makeStyles()({
     headerBar: {
         display: 'flex',
+        height: HEADER_BAR_HEIGHT,
     },
     headerForm: {
         flexWrap: 'nowrap',

package/esm/LinearGenomeView/components/LinearGenomeView.js

@@ -1,21 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, lazy, useEffect, useRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { lazy } from 'react';
 import { LoadingEllipses } from '@jbrowse/core/ui';
-import { getSession } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import TrackContainer from './TrackContainer';
-import TracksContainer from './TracksContainer';
+import LinearGenomeViewContainer from './LinearGenomeViewContainer';
 const ImportForm = lazy(() => import('./ImportForm'));
-const NoTracksActiveButton = lazy(() => import('./NoTracksActiveButton'));
-const useStyles = makeStyles()({
-    rel: {
-        position: 'relative',
-    },
-    top: {
-        zIndex: 1000,
-    },
-});
 const LinearGenomeView = observer(function ({ model, }) {
     const { error, initialized, hasDisplayedRegions } = model;
     if (!initialized && !error) {
@@ -28,39 +16,4 @@ const LinearGenomeView = observer(function ({ model, }) {
         return _jsx(LinearGenomeViewContainer, { model: model });
     }
 });
-const LinearGenomeViewContainer = observer(function ({ model, }) {
-    const { tracks } = model;
-    const { classes } = useStyles();
-    const session = getSession(model);
-    const ref = useRef(null);
-    const MiniControlsComponent = model.MiniControlsComponent();
-    const HeaderComponent = model.HeaderComponent();
-    useEffect(() => {
-        function handleSelectView(e) {
-            var _a, _b;
-            if (e.target instanceof Element && ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
-                (_b = session.setFocusedViewId) === null || _b === void 0 ? void 0 : _b.call(session, model.id);
-            }
-        }
-        document.addEventListener('mousedown', handleSelectView);
-        document.addEventListener('keydown', handleSelectView);
-        return () => {
-            document.removeEventListener('mousedown', handleSelectView);
-            document.removeEventListener('keydown', handleSelectView);
-        };
-    }, [session, model]);
-    return (_jsxs("div", { className: classes.rel, ref: ref, onMouseLeave: () => {
-            session.setHovered(undefined);
-        }, onMouseMove: event => {
-            const c = ref.current;
-            if (!c) {
-                return;
-            }
-            const { tracks } = model;
-            const leftPx = event.clientX - c.getBoundingClientRect().left;
-            const hoverPosition = model.pxToBp(leftPx);
-            const hoverFeature = tracks.find(t => t.displays[0].featureUnderMouse);
-            session.setHovered({ hoverPosition, hoverFeature });
-        }, children: [_jsx(HeaderComponent, { model: model }), _jsx(MiniControlsComponent, { model: model }), _jsx(TracksContainer, { model: model, children: !tracks.length ? (_jsx(Suspense, { fallback: null, children: _jsx(NoTracksActiveButton, { model: model }) })) : (tracks.map(track => (_jsx(TrackContainer, { model: model, track: track }, track.id)))) })] }));
-});
 export default LinearGenomeView;

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

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

package/esm/LinearGenomeView/components/LinearGenomeViewContainer.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Suspense, lazy, useEffect, useRef } from 'react';
+import { VIEW_HEADER_HEIGHT } from '@jbrowse/core/ui';
+import { getSession } from '@jbrowse/core/util';
+import Paper from '@mui/material/Paper';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+import TrackContainer from './TrackContainer';
+import TracksContainer from './TracksContainer';
+const NoTracksActiveButton = lazy(() => import('./NoTracksActiveButton'));
+const useStyles = makeStyles()(theme => ({
+    header: {
+        background: theme.palette.background.paper,
+        top: VIEW_HEADER_HEIGHT,
+        zIndex: 850,
+    },
+    pinnedTracks: {
+        position: 'sticky',
+        zIndex: 3,
+    },
+    rel: {
+        position: 'relative',
+    },
+}));
+const LinearGenomeViewContainer = observer(function ({ model, }) {
+    const { pinnedTracks, stickyViewHeaders, pinnedTracksTop, tracks, unpinnedTracks, } = model;
+    const { classes } = useStyles();
+    const session = getSession(model);
+    const ref = useRef(null);
+    const MiniControlsComponent = model.MiniControlsComponent();
+    const HeaderComponent = model.HeaderComponent();
+    useEffect(() => {
+        function handleSelectView(e) {
+            var _a, _b;
+            if (e.target instanceof Element && ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                (_b = session.setFocusedViewId) === null || _b === void 0 ? void 0 : _b.call(session, model.id);
+            }
+        }
+        document.addEventListener('mousedown', handleSelectView);
+        document.addEventListener('keydown', handleSelectView);
+        return () => {
+            document.removeEventListener('mousedown', handleSelectView);
+            document.removeEventListener('keydown', handleSelectView);
+        };
+    }, [session, model]);
+    return (_jsxs("div", { className: classes.rel, ref: ref, onMouseLeave: () => {
+            session.setHovered(undefined);
+        }, onMouseMove: event => {
+            const c = ref.current;
+            if (!c) {
+                return;
+            }
+            const { tracks } = model;
+            const leftPx = event.clientX - c.getBoundingClientRect().left;
+            const hoverPosition = model.pxToBp(leftPx);
+            const hoverFeature = tracks.find(t => t.displays[0].featureUnderMouse);
+            session.setHovered({ hoverPosition, hoverFeature });
+        }, children: [_jsxs("div", { className: classes.header, style: { position: stickyViewHeaders ? 'sticky' : undefined }, children: [_jsx(HeaderComponent, { model: model }), _jsx(MiniControlsComponent, { model: model })] }), _jsx(TracksContainer, { model: model, children: !tracks.length ? (_jsx(Suspense, { fallback: null, children: _jsx(NoTracksActiveButton, { model: model }) })) : (_jsxs(_Fragment, { children: [pinnedTracks.length ? (_jsx(Paper, { elevation: 6, className: classes.pinnedTracks, style: { top: pinnedTracksTop }, children: pinnedTracks.map(track => (_jsx(TrackContainer, { model: model, track: track }, track.id))) })) : null, unpinnedTracks.map(track => (_jsx(TrackContainer, { model: model, track: track }, track.id)))] })) })] }));
+});
+export default LinearGenomeViewContainer;

package/esm/LinearGenomeView/components/MiniControls.js

@@ -11,7 +11,6 @@ const useStyles = makeStyles()(theme => ({
     background: {
         position: 'absolute',
         right: 0,
-        zIndex: 1001,
         background: theme.palette.background.paper,
     },
     focusedBackground: {

package/esm/LinearGenomeView/components/NoTracksActiveButton.js

@@ -10,7 +10,7 @@ const useStyles = makeStyles()(theme => ({
         paddingBottom: theme.spacing(1),
     },
     top: {
-        zIndex: 1000,
+        zIndex: 800,
     },
 }));
 const NoTracksActiveButton = observer(function ({ model, }) {

package/esm/LinearGenomeView/components/OverviewRubberband.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { getSession, stringify } from '@jbrowse/core/util';
-import { Tooltip } from '@mui/material';
+import { getSession } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
+import OverviewRubberbandHoverTooltip from './OverviewRubberbandHoverTooltip';
 import RubberbandSpan from './RubberbandSpan';
 import { getRelativeX } from './util';
 const useStyles = makeStyles()({
@@ -17,24 +17,11 @@ const useStyles = makeStyles()({
         height: '100%',
         width: 1,
         position: 'absolute',
-        zIndex: 10,
     },
     rel: {
         position: 'relative',
     },
 });
-const HoverTooltip = observer(function ({ model, open, guideX, overview, }) {
-    var _a;
-    const { classes } = useStyles();
-    const { cytobandOffset } = model;
-    const { assemblyManager } = getSession(model);
-    const px = overview.pxToBp(guideX - cytobandOffset);
-    const assembly = assemblyManager.get(px.assemblyName);
-    const cytoband = (_a = assembly === null || assembly === void 0 ? void 0 : assembly.cytobands) === null || _a === void 0 ? void 0 : _a.find(f => px.coord > f.get('start') &&
-        px.coord < f.get('end') &&
-        px.refName === assembly.getCanonicalRefName(f.get('refName')));
-    return (_jsx(Tooltip, { open: open, placement: "top", title: [stringify(px), cytoband === null || cytoband === void 0 ? void 0 : cytoband.get('name')].join(' '), arrow: true, children: _jsx("div", { className: classes.guide, style: { left: guideX } }) }));
-});
 const OverviewRubberband = observer(function OverviewRubberband({ model, overview, ControlComponent = _jsx("div", {}), }) {
     const { cytobandOffset } = model;
     const [startX, setStartX] = useState();
@@ -104,7 +91,7 @@ const OverviewRubberband = observer(function OverviewRubberband({ model, overvie
         setGuideX(undefined);
     }
     if (startX === undefined) {
-        return (_jsxs("div", { className: classes.rel, children: [guideX !== undefined ? (_jsx(HoverTooltip, { model: model, open: !mouseDragging, overview: overview, guideX: guideX })) : null, _jsx("div", { className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove, children: ControlComponent })] }));
+        return (_jsxs("div", { className: classes.rel, children: [guideX !== undefined ? (_jsx(OverviewRubberbandHoverTooltip, { model: model, open: !mouseDragging, overview: overview, guideX: guideX })) : null, _jsx("div", { className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove, children: ControlComponent })] }));
     }
     let left = startX || 0;
     let width = 0;

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

@@ -0,0 +1,10 @@
+import type { LinearGenomeViewModel } from '..';
+import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
+type LGV = LinearGenomeViewModel;
+declare const OverviewRubberbandHoverTooltip: ({ model, open, guideX, overview, }: {
+    model: LGV;
+    open: boolean;
+    guideX: number;
+    overview: Base1DViewModel;
+}) => import("react/jsx-runtime").JSX.Element;
+export default OverviewRubberbandHoverTooltip;

package/esm/LinearGenomeView/components/OverviewRubberbandHoverTooltip.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getSession, stringify } from '@jbrowse/core/util';
+import { Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()({
+    rubberbandControl: {
+        cursor: 'crosshair',
+        width: '100%',
+        minHeight: 8,
+    },
+    guide: {
+        pointerEvents: 'none',
+        height: '100%',
+        width: 1,
+        position: 'absolute',
+    },
+    rel: {
+        position: 'relative',
+    },
+});
+const OverviewRubberbandHoverTooltip = observer(function ({ model, open, guideX, overview, }) {
+    var _a;
+    const { classes } = useStyles();
+    const { cytobandOffset } = model;
+    const { assemblyManager } = getSession(model);
+    const px = overview.pxToBp(guideX - cytobandOffset);
+    const assembly = assemblyManager.get(px.assemblyName);
+    const cytoband = (_a = assembly === null || assembly === void 0 ? void 0 : assembly.cytobands) === null || _a === void 0 ? void 0 : _a.find(f => px.coord > f.get('start') &&
+        px.coord < f.get('end') &&
+        px.refName === assembly.getCanonicalRefName(f.get('refName')));
+    return (_jsx(Tooltip, { open: open, placement: "top", title: [stringify(px), cytoband === null || cytoband === void 0 ? void 0 : cytoband.get('name')].join(' '), arrow: true, children: _jsx("div", { className: classes.guide, style: { left: guideX } }) }));
+});
+export default OverviewRubberbandHoverTooltip;

package/esm/LinearGenomeView/components/Rubberband.js

@@ -11,15 +11,20 @@ const useStyles = makeStyles()({
         cursor: 'crosshair',
         width: '100%',
         minHeight: 8,
+        zIndex: 825,
     },
 });
 const Rubberband = observer(function ({ model, ControlComponent = _jsx("div", {}), }) {
     const ref = useRef(null);
     const { classes } = useStyles();
+    const { stickyViewHeaders, rubberbandTop } = model;
     const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown, mouseOut, } = useRangeSelect(ref, model);
-    return (_jsxs(_Fragment, { children: [guideX !== undefined ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn ? (_jsx(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left })) : null, anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
+    return (_jsxs(_Fragment, { children: [guideX !== undefined ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn ? (_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("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: ref, onMouseDown: mouseDown, onMouseMove: mouseMove, onMouseOut: mouseOut, children: ControlComponent })] }));
+                }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null, _jsx("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, style: {
+                    top: rubberbandTop,
+                    position: stickyViewHeaders ? 'sticky' : undefined,
+                }, ref: ref, onMouseDown: mouseDown, onMouseMove: mouseMove, onMouseOut: mouseOut, children: ControlComponent })] }));
 });
 export default Rubberband;

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

@@ -3,11 +3,13 @@ interface Offset {
     refName?: string;
     oob?: boolean;
 }
-export default function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSelected, left, width, }: {
+export default function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSelected, left, width, top, sticky, }: {
     leftBpOffset: Offset;
     rightBpOffset: Offset;
     numOfBpSelected?: number;
     left: number;
     width: number;
+    top?: number;
+    sticky?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/LinearGenomeView/components/RubberbandSpan.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { stringify, toLocale } from '@jbrowse/core/util';
-import { Popover, Typography, alpha } from '@mui/material';
+import { Typography, alpha } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
+import RubberbandTooltip from './RubberbandTooltip';
 const useStyles = makeStyles()(theme => {
     const { tertiary } = theme.palette;
     const background = alpha(tertiary.light, 0.7);
@@ -11,9 +12,8 @@ const useStyles = makeStyles()(theme => {
             height: '100%',
             background,
             position: 'absolute',
-            zIndex: 10,
+            zIndex: 830,
             textAlign: 'center',
-            overflow: 'hidden',
         },
         rubberbandControl: {
             cursor: 'crosshair',
@@ -21,32 +21,17 @@ const useStyles = makeStyles()(theme => {
             minHeight: 8,
         },
         rubberbandText: {
-            color: tertiary.contrastText,
-        },
-        popover: {
-            mouseEvents: 'none',
-            cursor: 'crosshair',
-        },
-        paper: {
-            paddingLeft: theme.spacing(1),
-            paddingRight: theme.spacing(1),
+            color: theme.palette.tertiary.contrastText,
         },
     };
 });
-function Tooltip({ anchorEl, side, text, }) {
-    const { classes } = useStyles();
-    return (_jsx(Popover, { className: classes.popover, classes: { paper: classes.paper }, open: true, anchorEl: anchorEl, anchorOrigin: {
-            vertical: 'top',
-            horizontal: side === 'left' ? 'right' : 'left',
-        }, transformOrigin: {
-            vertical: 'bottom',
-            horizontal: side === 'left' ? 'left' : 'right',
-        }, keepMounted: true, disableRestoreFocus: true, children: _jsx(Typography, { children: text }) }));
-}
-export default function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSelected, left, width, }) {
+export default function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSelected, left, width, top = 0, sticky = false, }) {
     const { classes } = useStyles();
     const [anchorEl, setAnchorEl] = useState(null);
-    return (_jsxs(_Fragment, { children: [anchorEl ? (_jsxs(_Fragment, { children: [_jsx(Tooltip, { side: "left", anchorEl: anchorEl, text: stringify(leftBpOffset) }), _jsx(Tooltip, { side: "right", anchorEl: anchorEl, text: stringify(rightBpOffset) })] })) : null, _jsx("div", { ref: el => {
-                    setAnchorEl(el);
-                }, className: classes.rubberband, style: { left, width }, children: numOfBpSelected ? (_jsxs(Typography, { variant: "h6", className: classes.rubberbandText, children: [toLocale(numOfBpSelected), " bp"] })) : null })] }));
+    return (_jsxs(_Fragment, { children: [anchorEl ? (_jsxs(_Fragment, { children: [_jsx(RubberbandTooltip, { side: "left", anchorEl: anchorEl, text: stringify(leftBpOffset) }), _jsx(RubberbandTooltip, { side: "right", anchorEl: anchorEl, text: stringify(rightBpOffset) })] })) : null, _jsx("div", { className: classes.rubberband, style: { left, width }, children: numOfBpSelected ? (_jsxs(Typography, { ref: el => {
+                        setAnchorEl(el);
+                    }, variant: "h6", className: classes.rubberbandText, style: {
+                        top,
+                        position: sticky ? 'sticky' : undefined,
+                    }, children: [toLocale(numOfBpSelected), " bp"] })) : null })] }));
 }

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

@@ -0,0 +1,5 @@
+export default function RubberbandTooltip({ anchorEl, side, text, }: {
+    anchorEl: HTMLSpanElement;
+    side: string;
+    text: string;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/LinearGenomeView/components/RubberbandTooltip.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover, Typography } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()(theme => {
+    return {
+        popover: {
+            mouseEvents: 'none',
+            cursor: 'crosshair',
+        },
+        paper: {
+            paddingLeft: theme.spacing(1),
+            paddingRight: theme.spacing(1),
+        },
+    };
+});
+export default function RubberbandTooltip({ anchorEl, side, text, }) {
+    const { classes } = useStyles();
+    return (_jsx(Popover, { className: classes.popover, classes: { paper: classes.paper }, open: true, anchorEl: anchorEl, anchorOrigin: {
+            vertical: 'top',
+            horizontal: side === 'left' ? 'left' : 'right',
+        }, transformOrigin: {
+            vertical: 'bottom',
+            horizontal: side === 'left' ? 'right' : 'left',
+        }, keepMounted: true, disableRestoreFocus: true, children: _jsx(Typography, { children: text }) }));
+}