Skip to content
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

[dashboard] trigger query for chart in nested tab only after chart becomes visible #7700

Merged

Conversation

graceguo-supercat
Copy link

@graceguo-supercat graceguo-supercat commented Jun 12, 2019

CATEGORY

Choose one

  • Bug Fix
  • Enhancement (new features, refinement)
  • Refactor
  • Add tests
  • Build / Development Environment
  • Documentation

SUMMARY

In #7233 I added a feature that only trigger query when chart is visible to user. If user apply filter in 1 tab, all the charts in another tab (not visible right now) should delay query update until user click to see the tab.

I found there is a bug for nested tab case: when chart in the nested tab, update filter (in another tab) will trigger new query right away. Please see before/after gif. Also updated integration test to cover this case.

Note: charts outside nested tab behaves good, and is covered in the existed unit tests.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:
7vPeK22UdR

After:
XC43pU6gQU

TEST PLAN

CI and manual test.

REVIEWERS

@etr2460 @williaster

@graceguo-supercat graceguo-supercat changed the title [dashboard] fix nested tab component visible logic [dashboard] trigger query for chart in nested tab when chart becomes visible Jun 13, 2019
@graceguo-supercat graceguo-supercat changed the title [dashboard] trigger query for chart in nested tab when chart becomes visible [dashboard] trigger query for chart in nested tab only after chart becomes visible Jun 13, 2019
{tabIds.map((tabId, tabIndex) => {
const isTabContentVisible =
selectedTabIndex === tabIndex &&
(renderTabContent ? isComponentVisible : true);
Copy link
Member

Choose a reason for hiding this comment

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

this simplifies to !renderTabContent || isComponentVisible I think. What does renderTabContent actually signify here? I'm having a bit of trouble understanding the logic.

Copy link
Author

Choose a reason for hiding this comment

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

I updated the logic be more clear.

@graceguo-supercat
Copy link
Author

graceguo-supercat commented Jun 13, 2019

@etr2460 tab logic is a little confusing here.

  • TABS component: contain a list of TAB component. it can be top level, or row level (display tabs like a row of content in the middle of page)
  • TAB component: render single tab. it has 2 mode: render tab itself or render tab content.
    for tab inside the root level TABS, tab's children's visibility depends on if current tab is selected.
    for row level tab, tab's children's visibility depends on if current tab is selected, and if tab self is visible (this is my fix).
  • regular component (that doesn't hide some of its children components): these components visibility is always depends on its parent's visibility.

@codecov-io
Copy link

Codecov Report

Merging #7700 into master will increase coverage by <.01%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #7700      +/-   ##
==========================================
+ Coverage   65.76%   65.76%   +<.01%     
==========================================
  Files         459      459              
  Lines       21909    21910       +1     
  Branches     2408     2409       +1     
==========================================
+ Hits        14409    14410       +1     
  Misses       7379     7379              
  Partials      121      121
Impacted Files Coverage Δ
superset/data/tabbed_dashboard.py 34.37% <ø> (ø) ⬆️
...s/src/dashboard/components/gridComponents/Tabs.jsx 64.51% <100%> (+0.58%) ⬆️

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 0d12243...072ba2c. Read the comment docs.

Copy link
Member

@etr2460 etr2460 left a comment

Choose a reason for hiding this comment

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

lgtm!

@@ -238,7 +239,9 @@ class Tabs extends React.PureComponent {
onResize={onResize}
onResizeStop={onResizeStop}
onDropOnTab={this.handleDropOnTab}
isComponentVisible={selectedTabIndex === tabIndex}
isComponentVisible={
selectedTabIndex === tabIndex && isCurrentTabVisible
Copy link
Member

Choose a reason for hiding this comment

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

much more understandable, thanks!

@graceguo-supercat graceguo-supercat merged commit 925b8db into apache:master Jun 14, 2019
@graceguo-supercat graceguo-supercat deleted the gg-FixComponentVisible branch August 8, 2019 20:38
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 0.34.0 labels Feb 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels size/L 🚢 0.34.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants