feat(table): Gradient Toggle

[mohammadqassim12]

User description

SUMMARY

This PR adds a "Use gradient" toggle to the table chart’s conditional formatting configuration.

Previously, conditional formatting always rendered colors using a gradient (via varying opacity). With this change, users can explicitly choose between:

• Gradient mode (current behavior): apply a color gradient by varying opacity based on the metric value.
• Solid mode (new behavior): render all formatted cells using the selected color at full opacity.

This gives users finer control over the visual styling of conditional formatting, especially in cases where gradients can be visually noisy or conflict with existing themes.

Key changes:

• Extend ConditionalFormattingConfig with a useGradient flag.
• Update the color computation logic (getColorFunction) to respect useGradient and fall back to solid colors when disabled.
• Add a "Use gradient" checkbox to the FormattingPopoverContent UI.
• Default useGradient to true for backward compatibility with existing saved charts and dashboards.

AFTER SCREENSHOTS

TESTING INSTRUCTIONS

1. Basic UI behavior

   1. Create or open a Table chart.
   2. Open the Customize / Conditional formatting panel.
   3. Confirm that a "Use gradient" checkbox is visible in the formatting popover.
   4. Ensure the checkbox is checked by default for:
      • Newly created conditional formatting rules.
      • Existing charts with conditional formatting.

2. Gradient mode (backward compatibility)

   1. With "Use gradient" checked:
      • Apply a conditional formatting rule on a numeric column.
      • Verify that cell colors are rendered using varying opacity (gradient behavior).
      • Confirm that existing dashboards continue to look the same as before.

3. Solid mode behavior

   1. Uncheck "Use gradient" for a conditional formatting rule.
   2. Apply the rule and run the query.
   3. Verify that formatted cells are rendered with solid colors (full opacity).
   4. Toggle the checkbox on/off and confirm the visual changes update accordingly.

Automated Tests:

• cd superset-frontend && npm run test
• Run specific unit tests added in this pr:
  npm run test -- getColorFormatters && npm run test -- TableChart && npm run test -- FormattingPopoverContent

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• 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

---

CodeAnt-AI Description

Let table conditional formatting switch between solid and gradient colors

What Changed

• Added a "Use gradient" option in the table conditional formatting popover, checked by default for new and existing rules
• When "Use gradient" is unchecked, highlighted cells use a single solid color instead of varying opacity based on value
• Kept existing charts behaving the same as before unless "Use gradient" is manually turned off

Impact

✅ Less visually noisy table highlighting
✅ More control over conditional formatting appearance
✅ Backward-compatible table styling behavior

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

[Copilot]

Pull request overview

This PR introduces a "Use gradient" toggle for conditional formatting in table charts, giving users explicit control over whether colored cells use gradient opacity effects or solid colors.

Key changes:

• Adds a useGradient boolean flag to ConditionalFormattingConfig type definitions
• Updates color computation logic to respect the flag, returning solid colors when disabled or gradient colors (with opacity) when enabled
• Implements a new checkbox in the formatting UI that defaults to checked for backward compatibility

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
superset-frontend/src/explore/components/controls/ConditionalFormattingControl/types.ts	Adds useGradient?: boolean to ConditionalFormattingConfig type
superset-frontend/packages/superset-ui-chart-controls/src/types.ts	Adds useGradient?: boolean to ConditionalFormattingConfig type for consistency
superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx	Implements "Use gradient" checkbox with proper state management and form integration
superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts	Updates color function to check useGradient flag and return solid colors when false
superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.test.tsx	Adds tests verifying checkbox display, default state, and toggle behavior
superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx	Adds comprehensive tests for gradient vs solid color rendering with various operators
superset-frontend/packages/superset-ui-chart-controls/test/utils/getColorFormatters.test.ts	Adds unit tests for color function with useGradient flag, including backward compatibility

[SBIN2010]

Running CI 🤞

[mohammadqassim12]

Fixed the failing pre-commit check (missing newline at end of file). CI should pass now.

[rusackas]

@SBIN2010 CI is passing now... how's it look to you?

[SBIN2010]

LGTM!

[rusackas]

Thanks for the PR @mohammadqassim12 and thanks for the review @SBIN2010 - but it seems we have a conflict to contend with. @mohammadqassim12 would you mind rebasing the PR or addressing/resolving the conflict? Then I think we can merge this one :D

[codeant-ai-for-open-source]

CodeAnt AI is reviewing your PR.

[mohammadqassim12]

Hey @rusackas , thank you so much for your time. I went ahead and resolved the merge conflict and I think its good to go! Also thank you @SBIN2010 for the review!

[codeant-ai-for-open-source]

CodeAnt AI finished reviewing your PR.

[rusackas]

Oh my, new conflicts have arisen! I'll try again to merge once that's sorted out. Thanks for sticking with it :D

[codeant-ai-for-open-source]

CodeAnt AI is running Incremental review

[mohammadqassim12]

Hey @rusackas , I went ahead and resolved the merge conflicts as soon as i got the notification. The branch should be good to go!

[SBIN2010]

Running CI 🤞

[mohammadqassim12]

Thank you @SBIN2010 for running the CI and helping me keep this PR updated! Ci is passing and the pr should be good to go @rusackas!