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

package/dist/BaseLinearDisplay/components/BlockErrorMessage.d.ts

@@ -0,0 +1,7 @@
+declare const BlockErrorMessage: ({ model, }: {
+    model: {
+        error?: unknown;
+        reload: () => void;
+    };
+}) => import("react/jsx-runtime").JSX.Element;
+export default BlockErrorMessage;

package/dist/BaseLinearDisplay/components/{BlockError.js → BlockErrorMessage.js}

@@ -11,14 +11,17 @@ const Report_1 = __importDefault(require("@mui/icons-material/Report"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const BlockMsg_1 = __importDefault(require("./BlockMsg"));
-const BlockError = (0, mobx_react_1.observer)(function ({ model }) {
+const BlockErrorMessage = (0, mobx_react_1.observer)(function ({ model, }) {
     return ((0, jsx_runtime_1.jsx)(BlockMsg_1.default, { message: `${model.error}`, severity: "error", action: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Reload track", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { "data-testid": "reload_button", onClick: () => {
                             model.reload();
                         }, children: (0, jsx_runtime_1.jsx)(Refresh_1.default, {}) }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Show stack trace", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => {
                             (0, util_1.getSession)(model).queueDialog(onClose => [
                                 ErrorMessageStackTraceDialog_1.default,
-                                { onClose, error: model.error },
+                                {
+                                    onClose,
+                                    error: model.error,
+                                },
                             ]);
                         }, children: (0, jsx_runtime_1.jsx)(Report_1.default, {}) }) })] }) }));
 });
-exports.default = BlockError;
+exports.default = BlockErrorMessage;

package/dist/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/dist/BaseLinearDisplay/components/BlockLoadingMessage.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ui_1 = require("@jbrowse/core/ui");
+const mobx_react_1 = require("mobx-react");
+const mobx_state_tree_1 = require("mobx-state-tree");
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.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 = (0, mobx_react_1.observer)(function ({ model, }) {
+    const { classes } = useStyles();
+    const { status: blockStatus } = model;
+    const { message: displayStatus } = (0, mobx_state_tree_1.getParent)(model, 2);
+    const status = displayStatus || blockStatus;
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes.loading, children: (0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, { message: status }) }));
+});
+exports.default = BlockLoadingMessage;

package/dist/BaseLinearDisplay/components/BlockMsg.js

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

package/dist/BaseLinearDisplay/components/ServerSideRenderedBlockContent.js

@@ -38,39 +38,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const ui_1 = require("@jbrowse/core/ui");
 const mobx_react_1 = require("mobx-react");
-const mobx_state_tree_1 = require("mobx-state-tree");
-const mui_1 = require("tss-react/mui");
+const BlockLoadingMessage_1 = __importDefault(require("./BlockLoadingMessage"));
 const BlockMsg_1 = __importDefault(require("./BlockMsg"));
-const BlockError = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./BlockError'))));
-const useStyles = (0, mui_1.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 = (0, mobx_react_1.observer)(({ model }) => {
-    const { classes } = useStyles();
-    const { status: blockStatus } = model;
-    const { message: displayStatus } = (0, mobx_state_tree_1.getParent)(model, 2);
-    const status = displayStatus || blockStatus;
-    return ((0, jsx_runtime_1.jsx)("div", { className: classes.loading, children: (0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, { message: status }) }));
-});
+const BlockErrorMessage = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./BlockErrorMessage'))));
 const ServerSideRenderedBlockContent = (0, mobx_react_1.observer)(function ({ model, }) {
     if (model.error) {
-        return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(BlockError, { model: model }) }));
+        return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(BlockErrorMessage, { model: model }) }));
     }
     else if (model.message) {
         return (0, react_1.isValidElement)(model.message) ? (model.message) : ((0, jsx_runtime_1.jsx)(BlockMsg_1.default, { message: `${model.message}`, severity: "info" }));
     }
     else if (!model.filled) {
-        return (0, jsx_runtime_1.jsx)(LoadingMessage, { model: model });
+        return (0, jsx_runtime_1.jsx)(BlockLoadingMessage_1.default, { model: model });
     }
     else {
         return model.reactElement;

package/dist/BaseLinearDisplay/models/BaseLinearDisplayModel.js

@@ -117,14 +117,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;
         },
     }))
@@ -177,9 +177,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();
             },
         };
