Refactor color maps to use OUI color palettes

[BSFishy]

Description

Refactor color maps to use OUI color palettes. This replaces a custom color scheme with OUI provided colors, so that they can be themeable. These colors may potentially be more difficult to differentiate, so this PR is for OUI usage but not necessarily OUI compliance. Will need more discovery from UX to mark this as compliant.

Issues Resolved

Partially JS part of #4289

Testing the changes

Ran:

• yarn start
• yarn test:jest
• yarn test:jest_integration
• yarn test:mocha
• yarn build-platform --linux --release

Screenshots

Check List

• All tests pass
  • yarn test:jest
  • yarn test:jest_integration
  • yarn test:ftr
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[joshuarrrr]

It is actually used a couple places, so we can't remove it without also migrating those usages:

OpenSearch-Dashboards/src/plugins/tile_map/public/markers/scaled_circles.js

Line 236 in 2322c53

return colorUtil.getLegendColors(colorRamp);

OpenSearch-Dashboards/src/plugins/region_map/public/choropleth_layer.js

Line 300 in 2322c53

this._legendColors = colorUtil.getLegendColors(this._colorRamp);

[BSFishy]

It is actually used a couple places, so we can't remove it without also migrating those usages

Good catch! Not sure why nothing I've done caught that (including a global search in my IDE). I'll try a search again and migrate those things.

[codecov]

Codecov Report

Merging #4293 (669497f) into main (0b54e84) will increase coverage by 0.06%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             main    #4293      +/-   ##
==========================================
+ Coverage   66.35%   66.41%   +0.06%     
==========================================
  Files        3246     3246              
  Lines       62466    62474       +8     
  Branches     9674     9673       -1     
==========================================
+ Hits        41451    41494      +43     
+ Misses      18661    18633      -28     
+ Partials     2354     2347       -7     

Flag	Coverage Δ
Linux	66.36% <ø> (+<0.01%)	⬆️
Windows	66.36% <ø> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...gins/charts/public/static/color_maps/color_maps.ts	100.00% <ø> (ø)

... and 8 files with indirect coverage changes

[BSFishy]

Changing this PR to instead make color maps use OUI color palettes. This is a more general change that will affect things further across Dashboards. In this cirumstance, this utility just converts color maps to usable colors. Will need guidance from UX on what colors/what palettes to use @KrooshalUX

Currently what I have implemented is:

• Blues: ouiPaletteCool
• Greens: ouiPalettePositive
• Greys: ouiPaletteGray
• Reds: ouiPaletteNegative
• Yellow to Red: ouiColorWarning to ouiColorDanger
• Green to Red: ouiColorSuccess to ouiColorDanger

(for context, you can see these colors when editing a Coordinate Map visualization, going to options, and changing color schema)

[KrooshalUX]

@BSFishy +1 your selections for this iteration - I don't have further feedback at this time.

[BSFishy]

@BSFishy Can we also add more screenshots that demo each of the updated palettes? I actually think the heatmap vis may be best for showing all the options.

@joshuarrrr @KrooshalUX Issue description has been updated with screenshots

[KrooshalUX]

It looks like we might be a rotation short ? I see that 2-23 ranges are outline only. Is this expected behavior?

[joshuarrrr]

It looks like we might be a rotation short ? I see that 2-23 ranges are outline only. Is this expected behavior?

Yeah, I think that's the expected behavior of colorPalette. In this case @BSFishy mapped the full color palette range to the data bounds, which means that the lowest/first bucket essentially gets the far end/lightest color value generated by the palette. So it allows you to see the full range, even though, by default that lightest color would be applied to the zero'th bucket/data.

[KrooshalUX]

@joshuarrrr given that, this LGTM. I will approve in the lens of the change is to point to OUI palettes. I do think perhaps we need to make an adjustment on the palette itself to ensure a perceptible value is generated.

[BSFishy]

I do think perhaps we need to make an adjustment on the palette itself to ensure a perceptible value is generated.

What we could do is make the palette 1 point larger than is asked, and remove the first value, i.e. just remove the white color. That could be put into a followup issue though (also would need confirmation from ux)

[joshuarrrr]

I do think perhaps we need to make an adjustment on the palette itself to ensure a perceptible value is generated.

What we could do is make the palette 1 point larger than is asked, and remove the first value, i.e. just remove the white color. That could be put into a followup issue though (also would need confirmation from ux)

That works for monochromatic scales but not diverging colors - that's one of the existing bugs in the current implementation of truncatedColorMaps: opensearch-project/oui#601

[KrooshalUX]

Made myself a task on opensearch-project/oui#818 to work on it from OUI perspective instead of within this PR. Since the outline does occur, its not great but its not as high risk and can be mitigated.