Merge pull request #1240 from mrdawson/1213-clientside-context

Issue-1213 clientside callback_context Initial Commit

Author: alexcjohnson

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [UNRELEASED]
+### Added
+- [#1240](https://github.com/plotly/dash/pull/1240) Adds `callback_context` to clientside callbacks (e.g. `dash_clientside.callback_context.triggered`). Supports `triggered`, `inputs`, `inputs_list`, `states`, and `states_list`, all of which closely resemble their serverside cousins.
+
 ## [1.12.0] - 2020-05-05
 ### Added
 - [#1228](https://github.com/plotly/dash/pull/1228) Adds control over firing callbacks on page (or layout chunk) load. Individual callbacks can have their initial calls disabled in their definition `@app.callback(..., prevent_initial_call=True)` and similar for `app.clientside_callback`. The app-wide default can also be changed with `app=Dash(prevent_initial_callbacks=True)`, then individual callbacks may disable this behavior.

dash-renderer/src/actions/index.js

@@ -525,6 +525,35 @@ const getVals = input =>
 
 const zipIfArray = (a, b) => (Array.isArray(a) ? zip(a, b) : [[a, b]]);
 
+function inputsToDict(inputs_list) {
+    // Ported directly from _utils.py, inputs_to_dict
+    // takes an array of inputs (some inputs may be an array)
+    // returns an Object (map):
+    //  keys of the form `id.property` or `{"id": 0}.property`
+    //  values contain the property value
+    if (!inputs_list) {
+        return {};
+    }
+    const inputs = {};
+    for (let i = 0; i < inputs_list.length; i++) {
+        if (Array.isArray(inputs_list[i])) {
+            const inputsi = inputs_list[i];
+            for (let ii = 0; ii < inputsi.length; ii++) {
+                const id_str = `${stringifyId(inputsi[ii].id)}.${
+                    inputsi[ii].property
+                }`;
+                inputs[id_str] = inputsi[ii].value ?? null;
+            }
+        } else {
+            const id_str = `${stringifyId(inputs_list[i].id)}.${
+                inputs_list[i].property
+            }`;
+            inputs[id_str] = inputs_list[i].value ?? null;
+        }
+    }
+    return inputs;
+}
+
 function handleClientside(clientside_function, payload) {
     const dc = (window.dash_clientside = window.dash_clientside || {});
     if (!dc.no_update) {
@@ -544,12 +573,26 @@ function handleClientside(clientside_function, payload) {
     let returnValue;
 
     try {
+        // setup callback context
+        const input_dict = inputsToDict(inputs);
+        dc.callback_context = {};
+        dc.callback_context.triggered = payload.changedPropIds.map(prop_id => ({
+            prop_id: prop_id,
+            value: input_dict[prop_id],
+        }));
+        dc.callback_context.inputs_list = inputs;
+        dc.callback_context.inputs = input_dict;
+        dc.callback_context.states_list = state;
+        dc.callback_context.states = inputsToDict(state);
+
         const {namespace, function_name} = clientside_function;
         let args = inputs.map(getVals);
         if (state) {
             args = concat(args, state.map(getVals));
         }
         returnValue = dc[namespace][function_name](...args);
+
+        delete dc.callback_context;
     } catch (e) {
         if (e === dc.PreventUpdate) {
             return {};

tests/integration/clientside/assets/clientside.js

@@ -56,6 +56,30 @@ window.dash_clientside.clientside = {
                 resolve('foo');
             }, 1);
         });
-    }
+    },
 
-}
+    triggered_to_str: function(n_clicks0, n_clicks1) {
+        const triggered = dash_clientside.callback_context.triggered;
+        return triggered.map(t => `${t.prop_id} = ${t.value}`).join(', ');
+    },
+
+    inputs_to_str: function(n_clicks0, n_clicks1) {
+        const inputs = dash_clientside.callback_context.inputs;
+        const keys = Object.keys(inputs);
+        return keys.map(k => `${k} = ${inputs[k]}`).join(', ');
+    },
+
+    inputs_list_to_str: function(n_clicks0, n_clicks1) {
+        return JSON.stringify(dash_clientside.callback_context.inputs_list);
+    },
+
+    states_to_str: function(val0, val1, st0, st1) {
+        const states = dash_clientside.callback_context.states;
+        const keys = Object.keys(states);
+        return keys.map(k => `${k} = ${states[k]}`).join(', ');
+    },
+
+    states_list_to_str: function(val0, val1, st0, st1) {
+        return JSON.stringify(dash_clientside.callback_context.states_list);
+    }
+};