splice junction track

[bw2]

Initial implementation of a scrollable genome-wide sashimi track which is actually a type:'merged' track that combines 2 tracks: a type:'wig' track that renders the coverage islands, and a newly-implemented type:'junctions' track which reads intervals from a .bed file and renders them as splice junctions.

The .bigWig file for wig track can be created from a .bam file using a tool like bam2coverage

An indexed junctions .bed.gz file can be created from splice junction calls (such as those generated by the STAR aligner in the *.SJ.out.tab file) by selecting chrom, start, end, label, spanning-read-count, and strand columns into a .bed.gz file and then tabix'ing it:

gunzip -c mysample.SJ.out.tab.gz | awk -v OFS='\t' '{ if($7 > 0) { print }}' | awk -v OFS='\t' '{ print $1, $2 - 1, $3, $7 + $8, $7, (($4 != 2) ? "+" : "-") }' | bgzip > mysample.SJ.out.bed.gz
tabix mysample.SJ.out.bed.gz

Then, to create a single splice junction track in igv.js:

var tracks = [{
            type: 'merged',
            name: prefix,
            height: 200,
            tracks: [
              {
                type: 'wig',
                format: "bigwig",
                url: `gs://my-bucket/mysample.bigWig`,
              },
              {
                type: 'junctions',
                format: 'bed',
                url: `gs://my-bucket/mysample.SJ.out.bed.gz`,
                indexURL: `gs://my-bucket/mysample.SJ.out.bed.gz.tbi`,
              },
            ],
          }]

var options = {
            genome: 'hg38',
            locus: 'chr1:3,857,546-3,860,105',
            tracks: tracks,
        };

var igvDiv = document.getElementById("igv-div");
igv.createBrowser(igvDiv, options) 

---

Known Issues:

• 'junctions' track height probably handled incorrectly - custom height setting currently only works at igv creation time. Adjusting height from context menu has no effect.
• need better y-position when rendering read count number so that it's lower down & closer to the splice junction curve.

Possible future features:

• add support for left-click info popup to MergedTrack (show info about splice junctions or coverage depending on click location).
• add support for right-click context menu
  • implement color-by options: color junctions by strand or confidence level (eg. read support, or max overhang)
  • show/hide junctions or coverage within a track
• expose settable options for filtering junctions based on level of support (number of reads, max overhang)

---

Screenshot

[bw2]

I saw a lot of the tracks do IGVGraphics.fillRect(options.context, 0, options.pixelTop, options.pixelWidth, options.pixelHeight, {'fillStyle': "rgb(255, 255, 255)"});
before rendering. I added it here, but then commented it out because everything seemed to work without this. Should I reenable it?

[jrobinso]

Not sure myself, I'm just now pivoting back to igv.js (from IGV) and will give this a good look today and tomorrow.

[jrobinso]

@bw2 I can't access the test data for the example, it needs a billable account. Could you put them somewhere public or create a small test case and zip and attach it here? Thanks.

[bw2]

Yes, let me create a few small test data files and post them here.

[bw2]

These are the test files referenced by examples/spliceJunctionTrack.html
junctions_test_data.tar.gz

[bw2]

I updated the files to use gffTags and added track configs for filtering and drawing based on the gffTag values. I tried adding popupData, but got stuck because MergedTrack.getFeatures returns an array of featureLists but the findOverlaps code expects a featureList. I can flatten the featureList to get it to "work", but not sure where best to do that.

[jrobinso]

@bw2 I'm not sure either offhand. When you feel like you are finished other than popup text let me know and I will pull and look into popup data. This probably needs something new for merged tracks, as in merged tracks in general not just this specific case.

[bw2]

That makes sense. I'm also not sure how to detect clicks on bezier curves.
I'm done with all changes if you have time to take a look.

[jrobinso]

@bw2 Hit detection on bezier curves is tricky. If you look at the sashimi plot repo you'll see what I did. Basically I create a canvas (not displayed) and draw a new closed path surrounding the original curves, using info stored on the feature itself when they are first drawn, IIRC. Then there is a canvas function to detect hits on a path. This took a bit of trial and error, but it works.

