feat: multiple results pane on explore and dashboard

[zhaoyongjie]

SUMMARY

Currently, the Superset QueryContext contains multiple queries but the south pane in the Explore only supported single results pane. this PR intends to support multiple results pane in the Explore page and Dashboard.

This PR also add fully unit test for SamplePane and ResultsPane.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

multiple.results.pane.mov

TESTING INSTRUCTIONS

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

[codecov]

Codecov Report

Merging #20277 (fe5be22) into master (d3670f1) will increase coverage by 0.05%.
The diff coverage is 90.38%.

@@            Coverage Diff             @@
##           master   #20277      +/-   ##
==========================================
+ Coverage   66.61%   66.67%   +0.05%     
==========================================
  Files        1733     1737       +4     
  Lines       64953    64973      +20     
  Branches     6858     6869      +11     
==========================================
+ Hits        43268    43319      +51     
+ Misses      19929    19905      -24     
+ Partials     1756     1749       -7     

Flag	Coverage Δ
javascript	51.63% <90.38%> (+0.12%)	⬆️

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

Impacted Files	Coverage Δ
...dashboard/components/SliceHeaderControls/index.tsx	64.28% <ø> (ø)
...mponents/DataTablesPane/components/SamplesPane.tsx	97.67% <ø> (+27.90%)	⬆️
...plore/components/DataTablesPane/DataTablesPane.tsx	78.04% <33.33%> (-7.67%)	⬇️
...ataTablesPane/components/SingleQueryResultPane.tsx	85.71% <85.71%> (ø)
.../src/explore/components/DataTableControl/index.tsx	64.77% <100.00%> (+0.72%)	⬆️
...taTablesPane/components/ResultsPaneOnDashboard.tsx	100.00% <100.00%> (ø)
...nents/DataTablesPane/components/useResultsPane.tsx	97.43% <100.00%> (ø)
...explore/components/DataTablesPane/test/fixture.tsx	100.00% <100.00%> (ø)
...end/src/explore/components/DataTablesPane/utils.ts	100.00% <100.00%> (ø)
...gin-chart-echarts/src/Timeseries/transformProps.ts	56.84% <0.00%> (-1.50%)	⬇️
... and 5 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8e46ae5...fe5be22. Read the comment docs.

[zhaoyongjie]

/testenv up

[github-actions]

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

[kgabryje]

Great feature! I only have 1 comment about the labels - I don't think that the results of second query should be labeled as "Results 1". I think that for multiple queries we should have either: Results / Results 2 or Results 1 / Results 2 or Results A / Results B (since the queries are labeled as A and B in control panel). In the charts that have only 1 query we should keep the label Results.

[zhaoyongjie]

Great feature! I only have 1 comment about the labels - I don't think that the results of second query should be labeled as "Results 1". I think that for multiple queries we should have either: Results / Results 2 or Results 1 / Results 2 or Results A / Results B (since the queries are labeled as A and B in control panel). In the charts that have only 1 query we should keep the label Results.

Names are always a difficult thing. "Results 2" make sense. if have any good ideas, I will change them.

[kgabryje]

@kasiazjc WDYT?

[kgabryje]

Tested, works great except 1 minor thing. In Explore, when I change time column formatting from formatted to original, the change is applied in all tabs (results, results 2, samples). When I do the same thing on Dashboard, the change is applied only in 1 tab for that column.
Approving since it's a minor, non-blocking problem, but we may want to fix it before merging if it's quick and easy to fix

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.

[zhaoyongjie]

@kgabryje I intend to use Context to refactor the time columns switcher since it's hard to control different results pane in Dashboard. Could I implement it in the separate PR?

[zhaoyongjie]

I merged first, then fix it in the separate PR.