aobispo-bsale commented on issue #36807:
URL: https://github.com/apache/superset/issues/36807#issuecomment-5180033206
Root cause found for the 1px gap, and it is a one-line fix.
## Cause
`superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts`:
```ts
const labelProps = {
color: theme.colorText,
borderColor: theme.colorBgBase,
borderWidth: 1,
};
```
On an ECharts **label**, `borderColor`/`borderWidth` draw a **box around the
text**, not a stroke on the glyphs — the glyph stroke is
`textBorderColor`/`textBorderWidth`. Painted with `theme.colorBgBase`, that box
renders as a 1px line in the background colour: white in light theme,
near-black under the dark algorithm (`colorBgBase` resolves to `#000`).
`labelProps` is spread into `series.label`, `series.upperLabel` and
`series.emphasis.label`, so every label gets the box.
This matches the version history in the original report: `labelProps` does
not exist in 4.1.x (which imports `BORDER_COLOR` from `./constants` and sets no
label border), and was introduced in 6.0.0. No label border in 4.1.x → no gap.
## Why it was hard to pin down
The box lands on fractional coordinates, so it rasterises as 1 device px
with asymmetric antialiasing on either side, and it **moves or disappears with
any layout change** — adding or removing a category relocates it. That makes it
look like a canvas rasterisation artifact rather than a configured style, and
it is completely immune to `itemStyle.borderWidth`, `itemStyle.gapWidth` and
`borderColor`, since it is not the tile separator at all.
Two measurements that rule out the usual suspects:
- **Not the renderer.** Rendering the same option with `renderer: 'canvas'`
and `renderer: 'svg'`, then analysing native browser screenshots, shows the
identical 1px line at the identical coordinate.
- **Not the ECharts version.** The same option renders the line under both
echarts `5.4.1` (what 4.1.x resolved to) and `5.6.0`.
In the SVG DOM the line corresponds to a `<path fill="none" stroke="#fff">`
— an unfilled, stroked box, i.e. the label border.
## Fix
Drop the two properties:
```diff
const labelProps = {
color: theme.colorText,
- borderColor: theme.colorBgBase,
- borderWidth: 1,
};
```
If the intent was text legibility, the correct properties are
`textBorderColor` / `textBorderWidth`, which stroke the glyphs and do not
create a box.
## Verification
Pixel measurement over 5 different treemap geometries, scanning canvas rows
and histogramming contiguous runs of the background colour:
| Geometry | hairlines before | hairlines after |
|---|---|---|
| 1 | 1 | **0** |
| 2 | 1 | **0** |
| 3 | 0 | 0 |
| 4 | 2 | **0** |
| 5 | 0 | 0 |
Every geometry that showed hairlines shows none after the change, and the
tile separator widths are unchanged (the wide runs stay at 19 and 11–12 device
px), so tile separation is preserved.
Happy to open a PR if useful.
--
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]
