perf(dashboard): decrease number of rerenders of FiltersBadge

[kgabryje]

SUMMARY

Due to incorrect passing of props and setting state of FiltersBadge, we were rerendering the component multiple times. It's very expensive, as FiltersBadge calls selectIndicatorsForChart and selectNativeIndicatorsForChart functions, which traverse dashboard layout tree. Rerendering filters badge for every chart resulted in thousands of unnecessary traverses of dashboard layout tree, causing the performance to take a hit. This PR introduces caching and memoization for FiltersBadge, which reduces the amount of redundant rerenders.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

I measured the number of rerenders of FiltersBadge with whyDidYouRender library (https://github.com/welldone-software/why-did-you-render). It reports every rerender of a component that wasn't necessary and could've been avoided (e.g. by memoizing props or using PureComponent).

Before:
https://user-images.githubusercontent.com/15073128/131681210-7fd4ff10-fd9d-49c3-b467-2448eb99f7c8.mov

After:
https://user-images.githubusercontent.com/15073128/131681806-7f1da2f8-5ae5-416b-a3c3-6879ce4e4f7f.mov

TESTING INSTRUCTIONS

Everything should work as before

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

CC @junlincc

[codecov]

Codecov Report

Merging #16545 (1142246) into master (1f1e2dd) will increase coverage by 0.03%.
The diff coverage is 95.91%.

@@            Coverage Diff             @@
##           master   #16545      +/-   ##
==========================================
+ Coverage   76.71%   76.74%   +0.03%     
==========================================
  Files        1002     1002              
  Lines       53780    53846      +66     
  Branches     6859     6893      +34     
==========================================
+ Hits        41257    41325      +68     
+ Misses      12286    12285       -1     
+ Partials      237      236       -1     

Flag	Coverage Δ
javascript	71.08% <95.91%> (+0.08%)	⬆️

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

Impacted Files	Coverage Δ
...nd/src/dashboard/components/FiltersBadge/index.tsx	92.92% <94.23%> (+6.17%)	⬆️
...src/dashboard/components/FiltersBadge/selectors.ts	79.59% <97.67%> (+5.25%)	⬆️
...end/src/dashboard/components/SliceHeader/index.tsx	92.72% <100.00%> (+0.27%)	⬆️

---

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 1f1e2dd...1142246. Read the comment docs.

[stephenLYZ]

Thanks for the improvement! The code looks good to me.

[villebro]

Did my best to go through all code changes with a magnifying glass, and everything looks really clean. Also did my best to break this in testing, but wasn't able to find any problems; LGTM 👍