dasmoth/dalliance — pull request #97 by ymen (2014-08-31 04:57:34+00:00)
Title: IGV-like coverage track option

@dasmoth cc @mdrasmus @hammer

Addresses #87

This adds `base-coverage` as a type in styling, which produces a `density`-like coverage track, but with composition by at per-base resolution, and coloring for mismatches.

The main use case envisioned is as an replica of the IGV coverage-track functionality. This feature is designed such that the same BAM file is loaded twice, once with styling for BAM rendering and once for coverage track rendering.

## Changes

In `sample.js` added code that bins aligned reads at each base position to record composition of nucleotides at each position, together with sequencing scores. `getBaseCoverage` is the overall function that generates features for the coverage track. It uses the `score` parameter to manipulate height of the histogram drawn on the coverage track.

It also implements color highlighting (using colors corresponding to `baseColors` of the browser) when there's a mismatch from reference genome (at a proportion above a certain threshold). This is in accordance to the coverage track behavior in IGV.

The coverage track populates information on nucleotide compositions at each base to the `notes` property of the feature, such that base information (similar to those shown by IGV on hover) are shown in the pop-up on click.

## Illustration

Coverage track together with actual BAM reads
![screen shot 2014-08-30 at 9 43 44 pm](https://cloud.githubusercontent.com/assets/7988161/4101044/9ea782e2-30ca-11e4-8184-33d2382cdcab.png)
![screen shot 2014-08-30 at 9 43 33 pm](https://cloud.githubusercontent.com/assets/7988161/4101045/a0708c22-30ca-11e4-8a17-dde3a02c3ab5.png)

Feature pop-up on click
![screen shot 2014-08-30 at 9 43 53 pm](https://cloud.githubusercontent.com/assets/7988161/4101047/cc03f6a8-30ca-11e4-9316-bd4a306ac725.png)

To replicate IGV-like visualization, I used the following styling parameters:

```javascript
// Style for visualizing BAMs.
var bamStyle = [
{
"zoom": "low",
"style": {
"glyph": "__NONE",
}
},
{
"zoom": "medium",
"style": {
"glyph": "__NONE",
},
},
{
"type": "bam",
"zoom": "high",
"style": {
"glyph": "__SEQUENCE",
"FGCOLOR": "black",
"BGCOLOR": "red",
"HEIGHT": 8,
"BUMP": true,
"LABEL": false,
"ZINDEX": 20,
"__INSERTIONS": "no",
"__SEQCOLOR": "mismatch"
},
"_typeRE": {},
"_labelRE": {},
"_methodRE": {}
}
];

// Style for visualizing BAM coverage.
var coverageStyle = [
{
"type": "density",
"zoom": "low",
"style": {
"glyph": "HISTOGRAM",
"COLOR1": "gray",
"HEIGHT": 30
}
},
{
"type": "density",
"zoom": "medium",
"style": {
"glyph": "HISTOGRAM",
"COLOR1": "gray",
"HEIGHT": 30
}
},
{
"type": "base-coverage",
"zoom": "high",
"style": {
"glyph": "HISTOGRAM",
"COLOR1": "lightgray",
"BGITEM": true,
"HEIGHT": 30
}
}
];
```