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

package/dist/BaseLinearDisplay/components/LinearBlocks.js

@@ -23,7 +23,7 @@ const useStyles = (0, mui_1.makeStyles)()({
         width: '100%',
         fontWeight: 'bold',
         textAlign: 'center',
-        zIndex: 2000,
+        zIndex: 999,
         boxSizing: 'border-box',
     },
 });

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/LinearBasicDisplay/components/AddFiltersDialog.js

@@ -43,7 +43,7 @@ const AddFiltersDialog = (0, mobx_react_1.observer)(function ({ model, handleClo
             setError(e);
         }
     }, [data]);
-    return ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { maxWidth: "xl", open: true, onClose: handleClose, title: "Add track filters", children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [(0, jsx_runtime_1.jsxs)("div", { children: ["Add filters, in jexl format, one per line, starting with the string jexl:. Examples:", ' ', (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("code", { children: "jexl:get(feature,'name')=='BRCA1'" }), " - show only feature where the name attribute is BRCA1"] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("code", { children: "jexl:get(feature,'type')=='gene'" }), " - show only gene type features in a GFF that has many other feature types"] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("code", { children: "jexl:get(feature,'score') > 400" }), " - show only features that have a score greater than 400"] })] })] }), error ? (0, jsx_runtime_1.jsx)("p", { className: classes.error, children: `${error}` }) : null, (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", multiline: true, minRows: 5, maxRows: 10, className: classes.dialogContent, fullWidth: true, value: data, onChange: event => {
+    return ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { maxWidth: "xl", open: true, onClose: handleClose, title: "Add track filters", children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [(0, jsx_runtime_1.jsxs)("div", { children: ["Add filters, in jexl format, one per line, starting with the string jexl:. Examples:", ' ', (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("code", { children: "jexl:get(feature,'name')=='BRCA1'" }), " - show only feature where the name attribute is BRCA1"] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("code", { children: "jexl:get(feature,'type')=='gene'" }), " - show only gene type features in a GFF that has many other feature types"] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("code", { children: "jexl:get(feature,'score') > 400" }), " - show only features that have a score greater than 400"] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("code", { children: "jexl:get(feature,'end') - get(feature,'start') < 1000000" }), ' ', "- show only features with length less than 1Mbp"] })] })] }), error ? (0, jsx_runtime_1.jsx)("p", { className: classes.error, children: `${error}` }) : null, (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", multiline: true, minRows: 5, maxRows: 10, className: classes.dialogContent, fullWidth: true, value: data, onChange: event => {
                             setData(event.target.value);
                         }, slotProps: {
                             input: {

package/dist/LinearBasicDisplay/model.js

@@ -165,7 +165,10 @@ function stateModelFactory(configSchema) {
                         onClick: () => {
                             (0, util_1.getSession)(self).queueDialog(handleClose => [
                                 SetMaxHeightDialog,
-                                { model: self, handleClose },
+                                {
+                                    model: self,
+                                    handleClose,
+                                },
                             ]);
                         },
                     },
@@ -174,7 +177,10 @@ function stateModelFactory(configSchema) {
                         onClick: () => {
                             (0, util_1.getSession)(self).queueDialog(handleClose => [
                                 AddFiltersDialog,
-                                { model: self, handleClose },
+                                {
+                                    model: self,
+                                    handleClose,
+                                },
                             ]);
                         },
                     },

package/dist/LinearGenomeView/components/HeaderZoomControls.js

@@ -58,9 +58,13 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         color: theme.palette.text.secondary,
     },
 }));
