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

package/src/LinearGenomeView/index.tsx

@@ -14,7 +14,6 @@ import {
   measureText,
   parseLocString,
   springAnimate,
-  viewBpToPx,
 } from '@jbrowse/core/util'
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
 import { BlockSet, BaseBlock } from '@jbrowse/core/util/blockTypes'
@@ -33,9 +32,10 @@ import {
 } from 'mobx-state-tree'
 
 import Base1DView from '@jbrowse/core/util/Base1DViewModel'
-import PluginManager from '@jbrowse/core/PluginManager'
-import clone from 'clone'
+import { moveTo, pxToBp, bpToPx } from '@jbrowse/core/util/Base1DUtils'
 import { saveAs } from 'file-saver'
+import clone from 'clone'
+import PluginManager from '@jbrowse/core/PluginManager'
 
 // icons
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
@@ -144,6 +144,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
           const setting = localStorageGetItem('lgv-showCytobands')
           return setting !== undefined && setting !== null ? !!+setting : true
         }),
+        showGridlines: true,
       }),
     )
     .volatile(() => ({
@@ -288,105 +289,6 @@ export function stateModelFactory(pluginManager: PluginManager) {
         }
       },
 
-      bpToPx({
-        refName,
-        coord,
-        regionNumber,
-      }: {
-        refName: string
-        coord: number
-        regionNumber?: number
-      }) {
-        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: number) {
-        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 as Omit<typeof snap, symbol>),
-            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 as Omit<typeof snap, symbol>),
-              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 as Omit<typeof snap, symbol>),
-            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: string) {
         return self.tracks.find(t => t.configuration.trackId === id)
       },
@@ -437,12 +339,6 @@ export function stateModelFactory(pluginManager: PluginManager) {
 
         return allActions
       },
