Applying a filter and then switching tab on a dashboard results in a blank table chart

[bryanck]

If you have a dashboard with tabs, a filter box on the first tab and a table chart on a different tab, when you apply a filter then switch tabs, the table chart will be a blank box. This also affects the world map chart

Expected results

The table chart should render the data as expected.

Actual results

The table is a blank box. If you force refresh the chart from the ellipsis menu, then it will render. Also, if you resize the browser window, it will render.

Screenshots

How to reproduce the bug

1. Create a filter box chart
2. Create a table chart using the same datasource as the filter box
3. Create a new dashboard
4. Place tabs at the top of the dashboard as in the screen shot, create 2 tabs
5. On the first tab, place the filter box in a row
6. On the second tab, place the table in a row
7. Save the dashboard
8. Bring up the dashboard, on the first tab, select a filter and apply it
9. Switch to the second tab. The table will be a blank box
10. Resize the browser window and the table renders
11. Try also with the world map chart instead of a table chart

Environment

• superset version: 0.37.0 RC2
• python version: 3.6.10
• node.js version: 12.14.1
• npm version: 6.13.4

Checklist

Make sure these boxes are checked before submitting your issue - thank you!

• I have checked the superset logs for python stacktraces and included it here as text if there are any.
• I have reproduced the issue with at least the latest released version of superset.
• I have checked the issue tracker for the same issue and I haven't found one similar.

[issue-label-bot]

Issue-Label Bot is automatically applying the label #bug to this issue, with a confidence of 0.93. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[bryanck]

Occassionally the table chart will render when you switch tabs. If it does, switch back to the first tab, change the filter, and switch back to the tab with the table. Eventually you should get the table as a blank box.

[villebro]

Thanks for reporting! Will investigate.

[villebro]

Reproduced, I think I found the problem.

[villebro]

Sorry, I flagged the wrong ticket, i.e. haven't been able to investigate this yet. @ktmud Do you think this might be related to the Table Chart remake?

[bryanck]

FWIW the same thing happens with the world map chart

[villebro]

@graceguo-supercat is this something you've bumped into (=charts on other tabs not rendering correctly after filter box changes)?

[bryanck]

Here is a video demonstrating the issue: https://drive.google.com/file/d/1bP7IwYiKABOcz4Wgljldjrl6-2eQ8Eqo/view?usp=sharing

The table is blank after applying a filter change. The pie chart works as expected.

[bryanck]

Also just wanted to add that this happens in the latest versions of the 3 major browsers (Safari, Chrome, Firefox). I only tested this on a Mac.

[bryanck]

This issue isn't quite fixed for the table chart. If you select a filter with no rows, switch tabs, then the table shows a "No data" message as expected. Now if you switch to the filter tab, change to a filter with data, then switch to the table's tab, the table is blank.

Setting "sticky" to false on DataTable resolves this issue:
https://github.com/apache-superset/superset-ui/blob/9c28e9388a8158238dc7710e9ad2ecd008853f9c/plugins/plugin-chart-table/src/TableChart.tsx#L128

It looks like this can be set in MainPreset.js rather than superset-ui. I'll open a PR to disable the sticky option (but I'm not sure of any consequences for doing this).

The world chart doesn't have an issue so this seems fixed.

[bryanck]

I created a PR to disable the sticky header option if you want to go this route:
#10452

[bryanck]

This PR was bad so I closed it. It will be a little bit more involved to disable the sticky option (if that were even something we wanted)

[bryanck]

Here's another video running the latest 0.37 branch that shows the existing issue.
https://drive.google.com/file/d/1y61ephtdjEHLtorOj-wBYLFG_SXrbH5y/view?usp=sharing

[bryanck]

There is also an issue with the height of the render area that I also believe is related to the "sticky" setting. Here's another demo: https://drive.google.com/file/d/1PWUVnpud8N3HIYROns304IEawoEGP1xF/view?usp=sharing

[ktmud]

OK. So the fix doesn't completely work when table height changes. Sticky header is important to user experience, I don't think we should disable it. The problem really is with bootstrap tab switches. I'll try to look for a more robust fix soon.