feat: Adds drill to detail context menu for ECharts visualizations

[michael-s-molina]

SUMMARY

Adds drill to detail (drill-through) context menu for ECharts visualizations. The context menu is triggered when right-clicking an EChart series. Upon selecting a drill to detail option, an alert is displayed with the selected values.

The linking between the context menu and the actual feature will be handled in a future PR.

The context menu was added to all ECharts with the exception of the Tree Chart.

The feature is behind the DRILL_TO_DETAIL feature flag.

This first iteration focuses on providing a minimal set of interaction possibilities for the ECharts. More advanced interactions like clicking on legends, subheaders, etc will be handled in follow-up PRs. Drilling to detail using metrics is not supported as well.

@kasiazjc @lauderbaugh @rusackas @codyml

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

https://user-images.githubusercontent.com/70410625/181340086-a6a8376f-e962-440c-b5f4-8679bc731337.mov

TESTING INSTRUCTIONS

1 - Make sure the feature does not introduce any regression when disabled. This is the default value for the feature flag.

2 - Enable the DRILL_TO_DETAIL feature flag and check:

• Check if there are no regressions when right-clicking the series for different charts
• Check if the right-click works with different chart control values (dimensions, time grain, customizations, etc)
• Check if the correct values are displayed in the context menu
• Check if the correct values are displayed when selecting a context menu option
• Check if other dashboard interactions are not affected by the new feature such as cross-filtering, drag-and-drop, tooltips, etc

Below is the import file for the dashboard shown in the video: dashboard_export_20220727T144027.zip

ADDITIONAL INFORMATION

• [ ] Has associated issue:
• [x] Required feature flags: DRILL_TO_DETAIL
• [x] 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
• [x] Introduces new feature or API
• [ ] Removes existing feature or API

[codecov[bot]]

Codecov Report

Merging #20891 (e68262b) into master (9114175) will decrease coverage by 0.08%. The diff coverage is 64.50%.

:exclamation: Current head e68262b differs from pull request most recent head 5adb031. Consider uploading reports for the commit 5adb031 to get more accurate results

@@            Coverage Diff             @@
##           master   #20891      +/-   ##
==========================================
- Coverage   66.35%   66.26%   -0.09%     
==========================================
  Files        1767     1769       +2     
  Lines       67353    67464     +111     
  Branches     7145     7168      +23     
==========================================
+ Hits        44691    44708      +17     
- Misses      20834    20926      +92     
- Partials     1828     1830       +2     

Flag	Coverage Δ
javascript	52.01% <64.48%> (-0.10%)	:arrow_down:

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

Impacted Files	Coverage Δ
...packages/superset-ui-core/src/query/types/Query.ts	100.00% <ø> (ø)
...ackages/superset-ui-core/src/utils/featureFlags.ts	100.00% <ø> (ø)
...rts/src/BigNumber/BigNumberTotal/transformProps.ts	0.00% <0.00%> (ø)
...lugin-chart-echarts/src/BigNumber/BigNumberViz.tsx	0.00% <0.00%> (ø)
...lugin-chart-echarts/src/BoxPlot/EchartsBoxPlot.tsx	0.00% <0.00%> (ø)
.../plugins/plugin-chart-echarts/src/BoxPlot/types.ts	0.00% <ø> (ø)
.../plugin-chart-echarts/src/Funnel/EchartsFunnel.tsx	0.00% <0.00%> (ø)
...d/plugins/plugin-chart-echarts/src/Funnel/types.ts	100.00% <ø> (ø)
...ns/plugin-chart-echarts/src/Gauge/EchartsGauge.tsx	0.00% <0.00%> (ø)
...ns/plugin-chart-echarts/src/Graph/EchartsGraph.tsx	0.00% <0.00%> (ø)
... and 36 more

:mega: Codecov can now indicate which changes are the most critical in Pull Requests. Learn more

[zhaoyongjie]

