fix: Show affected charts when interacting with the filters

[michael-s-molina]

SUMMARY

Shows the affected charts when interacting with the filters in a uniform manner. See before/after videos.

@kgabryje @junlincc @rusackas

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

screen-recording-2021-07-12-at-102722-am_gUCrkkfe.mp4

screen-recording-2021-07-13-at-45541-pm_CQX9Zi5P.mp4

TESTING INSTRUCTIONS

See before/after videos.

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

[codecov]

Codecov Report

Merging #15634 (15a5a51) into master (f0c0d74) will decrease coverage by 0.04%.
The diff coverage is 76.47%.

@@            Coverage Diff             @@
##           master   #15634      +/-   ##
==========================================
- Coverage   76.99%   76.95%   -0.05%     
==========================================
  Files         978      984       +6     
  Lines       51493    51641     +148     
  Branches     6951     6979      +28     
==========================================
+ Hits        39649    39741      +92     
- Misses      11620    11676      +56     
  Partials      224      224              

Flag	Coverage Δ
javascript	71.47% <76.47%> (-0.06%)	⬇️

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

Impacted Files	Coverage Δ
...c/filters/components/Select/SelectFilterPlugin.tsx	79.82% <ø> (ø)
...s/components/TimeColumn/TimeColumnFilterPlugin.tsx	0.00% <ø> (ø)
...ers/components/TimeGrain/TimeGrainFilterPlugin.tsx	0.00% <ø> (ø)
...ts/nativeFilters/FilterBar/FilterControls/utils.ts	71.42% <33.33%> (-28.58%)	⬇️
...veFilters/FilterBar/FilterControls/FilterValue.tsx	67.28% <100.00%> (ø)
...src/filters/components/Range/RangeFilterPlugin.tsx	88.23% <100.00%> (-0.96%)	⬇️
...et-frontend/src/filters/components/Select/index.ts	90.00% <0.00%> (-10.00%)	⬇️
...erset-frontend/src/SqlLab/components/SqlEditor.jsx	53.74% <0.00%> (-1.31%)	⬇️
superset-frontend/src/SqlLab/reducers/sqlLab.js	34.81% <0.00%> (-0.15%)	⬇️
superset-frontend/src/common/components/index.tsx	100.00% <0.00%> (ø)
... and 20 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 f0c0d74...15a5a51. Read the comment docs.

[junlincc]

/testenv up FEATURE_DASHBOARD_NATIVE_FILTERS=true

[github-actions]

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

[junlincc]

Click interaction is harder to discover for first time users, but we can just add onboarding steps.
Your call as long as we have consistency and we dont affect perf. I just need to update the docs :)

[michael-s-molina]

I'll invert the behavior and activate the affected filters on hover. Maybe with a timer.

[michael-s-molina]

@kgabryje @junlincc @rusackas I inverted the behavior. Now the affected charts are displayed on hover. I'm also dispatching the actions using Lodash debounce to avoid unnecessary renders and the blinking effect. I updated the video.

[suddjian]

LGTM, nice work!

[kgabryje]

LGTM!

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.