Refactor/remove trace updater (#281)

* ✨ removing TraceUpdater from docs

* 💨 updating tests

* 💪 updating dash apps

* 🙏 fix traceupdater bug

* 🎄 updating examples

* 🙈 formatting

* ✨ rerunning basic example

* 🙈 make graph div an array

* 💪 patch compatible http request parsing

* 💨 add no_update edge case to patch method

* 🙏

* 🖊️ improving docs

* 🕵️ review examples

* 🧹 review code

* 👀 add type hints

* 🙈 fix typo

---------

Co-authored-by: Jeroen Van Der Donckt <[email protected]>

Author: jonasvdd

.gitignore

@@ -3,6 +3,7 @@ venv*
 *.ruff*
 *.DS_Store
 file_system_store/
+file_system_backend/
 
 # Sphinx documentation
 *_build/

Makefile

@@ -14,6 +14,10 @@ lint:
 test:
 	poetry run pytest --cov-report term-missing --cov=plotly_resampler tests
 
+.PHONY: docs
+docs:
+	poetry run mkdocs build -c -f mkdocs.yml
+
 .PHONY: clean
 clean:
 	rm -rf `find . -name __pycache__`

examples/basic_example.ipynb

@@ -4,7 +4,7 @@
 No dynamic graph construction / pattern matching callbacks are needed.
 
 This example uses a global FigureResampler object, which is considered a bad practice.
-source: https://dash.plotly.com/sharing-data-between-callbacks: 
+source: https://dash.plotly.com/sharing-data-between-callbacks:
 
     Dash is designed to work in multi-user environments where multiple people view the
     application at the same time and have independent sessions.
@@ -16,7 +16,6 @@
 import numpy as np
 import plotly.graph_objects as go
 from dash import Dash, Input, Output, callback_context, dcc, html, no_update
-from trace_updater import TraceUpdater
 
 from plotly_resampler import FigureResampler
 
@@ -38,9 +37,8 @@
         html.H1("plotly-resampler global variable", style={"textAlign": "center"}),
         html.Button("plot chart", id="plot-button", n_clicks=0),
         html.Hr(),
-        # The graph and it's needed components to update efficiently
+        # The graph object  - which we will empower with plotly-resampler
         dcc.Graph(id="graph-id"),
-        TraceUpdater(id="trace-updater", gdID="graph-id"),
     ]
 )
 
@@ -67,10 +65,8 @@ def plot_graph(n_clicks):
         return no_update
 
 
-# Register the graph update callbacks to the layout
-fig.register_update_graph_callback(
-    app=app, graph_id="graph-id", trace_updater_id="trace-updater"
-)
+# The plotly-resampler callback to update the graph after a relayout event (= zoom/pan)
+fig.register_update_graph_callback(app=app, graph_id="graph-id")
 
 # --------------------------------- Running the app ---------------------------------
 if __name__ == "__main__":

examples/dash_apps/01_minimal_global.py

@@ -13,7 +13,6 @@
 import plotly.graph_objects as go
 from dash import Input, Output, State, callback_context, dcc, html, no_update
 from dash_extensions.enrich import DashProxy, Serverside, ServersideOutputTransform
-from trace_updater import TraceUpdater
 
 from plotly_resampler import FigureResampler
 from plotly_resampler.aggregation import MinMaxLTTB
@@ -30,12 +29,11 @@
         html.H1("plotly-resampler + dash-extensions", style={"textAlign": "center"}),
         html.Button("plot chart", id="plot-button", n_clicks=0),
         html.Hr(),
-        # The graph and its needed components to serialize and update efficiently
+        # The graph object - which we will empower with plotly-resampler
+        dcc.Graph(id="graph-id"),
         # Note: we also add a dcc.Store component, which will be used to link the
         #       server side cached FigureResampler object
-        dcc.Graph(id="graph-id"),
         dcc.Loading(dcc.Store(id="store")),
