JBrowse is a genome viewer written in javascript, html, allow with the usual Bio::Graphics modules. It can be run in the catalyst framework.
This assumes you have Catalyst, Catalyst dependencies, JBrowse, and JBrowse dependencies (mostly perl/bioperl/bio::graphics things) installed.
]]>
Mostly we want are static (css, js, additional perl libs) content in root/static, html/tt2 in root/src, and data in root/static/data.
cp path/jbrowse_ucsc/{js,jslib,lib,img,jar} pathto/JBrowse/root/static cp path/jbrowse_ucsc/genome.css pathto/JBrowse/root/static/css cp path/jbrowse_ucsc/data/* Jbrowse/root/static/data/ucsc cp path/jbrowse_ucsc/index.html pathto/JBrowse/root/src/home/index.tt2 cp path/jbrowse_ucsc/*cur pathto/JBrowse/root/static
cd pathto/JBrowse
script/jbrowse_create view HTML TT
package JBrowse::View::HTML; use Moose; use namespace::autoclean;
extends 'Catalyst::View::TT';
_PACKAGE_->config(
TEMPLATE_EXTENSION => '.tt2',
render_die => 1,
INCLUDE_PATH => [
JBrowse->path_to( 'root', 'src' ),
JBrowse->path_to( 'root', 'static' ),
],
);
GenomeView.js: view.elem.style.cursor = "url(\"/static/openhand.cur\"), move";
GenomeView.js: document.body.style.cursor = "url(\"/static/closedhand.cur\"), move";
GenomeView.js: view.elem.style.cursor = "url(\"/static/closedhand.cur\"), move";
Browser.js:235: + "/static/img/right_arrow.png\"/> to view)
";
Browser.js:576: moveLeft.src = browserRoot + "/static/img/slide-left.png";
Browser.js:589: moveRight.src = browserRoot + "/static/img/slide-right.png";
Browser.js:604: bigZoomOut.src = browserRoot + "/static/img/zoom-out-2.png";
Browser.js:617: zoomOut.src = browserRoot + "/static/img/zoom-out-1.png";
Browser.js:630: zoomIn.src = browserRoot + "/static/img/zoom-in-1.png";
Browser.js:643: bigZoomIn.src = browserRoot + "/static/img/zoom-in-2.png";
ImageTrackRenderer.pm:64: my $self = { 'datadir' => "/static/data",
genome.css:242:.plus-feature { background-image: url('/static/img/plus-chevron3.png'); }
genome.css:244:.minus-feature { background-image: url('/static/img/minus- chevron3.png'); }
genome.css:265:.plus-feature2 { background-image: url('/static/img/plus-herringbone16.png'); }
genome.css:267:.minus-feature2 { background-image: url('/static/img/minus-herringbone16.png'); }
genome.css:288:.plus-feature3 { background-image: url('/static/img/plus-chevron.png'); }
genome.css:290:.minus-feature3 { background-image: url('/static/img/minus-chevron.png'); }
genome.css:311:.plus-feature4 { background-image: url('/static/img/plus-pacman.png'); }
genome.css:313:.minus-feature4 { background-image: url('/static/img/minus-pacman.png'); }
genome.css:334:.plus-feature5 { background-image: url('/static/img/plus-chevron2.png'); }
genome.css:336:.minus-feature5 { background-image: url('/static/img/minus-chevron2.png'); }
genome.css:393: background-image: url('/static/img/dblhelix-red.png');
genome.css:413: background-image: url('/static/img/helix3-green.png');
genome.css:432: background-image: url('/static/img/loops.png');
genome.css:446:.plus-cds0 { background-image: url('/static/img/plus-cds0.png'); }
genome.css:447:.plus-cds1 { background-image: url('/static/img/plus-cds1.png'); }
genome.css:448:.plus-cds2 { background-image: url('/static/img/plus-cds2.png'); }
genome.css:449:.minus-cds0 { background-image: url('/static/img/minus-cds0.png'); }
genome.css:450:.minus-cds1 { background-image: url('/static/img/minus-cds1.png'); }
genome.css:451:.minus-cds2 { background-image: url('/static/img/minus-cds2.png'); }
genome.css:582: background-image: url('/static/img/plus-transcript-head.png');
genome.css:598: background-image: url('/static/img/minus-transcript-head.png');
genome.css:607: background-image: url('/static/img/cds.png');
*** I probably missed at least a few paths somewhere, but I'll show you how to find them later.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JBrowse</title>
<link rel="stylesheet" type="text/css" href="[% c.uri_for('/static/jslib/dijit/themes/tundra/tundra.css') %]"></link>
<link rel="stylesheet" type="text/css" href="[% c.uri_for('/static/jslib/dojo/resources/dojo.css') %]"></link>
<link rel="stylesheet" type="text/css" href="[% c.uri_for('/static/css/genome.css') %]"></link>
<style type="text/css">
html, body { height: 100%; width: 100%; padding: 0; border: 0; }
</style>
<script type="text/javascript" src="[% c.uri_for('/static/jslib/dojo/dojo.js') %]" djConfig="isDebug: false"></script>
<script type="text/javascript" src="[% c.uri_for('/static/jslib/dojo/jbrowse_dojo.js') %]" ></script>
<!-- js_source_files -->
<!-- the files between the "js_source_files" comments get replaced
when the JS gets minified (see the minification rule in the Makefile) -->
<script type="text/javascript" src="[% c.uri_for('/static/js/Browser.js') %]"></script>
<script type="text/javascript" src="[% c.uri_for('/static/js/Util.js') %]"></script>
<script type="text/javascript" src="[% c.uri_for('/static/js/NCList.js') %]"></script>
<script type="text/javascript" src="[% c.uri_for('/static/js/LazyPatricia.js') %]"></script>
<script type="text/javascript" src="[% c.uri_for('/static/js/LazyArray.js') %]"></script>
<script type="text/javascript" src="[% c.uri_for('/static/js/Track.js') %]"></script>
<script type="text/javascript" src="[% c.uri_for('/static/js/SequenceTrack.js') %]"></script>
<script type="text/javascript" src="[% c.uri_for('/static/js/Layout.js') %]"></script>
<script type="text/javascript" src="[% c.uri_for('/static/js/FeatureTrack.js') %]"></script>
<script type="text/javascript" src="[% c.uri_for('/static/js/UITracks.js') %]"></script>
<script type="text/javascript" src="[% c.uri_for('/static/js/ImageTrack.js') %]"></script>
<script type="text/javascript" src="[% c.uri_for('/static/js/GenomeView.js') %]"></script>
<!-- js_source_files -->
<script type="text/javascript" src="[% c.uri_for('/static/data/track_info/refSeqs.js') %]"></script>
<script type="text/javascript" src="[% c.uri_for('/static/data/track_info/trackInfo.js') %]"></script>
<script type="text/javascript">
/* <![CDATA[ */
var queryParams = dojo.queryToObject(window.location.search.slice(1));
var bookmarkCallback = function(brwsr) {
return window.location.protocol
+ "//" + window.location.host
+ window.location.pathname
+ "?loc=" + brwsr.visibleRegion()
+ "&tracks=" + brwsr.visibleTracks();
}
var b = new Browser({
datalibs: "ucsc,ucsc_test",
containerID: "GenomeBrowser",
refSeqs: refSeqs,
trackData: trackInfo,
defaultTracks: "DNA,gene,mRNA,noncodingRNA",
location: queryParams.loc,
tracks: queryParams.tracks,
bookmark: bookmarkCallback,
dataRoot: "/static/data/"
});
/* ]]> */
</script>
</head>
<body>
</div id="GenomeBrowser" style="height: 100%; width: 100%; padding: 0; border: 0;>
</div>
</body>
</html>
cd pathto/JBrowse
script/jbrowse_create.pl controller Home
sub jbrowse :Path('jbrowse') :Args(0) {
my(\(self, \)c) = @_;
$c->stash(template => 'home/index.tt2');
}
data
-track_info
-ucsc_ref (our reference data)
-data_study1
-data_study2
Where ucsc_ref data is visible to everyone and everything else is based upon login.
trackInfo =
[
{
"url" : "ucsc/tracks/{refseq}/cytoBand/trackData.json",
"type" : "FeatureTrack",
"label" : "newcytoBand",
"key" : "New Chromosome Band"
},
{
"url" : "ucsc/tracks/{refseq}/omimGene/trackData.json",
"type" : "FeatureTrack",
"label" : "newomimGene",
"key" : "New OMIM Genes"
},
{
"url" : "ucsc/tracks/{refseq}/knownGene/trackData.json",
"type" : "FeatureTrack",
"label" : "newknownGene",
"key" : "New UCSC Genes"
},
{
"url" : "ucsc/tracks/{refseq}/cytoBandIdeo/trackData.json",
"label" : "newcytoBandIdeo",
"type" : "FeatureTrack",
"key" : "New Chromosome Band (Ideogram)"
},
{
"url" : "ucsc_test/tracks/{refseq}/cytoBand/trackData.json",
"type" : "FeatureTrack",
"label" : "cytoBand",
"key" : "Chromosome Band"
},
{
"url" : "ucsc_test/tracks/{refseq}/omimGene/trackData.json",
"type" : "FeatureTrack",
"label" : "omimGene",
"key" : "OMIM Genes"
},
{
"url" : "ucsc_test/tracks/{refseq}/knownGene/trackData.json",
"type" : "FeatureTrack",
"label" : "knownGene",
"key" : "ucsc_test Genes"
},
{
"url" : "ucsc_test/tracks/{refseq}/cytoBandIdeo/trackData.json",
"label" : "cytoBandIdeo",
"type" : "FeatureTrack",
"key" : "Chromosome Band (Ideogram)"
}
]
//Old
this.names = new LazyTrie(
dataRoot + "names/lazy-",
/dataRoot + "names/root.json"
);
To match this*****:
//New
for (var i = 0; i < datalibs.length; i++) {
this.names += new LazyTrie(
dataRoot + datalibs[i] + "/names/lazy-",
dataRoot + datalibs[i] + "/names/root.json"
);
}
**** I am not at all familiar with javascript, and I haven't tested it to my satisfaction yet. If this is not the correct way to do things and it blows up please let me know.
]]>
- Let's run the application!
- cd into your JBrowse top directory and run script/jbrowse_server.pl -r
- go to localhost:3000/home/jbrowse and watch the magic unfold!
- I would suggest also opening up your javascript debugger, (Ctrl+Shift+j for me in chromium) while looking at tracks to make sure everything comes up correctly. I'm sure I missed a couple or paths/urls, but you get the general idea.