@jbrowse/plugin-linear-genome-view 3.6.5 → 4.0.0

package/esm/LinearGenomeView/model.js

@@ -2,37 +2,25 @@ import { lazy } from 'react';
 import { getConf } from '@jbrowse/core/configuration';
 import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
 import { VIEW_HEADER_HEIGHT } from '@jbrowse/core/ui';
-import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
-import { assembleLocString, clamp, findLast, getSession, isSessionModelWithWidgets, isSessionWithAddTracks, localStorageGetBoolean, localStorageGetItem, localStorageSetItem, measureText, springAnimate, sum, } from '@jbrowse/core/util';
+import { assembleLocString, clamp, findLast, getBpDisplayStr, getSession, isSessionModelWithWidgets, localStorageGetBoolean, localStorageGetItem, measureText, springAnimate, sum, } from '@jbrowse/core/util';
 import { bpToPx, moveTo, pxToBp } from '@jbrowse/core/util/Base1DUtils';
 import Base1DView from '@jbrowse/core/util/Base1DViewModel';
 import calculateDynamicBlocks from '@jbrowse/core/util/calculateDynamicBlocks';
 import calculateStaticBlocks from '@jbrowse/core/util/calculateStaticBlocks';
-import { getParentRenderProps } from '@jbrowse/core/util/tracks';
+import { getParentRenderProps, hideTrackGeneric, showTrackGeneric, toggleTrackGeneric, } from '@jbrowse/core/util/tracks';
 import { ElementId } from '@jbrowse/core/util/types/mst';
+import { cast, getParent, getSnapshot, types } from '@jbrowse/mobx-state-tree';
 import { isSessionWithMultipleViews } from '@jbrowse/product-core';
-import FolderOpenIcon from '@mui/icons-material/FolderOpen';
-import LabelIcon from '@mui/icons-material/Label';
-import MenuOpenIcon from '@mui/icons-material/MenuOpen';
-import PaletteIcon from '@mui/icons-material/Palette';
-import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
-import SearchIcon from '@mui/icons-material/Search';
-import SyncAltIcon from '@mui/icons-material/SyncAlt';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import ZoomInIcon from '@mui/icons-material/ZoomIn';
-import { saveAs } from 'file-saver';
-import { autorun, transaction, when } from 'mobx';
-import { addDisposer, cast, getParent, getRoot, getSnapshot, resolveIdentifier, types, } from 'mobx-state-tree';
-import Header from './components/Header';
-import { calculateVisibleLocStrings, generateLocations, parseLocStrings, } from './util';
-import { handleSelectedRegion } from '../searchUtils';
-import MiniControls from './components/MiniControls';
-import { HEADER_BAR_HEIGHT, HEADER_OVERVIEW_HEIGHT, INTER_REGION_PADDING_WIDTH, RESIZE_HANDLE_HEIGHT, SCALE_BAR_HEIGHT, } from './consts';
-const ReturnToImportFormDialog = lazy(() => import('@jbrowse/core/ui/ReturnToImportFormDialog'));
-const SequenceSearchDialog = lazy(() => import('./components/SequenceSearchDialog'));
-const ExportSvgDialog = lazy(() => import('./components/ExportSvgDialog'));
-const GetSequenceDialog = lazy(() => import('./components/GetSequenceDialog'));
-const SearchResultsDialog = lazy(() => import('./components/SearchResultsDialog'));
+import { when } from 'mobx';
+import { handleSelectedRegion } from "../searchUtils.js";
+import { doAfterAttach } from "./afterAttach.js";
+import Header from "./components/Header.js";
+import MiniControls from "./components/MiniControls.js";
+import { HEADER_BAR_HEIGHT, HEADER_OVERVIEW_HEIGHT, INTER_REGION_PADDING_WIDTH, RESIZE_HANDLE_HEIGHT, SCALE_BAR_HEIGHT, } from "./consts.js";
+import { setupKeyboardHandler } from "./keyboardHandler.js";
+import { buildMenuItems, buildRubberBandMenuItems, buildRubberbandClickMenuItems, rewriteOnClicks, } from "./menuItems.js";
+import { calculateVisibleLocStrings, generateLocations, parseLocStrings, } from "./util.js";
+const SearchResultsDialog = lazy(() => import("./components/SearchResultsDialog.js"));
 export function stateModelFactory(pluginManager) {
     return types
         .compose('LinearGenomeView', BaseViewModel, types.model({
@@ -59,8 +47,8 @@ export function stateModelFactory(pluginManager) {
         volatileWidth: undefined,
         minimumBlockWidth: 3,
         draggingTrackId: undefined,
+        lastTrackDragY: undefined,
         volatileError: undefined,
-        afterDisplayedRegionsSetCallbacks: [],
         scaleFactor: 1,
         trackRefs: {},
         coarseDynamicBlocks: [],
@@ -92,21 +80,14 @@ export function stateModelFactory(pluginManager) {
             return INTER_REGION_PADDING_WIDTH;
         },
         get assemblyNames() {
-            return [
-                ...new Set(self.displayedRegions.map(region => region.assemblyName)),
-            ];
+            return [...new Set(self.displayedRegions.map(r => r.assemblyName))];
         },
         get assemblyDisplayNames() {
             const { assemblyManager } = getSession(self);
-            return this.assemblyNames.map(assemblyName => {
-                var _a;
-                const assembly = assemblyManager.get(assemblyName);
-                return (_a = assembly === null || assembly === void 0 ? void 0 : assembly.displayName) !== null && _a !== void 0 ? _a : assemblyName;
-            });
+            return this.assemblyNames.map(a => assemblyManager.get(a)?.displayName ?? a);
         },
         get isTopLevelView() {
-            const session = getSession(self);
-            return session.views.some(r => r.id === self.id);
+            return getSession(self).views.some(r => r.id === self.id);
         },
         get stickyViewHeaders() {
             const session = getSession(self);
@@ -132,7 +113,7 @@ export function stateModelFactory(pluginManager) {
         },
     }))
         .views(self => ({
-        scaleBarDisplayPrefix() {
+        scalebarDisplayPrefix() {
             return getParent(self, 2).type === 'LinearSyntenyView'
                 ? self.assemblyDisplayNames[0]
                 : '';
@@ -154,21 +135,41 @@ export function stateModelFactory(pluginManager) {
         get assemblyErrors() {
             const { assemblyManager } = getSession(self);
             return self.assemblyNames
-                .map(a => { var _a; return (_a = assemblyManager.get(a)) === null || _a === void 0 ? void 0 : _a.error; })
+                .map(a => assemblyManager.get(a)?.error)
                 .filter(f => !!f)
                 .join(', ');
         },
         get assembliesInitialized() {
             const { assemblyManager } = getSession(self);
-            return self.assemblyNames.every(a => { var _a; return (_a = assemblyManager.get(a)) === null || _a === void 0 ? void 0 : _a.initialized; });
+            return self.assemblyNames.every(a => assemblyManager.get(a)?.initialized);
         },
         get initialized() {
-            return self.volatileWidth !== undefined && this.assembliesInitialized;
+            if (self.volatileWidth === undefined) {
+                return false;
+            }
+            if (self.init) {
+                const { assemblyManager } = getSession(self);
+                const asm = assemblyManager.get(self.init.assembly);
+                return !!(asm?.initialized && asm.regions);
+            }
+            return this.assembliesInitialized;
         },
         get hasDisplayedRegions() {
             return self.displayedRegions.length > 0;
         },
-        get scaleBarHeight() {
+        get loadingMessage() {
+            return this.showLoading ? 'Loading' : undefined;
+        },
+        get hasSomethingToShow() {
+            return this.hasDisplayedRegions || !!self.init;
+        },
+        get showLoading() {
+            return !this.initialized && !this.error && this.hasSomethingToShow;
+        },
+        get showImportForm() {
+            return !this.hasSomethingToShow || !!this.error;
+        },
+        get scalebarHeight() {
             return SCALE_BAR_HEIGHT + RESIZE_HANDLE_HEIGHT;
         },
         get headerHeight() {
@@ -191,7 +192,7 @@ export function stateModelFactory(pluginManager) {
         get height() {
             return (this.trackHeightsWithResizeHandles +
                 this.headerHeight +
-                this.scaleBarHeight);
+                this.scalebarHeight);
         },
         get totalBp() {
             return sum(self.displayedRegions.map(r => r.end - r.start));
@@ -203,7 +204,26 @@ export function stateModelFactory(pluginManager) {
             return 1 / 50;
         },
         get error() {
-            return (self.volatileError || this.assemblyErrors || this.assembliesNotFound);
+            if (self.volatileError) {
+                return self.volatileError;
+            }
+            if (this.assemblyErrors) {
+                return this.assemblyErrors;
+            }
+            if (this.assembliesNotFound) {
+                return this.assembliesNotFound;
+            }
+            if (self.init) {
+                const { assemblyManager } = getSession(self);
+                const asm = assemblyManager.get(self.init.assembly);
+                if (asm?.error) {
+                    return asm.error;
+                }
+                if (!asm) {
+                    return `Assembly ${self.init.assembly} not found`;
+                }
+            }
+            return undefined;
         },
         get maxOffset() {
             const leftPadding = 10;
@@ -230,36 +250,26 @@ export function stateModelFactory(pluginManager) {
                 tracks: self.tracks,
             };
         },
+        get trackMap() {
+            const map = new Map();
+            for (const track of self.tracks) {
+                map.set(track.configuration.trackId, track);
+            }
+            return map;
+        },
         getTrack(id) {
-            return self.tracks.find(t => t.configuration.trackId === id);
+            return this.trackMap.get(id);
         },
         rankSearchResults(results) {
             return results;
         },
-        rewriteOnClicks(trackType, viewMenuActions) {
-            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) => {
-                        for (const track of self.tracks) {
-                            if (track.type === trackType) {
-                                holdOnClick.apply(track, [track, ...args]);
-                            }
-                        }
-                    };
-                }
-            }
-        },
         get trackTypeActions() {
             const allActions = new Map();
             for (const track of self.tracks) {
                 const trackInMap = allActions.get(track.type);
                 if (!trackInMap) {
                     const viewMenuActions = structuredClone(track.viewMenuActions);
-                    this.rewriteOnClicks(track.type, viewMenuActions);
+                    rewriteOnClicks(self, track.type, viewMenuActions);
                     allActions.set(track.type, viewMenuActions);
                 }
             }
@@ -319,8 +329,9 @@ export function stateModelFactory(pluginManager) {
                 return oldBpPerPx;
             }
             self.bpPerPx = newBpPerPx;
-            this.scrollTo(Math.round(((self.offsetPx + offset) * oldBpPerPx) / newBpPerPx -
-                (centerAtOffset ? self.width / 2 : offset)));
+            const newOffsetPx = Math.round(((self.offsetPx + offset) * oldBpPerPx) / newBpPerPx -
+                (centerAtOffset ? self.width / 2 : offset));
+            this.scrollTo(newOffsetPx);
             return newBpPerPx;
         },
         setOffsets(left, right) {
@@ -350,58 +361,15 @@ export function stateModelFactory(pluginManager) {
             this.scrollTo(self.totalBp / self.bpPerPx - self.offsetPx - self.width);
         },
         showTrack(trackId, initialSnapshot = {}, displayInitialSnapshot = {}) {
-            const schema = pluginManager.pluggableConfigSchemaType('track');
-            const conf = resolveIdentifier(schema, getRoot(self), trackId);
-            if (!conf) {
-                throw new Error(`Could not resolve identifier "${trackId}"`);
-            }
-            const trackType = pluginManager.getTrackType(conf === null || conf === void 0 ? void 0 : conf.type);
-            if (!trackType) {
-                throw new Error(`Unknown track type ${conf.type}`);
-            }
-            const viewType = pluginManager.getViewType(self.type);
-            const supportedDisplays = new Set(viewType.displayTypes.map(d => d.name));
-            const displayConf = conf.displays.find((d) => supportedDisplays.has(d.type));
-            if (!displayConf) {
-                throw new Error(`Could not find a compatible display for view type ${self.type}`);
-            }
-            const t = self.tracks.filter(t => t.configuration === conf);
-            if (t.length === 0) {
-                const track = trackType.stateModel.create({
-                    ...initialSnapshot,
-                    type: conf.type,
-                    configuration: conf,
-                    displays: [
-                        {
-                            type: displayConf.type,
-                            configuration: displayConf,
-                            ...displayInitialSnapshot,
-                        },
-                    ],
-                });
-                self.tracks.push(track);
-                return track;
-            }
-            return t[0];
+            return showTrackGeneric(self, trackId, initialSnapshot, displayInitialSnapshot);
         },
         hideTrack(trackId) {
-            const schema = pluginManager.pluggableConfigSchemaType('track');
-            const conf = resolveIdentifier(schema, getRoot(self), trackId);
-            const tracks = self.tracks.filter(t => t.configuration === conf);
-            transaction(() => {
-                for (const track of tracks) {
-                    self.tracks.remove(track);
-                }
-            });
-            return tracks.length;
+            return hideTrackGeneric(self, trackId);
         },
     }))
         .actions(self => ({
         moveTrackDown(id) {
             const idx = self.tracks.findIndex(v => v.id === id);
-            if (idx === -1) {
-                return;
-            }
             if (idx !== -1 && idx < self.tracks.length - 1) {
                 self.tracks.splice(idx, 2, self.tracks[idx + 1], self.tracks[idx]);
             }
@@ -413,18 +381,16 @@ export function stateModelFactory(pluginManager) {
             }
         },
         moveTrackToTop(id) {
-            const idx = self.tracks.findIndex(track => track.id === id);
-            self.tracks = cast([
-                self.tracks[idx],
-                ...self.tracks.filter(track => track.id !== id),
-            ]);
+            const track = self.tracks.find(track => track.id === id);
+            if (track) {
+                self.tracks = cast([track, ...self.tracks.filter(t => t.id !== id)]);
+            }
         },
         moveTrackToBottom(id) {
-            const idx = self.tracks.findIndex(track => track.id === id);
-            self.tracks = cast([
-                ...self.tracks.filter(track => track.id !== id),
-                self.tracks[idx],
-            ]);
+            const track = self.tracks.find(track => track.id === id);
+            if (track) {
+                self.tracks = cast([...self.tracks.filter(t => t.id !== id), track]);
+            }
         },
         moveTrack(movingId, targetId) {
             const oldIndex = self.tracks.findIndex(track => track.id === movingId);
@@ -440,15 +406,9 @@ export function stateModelFactory(pluginManager) {
             self.tracks = cast(tracks);
         },
         toggleTrack(trackId) {
-            const hiddenCount = self.hideTrack(trackId);
-            if (!hiddenCount) {
-                self.showTrack(trackId);
-                return true;
-            }
-            return false;
+            toggleTrackGeneric(self, trackId);
         },
         setTrackLabels(setting) {
-            localStorage.setItem('lgv-trackLabels', setting);
             self.trackLabels = setting;
         },
         setShowCenterLine(b) {
@@ -478,26 +438,27 @@ export function stateModelFactory(pluginManager) {
             simView.setVolatileWidth(self.width);
             simView.moveTo(leftOffset, rightOffset);
             return simView.dynamicBlocks.contentBlocks.map(region => ({
-                ...region,
+                assemblyName: region.assemblyName,
+                refName: region.refName,
                 start: Math.floor(region.start),
                 end: Math.ceil(region.end),
             }));
         },
-        afterDisplayedRegionsSet(cb) {
-            self.afterDisplayedRegionsSetCallbacks.push(cb);
-        },
         horizontalScroll(distance) {
             const oldOffsetPx = self.offsetPx;
             const newOffsetPx = self.scrollTo(self.offsetPx + distance);
             return newOffsetPx - oldOffsetPx;
         },
         center() {
-            const centerBp = self.totalBp / 2;
-            const centerPx = centerBp / self.bpPerPx;
-            self.scrollTo(Math.round(centerPx - self.width / 2));
+            const numPaddings = Math.max(0, self.displayedRegions.length - 1);
+            const totalPaddingPx = numPaddings * self.interRegionPaddingWidth;
+            const totalContentPx = self.totalBp / self.bpPerPx + totalPaddingPx;
+            const centerPx = totalContentPx / 2;
+            const targetOffsetPx = Math.round(centerPx - self.width / 2);
+            self.scrollTo(targetOffsetPx);
         },
         showAllRegions() {
-            self.zoomTo(self.maxBpPerPx);
+            self.bpPerPx = clamp(self.maxBpPerPx, self.minBpPerPx, self.maxBpPerPx);
             this.center();
         },
         showAllRegionsInAssembly(assemblyName) {
@@ -512,18 +473,22 @@ export function stateModelFactory(pluginManager) {
                 ;
                 [assemblyName] = [...names];
             }
-            const assembly = assemblyManager.get(assemblyName);
-            if (assembly) {
-                const { regions } = assembly;
-                if (regions) {
-                    this.setDisplayedRegions(regions);
-                    self.zoomTo(self.maxBpPerPx);
-                    this.center();
-                }
+            const regions = assemblyManager.get(assemblyName)?.regions;
+            if (!regions) {
+                return;
             }
+            this.setDisplayedRegions(regions);
+            self.zoomTo(self.maxBpPerPx);
+            this.center();
         },
         setDraggingTrackId(idx) {
             self.draggingTrackId = idx;
+            if (idx === undefined) {
+                self.lastTrackDragY = undefined;
+            }
+        },
+        setLastTrackDragY(y) {
+            self.lastTrackDragY = y;
         },
         setScaleFactor(factor) {
             self.scaleFactor = factor;
@@ -538,10 +503,10 @@ export function stateModelFactory(pluginManager) {
             self.init = arg;
         },
         async exportSvg(opts = {}) {
-            const { renderToSvg } = await import('./svgcomponents/SVGLinearGenomeView');
+            const { renderToSvg } = await import("./svgcomponents/SVGLinearGenomeView.js");
             const html = await renderToSvg(self, opts);
-            const blob = new Blob([html], { type: 'image/svg+xml' });
-            saveAs(blob, opts.filename || 'image.svg');
+            const { saveAs } = await import('file-saver-es');
+            saveAs(new Blob([html], { type: 'image/svg+xml' }), opts.filename || 'image.svg');
         },
     }))
         .actions(self => {
@@ -557,6 +522,8 @@ export function stateModelFactory(pluginManager) {
         .actions(self => {
         let cancelLastAnimation = () => { };
         function zoom(targetBpPerPx) {
+            cancelLastAnimation();
+            self.setScaleFactor(1);
             self.zoomTo(self.bpPerPx);
             if ((targetBpPerPx < self.bpPerPx && self.bpPerPx === self.minBpPerPx) ||
                 (targetBpPerPx > self.bpPerPx && self.bpPerPx === self.maxBpPerPx)) {
@@ -567,7 +534,6 @@ export function stateModelFactory(pluginManager) {
                 self.zoomTo(targetBpPerPx);
                 self.setScaleFactor(1);
             });
-            cancelLastAnimation();
             cancelLastAnimation = cancelAnimation;
             animate();
         }
@@ -582,207 +548,35 @@ export function stateModelFactory(pluginManager) {
         },
         get anyCytobandsExist() {
             const { assemblyManager } = getSession(self);
-            return self.assemblyNames.some(a => { var _a, _b; return (_b = (_a = assemblyManager.get(a)) === null || _a === void 0 ? void 0 : _a.cytobands) === null || _b === void 0 ? void 0 : _b.length; });
+            return self.assemblyNames.some(a => assemblyManager.get(a)?.cytobands?.length);
         },
         get cytobandOffset() {
-            var _a;
             return this.showCytobands
-                ? measureText(((_a = self.displayedRegions[0]) === null || _a === void 0 ? void 0 : _a.refName) || '', 12) + 15
+                ? measureText(self.displayedRegions[0]?.refName || '', 12) + 15
                 : 0;
         },
     }))
         .views(self => ({
         menuItems() {
-            const { canShowCytobands, showCytobands } = self;
-            const session = getSession(self);
-            const menuItems = [
-                {
-                    label: 'Return to import form',
-                    onClick: () => {
-                        getSession(self).queueDialog(handleClose => [
-                            ReturnToImportFormDialog,
-                            { model: self, handleClose },
-                        ]);
-                    },
-                    icon: FolderOpenIcon,
-                },
-                ...(isSessionWithAddTracks(session)
-                    ? [
-                        {
-                            label: 'Sequence search',
-                            icon: SearchIcon,
-                            onClick: () => {
-                                getSession(self).queueDialog(handleClose => [
-                                    SequenceSearchDialog,
-                                    {
-                                        model: self,
-                                        handleClose,
-                                    },
-                                ]);
-                            },
-                        },
-                    ]
-                    : []),
-                {
-                    label: 'Export SVG',
-                    icon: PhotoCameraIcon,
-                    onClick: () => {
-                        getSession(self).queueDialog(handleClose => [
-                            ExportSvgDialog,
-                            {
-                                model: self,
-                                handleClose,
-                            },
-                        ]);
-                    },
-                },
-                {
-                    label: 'Open track selector',
-                    onClick: self.activateTrackSelector,
-                    icon: TrackSelectorIcon,
-                },
-                {
-                    label: 'Horizontally flip',
-                    icon: SyncAltIcon,
-                    onClick: self.horizontallyFlip,
-                },
-                {
-                    label: 'Color by CDS',
-                    type: 'checkbox',
-                    checked: self.colorByCDS,
-                    icon: PaletteIcon,
-                    onClick: () => {
-                        self.setColorByCDS(!self.colorByCDS);
-                    },
-                },
-                {
-                    label: 'Show...',
-                    icon: VisibilityIcon,
-                    subMenu: [
-                        {
-                            label: 'Show all regions in assembly',
-                            onClick: self.showAllRegionsInAssembly,
-                        },
-                        {
-                            label: 'Show center line',
-                            type: 'checkbox',
-                            checked: self.showCenterLine,
-                            onClick: () => {
-                                self.setShowCenterLine(!self.showCenterLine);
-                            },
-                        },
-                        {
-                            label: 'Show header',
-                            type: 'checkbox',
-                            checked: !self.hideHeader,
-                            onClick: () => {
-                                self.setHideHeader(!self.hideHeader);
-                            },
-                        },
-                        {
-                            label: 'Show track outlines',
-                            type: 'checkbox',
-                            checked: self.showTrackOutlines,
-                            onClick: () => {
-                                self.setShowTrackOutlines(!self.showTrackOutlines);
-                            },
-                        },
-                        {
-                            label: 'Show header overview',
-                            type: 'checkbox',
-                            checked: !self.hideHeaderOverview,
-                            onClick: () => {
-                                self.setHideHeaderOverview(!self.hideHeaderOverview);
-                            },
-                            disabled: self.hideHeader,
-                        },
-                        {
-                            label: 'Show no tracks active button',
-                            type: 'checkbox',
-                            checked: !self.hideNoTracksActive,
-                            onClick: () => {
-                                self.setHideNoTracksActive(!self.hideNoTracksActive);
-                            },
-                        },
-                        {
-                            label: 'Show guidelines',
-                            type: 'checkbox',
-                            checked: self.showGridlines,
-                            onClick: () => {
-                                self.setShowGridlines(!self.showGridlines);
-                            },
-                        },
-                        ...(canShowCytobands
-                            ? [
-                                {
-                                    label: 'Show ideogram',
-                                    type: 'checkbox',
-                                    checked: self.showCytobands,
-                                    onClick: () => {
-                                        self.setShowCytobands(!showCytobands);
-                                    },
-                                },
-                            ]
-                            : []),
-                    ],
-                },
-                {
-                    label: 'Track labels',
-                    icon: LabelIcon,
-                    subMenu: [
-                        {
-                            label: 'Overlapping',
-                            icon: VisibilityIcon,
-                            type: 'radio',
-                            checked: self.trackLabelsSetting === 'overlapping',
-                            onClick: () => {
-                                self.setTrackLabels('overlapping');
-                            },
-                        },
-                        {
-                            label: 'Offset',
-                            icon: VisibilityIcon,
-                            type: 'radio',
-                            checked: self.trackLabelsSetting === 'offset',
-                            onClick: () => {
-                                self.setTrackLabels('offset');
-                            },
-                        },
-                        {
-                            label: 'Hidden',
-                            icon: VisibilityIcon,
-                            type: 'radio',
-                            checked: self.trackLabelsSetting === 'hidden',
-                            onClick: () => {
-                                self.setTrackLabels('hidden');
-                            },
-                        },
-                    ],
-                },
-            ];
-            for (const [key, value] of self.trackTypeActions.entries()) {
-                if (value.length) {
-                    menuItems.push({ type: 'divider' }, { type: 'subHeader', label: key });
-                    for (const action of value) {
-                        menuItems.push(action);
-                    }
-                }
-            }
-            return menuItems;
+            return buildMenuItems(self);
         },
     }))
         .views(self => {
         let currentlyCalculatedStaticBlocks;
-        let stringifiedCurrentlyCalculatedStaticBlocks = '';
+        let currentBlockKeys;
         return {
             get staticBlocks() {
-                const ret = calculateStaticBlocks(self);
-                const sret = JSON.stringify(ret);
-                if (stringifiedCurrentlyCalculatedStaticBlocks !== sret) {
-                    currentlyCalculatedStaticBlocks = ret;
-                    stringifiedCurrentlyCalculatedStaticBlocks = sret;
+                const newBlocks = calculateStaticBlocks(self);
+                const newKeys = newBlocks.blocks.map(b => b.key).join(',');
+                if (currentlyCalculatedStaticBlocks === undefined ||
+                    currentBlockKeys !== newKeys) {
+                    currentlyCalculatedStaticBlocks = newBlocks;
+                    currentBlockKeys = newKeys;
+                    return currentlyCalculatedStaticBlocks;
+                }
+                else {
+                    return currentlyCalculatedStaticBlocks;
                 }
-                return currentlyCalculatedStaticBlocks;
             },
             get dynamicBlocks() {
                 return calculateDynamicBlocks(self);
@@ -800,6 +594,9 @@ export function stateModelFactory(pluginManager) {
             get coarseVisibleLocStrings() {
                 return calculateVisibleLocStrings(self.coarseDynamicBlocks);
             },
+            get coarseTotalBpDisplayStr() {
+                return getBpDisplayStr(self.coarseTotalBp);
+            },
         };
     })
         .actions(self => ({
@@ -851,8 +648,8 @@ export function stateModelFactory(pluginManager) {
                 ]);
                 this.navTo({
                     ...location,
-                    start: clamp(start !== null && start !== void 0 ? start : 0, 0, parentRegion.end),
-                    end: clamp(end !== null && end !== void 0 ? end : parentRegion.end, 0, parentRegion.end),
+                    start: clamp(start ?? 0, 0, parentRegion.end),
+                    end: clamp(end ?? parentRegion.end, 0, parentRegion.end),
                 });
             }
             else {
@@ -884,11 +681,11 @@ export function stateModelFactory(pluginManager) {
             const defaultAssemblyName = self.assemblyNames[0];
             const { assemblyManager } = getSession(self);
             const firstAssembly = assemblyManager.get(firstLocation.assemblyName || defaultAssemblyName);
-            const firstRefName = (firstAssembly === null || firstAssembly === void 0 ? void 0 : firstAssembly.getCanonicalRefName(firstLocation.refName)) ||
+            const firstRefName = firstAssembly?.getCanonicalRefName(firstLocation.refName) ||
                 firstLocation.refName;
             const firstRegion = self.displayedRegions.find(r => r.refName === firstRefName);
             const lastAssembly = assemblyManager.get(lastLocation.assemblyName || defaultAssemblyName);
-            const lastRefName = (lastAssembly === null || lastAssembly === void 0 ? void 0 : lastAssembly.getCanonicalRefName(lastLocation.refName)) ||
+            const lastRefName = lastAssembly?.getCanonicalRefName(lastLocation.refName) ||
                 lastLocation.refName;
             const lastRegion = findLast(self.displayedRegions, r => r.refName === lastRefName);
             if (!firstRegion) {
@@ -937,25 +734,7 @@ export function stateModelFactory(pluginManager) {
     }))
         .views(self => ({
         rubberBandMenuItems() {
-            return [
-                {
-                    label: 'Zoom to region',
-                    icon: ZoomInIcon,
-                    onClick: () => {
-                        self.moveTo(self.leftOffset, self.rightOffset);
-                    },
-                },
-                {
-                    label: 'Get sequence',
-                    icon: MenuOpenIcon,
-                    onClick: () => {
-                        getSession(self).queueDialog(handleClose => [
-                            GetSequenceDialog,
-                            { model: self, handleClose },
-                        ]);
-                    },
-                },
-            ];
+            return buildRubberBandMenuItems(self);
         },
         bpToPx({ refName, coord, regionNumber, }) {
             return bpToPx({ refName, coord, regionNumber, self });
@@ -978,62 +757,21 @@ export function stateModelFactory(pluginManager) {
                 ? this.pxToBp(self.width / 2)
                 : undefined;
         },
+        get visibleRegions() {
+            return self.dynamicBlocks.contentBlocks;
+        },
+    }))
+        .views(self => ({
+        rubberbandClickMenuItems(clickOffset) {
+            return buildRubberbandClickMenuItems(self, clickOffset);
+        },
     }))
         .actions(self => ({
         afterCreate() {
-            function handler(e) {
-                const session = getSession(self);
-                if (session.focusedViewId === self.id && (e.ctrlKey || e.metaKey)) {
-                    if (e.code === 'ArrowLeft') {
-                        e.preventDefault();
-                        self.slide(-0.9);
-                    }
-                    else if (e.code === 'ArrowRight') {
-                        e.preventDefault();
-                        self.slide(0.9);
-                    }
-                    else if (e.code === 'ArrowUp' && self.scaleFactor === 1) {
-                        e.preventDefault();
-                        self.zoom(self.bpPerPx / 2);
-                    }
-                    else if (e.code === 'ArrowDown' && self.scaleFactor === 1) {
-                        e.preventDefault();
-                        self.zoom(self.bpPerPx * 2);
-                    }
-                }
-            }
-            document.addEventListener('keydown', handler);
-            addDisposer(self, () => {
-                document.removeEventListener('keydown', handler);
-            });
+            setupKeyboardHandler(self);
         },
         afterAttach() {
-            addDisposer(self, autorun(() => {
-                var _a;
-                const { init } = self;
-                if (init) {
-                    self
-                        .navToLocString(init.loc, init.assembly)
-                        .catch((e) => {
-                        console.error(init, e);
-                        getSession(self).notifyError(`${e}`, e);
-                    });
-                    (_a = init.tracks) === null || _a === void 0 ? void 0 : _a.map(t => self.showTrack(t));
-                    self.setInit(undefined);
-                }
-            }));
-            addDisposer(self, autorun(() => {
-                if (self.initialized) {
-                    self.setCoarseDynamicBlocks(self.dynamicBlocks);
-                }
-            }, { delay: 150 }));
-            addDisposer(self, autorun(() => {
-                const s = (s) => JSON.stringify(s);
-                const { showCytobandsSetting, showCenterLine, colorByCDS } = self;
-                localStorageSetItem('lgv-showCytobands', s(showCytobandsSetting));
-                localStorageSetItem('lgv-showCenterLine', s(showCenterLine));
-                localStorageSetItem('lgv-colorByCDS', s(colorByCDS));
-            }));
+            doAfterAttach(self);
         },
     }))
         .preProcessSnapshot(snap => {
@@ -1052,13 +790,27 @@ export function stateModelFactory(pluginManager) {
         if (!snap) {
             return snap;
         }
-        else {
-            const { init, ...rest } = snap;
-            return rest;
-        }
+        const { init, offsetPx, bpPerPx, hideHeader, hideHeaderOverview, hideNoTracksActive, showGridlines, trackSelectorType, displayedRegions, highlight, showCenterLine, showCytobandsSetting, trackLabels, colorByCDS, showTrackOutlines, ...rest } = snap;
+        return {
+            ...rest,
+            ...(offsetPx ? { offsetPx } : {}),
+            ...(bpPerPx !== 1 ? { bpPerPx } : {}),
+            ...(hideHeader ? { hideHeader } : {}),
+            ...(hideHeaderOverview ? { hideHeaderOverview } : {}),
+            ...(hideNoTracksActive ? { hideNoTracksActive } : {}),
+            ...(!showGridlines ? { showGridlines } : {}),
+            ...(trackSelectorType !== 'hierarchical' ? { trackSelectorType } : {}),
+            ...(displayedRegions.length ? { displayedRegions } : {}),
+            ...(highlight.length ? { highlight } : {}),
+            ...(showCenterLine ? { showCenterLine } : {}),
+            ...(!showCytobandsSetting ? { showCytobandsSetting } : {}),
+            ...(trackLabels ? { trackLabels } : {}),
+            ...(colorByCDS ? { colorByCDS } : {}),
+            ...(!showTrackOutlines ? { showTrackOutlines } : {}),
+        };
     });
 }
-export { default as LinearGenomeView, default as ReactComponent, } from './components/LinearGenomeView';
-export { default as RefNameAutocomplete } from './components/RefNameAutocomplete';
-export { default as SearchBox } from './components/SearchBox';
-export { renderToSvg } from './svgcomponents/SVGLinearGenomeView';
+export { default as LinearGenomeView, default as ReactComponent, } from "./components/LinearGenomeView.js";
+export { default as RefNameAutocomplete } from "./components/RefNameAutocomplete/index.js";
+export { default as SearchBox } from "./components/SearchBox.js";
+export { renderToSvg } from "./svgcomponents/SVGLinearGenomeView.js";