README
CTTV Target Genome Browser
Minimal genome browser built for the CTTV web application.
Installation
From Git
git clone https://github.com/CTTV/targetGenomeBrowser
cd targetGenomeBrowser
npm install
npm build-browser
From npm
npm install cttv.genome
Usage
cttvGenomeBrowser
is based on tnt.genome, a library for making minimal genome browsers and displaying genome annotation. Check its documentation for more options.
Example of usage:
// Define an instance of tnt.genome
var gB = tnt.board.genome()
.species("human")
.gene("ENSG00000157764")
.width(950);
// Define and instance of cttv.targetGenomeBrowser
var cttvGB = targetGenomeBrowser()
.show_snps(false)
.show_nav(true);
// Start the genome browser using the tnt.genome in the given div element
cttvGB (gB, document.getElementById("genomeBrowser"));
More examples available in the examples
folder
API
cttvGenomeBrowser
exposes the following methods:
show_nav
If the buttons-based navigation is included in the display. Defaults to true.
var cttvGB = targetGenomeBrowser()
.show_nav(false);
show_links
If the link to the Ensembl Genome browser in included in the display. Defaults to true.
var cttvGB = targetGenomeBrowser()
.show_links(false);
show_snps
If the SNPs tracks are displayed. Defaults to true.
var cttvGB = targetGenomeBrowser()
.show_snps(false);
track
Returns a given track by name. The following names are available:
Name | Track |
---|---|
gene | The Gene / Transcript track |
common_snps | The track containing SNPs associating the gene to common diseases |
rare_snps | The track containing SNPs associating the gene to reare diseases |
var cttvGB = targetGenomeBrowser();
var geneTrack = cttvGB.track("gene");
geneTrack.display().on("click", function (gene) {
var elem = this;
var tooltip_obj = function (g) {
var obj = {};
obj.header = (g.display_name || g.external_name) + " (" + g.id + ")";
obj.rows = [];
obj.rows.push( {
"label" : "Biotype",
"value" : g.biotype
});
obj.rows.push( {
"label" : "Description",
"value" : g.description || g.gene.description
});
return obj;
}
tnt.tooltip.table()
.call(elem, tooltip_obj(gene));
});
If any change is made to the track after the plug-in has been initialised (see tnt.genome and tnt.board for examples), the visualisation needs to be re-started using the start
method
start
Re-start the genome browser after making any change. For example, the following snippet change the gene to be displayed as transcripts when a gene is clicked:
gBTheme(gB, document.getElementById("genomeBrowser"));
var geneTrack = gBTheme.track("gene");
geneTrack.display().on("click", function (gene) {
if (!gene.gene) { // It is not a transcript
gB.gene (gene.id);
gBTheme.start();
}
});
Feedback
Please, send any comments, bug reports or features request to support (AT) targetvalidation.org