Merge pull request #2009 from MrTeale/clientside-callbacks-promise-handling

Clientside Callback Promise Handling

Author: alexcjohnson

CHANGELOG.md

@@ -4,6 +4,10 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ## [Unreleased]
 
+### Added
+
+- [#2009](https://github.com/plotly/dash/pull/2009) Add support for Promises within Client-side callbacks as requested in [#1364](https://github.com/plotly/dash/pull/1364).
+
 ### Fixed
 
 - [#2015](https://github.com/plotly/dash/pull/2015) Fix bug [#1854](https://github.com/plotly/dash/issues/1854) in which the combination of row_selectable="single or multi" and filter_action="native" caused the JS error.

dash/dash-renderer/src/actions/callbacks.ts

@@ -200,7 +200,7 @@ const getVals = (input: any) =>
 const zipIfArray = (a: any, b: any) =>
     Array.isArray(a) ? zip(a, b) : [[a, b]];
 
-function handleClientside(
+async function handleClientside(
     dispatch: any,
     clientside_function: any,
     config: any,
@@ -246,14 +246,12 @@ function handleClientside(
         dc.callback_context.states_list = state;
         dc.callback_context.states = stateDict;
 
-        const returnValue = dc[namespace][function_name](...args);
+        let returnValue = dc[namespace][function_name](...args);
+
+        delete dc.callback_context;
 
         if (typeof returnValue?.then === 'function') {
-            throw new Error(
-                'The clientside function returned a Promise. ' +
-                    'Promises are not supported in Dash clientside ' +
-                    'right now, but may be in the future.'
-            );
+            returnValue = await returnValue;
         }
 
         zipIfArray(outputs, returnValue).forEach(([outi, reti]) => {
@@ -504,15 +502,13 @@ export function executeCallback(
 
                 if (clientside_function) {
                     try {
-                        return {
-                            data: handleClientside(
-                                dispatch,
-                                clientside_function,
-                                config,
-                                payload
-                            ),
+                        const data = await handleClientside(
+                            dispatch,
+                            clientside_function,
+                            config,
                             payload
-                        };
+                        );
+                        return {data, payload};
                     } catch (error: any) {
                         return {error, payload};
                     }

tests/integration/clientside/assets/clientside.js

@@ -98,5 +98,27 @@ window.dash_clientside.clientside = {
         }
         window.callCount += 1;
         return inputValue.toString();
-    }
+    },
+
+    chained_promise: function (inputValue) {
+        return new Promise(function (resolve) {
+            setTimeout(function () {
+                resolve(inputValue + "-chained");
+            }, 100);
+        });
+    },
+
+    delayed_promise: function (inputValue) {
+        return new Promise(function (resolve) {
+            window.callbackDone = function (deferredValue) {
+                resolve("clientside-" + inputValue + "-" + deferredValue);
+            };
+        });
+    },
+
+    non_delayed_promise: function (inputValue) {
+        return new Promise(function (resolve) {
+            resolve("clientside-" + inputValue);
+        });
+    },
 };

tests/integration/clientside/test_clientside.py

@@ -1,5 +1,5 @@
 # -*- coding: UTF-8 -*-
-from multiprocessing import Value
+from multiprocessing import Value, Lock
 
 from dash import Dash, Input, Output, State, ClientsideFunction, ALL, html, dcc
 from selenium.webdriver.common.keys import Keys
@@ -223,30 +223,6 @@ def test_clsd004_clientside_multiple_outputs(dash_duo):
         dash_duo.wait_for_text_to_equal(selector, expected)
 
 
-def test_clsd005_clientside_fails_when_returning_a_promise(dash_duo):
-    app = Dash(__name__, assets_folder="assets")
-
-    app.layout = html.Div(
-        [
-            html.Div(id="input", children="hello"),
-            html.Div(id="side-effect"),
-            html.Div(id="output", children="output"),
-        ]
-    )
-
-    app.clientside_callback(
-        ClientsideFunction("clientside", "side_effect_and_return_a_promise"),
-        Output("output", "children"),
-        [Input("input", "children")],
-    )
-
-    dash_duo.start_server(app)
-
-    dash_duo.wait_for_text_to_equal("#input", "hello")
-    dash_duo.wait_for_text_to_equal("#side-effect", "side effect")
-    dash_duo.wait_for_text_to_equal("#output", "output")
-
-
 def test_clsd006_PreventUpdate(dash_duo):
     app = Dash(__name__, assets_folder="assets")
 
@@ -716,3 +692,140 @@ def test_clsd014_input_output_callback(dash_duo):
     assert call_count == 2, "initial + changed once"
 
     assert dash_duo.get_logs() == []
+
+
+def test_clsd015_clientside_chained_callbacks_returning_promise(dash_duo):
+    app = Dash(__name__, assets_folder="assets")
+
+    app.layout = html.Div(
+        [
+            html.Div(id="input", children=["initial"]),
+            html.Div(id="div-1"),
+            html.Div(id="div-2"),
+        ]
+    )
+
+    app.clientside_callback(
+        ClientsideFunction(namespace="clientside", function_name="chained_promise"),
+        Output("div-1", "children"),
+        Input("input", "children"),
+    )
+
+    @app.callback(Output("div-2", "children"), Input("div-1", "children"))
+    def callback(value):
+        return value + "-twice"
+
+    dash_duo.start_server(app)
+
+    dash_duo.wait_for_text_to_equal("#div-1", "initial-chained")
+    dash_duo.wait_for_text_to_equal("#div-2", "initial-chained-twice")
+
+
+def test_clsd016_serverside_clientside_shared_input_with_promise(dash_duo):
+    app = Dash(__name__, assets_folder="assets")
+
+    app.layout = html.Div(
+        [
+            html.Div(id="input", children=["initial"]),
+            html.Div(id="clientside-div"),
+            html.Div(id="serverside-div"),
+        ]
+    )
+
+    app.clientside_callback(
+        ClientsideFunction(namespace="clientside", function_name="delayed_promise"),
+        Output("clientside-div", "children"),
+        Input("input", "children"),
+    )
+
+    @app.callback(Output("serverside-div", "children"), Input("input", "children"))
+    def callback(value):
+        return "serverside-" + value[0]
+
+    dash_duo.start_server(app)
+
+    dash_duo.wait_for_text_to_equal("#serverside-div", "serverside-initial")
+    dash_duo.driver.execute_script("window.callbackDone('deferred')")
+    dash_duo.wait_for_text_to_equal("#clientside-div", "clientside-initial-deferred")
+
+
+def test_clsd017_clientside_serverside_shared_input_with_promise(dash_duo):
+    lock = Lock()
+    lock.acquire()
+
+    app = Dash(__name__, assets_folder="assets")
+
+    app.layout = html.Div(
+        [
+            html.Div(id="input", children=["initial"]),
+            html.Div(id="clientside-div"),
+            html.Div(id="serverside-div"),
+        ]
+    )
+
+    app.clientside_callback(
+        ClientsideFunction(namespace="clientside", function_name="non_delayed_promise"),
+        Output("clientside-div", "children"),
+        Input("input", "children"),
+    )
+
+    @app.callback(Output("serverside-div", "children"), Input("input", "children"))
+    def callback(value):
+        with lock:
+            return "serverside-" + value[0] + "-deferred"
+
+    dash_duo.start_server(app)
+
+    dash_duo.wait_for_text_to_equal("#clientside-div", "clientside-initial")
+    lock.release()
+    dash_duo.wait_for_text_to_equal("#serverside-div", "serverside-initial-deferred")
+
+
+def test_clsd018_clientside_inline_async_function(dash_duo):
+    app = Dash(__name__)
+
+    app.layout = html.Div(
+        [
+            html.Div(id="input", children=["initial"]),
+            html.Div(id="output-div"),
+        ]
+    )
+
+    app.clientside_callback(
+        """
+        async function(input) {
+            return input + "-inline";
+        }
+        """,
+        Output("output-div", "children"),
+        Input("input", "children"),
+    )
+
+    dash_duo.start_server(app)
+    dash_duo.wait_for_text_to_equal("#output-div", "initial-inline")
+
+
+def test_clsd019_clientside_inline_promise(dash_duo):
+    app = Dash(__name__)
+
+    app.layout = html.Div(
+        [
+            html.Div(id="input", children=["initial"]),
+            html.Div(id="output-div"),
+        ]
+    )
+
+    app.clientside_callback(
+        """
+        function(inputValue) {
+            return new Promise(function (resolve) {
+                resolve(inputValue + "-inline");
+            });
+        }
+        """,
+        Output("output-div", "children"),
+        Input("input", "children"),
+    )
+
+    dash_duo.start_server(app)
+    dash_duo.wait_for_text_to_equal("#output-div", "initial-inline")