sfirke opened a new issue, #45483:
URL: https://github.com/apache/superset/issues/45483
### Bug description
(I used Claude AI to assist in writing up an error I encountered - I have
read, edited, and posted this by hand)
In 7.0.0rc2, the rich tooltip on Timeseries charts no longer shows the
colored dot next to each series name. Each row is just the name and value. In
6.1.0, every row starts with a dot in the series' color. Without it, you can't
tell which tooltip row belongs to which line unless you read the legend.
The marker HTML is still generated, but the HTML sanitizer strips almost all
of its styling. Here is a tooltip row from the live 7.0.0rc2 DOM:
```html
<td style="text-align:left; padding-left:0px; max-width:300px;
overflow:hidden; text-overflow:ellipsis;">
<span style="border-radius:50%; margin-right:5px;"></span>Sum of PFOS +
PFOA
</td>
```
The marker is built by `getSymbolMarker` in
`superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts`:
```ts
case 'circle':
return `<span style="
display:inline-block;width:${size}px;height:${size}px;
border-radius:50%;background:${color};margin-right:5px"></span>`;
```
The row is then passed through `tooltipHtml()` → `sanitizeHtml()`. #40627
changed the sanitizer in
`superset-frontend/packages/superset-ui-core/src/utils/html.tsx` from `css:
false` to `css: { whiteList: allowedCssProperties }`. That allowlist has no
`display`, `width` or `height`, which is deliberate according to its comment.
It also has no `background` shorthand; it has `background-color`, but the
marker uses `background`. So only `border-radius` and `margin-right` survive,
and the marker is an empty, zero-size inline span.
Every `getSymbolMarker` variant (circle, rect, roundRect, triangle, diamond,
pin) relies on `display:inline-block` plus `width`/`height` or `transform`, so
all of them are affected.
The same code is on `master` today.
The same probably applies to other ECharts plugins that put ECharts' own
`params.marker` into `tooltipHtml()`. ECharts builds that marker as
`display:inline-block; ... width; height; background-color`. Examples are
Histogram (`Histogram/transformProps.ts`) and Mixed Timeseries (via
`formatForecastTooltipSeries` in `utils/forecast.ts`).
**How to reproduce**
1. Create a Line Chart with one or more metrics (adding a Formula annotation
layer gives you several tooltip rows quickly).
2. Leave the tooltip on its default "rich tooltip" setting.
3. Hover over the chart. The tooltip rows have no colored dots.
4. Compare with the same chart on 6.1.0, where each row starts with a dot in
the series color.
**Expected behavior**
Each tooltip row starts with a marker in the series' color, as in 6.1.0.
**Proposed fix**
Build the marker only from properties the allowlist keeps, rather than
loosening the allowlist (its sizing restrictions are a sensible security
choice). Options:
- A colored glyph: `<span style="color:${color};margin-right:5px">●</span>`
(or ■, ▲, ◆ for the other symbols). This only needs `color` and `margin-right`.
- Or allow a narrowly bounded marker some other way that the sanitizer
approves.
A unit test should run `getSymbolMarker` output through `sanitizeHtml` and
check that the marker still has a visible color. Such a test that would have
caught this.
### Screenshots/recordings
6.1.0 has colored dots in the tooltip (don't worry about the grid lines,
that's my custom CSS):
<img width="1540" height="477" alt="Image"
src="https://github.com/user-attachments/assets/cd1e7b1a-4dd8-45c8-aeb6-7ad9e8642f98";
/>
7.0.0rc2 does not:
<img width="1552" height="505" alt="Image"
src="https://github.com/user-attachments/assets/9b016885-0d1a-4e5d-98b0-691b40d9bcaf";
/>
### Superset version
master / latest-dev
### Python version
Not applicable
### Node version
Not applicable
### Browser
Not applicable
### Additional context
- Superset 7.0.0rc2, Docker image built from the release. Works as expected
on 6.1.0.
- Introduced by #40627 (restrict allowed CSS properties in sanitized HTML).
- Not related to #43397 (escaping untrusted strings in tooltips); that
change escapes the series name, not the marker.
### Checklist
- [ ] I have searched Superset docs and Slack and didn't find a solution to
my problem.
- [ ] I have searched the GitHub issue tracker and didn't find a similar bug
report.
- [ ] 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]