I'm leaving for vacation tomorrow (family), you might not hear back until I return.

[bw2]

Oh, I see, that's neat. The junctions track will need to save additional values that it currently computes on render.
The only other issue I'm aware of in my current code are is if I use the gear setting to increase track height, it correctly adjusts the wig track, but the splice junctions height doesn't get adjusted.

[bw2]

Have a good vacation!

[jrobinso]

Probably another flaw in the meged tracks implementation, independent of this. I will take a good fresh look at that.

…

On Mon, Nov 25, 2019 at 11:58 AM bw2 ***@***.***> wrote: Oh, I see, that's neat. The junctions track will need to save additional values that it currently computes on render. The only other issue I'm aware of in my current code are is if I use the gear setting to increase track height, it correctly adjusts the wig track, but the splice junctions height doesn't get adjusted. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1019?email_source=notifications&email_token=AAHD2HCFS5VZSGZMOJDAPMLQVQU7BA5CNFSM4JMQCBG2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFDTXLI#issuecomment-558316461>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHD2HD6YZYI55WWOMBBY4LQVQU7BANCNFSM4JMQCBGQ> .

[bw2]

this is a simple ui for looking at the example tracks and track configs
https://bw2.github.io/rnaseq-viewer/#locus=chr15%3A92%2C922%2C831-93%2C020%2C881&tracks=sample%20B%2Csample%20A%2Csamples%20A%20%2B%20B

[jrobinso]

@bw2 I like the UI control for an application, not sure where it fits in the igv.js component but we'll work on that. Could you make the example files in dev/spliceJunctions.html public, or create another example with public files? I get 403 for those files when trying to run it. Thanks.

[bw2]

Hi Jim, I've copied the files to a public bucket (gs://seqr-hail/splice_junction_track_test_cases) and updated the paths in spliceJunctions.html accordingly. Let me know if you have trouble accessing. Otherwise, do you want to copy them to the s3 bucket used by other examples? As far as the UI control panel, it's a side project I'm working on to make it easier for people in our group to use the tracks, but didn't think it should be merged into igv.js.

…

-Ben

[bw2]

Also, one more known issue - the wig coverage track renders fine without being part of a 'merged' track, but I can't figure out how to get the 'junctions' track to render by itself. If it's not inside a 'merged' track, it looks like something is painting a white rectangle over part of it, but I can't figure out where. This is what it looks like when it's not in a merged track:

[jrobinso]

@bw2 I fixed the track height problem with MergedTracks, you can pick it up by merging to master or just merged this commit: e549f56

[jrobinso]

@bw2 This track (the junction track) is complex enough to warrant some simple documentation, along the lines seen here: https://github.com/igvteam/igv.js/wiki/Wig-Track. I don't know how to do a PR for the wiki, I think it has its own hidden repo, but if you write the documentation in the wiki on your own fork I will just copy/paste it. I would just document the junction track options as a stand-alone track, then maybe show how it can be merged with a wig track as an example.

I am still away, working a bit today then traveling all day tomorrow. If you are ready to merge we can aim for final testing and merging by the end of the week. No rush, it will probably be another 2 weeks before the next igv.js release. I need to get an IGV desktop release out first.

[bw2]

@jrobinso that sounds great. In the mean time I'll see if I can get some feedback from people here and then write the docs.
I'm having trouble accessing the e549f56 commit - I'm not seeing it @ https://github.com/igvteam/igv.js/commits/master

[jrobinso]

@bw2 Ahh, maybe because I hadn't pushed it. Try now.

[bw2]

Awesome. I can set track height.

[jrobinso]

@bw2 -- could you modify your dev/example html, or create a new one, to create a stand-alone junctions track (not part of a merged track). We need to confirm that works as expected. Thanks.

[jrobinso]

@bw2 To fix the stand-alone problem replace "computePixelHeight" in featureTrack.js with this. I've applied this to the PR by editing the file in place from the github web interface, I really don't know what that does to be honest.