-
-      get centerLineInfo() {
-        return self.displayedRegions.length
-          ? this.pxToBp(self.width / 2)
-          : undefined
-      },
     }))
     .actions(self => ({
       setShowCytobands(flag: boolean) {
@@ -466,6 +362,9 @@ export function stateModelFactory(pluginManager: PluginManager) {
       toggleNoTracksActive() {
         self.hideNoTracksActive = !self.hideNoTracksActive
       },
+      toggleShowGridlines() {
+        self.showGridlines = !self.showGridlines
+      },
 
       scrollTo(offsetPx: number) {
         const newOffsetPx = clamp(offsetPx, self.minOffset, self.maxOffset)
@@ -651,429 +550,83 @@ export function stateModelFactory(pluginManager: PluginManager) {
         throw new Error(`invalid track selector type ${self.trackSelectorType}`)
       },
 
-      navToLocString(locString: string, optAssemblyName?: string) {
-        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
-          }
-        }
+      /**
+       * Helper method for the fetchSequence.
+       * Retrieves the corresponding regions that were selected by the rubberband
+       *
+       * @param leftOffset - `object as {start, end, index, offset}`, offset = start of user drag
+       * @param rightOffset - `object as {start, end, index, offset}`, offset = end of user drag
+       * @returns array of Region[]
+       */
+      getSelectedRegions(leftOffset?: BpOffset, rightOffset?: BpOffset) {
+        const snap = getSnapshot(self)
+        const simView = Base1DView.create({
+          // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
+          ...(snap as Omit<typeof self, symbol>),
+          interRegionPaddingWidth: self.interRegionPaddingWidth,
+        })
 
-        const locations = 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}`)
-          }
+        simView.setVolatileWidth(self.width)
+        simView.moveTo(leftOffset, rightOffset)
 
-          return {
-            ...region,
-            assemblyName: asmName,
-            parentRegion,
-          }
-        })
+        return simView.dynamicBlocks.contentBlocks.map(region => ({
+          ...region,
+          start: Math.floor(region.start),
+          end: Math.ceil(region.end),
+        }))
+      },
 
-        if (locations.length === 1) {
-          const loc = locations[0]
-          this.setDisplayedRegions([
-            { reversed: loc.reversed, ...loc.parentRegion },
-          ])
-          const { start, end, parentRegion } = loc
+      // schedule something to be run after the next time displayedRegions is set
+      afterDisplayedRegionsSet(cb: Function) {
+        self.afterDisplayedRegionsSetCallbacks.push(cb)
+      },
 
-          this.navTo({
-            ...loc,
-            start: clamp(start ?? 0, 0, parentRegion.end),
-            end: clamp(end ?? parentRegion.end, 0, parentRegion.end),
-          })
-        } else {
-          this.setDisplayedRegions(
-            // @ts-ignore
-            locations.map(r => (r.start === undefined ? r.parentRegion : r)),
-          )
-          this.showAllRegions()
-        }
+      horizontalScroll(distance: number) {
+        const oldOffsetPx = self.offsetPx
+        // newOffsetPx is the actual offset after the scroll is clamped
+        const newOffsetPx = self.scrollTo(self.offsetPx + distance)
+        return newOffsetPx - oldOffsetPx
       },
 
-      /**
-       * 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: NavLocation) {
-        this.navToMultiple([query])
+      center() {
+        const centerBp = self.totalBp / 2
+        const centerPx = centerBp / self.bpPerPx
+        self.scrollTo(Math.round(centerPx - self.width / 2))
       },
 
-      navToMultiple(locations: NavLocation[]) {
-        const firstLocation = locations[0]
-        let { refName } = firstLocation
-        const {
-          start,
-          end,
-          assemblyName = self.assemblyNames[0],
-        } = firstLocation
+      showAllRegions() {
+        self.zoomTo(self.maxBpPerPx)
+        this.center()
+      },
 
-        if (start !== undefined && end !== undefined && start > end) {
-          throw new Error(`start "${start + 1}" is greater than end "${end}"`)
-        }
+      showAllRegionsInAssembly(assemblyName?: string) {
         const session = getSession(self)
         const { assemblyManager } = session
-        const assembly = assemblyManager.get(assemblyName)
-        if (assembly) {
-          const canonicalRefName = assembly.getCanonicalRefName(refName)
-          if (canonicalRefName) {
-            refName = canonicalRefName
+        if (!assemblyName) {
+          const assemblyNames = [
+            ...new Set(
+              self.displayedRegions.map(region => region.assemblyName),
+            ),
+          ]
+          if (assemblyNames.length > 1) {
+            session.notify(
+              `Can't perform this with multiple assemblies currently`,
+            )
+            return
           }
+
+          ;[assemblyName] = assemblyNames
         }
-        let s = start
-        let e = end
-        let refNameMatched = false
-        const predicate = (r: Region) => {
-          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
+        const assembly = assemblyManager.get(assemblyName)
+        if (assembly) {
+          const { regions } = assembly
+          if (regions) {
+            this.setDisplayedRegions(regions)
+            self.zoomTo(self.maxBpPerPx)
+            this.center()
           }
-          return false
         }
-
-        const lastIndex = findLastIndex(self.displayedRegions, predicate)
-        let index
-        while (index !== lastIndex) {
-          try {
-            const previousIndex: number | undefined = 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: BpOffset, rightPx: BpOffset) {
-        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
-       *
-       * @param leftOffset - `object as {start, end, index, offset}`, offset = start of user drag
-       * @param rightOffset - `object as {start, end, index, offset}`, offset = end of user drag
-       * @returns array of Region[]
-       */
-      getSelectedRegions(
-        leftOffset: BpOffset | undefined,
-        rightOffset: BpOffset | undefined,
-      ) {
-        const snap = getSnapshot(self)
-        const simView = Base1DView.create({
-          // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
-          ...(snap as Omit<typeof self, symbol>),
-          interRegionPaddingWidth: self.interRegionPaddingWidth,
-        })
-
-        simView.setVolatileWidth(self.width)
-        simView.zoomToDisplayedRegions(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(cb: Function) {
-        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: BpOffset, end: BpOffset) {
-        // 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: number) {
-        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: number, refName: string, regionIndex: number) {
-        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))
-      },
-
-      showAllRegions() {
-        self.zoomTo(self.maxBpPerPx)
-        this.center()
-      },
-
-      showAllRegionsInAssembly(assemblyName?: string) {
-        const session = getSession(self)
-        const { assemblyManager } = session
-        if (!assemblyName) {
-          const assemblyNames = [
-            ...new Set(
-              self.displayedRegions.map(region => region.assemblyName),
-            ),
-          ]
-          if (assemblyNames.length > 1) {
-            session.notify(
-              `Can't perform this with multiple assemblies currently`,
-            )
-            return
-          }
-
-          ;[assemblyName] = assemblyNames
-        }
-        const assembly = assemblyManager.get(assemblyName)
-        if (assembly) {
-          const { regions } = assembly
-          if (regions) {
-            this.setDisplayedRegions(regions)
-            self.zoomTo(self.maxBpPerPx)
-            this.center()
-          }
-        }
-      },
+      },
 
       setDraggingTrackId(idx?: string) {
         self.draggingTrackId = idx
@@ -1220,6 +773,13 @@ export function stateModelFactory(pluginManager: 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,
@@ -1346,6 +906,249 @@ export function stateModelFactory(pluginManager: 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?: BpOffset, end?: BpOffset) {
+        moveTo(self, start, end)
+      },
+
+      navToLocString(locString: string, optAssemblyName?: string) {
+        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?.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 ?? 0, 0, parentRegion.end),
+            end: clamp(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: NavLocation) {
+        this.navToMultiple([query])
+      },
+
+      navToMultiple(locations: NavLocation[]) {
+        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: Region) => {
+          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: number | undefined = 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(): MenuItem[] {
@@ -1355,9 +1158,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
             icon: ZoomInIcon,
             onClick: () => {
               const { leftOffset, rightOffset } = self
-              if (leftOffset && rightOffset) {
-                self.moveTo(leftOffset, rightOffset)
-              }
+              self.moveTo(leftOffset, rightOffset)
             },
           },
           {
@@ -1369,6 +1170,46 @@ export function stateModelFactory(pluginManager: PluginManager) {
           },
         ]
       },
+
+      bpToPx({
+        refName,
+        coord,
+        regionNumber,
+      }: {
+        refName: string
+        coord: number
+        regionNumber?: number
+      }) {
+        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: number, refName: string, regionNumber: number) {
+        const centerPx = this.bpToPx({
+          refName,
+          coord,
+          regionNumber,
+        })
+        if (centerPx) {
+          self.scrollTo(Math.round(centerPx.offsetPx - self.width / 2))
+        }
+      },
+
+      pxToBp(px: number) {
+        return pxToBp(self, px)
+      },
+
+      get centerLineInfo() {
+        return self.displayedRegions.length
+          ? this.pxToBp(self.width / 2)
+          : undefined
+      },
     }))
 }