@@ -269,17 +269,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/dist/LaunchLinearGenomeView/index.js

@@ -23,7 +23,7 @@ function LaunchLinearGenomeViewF(pluginManager) {
                 view.setHideHeader(!nav);
             }
             if (highlight !== undefined) {
-                highlight.forEach(async (h) => {
+                for (const h of highlight) {
                     const p = (0, util_1.parseLocString)(h, refName => assemblyManager.isValidRefName(refName, assembly));
                     const { start, end } = p;
                     if (start !== undefined && end !== undefined) {
@@ -34,13 +34,17 @@ function LaunchLinearGenomeViewF(pluginManager) {
                             assemblyName: assembly,
                         });
                     }
-                });
+                }
             }
-            await (0, searchUtils_1.handleSelectedRegion)({ input: loc, model: view, assembly: asm });
+            await (0, searchUtils_1.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/dist/LinearGenomeView/components/CenterLine.js

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

package/dist/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/dist/LinearGenomeView/components/Gridlines.js

@@ -8,15 +8,14 @@ const util_1 = require("../util");
 const useStyles = (0, mui_1.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',
     },
@@ -58,13 +57,13 @@ const RenderedVerticalGuides = (0, mobx_react_1.observer)(({ model }) => {
             return null;
         }) }));
 });
