Skip to content

feat(legend): add checkbox to display or not ALL/INV button #32346

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

ERGO1995
Copy link

SUMMARY

This PR introduces a new feature that allows users to toggle the visibility of the All/Invert buttons in the legend for ECharts-based visualizations.
Previously, these buttons were always displayed, but now users can enable or disable them through a new checkbox in the Chart Options panel.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Capture d’écran 2025-02-21 à 16 06 22
Capture d’écran 2025-02-21 à 16 06 12

TESTING INSTRUCTIONS

  1. Open Superset and create or edit a chart that uses ECharts.
  2. Navigate to the Chart Options panel.
  3. Locate the new Show All/Invert buttons in legend checkbox.
  4. Toggle the checkbox and observe whether the All/Invert buttons appear or disappear in the legend.
  5. Ensure that the feature works consistently across different charts that use ECharts.
  6. Check the browser console (F12 > Console) for any unexpected errors related to legend rendering.

Expected Outcome:

  • When the checkbox is enabled, the All/Invert buttons should be visible in the legend.
  • When the checkbox is disabled, the buttons should disappear while keeping the rest of the legend intact.

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

@dosubot dosubot bot added the viz:charts:echarts Related to Echarts label Feb 21, 2025
Copy link

@korbit-ai korbit-ai bot left a comment

Choose a reason for hiding this comment

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

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.
Category Issue Fix Detected
Logging Remove debug console.log ▹ view
Files scanned
File Path Reviewed
superset-frontend/plugins/plugin-chart-echarts/src/Histogram/types.ts
superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx
superset-frontend/plugins/plugin-chart-echarts/src/Histogram/controlPanel.tsx
superset-frontend/plugins/plugin-chart-echarts/src/Histogram/transformProps.ts
superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx
superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts

Explore our documentation to understand the languages and file types we support and the files we ignore.

Need a new review? Comment /korbit-review on this PR and I'll review your latest changes.

Korbit Guide: Usage and Customization

Interacting with Korbit

  • You can manually ask Korbit to review your PR using the /korbit-review command in a comment at the root of your PR.
  • You can ask Korbit to generate a new PR description using the /korbit-generate-pr-description command in any comment on your PR.
  • Too many Korbit comments? I can resolve all my comment threads if you use the /korbit-resolve command in any comment on your PR.
  • Chat with Korbit on issues we post by tagging @korbit-ai in your reply.
  • Help train Korbit to improve your reviews by giving a 👍 or 👎 on the comments Korbit posts.

Customizing Korbit

  • Check out our docs on how you can make Korbit work best for you and your team.
  • Customize Korbit for your organization through the Korbit Console.

Feedback and Support

@pull-request-size pull-request-size bot added size/S and removed size/M labels Feb 21, 2025
@sadpandajoe sadpandajoe changed the title feat(legend) add checkbox to display or not ALL/INV button feat(legend): add checkbox to display or not ALL/INV button Feb 21, 2025
Copy link
Contributor

@rusackas Processing your ephemeral environment request here. Action: up.

@rusackas rusackas added the review:checkpoint Last PR reviewed during the daily review standup label Feb 21, 2025
@rusackas
Copy link
Member

Superset uses Git pre-commit hooks courtesy of pre-commit. To install run the following:

pip3 install -r requirements/development.txt
pre-commit install
A series of checks will now run when you make a git commit.

Alternatively it is possible to run pre-commit by running pre-commit manually:

pre-commit run --all-files

Copy link
Contributor

@rusackas Ephemeral environment spinning up at http://52.13.110.49:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

@ERGO1995
Copy link
Author

rusackas

@rusackas Thanks for your feedback, comments translated :P and thanks for pre-commit tips!

@sadpandajoe sadpandajoe removed the review:checkpoint Last PR reviewed during the daily review standup label Feb 24, 2025
@ERGO1995
Copy link
Author

@rusackas HI, do you have any idea why there is error like this in jobs review (sharded-jest-tests(6)) please?
FAIL src/features/databases/UploadDataModel/UploadDataModal.test.tsx (123.777 s)

Copy link

