Form inputs show excessive keyboard input lag when plotly charts onscreen

Summary

Plotly graphs on screen cause very bad input lag (i.e the text in the form is long after the keystroke) for forms.

Steps to reproduce

A fairly minimal reproduction is in this repo along with a screen recording.

The demo app is deployed on streamlit.io so anyone can see the performance issue for themselves. The issue doesn’t happen with Altair charts.

If applicable, please provide the steps we should take to reproduce the bug:

Expected behavior:

Text input or numeric input in the form should be nearly instant and not subject to lag.

Actual behavior:

Text or numeric input shows up in the form input fields 300ms or more after the key is pressed.

Is this a regression?

Not sure

Debug info

• Streamlit version: (get it with $ streamlit version) 1.12.2
• Python version: (get it with $ python --version) 3.9
• Using Conda? PipEnv? PyEnv? Pex? pip
• OS version: OS X
• Browser version: Safari or Chrome

[AnOctopus]

I’m pretty sure I figured out the cause of the issue. Widgets in forms update the stored state very eagerly, causing a top level component to rerender each input. The plotly component we’re using wants to use reference identity to determine if it should recompute things for a rerender, but we keep passing it objects that are value-equal but not reference-equal, so it does a bunch of work because it always thinks things have changed. This doesn’t cause lag for a text box out of a form because it only updates the stored state at the very end, at which point it’s easy to miss the app spending time doing plotly stuff because it is also processing the results of the rerun that just started.

Fixing this will be a matter of either changing what we pass to the component, or replacing it with one that works differently. I don’t know when exactly I’ll get to fixing it but there’s a clear path for it, at least.

[AnOctopus]

I took a look at this issue this afternoon, something about forms is causing DOM events to trigger plotly to run an expensive rerender, though I don’t yet know why.