Skip to content

feat(plugin-chart-echarts): add cross-filtering to the Sankey chart - #45908

Open
SBIN2010 wants to merge 4 commits into
apache:masterfrom
SBIN2010:feat/sankey_cross_filtering
Open

SBIN2010 wants to merge 4 commits into
apache:masterfrom
SBIN2010:feat/sankey_cross_filtering

Conversation

@SBIN2010

Copy link
Copy Markdown
Contributor

SUMMARY

The Sankey chart can now cross-filter a dashboard, and it supports Drill to detail and Drill by. the dashboard enables cross-filtering the same way it does for the other ECharts.
A second click on the same node or link clears the selection.

  • Link. Filters the source column and the target column together (IN, or IS NULL when the value is null). The selected link and its two endpoints stay bright. Drill to detail applies both columns. Drill by is not offered, because a link already fixes both dimensions.
  • Node. A Sankey node is one label, even when that label appears in both columns. The filter uses the column of the first row that introduced the label, so an intermediate stage filters only that side (source or target). Flows on the other side dim. Drill by replaces that same control (source or target). Which column is chosen follows the query order, including sort-by-metric.
  • Values. NULL is IS NULL and the chip shows <NULL>. An empty string stays IN [''] and the chip shows <empty string>. bigint is sent as a string so it does not share a selection key with a plain number. Numeric labels are not passed through the smart number formatter, so an id or a year is not abbreviated.
  • Scope. The emitting chart is excluded from its own dashboard filter. filterState still dims nodes and links that are outside the selection, including when the chart is not emitting. The pointer cursor is shown only while cross-filtering is emitted.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

  1. Create a Sankey chart with source, target, and a metric. Put it on a dashboard next to a table or another chart on the same dataset. In the chart's dashboard scope, include the other chart and leave the Sankey itself out.
  2. Click a link. The other chart should show only rows for that source and that target. The clicked link and its two nodes stay bright, and the other flows dim. The cursor is a pointer.
  3. Click the same link again. The filter clears and every flow is bright again.
  4. Click a node that appears only as a source, then one that appears only as a target. The filter column should match that role.
  5. Click a node that appears in both columns. The filter uses whichever column occurred first in the query result. Flows on the other side of that node dim. With "Sort by metric" enabled, confirm which side is selected still matches the first row that contains the label.
  6. Right-click a node. Drill to detail and Drill by should use that node's column (source or target). Right-click a link. Drill to detail should include both columns, and Drill by should be absent.
  7. Include a null and an empty string in the source or target column. The null filter is IS NULL with chip <NULL>. The empty string filter is IN [''] with chip <empty string>.
  8. Turn cross-filtering off for the chart (or open it outside a dashboard scope). Clicks do not emit a filter, and the cursor is the default arrow. If a selection is already in filterState, nodes and links outside it still dim.

ADDITIONAL INFORMATION

  • Has associated issue:
  • Required feature flags:
  • Changes UI
  • Includes DB Migration (follow approval process in SIP-59)
    • Migration is atomic, supports rollback & is backwards-compatible
    • Confirm DB migration upgrade and downgrade tested
    • Runtime estimates and downtime expectations provided
  • Introduces new feature or API
  • Removes existing feature or API

@netlify

netlify Bot commented Oct 30, 2026

Copy link
Copy Markdown

✅ Deploy Preview for superset-docs-preview ready!

Name Link
🔨 Latest commit 54bec2e
🔍 Latest deploy log https://app.netlify.com/projects/superset-docs-preview/deploys/6ae508cb4764c832113c8672
😎 Deploy Preview https://deploy-preview-45908--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.

Copilot AI left a comment

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.

🟡 Changes recommended

Display-based identity collisions can merge distinct nodes and break filter selection, while repeated link scans and inverted opacity cause performance and highlighting defects.

3 open issues
What changed in this PR

Adds cross-filtering and drill actions to Superset’s ECharts Sankey chart, allowing nodes and links to filter other dashboard charts.

Changes:

  • Adds click-to-filter, repeat-click clearing, and context-menu drill actions.
  • Tracks node ownership and raw values, with selection-based dimming and null/empty-string handling.
  • Registers interactive capabilities and adds helper, transformation, and event-handler tests.
File Description
superset-frontend/​plugins/​plugin-chart-echarts/​test/​Sankey/​transformProps.test.ts Tests node ownership, dimming, labels, and cursor behavior.
superset-frontend/​plugins/​plugin-chart-echarts/​test/​Sankey/​Sankey.test.tsx Tests click filtering, clearing, and drill-menu payloads.
superset-frontend/​plugins/​plugin-chart-echarts/​test/​Sankey/​crossFilter.test.ts Tests filter construction, special values, and selection visibility.
superset-frontend/​plugins/​plugin-chart-echarts/​src/​Sankey/​transformProps.ts Adds node metadata, selection styling, and interaction props.
superset-frontend/​plugins/​plugin-chart-echarts/​src/​Sankey/​Sankey.tsx Handles filtering clicks and drill context menus.
superset-frontend/​plugins/​plugin-chart-echarts/​src/​Sankey/​index.ts Registers cross-filtering and drill capabilities.
superset-frontend/​plugins/​plugin-chart-echarts/​src/​Sankey/​crossFilter.ts Introduces selection, filter, label, and dimming helpers.

Review effort: Balanced

@codeant-ai-for-open-source

codeant-ai-for-open-source Bot commented Oct 30, 2026 •

Copy link
Copy Markdown
Contributor

CodeAnt  CodeAnt PR Risk

🟢  Low Risk

  • The PR appears safe to merge; type-aware Sankey value IDs keep distinct values separate for chart nodes and selections.

Assessed commit: 121fed65c4e9

@codecov

codecov Bot commented Oct 30, 2026 •

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 84.77%. Comparing base (e33b7d9) to head (121fed6).
⚠️ Report is 9 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##           master   #45908      +/-   ##
==========================================
+ Coverage   84.73%   84.77%   +0.03%     
==========================================
  Files        3069     3070       +1     
  Lines      205767   205979     +212     
  Branches    48388    48473      +85     
==========================================
+ Hits       174350   174611     +261     
+ Misses      28123    28074      -49     
  Partials     3294     3294              
Flag Coverage Δ
javascript 81.08% <100.00%> (+0.09%) ⬆️

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.

This branch has not been deployed

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants