codeant-ai-for-open-source[bot] commented on code in PR #44147:
URL: https://github.com/apache/superset/pull/44147#discussion_r4024396804
##########
superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts:
##########
@@ -592,6 +602,10 @@ export default function transformProps(
legendOrientation,
showLegend,
theme,
+ false, // zoomable โ Pie charts do not use the zoom control
+ undefined, // legendState โ not tracked per-item in Pie
+ undefined, // padding โ Pie passes width instead
+ width, // horizontalLegendWidth: truncate long category names in
Top/Bottom legends
Review Comment:
**Suggestion:** Each horizontal legend item receives the full chart width,
so multiple long names can consume more than one row without truncating and
overflow the legend area. [css layout issue]
**Assessment:** ๐ `Major` ยท ๐ `Occurrence: Sometimes`
[](https://docs.codeant.ai/cli/resolve-pr-comments-skill)
[](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=999f021f1d774e08907454e088a30422&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
[](https://app.codeant.ai/fix-in-ide?tool=vscode-claude&prompt_id=999f021f1d774e08907454e088a30422&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
<details>
<summary><b>Prompt for AI Agent ๐ค </b></summary>
```mdx
This is a comment left during a code review.
**Path:**
superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts
**Line:** 608:608
**Comment:**
*Css Layout Issue: Each horizontal legend item receives the full chart
width, so multiple long names can consume more than one row without truncating
and overflow the legend area.
Validate the correctness of the flagged issue. If correct, How can I resolve
this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask
user if the user wants to fix the rest of the comments as well. if said yes,
then fetch all the comments validate the correctness and implement a minimal fix
```
</details>
<a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F44147&comment_hash=159ace900d05e936f1ad669a48f80a01011044863e092aeb99fe1eb50d8e55fb&reaction=like'>๐</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F44147&comment_hash=159ace900d05e936f1ad669a48f80a01011044863e092aeb99fe1eb50d8e55fb&reaction=dislike'>๐</a>
##########
superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts:
##########
@@ -825,6 +834,51 @@ export function getLegendProps(
const getLegendWidth = (paddingWidth: number) =>
Math.max(paddingWidth - MARGIN_GUTTER, MIN_LEGEND_WIDTH);
+ /**
+ * Returns a legend tooltip config that:
+ * 1. Only appears when the label is actually truncated (name wider than
maxTextWidth)
+ * 2. Positions the tooltip ABOVE the legend item to avoid overlapping the
chart
+ */
+ const makeLegendTooltip = (maxTextWidth: number): any => ({
+ show: true,
+ confine: false, // allow tooltip to render above the canvas boundary
+ position: (
+ _pos: [number, number],
+ _params: unknown,
+ _el: unknown,
+ elRect: { x: number; y: number; width: number; height: number },
+ size: { contentSize: [number, number]; viewSize: [number, number] },
+ ) => {
+ const tooltipWidth = size.contentSize[0];
+ const tooltipHeight = size.contentSize[1];
+ // Center horizontally over the hovered legend item
+ const x = Math.min(
+ Math.max(elRect.x + elRect.width / 2 - tooltipWidth / 2, 0),
+ size.viewSize[0] - tooltipWidth,
+ );
+ // Place above the legend item; negative y appears above canvas with
confine:false
+ const y = elRect.y - tooltipHeight - 8;
+ return [x, y];
+ },
+ formatter: (params: { name: string }) => {
+ // Suppress tooltip when text fits โ approx 7.5px per char at default
font size
+ const approxMaxChars = Math.floor(maxTextWidth / 7.5);
+ return params.name.length > approxMaxChars ? params.name : '';
+ },
Review Comment:
**Suggestion:** The tooltip returns the category name as HTML without
escaping it, so user-controlled names containing markup can execute in the
rendered tooltip. [security]
**Assessment:** ๐ด `Critical` ยท ๐ `Occurrence: Sometimes`
[](https://docs.codeant.ai/cli/resolve-pr-comments-skill)
[](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=80b7b872477249daa8fe496bb548846d&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
[](https://app.codeant.ai/fix-in-ide?tool=vscode-claude&prompt_id=80b7b872477249daa8fe496bb548846d&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
<details>
<summary><b>Prompt for AI Agent ๐ค </b></summary>
```mdx
This is a comment left during a code review.
**Path:** superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts
**Line:** 867:867
**Comment:**
*Security: The tooltip returns the category name as HTML without
escaping it, so user-controlled names containing markup can execute in the
rendered tooltip.
Validate the correctness of the flagged issue. If correct, How can I resolve
this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask
user if the user wants to fix the rest of the comments as well. if said yes,
then fetch all the comments validate the correctness and implement a minimal fix
```
</details>
<a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F44147&comment_hash=db57932d7cedb044f09824b150550be77e22165fb6c16d0f8d002d605f19ef7b&reaction=like'>๐</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F44147&comment_hash=db57932d7cedb044f09824b150550be77e22165fb6c16d0f8d002d605f19ef7b&reaction=dislike'>๐</a>
--
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]
