funkyheatmap dark mode

[scottgigante-immunai]

          Can we discuss how you want the funkyheatmap to look with the night theme? I can adapt different elements and use css variables for styles

Originally posted by @mxposed in https://github.com/openproblems-bio/website/issues/172#issuecomment-1464268001

Rather than hacking the css, we can design the funkyheatmap to be responsive to colour variables.

Here's my two cents:

• in dark mode, all text should be white and rows should alternate between black and dark grey
• in light mode, all text should be black (except header which stays white) and rows should alternate between white and light grey

This could be achieved with --bs-white for header text, --bs-body-color for other text, --bs-body-bg for row background, --bs-button-hover for alternate rows background.

cc @rcannood @KaiWaldrant

[KaiWaldrant]

that seems about right to me

[mxposed]

For the colour schemes, I think @rcannood had a plan to have 2 funkyheatmap cells with light and dark palettes and then to switch them via https://github.com/openproblems-bio/website/pull/200

[scottgigante-immunai]

Seems ugly... is there no better way to define the endpoints of your colour scheme in js?

[mxposed]

It does, but the other way would be to make funkyheatmap aware of the light/dark mode, which is ugly too (because it's a separate component, and you can't just pass a style to alter the palette), or at least I haven't thought of a good way yet.

Any ideas are welcome

[scottgigante-immunai]

How do you create the component with a different palette in js?

[rcannood]

Right now the palettes are decided on in r. To fix this, we need to either define two palettes in R and pass them both to JS, or move the code that decides the palette in JS.

Happy to discuss when I'm back from holidays next week.

[scottgigante-immunai]

I don't know how funkyheatmapJS interacts with the R code, but this seems eminently solvable with css.

• If on each svg rect/circle you store a variable style="--color-dark: 0.7" that determines how far along the palette that element should be, it's easy enough to define the colour palette with css calc() (e.g. https://dev.to/danywalls/how-to-use-hsl-and-calc-functions-in-css-for-creating-darken-and-light-colors-3kbn)
• or, on each svg rect/circle you can store two css variables, one for each corresponding colour for dark vs light theme and you can switch between them with js
• or, just use a css filter (e.g. https://scottgigante-dyanmic-palette--openproblems.netlify.app/results/batch_integration_embed/)

[mxposed]

I learn more and more about css : )

If the filter trick does the job and looks ok, then let's just use that and call it a day?

I wouldn't like moving palettes to css entirely, but I can add the css variable that determines palette position, and then we can add css to convert that to color.

[scottgigante-immunai]

If we use css filter, we should add a css class on all of the circles / rects so I can select them more easily (.quarto-figure svg g:first-child ~ g text ~ rect, .quarto-figure svg g:first-child ~ g text ~ circle is ugly). Beyond that, the demo I show above I think does a reasonable job. Open to input from others.

[mxposed]

I'll add this to your branch, but also waiting for input from others