Skip to content

fix(echarts): enable cross-filtering for pie chart "Other" slice - #43088

Open
omsn2 wants to merge 8 commits into
apache:masterfrom
omsn2:fix-echarts-pie-cross-filter
Open

fix(echarts): enable cross-filtering for pie chart "Other" slice#43088
omsn2 wants to merge 8 commits into
apache:masterfrom
omsn2:fix-echarts-pie-cross-filter

Conversation

@omsn2

@omsn2 omsn2 commented Aug 12, 2026

Copy link
Copy Markdown

SUMMARY

The "Other" slice in a pie chart aggregates multiple rows into one visual
segment. In transformProps.ts, its labelMap entry is a 2D array
(string[][] — one row per aggregated data point), whereas all other
slices use a 1D array (string[]).

The previous getCrossFilterDataMask guard required
groupbyValues.length === values.length. Because flatMap on a 2D
entry expands into multiple rows, this check always failed silently for
"Other", suppressing cross-filter emission entirely (no API calls fired).

Root cause: The guard groupbyValues.length !== values.length was
too strict and did not account for the multi-row "Other" aggregation.

Fix:

  • transformProps.ts: Populate labelMap['Other'] with a 2D array
    (one string[] per aggregated row).
  • eventHandlers.ts: Replace the strict equality guard with
    length === 0 && values.length > 0, and use flatMap to normalise
    both 1D and 2D labelMap entries into a uniform string[][] before
    building the IN-filter payload.
  • types.ts: Make CrossFilterTransformedProps generic on its
    labelMap value type (default string[]) so the pie chart can
    declare string[] | string[][] without breaking other chart types.
  • Pie/types.ts: Instantiate the generic for PieChartTransformedProps.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before Fix: When Clicked on the Other we get Null Data in Bar Chart

Screenshot from 2026-08-12 16-00-23 After Fix:When Clicked on the Other we get other data in Bar Chart Screenshot from 2026-08-12 16-04-22

TESTING INSTRUCTIONS

  1. Create a pie chart with an "Other" threshold (e.g. show top 5 categories, rest grouped as Other).
  2. Add the pie chart to a dashboard alongside a bar chart of the same dataset.
  3. Enable cross-filtering on the dashboard.
  4. Click on the "Other" slice — cross-filtering now fires correctly and filters the bar chart.

ADDITIONAL INFORMATION

  • Changes UI
  • Has associated issue:
  • Required feature flags:
  • Includes DB Migration
  • Introduces new feature or API
  • Removes existing feature or API

###Dataset Used
salesdata.xlsx

omsn2 added 2 commits August 6, 2026 14:21
…ements

Fixes invalid cross-filters being emitted when non-category pie chart
elements (Total graphic text, Other slice, empty name events) are clicked.
getCrossFilterDataMask now returns undefined when any selected value has
no labelMap entry, and clickEventHandler guards against empty name events.
Fixes apache#42340
The 'Other' slice in a pie chart aggregates multiple rows into a single
segment. Its labelMap entry is a 2D array (string[][]) — one row per
aggregated data point — whereas all other slices use a 1D array (string[]).

The previous getCrossFilterDataMask guard required groupbyValues.length
to equal values.length. Because flatMap on a 2D entry expands it into
multiple rows, this check always failed for 'Other', silently suppressing
the cross-filter emission.

Changes:
- transformProps.ts: populate labelMap['Other'] with a 2D array
  (one string[] per aggregated row) so the event handler has the
  raw dimension values available.
- eventHandlers.ts: replace the strict equality guard with a looser
  check (length === 0 && values.length > 0) and use flatMap to normalise
  both 1D and 2D labelMap entries into a uniform string[][] before
  building the IN-filter payload.
- types.ts: make CrossFilterTransformedProps generic on its labelMap
  value type (default string[]) so the pie chart can declare
  string[] | string[][] without breaking other chart types.
- Pie/types.ts: instantiate the generic for PieChartTransformedProps.
@dosubot dosubot Bot added change:frontend Requires changing the frontend dashboard:cross-filters Related to the Dashboard cross filters viz:charts:pie Related to the Pie chart labels Aug 12, 2026
@bito-code-review

bito-code-review Bot commented Aug 12, 2026

Copy link
Copy Markdown
Contributor

Code Review Agent Run #3b3edb

Actionable Suggestions - 0
Filtered by Review Rules

Bito filtered these suggestions based on rules created automatically for your feedback. Manage rules.

  • superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts - 1
Review Details
  • Files reviewed - 5 · Commit Range: f0a91dc..c12dddd
    • superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts
    • superset-frontend/plugins/plugin-chart-echarts/src/Pie/types.ts
    • superset-frontend/plugins/plugin-chart-echarts/src/types.ts
    • superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts
    • superset-frontend/plugins/plugin-chart-echarts/test/utils/eventHandlers.test.ts
  • Files skipped - 0
  • Tools
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ Successful
    • Eslint (Linter) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

  • /review - Manually triggers a full AI review.

  • /pause - Pauses automatic reviews on this pull request.

  • /resume - Resumes automatic reviews.

  • /resolve - Marks all Bito-posted review comments as resolved.

  • /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by Bito Logo

