UMD Build of JBrowseLinearView: How to configure SVGFeatureRenderer?

[tchannagiri]

Hi devs,

I am trying to use the unoffocial UMD JBLV build at: http://s3.amazonaws.com/jbrowse.org/jb2_releases/jbrowse-linear-genome-view/jbrowse-linear-genome-view%40v1.1.0/umd/jbrowse-linear-genome-view.js

Everything works great except that I am not able to override the config for SVGFeatureRenderer in a LinearBasicDisplay. The config I would like for example is:

"renderer" : {
    "type": "SVGFeatureRenderer"
    "color1": "red"
}

But nothing happens. I have tried to add this to the display, the track, the default display, etc. in the constructor args and there is no change. The renderer config in config.json works fine in the the JBrowse-Web app however. Also specifiying different adapters or displays seems to work fine in the JBLV. So my questions are:

1). Is it possible to specify the renderer in arguments to the JBrowseLinearView constructor in the same way as in config.json for JBrowse-Web?

2). Is there some way of programatically accessing the SVGFeaturerRenderer props/config of a display and changing it after JBrowseLinearView has been constructed? As the embedding tutorial points out the displays and tracks have setters for modifying properties programatically, but I could not find anything for renderers.

Thanks for the help and bringing this amazing product to the community!

[garrettjstevens]

Hi @tchannagiri,

Thanks for your interest! For (1), yes, you should be able to specify renderer configuration in the same way as JBrowse Web's config.json. Here's an example of a track config (in the tracks array of the view constructor) that works for me:

{
  type: 'VariantTrack',
  trackId: 'volvox_test_vcf',
  name: 'volvox filtered vcf',
  assemblyNames: ['volvox'],
  category: ['VCF'],
  adapter: {
    type: 'VcfTabixAdapter',
    vcfGzLocation: {
      uri: 'test_data/volvox/volvox.filtered.vcf.gz',
    },
    index: {
      location: {
        uri: 'test_data/volvox/volvox.filtered.vcf.gz.tbi',
      },
    },
  },
  displays: [
    {
      type: 'LinearVariantDisplay',
      displayId: 'volvox_filtered_vcf-LinearVariantDisplay',
      renderer: {
        type: 'SvgFeatureRenderer',
        color1: 'red',
      },
    },
  ],
}

As for (2), that would be possible as well, although it requires a bit more knowledge about how the internals work. I was able to get it to work doing something like this:

const genomeView = new JBrowseLinearGenomeView(/* constructor args */)
// do something here to wait for `genomeView.view` to initialize, depending on your app
genomeView.view.showTrack('volvox_test_vcf')
genomeView.view.tracks[0].configuration.displays[0].renderer.color1.set('green')

Let us know if you have any other questions.

[tchannagiri]

Thank you so much Garret! Both of these methods worked like a charm. For the life of me I can't figure out why I kept getting the configuration wrong. I was probably nesting "renderer" incorrectly or putting it in "defaultSession/view/tracks" instead of "tracks". As for the second method, I see the trick is to access the display through "tracks[0].configuration.displays[0]" instead of just "tracks[0].displays[0]".

I really appreciate the help as I'm sure you are all quite busy!