@jbrowse/plugin-linear-genome-view 2.2.0 → 2.2.2

package/dist/LinearGenomeView/index.js

@@ -22,1255 +22,19 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 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;
-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
-         */
-        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 => ({
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        MiniControlsComponent() {
-            return MiniControls_1.default;
-        },
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        HeaderComponent() {
-            return Header_1.default;
-        },
-        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(', ');
-        },
-        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; });
-        },
-        get initialized() {
-            return self.volatileWidth !== undefined && this.assembliesInitialized;
-        },
-        get hasDisplayedRegions() {
-            return self.displayedRegions.length > 0;
-        },
-        get isSearchDialogDisplayed() {
-            return self.searchResults !== undefined;
-        },
-        get scaleBarHeight() {
-            return exports.SCALE_BAR_HEIGHT + exports.RESIZE_HANDLE_HEIGHT;
-        },
-        get headerHeight() {
-            if (self.hideHeader) {
-                return 0;
-            }
-            if (self.hideHeaderOverview) {
-                return exports.HEADER_BAR_HEIGHT;
-            }
-            return exports.HEADER_BAR_HEIGHT + exports.HEADER_OVERVIEW_HEIGHT;
-        },
-        get trackHeights() {
-            return self.tracks
-                .map(t => t.displays[0].height)
-                .reduce((a, b) => a + b, 0);
-        },
-        get trackHeightsWithResizeHandles() {
-            return this.trackHeights + self.tracks.length * exports.RESIZE_HANDLE_HEIGHT;
-        },
-        get height() {
-            return (this.trackHeightsWithResizeHandles +
-                this.headerHeight +
-                this.scaleBarHeight);
-        },
-        get totalBp() {
-            return self.displayedRegions.reduce((a, b) => a + b.end - b.start, 0);
-        },
-        get maxBpPerPx() {
-            return this.totalBp / (self.width * 0.9);
-        },
-        get minBpPerPx() {
-            return 1 / 50;
-        },
-        get error() {
-            return self.volatileError || this.assemblyErrors;
-        },
-        get maxOffset() {
-            // objectively determined to keep the linear genome on the main screen
-            const leftPadding = 10;
-            return this.displayedRegionsTotalPx - leftPadding;
-        },
-        get minOffset() {
-            // objectively determined to keep the linear genome on the main screen
-            const rightPadding = 30;
-            return -self.width + rightPadding;
-        },
-        get displayedRegionsTotalPx() {
-            return this.totalBp / self.bpPerPx;
-        },
-        renderProps() {
-            return {
-                ...(0, tracks_1.getParentRenderProps)(self),
-                bpPerPx: self.bpPerPx,
-                highResolutionScaling: (0, configuration_1.getConf)((0, util_1.getSession)(self), 'highResolutionScaling'),
-            };
-        },
-        searchScope(assemblyName) {
-            return {
-                assemblyName,
-                includeAggregateIndexes: true,
-                tracks: self.tracks,
-            };
-        },
-        getTrack(id) {
-            return self.tracks.find(t => t.configuration.trackId === id);
-        },
-        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;
-        },
-        // 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]);
-                            }
-                        });
-                    };
-                }
-            });
-        },
-        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];
-        },
-        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,
-                },
-                { type: 'divider' },
-                {
-                    label: 'Show all regions in assembly',
-                    icon: Visibility_1.default,
-                    onClick: self.showAllRegionsInAssembly,
-                },
-                {
-                    label: 'Show center line',
-                    icon: Visibility_1.default,
-                    type: 'checkbox',
-                    checked: self.showCenterLine,
-                    onClick: self.toggleCenterLine,
-                },
-                {
-                    label: 'Show header',
-                    icon: Visibility_1.default,
-                    type: 'checkbox',
-                    checked: !self.hideHeader,
-                    onClick: self.toggleHeader,
-                },
-                {
-                    label: 'Show header overview',
-                    icon: Visibility_1.default,
-                    type: 'checkbox',
-                    checked: !self.hideHeaderOverview,
-                    onClick: self.toggleHeaderOverview,
-                    disabled: self.hideHeader,
-                },
-                {
-                    label: 'Show no tracks active button',
-                    icon: Visibility_1.default,
-                    type: 'checkbox',
-                    checked: !self.hideNoTracksActive,
-                    onClick: self.toggleNoTracksActive,
-                },
-                {
-                    label: 'Show guidelines',
-                    icon: Visibility_1.default,
-                    type: 'checkbox',
-                    checked: self.showGridlines,
-                    onClick: self.toggleShowGridlines,
-                },
-                ...(canShowCytobands
-                    ? [
-                        {
-                            label: 'Show ideogram',
-                            icon: Visibility_1.default,
-                            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;
-            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(l => (0, util_1.parseLocString)(l, 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 locationIndex = 0;
-                    let locationStart = 0;
-                    let locationEnd = 0;
-                    for (locationIndex; locationIndex < locations.length; locationIndex++) {
-                        const location = locations[locationIndex];
-                        const region = self.displayedRegions[index + locationIndex];
-                        locationStart = location.start || region.start;
-                        locationEnd = 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`);
-                        }
-                    }
-                    locationIndex -= 1;
-                    const startDisplayedRegion = self.displayedRegions[index];
-                    const endDisplayedRegion = self.displayedRegions[index + locationIndex];
-                    this.moveTo({
-                        index,
-                        offset: startDisplayedRegion.reversed
-                            ? startDisplayedRegion.end - e
-                            : s - startDisplayedRegion.start,
-                    }, {
-                        index: index + locationIndex,
-                        offset: endDisplayedRegion.reversed
-                            ? endDisplayedRegion.end - locationStart
-                            : locationEnd - 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;
-        },
+const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
+const model_1 = require("./model");
+exports.default = (pluginManager) => {
+    pluginManager.addViewType(() => new pluggableElementTypes_1.ViewType({
+        name: 'LinearGenomeView',
+        stateModel: (0, model_1.stateModelFactory)(pluginManager),
+        ReactComponent: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/LinearGenomeView')))),
     }));
-}
-exports.stateModelFactory = stateModelFactory;
-var LinearGenomeView_2 = require("./components/LinearGenomeView");
-Object.defineProperty(exports, "ReactComponent", { enumerable: true, get: function () { return __importDefault(LinearGenomeView_2).default; } });
+};
+__exportStar(require("./model"), exports);
 //# sourceMappingURL=index.js.map