IGV-like coverage track option

[ymen]

@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

Feature pop-up on click

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

// 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
        }
    }
];