How to get changes in location

[guzmanvig]

In the react component, the OnChange callback looks like it gives an initial location:

path: "/session/view/tracks/1/displays/0/blockState/{Genome}NC_000913.3:2,319,661..2,319,690-0"

and then when scrolling, a series of offset in pixels:

{ "op": "replace", "path": "/session/view/offsetPx", "value": 115984590 }

Is there a way to get the actual new location after each change?

Thanks!

[cmdcolin]

we have an example here that does this with react and observer components (the "VisibleRegions" component "observes" the state of the view)

https://jbrowse.org/storybook/lgv/v1.5.1/?path=/story/linear-view--visible-regions-example

see https://github.com/GMOD/jbrowse-components/blob/607_stats_estimation_v2/products/jbrowse-react-linear-genome-view/stories/JBrowseLinearGenomeView.stories.tsx#L366-L393 for how this demo is implemented

you can also accomplish a similar thing with just onChange like this

export const VisibleRegionsExample2 = () => {
  const state = createViewState({
    assembly,
    tracks,
    defaultSession,
    location: 'ctgA:1105..1221',
    onChange: () => {
      console.log(
        state.session.views[0].dynamicBlocks.map(
          (region: any) =>
            `${region.refName}:${Math.floor(region.start)}-${Math.floor(
              region.end,
            )}`,
        ),
      )
    },
  })
  return <JBrowseLinearGenomeView viewState={state} />
}

this will console.log the currently visible region for every onChange callback

[garrettjstevens]

For the onChange, you can also this:

onChange: () => {
  console.log(state.session.view.visibleLocStrings)
}

It's a bit different since it will return a single multi-region location string (regions joined by ";") instead of an array of location strings, but could be useful depending on the use case.

[guzmanvig]

Both answers work for me. Thank you!