codeant-ai-for-open-source[bot] commented on code in PR #40449:
URL: https://github.com/apache/superset/pull/40449#discussion_r3305723531
##########
superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts:
##########
@@ -317,6 +317,7 @@ export default function transformProps(
groupby,
selectedValues: filterState.selectedValues || [],
onContextMenu,
+ onDrillDown,
Review Comment:
**Suggestion:** This only forwards `onDrillDown` in transformed props, but
Treemap click handling still does not invoke it, so Treemap never actually
drills down despite being advertised as supported. Wire `onDrillDown` into
Treemap click events (similar to other plugins) so user clicks can trigger
hierarchy navigation. [incomplete implementation]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ❌ Treemap charts never initiate drill-down on click.
- ⚠️ Treemap cannot participate in drill hierarchies.
```
</details>
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. Chart hooks, including `onDrillDown`, are exposed by `ChartRenderer` via
its `hooks`
bag at `superset-frontend/src/components/Chart/ChartRenderer.tsx:265-271`,
and
`DrillDownHost` only supplies a non-undefined `onDrillDown` when a hierarchy
is configured
(see
`superset-frontend/src/components/Chart/DrillDown/DrillDownHost.tsx:82-86`).
2. For Treemap, `transformProps` at
`superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts:107-129`
destructures `hooks` as `const { setDataMask = () => {}, onContextMenu,
onDrillDown } =
hooks;` and forwards `onDrillDown` in the returned props object at
`transformProps.ts:309-323`, specifically `onDrillDown,` on line 320 in the
new hunk.
3. The Treemap renderer `EchartsTreemap` at
`superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx:34-47`
defines its parameter destructuring as `{ echartOptions, emitCrossFilters,
groupby,
height, labelMap, onContextMenu, refs, setDataMask, selectedValues, width,
formData,
coltypeMapping }` (no `onDrillDown`), and its `eventHandlers` at
`EchartsTreemap.tsx:112-156` only call `handleChange` to emit cross-filters
and
`onContextMenu` for context menus; there is no reference to `onDrillDown`.
4. When a Treemap chart is used in a dashboard with a drilldown hierarchy
configured (so
`onDrillDown` is provided through hooks) and the user clicks a node, the
click handler at
`EchartsTreemap.tsx:112-116` runs `handleChange` and updates the data mask,
but because
`onDrillDown` is never plumbed into `EchartsTreemap` or invoked from its
`eventHandlers`,
no drill-down navigation occurs and the DrillDownHost state never changes,
meaning Treemap
cannot participate in the advertised hierarchical drilldown feature.
```
</details>
[Fix in
Cursor](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=6077b7cbc8384b7e8f5be9ef1fb69828&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
| [Fix in VSCode
Claude](https://app.codeant.ai/fix-in-ide?tool=vscode-claude&prompt_id=6077b7cbc8384b7e8f5be9ef1fb69828&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
*(Use Cmd/Ctrl + Click for best experience)*
<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/Treemap/transformProps.ts
**Line:** 320:320
**Comment:**
*Incomplete Implementation: This only forwards `onDrillDown` in
transformed props, but Treemap click handling still does not invoke it, so
Treemap never actually drills down despite being advertised as supported. Wire
`onDrillDown` into Treemap click events (similar to other plugins) so user
clicks can trigger hierarchy navigation.
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%2F40449&comment_hash=921f1f27436abc08f40e6779461edc57677ed96084c99e47f980b8ed5f38938d&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F40449&comment_hash=921f1f27436abc08f40e6779461edc57677ed96084c99e47f980b8ed5f38938d&reaction=dislike'>👎</a>
##########
superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts:
##########
@@ -161,10 +161,43 @@ export const allEventHandlers = (
selectedValues,
coltypeMapping,
formData,
+ onDrillDown,
} = transformedProps;
+
+ // When a drill-down hierarchy is configured, left-click drills instead of
+ // emitting a cross-filter. The DrillDownHost provides onDrillDown only when
+ // a hierarchy exists.
+ const hasDrillHierarchy = !!onDrillDown;
+
+ const drillDownClickHandler =
+ hasDrillHierarchy && groupby.length > 0
+ ? (e: { name: string }) => {
+ const values = labelMap[e.name];
+ if (!values) return;
+ const drillFilters: BinaryQueryObjectFilterClause[] = [];
+ groupby.forEach((dimension, i) => {
+ drillFilters.push({
+ col: dimension,
+ op: '==',
+ val: values[i],
+ formattedVal: formatSeriesName(values[i], {
+ timeFormatter: getTimeFormatter(formData.dateFormat),
+ numberFormatter: getNumberFormatter(formData.numberFormat),
+ coltype: coltypeMapping?.[getColumnLabel(dimension)],
+ }),
+ });
+ });
+ const label = drillFilters
+ .map(f => f.formattedVal ?? String(f.val))
+ .join(', ');
+ onDrillDown(drillFilters, label);
+ }
+ : undefined;
+
const eventHandlers: EventHandlers = {
- click:
- groupby.length > 0
+ click: drillDownClickHandler
Review Comment:
**Suggestion:** When `onDrillDown` is present, the click path bypasses
`clickEventHandler` entirely, so no cross-filter data mask is emitted for
Pie/Funnel/Gauge/Radar/BoxPlot clicks. This breaks dashboard synchronization
during drill-down. Emit `setDataMask(getCrossFilterDataMask(...).dataMask)`
inside the drill-down click handler (guarded by `emitCrossFilters`)
before/alongside calling `onDrillDown`. [logic error]
<details>
<summary><b>Severity Level:</b> Critical 🚨</summary>
```mdx
- ❌ Pie/Funnel/Gauge/Radar/BoxPlot clicks stop cross-filtering.
- ⚠️ Dashboards lose synchronized filtering during drill-down.
```
</details>
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. Non-timeseries ECharts plugins like Pie, Funnel, Gauge, Radar, and
BoxPlot all use the
shared `allEventHandlers` helper: for example `EchartsPie` at
`superset-frontend/plugins/plugin-chart-echarts/src/Pie/EchartsPie.tsx:23-28`
computes
`const eventHandlers = allEventHandlers(props);` and passes them to
`<Echart>`, as do
`EchartsFunnel`, `EchartsGauge`, `EchartsRadar`, and `EchartsBoxPlot`.
2. Each plugin's `transformProps` forwards drilldown and cross-filter hooks:
e.g. Pie's
`transformProps` at
`superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts:124-139,259-243`
destructures `const { setDataMask = () => {}, onContextMenu, onDrillDown } =
hooks;` and
returns `setDataMask`, `emitCrossFilters`, `labelMap`, `groupby`,
`selectedValues`, and
`onDrillDown` in the transformed props (lines 229-243).
3. The shared `allEventHandlers` implementation at
`superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts:152-195`
reads
`onDrillDown` and computes `hasDrillHierarchy = !!onDrillDown` at line 170;
when
`hasDrillHierarchy && groupby.length > 0`, it defines
`drillDownClickHandler` that builds
`drillFilters` from `groupby`/`labelMap` and calls
`onDrillDown(drillFilters, label)`
(lines 172-193), but does not call `getCrossFilterDataMask` or `setDataMask`.
4. Because `eventHandlers.click` is defined at `eventHandlers.ts:197-206` as
`click:
drillDownClickHandler ? drillDownClickHandler : groupby.length > 0 ?
clickEventHandler(...) : () => {};`, whenever a drill hierarchy is
configured (so
`drillDownClickHandler` is truthy), clicks on Pie/Funnel/Gauge/Radar/BoxPlot
charts go
exclusively through `drillDownClickHandler`; the `clickEventHandler` branch
that emits
cross-filter data masks is bypassed, so `setDataMask` is never invoked on
click and other
dashboard charts no longer receive cross-filters during drill-down,
contradicting the
intended "emit cross-filter alongside drill-down" behavior described in the
PR.
```
</details>
[Fix in
Cursor](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=d3113fe14f324520871463289d4e54d6&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
| [Fix in VSCode
Claude](https://app.codeant.ai/fix-in-ide?tool=vscode-claude&prompt_id=d3113fe14f324520871463289d4e54d6&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
*(Use Cmd/Ctrl + Click for best experience)*
<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/eventHandlers.ts
**Line:** 198:206
**Comment:**
*Logic Error: When `onDrillDown` is present, the click path bypasses
`clickEventHandler` entirely, so no cross-filter data mask is emitted for
Pie/Funnel/Gauge/Radar/BoxPlot clicks. This breaks dashboard synchronization
during drill-down. Emit `setDataMask(getCrossFilterDataMask(...).dataMask)`
inside the drill-down click handler (guarded by `emitCrossFilters`)
before/alongside calling `onDrillDown`.
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%2F40449&comment_hash=4716717e958ba1839b37429d234ce93e594f3b2a3a4de9ec9413fc3287121190&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F40449&comment_hash=4716717e958ba1839b37429d234ce93e594f3b2a3a4de9ec9413fc3287121190&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]
