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

package/dist/LinearGenomeView/index.js

@@ -98,8 +98,9 @@ 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 Base1DUtils_1 = require("@jbrowse/core/util/Base1DUtils");
 var file_saver_1 = require("file-saver");
+var clone_1 = __importDefault(require("clone"));
 // icons
 var Icons_1 = require("@jbrowse/core/ui/Icons");
 var SyncAlt_1 = __importDefault(require("@mui/icons-material/SyncAlt"));
@@ -163,6 +164,7 @@ function stateModelFactory(pluginManager) {
             var setting = localStorageGetItem('lgv-showCytobands');
             return setting !== undefined && setting !== null ? !!+setting : true;
         }),
+        showGridlines: true,
     }))
         .volatile(function () { return ({
         volatileWidth: undefined,
@@ -280,71 +282,6 @@ function stateModelFactory(pluginManager) {
                 tracks: self.tracks,
             };
         },
-        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 });
-            }
-            return {
-                coord: 0,
-                index: 0,
-                refName: '',
-                oob: true,
-                assemblyName: '',
-                offset: 0,
-                start: 0,
-                end: 0,
-                reversed: false,
-            };
-        },
         getTrack: function (id) {
             return self.tracks.find(function (t) { return t.configuration.trackId === id; });
         },
@@ -395,11 +332,6 @@ function stateModelFactory(pluginManager) {
             });
             return allActions;
         },
-        get centerLineInfo() {
-            return self.displayedRegions.length
-                ? this.pxToBp(self.width / 2)
-                : undefined;
-        },
     }); })
         .actions(function (self) { return ({
         setShowCytobands: function (flag) {
@@ -421,6 +353,9 @@ function stateModelFactory(pluginManager) {
         toggleNoTracksActive: function () {
             self.hideNoTracksActive = !self.hideNoTracksActive;
         },
+        toggleShowGridlines: function () {
+            self.showGridlines = !self.showGridlines;
+        },
         scrollTo: function (offsetPx) {
             var newOffsetPx = (0, util_1.clamp)(offsetPx, self.minOffset, self.maxOffset);
             self.offsetPx = newOffsetPx;
@@ -562,230 +497,6 @@ function stateModelFactory(pluginManager) {
             }
             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');
-            }
-        },
         /**
          * Helper method for the fetchSequence.
          * Retrieves the corresponding regions that were selected by the rubberband
@@ -798,87 +509,23 @@ function stateModelFactory(pluginManager) {
             var snap = (0, mobx_state_tree_1.getSnapshot)(self);
             var simView = Base1DViewModel_1.default.create(__assign(__assign({}, snap), { interRegionPaddingWidth: self.interRegionPaddingWidth }));
             simView.setVolatileWidth(self.width);
-            simView.zoomToDisplayedRegions(leftOffset, rightOffset);
+            simView.moveTo(leftOffset, rightOffset);
             return simView.dynamicBlocks.contentBlocks.map(function (region) { return (__assign(__assign({}, 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) {
             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;
             // newOffsetPx is the actual offset after the scroll is clamped
             var 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: function () {
             var centerBp = self.totalBp / 2;
-            self.scrollTo(Math.round(centerBp / self.bpPerPx - self.width / 2));
+            var centerPx = centerBp / self.bpPerPx;
+            self.scrollTo(Math.round(centerPx - self.width / 2));
         },
         showAllRegions: function () {
             self.zoomTo(self.maxBpPerPx);
@@ -1034,6 +681,13 @@ function stateModelFactory(pluginManager) {
                     checked: !self.hideNoTracksActive,
                     onClick: self.toggleNoTracksActive,
                 },
+                {
+                    label: 'Show gridlines',
+                    icon: Visibility_1.default,
+                    type: 'checkbox',
+                    checked: self.showGridlines,
+                    onClick: self.toggleShowGridlines,
+                },
                 {
                     label: 'Track labels',
                     icon: Label_1.default,
@@ -1163,6 +817,199 @@ function stateModelFactory(pluginManager) {
                 });
             });
         },
+        /**
+         * 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) {
+            (0, Base1DUtils_1.moveTo)(self, start, end);
+        },
+        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];
+                self.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 {
+                self.setDisplayedRegions(
+                // @ts-ignore
+                locations.map(function (r) { return (r.start === undefined ? r.parentRegion : r); }));
+                self.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;
+                    }
+                }
+            }
+        },
     }); })
         .views(function (self) { return ({
         rubberBandMenuItems: function () {
@@ -1172,9 +1019,7 @@ function stateModelFactory(pluginManager) {
                     icon: ZoomIn_1.default,
                     onClick: function () {
                         var leftOffset = self.leftOffset, rightOffset = self.rightOffset;
-                        if (leftOffset && rightOffset) {
-                            self.moveTo(leftOffset, rightOffset);
-                        }
+                        self.moveTo(leftOffset, rightOffset);
                     },
                 },
                 {
@@ -1186,6 +1031,35 @@ function stateModelFactory(pluginManager) {
                 },
             ];
         },
+        bpToPx: function (_a) {
+            var refName = _a.refName, coord = _a.coord, regionNumber = _a.regionNumber;
+            return (0, Base1DUtils_1.bpToPx)({ refName: refName, coord: coord, regionNumber: regionNumber, self: 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: function (coord, refName, regionNumber) {
+            var centerPx = this.bpToPx({
+                refName: refName,
+                coord: coord,
+                regionNumber: regionNumber,
+            });
+            if (centerPx) {
+                self.scrollTo(Math.round(centerPx.offsetPx - self.width / 2));
+            }
+        },
+        pxToBp: function (px) {
+            return (0, Base1DUtils_1.pxToBp)(self, px);
+        },
+        get centerLineInfo() {
+            return self.displayedRegions.length
+                ? this.pxToBp(self.width / 2)
+                : undefined;
+        },
     }); });
 }
 exports.stateModelFactory = stateModelFactory;