@jbrowse/plugin-linear-genome-view 3.0.4 → 3.1.0

package/dist/LinearGenomeView/components/TracksContainer.js

@@ -56,22 +56,21 @@ const RubberbandSpan = (0, react_1.lazy)(() => Promise.resolve().then(() => __im
 const useStyles = (0, mui_1.makeStyles)()({
     tracksContainer: {
         position: 'relative',
-        overflow: 'hidden',
     },
 });
 const TracksContainer = (0, mobx_react_1.observer)(function TracksContainer({ children, model, }) {
     const { classes } = useStyles();
     const { pluginManager } = (0, util_1.getEnv)(model);
     const { mouseDown: mouseDown1, mouseUp } = (0, useSideScroll_1.useSideScroll)(model);
-    const { showGridlines, showCenterLine } = model;
+    const { stickyViewHeaders, pinnedTracksTop, showGridlines, showCenterLine } = model;
     const ref = (0, react_1.useRef)(null);
     const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown: mouseDown2, } = (0, useRangeSelect_1.useRangeSelect)(ref, model, true);
     (0, useWheelScroll_1.useWheelScroll)(ref, model);
     const additional = pluginManager.evaluateExtensionPoint('LinearGenomeView-TracksContainerComponent', undefined, { model });
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, "data-testid": "trackContainer", className: classes.tracksContainer, onMouseDown: event => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, "data-testid": "tracksContainer", className: classes.tracksContainer, onMouseDown: event => {
             mouseDown1(event);
             mouseDown2(event);
-        }, onMouseMove: mouseMove, onMouseUp: mouseUp, children: [showGridlines ? (0, jsx_runtime_1.jsx)(Gridlines_1.default, { model: model }) : null, (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: showCenterLine ? (0, jsx_runtime_1.jsx)(CenterLine, { model: model }) : null }), guideX !== undefined ? ((0, jsx_runtime_1.jsx)(VerticalGuide_1.default, { model: model, coordX: guideX })) : rubberbandOn ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left }) })) : null, anchorPosition ? ((0, jsx_runtime_1.jsx)(ui_1.Menu, { anchorReference: "anchorPosition", anchorPosition: {
+        }, onMouseMove: mouseMove, onMouseUp: mouseUp, children: [showGridlines ? (0, jsx_runtime_1.jsx)(Gridlines_1.default, { model: model }) : null, (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: showCenterLine ? (0, jsx_runtime_1.jsx)(CenterLine, { model: model }) : null }), guideX !== undefined ? ((0, jsx_runtime_1.jsx)(VerticalGuide_1.default, { model: model, coordX: guideX })) : rubberbandOn ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: pinnedTracksTop, 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)(Rubberband_1.default, { model: model, ControlComponent: (0, jsx_runtime_1.jsx)(Scalebar_1.default, { model: model, style: {

package/dist/LinearGenomeView/components/VerticalGuide.js

@@ -1,24 +1,49 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+const ui_1 = require("@jbrowse/core/ui");
 const util_1 = require("@jbrowse/core/util");
+const product_core_1 = require("@jbrowse/product-core");
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
+const consts_1 = require("../consts");
 const useStyles = (0, mui_1.makeStyles)()({
     guide: {
         pointerEvents: 'none',
         height: '100%',
         width: 1,
         position: 'absolute',
-        zIndex: 10,
+        background: 'red',
+        zIndex: 4,
+    },
+    tooltipTarget: {
+        position: 'sticky',
+        width: 1,
     },
 });
 const VerticalGuide = (0, mobx_react_1.observer)(function VerticalGuide({ model, coordX, }) {
     const { classes } = useStyles();
-    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { open: true, placement: "top", title: (0, util_1.stringify)(model.pxToBp(coordX)), arrow: true, children: (0, jsx_runtime_1.jsx)("div", { className: classes.guide, style: {
-                left: coordX,
-                background: 'red',
-            } }) }));
+    const session = (0, util_1.getSession)(model);
+    let stickyViewHeaders = false;
+    if ((0, product_core_1.isSessionWithMultipleViews)(session)) {
+        ;
+        ({ stickyViewHeaders } = session);
+    }
+    let tooltipTop = 0;
+    if (stickyViewHeaders) {
+        tooltipTop = ui_1.VIEW_HEADER_HEIGHT;
+        if (!model.hideHeader) {
+            tooltipTop += consts_1.HEADER_BAR_HEIGHT;
+            if (!model.hideHeaderOverview) {
+                tooltipTop += consts_1.HEADER_OVERVIEW_HEIGHT;
+            }
+        }
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { open: true, placement: "top", title: (0, util_1.stringify)(model.pxToBp(coordX)), arrow: true, children: (0, jsx_runtime_1.jsx)("div", { className: classes.tooltipTarget, style: {
+                        left: coordX + 6,
+                        top: tooltipTop,
+                        position: stickyViewHeaders ? 'sticky' : undefined,
+                    } }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.guide, style: { left: coordX } })] }));
 });
 exports.default = VerticalGuide;

package/dist/LinearGenomeView/model.d.ts

@@ -51,10 +51,14 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     leftOffset: undefined | BpOffset;
     rightOffset: undefined | BpOffset;
 } & {
+    readonly pinnedTracks: any[];
+    readonly unpinnedTracks: any[];
     readonly trackLabelsSetting: any;
     readonly width: number;
     readonly interRegionPaddingWidth: number;
     readonly assemblyNames: string[];
+    readonly stickyViewHeaders: boolean;
+    readonly pinnedTracksTop: number;
 } & {
     scaleBarDisplayPrefix(): string | undefined;
     MiniControlsComponent(): React.FC<any>;

package/dist/LinearGenomeView/model.js

@@ -41,6 +41,7 @@ exports.stateModelFactory = stateModelFactory;
 const react_1 = require("react");
 const configuration_1 = require("@jbrowse/core/configuration");
 const models_1 = require("@jbrowse/core/pluggableElementTypes/models");
+const ui_1 = require("@jbrowse/core/ui");
 const Icons_1 = require("@jbrowse/core/ui/Icons");
 const util_1 = require("@jbrowse/core/util");
 const Base1DUtils_1 = require("@jbrowse/core/util/Base1DUtils");
@@ -49,6 +50,7 @@ const calculateDynamicBlocks_1 = __importDefault(require("@jbrowse/core/util/cal
 const calculateStaticBlocks_1 = __importDefault(require("@jbrowse/core/util/calculateStaticBlocks"));
 const tracks_1 = require("@jbrowse/core/util/tracks");
 const mst_1 = require("@jbrowse/core/util/types/mst");
+const product_core_1 = require("@jbrowse/product-core");
 const FolderOpen_1 = __importDefault(require("@mui/icons-material/FolderOpen"));
 const Label_1 = __importDefault(require("@mui/icons-material/Label"));
 const MenuOpen_1 = __importDefault(require("@mui/icons-material/MenuOpen"));
@@ -106,6 +108,12 @@ function stateModelFactory(pluginManager) {
         rightOffset: undefined,
     }))
         .views(self => ({
+        get pinnedTracks() {
+            return self.tracks.filter(t => t.pinned);
+        },
+        get unpinnedTracks() {
+            return self.tracks.filter(t => !t.pinned);
+        },
         get trackLabelsSetting() {
             const sessionSetting = (0, configuration_1.getConf)((0, util_1.getSession)(self), [
                 'LinearGenomeViewPlugin',
@@ -127,6 +135,25 @@ function stateModelFactory(pluginManager) {
                 ...new Set(self.displayedRegions.map(region => region.assemblyName)),
             ];
         },
+        get stickyViewHeaders() {
+            const session = (0, util_1.getSession)(self);
+            return (0, product_core_1.isSessionWithMultipleViews)(session)
+                ? session.stickyViewHeaders
+                : false;
+        },
+        get pinnedTracksTop() {
+            let pinnedTracksTop = 0;
+            if (this.stickyViewHeaders) {
+                pinnedTracksTop = ui_1.VIEW_HEADER_HEIGHT + consts_1.SCALE_BAR_HEIGHT;
+                if (!self.hideHeader) {
+                    pinnedTracksTop += consts_1.HEADER_BAR_HEIGHT;
+                    if (!self.hideHeaderOverview) {
+                        pinnedTracksTop += consts_1.HEADER_OVERVIEW_HEIGHT;
+                    }
+                }
+            }
+            return pinnedTracksTop;
+        },
     }))
         .views(self => ({
         scaleBarDisplayPrefix() {

package/dist/LinearGenomeView/svgcomponents/SVGLinearGenomeView.js

@@ -21,12 +21,12 @@ async function renderToSvg(model, opts) {
     const session = (0, util_1.getSession)(model);
     const { allThemes } = session;
     const theme = allThemes === null || allThemes === void 0 ? void 0 : allThemes()[themeName];
-    const { width, tracks, showCytobands } = model;
+    const { width, pinnedTracks, unpinnedTracks, tracks, showCytobands } = model;
     const shift = 50;
     const c = +showCytobands * cytobandHeight;
     const offset = headerHeight + rulerHeight + c + 10;
     const height = (0, util_2.totalHeight)(tracks, textHeight, trackLabels) + offset + 100;
-    const displayResults = await Promise.all(tracks.map(async (track) => {
+    const displayResults = await Promise.all([...pinnedTracks, ...unpinnedTracks].map(async (track) => {
         const display = track.displays[0];
         await (0, mobx_1.when)(() => !display.renderProps().notReady);
         return { track, result: await display.renderSvg({ ...opts, theme }) };

package/esm/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/esm/BaseLinearDisplay/components/{BlockError.js → BlockErrorMessage.js}

@@ -6,14 +6,17 @@ import ReportIcon from '@mui/icons-material/Report';
 import { IconButton, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
 import BlockMsg from './BlockMsg';
-const BlockError = observer(function ({ model }) {
+const BlockErrorMessage = observer(function ({ model, }) {
     return (_jsx(BlockMsg, { message: `${model.error}`, severity: "error", action: _jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "Reload track", children: _jsx(IconButton, { "data-testid": "reload_button", onClick: () => {
                             model.reload();
                         }, children: _jsx(RefreshIcon, {}) }) }), _jsx(Tooltip, { title: "Show stack trace", children: _jsx(IconButton, { onClick: () => {
                             getSession(model).queueDialog(onClose => [
                                 ErrorMessageStackTraceDialog,
-                                { onClose, error: model.error },
+                                {
+                                    onClose,
+                                    error: model.error,
+                                },
                             ]);
                         }, children: _jsx(ReportIcon, {}) }) })] }) }));
 });
-export default BlockError;
+export default BlockErrorMessage;

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/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

@@ -17,7 +17,6 @@ const useStyles = makeStyles()({
         height: '100%',
         width: 1,
         position: 'absolute',
-        zIndex: 10,
     },
     rel: {
         position: 'relative',

package/esm/LinearGenomeView/components/Rubberband.js

@@ -1,25 +1,48 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
-import { Menu } from '@jbrowse/core/ui';
+import { Menu, VIEW_HEADER_HEIGHT } from '@jbrowse/core/ui';
+import { getSession } from '@jbrowse/core/util';
+import { isSessionWithMultipleViews } from '@jbrowse/product-core';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 import RubberbandSpan from './RubberbandSpan';
 import VerticalGuide from './VerticalGuide';
 import { useRangeSelect } from './useRangeSelect';
+import { HEADER_BAR_HEIGHT, HEADER_OVERVIEW_HEIGHT } from '../consts';
 const useStyles = makeStyles()({
     rubberbandControl: {
         cursor: 'crosshair',
         width: '100%',
         minHeight: 8,
+        zIndex: 825,
     },
 });
 const Rubberband = observer(function ({ model, ControlComponent = _jsx("div", {}), }) {
     const ref = useRef(null);
     const { classes } = useStyles();
+    const session = getSession(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: {
+    let stickyViewHeaders = false;
+    if (isSessionWithMultipleViews(session)) {
+        ;
+        ({ stickyViewHeaders } = session);
+    }
+    let rubberbandControlTop = 0;
+    if (stickyViewHeaders) {
+        rubberbandControlTop = VIEW_HEADER_HEIGHT;
+        if (!model.hideHeader) {
+            rubberbandControlTop += HEADER_BAR_HEIGHT;
+            if (!model.hideHeaderOverview) {
+                rubberbandControlTop += HEADER_OVERVIEW_HEIGHT;
+            }
+        }
+    }
+    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: rubberbandControlTop, 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: rubberbandControlTop,
+                    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

@@ -11,9 +11,8 @@ const useStyles = makeStyles()(theme => {
             height: '100%',
             background,
             position: 'absolute',
-            zIndex: 10,
+            zIndex: 830,
             textAlign: 'center',
-            overflow: 'hidden',
         },
         rubberbandControl: {
             cursor: 'crosshair',
@@ -43,10 +42,13 @@ function Tooltip({ anchorEl, side, text, }) {
             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(Tooltip, { side: "left", anchorEl: anchorEl, text: stringify(leftBpOffset) }), _jsx(Tooltip, { 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 })] }));
 }