🔥 add streamlit integration example

Author: jvdd

examples/README.md

@@ -17,11 +17,19 @@ Additionally, this notebook highlights how to use the `FigureWidget` its on-clic
 
 ## 1. Dash apps
 
-The [dash_apps](dash_apps/dash_app.py) folder contains example dash apps in
+The [dash_apps](dash_apps/) folder contains example dash apps in
 which `plotly-resampler` is integrated
 
 | app-name | description |
 | --- | --- |
 | [file visualization](dash_apps/dash_app.py) | load and visualize multiple `.parquet` files with plotly-resampler |
 | [dynamic sine generator](dash_apps/construct_dynamic_figures.py) | expeonential sine generator which uses [pattern matching callbacks](https://dash.plotly.com/pattern-matching-callbacks) to remove and construct plotly-resampler graphs dynamically |
-| [dynamic static graph](dash_apps/dash_app_coarse_fine.py) | Visualization dashboard in which a dynamic (i.e., plotly-resampler graph) and static graph (i.e., go.Figure) are shown (made for [this issue](https://github.com/predict-idlab/plotly-resampler/issues/56)). Relayout events on the coarse graph update the dynamic graph.
+| [dynamic static graph](dash_apps/dash_app_coarse_fine.py) | Visualization dashboard in which a dynamic (i.e., plotly-resampler graph) and static graph (i.e., go.Figure) are shown (made for [this issue](https://github.com/predict-idlab/plotly-resampler/issues/56)). Relayout events on the coarse graph update the dynamic graph.
+
+## 2. Other apps
+
+The [other_apps](other_apps/) folder contains examples of `plotly-resampler` being *integrated* in other apps / frameworks
+
+| app-name | description |
+| --- | --- |
+| [streamlit integration](other_apps/streamlit_app.py) | visualize a large noisy sine in a [streamlit](https://streamlit.io/) app |

examples/other_apps/streamlit_app.py

@@ -0,0 +1,42 @@
+"""Minimal streamlit app example.
+
+This example shows how to integrate plotly-resampler in a streamlit app.
+The following thee steps are required;
+1. use FigureResampler
+2. run the visualization (which is a dash app) in a (sub)process on a certain port
+3. add as iframe component to streamlit
+
+To run this example execute the following command:
+$ streamlit run streamlit_app.py
+
+"""
+
+__author__ = "Jeroen Van Der Donckt"
+
+import plotly.graph_objects as go
+from plotly_resampler import FigureResampler
+
+# 0. Create a noisy sine wave
+import numpy as np
+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)
+
+### 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)