+function ValueLabelComponent(props) {
+    const { children, open, value } = props;
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { open: open, enterTouchDelay: 0, placement: "top", title: value, arrow: true, children: children }));
+}
 const HeaderZoomControls = (0, mobx_react_1.observer)(function ({ model, }) {
     const { classes } = useStyles();
-    const { maxBpPerPx, minBpPerPx, bpPerPx } = model;
+    const { width, maxBpPerPx, minBpPerPx, bpPerPx } = model;
     const [value, setValue] = (0, react_1.useState)(-Math.log2(bpPerPx) * 100);
     (0, react_1.useEffect)(() => {
         setValue(-Math.log2(bpPerPx) * 100);
@@ -69,7 +73,9 @@ const HeaderZoomControls = (0, mobx_react_1.observer)(function ({ model, }) {
     const zoomOutDisabled = bpPerPx >= maxBpPerPx - 0.0001;
     return ((0, jsx_runtime_1.jsxs)("div", { className: classes.container, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Zoom out 2x", children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { "data-testid": "zoom_out", disabled: zoomOutDisabled, onClick: () => {
                             model.zoom(bpPerPx * 2);
-                        }, children: (0, jsx_runtime_1.jsx)(ZoomOut_1.default, {}) }) }) }), (0, jsx_runtime_1.jsx)(material_1.Slider, { size: "small", className: classes.slider, value: value, min: -Math.log2(maxBpPerPx) * 100, max: -Math.log2(minBpPerPx) * 100, onChangeCommitted: () => model.zoomTo(2 ** (-value / 100)), onChange: (_, val) => {
+                        }, children: (0, jsx_runtime_1.jsx)(ZoomOut_1.default, {}) }) }) }), (0, jsx_runtime_1.jsx)(material_1.Slider, { size: "small", className: classes.slider, value: value, min: -Math.log2(maxBpPerPx) * 100, max: -Math.log2(minBpPerPx) * 100, onChangeCommitted: () => model.zoomTo(2 ** (-value / 100)), valueLabelDisplay: "auto", valueLabelFormat: newValue => `Window size: ${(0, util_1.getBpDisplayStr)(2 ** (-newValue / 100) * width)}`, slots: {
+                    valueLabel: ValueLabelComponent,
+                }, onChange: (_, val) => {
                     setValue(val);
                 } }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Zoom in 2x", children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { "data-testid": "zoom_in", disabled: zoomInDisabled, onClick: () => {
                             model.zoom(model.bpPerPx / 2);

package/dist/LinearGenomeView/components/ImportForm.js

@@ -70,7 +70,7 @@ const LinearGenomeViewImportForm = (0, mobx_react_1.observer)(function ({ model,
                                 session.notify(`${e}`, 'warning');
                             }
                         }
-                    }, children: (0, jsx_runtime_1.jsxs)(material_1.Grid2, { container: true, spacing: 1, justifyContent: "center", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.FormControl, { children: (0, jsx_runtime_1.jsx)(ui_1.AssemblySelector, { onChange: val => {
+                    }, children: (0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.FormControl, { children: (0, jsx_runtime_1.jsx)(ui_1.AssemblySelector, { onChange: val => {
                                         setSelectedAsm(val);
                                     }, localStorageKey: "lgv", session: session, selected: selectedAsm }) }), selectedAsm ? (assemblyError ? ((0, jsx_runtime_1.jsx)(Close_1.default, { style: { color: 'red' } })) : assemblyLoaded ? ((0, jsx_runtime_1.jsx)(material_1.FormControl, { children: (0, jsx_runtime_1.jsx)(ImportFormRefNameAutocomplete_1.default, { value: value, setValue: setValue, selectedAsm: selectedAsm, setOption: setOption, model: model }) })) : ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20, disableShrink: true }))) : null, (0, jsx_runtime_1.jsx)(material_1.FormControl, { children: (0, jsx_runtime_1.jsx)(material_1.Button, { type: "submit", disabled: !value, className: classes.button, variant: "contained", color: "primary", children: "Open" }) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, { children: (0, jsx_runtime_1.jsx)(material_1.Button, { disabled: !value, className: classes.button, onClick: () => {
                                         model.setError(undefined);

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)()({
@@ -27,18 +27,6 @@ const useStyles = (0, mui_1.makeStyles)()({
         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)();
@@ -108,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

@@ -6,14 +6,11 @@ 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',
@@ -25,28 +22,13 @@ const useStyles = (0, mui_1.makeStyles)()({
 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 { stickyViewHeaders, rubberbandTop } = model;
     const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown, mouseOut, } = (0, useRangeSelect_1.useRangeSelect)(ref, model);
-    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: {
+    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, style: {
-                    top: rubberbandControlTop,
+                    top: rubberbandTop,
                     position: stickyViewHeaders ? 'sticky' : undefined,
                 }, ref: ref, onMouseDown: mouseDown, onMouseMove: mouseMove, onMouseOut: mouseOut, children: ControlComponent })] }));
 });

package/dist/LinearGenomeView/components/RubberbandSpan.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = RubberbandSpan;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -6,6 +9,7 @@ const react_1 = require("react");
 const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
+const RubberbandTooltip_1 = __importDefault(require("./RubberbandTooltip"));
 const useStyles = (0, mui_1.makeStyles)()(theme => {
     const { tertiary } = theme.palette;
     const background = (0, material_1.alpha)(tertiary.light, 0.7);
@@ -23,35 +27,17 @@ const useStyles = (0, mui_1.makeStyles)()(theme => {
             minHeight: 8,
         },
         rubberbandText: {
-            color: tertiary.contrastText,
-        },
-        popover: {
-            mouseEvents: 'none',
-            cursor: 'crosshair',
-        },
-        paper: {
-            paddingLeft: theme.spacing(1),
-            paddingRight: theme.spacing(1),
+            color: theme.palette.tertiary.contrastText,
         },
     };
 });
-function Tooltip({ anchorEl, side, text, }) {
-    const { classes } = useStyles();
-    return ((0, jsx_runtime_1.jsx)(material_1.Popover, { className: classes.popover, classes: { paper: classes.paper }, open: true, anchorEl: anchorEl, anchorOrigin: {
-            vertical: 'top',
-            horizontal: side === 'left' ? 'right' : 'left',
-        }, transformOrigin: {
-            vertical: 'bottom',
-            horizontal: side === 'left' ? 'left' : 'right',
-        }, keepMounted: true, disableRestoreFocus: true, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: text }) }));
-}
 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", { className: classes.rubberband, style: { left, width }, children: numOfBpSelected ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, { ref: el => {
+    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)(RubberbandTooltip_1.default, { side: "left", anchorEl: anchorEl, text: (0, util_1.stringify)(leftBpOffset) }), (0, jsx_runtime_1.jsx)(RubberbandTooltip_1.default, { 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.jsx)(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 })] }));
+                    }, children: (0, util_1.getBpDisplayStr)(numOfBpSelected) })) : null })] }));
 }

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

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