-const Gridlines = (0, mobx_react_1.observer)(function ({ model }) {
+const Gridlines = (0, mobx_react_1.observer)(function ({ model, offset = 0, }) {
     const { classes } = useStyles();
     const offsetLeft = model.staticBlocks.offsetPx - model.offsetPx;
     return ((0, jsx_runtime_1.jsx)("div", { className: classes.verticalGuidesZoomContainer, style: {
             transform: model.scaleFactor !== 1 ? `scaleX(${model.scaleFactor})` : undefined,
         }, children: (0, jsx_runtime_1.jsx)("div", { className: classes.verticalGuidesContainer, style: {
-                left: offsetLeft,
+                left: offsetLeft - offset,
                 width: model.staticBlocks.totalWidthPx,
             }, children: (0, jsx_runtime_1.jsx)(RenderedVerticalGuides, { model: model }) }) }));
 });

package/dist/LinearGenomeView/components/Header.js

@@ -13,9 +13,11 @@ const HeaderTrackSelectorButton_1 = __importDefault(require("./HeaderTrackSelect
 const HeaderZoomControls_1 = __importDefault(require("./HeaderZoomControls"));
 const OverviewScalebar_1 = __importDefault(require("./OverviewScalebar"));
 const SearchBox_1 = __importDefault(require("./SearchBox"));
+const consts_1 = require("../consts");
 const useStyles = (0, mui_1.makeStyles)()({
     headerBar: {
         display: 'flex',
+        height: consts_1.HEADER_BAR_HEIGHT,
     },
     headerForm: {
         flexWrap: 'nowrap',

package/dist/LinearGenomeView/components/LinearGenomeView.js

@@ -39,21 +39,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ui_1 = require("@jbrowse/core/ui");
-const util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
-const mui_1 = require("tss-react/mui");
-const TrackContainer_1 = __importDefault(require("./TrackContainer"));
-const TracksContainer_1 = __importDefault(require("./TracksContainer"));
+const LinearGenomeViewContainer_1 = __importDefault(require("./LinearGenomeViewContainer"));
 const ImportForm = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./ImportForm'))));
-const NoTracksActiveButton = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./NoTracksActiveButton'))));
-const useStyles = (0, mui_1.makeStyles)()({
-    rel: {
-        position: 'relative',
-    },
-    top: {
-        zIndex: 1000,
-    },
-});
 const LinearGenomeView = (0, mobx_react_1.observer)(function ({ model, }) {
     const { error, initialized, hasDisplayedRegions } = model;
     if (!initialized && !error) {
@@ -63,42 +51,7 @@ const LinearGenomeView = (0, mobx_react_1.observer)(function ({ model, }) {
         return (0, jsx_runtime_1.jsx)(ImportForm, { model: model });
     }
     else {
-        return (0, jsx_runtime_1.jsx)(LinearGenomeViewContainer, { model: model });
+        return (0, jsx_runtime_1.jsx)(LinearGenomeViewContainer_1.default, { model: model });
     }
 });
-const LinearGenomeViewContainer = (0, mobx_react_1.observer)(function ({ model, }) {
-    const { tracks } = model;
-    const { classes } = useStyles();
-    const session = (0, util_1.getSession)(model);
-    const ref = (0, react_1.useRef)(null);
-    const MiniControlsComponent = model.MiniControlsComponent();
-    const HeaderComponent = model.HeaderComponent();
-    (0, react_1.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 ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(HeaderComponent, { model: model }), (0, jsx_runtime_1.jsx)(MiniControlsComponent, { model: model }), (0, jsx_runtime_1.jsx)(TracksContainer_1.default, { model: model, children: !tracks.length ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(NoTracksActiveButton, { model: model }) })) : (tracks.map(track => ((0, jsx_runtime_1.jsx)(TrackContainer_1.default, { model: model, track: track }, track.id)))) })] }));
-});
 exports.default = LinearGenomeView;

package/dist/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/dist/LinearGenomeView/components/LinearGenomeViewContainer.js

@@ -0,0 +1,98 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("@jbrowse/core/ui");
+const util_1 = require("@jbrowse/core/util");
+const Paper_1 = __importDefault(require("@mui/material/Paper"));
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+const TrackContainer_1 = __importDefault(require("./TrackContainer"));
+const TracksContainer_1 = __importDefault(require("./TracksContainer"));
+const NoTracksActiveButton = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./NoTracksActiveButton'))));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    header: {
+        background: theme.palette.background.paper,
+        top: ui_1.VIEW_HEADER_HEIGHT,
+        zIndex: 850,
+    },
+    pinnedTracks: {
+        position: 'sticky',
+        zIndex: 3,
+    },
+    rel: {
+        position: 'relative',
+    },
+}));
+const LinearGenomeViewContainer = (0, mobx_react_1.observer)(function ({ model, }) {
+    const { pinnedTracks, stickyViewHeaders, pinnedTracksTop, tracks, unpinnedTracks, } = model;
+    const { classes } = useStyles();
+    const session = (0, util_1.getSession)(model);
+    const ref = (0, react_1.useRef)(null);
+    const MiniControlsComponent = model.MiniControlsComponent();
+    const HeaderComponent = model.HeaderComponent();
+    (0, react_1.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 ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)("div", { className: classes.header, style: { position: stickyViewHeaders ? 'sticky' : undefined }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { model: model }), (0, jsx_runtime_1.jsx)(MiniControlsComponent, { model: model })] }), (0, jsx_runtime_1.jsx)(TracksContainer_1.default, { model: model, children: !tracks.length ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(NoTracksActiveButton, { model: model }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [pinnedTracks.length ? ((0, jsx_runtime_1.jsx)(Paper_1.default, { elevation: 6, className: classes.pinnedTracks, style: { top: pinnedTracksTop }, children: pinnedTracks.map(track => ((0, jsx_runtime_1.jsx)(TrackContainer_1.default, { model: model, track: track }, track.id))) })) : null, unpinnedTracks.map(track => ((0, jsx_runtime_1.jsx)(TrackContainer_1.default, { model: model, track: track }, track.id)))] })) })] }));
+});
+exports.default = LinearGenomeViewContainer;

package/dist/LinearGenomeView/components/MiniControls.js

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

package/dist/LinearGenomeView/components/NoTracksActiveButton.js

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

