Repository navigation
feat: Add GUI for label_colors in Dashboard Properties Modal - #39434
Conversation
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #39434 +/- ##
========================================
Coverage 82.26% 82.27%
========================================
Files 2995 2996 +1
Lines 185032 185163 +131
Branches 42822 42852 +30
========================================
+ Hits 152223 152340 +117
- Misses 30047 30061 +14
Partials 2762 2762
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
dosubot
Bot
added
change:frontend
![bito-code-review[bot]](https://avatars.githubusercontent.com/in/1061978?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review Agent Run #a41682
Actionable Suggestions - 1
-
superset-frontend/src/dashboard/components/PropertiesModal/sections/LabelColorMapping.tsx - 1
- Broad Exception Handling · Line 87-91
Filtered by Review Rules
Bito filtered these suggestions based on rules created automatically for your feedback. Manage rules.
-
superset-frontend/src/dashboard/components/PropertiesModal/sections/LabelColorMapping.tsx - 2
- Type Safety Violation · Line 23-71
- Type Safety Violation · Line 133-136
Review Details
-
Files reviewed - 2 · Commit Range:
e6d79cf..26651e9- superset-frontend/src/dashboard/components/PropertiesModal/sections/AdvancedSection.tsx
- superset-frontend/src/dashboard/components/PropertiesModal/sections/LabelColorMapping.tsx
-
Files skipped - 0
-
Tools
- 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 Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.
Documentation & Help
AI Code Review powered by
|
@jaymasiwal I have an idea for how you can work on this if you still want to. You could design the feature on your fork, but instead of submitting code at this stage for review, present screenshots of your implementation, any design decisions you made, and any remaining points you think need input. I think that will make it easier for people to weigh in, if they have something to react to. Then once we iterate on the UI and UX, the implementation and code review can follow. What do you think? |
![codeant-ai-for-open-source[bot]](https://avatars.githubusercontent.com/u/151810221?s=60&v=4){kind=small}
✅ Deploy Preview for superset-docs-preview ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Hey @sfirke, thanks again for pointing me in the right direction! I spun up my fork locally and applied Superset's native design system (Emotion theme variables, grid units, and standard component styling) to build out the UI. I placed it directly inside the Advanced settings accordion right above the AceEditor, so users keep the context of the underlying JSON. Here is the proposed UX:
Key Design Decisions: Native Look & Feel: Mimicked the standard input, button, and typography styling from the src/components directory so it blends seamlessly with the rest of the modal. Auto-Sync: The GUI and the JSON editor are two-way bound. Editing the UI safely parses and updates the JSON without the user ever having to worry about syntax errors. Does this UX layout align with what you had in mind? I'm happy to tweak the layout or styling before I push the final React code to the branch! |
Code Review Agent Run #4b1d0dActionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help AI Code Review powered by |
|
Do we have to put this feature in the "Advanced" dropdown for the JSON to stay in sync? I would prefer to have it here, accessible from the main "Dashboard Properties" screen: Now I notice that it's random how "color schema" is under the "Access" header. In this case it would get its own header, "Colors". And the new choice could be something like "Label colors" with the subtext "Hardcode colors to specific values". Another option would be to move both the color schema dropdown and this new hardcoded set of colors to Themes & CSS: And rename that to "Themes, CSS, Colors" ? A little clunky sounding but arguably a more logical place to put these features. But going back to my first question, are there obstacles to setting these values elsewhere away from the JSON? |
|
@kasiazjc or if you can tag anyone else with UI expertise (@rusackas FYI) - if you could help design a spec for this feature, it would pay off down the line when it's implemented. I know my weaknesses well enough to know when I'm bumbling around! Ideally a UI expert would implement this. I'm just sick of telling users to edit the JSON. |
|
Hey @sfirke, thanks for pulling in the design team! To answer your first question: No, there are zero technical obstacles to moving this feature away from the JSON editor. I just reviewed the architecture of superset-frontend/src/dashboard/components/PropertiesModal/index.tsx. The StylingSection (where "Themes & CSS" currently lives) and the AdvancedSection share the exact same state pipeline. They both serialize into the json_metadata string upon saving. We can cleanly teleport the React component I built directly into the StylingSection. I completely agree with your logic—putting it alongside the Color Scheme dropdown in a renamed "Themes, CSS, Colors" section makes infinitely more sense for non-technical users. @kasiazjc @rusackas — While we wait on a formal spec, I am happy to migrate my current UI components into the StylingSection and post a screenshot PoC of what it looks like sitting next to the Color Scheme dropdown so we have a visual starting point to iterate on. Let me know if you'd like me to spin that up! |
|
Great, then yes @jaymasiwal it would be great if you can take that mockup as far as you can and share screenshots here. I think design review resources are limited on this project so the farther we can get the example before they take a look, the better. |
|
@sfirke @kasiazjc Here is the visual Proof of Concept (PoC) with the UI successfully migrated out of the JSON editor and into the StylingSection! As you can see in the screenshot below, the component now renders natively inside the "Styling" accordion, directly beneath the "Color scheme" dropdown. The state management pipeline is fully intact—adding or editing a mapping here correctly serializes the data directly into the json_metadata string upon hitting Apply/Save. (Note: The white background styling on the component is just a placeholder to make the boundaries of the PoC clear. I will align the CSS variables to match Superset's native theme tokens once we confirm this is the direction the design team wants to go!) Let me know what you think of this placement! 
|
e775001 to
e181fcc
Compare
Code Review Agent Run #c40c5bActionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help AI Code Review powered by |
Code Review Agent Run #1f7f6eActionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help AI Code Review powered by |
|
@jaymasiwal as @sfirke noted, this one really wants a design pass first — screenshots and UX decisions to react to before we dig into the code. CI's also quite red here. Want to take the mockup direction and share where it lands? |
|
@rusackas @sfirke Completely agree! I actually posted a visual Proof of Concept screenshot a bit further up in the thread (from April 21st) showing how it sits under the 'Color scheme' dropdown. If the design team wants to use that screenshot as a starting point to iterate on, or if they prefer to provide their own mockup of the ideal UX, I am completely on board. I'll hold off on resolving the merge conflicts and CI for now. As soon as the team gives the green light or hands over a design spec, I'm ready to dive right back in and implement the code! |
|
hi @jaymasiwal ! thanks for working on this, looking forward to seeing the color picker in action soon :) a few notes on the UI from @kasiazjc and I:
Screen.Recording.2026-07-28.at.3.47.38.PM.mov
Thanks!! |
|
Haven't looked closely at the code yet, and can't at this moment... but I shall. Just wanted to drop a note that we're trying to recycle/upcycle the color picker that @SBIN2010 added recently, like I'm doing in this PR (still a bit of work in progress there, not saying it's perfect by any means): #42910 |
There was a problem hiding this comment.
🟡 Changes recommended
Valid metadata can be corrupted, duplicate rows diverge from JSON, and key synchronization paths lack coverage.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Review details
Suppressed comments (4)
superset-frontend/src/dashboard/components/PropertiesModal/sections/LabelColorMapping.tsx:298
- Free-form input still permits duplicate labels, but serialization silently drops every duplicate after the first while leaving all rows visible. The GUI then displays mappings that are not present in JSON. Reject duplicates with an inline error or merge/remove the duplicate row so both representations stay synchronized.
if (
trimmedLabel !== '' &&
!seenLabels.has(trimmedLabel) &&
isValidHex(row.color)
) {
superset-frontend/src/dashboard/components/PropertiesModal/sections/LabelColorMapping.tsx:399
- Because
allKnownLabelsis built only from existing rows and this predicate excludes labels owned by another row, an existing row can only suggest its current label and a new row gets no options. The “Select” behavior therefore cannot offer any new dashboard label; pass actual dashboard labels into the component or remove the ineffective datalist.
const availableOptions = allKnownLabels
.filter(
label =>
label === currentLabel ||
!rows.some(
superset-frontend/src/dashboard/components/PropertiesModal/sections/LabelColorMapping.test.tsx:32
- The new frontend tests add a
describewrapper, but this repository's testing migration requires top-leveltest()cases rather than nested suites. Flatten these tests and keep the setup at module scope.
describe('LabelColorMapping', () => {
superset-frontend/src/dashboard/components/PropertiesModal/sections/LabelColorMapping.tsx:287
- The tests only verify rendering and adding a row; none assert
onJsonMetadataChange, deletion, duplicate handling, supported non-hex values, invalid JSON, or prop-driven resynchronization. Add focused tests for these core two-way-binding paths, especially preservation of existing metadata values.
const syncToJson = (currentRows: ColorMapping[]) => {
- Files reviewed: 7/7 changed files
- Comments generated: 4
- Review effort level: Balanced
Code Review Agent Run #6196efActionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help AI Code Review powered by |
Code Review Agent Run #db6dbbActionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help AI Code Review powered by |
|
Seeing if I can help get pre-commit to pass here... |
|
@rusackas. Hey, thanks for the offer! I managed to run the oxfmt hook locally and pushed the formatted files. The pre-commit checks and the rest of the CI are all green now. |
Code Review Agent Run #06de16Actionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help AI Code Review powered by |
|
Hey @rusackas ! Got the tests added for additions, updates, and deletes, and fixed the license typo. All checks are passing now, let me know if this looks good to merge. |
Code Review Agent Run #23985dActionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help AI Code Review powered by |
|
@jaymasiwal I experimented with adding colors and discovered that it is possible to add new empty lines without restriction. Is there any way to prevent this? 
|
|
Thanks for filling in the add/update/delete coverage, that closes what I flagged last week. CI's green and otherwise mergeable, but @SBIN2010 caught a legit one today, worth sorting before this lands. Holler if you want a hand with it. |
There was a problem hiding this comment.
Code Review Agent Run #eb3c9e
Actionable Suggestions - 1
-
superset-frontend/src/dashboard/actions/dashboardState.ts - 1
- Broken duplicate import · Line 1-1
Review Details
-
Files reviewed - 33 · Commit Range:
b9e6c14..5ef3ad2- superset-frontend/src/dashboard/components/PropertiesModal/sections/LabelColorMapping.tsx
- superset/translations/ar/LC_MESSAGES/messages.po
- superset/translations/ca/LC_MESSAGES/messages.po
- superset/translations/cs/LC_MESSAGES/messages.po
- superset/translations/de/LC_MESSAGES/messages.po
- superset/translations/en/LC_MESSAGES/messages.po
- superset/translations/es/LC_MESSAGES/messages.po
- superset/translations/fa/LC_MESSAGES/messages.po
- superset/translations/fi/LC_MESSAGES/messages.po
- superset/translations/fr/LC_MESSAGES/messages.po
- superset/translations/it/LC_MESSAGES/messages.po
- superset/translations/ja/LC_MESSAGES/messages.po
- superset/translations/ko/LC_MESSAGES/messages.po
- superset/translations/lv/LC_MESSAGES/messages.po
- superset/translations/messages.pot
- superset/translations/mi/LC_MESSAGES/messages.po
- superset/translations/nl/LC_MESSAGES/messages.po
- superset/translations/pl/LC_MESSAGES/messages.po
- superset/translations/pt/LC_MESSAGES/messages.po
- superset/translations/pt_BR/LC_MESSAGES/messages.po
- superset/translations/ro/LC_MESSAGES/messages.po
- superset/translations/ru/LC_MESSAGES/messages.po
- superset/translations/sk/LC_MESSAGES/messages.po
- superset/translations/sl/LC_MESSAGES/messages.po
- superset/translations/sr/LC_MESSAGES/messages.po
- superset/translations/sr_Latn/LC_MESSAGES/messages.po
- superset/translations/ta/LC_MESSAGES/messages.po
- superset/translations/th/LC_MESSAGES/messages.po
- superset/translations/tr/LC_MESSAGES/messages.po
- superset/translations/uk/LC_MESSAGES/messages.po
- superset/translations/zh/LC_MESSAGES/messages.po
- superset/translations/zh_TW/LC_MESSAGES/messages.po
- superset-frontend/src/dashboard/actions/dashboardState.ts
-
Files skipped - 0
-
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful
- Eslint (Linter) - ✔︎ Successful
Bito Usage Guide
Commands
Type the following command in the pull request comment and save the comment.
-
/review- Manually triggers an incremental AI Review. -
/review full- 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 Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.
Documentation & Help
AI Code Review powered by
Code Review Agent Run #520355Actionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help AI Code Review powered by |
Code Review Agent Run #b5235eActionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help AI Code Review powered by |
There was a problem hiding this comment.
Code Review Agent Run #810375
Actionable Suggestions - 1
-
superset/translations/ar/LC_MESSAGES/messages.po - 1
- Orphaned untranslated string · Line 22209-22210
Additional Suggestions - 5
-
superset/translations/ja/LC_MESSAGES/messages.po - 1
-
Untranslated msgstr empty · Line 18743-18744The new entry for `msgid "valuename"` ships with an empty `msgstr ""`, so the Japanese catalog leaves this string untranslated and the source text is shown to ja users. The term exists in `superset/translations/messages.pot` (line 18584), so it is a real translatable string. Other ja entries like `msgid "var"` -> `分散` are translated; please fill in the translation or list the term in `do-not-translate.txt`.
-
-
superset/translations/fa/LC_MESSAGES/messages.po - 1
-
Empty msgstr untranslated entry · Line 21688-21689New `msgid "valuename"` entry (synced from `messages.pot:18584`) ships with an empty `msgstr ""`, so fa-locale users fall back to the untranslated English string wherever it renders. BITO.md rule [13343] requires empty msgstr fields to be filled before merge. Please add the Persian translation (e.g. "نام مقدار") with translator verification. ([CWE-1188](https://cwe.mitre.org/data/definitions/1188.html))
-
-
superset/translations/ko/LC_MESSAGES/messages.po - 1
-
Empty msgstr for valuename · Line 30955-30956Lines 30955-30956 add `msgid "valuename"` with an empty `msgstr ""`, so Korean-locale users get the untranslated English label if this string renders. BITO.md rules 12743/13343 require empty msgstr fields to be filled before merge. Note: a repo-wide search finds no `valuename` occurrence outside translation files — please confirm the source string still exists, then fill msgstr (e.g. "값 이름").
-
-
superset/translations/ru/LC_MESSAGES/messages.po - 1
-
Untranslated ru msgstr · Line 20036-20037The regenerated catalog adds `msgid "valuename"` with an empty `msgstr`, so Russian users get the English fallback wherever this string renders. The entry mirrors `messages.pot` (regenerated 2026-09-22 19:01), but the ru catalog otherwise translates its entries; note the msgid no longer appears in any .py/.ts/.js source, so it may be stale in the template itself. Fill the translation or drop the stale msgid upstream.
-
-
superset/translations/messages.pot - 1
-
Re-added obsolete string · Line 18584-18585`valuename` is re-added to the catalog but has zero source usage (grep of `superset/` + `superset-frontend/` excluding translations returns 0) and was removed as obsolete in commit `7d0645b431`. Re-adding it with an empty `msgstr` reintroduces dead catalog content. Drop it from `messages.pot` and the ca/fi/pl/ro/sr locale files.
-
Filtered by Review Rules
Bito filtered these suggestions based on rules created automatically for your feedback. Manage rules.
-
superset/translations/zh/LC_MESSAGES/messages.po - 1
- CWE-1273: Empty Translation Fallback · Line 21009-21009
Review Details
-
Files reviewed - 31 · Commit Range:
1e889db..b8a4528- superset/translations/ar/LC_MESSAGES/messages.po
- superset/translations/ca/LC_MESSAGES/messages.po
- superset/translations/cs/LC_MESSAGES/messages.po
- superset/translations/de/LC_MESSAGES/messages.po
- superset/translations/en/LC_MESSAGES/messages.po
- superset/translations/es/LC_MESSAGES/messages.po
- superset/translations/fa/LC_MESSAGES/messages.po
- superset/translations/fi/LC_MESSAGES/messages.po
- superset/translations/fr/LC_MESSAGES/messages.po
- superset/translations/it/LC_MESSAGES/messages.po
- superset/translations/ja/LC_MESSAGES/messages.po
- superset/translations/ko/LC_MESSAGES/messages.po
- superset/translations/lv/LC_MESSAGES/messages.po
- superset/translations/messages.pot
- superset/translations/mi/LC_MESSAGES/messages.po
- superset/translations/nl/LC_MESSAGES/messages.po
- superset/translations/pl/LC_MESSAGES/messages.po
- superset/translations/pt/LC_MESSAGES/messages.po
- superset/translations/pt_BR/LC_MESSAGES/messages.po
- superset/translations/ro/LC_MESSAGES/messages.po
- superset/translations/ru/LC_MESSAGES/messages.po
- superset/translations/sk/LC_MESSAGES/messages.po
- superset/translations/sl/LC_MESSAGES/messages.po
- superset/translations/sr/LC_MESSAGES/messages.po
- superset/translations/sr_Latn/LC_MESSAGES/messages.po
- superset/translations/ta/LC_MESSAGES/messages.po
- superset/translations/th/LC_MESSAGES/messages.po
- superset/translations/tr/LC_MESSAGES/messages.po
- superset/translations/uk/LC_MESSAGES/messages.po
- superset/translations/zh/LC_MESSAGES/messages.po
- superset/translations/zh_TW/LC_MESSAGES/messages.po
-
Files skipped - 0
-
Tools
- 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 an incremental AI Review. -
/review full- 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 Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.
Documentation & Help
AI Code Review powered by
Code Review Agent Run #d3b451Actionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help AI Code Review powered by |
Code Review Agent Run #145ee4Actionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help AI Code Review powered by |
rusackas
left a comment
rusackas
left a comment
There was a problem hiding this comment.
Thanks @jaymasiwal, this looks good now. The add/update/delete tests and the empty-row fix cover what I raised. Needs a rebase, then I'll merge.
@bito-code-review the open AdvancedSection.tsx thread about missing test coverage is stale: the component now lives in StylingSection.tsx, and LabelColorMapping.test.tsx and StylingSection.test.tsx cover add/update/delete and the JSON sync.
Squashed from the original 54-commit branch (including intermediate sync-with-master merges) and rebased onto current master. Translation catalogs are regenerated fresh against the merged code in a follow-up step rather than carrying forward the branch's stale babel_update.sh snapshot. Co-Authored-By: Jay Masiwal <jaymasiwal@users.noreply.github.com>
Runs scripts/translations/babel_update.sh against the rebased code so the new Label Colors strings are extracted and merged cleanly, instead of carrying forward the branch's stale snapshot (which included drift unrelated to this feature and conflicted with every locale file). Verified: msgfmt --check shows the same pre-existing fatal errors as unmodified master (fr/it/pt/sl), nothing new. check_translation_regression.py reports zero regressions across all 29 locales. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
Thanks @rusackas! The branch has now been rebased onto the latest master, CI is fully green, and there are no conflicts. Appreciate the review! |
SBIN2010
left a comment
SBIN2010
left a comment
There was a problem hiding this comment.
LGTM!
@jaymasiwal Thank you for your contribution and for your patience in coordinating all of this.
|
Thanks @SBIN2010! Really appreciate it. Huge thanks to everyone who shared feedback and helped shape this contribution.🙏🏻 |
|
Congrats @jaymasiwal, it's hard to ship big contributions like this especially with the UI component and you really stuck with it. Superset has needed this for years, I'm really excited to see it! |
|
Thanks @sfirke, appreciate it! Thanks for all the feedback and direction from the start, it made a big difference. |
SUMMARY
This PR implements a native GUI for managing
label_colorsin the Dashboard Properties Modal. Following community feedback, the GUI has been migrated from the "Advanced" tab to the "Styling" tab to sit alongside the Color Scheme selection for a more intuitive UX.CHANGES
LabelColorMappingcomponent using Superset's native design tokens and Emotion variables.StylingSection.tsx.json_metadatato ensure manual JSON edits and GUI edits stay perfectly in sync.BEFORE/AFTER SCREENSHOTS
(See the thread below for the updated PoC screenshot showing the GUI in the Styling Section)
TESTING INSTRUCTIONS
ADDITIONAL INFORMATION