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

package/dist/LinearGenomeView/model.js

@@ -93,6 +93,7 @@ function stateModelFactory(pluginManager) {
         highlight: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.array(mobx_state_tree_1.types.frozen()), []),
         colorByCDS: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => (0, util_1.localStorageGetBoolean)('lgv-colorByCDS', false)),
         showTrackOutlines: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => (0, util_1.localStorageGetBoolean)('lgv-showTrackOutlines', true)),
+        init: mobx_state_tree_1.types.frozen(),
     }))
         .volatile(() => ({
         volatileWidth: undefined,
@@ -141,10 +142,10 @@ function stateModelFactory(pluginManager) {
                 ? session.stickyViewHeaders
                 : false;
         },
-        get pinnedTracksTop() {
+        get rubberbandTop() {
             let pinnedTracksTop = 0;
             if (this.stickyViewHeaders) {
-                pinnedTracksTop = ui_1.VIEW_HEADER_HEIGHT + consts_1.SCALE_BAR_HEIGHT;
+                pinnedTracksTop = ui_1.VIEW_HEADER_HEIGHT;
                 if (!self.hideHeader) {
                     pinnedTracksTop += consts_1.HEADER_BAR_HEIGHT;
                     if (!self.hideHeaderOverview) {
@@ -154,6 +155,9 @@ function stateModelFactory(pluginManager) {
             }
             return pinnedTracksTop;
         },
+        get pinnedTracksTop() {
+            return this.rubberbandTop + consts_1.SCALE_BAR_HEIGHT;
+        },
     }))
         .views(self => ({
         scaleBarDisplayPrefix() {
@@ -267,32 +271,32 @@ function stateModelFactory(pluginManager) {
             return results;
         },
         rewriteOnClicks(trackType, viewMenuActions) {
-            viewMenuActions.forEach(action => {
+            for (const action of viewMenuActions) {
                 if ('subMenu' in action) {
                     this.rewriteOnClicks(trackType, action.subMenu);
                 }
                 if ('onClick' in action) {
                     const holdOnClick = action.onClick;
                     action.onClick = (...args) => {
-                        self.tracks.forEach(track => {
+                        for (const track of self.tracks) {
                             if (track.type === trackType) {
                                 holdOnClick.apply(track, [track, ...args]);
                             }
-                        });
+                        }
                     };
                 }
-            });
+            }
         },
         get trackTypeActions() {
             const allActions = new Map();
-            self.tracks.forEach(track => {
+            for (const track of self.tracks) {
                 const trackInMap = allActions.get(track.type);
                 if (!trackInMap) {
                     const viewMenuActions = structuredClone(track.viewMenuActions);
                     this.rewriteOnClicks(track.type, viewMenuActions);
                     allActions.set(track.type, viewMenuActions);
                 }
-            });
+            }
             return allActions;
         },
     }))
@@ -417,11 +421,13 @@ function stateModelFactory(pluginManager) {
         hideTrack(trackId) {
             const schema = pluginManager.pluggableConfigSchemaType('track');
             const conf = (0, mobx_state_tree_1.resolveIdentifier)(schema, (0, mobx_state_tree_1.getRoot)(self), trackId);
-            const t = self.tracks.filter(t => t.configuration === conf);
+            const tracks = self.tracks.filter(t => t.configuration === conf);
             (0, mobx_1.transaction)(() => {
-                t.forEach(t => self.tracks.remove(t));
+                for (const track of tracks) {
+                    self.tracks.remove(track);
+                }
             });
-            return t.length;
+            return tracks.length;
         },
     }))
         .actions(self => ({
@@ -562,6 +568,9 @@ function stateModelFactory(pluginManager) {
             self.scrollTo(0);
             self.zoomTo(10);
         },
+        setInit(arg) {
+            self.init = arg;
+        },
         async exportSvg(opts = {}) {
             const { renderToSvg } = await Promise.resolve().then(() => __importStar(require('./svgcomponents/SVGLinearGenomeView')));
             const html = await renderToSvg(self, opts);
@@ -782,7 +791,9 @@ function stateModelFactory(pluginManager) {
             for (const [key, value] of self.trackTypeActions.entries()) {
                 if (value.length) {
                     menuItems.push({ type: 'divider' }, { type: 'subHeader', label: key });
-                    value.forEach(action => menuItems.push(action));
+                    for (const action of value) {
+                        menuItems.push(action);
+                    }
                 }
             }
             return menuItems;
@@ -824,20 +835,6 @@ function stateModelFactory(pluginManager) {
             self.coarseDynamicBlocks = blocks.contentBlocks;
             self.coarseTotalBp = blocks.totalBp;
         },
-        afterAttach() {
-            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
-                if (self.initialized) {
-                    this.setCoarseDynamicBlocks(self.dynamicBlocks);
-                }
-            }, { delay: 150 }));
-            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
-                const s = (s) => JSON.stringify(s);
-                const { showCytobandsSetting, showCenterLine, colorByCDS } = self;
-                (0, util_1.localStorageSetItem)('lgv-showCytobands', s(showCytobandsSetting));
-                (0, util_1.localStorageSetItem)('lgv-showCenterLine', s(showCenterLine));
-                (0, util_1.localStorageSetItem)('lgv-colorByCDS', s(colorByCDS));
-            }));
-        },
     }))
         .actions(self => ({
         moveTo(start, end) {
@@ -859,6 +856,9 @@ function stateModelFactory(pluginManager) {
                 model: self,
             });
         },
+        async navToLocation(parsedLocString, assemblyName) {
+            return this.navToLocations([parsedLocString], assemblyName);
+        },
         async navToLocations(parsedLocStrings, assemblyName) {
             const { assemblyManager } = (0, util_1.getSession)(self);
             await (0, mobx_1.when)(() => self.volatileWidth !== undefined);
@@ -1004,6 +1004,33 @@ function stateModelFactory(pluginManager) {
                 document.removeEventListener('keydown', handler);
             });
         },
+        afterAttach() {
+            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
+                var _a;
+                const { init } = self;
+                if (init) {
+                    self
+                        .navToLocString(init.loc, init.assembly)
+                        .catch((e) => {
+                        (0, util_1.getSession)(self).notifyError(`${e}`, e);
+                    });
+                    (_a = init.tracks) === null || _a === void 0 ? void 0 : _a.map(t => self.showTrack(t));
+                    self.setInit(undefined);
+                }
+            }));
+            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
+                if (self.initialized) {
+                    self.setCoarseDynamicBlocks(self.dynamicBlocks);
+                }
+            }, { delay: 150 }));
+            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
+                const s = (s) => JSON.stringify(s);
+                const { showCytobandsSetting, showCenterLine, colorByCDS } = self;
+                (0, util_1.localStorageSetItem)('lgv-showCytobands', s(showCytobandsSetting));
+                (0, util_1.localStorageSetItem)('lgv-showCenterLine', s(showCenterLine));
+                (0, util_1.localStorageSetItem)('lgv-colorByCDS', s(colorByCDS));
+            }));
+        },
     }))
         .preProcessSnapshot(snap => {
         if (!snap) {
@@ -1016,6 +1043,15 @@ function stateModelFactory(pluginManager) {
                 : [highlight],
             ...rest,
         };
+    })
+        .postProcessSnapshot(snap => {
+        if (!snap) {
+            return snap;
+        }
+        else {
+            const { init, ...rest } = snap;
+            return rest;
+        }
     });
 }
 var LinearGenomeView_1 = require("./components/LinearGenomeView");