package/dist/LinearGenomeView/components/RubberbandTooltip.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = RubberbandTooltip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()(theme => {
+    return {
+        popover: {
+            mouseEvents: 'none',
+            cursor: 'crosshair',
+        },
+        paper: {
+            paddingLeft: theme.spacing(1),
+            paddingRight: theme.spacing(1),
+        },
+    };
+});
+function RubberbandTooltip({ anchorEl, side, text, }) {
+    const { classes } = useStyles();
+    return ((0, jsx_runtime_1.jsx)(material_1.Popover, { className: classes.popover, classes: { paper: classes.paper }, open: true, anchorEl: anchorEl, anchorOrigin: {
+            vertical: 'top',
+            horizontal: side === 'left' ? 'left' : 'right',
+        }, transformOrigin: {
+            vertical: 'bottom',
+            horizontal: side === 'left' ? 'right' : 'left',
+        }, keepMounted: true, disableRestoreFocus: true, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: text }) }));
+}

package/dist/LinearGenomeView/components/TracksContainer.js

@@ -62,7 +62,7 @@ const TracksContainer = (0, mobx_react_1.observer)(function TracksContainer({ ch
     const { classes } = useStyles();
     const { pluginManager } = (0, util_1.getEnv)(model);
     const { mouseDown: mouseDown1, mouseUp } = (0, useSideScroll_1.useSideScroll)(model);
-    const { stickyViewHeaders, pinnedTracksTop, showGridlines, showCenterLine } = model;
+    const { stickyViewHeaders, rubberbandTop, 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);
@@ -70,7 +70,7 @@ const TracksContainer = (0, mobx_react_1.observer)(function TracksContainer({ ch
     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, top: pinnedTracksTop, sticky: stickyViewHeaders }) })) : 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: 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)(Rubberband_1.default, { model: model, ControlComponent: (0, jsx_runtime_1.jsx)(Scalebar_1.default, { model: model, style: {

package/dist/LinearGenomeView/components/VerticalGuide.js

@@ -1,13 +1,10 @@
 "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',
@@ -15,7 +12,7 @@ const useStyles = (0, mui_1.makeStyles)()({
         width: 1,
         position: 'absolute',
         background: 'red',
-        zIndex: 4,
+        zIndex: 1001,
     },
     tooltipTarget: {
         position: 'sticky',
@@ -24,25 +21,10 @@ const useStyles = (0, mui_1.makeStyles)()({
 });
 const VerticalGuide = (0, mobx_react_1.observer)(function VerticalGuide({ model, coordX, }) {
     const { classes } = useStyles();
-    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;
-            }
-        }
-    }
+    const { stickyViewHeaders, rubberbandTop } = model;
     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,
+                        top: rubberbandTop,
                         position: stickyViewHeaders ? 'sticky' : undefined,
                     } }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.guide, style: { left: coordX } })] }));
 });

