decipher-genomics / genoverse Goto Github PK

Hello,

I would like implementing your genome browser in my web site (made with LARAVEL).
The url used is a script which perform a sql query to get data and return results as json.
I used the parseData function to create feature with start, end and id.
The problem is I'm not able to display the track in the browser, more exactly the track is created but it is empty. The Gene and dbSNP tracks are OK.

Could you help me please ?

Main script :

var genoverseConfig = {
container : '#genoverse',
width    : 1000,
genome    : 'grch37',
plugins   : [ 'controlPanel', 'karyotype', 'trackControls', 'resizer', 'focusRegion', 'fullscreen', 'tooltips',     'fileDrop' ],
   tracks    : [
    Genoverse.Track.Scalebar,
   Genoverse.Track.extend({
        name       : 'Sequence',
        controller : Genoverse.Track.Controller.Sequence,
       model      : Genoverse.Track.Model.Sequence.Ensembl,
        view       : Genoverse.Track.View.Sequence,
        100000     : false,
        resizable  : 'auto'
      }),
 Genoverse.Track.Chromosome,
 Genoverse.Track.Gene,
 Genoverse.Track.test,
 Genoverse.Track.dbSNP
  ]
};
 document.addEventListener('DOMContentLoaded', function () { window.genoverse = new
 Genoverse(genoverseConfig);
 });

js of my custom track.

 Genoverse.Track.test = Genoverse.Track.extend({
  id               : 'test',
   name             : 'test',
   info             : 'show cnv from test databases',
   url              : 'http://localhost:8888/select_cnv_browser',
   height : 55,
   bump: true,
   label : true,
   model:Genoverse.Track.Model.extend({
     parseData : function(data){
       for (var i = 0; i < data.length; i++) {
         var feature = data[i];
         var color = '#FFFFFF';
         if (feature["chromosome"] === this.browser.chr){
           // console.log(feature);
           this.insertFeature({
             start           : feature["hg19_start"],
             end             : feature["hg19_end"],
             id              : feature["cnv_id"],
             label           : feature["cnv_id"],
             originalFeature : feature
          });
         }
       }
     }
   })
 });

Hello,

I try to add vcf track by drag-n-drop on genoverse website, but track just repeats reference sequence and does not display real SNPs from my vcf. Also, when I click on any SNP, console returns Cannot read property '0' of undefined. Can you check, if there is something wrong with vcf parser?

Tried this vcf from ucsc: https://genome.ucsc.edu/goldenPath/help/examples/vcfExampleTwo.vcf

Sequence variation
to be able to show variation of the second copy of the chromosome

Hi,

I noticed that the dbSNP track (Genoverse.Track.dbSNP) is showing SNPs in exons but calling them intronic snps. This is evident on the sample setup you maintain on genoverse.org. I think the problem is that you’ve hard-coded the ensembl GRCh37 build into the URL called by Genovese.Track.dbSNP.

I suspect that this is a very easy fix, however, it might be a problem for other tracks that I haven’t seen yet. It is also very difficult to identify since we sort of trust that the features that we say are on a track really are there!

I want to use the genoverte plug-in. I feel great, but I can't find the API file. There are only simple examples. What do I need to do if I want to use full functionality?

Scalebar numbers appear jammed at some zoom levels when width is 800 or less

Hi,

We are using Genoverse for a very important project and part of the requirements is to display a track for Coverage. But I don't see a clue how to implement this. Does Genoverse have a way to display this type of track? Is it supported?

I tried to adapt RNAcentral track to new Genoverse and it mostly works, except by the fact that exon-intron structure is lost.