@netlify

netlify Bot commented Aug 12, 2026

Copy link
Copy Markdown

Deploy Preview for superset-docs-preview ready!

Name Link
🔨 Latest commit e4e1655
🔍 Latest deploy log https://app.netlify.com/projects/superset-docs-preview/deploys/6a7d2735e30eef0008179f2f
😎 Deploy Preview https://deploy-preview-43088--superset-docs-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

Comment on lines +366 to +370
if (otherDatum && otherRows.length > 0) {
labelMap[otherDatum.name] = otherRows.map(row =>
groupbyLabels.map(col => row[col] as string),
);
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: The aggregated entry is stored under the rendered name Other, so it overwrites any real data row whose formatted groupby label is also Other. Since both slices are rendered with the same ECharts name, clicking the real row or the aggregate can then resolve to the aggregated rows and emit an incorrect cross-filter. Use a collision-safe key or otherwise disambiguate the aggregate from ordinary data labels. [logic error]

Severity Level: Major ⚠️
- ❌ Real `Other` category clicks filter aggregated rows.
- ❌ Aggregate and real slices share cross-filter selection state.
- ⚠️ Pie-to-chart cross-filter results become incorrect for colliding labels.

Fix in Cursor Fix in VSCode Claude

Prompt for AI Agent 🤖
This is a comment left during a code review.

**Path:** superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts
**Line:** 366:370
**Comment:**
	*Logic Error: The aggregated entry is stored under the rendered name `Other`, so it overwrites any real data row whose formatted groupby label is also `Other`. Since both slices are rendered with the same ECharts name, clicking the real row or the aggregate can then resolve to the aggregated rows and emit an incorrect cross-filter. Use a collision-safe key or otherwise disambiguate the aggregate from ordinary data labels.

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
👍 | 👎

@bito-code-review

Copy link
Copy Markdown
Contributor

The flagged issue is valid. The current implementation uses the rendered label (e.g., 'Other') as the key in labelMap, which causes collisions when both an aggregated 'Other' slice and a real data row share the same label. This leads to incorrect cross-filtering behavior.

To resolve this, you should disambiguate the keys in labelMap. A common approach is to use a unique identifier or a composite key that includes the type of data (e.g., 'aggregate:Other' vs 'data:Other').

Since the issue is identified in superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts, you can modify the labelMap construction to include a prefix or unique identifier for aggregated rows.

Would you like me to fetch all other comments on this PR to validate and implement fixes for them as well?

superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts

if (otherDatum && otherRows.length > 0) {
    labelMap[`aggregate:${otherDatum.name}`] = otherRows.map(row =>
      groupbyLabels.map(col => row[col] as string),
    );
  }

@codecov

codecov Bot commented Aug 12, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 55.55556% with 16 lines in your changes missing coverage. Please review.
✅ Project coverage is 66.62%. Comparing base (eb7d4cb) to head (e4e1655).

Files with missing lines Patch % Lines
...ns/plugin-chart-echarts/src/utils/eventHandlers.ts 44.00% 14 Missing ⚠️
...ins/plugin-chart-echarts/src/Pie/transformProps.ts 81.81% 2 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##           master   #43088      +/-   ##
==========================================
- Coverage   66.62%   66.62%   -0.01%     
==========================================
  Files        2866     2866              
  Lines      162586   162608      +22     
  Branches    37468    37481      +13     
==========================================
+ Hits       108327   108338      +11     
- Misses      52166    52177      +11     
  Partials     2093     2093              
Flag Coverage Δ
javascript 73.67% <55.55%> (-0.01%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

omsn2 and others added 5 commits August 12, 2026 17:25
…ng collisions

- Applies a unique prefix '__other__' to the aggregated slice in labelMap
- Updates Pie chart cross-filtering event handlers to reconstruct the key using data.isOther
- Preserves accurate filtering behavior for real data rows named 'Other' without breaking UI highlighting
…slice key

- Aborts cross-filter emission if clicked elements lack a valid name (e.g. empty labels)
- Safely no-ops if any selected values cannot be strictly resolved in the labelMap (e.g. 'Total' text)
- Applies a unique prefix '__other__' to the aggregated slice in labelMap to prevent cross-filtering collisions
- Updates Pie chart event handlers to reconstruct the key using data.isOther, preserving accurate filtering behavior for real data rows named 'Other'
@bito-code-review

bito-code-review Bot commented Aug 12, 2026

Copy link
Copy Markdown
Contributor

Code Review Agent Run #60522c

Actionable Suggestions - 0
Review Details
  • Files reviewed - 2 · Commit Range: c12dddd..3a9e82e
    • superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts
    • superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts
  • Files skipped - 0
  • Tools
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ Successful
    • Eslint (Linter) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

  • /review - Manually triggers a full AI review.

  • /pause - Pauses automatic reviews on this pull request.

  • /resume - Resumes automatic reviews.

  • /resolve - Marks all Bito-posted review comments as resolved.

  • /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by Bito Logo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

change:frontend Requires changing the frontend dashboard:cross-filters Related to the Dashboard cross filters plugins size/L viz:charts:pie Related to the Pie chart

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant