Add ability to get image snapshots from JBrowse

[doughowe]

At ZFIN we use this ability from GBrowse extensively as an easy way to get browser snapshots for use on specific pages, like CRISPR pages, mutation pages, and transcript pages to show where these things are in the genome in a simple image shown on the page.

Click the image...go to that spot in GBrowse.

Other nice features to consider:

1. ability to set the span (# bases and starting point, or location and #bases flanking each side) to show in the image
2. ability to select any tracks to include
3. ability to set a highlight mark on a glyph in the image to highlight one item in the image
4. ability to order the tracks for the image

[nathandunn]

This is a good example of the current functionality:

http://zfin.org/ZDB-TSCRIPT-110325-1752#

Goes to here:

http://zfin.org/action/gbrowse/?name=25%3A14932641..14953381&h_feat=pax6a-001

[cmdcolin]

One option is to use phantomjs for this type of task, and indeed the phantomjs approach was also mentioned in the recent jbrowse paper.

Since phantomjs is a command line tool that not everyone has access to, some possible workarounds are using websites like phantomjscloud, which can render a PNG simply by forwarding a url to their service (and URL can control things like the region, tracks viewed, etc)

https://phantomjscloud.com/api/browser/v2/a-demo-key-with-low-quota-per-ip-address/?request=%7Burl:%22https://jbrowse.org/code/JBrowse-1.11.6/?data=sample_data/json/volvox%26tracks=DNA%2CTranscript%2Cvolvox_microarray_bw_density%2Cvolvox_microarray_bw_xyplot%2Cvolvox-sorted-vcf%2Cvolvox-sorted_bam_coverage%2Cvolvox-sorted_bam%26tracklist=0%22,renderType:%22png%22,renderSettings:%7BzoomFactor:2,viewport:%7Bwidth:3300,height:2000%7D%7D%7D

There is another discussion thread about this from way back here :) https://github.com/GMOD/jbrowse/issues/81

Docs http://gmod.org/wiki/JBrowse_Configuration_Guide#Rendering_high_resolution_screenshots_using_PhantomJS

[enuggetry]

It wouldn't be too hard to build a REST interface around phantomjs. In the forthcoming JBrowse server, one could easily build a plugin.

[nathandunn]

Is the server required for the plugin? I think that with GBrowse you just used a URL and it would build the image (with link) for you.

Nathan

On Jun 25, 2016, at 9:02 PM, Eric Y notifications@github.com wrote:

It wouldn't be too hard to build a REST interface around phantomjs. In the forthcoming JBrowse server, one could easily build a plugin.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/GMOD/jbrowse/issues/772#issuecomment-228578405, or mute the thread https://github.com/notifications/unsubscribe/AAt2qn1M3Iaa7W8Tqyn-AookCCQlGjDdks5qPc-JgaJpZM4I-JMG.

[doughowe]

Thanks for considering this feature. Note that the need is to get a clean looking embeddable image of desired tracks over a desired span from a specific species/strain/build version. The image should be "clean"..meaning a screen shot of a URL may include more "stuff" from the web page than is necessary for the simple image of tracks that is desired. The example posted above by Nathan shows this well.

[vivekkrish]

I've come across a tool called pageres, which wraps around phantomjs and exposes a programmatic interface, as well as an easy to use command-line interface (CLI).

An example workflow on the command-line would be:

