alex-poor opened a new issue, #40783:
URL: https://github.com/apache/superset/issues/40783
### Bug description
The category color swatch in deck.gl chart legends renders as a **black
square** in Chromium-based browsers (Chrome/Edge/Chromium) instead of the
category's color. It renders correctly in Firefox on the same machine
(CachyOS). Colleagues (@FullStackChef) on windows note it occurs in Firefox as
well.
**Root cause**: The legend swatch is the Unicode glyph ◼ (U+25FC BLACK
MEDIUM SQUARE) / ◻ (U+25FB WHITE MEDIUM SQUARE), tinted only via CSS `color` on
its `<span>`:
```
//
superset-frontend/plugins/preset-chart-deckgl/src/components/Legend.tsx:108-125
const style = { color: `rgba(${v.color?.join(', ')})` };
const icon = v.enabled ? '\u25FC' : '\u25FB';
...
<span style={style}>{icon}</span> {formatCategoryLabel(k)}
```
U+25FC is in Unicode's `Emoji` set but lacks `Emoji_Presentation`, so
presentation is browser/OS-decided with no variation selector. Chromium
resolves it to a color-emoji font (Noto Color Emoji / Segoe UI Emoji / Apple
Color Emoji), whose glyphs carry baked-in color and ignore CSS `color`
resulting in black square. Firefox uses a monochrome text glyph that honors
`color` → correct tint.
**Affected charts**: Polygon, Scatterplot, Arc, Path (all share
`components/Legend.tsx`).
## How to reproduce
1. On a machine with a color-emoji font installed (default on
Windows/macOS/most Linux desktops), open Chrome/Edge/Chromium.
2. Create a deck.gl Polygon (or Scatterplot/Arc/Path) chart with a
categorical color so the legend shows category swatches.
3. Observe the swatch left of each category label.
**Minimal standalone repro** (no Superset):
`<span style="color: rgb(40,151,191); font-family: 'Noto Color Emoji','Segoe
UI Emoji',sans-serif;">◼</span>`
→ black square in Chromium; correct blue in Firefox or with the emoji font
removed.
## Expected results
Swatch matches the category color (as in Firefox).
## Actual results
Swatch is a black/dark square regardless of category color.
### Screenshots/recordings
Firefox on CachyOS working properly: <img width="1623" height="765"
alt="Image"
src="https://github.com/user-attachments/assets/427909a9-3e97-4b44-8faa-028d769aab70";
/>
Chromium on CachyOS showing glyph issue:
<img width="1331" height="624" alt="Image"
src="https://github.com/user-attachments/assets/80c4fd82-9ba0-4586-afdb-0a0a8cf02f97";
/>
### Superset version
master / latest-dev
### Python version
3.11
### Node version
16
### Browser
Chrome
### Additional context
* Reproduced on latest master
* Searched the issue tracker (closest are #20458 / #32841, but those are
color-mapping/count bugs, not this)
## Provenance.
The ◼/◻ glyph tinted only by a CSS color on its <span> was introduced in
2019 by PR #7188 ("fix: deck.gl polygon tooltip") and has been copied unchanged
through every subsequent refactor: the TS conversion in #24933 (Kamil
Gabryjelski / kgabryje, Aug 2023, which also added the stray className="dupa")
and the deck.gl/MapLibre modernization in #38035 (Birk Skyum, merged to master
as commit c49641538d, 2026), where the file was duplicated verbatim into the
current preset-chart-deckgl plugin. So it's a ~7-year-old latent bug, not a
recent regression.
### Checklist
- [x] I have searched Superset docs and Slack and didn't find a solution to
my problem.
- [x] I have searched the GitHub issue tracker and didn't find a similar bug
report.
- [x] I have checked Superset's logs for errors and if I found a relevant
Python stacktrace, I included it here as text in the "additional context"
section.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
