Skip to content

Conversation

@gggritso
Copy link
Member

This PR is part of the effort to improve how fast the Widget Builder opens and runs. One of the reasons why it's slow is that the Dashboard component (i.e., the literal dashboard and all its charts) underneath the builder re-renders when it opens. This takes a long time because each ECharts object takes ~50ms to re-draw. You can see this phase in the screenshot, there are 5 charts on that page, so ~250ms delay.
Screenshot 2025-11-14 at 11 19 10 AM

On re-render, echarts-for-react calls componentDidUpdate and in there, echarts.setOption which re-draws the chart. Drawing is expensive because ECharts needs to measure the DOM a lot (to calculate overlap between labels) and because it might be calling a bunch of requestAnimationFrame to run animations from ZRender.
Screenshot 2025-11-14 at 11 20 53 AM

This PR makes two major changes:

  1. Turn animations off completely on Dashboards charts. We don't have any animations configured, but even still ZRender will call requestAnimationFrame to schedule animations sometimes. Not a major win, but still a win
  2. Allow ECharts to merge chart options. In ECharts, calling setOption, by default, will compare the objects and only update and re-draw things that changed. This is much more efficient than re-drawing (see above). In BaseChart, we've set notMerge to true by default, which forces ECharts to re-draw! I've set notMerge to false for Dashboards, so ECharts will merge the options

There's no "After" profile, because that section disappears completely. TADA, a huge amount of work gone.

I'm not comfortable turning off notMerge for all charts because in some cases it might cause UI problems, but in Dashboards this seems to work well. I thought for a long time about doing some hardcore memoizing of the props to ECharts, but that's too brittle and annoying, and there are too many contexts that cause hard to avoid re-renders.

@gggritso gggritso requested a review from a team November 14, 2025 16:51
@gggritso gggritso requested review from a team as code owners November 14, 2025 16:51
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Nov 14, 2025
@gggritso gggritso merged commit 47ba7ab into master Nov 14, 2025
47 checks passed
@gggritso gggritso deleted the georgegritsouk/dain-1082-prevent-re-renders-of-expensive-chart-components branch November 14, 2025 20:12
@sentry
Copy link

sentry bot commented Nov 14, 2025

Issues attributed to commits in this pull request

This pull request was merged and Sentry observed the following issues:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants