Merge pull request #2649 from plotly/feat/dynamic-callback-creation

dynamic callback creation

Author: T4rk1n

CHANGELOG.md

@@ -12,6 +12,11 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 - [#2635](https://github.com/plotly/dash/pull/2635) Get proper app module name, remove need to give `__name__` to Dash constructor.
 
+## Added
+
+- [#2649](https://github.com/plotly/dash/pull/2649) Add `_allow_dynamic_callbacks`, register new callbacks inside other callbacks.
+  **WARNING: dynamic callback creation can be dangerous, use at you own risk. It is not intended for use in a production app, multi-user or multiprocess use as it only works for a single user.**
+
 ## [2.13.0] 2023-08-28
 ## Changed
 

dash/_callback.py

@@ -210,6 +210,7 @@ def clientside_callback(clientside_function, *args, **kwargs):
     )
 
 
+# pylint: disable=too-many-arguments
 def insert_callback(
     callback_list,
     callback_map,
@@ -222,6 +223,7 @@ def insert_callback(
     prevent_initial_call,
     long=None,
     manager=None,
+    dynamic_creator=False,
 ):
     if prevent_initial_call is None:
         prevent_initial_call = config_prevent_initial_callbacks
@@ -243,6 +245,7 @@ def insert_callback(
         and {
             "interval": long["interval"],
         },
+        "dynamic_creator": dynamic_creator,
     }
 
     callback_map[callback_id] = {
@@ -282,6 +285,7 @@ def register_callback(  # pylint: disable=R0914
 
     long = _kwargs.get("long")
     manager = _kwargs.get("manager")
+    allow_dynamic_callbacks = _kwargs.get("_allow_dynamic_callbacks")
 
     output_indices = make_grouping_by_index(output, list(range(grouping_len(output))))
     callback_id = insert_callback(
@@ -296,6 +300,7 @@ def register_callback(  # pylint: disable=R0914
         prevent_initial_call,
         long=long,
         manager=manager,
+        dynamic_creator=allow_dynamic_callbacks,
     )
 
     # pylint: disable=too-many-locals

dash/dash-renderer/src/TreeContainer.js

@@ -35,6 +35,7 @@ import {
     validateComponent
 } from './utils/TreeContainer';
 import {DashContext} from './APIController.react';
+import {batch} from 'react-redux';
 
 const NOT_LOADING = {
     is_loading: false
@@ -130,48 +131,50 @@ class BaseTreeContainer extends Component {
     }
 
     setProps(newProps) {
-        const {
-            _dashprivate_graphs,
-            _dashprivate_dispatch,
-            _dashprivate_path,
-            _dashprivate_layout
-        } = this.props;
+        const {_dashprivate_dispatch, _dashprivate_path, _dashprivate_layout} =
+            this.props;
 
         const oldProps = this.getLayoutProps();
         const {id} = oldProps;
         const changedProps = pickBy(
             (val, key) => !equals(val, oldProps[key]),
             newProps
         );
-        if (!isEmpty(changedProps)) {
-            // Identify the modified props that are required for callbacks
-            const watchedKeys = getWatchedKeys(
-                id,
-                keys(changedProps),
-                _dashprivate_graphs
-            );
 
-            // setProps here is triggered by the UI - record these changes
-            // for persistence
-            recordUiEdit(_dashprivate_layout, newProps, _dashprivate_dispatch);
-
-            // Only dispatch changes to Dash if a watched prop changed
-            if (watchedKeys.length) {
-                _dashprivate_dispatch(
-                    notifyObservers({
-                        id,
-                        props: pick(watchedKeys, changedProps)
-                    })
+        if (!isEmpty(changedProps)) {
+            _dashprivate_dispatch((dispatch, getState) => {
+                const {graphs} = getState();
+                // Identify the modified props that are required for callbacks
+                const watchedKeys = getWatchedKeys(
+                    id,
+                    keys(changedProps),
+                    graphs
                 );
-            }
 
-            // Always update this component's props
-            _dashprivate_dispatch(
-                updateProps({
-                    props: changedProps,
-                    itempath: _dashprivate_path
-                })
-            );
+                batch(() => {
+                    // setProps here is triggered by the UI - record these changes
+                    // for persistence
+                    recordUiEdit(_dashprivate_layout, newProps, dispatch);
+
+                    // Only dispatch changes to Dash if a watched prop changed
+                    if (watchedKeys.length) {
+                        dispatch(
+                            notifyObservers({
+                                id,
+                                props: pick(watchedKeys, changedProps)
+                            })
+                        );
+                    }
+
+                    // Always update this component's props
+                    dispatch(
+                        updateProps({
+                            props: changedProps,
+                            itempath: _dashprivate_path
+                        })
+                    );
+                });
+            });
         }
     }
 

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

@@ -43,6 +43,8 @@ import {CallbackJobPayload} from '../reducers/callbackJobs';
 import {handlePatch, isPatch} from './patch';
 import {getPath} from './paths';
 
+import {requestDependencies} from './requestDependencies';
+
 export const addBlockedCallbacks = createAction<IBlockedCallback[]>(
     CallbackActionType.AddBlocked
 );
@@ -584,7 +586,8 @@ export function executeCallback(
     dispatch: any,
     getState: any
 ): IExecutingCallback {
-    const {output, inputs, state, clientside_function, long} = cb.callback;
+    const {output, inputs, state, clientside_function, long, dynamic_creator} =
+        cb.callback;
     try {
         const inVals = fillVals(paths, layout, cb, inputs, 'Input', true);
 
@@ -728,6 +731,13 @@ export function executeCallback(
                             }
                         });
 
+                        if (dynamic_creator) {
+                            setTimeout(
+                                () => dispatch(requestDependencies()),
+                                0
+                            );
+                        }
+
                         return {data, payload};
                     } catch (res: any) {
                         lastError = res;

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

@@ -18,18 +18,18 @@ import {
 } from 'ramda';
 import {
     ICallback,
-    ICallbackProperty,
     ICallbackDefinition,
-    ILayoutCallbackProperty,
-    ICallbackTemplate
+    ICallbackProperty,
+    ICallbackTemplate,
+    ILayoutCallbackProperty
 } from '../types/callbacks';
 import {
     addAllResolvedFromOutputs,
-    splitIdAndProp,
-    stringifyId,
     getUnfilteredLayoutCallbacks,
+    idMatch,
     isMultiValued,
-    idMatch
+    splitIdAndProp,
+    stringifyId
 } from './dependencies';
 import {getPath} from './paths';
 

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

@@ -0,0 +1,14 @@
+import {batch} from 'react-redux';
+import {setGraphs} from './index';
+import apiThunk from './api';
+
+export function requestDependencies() {
+    return (dispatch: any) => {
+        batch(() => {
+            dispatch(setGraphs({}));
+            dispatch(
+                apiThunk('_dash-dependencies', 'GET', 'dependenciesRequest')
+            );
+        });
+    };
+}

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

@@ -12,6 +12,7 @@ export interface ICallbackDefinition {
     prevent_initial_call: boolean;
     state: ICallbackProperty[];
     long?: LongCallbackInfo;
+    dynamic_creator?: boolean;
 }
 
 export interface ICallbackProperty {

requires-ci.txt

@@ -9,7 +9,7 @@ flask-talisman==1.0.0
 isort==4.3.21;python_version<"3.7"
 mimesis
 mock==4.0.3
-numpy
+numpy<=1.25.2
 orjson==3.5.4;python_version<"3.7"
 orjson==3.6.7;python_version>="3.7"
 openpyxl;python_version>="3.8"

tests/integration/callbacks/test_dynamic_callback.py

@@ -0,0 +1,44 @@
+from dash import html, Dash, Input, Output
+
+
+# WARNING: dynamic callback creation can be dangerous, use at you own risk.
+# It is not intended for use in a production app, multi-user
+# or multiprocess use as it only works for a single user.
+def test_dync001_dynamic_callback(dash_duo):
+    app = Dash()
+
+    app.layout = html.Div(
+        [
+            html.Div(id="output"),
+            html.Button("create", id="create"),
+            html.Div("initial", id="output-2"),
+            html.Button("dynamic", id="dynamic"),
+        ]
+    )
+
+    @app.callback(
+        Output("output", "children"),
+        Input("create", "n_clicks"),
+        _allow_dynamic_callbacks=True,
+        prevent_initial_call=True,
+    )
+    def on_click(n_clicks):
+        @app.callback(
+            Output("output-2", "children"),
+            Input("dynamic", "n_clicks"),
+            prevent_initial_call=True,
+        )
+        def on_click2(n_clicks2):
+            return f"Dynamic clicks {n_clicks2}"
+
+        return f"creator {n_clicks}"
+
+    dash_duo.start_server(app)
+
+    dash_duo.wait_for_element("#dynamic").click()
+    dash_duo.wait_for_element("#create").click()
+    dash_duo.wait_for_text_to_equal("#output", "creator 1")
+    dash_duo.wait_for_text_to_equal("#output-2", "initial")
+
+    dash_duo.wait_for_element("#dynamic").click()
+    dash_duo.wait_for_text_to_equal("#output-2", "Dynamic clicks 2")