[Performance] Using Echarts To Improve Raw Graph Performance

[ahmedtarek-]

WIP

[ahmedtarek-]

screen-capture.webm
I could only make it work, after being stuck for some time trying to make it work with subscription logic, as shown in the video.
It looks ugly af at the moment. On the bright side, the performance seems to be better and not lagging behind (the video is taken after running it for more than 2 minutes already).

My current task is to

1. Make it prettier; more spaces between lines ✅
2. Quantify the performance and compare to the other pull request

[timonmerk]

Cool! Do you see it "lagging" behind after stopping the stream? So that the visualization still takes more time to finish?

[ahmedtarek-]

@timonmerk It lags but for only a second or two. In general, it seems more performant. Here is the breakdown of performance.

Peformance comparison for 500 incoming messages (through Websocket)

• [Echarts] without subscription -> 250 updates, 49 s
• [Plotly] Restyle yTraces only -> 611 update, 121.921 s
• [Plotly] React with subscription only -> 500 updates, 114.072 s
• [Plotly] React without subscription -> 254 updates, 61 s