adjustments for computeGraphs to not have validation when in debug is False or dev_tools_validate_callbacks is False

BSd3v · BSd3v · commit 98da56192132 · 2026-03-19T10:27:08.000-04:00
(cherry picked from commit 077a3e7)
diff --git a/dash/dash-renderer/src/APIController.react.js b/dash/dash-renderer/src/APIController.react.js
@@ -143,7 +143,8 @@ function storeEffect(props, events, setErrorLoading) {
         graphs,
         hooks,
         layout,
-        layoutRequest
+        layoutRequest,
+        config
     } = props;
 
     batch(() => {
@@ -187,7 +188,8 @@ function storeEffect(props, events, setErrorLoading) {
                 setGraphs(
                     computeGraphs(
                         dependenciesRequest.content,
-                        dispatchError(dispatch)
+                        dispatchError(dispatch),
+                        config
                     )
                 )
             );
diff --git a/dash/dash-renderer/src/actions/dependencies.js b/dash/dash-renderer/src/actions/dependencies.js
@@ -626,9 +626,10 @@ export function validateCallbacksToLayout(state_, dispatchError) {
     validatePatterns(inputPatterns, 'Input');
 }
 
-export function computeGraphs(dependencies, dispatchError) {
+export function computeGraphs(dependencies, dispatchError, config) {
     // multiGraph is just for finding circular deps
     const multiGraph = new DepGraph();
+    const start = performance.now();
 
     const wildcardPlaceholders = {};
 
@@ -657,7 +658,9 @@ export function computeGraphs(dependencies, dispatchError) {
         hasError = true;
         dispatchError(message, lines);
     };
-    validateDependencies(parsedDependencies, wrappedDE);
+    if (config.validate_callbacks) {
+        validateDependencies(parsedDependencies, wrappedDE);
+    }
 
     /*
      * For regular ids, outputMap and inputMap are:
@@ -808,6 +811,7 @@ export function computeGraphs(dependencies, dispatchError) {
     const cbOut = [];
 
     function addInputToMulti(inIdProp, outIdProp, firstPass = true) {
+        if (!config.validate_callbacks) return
         multiGraph.addNode(inIdProp);
         multiGraph.addDependency(inIdProp, outIdProp);
         // only store callback inputs and outputs during the first pass
@@ -825,6 +829,7 @@ export function computeGraphs(dependencies, dispatchError) {
         cbOut.push([]);
 
         function addOutputToMulti(outIdFinal, outIdProp) {
+            if (!config.validate_callbacks) return
             multiGraph.addNode(outIdProp);
             inputs.forEach(inObj => {
                 const {id: inId, property} = inObj;
@@ -859,28 +864,35 @@ export function computeGraphs(dependencies, dispatchError) {
         outputs.forEach(outIdProp => {
             const {id: outId, property} = outIdProp;
             // check if this output is also an input to the same callback
-            const alsoInput = checkInOutOverlap(outIdProp, inputs);
+            let alsoInput;
+            if (config.validate_callbacks) {
+               alsoInput = checkInOutOverlap(outIdProp, inputs);
+            }
             if (typeof outId === 'object') {
-                const outIdList = makeAllIds(outId, {});
-                outIdList.forEach(id => {
-                    const tempOutIdProp = {id, property};
-                    let outIdName = combineIdAndProp(tempOutIdProp);
+                if (config.validate_callbacks) {
+                    const outIdList = makeAllIds(outId, {});
+                    outIdList.forEach(id => {
+                        const tempOutIdProp = {id, property};
+                        let outIdName = combineIdAndProp(tempOutIdProp);
+                        // if this output is also an input, add `outputTag` to the name
+                        if (alsoInput) {
+                            duplicateOutputs.push(tempOutIdProp);
+                            outIdName += outputTag;
+                        }
+                        addOutputToMulti(id, outIdName);
+                    });
+                }
+                addPattern(outputPatterns, outId, property, finalDependency);
+            } else {
+                if (config.validate_callbacks) {
+                    let outIdName = combineIdAndProp(outIdProp);
                     // if this output is also an input, add `outputTag` to the name
                     if (alsoInput) {
-                        duplicateOutputs.push(tempOutIdProp);
+                        duplicateOutputs.push(outIdProp);
                         outIdName += outputTag;
                     }
-                    addOutputToMulti(id, outIdName);
-                });
-                addPattern(outputPatterns, outId, property, finalDependency);
-            } else {
-                let outIdName = combineIdAndProp(outIdProp);
-                // if this output is also an input, add `outputTag` to the name
-                if (alsoInput) {
-                    duplicateOutputs.push(outIdProp);
-                    outIdName += outputTag;
+                    addOutputToMulti({}, outIdName);
                 }
-                addOutputToMulti({}, outIdName);
                 addMap(outputMap, outId, property, finalDependency);
             }
         });
@@ -913,7 +925,8 @@ export function computeGraphs(dependencies, dispatchError) {
             }
         }
     });
-
+    const end = performance.now();
+    window.dash_clientside.callbackGraphTime = (end - start).toFixed(2);
     return finalGraphs;
 }
 
diff --git a/dash/dash-renderer/src/config.ts b/dash/dash-renderer/src/config.ts
@@ -21,6 +21,7 @@ export type DashConfig = {
     };
     serve_locally?: boolean;
     plotlyjs_url?: string;
+    validate_callbacks: boolean;
 };
 
 export default function getConfigFromDOM(): DashConfig {
diff --git a/dash/dash.py b/dash/dash.py
@@ -937,6 +937,7 @@ def _config(self):
             "dash_version_url": DASH_VERSION_URL,
             "ddk_version": ddk_version,
             "plotly_version": plotly_version,
+            "validate_callbacks": self._dev_tools.validate_callbacks,
         }
         if self._plotly_cloud is None:
             if os.getenv("DASH_ENTERPRISE_ENV") == "WORKSPACE":
@@ -1968,6 +1969,7 @@ def _setup_dev_tools(self, **kwargs):
             "hot_reload",
             "silence_routes_logging",
             "prune_errors",
+            "validate_callbacks",
         ):
             dev_tools[attr] = get_combined_config(
                 attr, kwargs.get(attr, None), default=debug
@@ -2003,6 +2005,7 @@ def enable_dev_tools(  # pylint: disable=too-many-branches
         dev_tools_silence_routes_logging: Optional[bool] = None,
         dev_tools_disable_version_check: Optional[bool] = None,
         dev_tools_prune_errors: Optional[bool] = None,
+        dev_tools_validate_callbacks: Optional[bool] = None,
     ) -> bool:
         """Activate the dev tools, called by `run`. If your application
         is served by wsgi and you want to activate the dev tools, you can call
@@ -2024,6 +2027,7 @@ def enable_dev_tools(  # pylint: disable=too-many-branches
             - DASH_SILENCE_ROUTES_LOGGING
             - DASH_DISABLE_VERSION_CHECK
             - DASH_PRUNE_ERRORS
+            - DASH_VALIDATE_CALLBACKS
 
         :param debug: Enable/disable all the dev tools unless overridden by the
             arguments or environment variables. Default is ``True`` when
@@ -2079,6 +2083,10 @@ def enable_dev_tools(  # pylint: disable=too-many-branches
             env: ``DASH_PRUNE_ERRORS``
         :type dev_tools_prune_errors: bool
 
+        :param dev_tools_validate_callbacks: Check for circular callback
+            dependencies and raise an error if any are found. env: ``DASH_VALIDATE_CALLBACKS``
+        :type dev_tools_validate_callbacks: bool
+
         :return: debug
         """
         if debug is None:
@@ -2096,6 +2104,7 @@ def enable_dev_tools(  # pylint: disable=too-many-branches
             silence_routes_logging=dev_tools_silence_routes_logging,
             disable_version_check=dev_tools_disable_version_check,
             prune_errors=dev_tools_prune_errors,
+            validate_callbacks=dev_tools_validate_callbacks,
         )
 
         if dev_tools.silence_routes_logging:
@@ -2319,6 +2328,7 @@ def run(
         dev_tools_silence_routes_logging: Optional[bool] = None,
         dev_tools_disable_version_check: Optional[bool] = None,
         dev_tools_prune_errors: Optional[bool] = None,
+        dev_tools_validate_callbacks: Optional[bool] = None,
         **flask_run_options,
     ):
         """Start the flask server in local mode, you should not run this on a
@@ -2409,6 +2419,10 @@ def run(
             env: ``DASH_PRUNE_ERRORS``
         :type dev_tools_prune_errors: bool
 
+        :param dev_tools_validate_callbacks: Check for circular callback
+            dependencies and raise an error if any are found. env: ``DASH_VALIDATE_CALLBACKS``
+        :type dev_tools_validate_callbacks: bool
+
         :param jupyter_mode: How to display the application when running
             inside a jupyter notebook.
 
@@ -2446,6 +2460,7 @@ def run(
             dev_tools_silence_routes_logging,
             dev_tools_disable_version_check,
             dev_tools_prune_errors,
+            dev_tools_validate_callbacks,
         )
 
         # Evaluate the env variables at runtime
diff --git a/tests/integration/renderer/test_benchmarking.py b/tests/integration/renderer/test_benchmarking.py
@@ -0,0 +1,135 @@
+from dash import Dash, html, dcc, Input, Output, State, ALL, callback
+import dash.testing.wait as wait
+import time
+import pytest
+
+
+def make_app(num_groups=500, items_per_group=20):
+    app = Dash(__name__)
+
+    NUM_GROUPS = num_groups
+    ITEMS_PER_GROUP = items_per_group
+
+    children = []
+    for g in range(NUM_GROUPS):
+        group_children = []
+        for i in range(ITEMS_PER_GROUP):
+            group_children.append(
+                html.Div(
+                    [
+                        dcc.Input(
+                            id={"type": "input", "group": g, "index": i},
+                            value=f"g{g}-i{i}",
+                        ),
+                        html.Div(
+                            id={"type": "output", "group": g, "index": i},
+                        ),
+                    ]
+                )
+            )
+        children.append(
+            html.Details(
+                [
+                    html.Summary(f"Group {g}"),
+                    html.Div(group_children),
+                ]
+            )
+        )
+
+    for g in range(NUM_GROUPS):
+
+        @callback(
+            Output({"type": "output", "group": g, "index": ALL}, "children"),
+            Input({"type": "input", "group": g, "index": ALL}, "value"),
+            prevent_initial_call=True,
+        )
+        def update(v, _g=g):
+            return f"Updated: {v}"
+
+    for g in range(NUM_GROUPS - 1):
+
+        @callback(
+            Output({"type": "output", "group": g + 1, "index": ALL}, "style"),
+            Input({"type": "input", "group": g, "index": ALL}, "value"),
+            prevent_initial_call=True,
+        )
+        def cross_update(values, _g=g):
+            return [{"color": "blue"} for _ in values]
+
+    for g in range(0, NUM_GROUPS, 3):
+
+        @callback(
+            Output({"type": "output", "group": g, "index": ALL}, "title"),
+            Input({"type": "input", "group": g, "index": ALL}, "value"),
+            State({"type": "output", "group": g, "index": ALL}, "children"),
+            prevent_initial_call=True,
+        )
+        def tooltip_update(values, current, _g=g):
+            return [f"{v} ({c})" for v, c in zip(values, current or [""] * len(values))]
+
+    def layout():
+        return html.Div(
+            [
+                html.H3("Dash 4 Firefox Performance MWE"),
+                dcc.Input(id="input", value="initial value", type="text"),
+                html.Div(id="output"),
+                dcc.Store(id="store", data=time.time()),
+                html.Div(children),
+            ]
+        )
+
+    app.layout = layout
+
+    app.clientside_callback(
+        """
+        function(value, ts) {
+            if (!ts) return '';
+            var now = Date.now() / 1000;
+            return (now - ts).toFixed(2);
+        }
+        """,
+        Output("output", "children"),
+        Input("input", "value"),
+        State("store", "data"),
+    )
+
+    return app
+
+
+check_timing = {}
+
+
+@pytest.mark.parametrize(
+    "dev_tools,store",
+    [
+        ({"dev_tools_validate_callbacks": False}, "disabled"),
+        ({"dev_tools_validate_callbacks": True}, "enabled"),
+    ],
+)
+def test_compute_graph_timing(dash_duo, dev_tools, store):
+    app = make_app()
+    dash_duo.start_server(app, **dev_tools)
+    times = []
+    for _ in range(10):
+        wait.until(
+            lambda: dash_duo.find_element("#output").text.strip() != "", timeout=4
+        )
+        graph_compute_time = float(
+            dash_duo.driver.execute_script(
+                "return window.dash_clientside.callbackGraphTime"
+            )
+        )
+        times.append(graph_compute_time)
+        dash_duo.driver.refresh()
+    avg_time = sum(times) / len(times) if times else 0
+    check_timing[store] = avg_time
+    if store == "enabled":
+        print(f"Average time with store enabled: {avg_time:.2f} ms")
+        assert (
+            check_timing["disabled"] < avg_time
+        ), "Expected faster performance with circular callback check disabled"
+    if store == "disabled":
+        print(f"Average time with store disabled: {avg_time:.2f} ms")
+        assert (
+            avg_time < 500
+        ), "Expected average time to be under 1/2 seconds with circular callback check disabled"
