How to sync jbrowse scale with external scale

[daviddamilola]

I am trying to integrate jbrowse into an existing platform. The current platform provides me with values such as the bin size, bpperpixel and start and end position. Is there a way to adjust jbrowse scale to match this?

i am currently doing this.

   view?.setDisplayedRegions([
    {
      assemblyName: assembly.name,
      refName: props?.location?.chromosome.name,
      start: props.location.selectedInterval[0] ?? scaleView.start,
      end: props.location.selectedInterval[1] ?? scaleView.end,
    },
   ])
 

   view.setScaleFactor(0.7) //  <------ Not sure how to calculate the correct scale factor here
   view?.setNewView?.(bpPerPx, scaleView.start / scaleView.bpPerPixel);

Any help would be highly appreciated.

[cmdcolin]

.I am presuming you basically want to navigate to a specific genomic location. there are a lot of low level utility actions like setDisplayedRegions, scalefactor, etc. but generally what you would use is

view.navToLocString("chr1:1-500", "hg19") //<-- substitute chromosome names and assembly name as needed

That will navigate an existing instance to a new location

If you just want to instantiate the initial location, you can use a different technique, such as passing the location to the createViewState constructor

Here is a storybook example to illustrate. I made two examples, one using locstrings, and one with objects. same idea, just slightly different APIs

Using location string

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

https://jbrowse.org/storybook/lgv/main/?path=/story/source-code-for-examples--external-navigate-locstring

Using a location object

https://jbrowse.org/storybook/lgv/main/?path=/story/source-code-for-examples--external-navigate-object

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

let me know if that helps

[cmdcolin]

Also, I did just read that "your current platform provides you with values such as the bin size, bpperpixel and start and end position"..if you really want to you can call the functions sort of like how you are doing. If you have the exact type of values you have, i can try to check and see what jbrowse code is needed, but otherwise, I'd recommend the 'navToLocString' type approach

[daviddamilola]

Thanks for your response. The reason why we tried to use the individual functions is that jbrowse rerenders completely when you try to change the location externally leading to a serious jank. The approach taken was to save the session to a useRef and then try to move to a location manually, which it does smoothly but the scales are not in sync.

[cmdcolin]

yes, tearing down and recreating the "view state" will be slow. in my examples that I showed above use a useState to only run createViewState once to initialize the "view state", and thenafter, calling the navToLocString to move around. this should be pretty fast.

if you are aiming to re-navigate to a specific genomic region, I recommend using the navToLocString function. manually fiddling with the bpPerPx and displayedRegions is generally a bit low level, when navToLocString automatically adjusts those variables as needed, but welcome to use whatever works :)

lemme know if you have any other issues