perf(dashboards): Fix slow re-render of ECharts objects #103375
Merged
+17
−2
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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

Dashboardcomponent (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.On re-render,

echarts-for-reactcallscomponentDidUpdateand in there,echarts.setOptionwhich 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 ofrequestAnimationFrameto run animations from ZRender.This PR makes two major changes:
requestAnimationFrameto schedule animations sometimes. Not a major win, but still a winsetOption, 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). InBaseChart, we've setnotMergetotrueby default, which forces ECharts to re-draw! I've setnotMergetofalsefor Dashboards, so ECharts will merge the optionsThere's no "After" profile, because that section disappears completely. TADA, a huge amount of work gone.
I'm not comfortable turning off
notMergefor 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.