feat(native-filters): Defer loading filters data until filter is visible

[kgabryje]

SUMMARY

This PR introduces an optimization in running queries for native filters data. Currently when user opens a dashboard, we run queries for every native filter, regardless if it's hidden in the "Filters out of scope" panel or not. This PR defers running filter queries until the filter is visible.
There are 2 scenarios:

1. Initially we run queries only for the filters in scope. When user uncollapses "Filters out of scope" panel, we run queries for all the filters that haven't been loaded yet.
2. Initially we run queries only for the filters in scope. When user switches a tab, causing more filters to be in scope, we run queries only for the filters which have just become visible.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Please notice how many data requests there are in Network panel

Before:
https://user-images.githubusercontent.com/15073128/121710250-b64ac700-cad9-11eb-9ed0-df768225989f.mov

After:
Scenario 1:
https://user-images.githubusercontent.com/15073128/121710332-ccf11e00-cad9-11eb-80f2-7bf6f4bb0dbe.mov

Scenario 2:
https://user-images.githubusercontent.com/15073128/121710470-f01bcd80-cad9-11eb-8b8f-1104b18fc611.mov

TESTING INSTRUCTIONS

0. Set DASHBOARD_NATIVE_FILTERS feature flag to True
1. Create a dashboard with tabs
2. Add a few native filters, so that some are initially in scope and some out of scope.
3. Verify that we run queries only for filters in scope, until you open "Filters out of scope" panel or navigate to a tab that has charts in scope of other filters.

ADDITIONAL INFORMATION

• Has associated issue:
• 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

CC: @junlincc @villebro

[codecov]

Codecov Report

Merging #15120 (d3df3d8) into master (51f0d4f) will increase coverage by 0.00%.
The diff coverage is 91.66%.

❗ Current head d3df3d8 differs from pull request most recent head 34b8051. Consider uploading reports for the commit 34b8051 to get more accurate results

@@           Coverage Diff           @@
##           master   #15120   +/-   ##
=======================================
  Coverage   77.53%   77.53%           
=======================================
  Files         967      967           
  Lines       49787    49796    +9     
  Branches     6358     6363    +5     
=======================================
+ Hits        38602    38610    +8     
- Misses      10983    10984    +1     
  Partials      202      202           

Flag	Coverage Δ
javascript	72.44% <91.66%> (+<0.01%)	⬆️

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

Impacted Files	Coverage Δ
.../FilterBar/CascadeFilters/CascadePopover/index.tsx	61.76% <ø> (ø)
...Filters/FilterBar/FilterControls/FilterControl.tsx	100.00% <ø> (ø)
...ilters/FilterBar/FilterControls/FilterControls.tsx	80.00% <50.00%> (ø)
...veFilters/FilterBar/FilterControls/FilterValue.tsx	69.89% <100.00%> (+2.45%)	⬆️
...board/components/nativeFilters/FilterBar/index.tsx	90.72% <100.00%> (-0.86%)	⬇️

---

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 51f0d4f...34b8051. Read the comment docs.

[villebro]

This is super awesome! 🎉

[pkdotson]

LGTM!