fix: add listener to repaint on visibility change for canvas

[eschutho]

SUMMARY

We're seeing with the latest release of Chrome, some canvas elements on the dashboard will disappear, and only reappear on mouseover. I believe that there was an experimental feature in Chrome that saved memory by removing canvas elements when the browser tab wasn't active, and it just went GA.

Echart's library zrender is responsible for animating the canvas on mouseover which is making the canvas visible again, but we need another solution to repaint the canvas when the document is visible again.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

Screen.Recording.2024-05-17.at.5.14.44.PM.mov

After:

Screen.Recording.2024-05-17.at.5.15.49.PM.mov

TESTING INSTRUCTIONS

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

[yousoph]

/testenv up

[github-actions]

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

[mistercrunch]

This appears to fix the behavior in the Dashboard app, but not in explore (?) should we do this lower level in the Chart component or in some other chart-wrapping component that's common to both Explore and Dashboard ?

[eschutho]

@mistercrunch it doesn't seem to affect explore or individual charts, but only dashboards. One issue with adding it to explore is that we need to assign an event listener to the window, and only one event listener is allowed at a time, or rather each time we create a new event listener, it will overwrite the last one. This change uses the already existing visibilitychange event listener used for logging.

[mistercrunch]

Oh interesting, I'm positive I've seen the behavior in explore too. I'm on Mobile now so I can't tell reproduce... I think it was big number, blank after switching tab, reappears on hover.

[eschutho]

Ok, took a couple more tries, but I was just able to repro on explore. I can add another event listener there, but outside of the slice so that we don't wind up with multiple event listeners. Talking with a few folks, it sounds like we may want to follow up with explore in a separate PR.

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.

[michael-s-molina]

@eschutho Thank you for providing this fix. It looks like they disabled the feature that was causing the problem in 125.0.6422.76 which is already available. Can we revert this PR to avoid introducing logic that fixes a dependency problem?