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

package/esm/LinearGenomeView/index.js

@@ -2,15 +2,16 @@ import { getConf } from '@jbrowse/core/configuration';
 import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
 import { ElementId, Region as MUIRegion } from '@jbrowse/core/util/types/mst';
 import { ReturnToImportFormDialog } from '@jbrowse/core/ui';
-import { assembleLocString, clamp, findLastIndex, getContainingView, getSession, isViewContainer, isSessionModelWithWidgets, measureText, parseLocString, springAnimate, viewBpToPx, } from '@jbrowse/core/util';
+import { assembleLocString, clamp, findLastIndex, getContainingView, getSession, isViewContainer, isSessionModelWithWidgets, measureText, parseLocString, springAnimate, } from '@jbrowse/core/util';
 import calculateDynamicBlocks from '@jbrowse/core/util/calculateDynamicBlocks';
 import calculateStaticBlocks from '@jbrowse/core/util/calculateStaticBlocks';
 import { getParentRenderProps } from '@jbrowse/core/util/tracks';
 import { transaction, autorun } from 'mobx';
 import { addDisposer, cast, getSnapshot, getRoot, resolveIdentifier, types, } from 'mobx-state-tree';
 import Base1DView from '@jbrowse/core/util/Base1DViewModel';
-import clone from 'clone';
+import { moveTo, pxToBp, bpToPx } from '@jbrowse/core/util/Base1DUtils';
 import { saveAs } from 'file-saver';
+import clone from 'clone';
 // icons
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
 import SyncAltIcon from '@mui/icons-material/SyncAlt';
@@ -74,6 +75,7 @@ export function stateModelFactory(pluginManager) {
             const setting = localStorageGetItem('lgv-showCytobands');
             return setting !== undefined && setting !== null ? !!+setting : true;
         }),
