Force tracks to load at higher zoom using react-linear-genome-view

[Thomas-Rowlands]

Hi,

I'm currently using react-linear-genome-view embedded in my React site, however the desired zoom level requires users to click "force load" for tracks. With the tracks we're using, the loading time isn't too bad, so we'd quite like to have it load data using our default session straight away.

Is it possible to force load the tracks programmatically here? Or at least configure a different base range for this message to appear?

Cheers,

-Thomas

[cmdcolin]

you can set the maxDisplayedBpPerPx setting on the linear-genome-view BaseLinearDisplay

for example if you had a variant track

      "type": "VariantTrack",
      "trackId": "variant_colors",
      "name": "volvox filtered vcf (green snp, purple indel)",
      "category": ["VCF"],
      "assemblyNames": ["volvox"],
      "adapter": {
        "type": "VcfTabixAdapter",
        "vcfGzLocation": {
          "uri": "volvox.filtered.vcf.gz",
          "locationType": "UriLocation"
        },
        "index": {
          "location": {
            "uri": "volvox.filtered.vcf.gz.tbi",
            "locationType": "UriLocation"
          }
        }
      },
      "displays": [
        {
          "type": "LinearVariantDisplay",
          "displayId": "volvox_filtered_vcf_color-LinearVariantDisplay",
          "maxDisplayedBpPerPx": 1000
        }
      ]

that means that at 1000 bases per pixel (imagine a screen width of 1600px, that would be approx 1600*1000=1,600,000bp in screen view) then it stops displaying. note that 1000 is the default for most tracks so you could increase it

there is another way where you can essentially specify this setting within the session instead of in the config if interested. we have also considered auto-calculating whether a track can be displayed but it's just a hardcoded limit right now

[Thomas-Rowlands]

Thanks for your swift response, I've tried using that property and unfortunately nothing changed. Using the browser debugger, I can see the config for the viewstate did update to hold the new maxDisplayedBpPerPx property however.

For now, I've resorted to implementing a hacky solution of running an interval on page load and checking for the buttons before clicking them programmatically. I've tried adding this property to other areas of the config, such as the default session, with various different numeric values but nothing appears to change.

To get a better idea of my implementation, I'm returning the configured component in the render function of my "GenomeBrowser" component with a default session configured and passed to this component before rendering.

[hliihbcas]

I encountered this problem under the same usage scenario. My solution is to use MutationObserver to monitor page elements, and when the FORCE LOAD child element appears, simulate clicking the button.

  var target = document.querySelector('#jbrowse_linear_genome_view');
  var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation){
        if(mutation.addedNodes[0]){
            var tags = document.getElementsByTagName("button");
            for(var i in tags){
                try{
                if(tags[i].getAttribute("class")=="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSizeSmall MuiButton-sizeSmall"){
                    tags[i].click()
                    break;
                }
                }catch(err){break;}
            }

        }
      });
   });
  var config = { attributes: true, childList: true, characterData: true ,subtree:true}
  observer.observe(target, config);

[cmdcolin]

@hliihbcas interesting method...are you using @1.6.4 by chance? we tried adding a "stats estimation" in this version that helps it try to decide whether to display or not based on screen density or bytes downloaded. if it is not working properly for particular tracks of yours i'd be interested to help fix the default behavior

[hliihbcas]

Thanks for your response,I am using @license React v16.14.0 as per the official website Jbrowse2: embed JBrowse 2 section（https://jbrowse.org/jb2/docs/tutorials/embed_linear_genome_view/07_default_session/）. When I try to display only part of the data, such as the range of a gene, I found that the FORCE LOAD button would appear by default. I want to integrate Jbrowse2 into one of my front-end web pages. I consider that users may not want to click this button, but the official website does not give relevant settings, so I use this strange method. Here's what happened to me at work:

 defaultSession: {
      name: 'my session',
      view: {
        id: 'linearGenomeView',
        type: 'LinearGenomeView',
        offsetPx: -15,
        bpPerPx: 15,
        displayedRegions:[
            {
                refName:'1',
                assemblyName:'GRCh38',
                start:100872372,
                end:100895411
            }
        ],
        tracks: [
        {
            type: 'FeatureTrack',
            configuration: 'GCA_000001405.15_GRCh38_full_analysis_set.refseq_annotation.sorted.gff',
            displays: [
            {
                type: 'LinearBasicDisplay',
                configuration: 'GCA_000001405.15_GRCh38_full_analysis_set.refseq_annotation.sorted.gff-LinearBasicDisplay',
            },
            ],
        },
        ],
        hideControls: true,
        hideHeader: true,
        hideCloseButton: true,
        trackSelectorType: "hierarchical",
        height: 1000,
      },
    },
  })