Difference between revisions of "Reproducing gbrowse img functinality with JBrowse"

Revision as of 14:59, 9 April 2018

That is, "Reproducing gbrowse_img functionality with JBrowse" (underscores don't survive the Mediawiki page naming process).

Why this is needed

While JBrowse is a terrific tool for browsing genomes, there is one piece of functionality that is missing from this excellent client-side tool: getting an image from the server with a URL request that can be dynamically inserted into a web page, like what one might want for a gene page at a model organism database.

The most common solution that is used when people need this functionality from JBrowse has been to put the needed URL in an html iframe. This approach has a few down sides:

• The content in the iframe remains active. Users can interact with it in the same way that they can interact with a full JBrowse instance. While this is kind of neat in some instances, there is no way to get back to the original view. If the designer of the page put that view there for a reason, the user might want to see that view in the context of the page.
• There is no way to know before the JBrowse URL is invoked how tall the resulting "image" (JBrowse page) will be, so the page designer generally has to assign a fixed height and then the resulting JBrowse page is frequently either too large or too small. When it's too large, it results in ugly white space; but even worse, when it's too small, it requires the user to scroll to see the entirety of the content, which can result in accidentally scrolling away from the genomic location originally defined for the page.
• iframes are ugly.

What this solution does

• Puts the JBrowse content in a div with a JavaScript function
• Uses CSS to prevent mouse interactions (like scrolling) in the JBrowse div
• Uses JavaScript to monitor the size of the resulting JBrowse content and dynamically resize the div to show all of the content
• Creates a div "overlay" for the resulting image so that a click on it goes to the full JBrowse site.

The example code below uses JQuery but could easily be reimplemented in another framework (or vanilla JavaScript, which is how it was originally written--putting it into JQuery made it much cleaner).