+        showGridlines: true,
     }))
         .volatile(() => ({
         volatileWidth: undefined,
@@ -197,91 +199,6 @@ export function stateModelFactory(pluginManager) {
                 tracks: self.tracks,
             };
         },
-        bpToPx({ refName, coord, regionNumber, }) {
-            return viewBpToPx({ refName, coord, regionNumber, 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(px) {
-            let bpSoFar = 0;
-            const bp = (self.offsetPx + px) * self.bpPerPx;
-            const n = self.displayedRegions.length;
-            if (bp < 0) {
-                const region = self.displayedRegions[0];
-                const offset = bp;
-                const snap = getSnapshot(region);
-                return {
-                    // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
-                    ...snap,
-                    oob: true,
-                    coord: region.reversed
-                        ? Math.floor(region.end - offset) + 1
-                        : Math.floor(region.start + offset) + 1,
-                    offset,
-                    index: 0,
-                };
-            }
-            const interRegionPaddingBp = self.interRegionPaddingWidth * self.bpPerPx;
-            const minimumBlockBp = self.minimumBlockWidth * self.bpPerPx;
-            for (let index = 0; index < self.displayedRegions.length; index += 1) {
-                const region = self.displayedRegions[index];
-                const len = region.end - region.start;
-                const offset = bp - bpSoFar;
-                if (len + bpSoFar > bp && bpSoFar <= bp) {
-                    const snap = getSnapshot(region);
-                    return {
-                        // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
-                        ...snap,
-                        oob: false,
-                        offset,
-                        coord: region.reversed
-                            ? Math.floor(region.end - offset) + 1
-                            : Math.floor(region.start + offset) + 1,
-                        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) {
-                const region = self.displayedRegions[n - 1];
-                const len = region.end - region.start;
-                const offset = bp - bpSoFar + len;
-                const snap = getSnapshot(region);
-                return {
-                    // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
-                    ...snap,
-                    oob: true,
-                    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(id) {
             return self.tracks.find(t => t.configuration.trackId === id);
         },
@@ -326,11 +243,6 @@ export function stateModelFactory(pluginManager) {
             });
             return allActions;
         },
-        get centerLineInfo() {
-            return self.displayedRegions.length
-                ? this.pxToBp(self.width / 2)
-                : undefined;
-        },
     }))
         .actions(self => ({
         setShowCytobands(flag) {
@@ -352,6 +264,9 @@ export function stateModelFactory(pluginManager) {
         toggleNoTracksActive() {
             self.hideNoTracksActive = !self.hideNoTracksActive;
         },
+        toggleShowGridlines() {
+            self.showGridlines = !self.showGridlines;
+        },
         scrollTo(offsetPx) {
             const newOffsetPx = clamp(offsetPx, self.minOffset, self.maxOffset);
             self.offsetPx = newOffsetPx;
@@ -498,233 +413,6 @@ export function stateModelFactory(pluginManager) {
             }
             throw new Error(`invalid track selector type ${self.trackSelectorType}`);
         },
-        navToLocString(locString, optAssemblyName) {
-            const { assemblyNames } = self;
-            const { assemblyManager } = 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 => 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 = [
-                        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];
-                this.setDisplayedRegions([
-                    { reversed: loc.reversed, ...loc.parentRegion },
-                ]);
-                const { start, end, parentRegion } = loc;
-                this.navTo({
-                    ...loc,
-                    start: clamp(start !== null && start !== void 0 ? start : 0, 0, parentRegion.end),
-                    end: clamp(end !== null && end !== void 0 ? end : parentRegion.end, 0, parentRegion.end),
-                });
-            }
-            else {
-                this.setDisplayedRegions(
-                // @ts-ignore
-                locations.map(r => (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(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 = 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 = 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 "${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 ${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;
-                    }
-                }
-            }
-        },
-        /**
-         * 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(leftPx, rightPx) {
-            if (leftPx === undefined || rightPx === undefined) {
-                return;
-            }
-            const singleRefSeq = leftPx.refName === rightPx.refName && leftPx.index === rightPx.index;
-            // zooming into one displayed Region
-            if ((singleRefSeq && rightPx.offset < leftPx.offset) ||
-                leftPx.index > rightPx.index) {
-                ;
-                [leftPx, rightPx] = [rightPx, leftPx];
-            }
-            const startOffset = {
-                start: leftPx.start,
-                end: leftPx.end,
-                index: leftPx.index,
-                offset: leftPx.offset,
-            };
-            const endOffset = {
-                start: rightPx.start,
-                end: rightPx.end,
-                index: rightPx.index,
-                offset: rightPx.offset,
-            };
-            if (startOffset && endOffset) {
-                this.moveTo(startOffset, endOffset);
-            }
-            else {
-                const session = 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
@@ -741,7 +429,7 @@ export function stateModelFactory(pluginManager) {
                 interRegionPaddingWidth: self.interRegionPaddingWidth,
             });
             simView.setVolatileWidth(self.width);
-            simView.zoomToDisplayedRegions(leftOffset, rightOffset);
+            simView.moveTo(leftOffset, rightOffset);
             return simView.dynamicBlocks.contentBlocks.map(region => ({
                 ...region,
                 start: Math.floor(region.start),
@@ -752,80 +440,16 @@ export function stateModelFactory(pluginManager) {
         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(start, end) {
-            // find locations in the modellist
-            let bpSoFar = 0;
-            if (start.index === end.index) {
-                bpSoFar += end.offset - start.offset;
-            }
-            else {
-                const s = self.displayedRegions[start.index];
-                bpSoFar += s.end - s.start - start.offset;
-                if (end.index - start.index >= 2) {
-                    for (let i = start.index + 1; i < end.index; i += 1) {
-                        bpSoFar +=
-                            self.displayedRegions[i].end - self.displayedRegions[i].start;
-                    }
-                }
-                bpSoFar += end.offset;
-            }
-            const targetBpPerPx = bpSoFar /
-                (self.width -
-                    self.interRegionPaddingWidth * (end.index - start.index));
-            const 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
-            let extraBp = 0;
-            if (targetBpPerPx < newBpPerPx) {
-                extraBp = ((newBpPerPx - targetBpPerPx) * self.width) / 2;
-            }
-            let bpToStart = -extraBp;
-            for (let i = 0; i < self.displayedRegions.length; i += 1) {
-                const 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(distance) {
             const oldOffsetPx = self.offsetPx;
             // newOffsetPx is the actual offset after the scroll is clamped
             const newOffsetPx = self.scrollTo(self.offsetPx + distance);
             return newOffsetPx - oldOffsetPx;
         },
-        /**
-         * 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(bp, refName, regionIndex) {
-            const centerPx = self.bpToPx({
-                refName,
-                coord: bp,
-                regionNumber: regionIndex,
-            });
-            if (centerPx) {
-                self.scrollTo(Math.round(centerPx.offsetPx - self.width / 2));
-            }
-        },
         center() {
             const centerBp = self.totalBp / 2;
-            self.scrollTo(Math.round(centerBp / self.bpPerPx - self.width / 2));
+            const centerPx = centerBp / self.bpPerPx;
+            self.scrollTo(Math.round(centerPx - self.width / 2));
         },
         showAllRegions() {
             self.zoomTo(self.maxBpPerPx);
@@ -981,6 +605,13 @@ export function stateModelFactory(pluginManager) {
                     checked: !self.hideNoTracksActive,
                     onClick: self.toggleNoTracksActive,
                 },
+                {
+                    label: 'Show gridlines',
+                    icon: VisibilityIcon,
+                    type: 'checkbox',
+                    checked: self.showGridlines,
+                    onClick: self.toggleShowGridlines,
+                },
                 {
                     label: 'Track labels',
                     icon: LabelIcon,
@@ -1094,6 +725,203 @@ export function stateModelFactory(pluginManager) {
             const blob = new Blob([html], { type: 'image/svg+xml' });
             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) {
+            moveTo(self, start, end);
+        },
+        navToLocString(locString, optAssemblyName) {
+            const { assemblyNames } = self;
+            const { assemblyManager } = 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 => 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 = [
+                        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: clamp(start !== null && start !== void 0 ? start : 0, 0, parentRegion.end),
+                    end: 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();
+            }
+        },
+        /**
+         * 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 = 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 = 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 "${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 ${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() {
@@ -1103,9 +931,7 @@ export function stateModelFactory(pluginManager) {
                     icon: ZoomInIcon,
                     onClick: () => {
                         const { leftOffset, rightOffset } = self;
-                        if (leftOffset && rightOffset) {
-                            self.moveTo(leftOffset, rightOffset);
-                        }
+                        self.moveTo(leftOffset, rightOffset);
                     },
                 },
                 {
@@ -1117,6 +943,34 @@ export function stateModelFactory(pluginManager) {
                 },
             ];
         },
+        bpToPx({ refName, coord, regionNumber, }) {
+            return 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 pxToBp(self, px);
+        },
+        get centerLineInfo() {
+            return self.displayedRegions.length
+                ? this.pxToBp(self.width / 2)
+                : undefined;
+        },
     }));
 }
 export { renderToSvg, RefNameAutocomplete, SearchBox };