💪 update dash-extensions (#261)

* 💪 update dash-extensions

* 🖊️ code review

---------

Co-authored-by: Jeroen Van Der Donckt <18898740+jvdd@users.noreply.github.com>

Author: jonasvdd

examples/dash_apps/02_minimal_cache.py

@@ -3,7 +3,7 @@
 Click on a button, and see a plotly-resampler graph of two noisy sinusoids.
 No dynamic graph construction / pattern matching callbacks are needed.
 
-This example uses the dash-extensions its ServersideOutput functionality to cache
+This example uses the dash-extensions its ServerSide functionality to cache
 the FigureResampler per user/session on the server side. This way, no global figure
 variable is used and shows the best practice of using plotly-resampler within dash-apps.
 
@@ -12,14 +12,11 @@
 import numpy as np
 import plotly.graph_objects as go
 from dash import Input, Output, State, callback_context, dcc, html, no_update
-from dash_extensions.enrich import (
-    DashProxy,
-    ServersideOutput,
-    ServersideOutputTransform,
-)
+from dash_extensions.enrich import DashProxy, Serverside, ServersideOutputTransform
 from trace_updater import TraceUpdater
 
 from plotly_resampler import FigureResampler
+from plotly_resampler.aggregation import MinMaxLTTB
 
 # Data that will be used for the plotly-resampler figures
 x = np.arange(2_000_000)
@@ -46,21 +43,22 @@
 # ------------------------------------ DASH logic -------------------------------------
 # The callback used to construct and store the FigureResampler on the serverside
 @app.callback(
-    [Output("graph-id", "figure"), ServersideOutput("store", "data")],
+    [Output("graph-id", "figure"), Output("store", "data")],
     Input("plot-button", "n_clicks"),
     prevent_initial_call=True,
-    memoize=True,
 )
 def plot_graph(n_clicks):
     ctx = callback_context
     if len(ctx.triggered) and "plot-button" in ctx.triggered[0]["prop_id"]:
-        fig: FigureResampler = FigureResampler(go.Figure())
+        fig: FigureResampler = FigureResampler(
+            go.Figure(), default_downsampler=MinMaxLTTB(parallel=True)
+        )
 
         # Figure construction logic
         fig.add_trace(go.Scattergl(name="log"), hf_x=x, hf_y=noisy_sin * 0.9999995**x)
         fig.add_trace(go.Scattergl(name="exp"), hf_x=x, hf_y=noisy_sin * 1.000002**x)
 
-        return fig, fig
+        return fig, Serverside(fig)
     else:
         return no_update
 

examples/dash_apps/03_minimal_cache_dynamic.py

@@ -21,14 +21,15 @@
 from dash import MATCH, Input, Output, State, dcc, html, no_update
 from dash_extensions.enrich import (
     DashProxy,
-    ServersideOutput,
+    Serverside,
     ServersideOutputTransform,
     Trigger,
     TriggerTransform,
 )
 from trace_updater import TraceUpdater
 
 from plotly_resampler import FigureResampler
+from plotly_resampler.aggregation import MinMaxLTTB
 
 # Data that will be used for the plotly-resampler figures
 x = np.arange(2_000_000)
@@ -78,22 +79,26 @@ def add_graph_div(n_clicks: int, div_children: List[html.Div]):
 
 # This method constructs the FigureResampler graph and caches it on the server side
 @app.callback(
-    ServersideOutput({"type": "store", "index": MATCH}, "data"),
     Output({"type": "dynamic-graph", "index": MATCH}, "figure"),
+    Output({"type": "store", "index": MATCH}, "data"),
     State("add-chart", "n_clicks"),
     Trigger({"type": "interval", "index": MATCH}, "n_intervals"),
     prevent_initial_call=True,
 )
 def construct_display_graph(n_clicks) -> FigureResampler:
-    fig = FigureResampler(go.Figure(), default_n_shown_samples=2_000)
+    fig = FigureResampler(
+        go.Figure(),
+        default_n_shown_samples=2_000,
+        default_downsampler=MinMaxLTTB(parallel=True),
+    )
 
     # Figure construction logic based on a state variable, in our case n_clicks
     sigma = n_clicks * 1e-6
     fig.add_trace(dict(name="log"), hf_x=x, hf_y=noisy_sin * (1 - sigma) ** x)
     fig.add_trace(dict(name="exp"), hf_x=x, hf_y=noisy_sin * (1 + sigma) ** x)
     fig.update_layout(title=f"<b>graph - {n_clicks}</b>", title_x=0.5)
 
-    return fig, fig
+    return fig, Serverside(fig)
 
 
 @app.callback(

examples/dash_apps/11_sine_generator.py

@@ -20,7 +20,7 @@
 from dash import MATCH, Input, Output, State, callback_context, dcc, html, no_update
 from dash_extensions.enrich import (
     DashProxy,
-    ServersideOutput,
+    Serverside,
     ServersideOutputTransform,
     Trigger,
     TriggerTransform,
@@ -152,8 +152,8 @@ def add_or_remove_graph(add_graph, remove_graph, n, exp, gc_children):
 
 # This method constructs the FigureResampler graph and caches it on the server side
 @app.callback(
-    ServersideOutput({"type": "store", "index": MATCH}, "data"),
     Output({"type": "dynamic-graph", "index": MATCH}, "figure"),
+    Output({"type": "store", "index": MATCH}, "data"),
     State("nbr-datapoints", "value"),
     State("expansion-factor", "value"),
     State("add-graph-btn", "n_clicks"),
@@ -180,7 +180,7 @@ def construct_display_graph(n, exp, n_added_graphs) -> FigureResampler:
         title_x=0.5,
     )
 
-    return fr, fr
+    return fr, Serverside(fr)
 
 
 @app.callback(

examples/dash_apps/12_file_selector.py

@@ -12,12 +12,10 @@
 
 import dash_bootstrap_components as dbc
 import plotly.graph_objects as go
-from dash import Input, Output, State, callback_context, dcc, html, no_update
-from dash_extensions.enrich import (
-    DashProxy,
-    ServersideOutput,
-    ServersideOutputTransform,
-)
+
+from dash import callback_context, dcc, html, no_update
+from dash_extensions.enrich import Output, Input, State
+from dash_extensions.enrich import DashProxy, Serverside, ServersideOutputTransform
 from trace_updater import TraceUpdater
 from utils.callback_helpers import get_selector_states, multiple_folder_file_selector
 from utils.graph_construction import visualize_multiple_files
@@ -89,7 +87,7 @@ def serve_layout() -> dbc.Container:
 
 # ------------------------------------ DASH logic -------------------------------------
 @app.callback(
-    [Output("graph-id", "figure"), ServersideOutput("store", "data")],
+    [Output("graph-id", "figure"), Output("store", "data")],
     [Input("plot-button", "n_clicks"), *get_selector_states(len(name_folder_list))],
     prevent_initial_call=True,
 )
@@ -102,12 +100,13 @@ def plot_graph(n_clicks, *folder_list):
         else:
             for file in files:
                 file_list.append((Path(folder).joinpath(file)))
+    print(file_list)
 
     ctx = callback_context
     if len(ctx.triggered) and "plot-button" in ctx.triggered[0]["prop_id"]:
         if len(file_list):
             fig: FigureResampler = visualize_multiple_files(file_list)
-            return fig, fig
+            return fig, Serverside(fig)
     else:
         return no_update
 

examples/dash_apps/13_coarse_fine.py

@@ -19,11 +19,7 @@
 import dash_bootstrap_components as dbc
 import plotly.graph_objects as go
 from dash import Input, Output, State, callback_context, dcc, html, no_update
-from dash_extensions.enrich import (
-    DashProxy,
-    ServersideOutput,
-    ServersideOutputTransform,
-)
+from dash_extensions.enrich import DashProxy, Serverside, ServersideOutputTransform
 from trace_updater import TraceUpdater
 from utils.callback_helpers import get_selector_states, multiple_folder_file_selector
 from utils.graph_construction import visualize_multiple_files
@@ -33,7 +29,7 @@
 # --------------------------------------Globals ---------------------------------------
 app = DashProxy(
     __name__,
-    suppress_callback_exceptions=True,
+    suppress_callback_exceptions=False,
     external_stylesheets=[dbc.themes.LUX],
     transforms=[ServersideOutputTransform()],
 )
@@ -114,7 +110,7 @@ def serve_layout() -> dbc.Container:
     [
         Output("coarse-graph", "figure"),
         Output("plotly-resampler-graph", "figure"),
-        ServersideOutput("store", "data"),
+        Output("store", "data"),
     ],
     [Input("plot-button", "n_clicks"), *get_selector_states(len(name_folder_list))],
     prevent_initial_call=True,
@@ -155,7 +151,7 @@ def construct_plot_graph(n_clicks, *folder_list):
                 )
             )
 
-            return coarse_fig, dynamic_fig, dynamic_fig
+            return coarse_fig, dynamic_fig, Serverside(dynamic_fig)
     else:
         return no_update
 
@@ -185,4 +181,4 @@ def update_dynamic_fig(coarse_grained_relayout, fine_grained_relayout, fr_fig):
 
 # --------------------------------- Running the app ---------------------------------
 if __name__ == "__main__":
-    app.run_server(debug=True, port=9023)
+    app.run_server(debug=False, port=9023)

examples/dash_apps/utils/graph_construction.py

@@ -6,6 +6,7 @@
 from plotly.subplots import make_subplots
 
 from plotly_resampler import FigureResampler
+from plotly_resampler.aggregation import MinMaxLTTB
 
 
 # --------- graph construction logic + callback ---------
@@ -22,7 +23,10 @@ def visualize_multiple_files(file_list: List[Union[str, Path]]) -> FigureResampl
         Returns a view of the existing, global FigureResampler object.
 
     """
-    fig = FigureResampler(make_subplots(rows=len(file_list), shared_xaxes=False))
+    fig = FigureResampler(
+        make_subplots(rows=len(file_list), shared_xaxes=False),
+        default_downsampler=MinMaxLTTB(parallel=True),
+    )
     fig.update_layout(height=min(900, 350 * len(file_list)))
 
     for i, f in enumerate(file_list, 1):

examples/requirements.txt

@@ -1,6 +1,6 @@
 pyfunctional>=1.4.3
 dash-bootstrap-components>=1.2.0
-dash-extensions>=0.1.4
+dash-extensions==1.0.1  # fixated on this version as more recent versions do not work
 ipywidgets>=7.7.0
 memory-profiler>=0.60.0
 line-profiler>=3.5.1