log2 scale on Summary Report Heatmaps

[ababaian]

Currently the Summary heatmap function displays the data using a linear color scale.

Current Encoding

The data in a summary file is encoded in 13 symbols which increase on a log2 scale. With the current-set up when the read depth is high then it gives a nice show of coverage, but when the read-depth is low across a genome the colors all wash to the same "white". One cannot see a difference between 4 reads per bin and say 128 when the scale goes up to 4000+

From src/components/Explorer/Result/Chart/ChartHelper.jsx

export const cvgCartoonMap = {
    "_": 0,
    ".": 1,
    ":": 2,
    "u": 4,
    "w": 8,
    "a": 16,
    "o": 32,
    "m": 64,
    "U": 128,
    "W": 256,
    "A": 512,
    "O": 1024,
    "M": 2048,
    "^": 4096,

Which then maps to color-space

var cvgLims = [0, 4000];
const defaultColorMap = d3.scaleSequentialSymlog(d3.interpolateYlGnBu).domain(cvgLims);

log2 encoding

export const cvgCartoonMapLog = {
    "_": 0,
    ".": 1,
    ":": 2,
    "u": 3,
    "w": 4,
    "a": 5,
    "o": 6,
    "m": 7,
    "U": 8,
    "W": 9,
    "A": 10,
    "O": 11,
    "M": 12,
    "^": 13,
}
...
var cvgLimsLog = [0, 13];
const defaultColorMapLog = d3.scaleSequentialSymlog(d3.interpolateYlGnBu).domain(cvgLimsLog);