@jbrowse/plugin-linear-genome-view 2.0.0 → 2.1.2

package/dist/LinearGenomeView/index.js

@@ -1,130 +1,76 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+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]; } };
     }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __values = (this && this.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    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.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;
-var configuration_1 = require("@jbrowse/core/configuration");
-var models_1 = require("@jbrowse/core/pluggableElementTypes/models");
-var mst_1 = require("@jbrowse/core/util/types/mst");
-var ui_1 = require("@jbrowse/core/ui");
-var util_1 = require("@jbrowse/core/util");
-var calculateDynamicBlocks_1 = __importDefault(require("@jbrowse/core/util/calculateDynamicBlocks"));
-var calculateStaticBlocks_1 = __importDefault(require("@jbrowse/core/util/calculateStaticBlocks"));
-var tracks_1 = require("@jbrowse/core/util/tracks");
-var mobx_1 = require("mobx");
-var mobx_state_tree_1 = require("mobx-state-tree");
-var Base1DViewModel_1 = __importDefault(require("@jbrowse/core/util/Base1DViewModel"));
-var clone_1 = __importDefault(require("clone"));
-var file_saver_1 = require("file-saver");
+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
-var Icons_1 = require("@jbrowse/core/ui/Icons");
-var SyncAlt_1 = __importDefault(require("@mui/icons-material/SyncAlt"));
-var Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
-var Label_1 = __importDefault(require("@mui/icons-material/Label"));
-var FolderOpen_1 = __importDefault(require("@mui/icons-material/FolderOpen"));
-var PhotoCamera_1 = __importDefault(require("@mui/icons-material/PhotoCamera"));
-var ZoomIn_1 = __importDefault(require("@mui/icons-material/ZoomIn"));
-var MenuOpen_1 = __importDefault(require("@mui/icons-material/MenuOpen"));
+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
-var LinearGenomeViewSvg_1 = require("./components/LinearGenomeViewSvg");
+const LinearGenomeViewSvg_1 = require("./components/LinearGenomeViewSvg");
 Object.defineProperty(exports, "renderToSvg", { enumerable: true, get: function () { return LinearGenomeViewSvg_1.renderToSvg; } });
-var RefNameAutocomplete_1 = __importDefault(require("./components/RefNameAutocomplete"));
+const RefNameAutocomplete_1 = __importDefault(require("./components/RefNameAutocomplete"));
 exports.RefNameAutocomplete = RefNameAutocomplete_1.default;
-var SearchBox_1 = __importDefault(require("./components/SearchBox"));
+const SearchBox_1 = __importDefault(require("./components/SearchBox"));
 exports.SearchBox = SearchBox_1.default;
-var ExportSvgDialog_1 = __importDefault(require("./components/ExportSvgDialog"));
+const ExportSvgDialog_1 = __importDefault(require("./components/ExportSvgDialog"));
+const SequenceSearchDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SequenceSearchDialog'))));
 function calculateVisibleLocStrings(contentBlocks) {
     if (!contentBlocks.length) {
         return '';
     }
-    var isSingleAssemblyName = contentBlocks.every(function (block) { return block.assemblyName === contentBlocks[0].assemblyName; });
-    var locs = contentBlocks.map(function (block) {
-        return (0, util_1.assembleLocString)(__assign(__assign({}, block), { start: Math.round(block.start), end: Math.round(block.end), assemblyName: isSingleAssemblyName ? undefined : block.assemblyName }));
-    });
+    const isSingleAssemblyName = contentBlocks.every(block => block.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;
@@ -154,17 +100,18 @@ function stateModelFactory(pluginManager) {
         hideHeaderOverview: false,
         hideNoTracksActive: false,
         trackSelectorType: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.enumeration(['hierarchical']), 'hierarchical'),
-        trackLabels: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.string, function () { return localStorageGetItem('lgv-trackLabels') || 'overlapping'; }),
-        showCenterLine: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, function () {
-            var setting = localStorageGetItem('lgv-showCenterLine');
+        trackLabels: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.string, () => localStorageGetItem('lgv-trackLabels') || 'overlapping'),
+        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;
         }),
-        showCytobandsSetting: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, function () {
-            var setting = localStorageGetItem('lgv-showCytobands');
+        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;
         }),
+        showGridlines: true,
     }))
