@jbrowse/plugin-linear-genome-view 2.2.1 → 2.3.0

package/dist/LinearGenomeView/model.js

@@ -0,0 +1,1357 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactComponent = exports.LinearGenomeView = exports.ZoomControls = exports.SearchBox = exports.RefNameAutocomplete = exports.renderToSvg = exports.stateModelFactory = exports.WIDGET_HEIGHT = exports.SPACING = exports.INTER_REGION_PADDING_WIDTH = exports.RESIZE_HANDLE_HEIGHT = exports.SCALE_BAR_HEIGHT = exports.HEADER_OVERVIEW_HEIGHT = exports.HEADER_BAR_HEIGHT = void 0;
+const react_1 = require("react");
+const configuration_1 = require("@jbrowse/core/configuration");
+const models_1 = require("@jbrowse/core/pluggableElementTypes/models");
+const mst_1 = require("@jbrowse/core/util/types/mst");
+const ui_1 = require("@jbrowse/core/ui");
+const util_1 = require("@jbrowse/core/util");
+const calculateDynamicBlocks_1 = __importDefault(require("@jbrowse/core/util/calculateDynamicBlocks"));
+const calculateStaticBlocks_1 = __importDefault(require("@jbrowse/core/util/calculateStaticBlocks"));
+const tracks_1 = require("@jbrowse/core/util/tracks");
+const mobx_1 = require("mobx");
+const mobx_state_tree_1 = require("mobx-state-tree");
+const Base1DViewModel_1 = __importDefault(require("@jbrowse/core/util/Base1DViewModel"));
+const Base1DUtils_1 = require("@jbrowse/core/util/Base1DUtils");
+const file_saver_1 = require("file-saver");
+const clone_1 = __importDefault(require("clone"));
+// icons
+const Icons_1 = require("@jbrowse/core/ui/Icons");
+const SyncAlt_1 = __importDefault(require("@mui/icons-material/SyncAlt"));
+const Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
+const Label_1 = __importDefault(require("@mui/icons-material/Label"));
+const FolderOpen_1 = __importDefault(require("@mui/icons-material/FolderOpen"));
+const PhotoCamera_1 = __importDefault(require("@mui/icons-material/PhotoCamera"));
+const ZoomIn_1 = __importDefault(require("@mui/icons-material/ZoomIn"));
+const MenuOpen_1 = __importDefault(require("@mui/icons-material/MenuOpen"));
+// locals
+const LinearGenomeViewSvg_1 = require("./components/LinearGenomeViewSvg");
+Object.defineProperty(exports, "renderToSvg", { enumerable: true, get: function () { return LinearGenomeViewSvg_1.renderToSvg; } });
+const RefNameAutocomplete_1 = __importDefault(require("./components/RefNameAutocomplete"));
+exports.RefNameAutocomplete = RefNameAutocomplete_1.default;
+const SearchBox_1 = __importDefault(require("./components/SearchBox"));
+exports.SearchBox = SearchBox_1.default;
+const ExportSvgDialog_1 = __importDefault(require("./components/ExportSvgDialog"));
+const MiniControls_1 = __importDefault(require("./components/MiniControls"));
+const Header_1 = __importDefault(require("./components/Header"));
+const ZoomControls_1 = __importDefault(require("./components/ZoomControls"));
+exports.ZoomControls = ZoomControls_1.default;
+const LinearGenomeView_1 = __importDefault(require("./components/LinearGenomeView"));
+exports.LinearGenomeView = LinearGenomeView_1.default;
+// lazies
+const SequenceSearchDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SequenceSearchDialog'))));
+function calculateVisibleLocStrings(contentBlocks) {
+    if (!contentBlocks.length) {
+        return '';
+    }
+    const isSingleAssemblyName = contentBlocks.every(b => b.assemblyName === contentBlocks[0].assemblyName);
+    const locs = contentBlocks.map(block => (0, util_1.assembleLocString)({
+        ...block,
+        start: Math.round(block.start),
+        end: Math.round(block.end),
+        assemblyName: isSingleAssemblyName ? undefined : block.assemblyName,
+    }));
+    return locs.join(' ');
+}
+exports.HEADER_BAR_HEIGHT = 48;
+exports.HEADER_OVERVIEW_HEIGHT = 20;
+exports.SCALE_BAR_HEIGHT = 17;
+exports.RESIZE_HANDLE_HEIGHT = 3;
+exports.INTER_REGION_PADDING_WIDTH = 2;
+exports.SPACING = 7;
+exports.WIDGET_HEIGHT = 32;
+function localStorageGetItem(item) {
+    return typeof localStorage !== 'undefined'
+        ? localStorage.getItem(item)
+        : undefined;
+}
+/**
+ * #stateModel LinearGenomeView
+ */
+function stateModelFactory(pluginManager) {
+    return mobx_state_tree_1.types
+        .compose(models_1.BaseViewModel, mobx_state_tree_1.types.model('LinearGenomeView', {
+        /**
+         * #property
+         */
+        id: mst_1.ElementId,
+        /**
+         * #property
+         * this is a string instead of the const literal 'LinearGenomeView' to reduce some
+         * typescripting strictness, but you should pass the string 'LinearGenomeView' to
+         * the model explicitly
+         */
+        type: mobx_state_tree_1.types.literal('LinearGenomeView'),
+        /**
+         * #property
+         * corresponds roughly to the horizontal scroll of the LGV
+         */
+        offsetPx: 0,
+        /**
+         * #property
+         * corresponds roughly to the zoom level, base-pairs per pixel
+         */
+        bpPerPx: 1,
+        /**
+         * #property
+         * currently displayed regions, can be a single chromosome, arbitrary subsections,
+         * or the entire  set of chromosomes in the genome, but it not advised to use the
+         * entire set of chromosomes if your assembly is very fragmented
+         */
+        displayedRegions: mobx_state_tree_1.types.array(mst_1.Region),
+        /**
+         * #property
+         * array of currently displayed tracks state models instances
+         */
+        tracks: mobx_state_tree_1.types.array(pluginManager.pluggableMstType('track', 'stateModel')),
+        /**
+         * #property
+         * array of currently displayed tracks state model's
+         */
+        hideHeader: false,
+        /**
+         * #property
+         */
+        hideHeaderOverview: false,
+        /**
+         * #property
+         */
+        hideNoTracksActive: false,
+        /**
+         * #property
+         */
+        trackSelectorType: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.enumeration(['hierarchical']), 'hierarchical'),
+        /**
+         * #property
+         * how to display the track labels, can be "overlapping", "offset", or "hidden"
+         */
+        trackLabels: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.string, () => localStorageGetItem('lgv-trackLabels') || 'overlapping'),
+        /**
+         * #property
+         * show the "center line"
+         */
+        showCenterLine: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => {
+            const setting = localStorageGetItem('lgv-showCenterLine');
+            return setting !== undefined && setting !== null ? !!+setting : false;
+        }),
+        /**
+         * #property
+         * show the "cytobands" in the overview scale bar
+         */
+        showCytobandsSetting: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => {
+            const setting = localStorageGetItem('lgv-showCytobands');
+            return setting !== undefined && setting !== null ? !!+setting : true;
+        }),
+        /**
+         * #property
+         * show the "gridlines" in the track area
+         */
+        showGridlines: true,
+    }))
+        .volatile(() => ({
+        volatileWidth: undefined,
+        minimumBlockWidth: 3,
+        draggingTrackId: undefined,
+        volatileError: undefined,
+        // array of callbacks to run after the next set of the displayedRegions,
+        // which is basically like an onLoad
+        afterDisplayedRegionsSetCallbacks: [],
+        scaleFactor: 1,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        trackRefs: {},
+        coarseDynamicBlocks: [],
+        coarseTotalBp: 0,
+        leftOffset: undefined,
+        rightOffset: undefined,
+        searchResults: undefined,
+        searchQuery: undefined,
+        seqDialogDisplayed: false,
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get width() {
+            if (self.volatileWidth === undefined) {
+                throw new Error('width undefined, make sure to check for model.initialized');
+            }
+            return self.volatileWidth;
+        },
+        /**
+         * #getter
+         */
+        get interRegionPaddingWidth() {
+            return exports.INTER_REGION_PADDING_WIDTH;
+        },
+        /**
+         * #getter
+         */
+        get assemblyNames() {
+            return [
+                ...new Set(self.displayedRegions.map(region => region.assemblyName)),
+            ];
+        },
+    }))
+        .views(self => ({
+        /**
+         * #method
+         */
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        MiniControlsComponent() {
+            return MiniControls_1.default;
+        },
+        /**
+         * #method
+         */
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        HeaderComponent() {
+            return Header_1.default;
+        },
+        /**
+         * #getter
+         */
+        get assemblyErrors() {
+            const { assemblyManager } = (0, util_1.getSession)(self);
+            const { assemblyNames } = self;
+            return assemblyNames
+                .map(a => { var _a; return (_a = assemblyManager.get(a)) === null || _a === void 0 ? void 0 : _a.error; })
+                .filter(f => !!f)
+                .join(', ');
+        },
+        /**
+         * #getter
+         */
+        get assembliesInitialized() {
+            const { assemblyManager } = (0, util_1.getSession)(self);
+            const { assemblyNames } = self;
+            return assemblyNames.every(a => { var _a; return (_a = assemblyManager.get(a)) === null || _a === void 0 ? void 0 : _a.initialized; });
+        },
+        /**
+         * #getter
+         */
+        get initialized() {
+            return self.volatileWidth !== undefined && this.assembliesInitialized;
+        },
+        /**
+         * #getter
+         */
+        get hasDisplayedRegions() {
+            return self.displayedRegions.length > 0;
+        },
+        /**
+         * #getter
+         */
+        get isSearchDialogDisplayed() {
+            return self.searchResults !== undefined;
+        },
+        /**
+         * #getter
+         */
+        get scaleBarHeight() {
+            return exports.SCALE_BAR_HEIGHT + exports.RESIZE_HANDLE_HEIGHT;
+        },
+        /**
+         * #getter
+         */
+        get headerHeight() {
+            if (self.hideHeader) {
+                return 0;
+            }
+            if (self.hideHeaderOverview) {
+                return exports.HEADER_BAR_HEIGHT;
+            }
+            return exports.HEADER_BAR_HEIGHT + exports.HEADER_OVERVIEW_HEIGHT;
+        },
+        /**
+         * #getter
+         */
+        get trackHeights() {
+            return self.tracks
+                .map(t => t.displays[0].height)
+                .reduce((a, b) => a + b, 0);
+        },
+        /**
+         * #getter
+         */
+        get trackHeightsWithResizeHandles() {
+            return this.trackHeights + self.tracks.length * exports.RESIZE_HANDLE_HEIGHT;
+        },
+        /**
+         * #getter
+         */
+        get height() {
+            return (this.trackHeightsWithResizeHandles +
+                this.headerHeight +
+                this.scaleBarHeight);
+        },
+        /**
+         * #getter
+         */
+        get totalBp() {
+            return self.displayedRegions.reduce((a, b) => a + b.end - b.start, 0);
+        },
+        /**
+         * #getter
+         */
+        get maxBpPerPx() {
+            return this.totalBp / (self.width * 0.9);
+        },
+        /**
+         * #getter
+         */
+        get minBpPerPx() {
+            return 1 / 50;
+        },
+        /**
+         * #getter
+         */
+        get error() {
+            return self.volatileError || this.assemblyErrors;
+        },
+        /**
+         * #getter
+         */
+        get maxOffset() {
+            // objectively determined to keep the linear genome on the main screen
+            const leftPadding = 10;
+            return this.displayedRegionsTotalPx - leftPadding;
+        },
+        /**
+         * #getter
+         */
+        get minOffset() {
+            // objectively determined to keep the linear genome on the main screen
+            const rightPadding = 30;
+            return -self.width + rightPadding;
+        },
+        /**
+         * #getter
+         */
+        get displayedRegionsTotalPx() {
+            return this.totalBp / self.bpPerPx;
+        },
+        /**
+         * #method
+         */
+        renderProps() {
+            return {
+                ...(0, tracks_1.getParentRenderProps)(self),
+                bpPerPx: self.bpPerPx,
+                highResolutionScaling: (0, configuration_1.getConf)((0, util_1.getSession)(self), 'highResolutionScaling'),
+            };
+        },
+        /**
+         * #method
+         */
+        searchScope(assemblyName) {
+            return {
+                assemblyName,
+                includeAggregateIndexes: true,
+                tracks: self.tracks,
+            };
+        },
+        /**
+         * #method
+         */
+        getTrack(id) {
+            return self.tracks.find(t => t.configuration.trackId === id);
+        },
+        /**
+         * #method
+         */
+        rankSearchResults(results) {
+            // order of rank
+            const openTrackIds = self.tracks.map(track => track.configuration.trackId);
+            results.forEach(result => {
+                if (openTrackIds.includes(result.trackId)) {
+                    result.updateScore(result.getScore() + 1);
+                }
+            });
+            return results;
+        },
+        /**
+         * #method
+         * modifies view menu action onClick to apply to all tracks of same type
+         */
+        rewriteOnClicks(trackType, viewMenuActions) {
+            viewMenuActions.forEach(action => {
+                // go to lowest level menu
+                if ('subMenu' in action) {
+                    this.rewriteOnClicks(trackType, action.subMenu);
+                }
+                if ('onClick' in action) {
+                    const holdOnClick = action.onClick;
+                    action.onClick = (...args) => {
+                        self.tracks.forEach(track => {
+                            if (track.type === trackType) {
+                                holdOnClick.apply(track, [track, ...args]);
+                            }
+                        });
+                    };
+                }
+            });
+        },
+        /**
+         * #getter
+         */
+        get trackTypeActions() {
+            const allActions = new Map();
+            self.tracks.forEach(track => {
+                const trackInMap = allActions.get(track.type);
+                if (!trackInMap) {
+                    const viewMenuActions = (0, clone_1.default)(track.viewMenuActions);
+                    this.rewriteOnClicks(track.type, viewMenuActions);
+                    allActions.set(track.type, viewMenuActions);
+                }
+            });
+            return allActions;
+        },
+    }))
+        .actions(self => ({
+        /**
+         * #action
+         */
+        setShowCytobands(flag) {
+            self.showCytobandsSetting = flag;
+            localStorage.setItem('lgv-showCytobands', `${+flag}`);
+        },
+        /**
+         * #action
+         */
+        setWidth(newWidth) {
+            self.volatileWidth = newWidth;
+        },
+        /**
+         * #action
+         */
+        setError(error) {
+            self.volatileError = error;
+        },
+        /**
+         * #action
+         */
+        toggleHeader() {
+            self.hideHeader = !self.hideHeader;
+        },
+        /**
+         * #action
+         */
+        toggleHeaderOverview() {
+            self.hideHeaderOverview = !self.hideHeaderOverview;
+        },
+        /**
+         * #action
+         */
+        toggleNoTracksActive() {
+            self.hideNoTracksActive = !self.hideNoTracksActive;
+        },
+        /**
+         * #action
+         */
+        toggleShowGridlines() {
+            self.showGridlines = !self.showGridlines;
+        },
+        /**
+         * #action
+         */
+        scrollTo(offsetPx) {
+            const newOffsetPx = (0, util_1.clamp)(offsetPx, self.minOffset, self.maxOffset);
+            self.offsetPx = newOffsetPx;
+            return newOffsetPx;
+        },
+        /**
+         * #action
+         */
+        zoomTo(bpPerPx) {
+            const newBpPerPx = (0, util_1.clamp)(bpPerPx, self.minBpPerPx, self.maxBpPerPx);
+            if (newBpPerPx === self.bpPerPx) {
+                return newBpPerPx;
+            }
+            const oldBpPerPx = self.bpPerPx;
+            self.bpPerPx = newBpPerPx;
+            if (Math.abs(oldBpPerPx - newBpPerPx) < 0.000001) {
+                console.warn('zoomTo bpPerPx rounding error');
+                return oldBpPerPx;
+            }
+            // tweak the offset so that the center of the view remains at the same coordinate
+            const viewWidth = self.width;
+            this.scrollTo(Math.round(((self.offsetPx + viewWidth / 2) * oldBpPerPx) / newBpPerPx -
+                viewWidth / 2));
+            return newBpPerPx;
+        },
+        /**
+         * #action
+         * sets offsets used in the get sequence dialog
+         */
+        setOffsets(left, right) {
+            self.leftOffset = left;
+            self.rightOffset = right;
+        },
+        /**
+         * #action
+         */
+        setSearchResults(results, query) {
+            self.searchResults = results;
+            self.searchQuery = query;
+        },
+        /**
+         * #action
+         */
+        setGetSequenceDialogOpen(open) {
+            self.seqDialogDisplayed = open;
+        },
+        /**
+         * #action
+         */
+        setNewView(bpPerPx, offsetPx) {
+            this.zoomTo(bpPerPx);
+            this.scrollTo(offsetPx);
+        },
+        /**
+         * #action
+         */
+        horizontallyFlip() {
+            self.displayedRegions = (0, mobx_state_tree_1.cast)(self.displayedRegions
+                .slice()
+                .reverse()
+                .map(region => ({ ...region, reversed: !region.reversed })));
+            this.scrollTo(self.totalBp / self.bpPerPx - self.offsetPx - self.width);
+        },
+        /**
+         * #action
+         */
+        showTrack(trackId, initialSnapshot = {}, displayInitialSnapshot = {}) {
+            const schema = pluginManager.pluggableConfigSchemaType('track');
+            const conf = (0, mobx_state_tree_1.resolveIdentifier)(schema, (0, mobx_state_tree_1.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 = viewType.displayTypes.map(d => d.name);
+            const displayConf = conf.displays.find((d) => supportedDisplays.includes(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];
+        },
+        /**
+         * #action
+         */
+        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);
+            (0, mobx_1.transaction)(() => t.forEach(t => self.tracks.remove(t)));
+            return t.length;
+        },
+    }))
+        .actions(self => ({
+        /**
+         * #action
+         */
+        moveTrack(movingId, targetId) {
+            const oldIndex = self.tracks.findIndex(track => track.id === movingId);
+            if (oldIndex === -1) {
+                throw new Error(`Track ID ${movingId} not found`);
+            }
+            const newIndex = self.tracks.findIndex(track => track.id === targetId);
+            if (newIndex === -1) {
+                throw new Error(`Track ID ${targetId} not found`);
+            }
+            const track = (0, mobx_state_tree_1.getSnapshot)(self.tracks[oldIndex]);
+            self.tracks.splice(oldIndex, 1);
+            self.tracks.splice(newIndex, 0, track);
+        },
+        /**
+         * #action
+         */
+        closeView() {
+            const parent = (0, util_1.getContainingView)(self);
+            if (parent) {
+                // I am embedded in a some other view
+                if ((0, util_1.isViewContainer)(parent)) {
+                    parent.removeView(self);
+                }
+            }
+            else {
+                // I am part of a session
+                (0, util_1.getSession)(self).removeView(self);
+            }
+        },
+        /**
+         * #action
+         */
+        toggleTrack(trackId) {
+            // if we have any tracks with that configuration, turn them off
+            const hiddenCount = self.hideTrack(trackId);
+            // if none had that configuration, turn one on
+            if (!hiddenCount) {
+                self.showTrack(trackId);
+            }
+        },
+        /**
+         * #action
+         */
+        setTrackLabels(setting) {
+            self.trackLabels = setting;
+            localStorage.setItem('lgv-trackLabels', setting);
+        },
+        /**
+         * #action
+         */
+        toggleCenterLine() {
+            self.showCenterLine = !self.showCenterLine;
+            localStorage.setItem('lgv-showCenterLine', `${+self.showCenterLine}`);
+        },
+        /**
+         * #action
+         */
+        setDisplayedRegions(regions) {
+            self.displayedRegions = (0, mobx_state_tree_1.cast)(regions);
+            self.zoomTo(self.bpPerPx);
+        },
+        /**
+         * #action
+         */
+        activateTrackSelector() {
+            if (self.trackSelectorType === 'hierarchical') {
+                const session = (0, util_1.getSession)(self);
+                if ((0, util_1.isSessionModelWithWidgets)(session)) {
+                    const selector = session.addWidget('HierarchicalTrackSelectorWidget', 'hierarchicalTrackSelector', { view: self });
+                    session.showWidget(selector);
+                    return selector;
+                }
+            }
+            throw new Error(`invalid track selector type ${self.trackSelectorType}`);
+        },
+        /**
+         * #method
+         * Helper method for the fetchSequence.
+         * Retrieves the corresponding regions that were selected by the rubberband
+         *
+         * @param leftOffset - `object as {start, end, index, offset}`, offset = start of user drag
+         * @param rightOffset - `object as {start, end, index, offset}`, offset = end of user drag
+         * @returns array of Region[]
+         */
+        getSelectedRegions(leftOffset, rightOffset) {
+            const snap = (0, mobx_state_tree_1.getSnapshot)(self);
+            const simView = Base1DViewModel_1.default.create({
+                ...snap,
+                interRegionPaddingWidth: self.interRegionPaddingWidth,
+            });
+            simView.setVolatileWidth(self.width);
+            simView.moveTo(leftOffset, rightOffset);
+            return simView.dynamicBlocks.contentBlocks.map(region => ({
+                ...region,
+                start: Math.floor(region.start),
+                end: Math.ceil(region.end),
+            }));
+        },
+        /**
+         * #action
+         * schedule something to be run after the next time displayedRegions is set
+         */
+        afterDisplayedRegionsSet(cb) {
+            self.afterDisplayedRegionsSetCallbacks.push(cb);
+        },
+        /**
+         * #action
+         */
+        horizontalScroll(distance) {
+            const oldOffsetPx = self.offsetPx;
+            // newOffsetPx is the actual offset after the scroll is clamped
+            const newOffsetPx = self.scrollTo(self.offsetPx + distance);
+            return newOffsetPx - oldOffsetPx;
+        },
+        /**
+         * #action
+         */
+        center() {
+            const centerBp = self.totalBp / 2;
+            const centerPx = centerBp / self.bpPerPx;
+            self.scrollTo(Math.round(centerPx - self.width / 2));
+        },
+        /**
+         * #action
+         */
+        showAllRegions() {
+            self.zoomTo(self.maxBpPerPx);
+            this.center();
+        },
+        /**
+         * #action
+         */
+        showAllRegionsInAssembly(assemblyName) {
+            const session = (0, util_1.getSession)(self);
+            const { assemblyManager } = session;
+            if (!assemblyName) {
+                const names = new Set(self.displayedRegions.map(r => r.assemblyName));
+                if (names.size > 1) {
+                    session.notify(`Can't perform operation with multiple assemblies currently`);
+                    return;
+                }
+                ;
+                [assemblyName] = [...names];
+            }
+            const assembly = assemblyManager.get(assemblyName);
+            if (assembly) {
+                const { regions } = assembly;
+                if (regions) {
+                    this.setDisplayedRegions(regions);
+                    self.zoomTo(self.maxBpPerPx);
+                    this.center();
+                }
+            }
+        },
+        /**
+         * #action
+         */
+        setDraggingTrackId(idx) {
+            self.draggingTrackId = idx;
+        },
+        /**
+         * #action
+         */
+        setScaleFactor(factor) {
+            self.scaleFactor = factor;
+        },
+        /**
+         * #action
+         * this "clears the view" and makes the view return to the import form
+         */
+        clearView() {
+            this.setDisplayedRegions([]);
+            self.tracks.clear();
+            // it is necessary to run these after setting displayed regions empty
+            // or else model.offsetPx gets set to Infinity and breaks
+            // mobx-state-tree snapshot
+            self.scrollTo(0);
+            self.zoomTo(10);
+        },
+        /**
+         * #action
+         * creates an svg export and save using FileSaver
+         */
+        async exportSvg(opts = {}) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const html = await (0, LinearGenomeViewSvg_1.renderToSvg)(self, opts);
+            const blob = new Blob([html], { type: 'image/svg+xml' });
+            (0, file_saver_1.saveAs)(blob, opts.filename || 'image.svg');
+        },
+    }))
+        .actions(self => {
+        let cancelLastAnimation = () => { };
+        /**
+         * #action
+         * perform animated slide
+         */
+        function slide(viewWidths) {
+            const [animate, cancelAnimation] = (0, util_1.springAnimate)(self.offsetPx, self.offsetPx + self.width * viewWidths, self.scrollTo);
+            cancelLastAnimation();
+            cancelLastAnimation = cancelAnimation;
+            animate();
+        }
+        return { slide };
+    })
+        .actions(self => {
+        let cancelLastAnimation = () => { };
+        /**
+         * #action
+         * perform animated zoom
+         */
+        function zoom(targetBpPerPx) {
+            self.zoomTo(self.bpPerPx);
+            if (
+            // already zoomed all the way in
+            (targetBpPerPx < self.bpPerPx && self.bpPerPx === self.minBpPerPx) ||
+                // already zoomed all the way out
+                (targetBpPerPx > self.bpPerPx && self.bpPerPx === self.maxBpPerPx)) {
+                return;
+            }
+            const factor = self.bpPerPx / targetBpPerPx;
+            const [animate, cancelAnimation] = (0, util_1.springAnimate)(1, factor, self.setScaleFactor, () => {
+                self.zoomTo(targetBpPerPx);
+                self.setScaleFactor(1);
+            });
+            cancelLastAnimation();
+            cancelLastAnimation = cancelAnimation;
+            animate();
+        }
+        return { zoom };
+    })
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get canShowCytobands() {
+            return self.displayedRegions.length === 1 && this.anyCytobandsExist;
+        },
+        /**
+         * #getter
+         */
+        get showCytobands() {
+            return this.canShowCytobands && self.showCytobandsSetting;
+        },
+        /**
+         * #getter
+         */
+        get anyCytobandsExist() {
+            const { assemblyManager } = (0, util_1.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; });
+        },
+        /**
+         * #getter
+         * the cytoband is displayed to the right of the chromosome name,
+         * and that offset is calculated manually with this method
+         */
+        get cytobandOffset() {
+            return this.showCytobands
+                ? (0, util_1.measureText)(self.displayedRegions[0].refName, 12) + 15
+                : 0;
+        },
+    }))
+        .views(self => ({
+        /**
+         * #method
+         * return the view menu items
+         */
+        menuItems() {
+            const { canShowCytobands, showCytobands } = self;
+            const session = (0, util_1.getSession)(self);
+            const menuItems = [
+                {
+                    label: 'Return to import form',
+                    onClick: () => {
+                        (0, util_1.getSession)(self).queueDialog(handleClose => [
+                            ui_1.ReturnToImportFormDialog,
+                            { model: self, handleClose },
+                        ]);
+                    },
+                    icon: FolderOpen_1.default,
+                },
+                ...((0, util_1.isSessionWithAddTracks)(session)
+                    ? [
+                        {
+                            label: 'Sequence search',
+                            onClick: () => {
+                                (0, util_1.getSession)(self).queueDialog(handleClose => [
+                                    SequenceSearchDialog,
+                                    { model: self, handleClose },
+                                ]);
+                            },
+                        },
+                    ]
+                    : []),
+                {
+                    label: 'Export SVG',
+                    icon: PhotoCamera_1.default,
+                    onClick: () => {
+                        (0, util_1.getSession)(self).queueDialog(handleClose => [
+                            ExportSvgDialog_1.default,
+                            { model: self, handleClose },
+                        ]);
+                    },
+                },
+                {
+                    label: 'Open track selector',
+                    onClick: self.activateTrackSelector,
+                    icon: Icons_1.TrackSelector,
+                },
+                {
+                    label: 'Horizontally flip',
+                    icon: SyncAlt_1.default,
+                    onClick: self.horizontallyFlip,
+                },
+                {
+                    label: 'Show...',
+                    icon: Visibility_1.default,
+                    subMenu: [
+                        {
+                            label: 'Show all regions in assembly',
+                            onClick: self.showAllRegionsInAssembly,
+                        },
+                        {
+                            label: 'Show center line',
+                            type: 'checkbox',
+                            checked: self.showCenterLine,
+                            onClick: self.toggleCenterLine,
+                        },
+                        {
+                            label: 'Show header',
+                            type: 'checkbox',
+                            checked: !self.hideHeader,
+                            onClick: self.toggleHeader,
+                        },
+                        {
+                            label: 'Show header overview',
+                            type: 'checkbox',
+                            checked: !self.hideHeaderOverview,
+                            onClick: self.toggleHeaderOverview,
+                            disabled: self.hideHeader,
+                        },
+                        {
+                            label: 'Show no tracks active button',
+                            type: 'checkbox',
+                            checked: !self.hideNoTracksActive,
+                            onClick: self.toggleNoTracksActive,
+                        },
+                        {
+                            label: 'Show guidelines',
+                            type: 'checkbox',
+                            checked: self.showGridlines,
+                            onClick: self.toggleShowGridlines,
+                        },
+                        ...(canShowCytobands
+                            ? [
+                                {
+                                    label: 'Show ideogram',
+                                    type: 'checkbox',
+                                    checked: self.showCytobands,
+                                    onClick: () => self.setShowCytobands(!showCytobands),
+                                },
+                            ]
+                            : []),
+                    ],
+                },
+                {
+                    label: 'Track labels',
+                    icon: Label_1.default,
+                    subMenu: [
+                        {
+                            label: 'Overlapping',
+                            icon: Visibility_1.default,
+                            type: 'radio',
+                            checked: self.trackLabels === 'overlapping',
+                            onClick: () => self.setTrackLabels('overlapping'),
+                        },
+                        {
+                            label: 'Offset',
+                            icon: Visibility_1.default,
+                            type: 'radio',
+                            checked: self.trackLabels === 'offset',
+                            onClick: () => self.setTrackLabels('offset'),
+                        },
+                        {
+                            label: 'Hidden',
+                            icon: Visibility_1.default,
+                            type: 'radio',
+                            checked: self.trackLabels === 'hidden',
+                            onClick: () => self.setTrackLabels('hidden'),
+                        },
+                    ],
+                },
+            ];
+            // add track's view level menu options
+            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));
+                }
+            }
+            return menuItems;
+        },
+    }))
+        .views(self => {
+        let currentlyCalculatedStaticBlocks;
+        let stringifiedCurrentlyCalculatedStaticBlocks = '';
+        return {
+            /**
+             * #getter
+             * static blocks are an important concept jbrowse uses to avoid
+             * re-rendering when you scroll to the side. when you horizontally
+             * scroll to the right, old blocks to the left may be removed, and
+             * new blocks may be instantiated on the right. tracks may use the
+             * static blocks to render their data for the region represented by
+             * the block
+             */
+            get staticBlocks() {
+                const ret = (0, calculateStaticBlocks_1.default)(self);
+                const sret = JSON.stringify(ret);
+                if (stringifiedCurrentlyCalculatedStaticBlocks !== sret) {
+                    currentlyCalculatedStaticBlocks = ret;
+                    stringifiedCurrentlyCalculatedStaticBlocks = sret;
+                }
+                return currentlyCalculatedStaticBlocks;
+            },
+            /**
+             * #getter
+             * dynamic blocks represent the exact coordinates of the currently
+             * visible genome regions on the screen. they are similar to static
+             * blocks, but statcic blocks can go offscreen while dynamic blocks
+             * represent exactly what is on screen
+             */
+            get dynamicBlocks() {
+                return (0, calculateDynamicBlocks_1.default)(self);
+            },
+            /**
+             * #getter
+             * rounded dynamic blocks are dynamic blocks without fractions of bp
+             */
+            get roundedDynamicBlocks() {
+                return this.dynamicBlocks.contentBlocks.map(block => ({
+                    ...block,
+                    start: Math.floor(block.start),
+                    end: Math.ceil(block.end),
+                }));
+            },
+            /**
+             * #getter
+             * a single "combo-locstring" representing all the regions visible
+             * on the screen
+             */
+            get visibleLocStrings() {
+                return calculateVisibleLocStrings(this.dynamicBlocks.contentBlocks);
+            },
+            /**
+             * #getter
+             * same as visibleLocStrings, but only updated every 300ms
+             */
+            get coarseVisibleLocStrings() {
+                return calculateVisibleLocStrings(self.coarseDynamicBlocks);
+            },
+        };
+    })
+        .actions(self => ({
+        /**
+         * #action
+         */
+        setCoarseDynamicBlocks(blocks) {
+            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 }));
+        },
+    }))
+        .actions(self => ({
+        /**
+         * #action
+         * offset is the base-pair-offset in the displayed region, index is the index of the
+         * displayed region in the linear genome view
+         *
+         * @param start - object as `{start, end, offset, index}`
+         * @param end - object as `{start, end, offset, index}`
+         */
+        moveTo(start, end) {
+            (0, Base1DUtils_1.moveTo)(self, start, end);
+        },
+        /**
+         * #action
+         * navigate to the given locstring
+         *
+         * @param locString - e.g. "chr1:1-100"
+         * @param optAssemblyName - (optional) the assembly name to use when navigating to the locstring
+         */
+        async navToLocString(locString, optAssemblyName) {
+            const { assemblyNames } = self;
+            const { assemblyManager } = (0, util_1.getSession)(self);
+            const { isValidRefName } = assemblyManager;
+            await (0, mobx_1.when)(() => self.volatileWidth !== undefined);
+            const assemblyName = optAssemblyName || assemblyNames[0];
+            let parsedLocStrings;
+            const inputs = locString
+                .split(/(\s+)/)
+                .map(f => f.trim())
+                .filter(f => !!f);
+            if (assemblyName) {
+                await assemblyManager.waitForAssembly(assemblyName);
+            }
+            // first try interpreting as a whitespace-separated sequence of
+            // multiple locstrings
+            try {
+                parsedLocStrings = inputs.map(loc => (0, util_1.parseLocString)(loc, ref => isValidRefName(ref, assemblyName)));
+            }
+            catch (e) {
+                // if this fails, try interpreting as a whitespace-separated refname,
+                // start, end if start and end are integer inputs
+                const [refName, start, end] = inputs;
+                if (`${e}`.match(/Unknown reference sequence/) &&
+                    Number.isInteger(+start) &&
+                    Number.isInteger(+end)) {
+                    parsedLocStrings = [
+                        (0, util_1.parseLocString)(refName + ':' + start + '..' + end, ref => isValidRefName(ref, assemblyName)),
+                    ];
+                }
+                else {
+                    throw e;
+                }
+            }
+            const locations = await Promise.all(parsedLocStrings === null || parsedLocStrings === void 0 ? void 0 : parsedLocStrings.map(async (region) => {
+                const asmName = region.assemblyName || assemblyName;
+                const asm = await assemblyManager.waitForAssembly(asmName);
+                const { refName } = region;
+                if (!asm) {
+                    throw new Error(`assembly ${asmName} not found`);
+                }
+                const { regions } = asm;
+                if (!regions) {
+                    throw new Error(`regions not loaded yet for ${asmName}`);
+                }
+                const canonicalRefName = asm.getCanonicalRefName(region.refName);
+                if (!canonicalRefName) {
+                    throw new Error(`Could not find refName ${refName} in ${asm.name}`);
+                }
+                const parentRegion = regions.find(r => r.refName === canonicalRefName);
+                if (!parentRegion) {
+                    throw new Error(`Could not find refName ${refName} in ${asmName}`);
+                }
+                return {
+                    ...region,
+                    assemblyName: asmName,
+                    parentRegion,
+                };
+            }));
+            if (locations.length === 1) {
+                const loc = locations[0];
+                self.setDisplayedRegions([
+                    { reversed: loc.reversed, ...loc.parentRegion },
+                ]);
+                const { start, end, parentRegion } = loc;
+                this.navTo({
+                    ...loc,
+                    start: (0, util_1.clamp)(start !== null && start !== void 0 ? start : 0, 0, parentRegion.end),
+                    end: (0, util_1.clamp)(end !== null && end !== void 0 ? end : parentRegion.end, 0, parentRegion.end),
+                });
+            }
+            else {
+                self.setDisplayedRegions(
+                // @ts-ignore
+                locations.map(r => (r.start === undefined ? r.parentRegion : r)));
+                self.showAllRegions();
+            }
+        },
+        /**
+         * #action
+         * Navigate to a location based on its refName and optionally start, end,
+         * and assemblyName. Can handle if there are multiple displayedRegions
+         * from same refName. Only navigates to a location if it is entirely
+         * within a displayedRegion. Navigates to the first matching location
+         * encountered.
+         *
+         * Throws an error if navigation was unsuccessful
+         *
+         * @param query - a proposed location to navigate to
+         */
+        navTo(query) {
+            this.navToMultiple([query]);
+        },
+        /**
+         * #action
+         */
+        navToMultiple(locations) {
+            const firstLocation = locations[0];
+            let { refName } = firstLocation;
+            const { start, end, assemblyName = self.assemblyNames[0], } = firstLocation;
+            if (start !== undefined && end !== undefined && start > end) {
+                throw new Error(`start "${start + 1}" is greater than end "${end}"`);
+            }
+            const session = (0, util_1.getSession)(self);
+            const { assemblyManager } = session;
+            const assembly = assemblyManager.get(assemblyName);
+            if (assembly) {
+                const canonicalRefName = assembly.getCanonicalRefName(refName);
+                if (canonicalRefName) {
+                    refName = canonicalRefName;
+                }
+            }
+            let s = start;
+            let e = end;
+            let refNameMatched = false;
+            const predicate = (r) => {
+                if (refName === r.refName) {
+                    refNameMatched = true;
+                    if (s === undefined) {
+                        s = r.start;
+                    }
+                    if (e === undefined) {
+                        e = r.end;
+                    }
+                    if (s >= r.start && s <= r.end && e <= r.end && e >= r.start) {
+                        return true;
+                    }
+                    s = start;
+                    e = end;
+                }
+                return false;
+            };
+            const lastIndex = (0, util_1.findLastIndex)(self.displayedRegions, predicate);
+            let index;
+            while (index !== lastIndex) {
+                try {
+                    const previousIndex = index;
+                    index = self.displayedRegions
+                        .slice(previousIndex === undefined ? 0 : previousIndex + 1)
+                        .findIndex(predicate);
+                    if (previousIndex !== undefined) {
+                        index += previousIndex + 1;
+                    }
+                    if (!refNameMatched) {
+                        throw new Error(`could not find a region with refName "${refName}"`);
+                    }
+                    if (s === undefined) {
+                        throw new Error(`could not find a region with refName "${refName}" that contained an end position ${e}`);
+                    }
+                    if (e === undefined) {
+                        throw new Error(`could not find a region with refName "${refName}" that contained a start position ${s + 1}`);
+                    }
+                    if (index === -1) {
+                        throw new Error(`could not find a region that completely contained "${(0, util_1.assembleLocString)(firstLocation)}"`);
+                    }
+                    if (locations.length === 1) {
+                        const f = self.displayedRegions[index];
+                        this.moveTo({ index, offset: f.reversed ? f.end - e : s - f.start }, { index, offset: f.reversed ? f.end - s : e - f.start });
+                        return;
+                    }
+                    let idx = 0;
+                    let start = 0;
+                    let end = 0;
+                    for (idx; idx < locations.length; idx++) {
+                        const location = locations[idx];
+                        const region = self.displayedRegions[index + idx];
+                        start = location.start || region.start;
+                        end = location.end || region.end;
+                        if (location.refName !== region.refName) {
+                            throw new Error(`Entered location ${(0, util_1.assembleLocString)(location)} does not match with displayed regions`);
+                        }
+                    }
+                    idx -= 1;
+                    const startDisplayedRegion = self.displayedRegions[index];
+                    const endDisplayedRegion = self.displayedRegions[index + idx];
+                    this.moveTo({
+                        index,
+                        offset: startDisplayedRegion.reversed
+                            ? startDisplayedRegion.end - e
+                            : s - startDisplayedRegion.start,
+                    }, {
+                        index: index + idx,
+                        offset: endDisplayedRegion.reversed
+                            ? endDisplayedRegion.end - start
+                            : end - endDisplayedRegion.start,
+                    });
+                    return;
+                }
+                catch (error) {
+                    if (index === lastIndex) {
+                        throw error;
+                    }
+                }
+            }
+        },
+    }))
+        .views(self => ({
+        /**
+         * #method
+         */
+        rubberBandMenuItems() {
+            return [
+                {
+                    label: 'Zoom to region',
+                    icon: ZoomIn_1.default,
+                    onClick: () => {
+                        const { leftOffset, rightOffset } = self;
+                        self.moveTo(leftOffset, rightOffset);
+                    },
+                },
+                {
+                    label: 'Get sequence',
+                    icon: MenuOpen_1.default,
+                    onClick: () => self.setGetSequenceDialogOpen(true),
+                },
+            ];
+        },
+        /**
+         * #method
+         */
+        bpToPx({ refName, coord, regionNumber, }) {
+            return (0, Base1DUtils_1.bpToPx)({ refName, coord, regionNumber, self });
+        },
+        /**
+         * #method
+         * scrolls the view to center on the given bp. if that is not in any
+         * of the displayed regions, does nothing
+         * @param coord - basepair at which you want to center the view
+         * @param refName - refName of the displayedRegion you are centering at
+         * @param regionNumber - index of the displayedRegion
+         */
+        centerAt(coord, refName, regionNumber) {
+            const centerPx = this.bpToPx({
+                refName,
+                coord,
+                regionNumber,
+            });
+            if (centerPx) {
+                self.scrollTo(Math.round(centerPx.offsetPx - self.width / 2));
+            }
+        },
+        /**
+         * #method
+         */
+        pxToBp(px) {
+            return (0, Base1DUtils_1.pxToBp)(self, px);
+        },
+        /**
+         * #getter
+         */
+        get centerLineInfo() {
+            return self.displayedRegions.length
+                ? this.pxToBp(self.width / 2)
+                : undefined;
+        },
+    }));
+}
+exports.stateModelFactory = stateModelFactory;
+var LinearGenomeView_2 = require("./components/LinearGenomeView");
+Object.defineProperty(exports, "ReactComponent", { enumerable: true, get: function () { return __importDefault(LinearGenomeView_2).default; } });
+//# sourceMappingURL=model.js.map