reacting to the view : get new location

[MikeAxtell]

I am playing with embedding a JBrowse2 linear genome view per https://jbrowse.org/jb2/docs/tutorials/embed_linear_genome_view/01_introduction/

What I would like to do is react to a change in the genome browser's location (I want each change in location to spawn a JQuery to get some data from server, based on location). Following the example at https://jbrowse.org/jb2/docs/tutorials/embed_linear_genome_view/08_reacting/
.. I am not seeing a clear "location" in the JSON patch data. None of the text sent by

onChange: patch => {
          updates.innerHTML += JSON.stringify(patch) + '\n'
        },

seems to have the current location. For instance, on initial loading at location Ccam0.32_scaffold14b:1,771,180..1,771,366 , the patch data reads:

{"op":"add","path":"/session/view/displayedRegions/0","value":{"refName":"Ccam0.32_scaffold14b","start":0,"end":3260151,"reversed":false,"assemblyName":"cuscuta_campestris_assembly_r0-32"}}
{"op":"replace","path":"/session/view/bpPerPx","value":0.14253048780487804}
{"op":"replace","path":"/session/view/offsetPx","value":3947}
{"op":"replace","path":"/session/view/offsetPx","value":12426668}

None of the above data actually contains the current location. If I zoom out to Ccam0.32_scaffold14b:1,771,087..1,771,460, the patch update says:

{"op":"replace","path":"/session/view/bpPerPx","value":0.2850609756097561}
{"op":"replace","path":"/session/view/offsetPx","value":6213006}

again which does not give any information about the new location.

I wonder could someone give an example of how to listen for changes in the genome broswer's location (in Chr:start-stop format or something like that), preferably writing the new location to console.log?

[cmdcolin]

The offsetPx and bpPerPx are fundamental internal state values that let us calculate what region is being viewed. But, in order to make it more useful, you can use "derived state". This is essentially a function that calculates a value based on the internal state

If you are using React for your component, then you can say something like this

const VisibleRegions = observer(({ state }) => {
  const locstrings = state.session.views[0].coarseDynamicBlocks
    .map(
      region =>
        `${region.refName}:${Math.floor(region.start)}-${Math.floor(
          region.end,
        )}`,
    )
    .join(',')
  return <p>Visible region: {locstrings}</p>
})

export const VisibleRegionsExample = () => {
  const state = createViewState({
    assembly,
    tracks,
    defaultSession,
    location: 'ctgA:1105..1221',
  })
  return (
    <div>
      <JBrowseLinearGenomeView viewState={state} />
      <VisibleRegions state={state} />
    </div>
  )
}

The VisibleRegions is a "observer" component, it observes the state of the view, and whenever coarseDynamicBlocks updates, it redraws a new text (there is dynamicBlocks and coarseDynamicBlocks, coarseDynamicBlocks is just throttled to update slightly less frequently e.g. every 250ms)

[cmdcolin]

note that dynamicBlocks and coarseDynamicBlocks are the derived state

[cmdcolin]