Customizable Heatmap Colors

[birm]

Is your feature request related to a problem? Please describe.
The current color scheme for the heatmaps are often useful, but may not be conveyant or visible in all contexts

Describe the solution you'd like
Addition of a mechanism to let a user define a heatmap color function (takes in the value(s) for a patch, outputs a color)

Describe alternatives you've considered
Different possible options include just adding presets, use of a single color gradient, etc.
Could also include taking in multiple fields to make a color (at simplest, imagine variables a,b,c -> r,g,b)

[saphal1998]

I'd like to work on this issue @birm

Can you assign it to me?

[birm]

Hello, and thanks for your interest. Looking at https://github.com/camicroscope/caMicroscope/blob/0971f1368894d000464c481c713a3392e0f6ea80/core/extension/osd-heatmap-overlay.js#L803 may be useful, as it's where colors are set. also, this code was written by @nanli-emory who may have additional pointers/advice.

[saphal1998]

@birm I would like some more information about how to setup the project and in general, how to recreate the problem at hand. Could you please maybe list down some steps on how to recreate the current setting?

I've run the docker-compose up and have all the deps installed. I think I would just like help in visualising what this feature request is exactly.

[cz2h]

@birm Hi, can I try to address this problem as well?

[birm]

Hello; you may find it useful to add a test heatmap to a slide; see

Distro/config/test_seed.js

Line 110 in d0c1101

heatmap_data = []

for the data we use for smoke testing. Run something like this (with the slide id replaced with one to add the heatmap to) against mongo (docker exec -it ca-mongo mongo then use camic) That should show the current color scheme.

[birm]

@zengchu2 Sure! It's entirely possible the two of you end up with solutions that work well together too!

[saphal1998]

Sir, after some trial and error, I have been able to get the fake heatmaps using the mongo shell, It seems to coat the entire image with a purple-ish hue. I have some follow up questions if I am to solve this issue.

1. How exactly are we setting the heatmap and what does this snippet mean?
   heatmap_data = []; for (var i = 0; i < 1; i += 0.007243258749282846) { for (var j = 0; j < 1; j += 0.010489147367327867) { heatmap_data.push([i, j, Math.random(), Math.floor(Math.random() * 10)]); } }
   More specifically, what do the variables i & j here stand for?

2. I have not been able to locate the files to make these changes in the Distro repo, I think I need a better understanding of the flow or where exactly to put the code to make sure that it appears in the application, I believe the changes should be made in the core repo, but I am not sure.

3. I wanted to know what is the role of the following as well in the heatmaps we insert in the DB
   fields: [ { name: "necrosis", range: [0, 1] }, { name: "tumor", range: [0, 10] } ],

[birm]

this document should be reasonably useful -- https://github.com/camicroscope/Distro/blob/develop/data_types.md

Please let me know if it's missing details you find important.

[birm]

To see heatmap colors as mentioned, change the mode to gradient under the gear menu.

[nanli-emory]

This is a pretty useful doc to explain heatmap data model [Camic Heatmap Data Model and Rendering]
https://docs.google.com/document/d/1ckiwENsYIq1t7585Y6fxixXukVxAvoEwi0B6qp4QT88/edit#heading=h.b22n6ceohm0y

[rahuldeepattri]

Hi from what i was able to find that we have two modes for drawing the heatmap, binal and gradient.
In the heatmap generated in test seed, we have a default blue color for heatmap in binal mode.

The requirement is to implement a feature where user can give an input and color of heatmap is changed for both binal and gradient modes? The code here tries to get colors. But the at line https://github.com/camicroscope/caMicroscope/blob/39d2d683dc73619190b3f8b57d8f69272dbfcb63/core/extension/osd-heatmap-overlay.js#L808 we have fixed set of colors.

This is a pretty useful doc to explain heatmap data model [Camic Heatmap Data Model and Rendering]
https://docs.google.com/document/d/1ckiwENsYIq1t7585Y6fxixXukVxAvoEwi0B6qp4QT88/edit#heading=h.b22n6ceohm0y

The test seed uses the Heatmap Data Model as mentioned in above document, what is the use of Heatmap Edited Data Model described in the document?

Also other than test seed how the heatmap data is generated, What is the ideal flow in production?

[birm]

Yes, the task is about letting people add different colors (either more presets or letting users choose directly, or something of that sort).
Heatmaps are currently generated by pipelines which are a little outside of scope of caMicroscope itself, at least for now.

[birm]

Thanks @rahuldeepattri!