Color gradients for HiC tracks

[anamariaelek]

So far as I understood, it is only possible to have HiC tracks in the shades of a single color. It would be very useful if the color gradient could be used instead, by defining several colors, something like the coloring of the HiC data shown here:

As I am not familiar with Jexl whic is used to define colors here, I can't come up with a possible solution myself.

[cmdcolin]

this is a good idea. it might be possible with to create a customized jexl callback with the current code, but making built-in config options for this might be a better strategy. adding a small legend might also help too!

[cmdcolin]

here is an example that has a bit of a rainbow like texture 'hsl('+100*(count/(maxScore/30))+',100%,50%)' (fig 1)

there are two fairly substantial things that make this not really the same as your screenshot though

1. it does not draw missing data, so this results in many "blank spaces" throughout the canvas. these are generally in areas of low count, and our current color scheme uses alpha blending to make the low counts go to "full transparency" (full alpha value) so it looks sort of natural, but when we don't use alpha blending then the blank spaces are more apparent. with added alpha blending plus HSL it looks like this 'hsl('+100*(count/(maxScore/30))+',100%,50%,'+(count/(maxScore/200))+')' (fig 2)
2. it is not "interpolating" a color range, it is just adding hue to the HSL spectrum so it's sort of similar but it is not blue->yellow->orange->red. to properly handle this we would want to interpolate colors

[cmdcolin]

also, we don't currently use of a log scale for colors which could be helpful too (see your screenshot where the colors are on log scale). In my screenshots I artificially reduce the dynamic range of maxScore instead in the color (see maxScore/50)

[anamariaelek]

Thank you for a very detailed reply. I tried to replicate your examples, but when I include jexl:colorString(hsl('+100*(count/(maxScore/30))+',100%,50%)) in defaultSession of config.json, it seems to have no effect. When I try to specify the same colorString in the interactive session in the browser, I get the following error:

Error: Unexpected end of expression: colorString(hsl('+100*(count/(maxScore/30))+',100%,

If saturation and lightness are quoted, I get

TypeError: e.hsl is not a function

[cmdcolin]

no worries. here is a config using this color setting

{
  "type": "HicTrack",
  "trackId": "hic-1658772518097-sessionTrack",
  "name": "Hic Track (copy)",
  "assemblyNames": [
    "hg19"
  ],
  "adapter": {
    "type": "HicAdapter",
    "hicLocation": {
      "locationType": "UriLocation",
      "uri": "https://s3.amazonaws.com/igv.broadinstitute.org/data/hic/intra_nofrag_30.hic",
      "baseUri": "http://localhost:3000/test_data/config_demo.json"
    }
  },
  "displays": [
    {
      "type": "LinearHicDisplay",
      "displayId": "hic-LinearHicDisplay-1658772518097",
      "renderer": {
        "type": "HicRenderer",
        "color": "jexl:'hsl('+100*(count/(maxScore/30))+',100%,50%)'"
      }
    }
  ]
}

[anamariaelek]

Thanks a lot! I finally combined both hue and alpha into something like this 'hsla('+50*(1-(count/(maxScore/30)))+',100%,50%,'+(count/(maxScore/100))+')'

Ideally, red would go to even darker values, but this is also not bad. I agree with your remark that log scale would be useful, I will keep an eye out for this in the new releases.