package/dist/LinearGenomeView/types.d.ts

@@ -36,3 +36,8 @@ export interface NavLocation {
     end?: number;
     assemblyName?: string;
 }
+export interface InitState {
+    loc: string;
+    assembly: string;
+    tracks?: string[];
+}

package/esm/BaseLinearDisplay/components/LinearBlocks.js

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

package/esm/BaseLinearDisplay/models/BaseLinearDisplayModel.js

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

package/esm/LaunchLinearGenomeView/index.js

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

package/esm/LinearBasicDisplay/components/AddFiltersDialog.js

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

@@ -127,7 +127,10 @@ function stateModelFactory(configSchema) {
                         onClick: () => {
                             getSession(self).queueDialog(handleClose => [
                                 SetMaxHeightDialog,
-                                { model: self, handleClose },
+                                {
+                                    model: self,
+                                    handleClose,
+                                },
                             ]);
                         },
                     },
@@ -136,7 +139,10 @@ function stateModelFactory(configSchema) {
                         onClick: () => {
                             getSession(self).queueDialog(handleClose => [
                                 AddFiltersDialog,
-                                { model: self, handleClose },
+                                {
+                                    model: self,
+                                    handleClose,
+                                },
                             ]);
                         },
                     },

package/esm/LinearGenomeView/components/HeaderZoomControls.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { lazy, useEffect, useState } from 'react';
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
-import { getSession } from '@jbrowse/core/util';
+import { getBpDisplayStr, getSession } from '@jbrowse/core/util';
 import MoreVert from '@mui/icons-material/MoreVert';
 import ZoomIn from '@mui/icons-material/ZoomIn';
 import ZoomOut from '@mui/icons-material/ZoomOut';
@@ -20,9 +20,13 @@ const useStyles = makeStyles()(theme => ({
         color: theme.palette.text.secondary,
     },
 }));