-        TraceUpdater(id="trace-updater", gdID="graph-id"),
     ]
 )
 
@@ -63,17 +61,19 @@ def plot_graph(n_clicks):
         return no_update
 
 
+# The plotly-resampler callback to update the graph after a relayout event (= zoom/pan)
+# As we use the figure again as output, we need to set: allow_duplicate=True
 @app.callback(
-    Output("trace-updater", "updateData"),
+    Output("graph-id", "figure", allow_duplicate=True),
     Input("graph-id", "relayoutData"),
     State("store", "data"),  # The server side cached FigureResampler per session
     prevent_initial_call=True,
     memoize=True,
 )
-def update_fig(relayoutdata, fig):
+def update_fig(relayoutdata: dict, fig: FigureResampler):
     if fig is None:
         return no_update
-    return fig.construct_update_data(relayoutdata)
+    return fig.construct_update_data_patch(relayoutdata)
 
 
 # --------------------------------- Running the app ---------------------------------

examples/dash_apps/02_minimal_cache.py

@@ -26,7 +26,6 @@
     Trigger,
     TriggerTransform,
 )
-from trace_updater import TraceUpdater
 
 from plotly_resampler import FigureResampler
 from plotly_resampler.aggregation import MinMaxLTTB
@@ -59,12 +58,10 @@ def add_graph_div(n_clicks: int, div_children: List[html.Div]):
     uid = str(uuid4())
     new_child = html.Div(
         children=[
-            # The graph and its needed components to serialize and update efficiently
+            dcc.Graph(id={"type": "dynamic-graph", "index": uid}, figure=go.Figure()),
             # Note: we also add a dcc.Store component, which will be used to link the
             #       server side cached FigureResampler object
-            dcc.Graph(id={"type": "dynamic-graph", "index": uid}, figure=go.Figure()),
             dcc.Loading(dcc.Store(id={"type": "store", "index": uid})),
-            TraceUpdater(id={"type": "dynamic-updater", "index": uid}, gdID=f"{uid}"),
             # This dcc.Interval components makes sure that the `construct_display_graph`
             # callback is fired once after these components are added to the session
             # its front-end
@@ -101,16 +98,18 @@ def construct_display_graph(n_clicks) -> FigureResampler:
     return fig, Serverside(fig)
 
 
+# The plotly-resampler callback to update the graph after a relayout event (= zoom/pan)
+# As we use the figure again as output, we need to set: allow_duplicate=True
 @app.callback(
-    Output({"type": "dynamic-updater", "index": MATCH}, "updateData"),
+    Output({"type": "dynamic-graph", "index": MATCH}, "figure", allow_duplicate=True),
     Input({"type": "dynamic-graph", "index": MATCH}, "relayoutData"),
     State({"type": "store", "index": MATCH}, "data"),
     prevent_initial_call=True,
     memoize=True,
 )
 def update_fig(relayoutdata: dict, fig: FigureResampler):
     if fig is not None:
-        return fig.construct_update_data(relayoutdata)
+        return fig.construct_update_data_patch(relayoutdata)
     return no_update
 
 

examples/dash_apps/03_minimal_cache_dynamic.py

@@ -11,16 +11,15 @@
 
 """
 
+import dash
 import numpy as np
 import plotly.graph_objects as go
-import dash
 from dash import Input, Output, State, callback_context, dcc, html, no_update
 from dash_extensions.enrich import DashProxy, Serverside, ServersideOutputTransform
-from trace_updater import TraceUpdater
 
 # The overview figure requires clientside callbacks, whose JavaScript code is located
 # in the assets folder. We need to tell dash where to find this folder.
-from plotly_resampler import FigureResampler, ASSETS_FOLDER
+from plotly_resampler import ASSETS_FOLDER, FigureResampler
 
 # -------------------------------- Data and constants ---------------------------------
 # Data that will be used for the plotly-resampler figures
@@ -31,27 +30,27 @@
 GRAPH_ID = "graph-id"
 OVERVIEW_GRAPH_ID = "overview-graph"
 STORE_ID = "store"
-TRACEUPDATER_ID = "traceupdater"
 
 
 # --------------------------------------Globals ---------------------------------------
-# Remark how the assests folder is passed to the Dash(proxy) application
+# NOTE: Remark how the assests folder is passed to the Dash(proxy) application and how
+#       the lodash script is included as an external script.
 app = DashProxy(
-    __name__, transforms=[ServersideOutputTransform()], assets_folder=ASSETS_FOLDER
+    __name__,
+    transforms=[ServersideOutputTransform()],
+    assets_folder=ASSETS_FOLDER,
+    external_scripts=["https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"],
 )
 
 app.layout = html.Div(
     [
         html.H1("plotly-resampler + dash-extensions", style={"textAlign": "center"}),
         html.Button("plot chart", id="plot-button", n_clicks=0),
         html.Hr(),
-        # The graph and its needed components to serialize and update efficiently
-        # Note: we also add a dcc.Store component, which will be used to link the
-        #       server side cached FigureResampler object
+        # The graph, overview graph, and servside store for the FigureResampler graph
         dcc.Graph(id=GRAPH_ID),
         dcc.Graph(id=OVERVIEW_GRAPH_ID),
         dcc.Loading(dcc.Store(id=STORE_ID)),
-        TraceUpdater(id=TRACEUPDATER_ID, gdID=GRAPH_ID),
     ]
 )
 
@@ -104,19 +103,22 @@ def plot_graph(_):
 )
 
 
-# --- FigureResampler update logic ---
+# --- FigureResampler update callback ---
+
+# The plotly-resampler callback to update the graph after a relayout event (= zoom/pan)
+# As we use the figure again as output, we need to set: allow_duplicate=True
 @app.callback(
-    Output(TRACEUPDATER_ID, "updateData"),
+    Output(GRAPH_ID, "figure", allow_duplicate=True),
     Input(GRAPH_ID, "relayoutData"),
     State(STORE_ID, "data"),  # The server side cached FigureResampler per session
     prevent_initial_call=True,
 )
-def update_fig(relayoutdata, fig):
+def update_fig(relayoutdata: dict, fig: FigureResampler):
     if fig is None:
         return no_update
-    return fig.construct_update_data(relayoutdata)
+    return fig.construct_update_data_patch(relayoutdata)
 
 
 # --------------------------------- Running the app ---------------------------------
 if __name__ == "__main__":
-    app.run_server(debug=False, port=9023, use_reloader=False)
+    app.run_server(debug=True, port=9023, use_reloader=False)

examples/dash_apps/04_minimal_cache_overview.py

@@ -19,7 +19,6 @@
 from dash import Input, Output, State, callback_context, dcc, html, no_update
 from dash_extensions.enrich import DashProxy, Serverside, ServersideOutputTransform
 from plotly.subplots import make_subplots
-from trace_updater import TraceUpdater
 
 # The overview figure requires clientside callbacks, whose JavaScript code is located
 # in the assets folder. We need to tell dash where to find this folder.
@@ -35,27 +34,27 @@
 GRAPH_ID = "graph-id"
 OVERVIEW_GRAPH_ID = "overview-graph"
 STORE_ID = "store"
-TRACEUPDATER_ID = "traceupdater"
 
 
 # --------------------------------------Globals ---------------------------------------
-# Remark how the assests folder is passed to the Dash(proxy) application
+# NOTE: Remark how the assests folder is passed to the Dash(proxy) application and how
+#       the lodash script is included as an external script.
 app = DashProxy(
-    __name__, transforms=[ServersideOutputTransform()], assets_folder=ASSETS_FOLDER
+    __name__,
+    transforms=[ServersideOutputTransform()],
+    assets_folder=ASSETS_FOLDER,
+    external_scripts=["https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"],
 )
 
 app.layout = html.Div(
     [
         html.H1("plotly-resampler + dash-extensions", style={"textAlign": "center"}),
         html.Button("plot chart", id="plot-button", n_clicks=0),
         html.Hr(),
-        # The graph and its needed components to serialize and update efficiently
-        # Note: we also add a dcc.Store component, which will be used to link the
-        #       server side cached FigureResampler object
+        # The graph, overview graph, and servside store for the FigureResampler graph
         dcc.Graph(id=GRAPH_ID),
         dcc.Graph(id=OVERVIEW_GRAPH_ID),
         dcc.Loading(dcc.Store(id=STORE_ID)),
-        TraceUpdater(id=TRACEUPDATER_ID, gdID=GRAPH_ID),
     ]
 )
 
@@ -139,17 +138,20 @@ def plot_graph(_):
 )
 
 
-# --- FigureResampler update logic ---
+# --- FigureResampler update callback ---
+
+# The plotly-resampler callback to update the graph after a relayout event (= zoom/pan)
+# As we use the figure again as output, we need to set: allow_duplicate=True
 @app.callback(
-    Output(TRACEUPDATER_ID, "updateData"),
+    Output(GRAPH_ID, "figure", allow_duplicate=True),
     Input(GRAPH_ID, "relayoutData"),
     State(STORE_ID, "data"),  # The server side cached FigureResampler per session
     prevent_initial_call=True,
 )
-def update_fig(relayoutdata, fig):
+def update_fig(relayoutdata, fig: FigureResampler):
     if fig is None:
         return no_update
-    return fig.construct_update_data(relayoutdata)
+    return fig.construct_update_data_patch(relayoutdata)
 
 
 # --------------------------------- Running the app ---------------------------------

examples/dash_apps/05_cache_overview_subplots.py

@@ -25,7 +25,6 @@
     Trigger,
     TriggerTransform,
 )
-from trace_updater import TraceUpdater
 
 from plotly_resampler import FigureResampler
 
@@ -132,12 +131,10 @@ def add_or_remove_graph(add_graph, remove_graph, n, exp, gc_children):
     uid = str(uuid4())
     new_child = html.Div(
         children=[
-            # The graph and its needed components to serialize and update efficiently
             # Note: we also add a dcc.Store component, which will be used to link the
             #       server side cached FigureResampler object
             dcc.Graph(id={"type": "dynamic-graph", "index": uid}, figure=go.Figure()),
             dcc.Loading(dcc.Store(id={"type": "store", "index": uid})),
-            TraceUpdater(id={"type": "dynamic-updater", "index": uid}, gdID=f"{uid}"),
             # This dcc.Interval components makes sure that the `construct_display_graph`
             # callback is fired once after these components are added to the session
             # its front-end
@@ -183,19 +180,23 @@ def construct_display_graph(n, exp, n_added_graphs) -> FigureResampler:
     return fr, Serverside(fr)
 
 
+# --- FigureResampler update callback ---
+
+# The plotly-resampler callback to update the graph after a relayout event (= zoom/pan)
+# As we use the figure again as output, we need to set: allow_duplicate=True
 @app.callback(
-    Output({"type": "dynamic-updater", "index": MATCH}, "updateData"),
+    Output({"type": "dynamic-graph", "index": MATCH}, "figure", allow_duplicate=True),
     Input({"type": "dynamic-graph", "index": MATCH}, "relayoutData"),
     State({"type": "store", "index": MATCH}, "data"),
     prevent_initial_call=True,
     memoize=True,
 )
 def update_fig(relayoutdata: dict, fig: FigureResampler):
     if fig is not None:
-        return fig.construct_update_data(relayoutdata)
+        return fig.construct_update_data_patch(relayoutdata)
     return no_update
 
 
 # --------------------------------- Running the app ---------------------------------
 if __name__ == "__main__":
-    app.run_server(debug=True, port=9023)
+    app.run_server(debug=True, port=9023, use_reloader=False)