Throttling of XY chart data update

[PatrickTasse]

Currently the XY chart requests a new data model from the trace-server every time the window range is updated.

When navigation with the mouse or keyboard, this can lead to many requests within a short amount of time.

Moreover these requests are processed asynchronously in parallel, and the XY chart is updated from the returned model as soon as each response is received. This means that if the last request is faster than a previous one, the final XY chart data could be for a different window range than the current one, leading to a mismatch and a XY chart window range that is out of sync with the other charts. When panning continuously, we can also see the XY chart bouncing left and right in a somewhat unpredictable manner as the updates are applied out of order.

A throttling mechanism should be introduced to prevent flooding the trace-server with requests, and the algorithm should ensure that the XY chart is updated with the proper (most recent) window range.

[bhufmann]

Thanks for reporting this. Sounds like good proposal to throttle requests. Debouncing could be also considered. I implemented debounce of the resize handler call in the timeline-chart component (see #372). I used debounce from the lodash library which also has methods for throttling.

[mirsky-work]

An example of how the issue manifests is #453 (a duplicate)

[ebugden]

I second that this issue is important! I recently observed someone using the Trace Viewer and this issue was very obvious during normal operations (bug hunt tracevizlab traces). In the video below, captured during this session, the XY charts finish scrolling 37 seconds after the user stops scrolling input. The extremely delayed movement makes the XY charts virtually unusable and the visual jitter is also distracting.

Video:

• 0:00 - User starts scrolling sideways. The Gantt chart immediately starts moving smoothly. (The XY charts are still catching up from the previous user input)
• 0:08 - User stops scrolling.
• 0:17 - XY charts start to shift based on the user input that started at 0:00 (17 seconds late)
• 0:45 - XY charts finish responding to the user input that stopped at 0:08 (37 seconds late)

Theia.Demo.Trial.-.Delayed.movement.mp4