package/dist/LinearGenomeView/model.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { BpOffset, ExportSvgOptions, HighlightType, NavLocation } from './types';
+import type { BpOffset, ExportSvgOptions, HighlightType, InitState, NavLocation } from './types';
 import type PluginManager from '@jbrowse/core/PluginManager';
 import type BaseResult from '@jbrowse/core/TextSearch/BaseResults';
 import type { Assembly } from '@jbrowse/core/assemblyManager/assembly';
@@ -30,6 +30,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<HighlightType, HighlightType, HighlightType>>, [undefined]>;
     colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    init: import("mobx-state-tree").IType<InitState | undefined, InitState | undefined, InitState | undefined>;
 }, {
     width: number;
 } & {
@@ -58,6 +59,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     readonly interRegionPaddingWidth: number;
     readonly assemblyNames: string[];
     readonly stickyViewHeaders: boolean;
+    readonly rubberbandTop: number;
     readonly pinnedTracksTop: number;
 } & {
     scaleBarDisplayPrefix(): string | undefined;
@@ -144,6 +146,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     setDraggingTrackId(idx?: string): void;
     setScaleFactor(factor: number): void;
     clearView(): void;
+    setInit(arg?: InitState): void;
     exportSvg(opts?: ExportSvgOptions): Promise<void>;
 } & {
     slide: (viewWidths: number) => void;
@@ -164,7 +167,6 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     readonly coarseVisibleLocStrings: string;
 } & {
     setCoarseDynamicBlocks(blocks: BlockSet): void;
-    afterAttach(): void;
 } & {
     moveTo(start?: BpOffset, end?: BpOffset): void;
     navToLocString(input: string, optAssemblyName?: string): Promise<void>;
@@ -172,6 +174,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
         input: string;
         assembly: Assembly;
     }): Promise<void>;
+    navToLocation(parsedLocString: ParsedLocString, assemblyName?: string): Promise<void>;
     navToLocations(parsedLocStrings: ParsedLocString[], assemblyName?: string): Promise<void>;
     navTo(query: NavLocation): void;
     navToMultiple(locations: NavLocation[]): void;
@@ -210,6 +213,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     } | undefined;
 } & {
     afterCreate(): void;
+    afterAttach(): void;
 }, import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -232,7 +236,28 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<HighlightType, HighlightType, HighlightType>>, [undefined]>;
     colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-}>>, import("mobx-state-tree")._NotCustomized>;
+    init: import("mobx-state-tree").IType<InitState | undefined, InitState | undefined, InitState | undefined>;
+}>>, {
+    type: string;
+    id: string;
+    displayName: string | undefined;
+    tracks: any[];
+    minimized: boolean;
+    displayedRegions: Region[];
+    offsetPx: number;
+    bpPerPx: number;
+    hideHeader: boolean;
+    hideHeaderOverview: boolean;
+    hideNoTracksActive: boolean;
+    trackSelectorType: string;
+    showCenterLine: boolean;
+    showCytobandsSetting: boolean;
+    trackLabels: string;
+    showGridlines: boolean;
+    highlight: HighlightType[];
+    colorByCDS: boolean;
+    showTrackOutlines: boolean;
+}>;
 export type LinearGenomeViewStateModel = ReturnType<typeof stateModelFactory>;
 export type LinearGenomeViewModel = Instance<LinearGenomeViewStateModel>;
 export { default as LinearGenomeView, default as ReactComponent, } from './components/LinearGenomeView';