FeatureTrack.prototype.computePixelHeight = function (features) {


    if (this.type === "junctions") {
        return this.height;
    } else if (this.displayMode === "COLLAPSED") {
        return this.margin + this.expandedRowHeight;
    } else {
        let maxRow = 0;
        if (features && (typeof features.forEach === "function")) {
            for (let feature of features) {
                if (feature.row && feature.row > maxRow) {
                    maxRow = feature.row;
                }
            }
        }

        const height = this.margin + (maxRow + 1) * ("SQUISHED" === this.displayMode ? this.squishedRowHeight : this.expandedRowHeight);
        return height;

    }

};

[bw2]

Apparently it committed it to my splice_junction_track branch. I just did git pull and can see the issue is fixed.

[bw2]

@jrobinso I was trying to avoid

When I look at igv.js:26825 it's

[bw2]

If I just reload the page without changing anything, the error goes away, but occurs again relatively frequently.

[bw2]

I'm now thinking it might be caused by React dev hot-reloading mode.
Let me double check that it happens in production and post again if it does.

[bw2]

Just in case there is some easy fix, one other issue I'm having trouble figuring out is rendering artifacts that appear as gray vertical lines at the edges of splice junctions:

(chr15:92,945,809-92,945,918)

This isn't really a problem when there are few splice junctions, but when there are many (like in this non-public data), it's much more of an issue:

[bw2]

Actually there are examples where the artifacts appear far from any splice junction start/ends:

[bw2]

That commit fixes the above issue with the artifacts.

For the "Cannot read property 'tabix' of undefined" message, it also occurs when a user/auth token doesn't have permissions to access a particular file.

[jrobinso]

@bw2 RE the tabix.index problem, if the user doesn't have permissions to load the index I can see how that might happen. However the fix would be to correctly detect this condition and give an appropriate message, not to check for index "nullness". Or perhaps I'm misunderstanding you.

This comment thread is getting long, for any other problems could you open a git issue with a test case independent of this branch? Thanks.

[bw2]

I agree, it would be great to show a "can't read file" error message. I'm not yet familiar enough with the IGV.js error handling approach, so thanks for catching that commit. I'll create a separate issue.

[bw2]

This is a docs page for this track (github didn't let me upload it as .md so I renamed to .txt).
SpliceJunctions-Track.txt

[jrobinso]

Hi @bw2 this is now merged. I made 1 change, I changed the type string to "spliceJunctions". The "junctions" type is used in IGV desktop for yet another track, and it will be ported to igv.js eventually. I want to keep track type strings consistent between the 2. For now I have defined "junctions" to be asynonym for "spliceJunctions", so your current installations should work without change, but eventually "junctions" will come to mean the IGV desktop style track.

[jrobinso]

@bw2 Also I corrupted your branch slightly trying to make edits through github before the merge, apologies for that, but you should start fresh from the igv.js master branch for future work.

Could you pull when you get a chance and confirm that everything got merged correctly?

[bw2]

@jrobinso , I did some testing on latest igv.js master and all track features still work as expected. The only issues I can see are

• https://github.com/igvteam/igv.js/wiki/Splice-Junctions still has a couple places that say 'junctions' instead of 'spliceJunctions'.
• Scrolling the track left or right even by a couple base-pairs causes the track to blank out, show a spinner and reload data. I vaguely remember there being more caching before, but I'm not 100% sure. This seems to be an issue when only a .bigWig track is showing, or only a spliceJunctions track, or both in a merged track. If I just show the refSeq and Gencode tracks without any splice junction tracks, caching works as expected and I rarely see a loading spinner.

[jrobinso]

@bw2 ok I'll have a look. I'm covered up in some IGV desktop stuff now.

[jrobinso]

@bw2 I can't reproduce the splice junction scroll problem. I'm using dev/spliceJunctions.html and exmples/spliceJunctionTrack.html. Feel free to modify those to trigger the problem.

[bw2]

@jrobinso sorry, turned out the repaints were happening because my code had started calling browser.search(locus) even though locus === IGV's current locus. I fixed the === check to ignore commas in start & end positions, and this fixed the issue.