Drag Slider with Plot Updating Performance Test

I've created a basic application with a slider and a Plotly plot. I want to explore my data/ model interactively by dragging the slider fast back and forth.

As you can see below only Panel can deliver the performance needed.

You can find the source code here.

Test Results

Framework	Supports drag events	Snappy experience	Comment
Dash	yes	no	Dash supports dragging the slider but quickly gives up
Panel	yes	yes	No problem
Streamlit	no	no	Seems not supported.

https://user-images.githubusercontent.com/42288570/149648993-5a850b36-cbcc-4b1f-9908-3778557759e0.mp4

Discussion

Dash: As you can see Dash quickly gives up. I believe that the combination of Flask and http will never be able to provide really snappy updates. I've been told that an additional issue is that dash sends a lot of data back and forth on each update.
Panel: I've always been impressed by the performance of Bokeh. Panel builds on Bokeh and is capable of achieving similar performance. My hypothesis is that Panel would be even more snappy with Bokeh/ Holoviews plots.
Streamlit: I could not find a way to react to slider dragging. I believe the run script top to bottom architecture of Streamlit will never be able to provide really snappy updates. See this discussion Make st.slider and st.color_picker only rerun script on mouse up and Improve performance of Streamlit to update plots.

For example Dask Dashboard is developed in Bokeh and is very, very performant. I don't believe its possible to build a performant application like that in Streamlit or Dash. It would be in Panel though.

I would expect interactive applications with streaming to perform much better in Panel than Dash. Streamlit does not really support interactive applications with streaming.

Another noticeable difference is just how much code it takes to make a basic Dash application.

Source

https://user-images.githubusercontent.com/42288570/149649005-24f9f4d2-b84f-45d2-888a-c2b4b618c66b.mp4 https://user-images.githubusercontent.com/42288570/149649006-44307849-273b-4b35-b3f1-bf657f8b5a36.mp4 https://user-images.githubusercontent.com/42288570/149649007-eca75cf9-fdf6-4304-85ef-6eea26ccd3c0.mp4

Promo Gif

slider-plot-comparision-promo

Promo Video

https://user-images.githubusercontent.com/42288570/149649087-f1f94166-f776-4b21-bbe9-fa9425d7dae0.mp4

Commands

docker run --rm -it -p 80:80 dataappperformance:latest -c 'invoke slider-plot.panel'
docker run --rm -it -p 80:80 dataappperformance:latest -c 'invoke slider-plot.streamlit'
docker run --rm -it -p 80:80 dataappperformance:latest -c 'invoke slider-plot.dash'

MarcSkovMadsen / data-app-performance