Here's my parseData function, which previously worked. I added subFeatures attribute to parent transcripts and started adding child exons to subFeatures array.

    GenoverseUtils.prototype.RNAcentralParseData = function(data) {
        for (i = 0; i < data.length; i++) {
            var feature = data[i];

            // prepare a label
            var label = feature.description || feature.external_name;
            if (label.length > 50) { label = label.substr(0, 47) + "..."; }
            if (feature.strand == 1) { label = label + " >"; }
            else if (feature.strand == -1) { label = "< " + label; }

            if (feature.feature_type === 'transcript' && !this.featuresById[feature.ID]) {
                feature.id    = feature.ID;
                feature.label = label; // used to be feature.external_name
                feature.exons = {};
                feature.subFeatures = [];
                feature.cds   = [];
                feature.chr   = feature.seq_region_name;

                this.insertFeature(feature);
            }
            else if (feature.feature_type === 'exon' && this.featuresById[feature.Parent]) {
                feature.id  = feature.ID;
                feature.chr = feature.seq_region_name;

                if (!this.featuresById[feature.Parent].exons[feature.id]) {
                    this.featuresById[feature.Parent].subFeatures.push(feature);
                    this.featuresById[feature.Parent].exons[feature.id] = feature;
                }
            }
        }
    };

I'm using model="Genoverse.Track.Model.Transcript.Ensembl" and view="Genoverse.Track.View.Transcript.Ensembl".

Hi,

Is it possible to make a track available in the "Tracks" menu but hide it by default ?
i.e. I want to have the dbSNP track available in the menu but I would like this track to be hidden when I load the Genoverse widget.

Thanks,

Laurent

Hello,

Just noticed that "Sequence" track shows GRCH38 genome sequence even if I switch to GRCH37 in index.html options:

