WashU EpiGenome Browser

Friday, July 5, 2013

v20 (2 of 3): embedding browser

Created: 2013/7/5
Last updated: 2014/2/6

From version 20 you can now embed the WashU EpiGenome Browser in your website! You only need to do some trivial HTML and JavaScript coding to have it. The embedded browser is full-blown browser as the one running on our server, and you can customize it to a great extent to show your stuff in your own way. Best of all, it's part of your website.

Examples

http://cgs.wustl.edu/~xzhou/embed/1.html

This web page has a browser embedded in it. It automatically embeds the browser as soon as the webpage itself is loaded. It shows the default tracks from the Roadmap Epigenomics public hub on human hg19 genome.

http://cgs.wustl.edu/~xzhou/embed/2.html

This example loads human/hg19 genome and displays a set of custom tracks.

http://cgs.wustl.edu/~xzhou/embed/3.html

This example can embed browser according to user's actions (you need to click a button to embed a browser).

You can see the source code of these examples in the HTML files (1.html, 2.html, 3.html) and adapt them for your purpose.

How the first example works

1. add following lines in the <HEAD> section of your web page:

<link rel="stylesheet" type="text/css" href="http://epigenomegateway.wustl.edu/browser/style.css" />
<script type="text/javascript" src="http://epigenomegateway.wustl.edu/browser/base.js"></script>
<script type="text/javascript" src="http://epigenomegateway.wustl.edu/browser/personality.js"></script>
<script type="text/javascript" src="http://epigenomegateway.wustl.edu/browser/embed.js"></script>

2. call the function embed_washugb to embed a browser. Most simply it can be done with following lines of javascript:

<script type='text/javascript'>
embed_washugb({
host:'http://epigenomegateway.wustl.edu',
container:document.getElementById('container_id'),
genome:'hg19',
});
</script>

This example requires a <div> element with ID of "container_id" in the web page.

The embed_washugb function requires a hash object as its only argument. All customization will be done through contents of this hash, as explained below.

embed_washugb options

All parameter names (keywords) are in bold face and are case-sensitive.

host

URL of the hosting server
value: url string

container

DIV object in which the browser will be embedded. You can supply the object programmatically, or by the object's ID (document.getElementById('xxx'))
value: DIV object

genome

genome name, e.g. hg19, mm9
value: genome name string

leftSpaceWidth (optional)

the width of space on the left of genome heatmap (where track names are shown)
value: positive integer

panelWidth (optional)

width of the genome heatmap panel
value: positive integer

noPanelwidthConfig (optional)

do not show browser panel width configuration button (gear button)
value: true (or 1 or anything evaluates to true in javascript)

noDeleteButton (optional)

do not show delete button (for deleting the embedded panel)
value: true

hideTrackName (optional)

do not show track name on the left of browser
value: true

hideChromNavigator (optional)

do not show the chromosome navigator on top of the browser tracks
value: true

hideTopRuler (optional)

do not show ruler on top of the browser tracks
value: true

hideMetadataColormap (optional)

do not show metadata color map
value: true

maxTrackHeight (optional)

maximum track height, this only applies for the automatic track height adjustment when the browser loads for the first time
value: positive integer

noDefaultTrack (optional)

do not load any default native tracks
value: true

showContent (optional, new parameter)

define contents to be displayed in the embedded browser
value: an array of objects, each object defines a track in the same fashion a JSON data hub is written.

v20 (1 of 3): dual genome display

The version 20 of WashU EpiGenome Browser sees lots of exciting new features, which will be talked about in 3 blog posts. Here we introduce the "dual genome display". Follow the links to see embedding browser, and custom track cache refreshing.

As usual, you can get the source code from our server or dropbox. A short guide has been written to help you install a local mirror of the Browser. Feel free to email us about problems.

The Dual Genome Display

Click genome logo on top of the browser page, to see a small menu showing up:

Click "Add new genome" option, the select-a-genome panel will be shown:

Suppose we choose mm9 by clicking the Quick button, a new browser panel about Mouse genome will be shown (beneath the original hg19 genome):

The newly added mouse genome can be navigated separately from the existing human genome. All the browser functions and apps can be applied on the mouse genome. Give it a try and have fun! When you are done, you can click the red X button to remove the mouse genome.

It's not limited to "dual" genomes only, you can add 3 or more genomes if you prefer.

You can show the same genome (e.g. all hg19) multiple times. In that case, the custom track information will be shared among all the browsers from the same genome.

Friday, June 14, 2013

Split to get a new panel

Above screenshot shows tracks over HOXA and HOXC gene clusters in the human genome, each from a separate chromosome. The HOXA gene cluster is shown on left, while the HOXC gene cluster is shown in a secondary panel, highlighted in blue box, between the main panel and the metadata color map.

The awesome thing is that you can zoom and scroll this secondary panel independently, in addition to the main panel. Thus you will have huge freedom when comparing multiple genomic locations under the same set of tracks.

Splitting panel

Click "Apps" button on the top right, and select "Secondary panel":

The browser will shrink width to make room for the new panel, which is blank until you choose the view range:

Click the SELECT VIEW RANGE button to see the familiar range selection box:

Once you've chosen a gene or entered a coordinate, contents will be shown in the secondary panel over the region you selected:

Navigating the new panel

Click the "minus sign" button a few times to zoom out and see the entire HOXC cluster:

You can perform the same scrolling and zoom-in with the secondary panel as you can do with the main panel, for instance zooming-in:

Using the split panel

A row of buttons on the top portion of secondary panel gives you functions that can be applied to THIS panel, e.g. click X to delete it:

When you delete a track from the secondary panel, this track will also be deleted from the main panel.

When you change display mode or rendering style of a track, the changes are always applied to both main and split panel.

For numerical tracks, the browser keeps a common scale between main and split panels.

For annotation tracks that may show variable amount of items in the two panels, the browser always keep the track height the same.

Last modified: Apr 4, 2014