+function ValueLabelComponent(props) {
+    const { children, open, value } = props;
+    return (_jsx(Tooltip, { open: open, enterTouchDelay: 0, placement: "top", title: value, arrow: true, children: children }));
+}
 const HeaderZoomControls = observer(function ({ model, }) {
     const { classes } = useStyles();
-    const { maxBpPerPx, minBpPerPx, bpPerPx } = model;
+    const { width, maxBpPerPx, minBpPerPx, bpPerPx } = model;
     const [value, setValue] = useState(-Math.log2(bpPerPx) * 100);
     useEffect(() => {
         setValue(-Math.log2(bpPerPx) * 100);
@@ -31,7 +35,9 @@ const HeaderZoomControls = observer(function ({ model, }) {
     const zoomOutDisabled = bpPerPx >= maxBpPerPx - 0.0001;
     return (_jsxs("div", { className: classes.container, children: [_jsx(Tooltip, { title: "Zoom out 2x", children: _jsx("span", { children: _jsx(IconButton, { "data-testid": "zoom_out", disabled: zoomOutDisabled, onClick: () => {
                             model.zoom(bpPerPx * 2);
-                        }, children: _jsx(ZoomOut, {}) }) }) }), _jsx(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: _jsx(ZoomOut, {}) }) }) }), _jsx(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: ${getBpDisplayStr(2 ** (-newValue / 100) * width)}`, slots: {
+                    valueLabel: ValueLabelComponent,
+                }, onChange: (_, val) => {
                     setValue(val);
                 } }), _jsx(Tooltip, { title: "Zoom in 2x", children: _jsx("span", { children: _jsx(IconButton, { "data-testid": "zoom_in", disabled: zoomInDisabled, onClick: () => {
                             model.zoom(model.bpPerPx / 2);

package/esm/LinearGenomeView/components/ImportForm.js

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { AssemblySelector, ErrorMessage } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
 import CloseIcon from '@mui/icons-material/Close';
-import { Button, CircularProgress, Container, FormControl, Grid2 as Grid, } from '@mui/material';
+import { Button, CircularProgress, Container, FormControl, Grid as Grid, } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 import ImportFormRefNameAutocomplete from './ImportFormRefNameAutocomplete';

package/esm/LinearGenomeView/components/OverviewRubberband.js

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

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

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

package/esm/LinearGenomeView/components/OverviewRubberbandHoverTooltip.js

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

package/esm/LinearGenomeView/components/Rubberband.js

@@ -1,14 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
-import { Menu, VIEW_HEADER_HEIGHT } from '@jbrowse/core/ui';
-import { getSession } from '@jbrowse/core/util';
-import { isSessionWithMultipleViews } from '@jbrowse/product-core';
+import { Menu } from '@jbrowse/core/ui';
 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',
@@ -20,28 +17,13 @@ const useStyles = makeStyles()({
 const Rubberband = observer(function ({ model, ControlComponent = _jsx("div", {}), }) {
     const ref = useRef(null);
     const { classes } = useStyles();
-    const session = getSession(model);
+    const { stickyViewHeaders, rubberbandTop } = model;
     const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown, mouseOut, } = useRangeSelect(ref, model);
-    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: {
+    return (_jsxs(_Fragment, { children: [guideX !== undefined ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn ? (_jsx(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: rubberbandTop, sticky: stickyViewHeaders })) : null, anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
                     left: anchorPosition.clientX,
                     top: anchorPosition.clientY,
                 }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null, _jsx("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, style: {
-                    top: rubberbandControlTop,
+                    top: rubberbandTop,
                     position: stickyViewHeaders ? 'sticky' : undefined,
                 }, ref: ref, onMouseDown: mouseDown, onMouseMove: mouseMove, onMouseOut: mouseOut, children: ControlComponent })] }));
 });

package/esm/LinearGenomeView/components/RubberbandSpan.js

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

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

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

package/esm/LinearGenomeView/components/RubberbandTooltip.js

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

package/esm/LinearGenomeView/components/TracksContainer.js

@@ -24,7 +24,7 @@ const TracksContainer = observer(function TracksContainer({ children, model, })
     const { classes } = useStyles();
     const { pluginManager } = getEnv(model);
     const { mouseDown: mouseDown1, mouseUp } = useSideScroll(model);
-    const { stickyViewHeaders, pinnedTracksTop, showGridlines, showCenterLine } = model;
+    const { stickyViewHeaders, rubberbandTop, showGridlines, showCenterLine } = model;
     const ref = useRef(null);
     const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown: mouseDown2, } = useRangeSelect(ref, model, true);
     useWheelScroll(ref, model);
@@ -32,7 +32,7 @@ const TracksContainer = observer(function TracksContainer({ children, model, })
     return (_jsxs("div", { ref: ref, "data-testid": "tracksContainer", className: classes.tracksContainer, onMouseDown: event => {
             mouseDown1(event);
             mouseDown2(event);
-        }, onMouseMove: mouseMove, onMouseUp: mouseUp, children: [showGridlines ? _jsx(Gridlines, { model: model }) : null, _jsx(Suspense, { fallback: null, children: showCenterLine ? _jsx(CenterLine, { model: model }) : null }), guideX !== undefined ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn ? (_jsx(Suspense, { fallback: null, children: _jsx(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: pinnedTracksTop, sticky: stickyViewHeaders }) })) : null, anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
+        }, onMouseMove: mouseMove, onMouseUp: mouseUp, children: [showGridlines ? _jsx(Gridlines, { model: model }) : null, _jsx(Suspense, { fallback: null, children: showCenterLine ? _jsx(CenterLine, { model: model }) : null }), guideX !== undefined ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn ? (_jsx(Suspense, { fallback: null, children: _jsx(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: rubberbandTop, sticky: stickyViewHeaders }) })) : null, anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
                     left: anchorPosition.clientX,
                     top: anchorPosition.clientY,
                 }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null, _jsx(Rubberband, { model: model, ControlComponent: _jsx(Scalebar, { model: model, style: {