• Install nodejs/npm (https://nodejs.org/en/download/)
• Install pageres
  $ npm i -g pageres-cli
• Generate JBrowse screenshot
  $ pageres -d 5 http://path/to/jbrowse/?loc=refseq:start..end&tracks=A,B,C&nav=0&tracklist=0&overview=0 1024×768

Potentially, the programmatic interface could be used on the JBrowse server side to build a plugin which replicates the CLI functionality.

[nathandunn]

pageres -d 10 "http://icebox.lbl.gov/Apollo2/183026/jbrowse/index.html?loc=chr12%3A1924601..1934790&tracks=DNA%2CAnnotations%2CZebrafish-OGS-81-transcript%2CConservation%20(7%20genomes)%20Density%2CConservation%20(7%20genomes)%20Xa&nav=0&tracklist=0&overview=0" 1600X200 --filename=sox9a-001

Wow, that is pretty straight-forward @vivekkrish Thanks for pointing out.

[jogoodma]

The image workaround via phantomjs/pageres might be suitable for some, but doesn't address a critical need at FlyBase that we currently have with GBrowse2 and lose with JBrowse. That is the ability to generate image maps of regions in GBrowse. For example, on our insertion reports, we import the region of the insertion and neighboring insertions. Clicking on any of the other insertions take you to the report for that neighboring insertion.

I'm not suggesting that we preserve the image map method of doing this, only the ability to provide clickable views from pages external to JBrowse. We have played around with iframes, but find them unsuitable for a variety of reasons. Providing a way to embed JBrowse without an iframe ( #575) would be ideal for us.

[nathandunn]

@jogoodma I think you should open up a separate issue for this. To clarify, in addition to this issue, you want the ability to have customizable clickable regions?

You should be able to customize the clickability (within a normal JBrowse view) of any feature to go to an external site either through the trackList configuration or by adding a plugin.

Or are you want the clickability to extend to the image map as well?

[jogoodma]

@nathandunn Will do! We want the clickability to extend to the image map or some non iframe equivalent. With GBrowse 2 we currently have the ability to import either an image or a clickable image map for any region. The clickable image map is useful for reports where we want to allow the user to navigate to nearby features without the need to navigate through the genome browser (e.g. report ---(image map)---> report vs report--->genome browser---->report).

I'll do a full writeup in a new ticket tomorrow. Thanks!

[vivekkrish]

Just a thought....how easy is it to disable horizontal scrolling for a given region in JBrowse? With such functionality, we could build a URL (maybe with a new URL param named static), like so:

http://path/to/jbrowse/?data=source&tracks=A,B,C& loc=refseq:start.. stop&nav=0&overview=0&tracklist=0&static=1 Upon embedding in an iframe, with the height adjustable based on the amount of vertically stacked data, this would produce a static (in terms of navigation) yet dynamic (in terms of interactivity) view of the desired region, where the features remain clickable, very similar to an imagemap.

Any drawbacks to such an approach?

On Thu, Aug 18, 2016, 23:31 Josh Goodman notifications@github.com wrote:

@nathandunn https://github.com/nathandunn Will do! We want the clickability to extend to the image map or some non iframe equivalent. With GBrowse 2 we currently have the ability to import either an image or a clickable image map for any region. The clickable image map is useful for reports where we want to allow the user to navigate to nearby features without the need to navigate through the genome browser to get there (e.g. report ---(image map)---> report vs report--->genome browser---->report).

I'll do a full writeup in a new ticket tomorrow. Thanks!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/GMOD/jbrowse/issues/772#issuecomment-240919034, or mute the thread https://github.com/notifications/unsubscribe-auth/AArb1aLrD3yzEwKx_G88-TsdjrPM7AtPks5qhSN7gaJpZM4I-JMG .

[nathandunn]

@vivekkrish I like this idea. I don't know about the difficulty of removing scrolling. I'm sure there are ways you restrict the overflow.

You could probably create a plugin that only projects the given region you are interested in, thus restricting the browser appropriately and hopefully appropriately creating the write zoom level (histograms could be adjusted when zoomed out). @cmdcolin has already done some experimental work that might be a good starting point:

https://github.com/elsiklab/projectionplugin

[nathandunn]

was going to add this here from @keiranmraine

I've put together a script for capturing a set of images based on a BED input file using casperjs. https://github.com/cancerit/cgpJBrowseToolkit The advantages of this over looping on the standard phantomjs rasterize.js are:

• Cache of data is maintained
• Also works with sites secured with http_basic (password in text file, set permissions accordingly)
• Trims images back to correct height (except pdf)
• Attempts to automatically compensate for track loading times based on requested base URL
• Hides tracklist automatically

Usage is simple, get the user to set up the display with relevant tracks in the browser and then just copy the URL and give it to the script:

$ casperjs jbrowse_rasterize.js --passwdFile=myPwd.txt --width=1200 --imgType=png --locs=places.bed --outdir=wibble1 --baseUrl='http://localhost:8999/JBrowse/?data=auto%2F1404&loc=1%3A115102801..115404000&tracks=...'

I'm sure this can be improved upon ('waitForResouce()' on each track div, instead of a naive 'wait()' if you know what to test for) but this is as far as I have time to take it.

[nathandunn]

A lot of similar stuff is talked about here: https://github.com/GMOD/jbrowse/issues/81