dasmoth/dalliance — pull request #72 by ymen (2014-07-17 06:11:54+00:00)
Title: Coloring BAM reads by strand with mismatch highlights

Addresses: https://github.com/dasmoth/dalliance/issues/67

Sorry for taking such a long time for the PR, and definitely let us know your opinions and suggestions. We would love to work with you to improve implementations and design choices, and make sure the changes align to the overall roadmap of Dalliance!

## Changes
This PR implements coloring of BAM reads by strand, rendered using `_SEQUENCE` glyphs.

The option to color BAM reads is turned on by the option `Highlight mismatches & strands`, piggybacking on the previous option `Color mismatches`. This option is currently not turned on by default, but I believe it might be reasonable to make this turned on by default for Bam files.

Specific changes as follows:

- Changes to edit tier panel:
`Color mismatches` renamed as `Highlight mismatches & strands`.

When checked, adds 2 color selector rows for selecting colors of plus strand (default: `lightsalmon`) and the minus strand (default: `lightskyblue`)
![image](https://cloud.githubusercontent.com/assets/7988161/3609290/1d587a50-0d77-11e4-865b-abff14ded551.png)

- Changes to glyph rendering (when color strand option selected)

At close up view (defined as `scale` > 8), draw rectangle for each base: bases that agree with ref bases are colored using strand colors, as selected in the tier-edit panel. Non-ref bases' rects are colored based on their base colors (defined in the object `baseColors` in `cbrowser.js`) and labelled with black text. Opacity is adjusted inverse to the read quality score, as previously.

![image](https://cloud.githubusercontent.com/assets/7988161/3609293/2b217650-0d77-11e4-8fe0-c1f6ddfa2ba6.png)

At high zoom without closeup (defined as `zoom=high` & `scale` < 8), reads are first drawn as a solid rectangle based on strand direction with height corresponding to half of the tier height. Non-ref bases are drawn over with full height.
From working with the browser, we have found this to 1) improve visibility of non-ref bases and 2) reduce rendering time, especially for high depth (>1000) sequencing results. Ref bases are fully opaque and not adjusted based on qual score.

![image](https://cloud.githubusercontent.com/assets/7988161/3609294/32143c36-0d77-11e4-8777-32bb4f880e56.png)

- Changes to toSVG rendering (when color strand option selected)

SVG rendering always draw each base individually, at full height, with opacity adjusted to qual score, since rendering time is probably not a huge consideration in this case.

![image](https://cloud.githubusercontent.com/assets/7988161/3609295/3e0874d0-0d77-11e4-8aca-c50a719c9bdd.png)