igvteam / igv.js Goto Github PK
View Code? Open in Web Editor NEWEmbeddable genomic visualization component based on the Integrative Genomics Viewer
License: MIT License
Embeddable genomic visualization component based on the Integrative Genomics Viewer
License: MIT License
The icons are sometimes quite small, other times quite large, depending on the site in which they are embedded. We should try to have them a fixed size.
Implement windowed downsampling as in IGV desktop. This is neccessary to prevent running out of memory when browsing deep coverage files, or specific loci with deep coverage. The downsampling needs to occur as the alignments are read, in a psuedo streaming mode. This will require breaking queries for a range into manageable sized chunks (manageable in byte size, not genomic size).
The following work around for a Safari bug had to be removed, the header is not allowed by all servers (in particular Encode DCC)
//xhr.setRequestHeader("If-None-Match", Math.random().toString(36)); // For nasty safari bug
So we need to re-test Safari and implement another workaround if needed that does not use request headers. The bug is Safari does not consider the byte range in its cache, so future requests for a different range can return the original results.
Investigate the feasibility of auto-complete, at least for the chromosome names. The iPad app does this for features and is pretty fast. The chromosome names are in-memory and can be fetched through the current sequence object (igv.browser.genome.sequence.chromosomeNames).
Set a configurable limit on the number of rows displayed for squished and expanded modes.
In particular, it doesn't work if the new location would put you off the left or right edge. It should move you to the edge.
Document required external dependencies (js, css, anything else).
Create a general message widget for alerts, errors, and other messages to users. First application would be "resource not found" type messages.
If I click on the "Load NA06984 BAM" link multiple times, the track has multiple entries in the viewer.
The public API should ignore attempts to load identical tracks.
Implement sort-by-base, triggered by a call to a method on an alignment track with the genomic location for the sort as an argument. We will implement a menu item later, which might require a center-line to show sort location.
2 issues with the track color dialog.
(1) If I select a color, then later select another one, subsequent invocations of the dialog default to the first color selected, not the current color.
(2) I can't cancel the track color dialog, the button is disabled. The OK button on the other hand is enabled, even if I haven't selected a new color.
We need a means to set track height to "auto". Currently we can set it to an explicit height. A quick and dirty method would be to accept the string "auto" in the dialog, but a checkbox might be better.
If the content-length is unknown its possible to attempt a range-byte request beyond the end of the file. We need to catch the "unsatisfied range" error and retry (this might not be possible). Alternatively, perhaps the indeces themselves (bam, tabix, bigwig, idx) has the file size information.
Refer to this Gist: https://gist.github.com/turner/65fb46a137a612d6e7f6
bamReader readHeader needs some refactoring to handle larger BAM header content.
It was not sufficient to simply increase the number of bytes initially read, as only a single bgz block was uncompressed during processing despite a larger range fetched by the dataLoader.
Our BAM files for Proton have one RG entry per processed tile (96) and many CO comments to capture parameters used to generate the files, making for rather large BAM headers.
The session below should reproduce the bugs
{
"start": 0,
"end": 33156,
"regionWidth": 100,
"framePixelWidthUnitless": 0.00003016045361322234,
"trackHeight": 100,
"tracks": [
{
"label": "tss",
"color": "rgb( 3, 116, 178)",
"order": 0,
"height": 100,
"path": "http://www.broadinstitute.org/~nshoresh/BroadE/Examples/tss.bed",
"trackFilter": {
"isFilterActive": false,
"radioButtonIDPrefix": "minMaxRadio_"
}
},
{
"label": "tss_bad",
"color": "rgb( 3, 116, 178)",
"order": 1,
"height": 100,
"path": "http://www.broadinstitute.org/~nshoresh/BroadE/Examples/tss_bad.bed",
"trackFilter": {
"isFilterActive": false,
"radioButtonIDPrefix": "minMaxRadio_"
}
},
{
"label": "tss_trackline",
"color": "rgb( 3, 116, 178)",
"order": 2,
"height": 100,
"path": "http://www.broadinstitute.org/~nshoresh/BroadE/Examples/tss_trackline.bed",
"trackFilter": {
"isFilterActive": false,
"radioButtonIDPrefix": "minMaxRadio_"
}
},
{
"label": "H1_H3K4me3",
"color": "rgb( 3, 116, 178)",
"order": 3,
"height": 100,
"path": "http://www.broadinstitute.org/~nshoresh/BroadE/Examples/H1_H3K4me3.bed",
"trackFilter": {
"isFilterActive": false,
"radioButtonIDPrefix": "minMaxRadio_"
},
"designatedTrack": true
}
]
}
Attempts to access ga4gh resources without a proper token yields a 403 error in the background, and an infinite spinner to the user.
Support querying the ENCODE DCC.
It would be useful to distinguish between file type and rendering type, where file type determines the parsing (data model) and rendering type defines how features are drawn (data view).
ie. input is a bed file, rendering is via arcs
isReachable does not work for many webservices, and other resources that do not respond to a "head" request on the base url. Needs some fine turning.
Support drag and drop of tracks to rearrange order. We'll use a vertical bar on the left side as the "grab" handle.
Updates from meeting 4/23/15 (added by HT)
Track hubs are important for Encode, and by extension Cursor
Guide to basics: https://genome.ucsc.edu/goldenPath/help/hubQuickStart.html
Really important for understanding structure of file: https://genome.ucsc.edu/goldenPath/help/trackDb/trackDbHub.html
Example trackDB.txt file: https://www.encodeproject.org/batch_hub/searchTerm=bernstein+k562,,type=experiment/hg19/trackDb.txt
The excellent Dalliance parser by Thomas Down: https://github.com/dasmoth/dalliance/blob/master/js/thub.js
Ayellet attached a table with association details for 8,078 GWAS genome-wide significant SNPs from the NHGRI GWAS catalog for >600 diseases and traits. This is for the GWAS catalog SNP tick track.
Here is a proposed order of summarizing the association info in a box, when clicking on a given SNP tick:
Strongest SNP-risk allele: rs12913832-A
Chr position (GRCh37): 15:28365618
Disease/Phenotype: Eye color
P-value: 1.00E-300
Odds ratio or beta: 2.49
PUBMEDID: 20585627
Note: A given SNP may be associated with more than one trait. In that case we could list all SNP-trait associations in one box, one below the other with an empty line separating between the associations, as done in the diabetes portal (see attached picture for example).
Here's the accompanying text file information in a private github gist:
https://gist.github.com/khadley/3f8823b278682579d72f
Here's the screen shot.
Generally, when closing input dialogs with a "return" key the "OK" or similar button action should be invoked. If I close the track height button with a return key nothing happens, effectively the "Cancel" action. Perhaps the default button should also be highlighted in some way, I'm not sure what the web standards for highlighting are.
The indexed fasta should be enough. Get chr sizes from fasta index.
NOTE: consider tackling issue #61 before this one.
There is a fair bit of flashing and weird looking redraws when loading multiple tracks or a session into cursor. To stop this perhaps we should investigate deferring adding tracks until features for all tracks are loaded. This sort of scatter and wait is done elsewhere. In pseudo code something like this
function loadAll(tracks) {
var trackCount = tracks.length;
tracks.forEach(function (track) {
track.getFeatureCache(function (features) {
trackCount--;
if(trackCount === 0) addAll(tracks)
}
}
}
function addAll(tracks) {
tracks.forEach(function (tracks) { browser.addTrack(track) }
}
Handle extremely long string in a popup menu item.
Update the grunt file to run all our unit tests from a single target.
The track label is scrolling with the content, it should remain fixed.
Add a track menu for cursor with the following initial items:
change name
change color
change height
remove
The menu will be invoked from an icon, perhaps replacing the current "x" remove icon.
The following load fails. It appears that all CORS headers are present in the response
https://www.encodeproject.org/files/ENCFF002ADR/@@download/ENCFF002ADR.bigBed
Side by side comparison between desktop and web IGV shows to many mismatch colorings in web IGV.
There are 3 different methods for loading tracks: loadTrack, loadTrackPath, and loadTrackFile. The latter 2 are nearly identical. Consolidate these, perhaps into a single method that takes a list of items to load.
We should warn the user of problems with session files. There are 2 cases
(1) invalid json (e.g. missing closing bracket)
(2) unrecognized fields (e.g. mispelling "tracks")
For the first we presumably get an error message from the JSON parser we can relay. The second is more difficult.
When loading a tabix indexed file feature are only shown for the initial locus. Everywhere else is blank. Probably a caching issue.
The notion of track height is a bit fuzzy and confused. Refactor taking into account the following
Its useful for some track types to autosize, specifically those with a variable number of fixed height rows. For now that is feature annotation, bam, and seg tracks.
So bam, annotation, and seg tracks will autosize by default within some limits, by default 20 - 1000 pixels. If the user manually sets a track height through the menu or startup config object autosize is turned off. We need a menu item or other action to turn it back on (issue #64).
Numeric tracks with a vertical scale must have a size fixed, or a scale (units/pixel) fixed. Its most useful and natural to fix a size and compute a scale. => wig and related tracks have fixed sizes and do not automatically resize.
Support bigbed files in Cursor. Will need to write code to read all features from a bigbed file as CURSOR needs the entire file.
Sweep drag should always zoom, up to max zoom. Currently if you are zoomed in close to max and then sweep out an area that would exceed the max the swept area is grey and nothing happens. It should zoom as far as possible and center on center of the swept area. There should never be any grey no-ops. See Helga if this isn't clear.
Enable loading a session via a web link, something like the following
http://..../cursor.html?session=http://....
Implement a translation track, either 6 frame or 3 frame with the option to flip the strand
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.