codecov bot commented Feb 25, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 80.85%. Comparing base (76d897e) to head (20e8ed3).
Report is 1955 commits behind head on master.

Additional details and impacted files
@@             Coverage Diff             @@
##           master   #32346       +/-   ##
===========================================
+ Coverage   60.48%   80.85%   +20.36%     
===========================================
  Files        1931      559     -1372     
  Lines       76236    49811    -26425     
  Branches     8568     4223     -4345     
===========================================
- Hits        46114    40274     -5840     
+ Misses      28017     9170    -18847     
+ Partials     2105      367     -1738     
Flag Coverage Δ
hive 47.86% <ø> (-1.30%) ⬇️
javascript ?
mysql 74.77% <ø> (?)
postgres 74.80% <ø> (?)
presto 52.59% <ø> (-1.22%) ⬇️
python 80.83% <ø> (+17.33%) ⬆️
sqlite 74.33% <ø> (?)
unit 61.49% <ø> (+3.85%) ⬆️

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

☔ View full report in Codecov by Sentry.
📢 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.

@rusackas
Copy link
Member

Closing/reopening to kick-start CI again, and see where this gets stuck. Some tests used to be failing, so if we can't clear them from the CI side here, a rebase might resolve some. Let's see!

@rusackas rusackas closed this Jun 11, 2025
@rusackas rusackas reopened this Jun 11, 2025
Copy link
Member

@rusackas rusackas left a comment

Choose a reason for hiding this comment

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

LGTM! I'll just spin up a test env before merging to poke at it ;)

Copy link
Contributor

@rusackas Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

Copy link
Contributor

@rusackas Ephemeral environment spinning up at http://54.149.249.109:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

@rusackas
Copy link
Member

Hmm... not sure why I'm not seeing the button on the ephemeral environment. Not sure whether that's due to the PR or the ephemeral build having issues, or me missing the mark 😅

@rusackas
Copy link
Member

@ERGO1995 can you check the ephemeral environment above and see if I'm taking crazy pills?

@ERGO1995
Copy link
Author

@ERGO1995 can you check the ephemeral environment above and see if I'm taking crazy pills?

No, you didn’t take any weird pills haha. Actually, I only made the change for the 'Histogram' chart type. But if it looks good for that one, I’ll start working on the others now :)! Because in the ephemeral environment, I do see the button for a histogram.

@pull-request-size pull-request-size bot added size/L and removed size/S labels Jun 24, 2025
@ERGO1995
Copy link
Author

@rusackas Alright, i updated chart type that used "import { legendSection, showValueControl } from '../controls';" code.
And only for echart type.
I also noticed that for the BoxPlot type, we don’t handle any legend at all, even though we can display multiple metrics simultaneously. Is that normal or is it a bug?

@rusackas
Copy link
Member

Thanks fort the clarity on the histogram-only support. Supporting the other ECharts timeseries is a big win for consistency, for sure. Looks like a rebase is needed to resolve some conflicts (probably due to the giant Theming branch) but once those are cleared, I'll re-test and merge if it looks good! Thanks for continuing to help here.

Romain GREFFIER added 5 commits June 25, 2025 16:40
@ERGO1995 ERGO1995 force-pushed the display-all-inv-legend branch from a7f3648 to 7914342 Compare June 25, 2025 14:44
@ERGO1995
Copy link
Author

Thanks fort the clarity on the histogram-only support. Supporting the other ECharts timeseries is a big win for consistency, for sure. Looks like a rebase is needed to resolve some conflicts (probably due to the giant Theming branch) but once those are cleared, I'll re-test and merge if it looks good! Thanks for continuing to help here.

Rebase done :)

@rusackas
Copy link
Member

rusackas commented Jul 9, 2025

Looks like we're getting closer, but pre-commit needs to be run.

Superset uses Git pre-commit hooks courtesy of pre-commit. To install run the following:

pip3 install -r requirements/development.txt
pre-commit install

A series of checks will now run when you make a git commit.

Alternatively it is possible to run pre-commit by running pre-commit manually:

pre-commit run --all-files

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.

3 participants