<script type="text/javascript" src="js/genoverse.combined.js">
      {
        container : '#genoverse', // Where to inject Genoverse (css/jQuery selector)
        // If no genome supplied, it must have at least chromosomeSize, e.g.:
        // chromosomeSize : 249250621, // chromosome 1, human
        genome    : 'grch37', // see js/genomes/

May be it will be useful to choose genome version in Genoverse.Track.Model.Sequence.Ensembl url like this:

Genoverse.Track.Model.Sequence.Ensembl = Genoverse.Track.Model.Sequence.extend({
  url              : '//rest.ensembl.org/sequence/region/human/__CHR__:__START__-__END__?content-type=text/plain;coord_system_version=GRCh37', // Example url
  dataRequestLimit : 10000000 // As per e! REST API restrictions
});

Thank you!

Hi, I'm using Genoverse release 2.4.1 (commit: b46d566)

I experience the following error:

jQuery.Deferred exception: Cannot read property 'start' of undefined TypeError: Cannot read property 'start' of undefined

which happens in makeFirstImage() function:

      var buffer = this.prop('dataBuffer');

      this.model.getData(start - buffer.start - length, end + buffer.end + length).done(makeImages).fail(function (e) {
        controller.showError(e);
      });

Seems, like dataBuffer property is undefined. I'm initializing Genoverse as follows:

new Genoverse({
    container: element.find('#genoverse'),
    chr: scope.chromosome,
    species: scope.genome.species,
    showUrlCoords: false, // do not show genomic coordinates in the url
    plugins: ['controlPanel', 'resizer', 'fileDrop'],
         tracks: [
             Genoverse.Track.Scalebar,
             Genoverse.Track.extend({
                 name: 'Sequence',
                 model: configureGenoverseModel('ensemblSequence'),
                 view: Genoverse.Track.View.Sequence,
                 controller: Genoverse.Track.Controller.Sequence,
                 resizable: 'auto',
                 100000: false,
             }),
             Genoverse.Track.extend({
                 name: 'Genes',
                 info: 'Ensembl API genes',
                 labels: true,
                 model: configureGenoverseModel('ensemblGene'),
                 view: Genoverse.Track.View.Gene.Ensembl,
                 controller: Genoverse.Track.Controller.Ensembl,
              }),
              Genoverse.Track.extend({
                  name: 'Transcripts',
                  info: 'Ensembl API transcripts',
                  labels: true,
                  model: configureGenoverseModel('ensemblTranscript'),
                  view: Genoverse.Track.View.Transcript.Ensembl,
                  controller: Genoverse.Track.Controller.Ensembl,
              }),
              Genoverse.Track.extend({
                  name: 'RNAcentral',
                  id: 'RNAcentral',
                  info: 'Unique RNAcentral Sequences',
                  labels: true,
                  model: configureGenoverseModel('rnacentral'),
                  view: Genoverse.Track.View.Transcript.Ensembl,
                  controller: Genoverse.Track.Controller.Ensembl,
              })
          ]
      })

where scope.genome.species is "Homo Sapiens", scope.chromosome is "X", scope.start and scope.stop are reasonable. I'm trying to create an Angular directive, wrapping your code.

Why would that happen?

If I go here:
http://genoverse.org/
and click on a feature, the label looks like this:

label:  ENST00000421002
exons:  [object Object],[object Object],[object Object],[object Object]
position:   [object Object]

i.e. looks like the position objects for the exons and position fields aren't being fully 'un-wrapped' to start/end coordinates.

Hello Simon. I´m new to Javascript and programming in general but have been working for several weeks on Genoverse trying to add a read coverage track. This issue has a similar one from 2016 but in August 2017 you added WIG and BIGWIG support to Genoverse so I believe things have changed. The WIG display is spot on what we need, I just added some code so it could discard headers and read in several times "fixedStep..." in case they were any gaps in the WIG, as it only reads this statement at the start of the file.

I was making WIGs from small BAMs to test it all out, but everything came crashing down when my "employers" asked me to load up a transcript.bam of a whole chromosome. To start off they are not budging to any explanations that they can just as easily make a genomic bam adding another option to their command (they are using rsem-calculate-expression which by default can give either a transcript or a genomic bam, but they just want the transcript bam now, unless I convince them otherwise) so I must work with that. The transcript start and end positions would be extracted from an accompanying gff3 supposedly.

I also observed you have coping mechanisms for large files (bam works with a bai and dalliance, vcf works with tbi and tabix) but it doesn´t seem there is such a thing for the WIGs right?

Therefore my questions are:
1- Any tips on how to work with a large WIG file?
2- Any tips on sending data from one filereader to another filereader (or something similar)?

PD: Sorry for the rant, this public version of Genoverse is very well organised but if I find out anything you could also find useful I´ll share if you want

When clicking on the Karyotype at the top, the sequence track disappears and won't reappear until the reset focus button is clicked.

I'm observing the following incorrect behaviour with Genoverse.

I initialise Genoverse with 3 tracks, one of them is loading very slowly.

After that user might opt to destroy the browser (I call browser.destroy()).

If I destroy Genoverse before all the track data were loaded and their respective images were rendered by makeImage()/makeFirstImage(), 5 seconds after destruction of the browser, the asynchronous callback of getData() fires.

This is happening because of the following async call stack:

loadGenome() ->
$when(Genoverse.ready, this.loadGenome(), this.loadPlugins()) ->
init() ->
setRange() ->
setScale() ->
onTracks("makeFirstImage") ->
makeFirstImage() ->
makeImages() ->
makeImage() ->
getData()

getData() creates a deferred, which fires 5 seconds after destruction of the browser. But all deferreds on tracks are supposed to be cleared by browser.destroy()! And indeed the list of deferreds on all tracks is empty after I call browser.destroy():

console.log(ctrl.browser.tracks.reduce((accumulator, track) => return accumulator.concat(track.controller.deferreds), []));
browser.destroy();
console.log(ctrl.browser.tracks.reduce((accumulator, track) => return accumulator.concat(track.controller.deferreds), []));

returns

(12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
[]

I've been scratching my head for 3 days, I guess, I need help.

You can observe this behaviour here, if you try to switch species (I destroy the old instance of browser and create a new one upon species switch): https://test.rnacentral.org/genome-browser.

Swipe to scroll, pinch to zoom.
Also sort out (disable?) tooltips that appear on hover.

Any plans on developing a Scatter Plot Track?

Thanks!

Matt

I am trying to change the SNV display highlights to histogram form. Any help would be appreciated. Thanks!

I'm trying to create highlights either in a declarative way by passing highlights option to Genoverse constructor:

      browser = new Genoverse({
        container : '#genoverse', // Where to inject Genoverse (css/jQuery selector/DOM element)
        // If no genome supplied, it must have at least chromosomeSize, e.g.:
        // chromosomeSize : 249250621, // chromosome 1, human
        genome    : 'grch38', // see js/genomes/
        chr       : 13,
        start     : 32296945,
        end       : 32370557,
        plugins   : [ 'controlPanel', 'karyotype', 'trackControls', 'resizer', 'focusRegion', 'fullscreen', 'tooltips', 'fileDrop' ],
        // !!!!!!!!!!!!!!!!!!!!!!!!!!!! highlights !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        highlights: [{start: 32296945, end: 32370557, label: "highlight", removable: true}],
       // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        tracks    : [
          Genoverse.Track.Scalebar,
          Genoverse.Track.extend({
            name       : 'Sequence',
            controller : Genoverse.Track.Controller.Sequence,
            model      : Genoverse.Track.Model.Sequence.Ensembl,
            view       : Genoverse.Track.View.Sequence,
            100000     : false,
            resizable  : 'auto'
          }),
          Genoverse.Track.Gene,
          Genoverse.Track.extend({
            name            : 'Regulatory Features',
            url             : 'http://rest.ensembl.org/overlap/region/human/__CHR__:__START__-__END__?feature=regulatory;content-type=application/json',
            resizable       : 'auto',
            model           : Genoverse.Track.Model.extend({ dataRequestLimit : 5000000 }),
            setFeatureColor : function (f) { f.color = '#AAA'; }
          }),
          Genoverse.Track.dbSNP
        ]
      });

or invoking

browser.addHighlight({start: 32296945, end: 32370557, label: "highlight", removable: true})

All in vain, nothing is displayed.

At the same time, if I try to go to mouse drag action mode to select a region and then press "highlight" it creates some highlights. But those highlights are apparently different from highlights in menu. In the bottom right corner of the screen I have console open and it still shows my declarative highlight.

I'm on the tip of my pull request.

Thank you!

How does one initialise the chromosome track after the karyotype plugin rewrite (07b1a74)?

I tried something like:

var genoverseConfig = {
  container     : '#genoverse',
  chr: 7,
  genome: 'grch37',
  plugins       : [ 'controlPanel', 'karyotype'],
  tracks        : [
    Genoverse.Track.Chromosome,
    Genoverse.Track.Scalebar,
    // more code

but the chromosome is not rendered properly:

Any guidance will be greatly appreciated!

Downloaded Genoverse and running on my computer I get the above error, do you know why this is happened. (in Ubuntu and Windows)
The error is that does not display the data in the sequences or genes
Thank you
Juan

Looks like website is broken

To begin with - to have list of available tracks for user to choose from

Why does URL perform a location query by first visiting the last queried location and then sending a request to visit the current location?

Just realised that intializePlugin() function has a typo error in its name - it should be initialize.

Is it possible to parse data from a database? Do you have any examples or tips on how to do that?

"close" button gets rendered outside of the screen. Scaling won't help.

UCSC released a new feature on the 4th March called *Genome Browser Highlight". The idea is you can drag select a region (holding shift & draw a region) and then choose to highlight it rather than zooming in. The highlight persists on multiple levels of zoom (if you zoom into the highlighted region then everything is highlighted).

They also support highlighting of a region based on a feature (it makes finding co-located features with a gene/transcript a lot easier).

Native BigFile support such as:

• BigBed
• BigWig
• Tabix indexed files (block gzipped)
  • This includes VCF but could be rolled out to other tab delimited formats

It would be great if genoverse could support continuous data sets such as those found in wig files. Ideally supporting:

• line drawing
• bar charts

I would really like to see support for the following (but they can be pushed into separate issues once the basic support is there):

• configurable axis/cut-offs
• set a cut-off but just draw a line across to highlight the outliers
• log rendering
• support more than 1 wiggle data set in a single track

How to configure local BED/BAM file as data source?Is there a case?

Trix is a free text search engine (http://genome.ucsc.edu/goldenPath/help/trix.html) developed by UCSC allowing you to search for values within a track and returning an ID in which that value was found. Their main use-case is in TrackHubs where a track can have a trix index attached using the searchTrix parameter. Supporting this and allowing searching of the trix index from Genoverse would be really cool.

BigTab is an attribute format from UCSC not yet released but should hold IDs to attribute lists. Once we have more information I will feed this back to you

I have seen genoverse browser support the bigbed file as follows:

But when I try to drag .bb file,It doesn't work,so I change the suffix as .bigbed,the title shows,but data missing.

Here is the file link clinvarCnv.bb

• beta.rest.ensembl.org → rest.ensembl.org
• The /feature endpoint needs to be renamed to /overlap

More details about migration:
https://github.com/Ensembl/ensembl-rest/wiki/1.0-To-2.0-Migration

Currently Genoverse initialisation is highly asynchronous, and as far as I know there is no way of detecting when a newly created Genoverse instance is ready for further instructions like browser.zoomOut() or browser.moveTo().

This would be particularly useful when a Genoverse browser is created dynamically or when a browser needs to be controlled by some external UI elements.

Any advice on how to manage situations like this?

Please, add width: auto !important; line here:

https://github.com/wtsi-web/Genoverse/blob/gh-pages/css/controlPanel.css#L4

Sorry, my repo is forked from simonbrent/Genoverse, so when I create a pull-request to wtsi-web/Genoverse, it carries your edits of documentation from simonbrent/Genoverse with it.
So, I'm posting this as an issue.

Thanks a lot, again!

First of all, thank you for developing this useful tool. I also like its UI.
I have a genetic disease so I am interested in genome sequence viewers. Genoverse is the best IMHO.
It would be very effective if we could add a gene search box and local database support.

I set up a local database via https://github.com/openvax/pyensembl
But I don't know how to integrate it into Genoverse, or even if it's possible?

When Genoverse tells you it has suppressed features there is no obvious way to resize the height of the track to view these features. It would be really nice if there was a Click here to resize link or something similar on that message. I know this is replicating functionality already present on the image if you click on the track height resize widget but it would make it more usable.

I'm currently integrating Genoverse into a genomic data site. So far I'm really liking it.

I made a chromosome menu, which I want to use to change the visible chromosome dynamically, i.e. without reloading the whole page. I did try hacking around with Genoverse.init() and a few other methods, to try and force it to initialise with an altered "chr" parameter in the config, but just ended up with javascript errors. Adding a method to easily change the chromosome would be nice. Or just point me in the right direction. :) Thank you, Matt

I have my own genomes features in a json file, (shows below): I put the file in the path -- '/src/js/genomes' of Genoverse and named it 'mvp.js', and i use the follwing code, but it didn't work.

Need your help! sir!

or can someone just tell me how i can use only my own genome feature in the web?

the genoverse script code:

<script> 
new Genoverse({ 
container: '#genoverse', 
genome: 'mvp', 
plugins: ['controlPanel', ['karyotype', { showAssembly: true }], 'trackControls', 'resizer', 'focusRegion', 'fullscreen', 'tooltips', 'fileDrop'], tracks: [ 
['Scaleline', { strand: false }], 
'Scalebar', { name: 'Sequence', controller: 'Sequence', model: 'Sequence.Ensembl', view: 'Sequence', 100000: false, resizable: 'auto', }, 'Gene', { 
name: 'my_gene Features', 
data: '../public/Genoverse_files/mvp.js',    //also copied one here
resizable: 'auto',
 model: { dataRequestLimit: 5000000 }, 
setFeatureColor: function (f) { f.color = '#AAA'; } }, ] });
 </script>

the content of 'mvp.js' just like this:
[{
"logic_name": "gene",
"feature_type": "gene",
"end": 67859,
"biotype": "protein_coding",
"gene_acc": "SG0050.p01",
"protein_acc": "BAE73325.1",
"strand": 0,
"id": "flagellum-specific ATP synthase FliI (SG0050)",
"start": 66483
}, {
"logic_name": "gene",
"feature_type": "gene",
"end": 68615,
"biotype": "protein_coding",
"gene_acc": "SGP1_0042.p01",
"protein_acc": "BAE75749.1",
"strand": 0,
"id": "achromobactin biosynthetic and transport gene yhcA (SGP1_0042)",
"start": 67227
}
...........
]

Hi everybody.

first thanks for this great browser. It is the best for me.
I would like to put tracks as available and to not displayed its in my browser.
How can I do that ?

Thanks

If you have genoverse on a page, running at the same time with d3, jquery-ui in genoverse will break d3 mouseup events - e.g. your d3 brushes will stop emitting brushend event, your selections will never be closed and zooms won't work.

To reproduce, try a page with both Genoverse and some d3 plugin (such as feature-viewer or fornac) and with d3 only. Open Chrome Developer Tools, go to Event Listener Breakpoints and try settings a breakpoint to mouseup - you'll find out that d3's brushend event is fired when Genoverse is not displayed, but is not fired, when Genoverse is displayed.

I have my own genomes features in a json file, (shows below): I put the file in the path -- '/src/js/genomes' of Genoverse and named it 'mvp.js', and i use the follwing code, but it didn't work.

Need your help! sir!

can someone just tell me how i can use my own genome feature in the web?

the genoverse script code:

"""

""""

the content of 'mvp.js' just like this:
[{
"logic_name": "gene",
"feature_type": "gene",
"end": 67859,
"biotype": "protein_coding",
"gene_acc": "SG0050.p01",
"protein_acc": "BAE73325.1",
"strand": 0,
"id": "flagellum-specific ATP synthase FliI (SG0050)",
"start": 66483
}, {
"logic_name": "gene",
"feature_type": "gene",
"end": 68615,
"biotype": "protein_coding",
"gene_acc": "SGP1_0042.p01",
"protein_acc": "BAE75749.1",
"strand": 0,
"id": "achromobactin biosynthetic and transport gene yhcA (SGP1_0042)",
"start": 67227
}
...........
]

Go to http://genoverse.org/?r=1:322582-325918

Drag sequence to below gene. The label moves but the track doesn't

Refresh

Drag gene to above sequence. Nothing happens.

I suspect it's something to do with containment - I had to fix a similar issue with Ensembl.

e.g.
&strand=1&renderer=transcript_label

this breaks some das sources

I have my own genomes features in a json file, (shows below): I put the file in the path -- '/src/js/genomes' of Genoverse and named it 'mvp.js', and i use the follwing code, but it didn't work.

Need your help! sir!

can someone just tell me how i can use my own genome feature in the web?

the genoverse script code:

"""

""""

the content of 'mvp.js' just like this:
[{
"logic_name": "gene",
"feature_type": "gene",
"end": 67859,
"biotype": "protein_coding",
"gene_acc": "SG0050.p01",
"protein_acc": "BAE73325.1",
"strand": 0,
"id": "flagellum-specific ATP synthase FliI (SG0050)",
"start": 66483
}, {
"logic_name": "gene",
"feature_type": "gene",
"end": 68615,
"biotype": "protein_coding",
"gene_acc": "SGP1_0042.p01",
"protein_acc": "BAE75749.1",
"strand": 0,
"id": "achromobactin biosynthetic and transport gene yhcA (SGP1_0042)",
"start": 67227
}
...........
]

Unfortunately, Genoverse bundle conflicts with other instances of jquery (so can do other libraries in Genoverse bundle) that I have in the project. Can you do a version of bundle with Genoverse and its modules only and specify required libraries in npm dependencies section?

I saw some Webpack files in newer version of Genoverse. I wanted to mention that Webpack is not suitable for libraries distribution - it's meant for website distribution. For bundling libraries, they usually use some npm script/gulp/grunt chain of commands. For libraries they also recommend Rollup, especially, if it's in ECMA6.

Thanks and cheers!