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