color spectrum/scale for continuous values?

[AngieHinrichs]

[I thought there was already an issue for this, but I couldn't find one. If this is a duplicate then I'll close this and comment on the original.]

I have a tree for the ongoing cattle H5N1 outbreak in the U.S. with several columns of numerical metadata from the Bloom Lab's deep mutational scanning (DMS) data:

https://hgwdev.gi.ucsc.edu/~angie/cattleClade.concat.2024-09-03.jsonl.gz

When I color by a column with numerical values e.g. Ferret escape, I would like a color scale, with larger numbers getting more saturated colors, but instead I'm getting a categorical coloring where a vivid purple for the relatively low value on most nodes visually swamps the much more interesting higher values.

Am I missing a configuration option to get a continuous color scale, or would this be a new feature? FWIW in Nextstrain's Auspice viewer I can configure a color scale with min and max values and shades like this:

{ "key": "ferret_escape",
  "title": "Ferret sera escape relative to A/American-Wigeon/South-Carolina/2021",
  "type": "continuous",
  "scale": [[0, "#ABABAB"], [11.03365, "#4041C7"]]
}

[theosanderson]

Thanks for the exemplary issue as ever @AngieHinrichs . To give the quick answer first: I believe we don't currently have this feature. I agree it should be there and have been long ago. It shouldn't be hard and I'll aim to complete it soon!

[theosanderson]

Hi Angie,

Sorry that this took so long. This should very shortly be merged, with a field in the config called colorRamps which looks like this

"colorRamps": {
        "meta_mouse_escape": {
          "scale": [
            [0, "#000000"],
            [1, "#cccccc"],
            [1.5, "#ffee00"],
            [2, "#ff0000"],

          ],
        },
      },

Caveats:

• No nice key yet

Please do let me know if you encounter issues with using it!

[AngieHinrichs]

Thanks so much Theo, I will try it out soon!

[AngieHinrichs]

The coloring looks great! I'm having a little trouble loading from a link that has the coloring enabled, though.

For example, this link (without the new coloring enabled) works well, and then I can manually select the new coloring ("Differential selection in human vs. avian cells", 3rd from bottom of the Color by menu):

https://taxonium.org/?protoUrl=https%3A%2F%2Fhgwdev.gi.ucsc.edu%2F~angie%2Fh5n1_outbreak_2024.2024-09-23.jsonl.gz&xType=x_dist

However, after I enable the new coloring, the link leads to an empty page and some error messages in the devtools JS console:

https://taxonium.org/?protoUrl=https%3A%2F%2Fhgwdev.gi.ucsc.edu%2F~angie%2Fh5n1_outbreak_2024.2024-09-23.jsonl.gz&xType=x_dist&color=%7B%22field%22%3A%22meta_mutdiffsel%22%7D

The end of the console log looks like this:

cc

taxonium-component.umd-fa615d55.js:2780 colorRamps {meta_mutdiffsel: {…}}meta_mutdiffsel: scale: Array(2)0: (2) [0, '#D8D8D8']1: (2) [4.872, '#5050F8']length: 2[[Prototype]]: Array(0)[[Prototype]]: Object[[Prototype]]: Object meta_mutdiffsel

index-c6e20e06.js:40 TypeError: Cannot read properties of undefined (reading 'slice')
    at taxonium-component.umd-fa615d55.js:2780:55843
    at taxonium-component.umd-fa615d55.js:2780:57458
    at getKeyStuff (taxonium-component.umd-fa615d55.js:1764:799)
    at taxonium-component.umd-fa615d55.js:1764:1543
    at Object.Vp [as useMemo] (index-c6e20e06.js:38:23880)
    at V.useMemo (index-c6e20e06.js:9:6179)
    at useLayers (taxonium-component.umd-fa615d55.js:1764:1531)
    at Deck (taxonium-component.umd-fa615d55.js:2613:4133)
    at us (index-c6e20e06.js:38:19503)
    at Qa (index-c6e20e06.js:40:3135)
Ga @ index-c6e20e06.js:40
Zp.n.callback @ index-c6e20e06.js:40
bc @ index-c6e20e06.js:38
Yc @ index-c6e20e06.js:40
dv @ index-c6e20e06.js:40
ag @ index-c6e20e06.js:40
dg @ index-c6e20e06.js:40
ln @ index-c6e20e06.js:40
qc @ index-c6e20e06.js:40
tn @ index-c6e20e06.js:38
at @ index-c6e20e06.js:40
Yy @ index-c6e20e06.js:38
(anonymous) @ taxonium-component.umd-fa615d55.js:2780
onQueryReceipt @ taxonium-component.umd-fa615d55.js:2783
worker.onmessage @ taxonium-component.umd-fa615d55.js:2783

index-c6e20e06.js:38 Uncaught TypeError: Cannot read properties of undefined (reading 'slice')
    at taxonium-component.umd-fa615d55.js:2780:55843
    at taxonium-component.umd-fa615d55.js:2780:57458
    at getKeyStuff (taxonium-component.umd-fa615d55.js:1764:799)
    at taxonium-component.umd-fa615d55.js:1764:1543
    at Object.Vp [as useMemo] (index-c6e20e06.js:38:23880)
    at V.useMemo (index-c6e20e06.js:9:6179)
    at useLayers (taxonium-component.umd-fa615d55.js:1764:1531)
    at Deck (taxonium-component.umd-fa615d55.js:2613:4133)
    at us (index-c6e20e06.js:38:19503)
    at Qa (index-c6e20e06.js:40:3135)

[theosanderson]

Thanks Angie! I think this is fixed now. Do let me know if you hit anything else and I'll work on an improved legend soon

[AngieHinrichs]

Works great now! 🎉 Thanks again.