@michael-s-molina Looking at the screenshot, there is one thing that needs to be added. When a time dimension is clicked with time grain applied, the time grain needs to be passed at the same time.

BTW, why needs a formattedVal in the filter?

[michael-s-molina]

@michael-s-molina Looking at the screenshot, there is one thing that needs to be added. When a time dimension is clicked with time grain applied, the time grain needs to be passed at the same time.

Good point! I'll work on it.

BTW, why needs a formattedVal in the filter?

Currently, the logic for formatting the values is contained in each plugin. Depending on the plugin type the values can be formatted differently. When exhibiting these values in the context menu and also later in the modal, we need to present the values with the exact formatting used by the plugin. At the same time, we need the original value for the endpoint. Some examples are dates, currencies, decimals, etc.

[michael-s-molina]

@zhaoyongjie Added the time grain for Timeseries and MixedTimeseries.

[jinghua-qa]

/testenv up

[github-actions[bot]]

@jinghua-qa Ephemeral environment spinning up at http://54.68.14.156:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[jinghua-qa]

/testenv up FEATURE_DASHBOARD_CROSS_FILTERS=true FEATURE_DRILL_TO_DETAIL=true

[github-actions[bot]]

@jinghua-qa Ephemeral environment spinning up at http://34.219.213.123:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[michael-s-molina]

/testenv up FEATURE_DASHBOARD_CROSS_FILTERS=true FEATURE_DRILL_TO_DETAIL=true

[github-actions[bot]]

@michael-s-molina Ephemeral environment spinning up at http://54.148.127.0:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[jinghua-qa]

I found that in treemap, if i move my mouse to the white edge and it will show drill to details too, is that expected?

https://user-images.githubusercontent.com/81597121/182424965-323f2549-47f6-4802-b09b-9af455c0f35d.mov

[michael-s-molina]

I found that in treemap, if i move my mouse to the white edge and it will show drill to details too, is that expected?

No, it's not 😆. I'll fix it.

[michael-s-molina]

/testenv up FEATURE_DASHBOARD_CROSS_FILTERS=true FEATURE_DRILL_TO_DETAIL=true

[michael-s-molina]

I found that in treemap, if i move my mouse to the white edge and it will show drill to details too, is that expected?

Fixed

[github-actions[bot]]

@michael-s-molina Ephemeral environment spinning up at http://35.89.204.156:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[codyml]

Tested each viz type and left 2 notes for issues I found, otherwise looks great!

[geido]

/testenv up FEATURE_DASHBOARD_CROSS_FILTERS=true FEATURE_DRILL_TO_DETAIL=true

[github-actions[bot]]

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

[geido]

First of all, this looks great!

A few minor issues that I found:

• Not a big deal, but you can click way after the number in the Big Number

• Another small one. It would be great if the dropdown could be shown in the upper side when it does not have enough visible space to save some of the scrolling

• In a graph chart we can only click on the line but not on the node, is that normal?

• One more thing about the graph is that when right-clicking the animation is triggered and it creates confusion as the nodes start moving. Not sure if there is a way to stop the chart animation when right-clicking

• For some reasons, when trying to close the dropdown by clicking 2 or 3 px from its left side, it won't close. I found it annoying for the user as I ended up clicking a few times to try closing it up. For some reasons, it does not happen if you click on any other side, even 1 px away from its side. This is an Antdesign issue though. Just pointing out if there is a quick fix.

I believe the above are all minor issues that we can handle in separate PRs.

[michael-s-molina]

@codyml @geido Great comments! Thanks again for testing the feature.

My last commit fixed:

If you right-click on the dimension label for Treemap v2, the menu looks like it has a broken option:

Not a big deal, but you can click way after the number in the Big Number

I decided to follow @geido's suggestion and tackle the remaining comments in follow-up PRs so that @codyml can rebase his PR on top of this one. I'll create tickets for them.

[github-actions[bot]]

Ephemeral environment shutdown and build artifacts deleted.