apache
feat: add flag conditional formating cell bars
User description
This PR is a continuation https://github.com/apache/superset/pull/34762 of to expand the possibilities of conditional formatting
SUMMARY
Add flag toCellBar - apply formatting to cell bars
Cell bar formatting is applied when "Show cell bars" is enabled.
Implements the proposal mentioned in #32250
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
TESTING INSTRUCTIONS
run test src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.test.tsx
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
Add "To cell bar" conditional formatting and render colored cell bars in tables
What Changed
- Added a "To cell bar" option to the conditional formatting UI; it appears only for numeric columns and only when cell bars are enabled
- Selecting "To cell bar" disables the "To entire row" and "To text color" options (and vice‑versa), preventing conflicting formats
- Table rendering now draws a colored, semi‑transparent cell bar when a rule targets cell bars; if a full-cell background color is applied, the cell bar is suppressed
- Control defaults and saved configurations now include the new flag so older saved rules get explicit false values; unit tests updated to cover the new option and visibility rules
Impact
✅ Apply conditional formatting to table cell bars
✅ Avoid overlapping cell bars when full-cell background formatting exists
✅ Hide cell-bar option for non-numeric columns
💡 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.
Code Review Agent Run #f31e6c
Actionable Suggestions - 0
Review Details
-
Files reviewed - 7 · Commit Range:
19151d1..5627662- superset-frontend/packages/superset-ui-chart-controls/src/types.ts
- superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts
- superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
- superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx
- superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.test.tsx
- superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
- superset-frontend/src/explore/components/controls/ConditionalFormattingControl/types.ts
-
Files skipped - 0
-
Tools
- Eslint (Linter) - ✔︎ Successful
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful
Bito Usage Guide
Commands
Type the following command in the pull request comment and save the comment.
-
/review- Manually triggers a full AI review. -
/pause- Pauses automatic reviews on this pull request. -
/resume- Resumes automatic reviews. -
/resolve- Marks all Bito-posted review comments as resolved. -
/abort- Cancels all in-progress reviews.
Refer to the documentation for additional commands.
Configuration
This repository uses Default Agent You can customize the agent settings here or contact your Bito workspace admin at [email protected].
Documentation & Help
AI Code Review powered by 
![bito-code-review[bot] avatar](https://avatars.githubusercontent.com/in/1061978?v=4 "Published by a pub.dev verified publisher"){kind=small}
Interaction Diagram by Bito
sequenceDiagram
participant User as User<br/>
participant UI as FormattingPopoverContent<br/>🔄 Updated | ●●● High
participant Panel as ControlPanel<br/>🔄 Updated | ●●○ Medium
participant Formatter as getColorFormatters<br/>🔄 Updated | ●●○ Medium
participant Chart as TableChart<br/>🔄 Updated | ●●● High
participant Types as Type Definitions<br/>🔄 Updated | ●●○ Medium
User->>UI: Configure conditional formatting
UI->>UI: Set toCellBar checkbox state
UI->>Panel: Submit formatting config with toCellBar
Panel->>Types: Use ConditionalFormattingConfig type
Panel->>Formatter: Pass config to getColorFormatters
Formatter->>Formatter: Create ColorFormatters with toCellBar property
Formatter-->>Chart: Return formatters array
Chart->>Chart: Apply toCellBar formatter to cell background
Chart-->>User: Render table with conditional cell bar colors
Critical path: User->FormattingPopoverContent->ControlPanel->getColorFormatters->TableChart
Note: The diff adds toCellBar conditional formatting feature. User configures it via UI, flows through control panel and formatter utility, then applies conditional colors to cell bar backgrounds in TableChart rendering. Upstream UI controls and downstream cell styling are updated to support this new formatting option.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
🎪 Showtime deployed environment on GHA for 6c847ef
• Environment: http://34.219.228.116:8080 (admin/admin) • Lifetime: 48h auto-cleanup • Updates: New commits create fresh environments automatically
🎪 Showtime deployed environment on GHA for 48e4957
• Environment: http://54.202.165.163:8080 (admin/admin) • Lifetime: 48h auto-cleanup • Updates: New commits create fresh environments automatically
hi @SBIN2010 ! Thanks for adding these additional formatting options! I think the color application options would only be 1 of the 3 choices at one time so a dropdown would work better here than the checkboxes. I talked with @kasiazjc and she suggested a bit of reordering of the items in the popover as well to look like this:
Would you be able to help with that change since you're working in this popover here? Thanks!
Hi @yousoph! No, that's not quite right. The 'Entire row' and 'Text color' parameters can be used together. The "Cell bar" parameter is used separately and excludes the 'Entire row' and 'Text color' parameters. Its use also depends on the global 'Show cell bars' parameter.
Hmm, I think I was only seeing one or the other when I tried it. Same thing when using it on the count(*) column in this example.
If there's just one color selection, wouldn't the text be hard to read if it's applied to both the row + the text?
If there's just one color selection, wouldn't the text be hard to read if it's applied to both the row + the text?
We can add font-weight: bold; when selecting "Apply to text color."
before:
after:
![codeant-ai-for-open-source[bot] avatar](https://avatars.githubusercontent.com/u/151810221?v=4 "Published by a pub.dev verified publisher"){kind=small}
Nitpicks 🔍
| 🔒 No security issues identified |
⚡ Recommended areas for review
|