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.


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.

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

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="" />
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></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'>

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.

URL of the hosting server
value: url string

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 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.