-        .volatile(function () { return ({
+        .volatile(() => ({
         volatileWidth: undefined,
         minimumBlockWidth: 3,
         draggingTrackId: undefined,
@@ -182,8 +129,8 @@ function stateModelFactory(pluginManager) {
         searchResults: undefined,
         searchQuery: undefined,
         seqDialogDisplayed: false,
-    }); })
-        .views(function (self) { return ({
+    }))
+        .views(self => ({
         get width() {
             if (self.volatileWidth === undefined) {
                 throw new Error('width undefined, make sure to check for model.initialized');
@@ -194,22 +141,24 @@ function stateModelFactory(pluginManager) {
             return exports.INTER_REGION_PADDING_WIDTH;
         },
         get assemblyNames() {
-            return __spreadArray([], __read(new Set(self.displayedRegions.map(function (region) { return region.assemblyName; }))), false);
+            return [
+                ...new Set(self.displayedRegions.map(region => region.assemblyName)),
+            ];
         },
-    }); })
-        .views(function (self) { return ({
+    }))
+        .views(self => ({
         get assemblyErrors() {
-            var assemblyManager = (0, util_1.getSession)(self).assemblyManager;
-            var assemblyNames = self.assemblyNames;
+            const { assemblyManager } = (0, util_1.getSession)(self);
+            const { assemblyNames } = self;
             return assemblyNames
-                .map(function (a) { var _a; return (_a = assemblyManager.get(a)) === null || _a === void 0 ? void 0 : _a.error; })
-                .filter(function (f) { return !!f; })
+                .map(a => { var _a; return (_a = assemblyManager.get(a)) === null || _a === void 0 ? void 0 : _a.error; })
+                .filter(f => !!f)
                 .join(', ');
         },
         get assembliesInitialized() {
-            var assemblyManager = (0, util_1.getSession)(self).assemblyManager;
-            var assemblyNames = self.assemblyNames;
-            return assemblyNames.every(function (a) { var _a; return (_a = assemblyManager.get(a)) === null || _a === void 0 ? void 0 : _a.initialized; });
+            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;
@@ -234,8 +183,8 @@ function stateModelFactory(pluginManager) {
         },
         get trackHeights() {
             return self.tracks
-                .map(function (t) { return t.displays[0].height; })
-                .reduce(function (a, b) { return a + b; }, 0);
+                .map(t => t.displays[0].height)
+                .reduce((a, b) => a + b, 0);
         },
         get trackHeightsWithResizeHandles() {
             return this.trackHeights + self.tracks.length * exports.RESIZE_HANDLE_HEIGHT;
@@ -246,7 +195,7 @@ function stateModelFactory(pluginManager) {
                 this.scaleBarHeight);
         },
         get totalBp() {
-            return self.displayedRegions.reduce(function (a, b) { return a + b.end - b.start; }, 0);
+            return self.displayedRegions.reduce((a, b) => a + b.end - b.start, 0);
         },
         get maxBpPerPx() {
             return this.totalBp / (self.width * 0.9);
@@ -259,99 +208,38 @@ function stateModelFactory(pluginManager) {
         },
         get maxOffset() {
             // objectively determined to keep the linear genome on the main screen
-            var leftPadding = 10;
+            const leftPadding = 10;
             return this.displayedRegionsTotalPx - leftPadding;
         },
         get minOffset() {
             // objectively determined to keep the linear genome on the main screen
-            var rightPadding = 30;
+            const rightPadding = 30;
             return -self.width + rightPadding;
         },
         get displayedRegionsTotalPx() {
             return this.totalBp / self.bpPerPx;
         },
-        renderProps: function () {
-            return __assign(__assign({}, (0, tracks_1.getParentRenderProps)(self)), { bpPerPx: self.bpPerPx, highResolutionScaling: (0, configuration_1.getConf)((0, util_1.getSession)(self), 'highResolutionScaling') });
-        },
-        searchScope: function (assemblyName) {
+        renderProps() {
             return {
-                assemblyName: assemblyName,
-                includeAggregateIndexes: true,
-                tracks: self.tracks,
+                ...(0, tracks_1.getParentRenderProps)(self),
+                bpPerPx: self.bpPerPx,
+                highResolutionScaling: (0, configuration_1.getConf)((0, util_1.getSession)(self), 'highResolutionScaling'),
             };
         },
-        bpToPx: function (_a) {
-            var refName = _a.refName, coord = _a.coord, regionNumber = _a.regionNumber;
-            return (0, util_1.viewBpToPx)({ refName: refName, coord: coord, regionNumber: regionNumber, self: self });
-        },
-        /**
-         *
-         * @param px - px in the view area, return value is the displayed regions
-         * @returns BpOffset of the displayed region that it lands in
-         */
-        pxToBp: function (px) {
-            var bpSoFar = 0;
-            var bp = (self.offsetPx + px) * self.bpPerPx;
-            var n = self.displayedRegions.length;
-            if (bp < 0) {
-                var region = self.displayedRegions[0];
-                var offset = bp;
-                var snap = (0, mobx_state_tree_1.getSnapshot)(region);
-                return __assign(__assign({}, snap), { oob: true, coord: region.reversed
-                        ? Math.floor(region.end - offset) + 1
-                        : Math.floor(region.start + offset) + 1, offset: offset, index: 0 });
-            }
-            var interRegionPaddingBp = self.interRegionPaddingWidth * self.bpPerPx;
-            var minimumBlockBp = self.minimumBlockWidth * self.bpPerPx;
-            for (var index = 0; index < self.displayedRegions.length; index += 1) {
-                var region = self.displayedRegions[index];
-                var len = region.end - region.start;
-                var offset = bp - bpSoFar;
-                if (len + bpSoFar > bp && bpSoFar <= bp) {
-                    var snap = (0, mobx_state_tree_1.getSnapshot)(region);
-                    return __assign(__assign({}, snap), { oob: false, offset: offset, coord: region.reversed
-                            ? Math.floor(region.end - offset) + 1
-                            : Math.floor(region.start + offset) + 1, index: index });
-                }
-                // add the interRegionPaddingWidth if the boundary is in the screen
-                // e.g. offset>0 && offset<width
-                if (region.end - region.start > minimumBlockBp &&
-                    offset / self.bpPerPx > 0 &&
-                    offset / self.bpPerPx < self.width) {
-                    bpSoFar += len + interRegionPaddingBp;
-                }
-                else {
-                    bpSoFar += len;
-                }
-            }
-            if (bp >= bpSoFar) {
-                var region = self.displayedRegions[n - 1];
-                var len = region.end - region.start;
-                var offset = bp - bpSoFar + len;
-                var snap = (0, mobx_state_tree_1.getSnapshot)(region);
-                return __assign(__assign({}, snap), { oob: true, offset: offset, coord: region.reversed
-                        ? Math.floor(region.end - offset) + 1
-                        : Math.floor(region.start + offset) + 1, index: n - 1 });
-            }
+        searchScope(assemblyName) {
             return {
-                coord: 0,
-                index: 0,
-                refName: '',
-                oob: true,
-                assemblyName: '',
-                offset: 0,
-                start: 0,
-                end: 0,
-                reversed: false,
+                assemblyName,
+                includeAggregateIndexes: true,
+                tracks: self.tracks,
             };
         },
-        getTrack: function (id) {
-            return self.tracks.find(function (t) { return t.configuration.trackId === id; });
+        getTrack(id) {
+            return self.tracks.find(t => t.configuration.trackId === id);
         },
-        rankSearchResults: function (results) {
+        rankSearchResults(results) {
             // order of rank
-            var openTrackIds = self.tracks.map(function (track) { return track.configuration.trackId; });
-            results.forEach(function (result) {
+            const openTrackIds = self.tracks.map(track => track.configuration.trackId);
+            results.forEach(result => {
                 if (openTrackIds.includes(result.trackId)) {
                     result.updateScore(result.getScore() + 1);
                 }
@@ -359,23 +247,18 @@ function stateModelFactory(pluginManager) {
             return results;
         },
         // modifies view menu action onClick to apply to all tracks of same type
-        rewriteOnClicks: function (trackType, viewMenuActions) {
-            var _this = this;
-            viewMenuActions.forEach(function (action) {
+        rewriteOnClicks(trackType, viewMenuActions) {
+            viewMenuActions.forEach(action => {
                 // go to lowest level menu
                 if ('subMenu' in action) {
-                    _this.rewriteOnClicks(trackType, action.subMenu);
+                    this.rewriteOnClicks(trackType, action.subMenu);
                 }
                 if ('onClick' in action) {
-                    var holdOnClick_1 = action.onClick;
-                    action.onClick = function () {
-                        var args = [];
-                        for (var _i = 0; _i < arguments.length; _i++) {
-                            args[_i] = arguments[_i];
-                        }
-                        self.tracks.forEach(function (track) {
+                    const holdOnClick = action.onClick;
+                    action.onClick = (...args) => {
+                        self.tracks.forEach(track => {
                             if (track.type === trackType) {
-                                holdOnClick_1.apply(track, __spreadArray([track], __read(args), false));
+                                holdOnClick.apply(track, [track, ...args]);
                             }
                         });
                     };
@@ -383,143 +266,145 @@ function stateModelFactory(pluginManager) {
             });
         },
         get trackTypeActions() {
-            var _this = this;
-            var allActions = new Map();
-            self.tracks.forEach(function (track) {
-                var trackInMap = allActions.get(track.type);
+            const allActions = new Map();
+            self.tracks.forEach(track => {
+                const trackInMap = allActions.get(track.type);
                 if (!trackInMap) {
-                    var viewMenuActions = (0, clone_1.default)(track.viewMenuActions);
-                    _this.rewriteOnClicks(track.type, viewMenuActions);
+                    const viewMenuActions = (0, clone_1.default)(track.viewMenuActions);
+                    this.rewriteOnClicks(track.type, viewMenuActions);
                     allActions.set(track.type, viewMenuActions);
                 }
             });
             return allActions;
         },
-        get centerLineInfo() {
-            return self.displayedRegions.length
-                ? this.pxToBp(self.width / 2)
-                : undefined;
-        },
-    }); })
-        .actions(function (self) { return ({
-        setShowCytobands: function (flag) {
+    }))
+        .actions(self => ({
+        setShowCytobands(flag) {
             self.showCytobandsSetting = flag;
-            localStorage.setItem('lgv-showCytobands', "".concat(+flag));
+            localStorage.setItem('lgv-showCytobands', `${+flag}`);
         },
-        setWidth: function (newWidth) {
+        setWidth(newWidth) {
             self.volatileWidth = newWidth;
         },
-        setError: function (error) {
+        setError(error) {
             self.volatileError = error;
         },
-        toggleHeader: function () {
+        toggleHeader() {
             self.hideHeader = !self.hideHeader;
         },
-        toggleHeaderOverview: function () {
+        toggleHeaderOverview() {
             self.hideHeaderOverview = !self.hideHeaderOverview;
         },
-        toggleNoTracksActive: function () {
+        toggleNoTracksActive() {
             self.hideNoTracksActive = !self.hideNoTracksActive;
         },
-        scrollTo: function (offsetPx) {
-            var newOffsetPx = (0, util_1.clamp)(offsetPx, self.minOffset, self.maxOffset);
+        toggleShowGridlines() {
+            self.showGridlines = !self.showGridlines;
+        },
+        scrollTo(offsetPx) {
+            const newOffsetPx = (0, util_1.clamp)(offsetPx, self.minOffset, self.maxOffset);
             self.offsetPx = newOffsetPx;
             return newOffsetPx;
         },
-        zoomTo: function (bpPerPx) {
-            var newBpPerPx = (0, util_1.clamp)(bpPerPx, self.minBpPerPx, self.maxBpPerPx);
+        zoomTo(bpPerPx) {
+            const newBpPerPx = (0, util_1.clamp)(bpPerPx, self.minBpPerPx, self.maxBpPerPx);
             if (newBpPerPx === self.bpPerPx) {
                 return newBpPerPx;
             }
-            var oldBpPerPx = self.bpPerPx;
+            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
-            var viewWidth = self.width;
+            const viewWidth = self.width;
             this.scrollTo(Math.round(((self.offsetPx + viewWidth / 2) * oldBpPerPx) / newBpPerPx -
                 viewWidth / 2));
             return newBpPerPx;
         },
-        setOffsets: function (left, right) {
+        setOffsets(left, right) {
             // sets offsets used in the get sequence dialog
             self.leftOffset = left;
             self.rightOffset = right;
         },
-        setSearchResults: function (results, query) {
+        setSearchResults(results, query) {
             self.searchResults = results;
             self.searchQuery = query;
         },
-        setSequenceDialogOpen: function (open) {
+        setGetSequenceDialogOpen(open) {
             self.seqDialogDisplayed = open;
         },
-        setNewView: function (bpPerPx, offsetPx) {
+        setNewView(bpPerPx, offsetPx) {
             this.zoomTo(bpPerPx);
             this.scrollTo(offsetPx);
         },
-        horizontallyFlip: function () {
+        horizontallyFlip() {
             self.displayedRegions = (0, mobx_state_tree_1.cast)(self.displayedRegions
                 .slice()
                 .reverse()
-                .map(function (region) { return (__assign(__assign({}, region), { reversed: !region.reversed })); }));
+                .map(region => ({ ...region, reversed: !region.reversed })));
             this.scrollTo(self.totalBp / self.bpPerPx - self.offsetPx - self.width);
         },
-        showTrack: function (trackId, initialSnapshot, displayInitialSnapshot) {
-            if (initialSnapshot === void 0) { initialSnapshot = {}; }
-            if (displayInitialSnapshot === void 0) { displayInitialSnapshot = {}; }
-            var schema = pluginManager.pluggableConfigSchemaType('track');
-            var conf = (0, mobx_state_tree_1.resolveIdentifier)(schema, (0, mobx_state_tree_1.getRoot)(self), trackId);
+        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 \"".concat(trackId, "\""));
+                throw new Error(`Could not resolve identifier "${trackId}"`);
             }
-            var trackType = pluginManager.getTrackType(conf === null || conf === void 0 ? void 0 : conf.type);
+            const trackType = pluginManager.getTrackType(conf === null || conf === void 0 ? void 0 : conf.type);
             if (!trackType) {
-                throw new Error("Unknown track type ".concat(conf.type));
+                throw new Error(`Unknown track type ${conf.type}`);
             }
-            var viewType = pluginManager.getViewType(self.type);
-            var supportedDisplays = viewType.displayTypes.map(function (d) { return d.name; });
-            var displayConf = conf.displays.find(function (d) {
-                return supportedDisplays.includes(d.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 ".concat(self.type));
+                throw new Error(`Could not find a compatible display for view type ${self.type}`);
             }
-            var t = self.tracks.filter(function (t) { return t.configuration === conf; });
+            const t = self.tracks.filter(t => t.configuration === conf);
             if (t.length === 0) {
-                var track = trackType.stateModel.create(__assign(__assign({}, initialSnapshot), { type: conf.type, configuration: conf, displays: [
-                        __assign({ type: displayConf.type, configuration: displayConf }, displayInitialSnapshot),
-                    ] }));
+                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: function (trackId) {
-            var schema = pluginManager.pluggableConfigSchemaType('track');
-            var conf = (0, mobx_state_tree_1.resolveIdentifier)(schema, (0, mobx_state_tree_1.getRoot)(self), trackId);
-            var t = self.tracks.filter(function (t) { return t.configuration === conf; });
-            (0, mobx_1.transaction)(function () { return t.forEach(function (t) { return self.tracks.remove(t); }); });
+        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(function (self) { return ({
-        moveTrack: function (movingId, targetId) {
-            var oldIndex = self.tracks.findIndex(function (track) { return track.id === movingId; });
+    }))
+        .actions(self => ({
+        moveTrack(movingId, targetId) {
+            const oldIndex = self.tracks.findIndex(track => track.id === movingId);
             if (oldIndex === -1) {
-                throw new Error("Track ID ".concat(movingId, " not found"));
+                throw new Error(`Track ID ${movingId} not found`);
             }
-            var newIndex = self.tracks.findIndex(function (track) { return track.id === targetId; });
+            const newIndex = self.tracks.findIndex(track => track.id === targetId);
             if (newIndex === -1) {
-                throw new Error("Track ID ".concat(targetId, " not found"));
+                throw new Error(`Track ID ${targetId} not found`);
             }
-            var track = (0, mobx_state_tree_1.getSnapshot)(self.tracks[oldIndex]);
+            const track = (0, mobx_state_tree_1.getSnapshot)(self.tracks[oldIndex]);
             self.tracks.splice(oldIndex, 1);
             self.tracks.splice(newIndex, 0, track);
         },
-        closeView: function () {
-            var parent = (0, util_1.getContainingView)(self);
+        closeView() {
+            const parent = (0, util_1.getContainingView)(self);
             if (parent) {
                 // I am embedded in a some other view
                 if ((0, util_1.isViewContainer)(parent)) {
@@ -531,260 +416,36 @@ function stateModelFactory(pluginManager) {
                 (0, util_1.getSession)(self).removeView(self);
             }
         },
-        toggleTrack: function (trackId) {
+        toggleTrack(trackId) {
             // if we have any tracks with that configuration, turn them off
-            var hiddenCount = self.hideTrack(trackId);
+            const hiddenCount = self.hideTrack(trackId);
             // if none had that configuration, turn one on
             if (!hiddenCount) {
                 self.showTrack(trackId);
             }
         },
-        setTrackLabels: function (setting) {
+        setTrackLabels(setting) {
             self.trackLabels = setting;
             localStorage.setItem('lgv-trackLabels', setting);
         },
-        toggleCenterLine: function () {
+        toggleCenterLine() {
             self.showCenterLine = !self.showCenterLine;
-            localStorage.setItem('lgv-showCenterLine', "".concat(+self.showCenterLine));
+            localStorage.setItem('lgv-showCenterLine', `${+self.showCenterLine}`);
         },
-        setDisplayedRegions: function (regions) {
+        setDisplayedRegions(regions) {
             self.displayedRegions = (0, mobx_state_tree_1.cast)(regions);
             self.zoomTo(self.bpPerPx);
         },
-        activateTrackSelector: function () {
+        activateTrackSelector() {
             if (self.trackSelectorType === 'hierarchical') {
-                var session = (0, util_1.getSession)(self);
+                const session = (0, util_1.getSession)(self);
                 if ((0, util_1.isSessionModelWithWidgets)(session)) {
-                    var selector = session.addWidget('HierarchicalTrackSelectorWidget', 'hierarchicalTrackSelector', { view: self });
+                    const selector = session.addWidget('HierarchicalTrackSelectorWidget', 'hierarchicalTrackSelector', { view: self });
                     session.showWidget(selector);
                     return selector;
                 }
             }
-            throw new Error("invalid track selector type ".concat(self.trackSelectorType));
-        },
-        navToLocString: function (locString, optAssemblyName) {
-            var assemblyNames = self.assemblyNames;
-            var assemblyManager = (0, util_1.getSession)(self).assemblyManager;
-            var isValidRefName = assemblyManager.isValidRefName;
-            var assemblyName = optAssemblyName || assemblyNames[0];
-            var parsedLocStrings;
-            var inputs = locString
-                .split(/(\s+)/)
-                .map(function (f) { return f.trim(); })
-                .filter(function (f) { return !!f; });
-            // first try interpreting as a whitespace-separated sequence of
-            // multiple locstrings
-            try {
-                parsedLocStrings = inputs.map(function (l) {
-                    return (0, util_1.parseLocString)(l, function (ref) { return isValidRefName(ref, assemblyName); });
-                });
-            }
-            catch (e) {
-                // if this fails, try interpreting as a whitespace-separated refname,
-                // start, end if start and end are integer inputs
-                var _a = __read(inputs, 3), refName = _a[0], start = _a[1], end = _a[2];
-                if ("".concat(e).match(/Unknown reference sequence/) &&
-                    Number.isInteger(+start) &&
-                    Number.isInteger(+end)) {
-                    parsedLocStrings = [
-                        (0, util_1.parseLocString)(refName + ':' + start + '..' + end, function (ref) {
-                            return isValidRefName(ref, assemblyName);
-                        }),
-                    ];
-                }
-                else {
-                    throw e;
-                }
-            }
-            var locations = parsedLocStrings === null || parsedLocStrings === void 0 ? void 0 : parsedLocStrings.map(function (region) {
-                var asmName = region.assemblyName || assemblyName;
-                var asm = assemblyManager.get(asmName);
-                var refName = region.refName;
-                if (!asm) {
-                    throw new Error("assembly ".concat(asmName, " not found"));
-                }
-                var regions = asm.regions;
-                if (!regions) {
-                    throw new Error("regions not loaded yet for ".concat(asmName));
-                }
-                var canonicalRefName = asm.getCanonicalRefName(region.refName);
-                if (!canonicalRefName) {
-                    throw new Error("Could not find refName ".concat(refName, " in ").concat(asm.name));
-                }
-                var parentRegion = regions.find(function (region) { return region.refName === canonicalRefName; });
-                if (!parentRegion) {
-                    throw new Error("Could not find refName ".concat(refName, " in ").concat(asmName));
-                }
-                return __assign(__assign({}, region), { assemblyName: asmName, parentRegion: parentRegion });
-            });
-            if (locations.length === 1) {
-                var loc = locations[0];
-                this.setDisplayedRegions([
-                    __assign({ reversed: loc.reversed }, loc.parentRegion),
-                ]);
-                var start = loc.start, end = loc.end, parentRegion = loc.parentRegion;
-                this.navTo(__assign(__assign({}, 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 {
-                this.setDisplayedRegions(
-                // @ts-ignore
-                locations.map(function (r) { return (r.start === undefined ? r.parentRegion : r); }));
-                this.showAllRegions();
-            }
-        },
-        /**
-         * 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 location - a proposed location to navigate to
-         */
-        navTo: function (query) {
-            this.navToMultiple([query]);
-        },
-        navToMultiple: function (locations) {
-            var firstLocation = locations[0];
-            var refName = firstLocation.refName;
-            var start = firstLocation.start, end = firstLocation.end, _a = firstLocation.assemblyName, assemblyName = _a === void 0 ? self.assemblyNames[0] : _a;
-            if (start !== undefined && end !== undefined && start > end) {
-                throw new Error("start \"".concat(start + 1, "\" is greater than end \"").concat(end, "\""));
-            }
-            var session = (0, util_1.getSession)(self);
-            var assemblyManager = session.assemblyManager;
-            var assembly = assemblyManager.get(assemblyName);
-            if (assembly) {
-                var canonicalRefName = assembly.getCanonicalRefName(refName);
-                if (canonicalRefName) {
-                    refName = canonicalRefName;
-                }
-            }
-            var s = start;
-            var e = end;
-            var refNameMatched = false;
-            var predicate = function (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;
-            };
-            var lastIndex = (0, util_1.findLastIndex)(self.displayedRegions, predicate);
-            var index;
-            while (index !== lastIndex) {
-                try {
-                    var 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 \"".concat(refName, "\""));
-                    }
-                    if (s === undefined) {
-                        throw new Error("could not find a region with refName \"".concat(refName, "\" that contained an end position ").concat(e));
-                    }
-                    if (e === undefined) {
-                        throw new Error("could not find a region with refName \"".concat(refName, "\" that contained a start position ").concat(s + 1));
-                    }
-                    if (index === -1) {
-                        throw new Error("could not find a region that completely contained \"".concat((0, util_1.assembleLocString)(firstLocation), "\""));
-                    }
-                    if (locations.length === 1) {
-                        var f = self.displayedRegions[index];
-                        this.moveTo({ index: index, offset: f.reversed ? f.end - e : s - f.start }, { index: index, offset: f.reversed ? f.end - s : e - f.start });
-                        return;
-                    }
-                    var locationIndex = 0;
-                    var locationStart = 0;
-                    var locationEnd = 0;
-                    for (locationIndex; locationIndex < locations.length; locationIndex++) {
-                        var location_1 = locations[locationIndex];
-                        var region = self.displayedRegions[index + locationIndex];
-                        locationStart = location_1.start || region.start;
-                        locationEnd = location_1.end || region.end;
-                        if (location_1.refName !== region.refName) {
-                            throw new Error("Entered location ".concat((0, util_1.assembleLocString)(location_1), " does not match with displayed regions"));
-                        }
-                    }
-                    locationIndex -= 1;
-                    var startDisplayedRegion = self.displayedRegions[index];
-                    var endDisplayedRegion = self.displayedRegions[index + locationIndex];
-                    this.moveTo({
-                        index: 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;
-                    }
-                }
-            }
-        },
-        /**
-         * Navigate to a location based on user clicking and dragging on the
-         * overview scale bar to select a region to zoom into.
-         * Can handle if there are multiple displayedRegions from same refName.
-         * Only navigates to a location if it is entirely within a displayedRegion.
-         *
-         * @param leftPx- `object as {start, end, index, offset}`, offset = start of user drag
-         * @param rightPx- `object as {start, end, index, offset}`, offset = end of user drag
-         */
-        zoomToDisplayedRegions: function (leftPx, rightPx) {
-            var _a;
-            if (leftPx === undefined || rightPx === undefined) {
-                return;
-            }
-            var singleRefSeq = leftPx.refName === rightPx.refName && leftPx.index === rightPx.index;
-            // zooming into one displayed Region
-            if ((singleRefSeq && rightPx.offset < leftPx.offset) ||
-                leftPx.index > rightPx.index) {
-                ;
-                _a = __read([rightPx, leftPx], 2), leftPx = _a[0], rightPx = _a[1];
-            }
-            var startOffset = {
-                start: leftPx.start,
-                end: leftPx.end,
-                index: leftPx.index,
-                offset: leftPx.offset,
-            };
-            var endOffset = {
-                start: rightPx.start,
-                end: rightPx.end,
-                index: rightPx.index,
-                offset: rightPx.offset,
-            };
-            if (startOffset && endOffset) {
-                this.moveTo(startOffset, endOffset);
-            }
-            else {
-                var session = (0, util_1.getSession)(self);
-                session.notify('No regions found to navigate to', 'warning');
-            }
+            throw new Error(`invalid track selector type ${self.trackSelectorType}`);
         },
         /**
          * Helper method for the fetchSequence.
@@ -794,112 +455,56 @@ function stateModelFactory(pluginManager) {
          * @param rightOffset - `object as {start, end, index, offset}`, offset = end of user drag
          * @returns array of Region[]
          */
-        getSelectedRegions: function (leftOffset, rightOffset) {
-            var snap = (0, mobx_state_tree_1.getSnapshot)(self);
-            var simView = Base1DViewModel_1.default.create(__assign(__assign({}, snap), { interRegionPaddingWidth: self.interRegionPaddingWidth }));
+        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.zoomToDisplayedRegions(leftOffset, rightOffset);
-            return simView.dynamicBlocks.contentBlocks.map(function (region) { return (__assign(__assign({}, region), { start: Math.floor(region.start), end: Math.ceil(region.end) })); });
+            simView.moveTo(leftOffset, rightOffset);
+            return simView.dynamicBlocks.contentBlocks.map(region => ({
+                ...region,
+                start: Math.floor(region.start),
+                end: Math.ceil(region.end),
+            }));
         },
         // schedule something to be run after the next time displayedRegions is set
-        afterDisplayedRegionsSet: function (cb) {
+        afterDisplayedRegionsSet(cb) {
             self.afterDisplayedRegionsSetCallbacks.push(cb);
         },
-        /**
-         * 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: function (start, end) {
-            // find locations in the modellist
-            var bpSoFar = 0;
-            if (start.index === end.index) {
-                bpSoFar += end.offset - start.offset;
-            }
-            else {
-                var s = self.displayedRegions[start.index];
-                bpSoFar += s.end - s.start - start.offset;
-                if (end.index - start.index >= 2) {
-                    for (var i = start.index + 1; i < end.index; i += 1) {
-                        bpSoFar +=
-                            self.displayedRegions[i].end - self.displayedRegions[i].start;
-                    }
-                }
-                bpSoFar += end.offset;
-            }
-            var targetBpPerPx = bpSoFar /
-                (self.width -
-                    self.interRegionPaddingWidth * (end.index - start.index));
-            var newBpPerPx = self.zoomTo(targetBpPerPx);
-            // If our target bpPerPx was smaller than the allowed minBpPerPx, adjust
-            // the scroll so the requested range is in the middle of the screen
-            var extraBp = 0;
-            if (targetBpPerPx < newBpPerPx) {
-                extraBp = ((newBpPerPx - targetBpPerPx) * self.width) / 2;
-            }
-            var bpToStart = -extraBp;
-            for (var i = 0; i < self.displayedRegions.length; i += 1) {
-                var region = self.displayedRegions[i];
-                if (start.index === i) {
-                    bpToStart += start.offset;
-                    break;
-                }
-                else {
-                    bpToStart += region.end - region.start;
-                }
-            }
-            self.scrollTo(Math.round(bpToStart / self.bpPerPx) +
-                self.interRegionPaddingWidth * start.index);
-        },
-        horizontalScroll: function (distance) {
-            var oldOffsetPx = self.offsetPx;
+        horizontalScroll(distance) {
+            const oldOffsetPx = self.offsetPx;
             // newOffsetPx is the actual offset after the scroll is clamped
-            var newOffsetPx = self.scrollTo(self.offsetPx + distance);
+            const newOffsetPx = self.scrollTo(self.offsetPx + distance);
             return newOffsetPx - oldOffsetPx;
         },
-        /**
-         * scrolls the view to center on the given bp. if that is not in any
-         * of the displayed regions, does nothing
-         * @param bp - basepair at which you want to center the view
-         * @param refName - refName of the displayedRegion you are centering at
-         * @param regionIndex - index of the displayedRegion
-         */
-        centerAt: function (bp, refName, regionIndex) {
-            var centerPx = self.bpToPx({
-                refName: refName,
-                coord: bp,
-                regionNumber: regionIndex,
-            });
-            if (centerPx) {
-                self.scrollTo(Math.round(centerPx.offsetPx - self.width / 2));
-            }
+        center() {
+            const centerBp = self.totalBp / 2;
+            const centerPx = centerBp / self.bpPerPx;
+            self.scrollTo(Math.round(centerPx - self.width / 2));
         },
-        center: function () {
-            var centerBp = self.totalBp / 2;
-            self.scrollTo(Math.round(centerBp / self.bpPerPx - self.width / 2));
-        },
-        showAllRegions: function () {
+        showAllRegions() {
             self.zoomTo(self.maxBpPerPx);
             this.center();
         },
-        showAllRegionsInAssembly: function (assemblyName) {
-            var _a;
-            var session = (0, util_1.getSession)(self);
-            var assemblyManager = session.assemblyManager;
+        showAllRegionsInAssembly(assemblyName) {
+            const session = (0, util_1.getSession)(self);
+            const { assemblyManager } = session;
             if (!assemblyName) {
-                var assemblyNames = __spreadArray([], __read(new Set(self.displayedRegions.map(function (region) { return region.assemblyName; }))), false);
+                const assemblyNames = [
+                    ...new Set(self.displayedRegions.map(region => region.assemblyName)),
+                ];
                 if (assemblyNames.length > 1) {
-                    session.notify("Can't perform this with multiple assemblies currently");
+                    session.notify(`Can't perform this with multiple assemblies currently`);
                     return;
                 }
                 ;
-                _a = __read(assemblyNames, 1), assemblyName = _a[0];
+                [assemblyName] = assemblyNames;
             }
-            var assembly = assemblyManager.get(assemblyName);
+            const assembly = assemblyManager.get(assemblyName);
             if (assembly) {
-                var regions = assembly.regions;
+                const { regions } = assembly;
                 if (regions) {
                     this.setDisplayedRegions(regions);
                     self.zoomTo(self.maxBpPerPx);
@@ -907,25 +512,25 @@ function stateModelFactory(pluginManager) {
                 }
             }
         },
-        setDraggingTrackId: function (idx) {
+        setDraggingTrackId(idx) {
             self.draggingTrackId = idx;
         },
-        setScaleFactor: function (factor) {
+        setScaleFactor(factor) {
             self.scaleFactor = factor;
         },
-    }); })
-        .actions(function (self) {
-        var cancelLastAnimation = function () { };
+    }))
+        .actions(self => {
+        let cancelLastAnimation = () => { };
         function slide(viewWidths) {
-            var _a = __read((0, util_1.springAnimate)(self.offsetPx, self.offsetPx + self.width * viewWidths, self.scrollTo), 2), animate = _a[0], cancelAnimation = _a[1];
+            const [animate, cancelAnimation] = (0, util_1.springAnimate)(self.offsetPx, self.offsetPx + self.width * viewWidths, self.scrollTo);
             cancelLastAnimation();
             cancelLastAnimation = cancelAnimation;
             animate();
         }
-        return { slide: slide };
+        return { slide };
     })
-        .actions(function (self) {
-        var cancelLastAnimation = function () { };
+        .actions(self => {
+        let cancelLastAnimation = () => { };
         function zoom(targetBpPerPx) {
             self.zoomTo(self.bpPerPx);
             if (
@@ -935,18 +540,18 @@ function stateModelFactory(pluginManager) {
                 (targetBpPerPx > self.bpPerPx && self.bpPerPx === self.maxBpPerPx)) {
                 return;
             }
-            var factor = self.bpPerPx / targetBpPerPx;
-            var _a = __read((0, util_1.springAnimate)(1, factor, self.setScaleFactor, function () {
+            const factor = self.bpPerPx / targetBpPerPx;
+            const [animate, cancelAnimation] = (0, util_1.springAnimate)(1, factor, self.setScaleFactor, () => {
                 self.zoomTo(targetBpPerPx);
                 self.setScaleFactor(1);
-            }), 2), animate = _a[0], cancelAnimation = _a[1];
+            });
             cancelLastAnimation();
             cancelLastAnimation = cancelAnimation;
             animate();
         }
-        return { zoom: zoom };
+        return { zoom };
     })
-        .views(function (self) { return ({
+        .views(self => ({
         get canShowCytobands() {
             return self.displayedRegions.length === 1 && this.anyCytobandsExist;
         },
@@ -954,39 +559,47 @@ function stateModelFactory(pluginManager) {
             return this.canShowCytobands && self.showCytobandsSetting;
         },
         get anyCytobandsExist() {
-            var assemblyManager = (0, util_1.getSession)(self).assemblyManager;
-            var assemblyNames = self.assemblyNames;
-            return assemblyNames.some(function (asm) { var _a, _b; return (_b = (_a = assemblyManager.get(asm)) === null || _a === void 0 ? void 0 : _a.cytobands) === null || _b === void 0 ? void 0 : _b.length; });
+            const { assemblyManager } = (0, util_1.getSession)(self);
+            const { assemblyNames } = self;
+            return assemblyNames.some(asm => { var _a, _b; return (_b = (_a = assemblyManager.get(asm)) === null || _a === void 0 ? void 0 : _a.cytobands) === null || _b === void 0 ? void 0 : _b.length; });
         },
         get cytobandOffset() {
             return this.showCytobands
                 ? (0, util_1.measureText)(self.displayedRegions[0].refName, 12) + 15
                 : 0;
         },
-    }); })
-        .views(function (self) { return ({
-        menuItems: function () {
-            var e_1, _a;
-            var canShowCytobands = self.canShowCytobands, showCytobands = self.showCytobands;
-            var menuItems = __spreadArray([
+    }))
+        .views(self => ({
+        menuItems() {
+            const { canShowCytobands, showCytobands } = self;
+            const menuItems = [
                 {
                     label: 'Return to import form',
-                    onClick: function () {
-                        (0, util_1.getSession)(self).queueDialog(function (handleClose) { return [
+                    onClick: () => {
+                        (0, util_1.getSession)(self).queueDialog(handleClose => [
                             ui_1.ReturnToImportFormDialog,
-                            { model: self, handleClose: handleClose },
-                        ]; });
+                            { model: self, handleClose },
+                        ]);
                     },
                     icon: FolderOpen_1.default,
                 },
+                {
+                    label: 'Sequence search',
+                    onClick: () => {
+                        (0, util_1.getSession)(self).queueDialog(handleClose => [
+                            SequenceSearchDialog,
+                            { model: self, handleClose },
+                        ]);
+                    },
+                },
                 {
                     label: 'Export SVG',
                     icon: PhotoCamera_1.default,
-                    onClick: function () {
-                        (0, util_1.getSession)(self).queueDialog(function (handleClose) { return [
+                    onClick: () => {
+                        (0, util_1.getSession)(self).queueDialog(handleClose => [
                             ExportSvgDialog_1.default,
-                            { model: self, handleClose: handleClose },
-                        ]; });
+                            { model: self, handleClose },
+                        ]);
                     },
                 },
                 {
@@ -1034,6 +647,24 @@ function stateModelFactory(pluginManager) {
                     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,
@@ -1043,63 +674,42 @@ function stateModelFactory(pluginManager) {
                             icon: Visibility_1.default,
                             type: 'radio',
                             checked: self.trackLabels === 'overlapping',
-                            onClick: function () { return self.setTrackLabels('overlapping'); },
+                            onClick: () => self.setTrackLabels('overlapping'),
                         },
                         {
                             label: 'Offset',
                             icon: Visibility_1.default,
                             type: 'radio',
                             checked: self.trackLabels === 'offset',
-                            onClick: function () { return self.setTrackLabels('offset'); },
+                            onClick: () => self.setTrackLabels('offset'),
                         },
                         {
                             label: 'Hidden',
                             icon: Visibility_1.default,
                             type: 'radio',
                             checked: self.trackLabels === 'hidden',
-                            onClick: function () { return self.setTrackLabels('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));
                 }
-            ], __read((canShowCytobands
-                ? [
-                    {
-                        label: showCytobands ? 'Hide ideogram' : 'Show ideograms',
-                        onClick: function () {
-                            self.setShowCytobands(!showCytobands);
-                        },
-                    },
-                ]
-                : [])), false);
-            try {
-                // add track's view level menu options
-                for (var _b = __values(self.trackTypeActions.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var _d = __read(_c.value, 2), key = _d[0], value = _d[1];
-                    if (value.length) {
-                        menuItems.push({ type: 'divider' }, { type: 'subHeader', label: key });
-                        value.forEach(function (action) {
-                            menuItems.push(action);
-                        });
-                    }
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                }
-                finally { if (e_1) throw e_1.error; }
             }
             return menuItems;
         },
-    }); })
-        .views(function (self) {
-        var currentlyCalculatedStaticBlocks;
-        var stringifiedCurrentlyCalculatedStaticBlocks = '';
+    }))
+        .views(self => {
+        let currentlyCalculatedStaticBlocks;
+        let stringifiedCurrentlyCalculatedStaticBlocks = '';
         return {
             get staticBlocks() {
-                var ret = (0, calculateStaticBlocks_1.default)(self);
-                var sret = JSON.stringify(ret);
+                const ret = (0, calculateStaticBlocks_1.default)(self);
+                const sret = JSON.stringify(ret);
                 if (stringifiedCurrentlyCalculatedStaticBlocks !== sret) {
                     currentlyCalculatedStaticBlocks = ret;
                     stringifiedCurrentlyCalculatedStaticBlocks = sret;
@@ -1110,8 +720,12 @@ function stateModelFactory(pluginManager) {
                 return (0, calculateDynamicBlocks_1.default)(self);
             },
             get roundedDynamicBlocks() {
-                return this.dynamicBlocks.contentBlocks.map(function (block) {
-                    return __assign(__assign({}, block), { start: Math.floor(block.start), end: Math.ceil(block.end) });
+                return this.dynamicBlocks.contentBlocks.map(block => {
+                    return {
+                        ...block,
+                        start: Math.floor(block.start),
+                        end: Math.ceil(block.end),
+                    };
                 });
             },
             get visibleLocStrings() {
@@ -1122,9 +736,9 @@ function stateModelFactory(pluginManager) {
             },
         };
     })
-        .actions(function (self) { return ({
+        .actions(self => ({
         // this "clears the view" and makes the view return to the import form
-        clearView: function () {
+        clearView() {
             self.setDisplayedRegions([]);
             self.tracks.clear();
             // it is necessary to run these after setting displayed regions empty
@@ -1133,60 +747,270 @@ function stateModelFactory(pluginManager) {
             self.scrollTo(0);
             self.zoomTo(10);
         },
-        setCoarseDynamicBlocks: function (blocks) {
+        setCoarseDynamicBlocks(blocks) {
             self.coarseDynamicBlocks = blocks.contentBlocks;
             self.coarseTotalBp = blocks.totalBp;
         },
-        afterAttach: function () {
-            var _this = this;
-            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(function () {
+        afterAttach() {
+            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
                 if (self.initialized) {
-                    _this.setCoarseDynamicBlocks(self.dynamicBlocks);
+                    this.setCoarseDynamicBlocks(self.dynamicBlocks);
                 }
             }, { delay: 150 }));
         },
-    }); })
-        .actions(function (self) { return ({
-        exportSvg: function (opts) {
-            if (opts === void 0) { opts = {}; }
-            return __awaiter(this, void 0, void 0, function () {
-                var html, blob;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, (0, LinearGenomeViewSvg_1.renderToSvg)(self, opts)];
-                        case 1:
-                            html = _a.sent();
-                            blob = new Blob([html], { type: 'image/svg+xml' });
-                            (0, file_saver_1.saveAs)(blob, opts.filename || 'image.svg');
-                            return [2 /*return*/];
-                    }
-                });
+    }))
+        .actions(self => ({
+        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');
+        },
+        /**
+         * 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);
+        },
+        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);
+            // 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 = parsedLocStrings === null || parsedLocStrings === void 0 ? void 0 : parsedLocStrings.map(region => {
+                const asmName = region.assemblyName || assemblyName;
+                const asm = assemblyManager.get(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(region => region.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();
+            }
         },
-    }); })
-        .views(function (self) { return ({
-        rubberBandMenuItems: function () {
+        /**
+         * 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 location - a proposed location to navigate to
+         */
+        navTo(query) {
+            this.navToMultiple([query]);
+        },
+        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 => ({
+        rubberBandMenuItems() {
             return [
                 {
                     label: 'Zoom to region',
                     icon: ZoomIn_1.default,
-                    onClick: function () {
-                        var leftOffset = self.leftOffset, rightOffset = self.rightOffset;
-                        if (leftOffset && rightOffset) {
-                            self.moveTo(leftOffset, rightOffset);
-                        }
+                    onClick: () => {
+                        const { leftOffset, rightOffset } = self;
+                        self.moveTo(leftOffset, rightOffset);
                     },
                 },
                 {
                     label: 'Get sequence',
                     icon: MenuOpen_1.default,
-                    onClick: function () {
-                        self.setSequenceDialogOpen(true);
-                    },
+                    onClick: () => self.setGetSequenceDialogOpen(true),
                 },
             ];
         },
-    }); });
+        bpToPx({ refName, coord, regionNumber, }) {
+            return (0, Base1DUtils_1.bpToPx)({ refName, coord, regionNumber, self });
+        },
+        /**
+         * 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));
+            }
+        },
+        pxToBp(px) {
+            return (0, Base1DUtils_1.pxToBp)(self, px);
+        },
+        get centerLineInfo() {
+            return self.displayedRegions.length
+                ? this.pxToBp(self.width / 2)
+                : undefined;
+        },
+    }));
 }
 exports.stateModelFactory = stateModelFactory;
 var LinearGenomeView_1 = require("./components/LinearGenomeView");