package/dist/LinearGenomeView/components/OverviewRubberband.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const util_1 = require("@jbrowse/core/util");
-const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
+const OverviewRubberbandHoverTooltip_1 = __importDefault(require("./OverviewRubberbandHoverTooltip"));
 const RubberbandSpan_1 = __importDefault(require("./RubberbandSpan"));
 const util_2 = require("./util");
 const useStyles = (0, mui_1.makeStyles)()({
@@ -22,24 +22,11 @@ const useStyles = (0, mui_1.makeStyles)()({
         height: '100%',
         width: 1,
         position: 'absolute',
-        zIndex: 10,
     },
     rel: {
         position: 'relative',
     },
 });
-const HoverTooltip = (0, mobx_react_1.observer)(function ({ model, open, guideX, overview, }) {
-    var _a;
-    const { classes } = useStyles();
-    const { cytobandOffset } = model;
-    const { assemblyManager } = (0, util_1.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 ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { open: open, placement: "top", title: [(0, util_1.stringify)(px), cytoband === null || cytoband === void 0 ? void 0 : cytoband.get('name')].join(' '), arrow: true, children: (0, jsx_runtime_1.jsx)("div", { className: classes.guide, style: { left: guideX } }) }));
-});
 const OverviewRubberband = (0, mobx_react_1.observer)(function OverviewRubberband({ model, overview, ControlComponent = (0, jsx_runtime_1.jsx)("div", {}), }) {
     const { cytobandOffset } = model;
     const [startX, setStartX] = (0, react_1.useState)();
@@ -109,7 +96,7 @@ const OverviewRubberband = (0, mobx_react_1.observer)(function OverviewRubberban
         setGuideX(undefined);
     }
     if (startX === undefined) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: classes.rel, children: [guideX !== undefined ? ((0, jsx_runtime_1.jsx)(HoverTooltip, { model: model, open: !mouseDragging, overview: overview, guideX: guideX })) : null, (0, jsx_runtime_1.jsx)("div", { className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove, children: ControlComponent })] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: classes.rel, children: [guideX !== undefined ? ((0, jsx_runtime_1.jsx)(OverviewRubberbandHoverTooltip_1.default, { model: model, open: !mouseDragging, overview: overview, guideX: guideX })) : null, (0, jsx_runtime_1.jsx)("div", { className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove, children: ControlComponent })] }));
     }
     let left = startX || 0;
     let width = 0;

package/dist/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/dist/LinearGenomeView/components/OverviewRubberbandHoverTooltip.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()({
+    rubberbandControl: {
+        cursor: 'crosshair',
+        width: '100%',
+        minHeight: 8,
+    },
+    guide: {
+        pointerEvents: 'none',
+        height: '100%',
+        width: 1,
+        position: 'absolute',
+    },
+    rel: {
+        position: 'relative',
+    },
+});
+const OverviewRubberbandHoverTooltip = (0, mobx_react_1.observer)(function ({ model, open, guideX, overview, }) {
+    var _a;
+    const { classes } = useStyles();
+    const { cytobandOffset } = model;
+    const { assemblyManager } = (0, util_1.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 ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { open: open, placement: "top", title: [(0, util_1.stringify)(px), cytoband === null || cytoband === void 0 ? void 0 : cytoband.get('name')].join(' '), arrow: true, children: (0, jsx_runtime_1.jsx)("div", { className: classes.guide, style: { left: guideX } }) }));
+});
+exports.default = OverviewRubberbandHoverTooltip;

package/dist/LinearGenomeView/components/Rubberband.js

@@ -16,15 +16,20 @@ const useStyles = (0, mui_1.makeStyles)()({
         cursor: 'crosshair',
         width: '100%',
         minHeight: 8,
+        zIndex: 825,
     },
 });
 const Rubberband = (0, mobx_react_1.observer)(function ({ model, ControlComponent = (0, jsx_runtime_1.jsx)("div", {}), }) {
     const ref = (0, react_1.useRef)(null);
     const { classes } = useStyles();
+    const { stickyViewHeaders, rubberbandTop } = model;
     const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown, mouseOut, } = (0, useRangeSelect_1.useRangeSelect)(ref, model);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [guideX !== undefined ? ((0, jsx_runtime_1.jsx)(VerticalGuide_1.default, { model: model, coordX: guideX })) : rubberbandOn ? ((0, jsx_runtime_1.jsx)(RubberbandSpan_1.default, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left })) : null, anchorPosition ? ((0, jsx_runtime_1.jsx)(ui_1.Menu, { anchorReference: "anchorPosition", anchorPosition: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [guideX !== undefined ? ((0, jsx_runtime_1.jsx)(VerticalGuide_1.default, { model: model, coordX: guideX })) : rubberbandOn ? ((0, jsx_runtime_1.jsx)(RubberbandSpan_1.default, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: rubberbandTop, sticky: stickyViewHeaders })) : null, anchorPosition ? ((0, jsx_runtime_1.jsx)(ui_1.Menu, { anchorReference: "anchorPosition", anchorPosition: {
                     left: anchorPosition.clientX,
                     top: anchorPosition.clientY,
-                }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null, (0, jsx_runtime_1.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, (0, jsx_runtime_1.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 })] }));
 });
 exports.default = Rubberband;

package/dist/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 {};