Get Offset when Jbrowse is horizontally scrolled

[daviddamilola]

Is there a way to get the current view state regarding the offset, bpperpx, binsize, etc, after scrolling in JBrowse tracks in any direction? I need it to sync with an existing app.

Or is there a method to prevent horizontal scrolling, or hooking into the render of the tracks some how.

[cmdcolin]

this code example shows usage of an 'observer' to update when visible regions changes

live demo
https://jbrowse.org/storybook/lgv/main/?path=/story/source-code-for-examples--with-observe-visible-regions

source code
https://github.com/GMOD/jbrowse-components/blob/main/products/jbrowse-react-linear-genome-view/stories/examples/WithObserveVisibleRegions.tsx

the code there looks like this

const VisibleRegions = observer(function ({
  viewState,
}: {
  viewState: ViewState
}) {
  const view = viewState.session.views[0]!
  return view.initialized ? (
    <div>
      <p>Visible region {view.coarseDynamicBlocks.map(loc).join(',')}</p>
      <p>Static blocks {view.staticBlocks.map(loc).join(',')}</p>
    </div>
  ) : null
})

so this component will re-render any time the 'coarsedynamicblocks' (which roughly corresponds to current visible regions) or staticBlocks (corresponds to rendered 'blocks') change

you could also put

const VisibleRegions = observer(function ({
  viewState,
}: {
  viewState: ViewState
}) {
  const view = viewState.session.views[0]!
  console.log(view.bpPerPx,view.offsetPx)
  return view.initialized ? (
    <div>
      <p>{view.offsetPx} {view.bpPerPx}</p>
      <p>Static blocks {view.staticBlocks.map(loc).join(',')}</p>
    </div>
  ) : null
})

and it would update whenever offsetPx or bpPerPx changed. again, offsetPx and bpPerPx are sort of low level but you can work with that if you want

using mobx-react observer is the best way to say updated with things like this. we also have an 'onPatch' callback that notifies when any state has changed in the jbrowse app

[cmdcolin]

if it is strongly of interest to limit jbrowse side scrolling, then let me know. i don't know a way to do this off hand but i have heard this request more than once, and it might be possible to make something for it

[daviddamilola]

Hi @cmdcolin, thanks for your response. The observer route was very promising until I realised users could still zoom in on the tracks, and it changed the calculations needed. It would be very helpful if I could disable zoom and horizontal scroll in the tracks.

[tanyastead]

Hi @cmdcolin - I am also interested in either disabling the scroll or being able to provide a controller from outside the jbrowse container. Do you have any suggestions/can you link to any sources that could help?

[cmdcolin]

Here is an example of making a plugin that effectively disables side scroll and zoom by nullifying the scrollTo and zoomTo actions https://github.com/GMOD/jbrowse-components/pull/4982/files#diff-387aa0fba3ffb3e9a8959746c1b43a3765ddb88dd8777a197595cfff51ff2b04R15-R32

Pros:

• no more side scroll, zoom, navigation, etc

Cons:

• there are still zoom and scroll buttons but they don't do anything in the UI after this
• any code you write to try to dynamically re-navigate jbrowse could be harmed by that solution. you could potentially make it work still ...e.g. try to make it only call the proper scrollTo/zoomTo when you toggle a global variable on and off but it's a challenge to overcome

[cmdcolin]

you can see a live demo of what that PR is demonstrating here https://jbrowse.org/storybook/lgv/disable_zoom/?path=/story/source-code-for-examples--with-disable-zoom-and-side-scroll

[daviddamilola]

Perfect @cmdcolin. Thank you! 🙏🏾

[tanyastead]

Thanks @cmdcolin!