Add Support for Heatmap Plot Type in CVD Palette Feature #950

[kishorprajapati1212]

Description

This PR enhances the heatmap color scaling to provide a more visually accurate and accessible experience for users with color vision deficiencies (CVD). The key improvements include:

Changes:-

1. Refined Color Selection Algorithm
2. Minimum Updated Color Palettes for Protanopia, Deuteranopia, and Tritanopia
3. Maintained Default Theme Consistency

Why is this change required? What problem does it solve?

• Enhances readability and usability for users with different types of CVD.
• Provides better visual contrast and smoother color transitions.
• Aligns with best practices in heatmap color representation.

Related issue

Closes #950 (Add Support for Heatmap Plot Type in CVD Palette Feature)

How Has This Been Tested?

• Manually tested with different palettes to ensure expected color transitions.
• Verified the light-to-dark flow follows a natural progression in each mode.
• Ensured consistency with the default theme logic.

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.

[dpgiakatos]

This PR does not adhere to the code style established for adding a new plot type. Additionally, it modifies the CVD color palettes, whereas it was previously discussed that any changes to the CVD palettes should be made using a new variable rather than altering the existing one. This PR requires significant revisions.

Note: This PR appears to be generated by an LLM.

[dpgiakatos]

Add heatmap third in the array

[dpgiakatos]

remove comment

[dpgiakatos]

remove comment

[dpgiakatos]

remove comment

[dpgiakatos]

Revert to the old color code

[dpgiakatos]

Revert to the old color code

[dpgiakatos]

remove line

[dpgiakatos]

revert to old color code

[dpgiakatos]

remove comment

[dpgiakatos]

revert to old color code

[dpgiakatos]

Change to trace.type === supportedCVDPlots[3] and add this part of before the else part.

[dpgiakatos]

Why did you delete the const color = colorPalettes[paletteKey][index % colorPalettes[paletteKey].length]?

[dpgiakatos]

This code block is not align with the code style of the file

[kishorprajapati1212]

Thanks for reviewing my PR! After going through your feedback, I re-evaluated my approach:

1. Static Array for Opacity & Colors – Initially, I tried defining a static array with opacity values and color hashes, but it didn’t fit well with the existing style.

2. Sorting the Color Palette (Dark to Light) – Another approach was sorting colors dynamically, but this had performance issues and didn’t look great.

Your comment on this line caught my attention:
const color = colorPalettes[paletteKey][index % colorPalettes[paletteKey].length]
This made me rethink the solution why not just darken the existing color dynamically instead of pre-sorting.
I added a darkenHex function , which takes a hex color and a factor, then reduces its RGB values proportionally to make it darker:

const darkenHex = (hex, factor) => {
  const num = parseInt(hex.slice(1), 16);
  const r = Math.max(0, (num >> 16) * factor);
  const g = Math.max(0, ((num >> 8) & 0xff) * factor);
  const b = Math.max(0, (num & 0xff) * factor);

  return `#${((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1)}`;
};

Then applied it here:

else if (trace.type === supportedCVDPlots[2]) {
      let darkenedColor = darkenHex(color, 0.6); 

      return {
        ...trace,
        colorscale: [
          [0, '#dddbd9'],  
          [0.5, color], 
          [1, darkenedColor]  
        ]
      };
    }

and the result was same
https://github.com/user-attachments/assets/cd92dc28-6d43-46bb-80aa-221e8d77fd26

Does this approach make sense to you? If it looks good, I'll proceed with the next steps. Let me know if you think there's a better way to handle it!

[dpgiakatos]

I have some questions:

1. The heatmap color scale is always one. Why do you take the color dynamically?
2. Which mathematical function do you use for the shading? (with references)
3. Do we really need a shading function?

[kishorprajapati1212]

1. As per your instruction to start with a light color (like white) and gradually make it darker. That why I use a shading function to modify a given base color. The idea is to create a smooth transition from light to strong colors, making the heatmap visually clear.
2. First, I convert the hex color into RGB values. Then, I apply scalar multiplication to the r, g, and b variables to darken the color. Finally, I convert the modified RGB values back into a hex code.
3. No, it’s not necessary. You could just use fixed colors, but without the shading function, it’s much harder to see differences between values.

[dpgiakatos]

I think you haven't understand my questions;

1. You get the color dynamically using this const color = colorPalettes[paletteKey][index % colorPalettes[paletteKey].length. My question was about why do you use this variable when we have only one trace in a heatmap?
2. I am asking about the kind of the function not to explain what the code does. So, do you use a linear or a logarithmic or a exponential or a cosine etc. methodology for the color shading?
3. Have you tested it? Because the color scale function of plotly can work with declaring one light and one dark color.

[kishorprajapati1212]

1. I didn't get the color dynamically, it is already in the code, I reuse it.
2. Yes I used the linear scaling for color intensity,
3. Yes I test and result and also share the video before
   https://github.com/user-attachments/assets/cd92dc28-6d43-46bb-80aa-221e8d77fd26

[dpgiakatos]

Ok, please remove the shade function, as it is unnecessary. You can simply declare the corresponding colors in constants, including the light version. For example:

const colorPalettesScaling = {
    protanopia: {
        light: '#ffe41c',
        dark: 'dark hex'
    },
    // etc.
};

Please adjust your code according to my comments and push the changes again. Thank you.

[dpgiakatos]

Thanks