feat: Adding the option and feature to enable borders with color, opacity and width control on heatmaps along with white borders on emphasis

[Dev10-34]

SUMMARY

In heatmaps, when there can be several continuous same colored regions, making it hard to distinguish between each heatmap element itself. Depending on need of the user, this differentiation capability might be required or crucial to their work.
Added a color picker color control which keeps the borders transparent by default. Users can set the opacity as needed.
Added a slider control to set the border width as needed.
Added a feature which pops out the element upon emphasis with white borders and shadows.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

BEFORE

AFTER

TESTING INSTRUCTIONS

No test files found for the same.

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI: Adds an 'Enable Borders' Checkbox to Heatmap Customization, adds border and emphasis feature to heatmaps.
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[github-actions]

Congrats on making your first PR and thank you for contributing to Superset! 🎉 ❤️

We hope to see you in our Slack community too! Not signed up? Use our Slack App to self-register.

[korbit-ai]

I've completed my review and didn't find any issues.

Files scanned

​

File Path	Reviewed
superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/types.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/controlPanel.tsx	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Need a new review? Comment /korbit-review on this PR and I'll review your latest changes.

Korbit Guide: Usage and Customization

Interacting with Korbit

• You can manually ask Korbit to review your PR using the /korbit-review command in a comment at the root of your PR.
• You can ask Korbit to generate a new PR description using the /korbit-generate-pr-description command in any comment on your PR.
• Too many Korbit comments? I can resolve all my comment threads if you use the /korbit-resolve command in any comment on your PR.
• Chat with Korbit on issues we post by tagging @korbit-ai in your reply.
• Help train Korbit to improve your reviews by giving a 👍 or 👎 on the comments Korbit posts.

Customizing Korbit

• Check out our docs on how you can make Korbit work best for you and your team.
• Customize Korbit for your organization through the Korbit Console.

Current Korbit Configuration

General Settings

​

Setting	Value
Review Schedule	Automatic excluding drafts
Max Issue Count	10
Automatic PR Descriptions	❌

Issue Categories

​

Category	Enabled
Documentation	✅
Logging	✅
Error Handling	✅
Readability	✅
Design	✅
Performance	✅
Security	✅
Functionality	✅

Feedback and Support

• Tell us what you think of Korbit
• Schedule a call with our team
• Email us @ [email protected]

Note

Korbit Pro is free for open source projects 🎉

Looking to add Korbit to your team? Get started with a free 2 week trial here

[github-actions]

@rusackas Processing your ephemeral environment request here. Action: up.

[github-actions]

@rusackas Ephemeral environment spinning up at http://52.12.1.165:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

[michael-s-molina]

Thanks for the PR @Dev10-34. Could you instead of adding a checkbox to enabling black borders, add a control to set the border color which by default is transparent (no border)? This is important as the color border may conflict with the color scheme used by the chart.

[Dev10-34]

Thanks for the PR @Dev10-34. Could you instead of adding a checkbox to enabling black borders, add a control to set the border color which by default is transparent (no border)? This is important as the color border may conflict with the color scheme used by the chart.

Thank you for the response! I don't quite get what you mean by a control. Do you mean something like a slider? I was primarily thinking that just the way the show values works for heatmap, where darker elements get the values written in white and lighter elements get a value written in black; but done for borders

[michael-s-molina]

Do you mean something like a slider?

Something like the Series colors control of the Waterfall chart.

[Dev10-34]

Do you mean something like a slider?

Something like the Series colors control of the Waterfall chart.

I couldn't quite get the opacity part down. So for now, I have added 2 things. One checkbox which will let you control whether you want the borders or not and secondly a color picker so that you are able to change the color of your border as needed. The opacity function doesn't seem to work for waterfall chart either.

[michael-s-molina]

Could you also remove the package-lock.json changes as there was no package change in this PR?

[Dev10-34]

I added a function in utils.ts which lets you change the opacity as well now

[michael-s-molina]

Thanks for the changes @Dev10-34. I left some suggestion to improve variable names.

[Dev10-34]

I applied all the suggestions which you gave, however, upon re running there seems to be a bug sorta where even though the border width is set to 0 as default, on initial creation of the chart. If you move the border width slider, it fixes itself. Everything else works as intended functionally, just the visuals of the initial chart creation shows the borders as well, even if all the defaults are set correctly.
Giving borderWidth variable in transformProps.ts an initial value as 0 seems to fix this issue

[github-actions]

@michael-s-molina Processing your ephemeral environment request here. Action: up.