Could I make streamlit support Plotly resampler?

🎈 Using Streamlit
1

Plotly resampler is an amazing tool for handler larger data plots (potential with millions of data points. However upon configuring plots, it fails to trigger in Streamlit and doesn’t compute/update the plot and simply zooms in on the existing rendered graph. Any idea how this might be achieved?

https://predict-idlab.github.io/plotly-resampler/

basic_example

2

Though it’s a hacky method (running dash in another process), this does seem to work plotly-resampler/streamlit_app.py at main · predict-idlab/plotly-resampler · GitHub

I needed to wrap some code in if __name__ == __main__ to get it to work:

# 0. Create a noisy sine wave
import numpy as np
import plotly.graph_objects as go
from plotly_resampler import FigureResampler

x = np.arange(1_000_000)
noisy_sin = (3 + np.sin(x / 200) + np.random.randn(len(x)) / 10) * x / 1_000

### 1. Use FigureResampler
fig = FigureResampler(default_n_shown_samples=2_000)
fig.add_trace(go.Scattergl(name="noisy sine", showlegend=True), hf_x=x, hf_y=noisy_sin)
fig.update_layout(height=700)

if __name__ == "__main__":
    ### 2. Run the visualization (which is a dash app) in a (sub)process on a certain port
    # Note: starting a process allows executing code after `.show_dash` is called
    from multiprocessing import Process

    port = 9022
    proc = Process(
        target=fig.show_dash, kwargs=dict(mode="external", port=port)
    ).start()

    # Deleting the lines below this and running this file will result in a classic running dash app
    # Note: for just a dash app it is not even necessary to execute .show_dash in a (sub)process

    ### 3. Add as iframe component to streamlit
    import streamlit.components.v1 as components

    components.iframe(f"http://localhost:{port}", height=700)

This would be a great component if someone wanted to build a component to support this natively!

2 Likes
3

Wow! Cool, thanks for sharing :slight_smile: Will try to impliment this!

Much appreaciated!

4

This looks super useful! Actually I think this should be an integrated feature of the plotly library. Yet, if someone could make plotly-resampler fully work with streamlit it would be great! The hacky solution proposed here only gives me black lines and is also a bit laggy.