fix(deckgl): render legend swatch as a coloured box, not an emoji glyph by FullStackChef · Pull Request #40784 · apache/superset

FullStackChef · 2026-06-05T01:31:03Z

SUMMARY

The deck.gl chart legend rendered each category colour swatch as the Unicode
glyph ◼ (U+25FC) / ◻ (U+25FB) tinted only via the CSS color property.
Those code points are in Unicode's Emoji set but lack Emoji_Presentation, so
Chromium-based browsers (Chrome/Edge/Chromium) resolve them to a colour-emoji
font (Noto Color Emoji / Segoe UI Emoji / Apple Color Emoji). Emoji glyphs
carry baked-in colour and ignore CSS color, so the swatch renders as a
black square regardless of the category colour. Firefox uses a monochrome
text glyph that honours color, which is why it was unaffected. (Full
diagnosis by @alex-poor in #40783.)

This replaces the colour-tinted glyph with a real bordered <span> box whose
background-color is the category colour — filled when the category is
enabled, hollow (border only) when disabled. A box renders nothing through the
font layer, so it is immune to emoji-font presentation and always reflects the
category colour. Interactions (toggle / double-click) are unchanged.

The component is shared by the Polygon, Scatterplot, Arc and Path deck.gl
charts, so all four are fixed by this change.

It also removes a stray leftover className="dupa" on the legend container
(introduced inadvertently in the #24933 TS conversion; no CSS targets it).

BEFORE/AFTER

Before (Chromium): a black square for every category — see the screenshots
in #40783.

After: each swatch shows its category colour, matching the map

TESTING INSTRUCTIONS

In a Chromium-based browser (Chrome/Edge) on a machine with a colour-emoji
font installed (default on Windows/macOS/most Linux desktops).
Open a deck.gl Polygon (or Scatterplot / Arc / Path) chart configured with a
categorical colour so the legend shows category swatches.
The swatch to the left of each category label should now match the category
colour. Previously it was a black square.

ADDITIONAL INFORMATION

Has associated issue: Fixes deck.gl categorical legend swatch renders black in Chromium (emoji-font presentation of U+25FC ignores CSS color) #40783
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 checks performed on DB migrations
Introduces new feature or API
Removes existing feature or API

bito-code-review · 2026-06-05T01:31:13Z

Code Review Agent Run #c86eef

Actionable Suggestions - 0

Review Details

Files reviewed - 1 · Commit Range: 7a58387..7a58387
- superset-frontend/plugins/preset-chart-deckgl/src/components/Legend.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

The deck.gl chart legend drew each category swatch as the Unicode glyph U+25FC / U+25FB tinted via the CSS `color` property. Those code points are in Unicode's Emoji set but lack Emoji_Presentation, so Chromium resolves them to a colour-emoji font (Noto Color Emoji / Segoe UI Emoji / Apple Color Emoji) whose glyphs carry baked-in colour and ignore `color` - the swatch renders as a black square regardless of the category colour. Firefox uses a monochrome text glyph that honours `color`, so it was unaffected. Replace the colour-tinted glyph with a real bordered box whose background-color is the category colour (filled when enabled, hollow when disabled), centred in the flex row via align-self. A box renders nothing through the font layer, so it is immune to emoji-font presentation. Also removes a stray leftover className="dupa" on the legend container. Affects the Polygon, Scatterplot, Arc and Path charts, which share this component. Fixes apache#40783 Signed-off-by: Brett Smith <brett@pukekos.co.nz>

FullStackChef · 2026-06-05T02:19:15Z

bito-code-review · 2026-06-05T04:53:14Z

Code Review Agent Run #d13269

Actionable Suggestions - 0

Review Details

Files reviewed - 1 · Commit Range: bca676b..bca676b
- superset-frontend/plugins/preset-chart-deckgl/src/components/Legend.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

sadpandajoe · 2026-06-05T17:26:39Z

@FullStackChef would you mind putting before and after screenshots into your PR summary?

Copilot

Pull request overview

This PR fixes deck.gl categorical chart legend swatches rendering as black squares in Chromium-based browsers by replacing the Unicode square glyph (affected by emoji-font rendering that ignores CSS color) with a real <span> box whose background-color/border reflect the category color. It also removes an unintended leftover className="dupa" on the legend container.

Changes:

Replace legend swatch glyph rendering with a bordered <span> box (filled when enabled, hollow when disabled).
Remove stray className="dupa" from the legend container.

  const categories = Object.entries(categoriesObject).map(([k, v]) => {
-    const style = { color: `rgba(${v.color?.join(', ')})` };
-    const icon = v.enabled ? '\u25FC' : '\u25FB';
+    const color = `rgba(${v.color?.join(', ')})`;


bito-code-review · 2026-06-05T17:30:00Z

The suggestion to convert the alpha component of the color array from a 0–255 range to a 0–1 range for the CSS rgba() function is correct. Since CSS rgba() expects alpha values between 0 and 1, using the raw 0–255 value will cause semi-transparent colors to render as fully opaque. You should update the color string construction to normalize the alpha component, defaulting to 1 if it is missing.

superset-frontend/plugins/preset-chart-deckgl/src/components/Legend.tsx

const colorArray = v.color || [];
const r = colorArray[0];
const g = colorArray[1];
const b = colorArray[2];
const a = colorArray.length > 3 ? colorArray[3] / 255 : 1;
const color = `rgba(${r}, ${g}, ${b}, ${a})`;

codecov · 2026-06-05T17:53:53Z

Codecov Report

❌ Patch coverage is 0% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 64.06%. Comparing base (645aa3b) to head (5f13329).
⚠️ Report is 2 commits behind head on master.

Files with missing lines	Patch %	Lines
...gins/preset-chart-deckgl/src/components/Legend.tsx	0.00%	3 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##           master   #40784   +/-   ##
=======================================
  Coverage   64.06%   64.06%           
=======================================
  Files        2664     2664           
  Lines      143922   143923    +1     
  Branches    33096    33096           
=======================================
+ Hits        92204    92205    +1     
  Misses      50108    50108           
  Partials     1610     1610

Flag	Coverage Δ
javascript	`67.63% <0.00%> (+<0.01%)`	⬆️

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

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

pull-request-size Bot added the size/S label Jun 5, 2026

dosubot Bot added change:frontend Requires changing the frontend viz:charts:deck.gl Related to deck.gl charts labels Jun 5, 2026

github-actions Bot added the plugins label Jun 5, 2026

FullStackChef closed this Jun 5, 2026

FullStackChef force-pushed the fix/deckgl-legend-swatch-emoji branch from 7a58387 to 42367af Compare June 5, 2026 01:50

pull-request-size Bot added size/XS and removed size/S labels Jun 5, 2026

FullStackChef reopened this Jun 5, 2026

pull-request-size Bot added size/S and removed size/XS labels Jun 5, 2026

Merge branch 'master' into fix/deckgl-legend-swatch-emoji

5f13329

sadpandajoe requested review from DamianPendrak and Copilot June 5, 2026 17:26

Copilot started reviewing on behalf of sadpandajoe June 5, 2026 17:27 View session

Copilot AI reviewed Jun 5, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(deckgl): render legend swatch as a coloured box, not an emoji glyph#40784

fix(deckgl): render legend swatch as a coloured box, not an emoji glyph#40784
FullStackChef wants to merge 2 commits into
apache:masterfrom
FullStackChef:fix/deckgl-legend-swatch-emoji

FullStackChef commented Jun 5, 2026 •

edited

Loading

Uh oh!

bito-code-review Bot commented Jun 5, 2026 •

edited

Loading

Code Review Agent Run #c86eef

Uh oh!

FullStackChef commented Jun 5, 2026

Uh oh!

bito-code-review Bot commented Jun 5, 2026 •

edited

Loading

Code Review Agent Run #d13269

Uh oh!

sadpandajoe commented Jun 5, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

bito-code-review Bot commented Jun 5, 2026

Uh oh!

codecov Bot commented Jun 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

FullStackChef commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

SUMMARY

BEFORE/AFTER

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Uh oh!

bito-code-review Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #c86eef

Uh oh!

FullStackChef commented Jun 5, 2026

Uh oh!

bito-code-review Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #d13269

Uh oh!

sadpandajoe commented Jun 5, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

bito-code-review Bot commented Jun 5, 2026

Uh oh!

codecov Bot commented Jun 5, 2026

Codecov Report

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

FullStackChef commented Jun 5, 2026 •

edited

Loading

bito-code-review Bot commented Jun 5, 2026 •

edited

Loading

bito-code-review Bot commented Jun 5, 2026 •

edited

Loading