TSVB: Improve performance / lag when interacting with a large number of series

[alexfrancoeur]

When loading multiple charts in TSVB on a dashboard with ~50+ series in each visualization, we begin to see lag interacting with the time series charts. The synchronized lines and updating the legend may be the cause of this. We'll use this issue to track possible solutions for improving the performance of TSVB charts within a dashboard that contain large numbers of data points.

cc: @ppf2 @simianhacker @mattapperson

[markov00]

@stratoula can you please test if this is still a problem and in case open a performance issue in elastic-charts?

[stratoula]

@markov00 I have created a dashboard from an index with many docs (4,476,000 hits). I have two visualizations with many series, one is a Lens visualization and the other is a TSVB. There is a lag on the cursor sync as you can see on the gif below but not on the legend update:

[markov00]

@markov00 I have created a dashboard from an index with many docs (4,476,000 hits). I have two visualizations with many series, one is a Lens visualization and the other is a TSVB. There is a lag on the cursor sync as you can see on the gif below but not on the legend update

@stratoula there is no/low lag in the current interactive chart, that is actually a good thing.
For the other chart, could you please check and try changing the Settings.pointerUpdateDebounce to a value in ms near to 0? Please change that value on the chart that is sending sending the cursor events

[stratoula]

@markov00 I set pointerUpdateDebounce={0} to the first chart (TSVB) and I think I can see an improvement. Below two videos with and without the setting:

With

Without

Also something else I noticed. The above charts are broken doen by 30 values. If I increase the second chart (Lens) to 50 and hover over it in the Lens editor, the tooltips seem to work fine but when they are embedded in the dashboard they are not so performant. Check the video below:

Same applies for the TSVB viz.

[flash1293]

Also something else I noticed. The above charts are broken doen by 30 values. If I increase the second chart (Lens) to 50 and hover over it in the Lens editor, the tooltips seem to work fine but when they are embedded in the dashboard they are not so performant. Check the video below:
Same applies for the TSVB viz.

It seems like there is a scroll bar flickering, maybe that's causing it.