@jbrowse/plugin-linear-genome-view 3.0.5 → 3.1.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/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

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

package/dist/LinearGenomeView/components/Rubberband.js

@@ -6,25 +6,48 @@ 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 product_core_1 = require("@jbrowse/product-core");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
 const RubberbandSpan_1 = __importDefault(require("./RubberbandSpan"));
 const VerticalGuide_1 = __importDefault(require("./VerticalGuide"));
 const useRangeSelect_1 = require("./useRangeSelect");
+const consts_1 = require("../consts");
 const useStyles = (0, mui_1.makeStyles)()({
     rubberbandControl: {
         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 session = (0, util_1.getSession)(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: {
+    let stickyViewHeaders = false;
+    if ((0, product_core_1.isSessionWithMultipleViews)(session)) {
+        ;
+        ({ stickyViewHeaders } = session);
+    }
+    let rubberbandControlTop = 0;
+    if (stickyViewHeaders) {
+        rubberbandControlTop = ui_1.VIEW_HEADER_HEIGHT;
+        if (!model.hideHeader) {
+            rubberbandControlTop += consts_1.HEADER_BAR_HEIGHT;
+            if (!model.hideHeaderOverview) {
+                rubberbandControlTop += consts_1.HEADER_OVERVIEW_HEIGHT;
+            }
+        }
+    }
+    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: rubberbandControlTop, 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: rubberbandControlTop,
+                    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 {};

package/dist/LinearGenomeView/components/RubberbandSpan.js

@@ -14,9 +14,8 @@ const useStyles = (0, mui_1.makeStyles)()(theme => {
             height: '100%',
             background,
             position: 'absolute',
-            zIndex: 10,
+            zIndex: 830,
             textAlign: 'center',
-            overflow: 'hidden',
         },
         rubberbandControl: {
             cursor: 'crosshair',
@@ -46,10 +45,13 @@ function Tooltip({ anchorEl, side, text, }) {
             horizontal: side === 'left' ? 'left' : 'right',
         }, keepMounted: true, disableRestoreFocus: true, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: text }) }));
 }
-function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSelected, left, width, }) {
+function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSelected, left, width, top = 0, sticky = false, }) {
     const { classes } = useStyles();
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [anchorEl ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Tooltip, { side: "left", anchorEl: anchorEl, text: (0, util_1.stringify)(leftBpOffset) }), (0, jsx_runtime_1.jsx)(Tooltip, { side: "right", anchorEl: anchorEl, text: (0, util_1.stringify)(rightBpOffset) })] })) : null, (0, jsx_runtime_1.jsx)("div", { ref: el => {
-                    setAnchorEl(el);
-                }, className: classes.rubberband, style: { left, width }, children: numOfBpSelected ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "h6", className: classes.rubberbandText, children: [(0, util_1.toLocale)(numOfBpSelected), " bp"] })) : null })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [anchorEl ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Tooltip, { side: "left", anchorEl: anchorEl, text: (0, util_1.stringify)(leftBpOffset) }), (0, jsx_runtime_1.jsx)(Tooltip, { side: "right", anchorEl: anchorEl, text: (0, util_1.stringify)(rightBpOffset) })] })) : null, (0, jsx_runtime_1.jsx)("div", { className: classes.rubberband, style: { left, width }, children: numOfBpSelected ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, { ref: el => {
+                        setAnchorEl(el);
+                    }, variant: "h6", className: classes.rubberbandText, style: {
+                        top,
+                        position: sticky ? 'sticky' : undefined,
+                    }, children: [(0, util_1.toLocale)(numOfBpSelected), " bp"] })) : null })] }));
 }

package/dist/LinearGenomeView/components/Scalebar.js

@@ -8,6 +8,7 @@ const react_1 = require("react");
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
+const Gridlines_1 = __importDefault(require("./Gridlines"));
 const ScalebarCoordinateLabels_1 = __importDefault(require("./ScalebarCoordinateLabels"));
 const ScalebarRefNameLabels_1 = __importDefault(require("./ScalebarRefNameLabels"));
 const useStyles = (0, mui_1.makeStyles)()({
@@ -17,7 +18,6 @@ const useStyles = (0, mui_1.makeStyles)()({
     },
     zoomContainer: {
         position: 'relative',
-        zIndex: 1,
     },
     scalebar: {
         position: 'absolute',
@@ -29,7 +29,7 @@ const Scalebar = (0, mobx_react_1.observer)((0, react_1.forwardRef)(function Sca
     const { classes, cx } = useStyles();
     const { staticBlocks, offsetPx, scaleFactor } = model;
     const offsetLeft = staticBlocks.offsetPx - offsetPx;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { "data-resizer": "true", className: cx(classes.container, className), variant: "outlined", ref: ref, style: style, ...other, children: [(0, jsx_runtime_1.jsx)("div", { className: classes.zoomContainer, style: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { "data-resizer": "true", className: cx(classes.container, className), variant: "outlined", ref: ref, style: style, ...other, children: [(0, jsx_runtime_1.jsx)(Gridlines_1.default, { model: model, offset: 1 }), (0, jsx_runtime_1.jsx)("div", { className: classes.zoomContainer, style: {
                     transform: scaleFactor !== 1 ? `scaleX(${scaleFactor})` : undefined,
                 }, children: (0, jsx_runtime_1.jsx)("div", { className: classes.scalebar, style: {
                         left: offsetLeft - 1,

package/dist/LinearGenomeView/components/TrackContainer.js

@@ -11,31 +11,36 @@ const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const mobx_state_tree_1 = require("mobx-state-tree");
 const mui_1 = require("tss-react/mui");
+const Gridlines_1 = __importDefault(require("./Gridlines"));
 const TrackLabelContainer_1 = __importDefault(require("./TrackLabelContainer"));
 const TrackRenderingContainer_1 = __importDefault(require("./TrackRenderingContainer"));
 const useStyles = (0, mui_1.makeStyles)()({
     root: {
         marginTop: 2,
+        overflow: 'hidden',
+        position: 'relative',
+    },
+    unpinnedTrack: {
+        background: 'none',
     },
     resizeHandle: {
         height: 3,
         boxSizing: 'border-box',
         position: 'relative',
-        zIndex: 2,
     },
 });
 const TrackContainer = (0, mobx_react_1.observer)(function ({ model, track, }) {
-    const { classes } = useStyles();
+    const { classes, cx } = useStyles();
     const display = track.displays[0];
     const { draggingTrackId, showTrackOutlines } = model;
     const ref = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { ref: ref, className: classes.root, variant: showTrackOutlines ? 'outlined' : undefined, elevation: showTrackOutlines ? undefined : 0, onClick: event => {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { ref: ref, className: cx(classes.root, track.pinned ? null : classes.unpinnedTrack), variant: showTrackOutlines ? 'outlined' : undefined, elevation: showTrackOutlines ? undefined : 0, onClick: event => {
             var _a;
             if (event.detail === 2 && !track.displays[0].featureIdUnderMouse) {
                 const left = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0;
                 model.zoomTo(model.bpPerPx / 2, event.clientX - left, true);
             }
-        }, children: [(0, jsx_runtime_1.jsx)(TrackLabelContainer_1.default, { track: track, view: model }), (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { FallbackComponent: e => (0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: e.error }), children: (0, jsx_runtime_1.jsx)(TrackRenderingContainer_1.default, { model: model, track: track, onDragEnter: () => {
+        }, children: [track.pinned ? (0, jsx_runtime_1.jsx)(Gridlines_1.default, { model: model, offset: 1 }) : null, (0, jsx_runtime_1.jsx)(TrackLabelContainer_1.default, { track: track, view: model }), (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { FallbackComponent: e => (0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: e.error }), children: (0, jsx_runtime_1.jsx)(TrackRenderingContainer_1.default, { model: model, track: track, onDragEnter: () => {
                         if ((0, mobx_state_tree_1.isAlive)(display) &&
                             draggingTrackId !== undefined &&
                             draggingTrackId !== display.id) {

package/dist/LinearGenomeView/components/TrackLabel.js

@@ -34,7 +34,7 @@ const TrackLabel = (0, mobx_react_1.observer)((0, react_1.forwardRef)(function T
     const view = (0, util_1.getContainingView)(track);
     const session = (0, util_1.getSession)(track);
     const trackConf = track.configuration;
-    const minimized = track.minimized;
+    const { minimized } = track;
     const trackId = (0, configuration_1.getConf)(track, 'trackId');
     const trackName = (0, tracks_1.getTrackName)(trackConf, session);
     return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { ref: ref, className: cx(className, classes.root), onClick: event => {

package/dist/LinearGenomeView/components/TrackLabelContainer.js

@@ -9,7 +9,7 @@ const mui_1 = require("tss-react/mui");
 const TrackLabel_1 = __importDefault(require("./TrackLabel"));
 const useStyles = (0, mui_1.makeStyles)()({
     trackLabel: {
-        zIndex: 3,
+        zIndex: 2,
     },
     trackLabelOffset: {
         position: 'relative',

package/dist/LinearGenomeView/components/TrackLabelMenu.js

@@ -13,6 +13,7 @@ const KeyboardDoubleArrowDown_1 = __importDefault(require("@mui/icons-material/K
 const KeyboardDoubleArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardDoubleArrowUp"));
 const Minimize_1 = __importDefault(require("@mui/icons-material/Minimize"));
 const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
+const PushPin_1 = __importDefault(require("@mui/icons-material/PushPin"));
 const mobx_react_1 = require("mobx-react");
 const TrackLabelMenu = (0, mobx_react_1.observer)(function ({ track, }) {
     var _a;
@@ -20,7 +21,27 @@ const TrackLabelMenu = (0, mobx_react_1.observer)(function ({ track, }) {
     const session = (0, util_1.getSession)(track);
     const trackConf = track.configuration;
     const minimized = track.minimized;
+    const pinned = track.pinned;
+    let lgvHasParentView;
+    try {
+        (0, util_1.getContainingView)(view);
+        lgvHasParentView = true;
+    }
+    catch (error) {
+        lgvHasParentView = false;
+    }
     const items = [
+        ...(lgvHasParentView
+            ? []
+            : [
+                {
+                    label: pinned ? 'Unpin track' : 'Pin track',
+                    icon: PushPin_1.default,
+                    onClick: () => {
+                        track.setPinned(!pinned);
+                    },
+                },
+            ]),
         {
             label: 'Track order',
             type: 'subMenu',

package/dist/LinearGenomeView/components/TrackRenderingContainer.js

@@ -19,7 +19,6 @@ const useStyles = (0, mui_1.makeStyles)()({
         whiteSpace: 'nowrap',
         position: 'relative',
         background: 'none',
-        zIndex: 2,
     },
 });
 const TrackRenderingContainer = (0, mobx_react_1.observer)(function ({ model, track, onDragEnter, }) {