Merge pull request #3407 from plotly/hidden-callbacks

Add hidden callbacks.

Author: T4rk1n

CHANGELOG.md

@@ -7,6 +7,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 ## Added
 - [#3395](https://github.com/plotly/dash/pull/3396) Add position argument to hooks.devtool
 - [#3403](https://github.com/plotly/dash/pull/3403) Add app_context to get_app, allowing to get the current app in routes.
+- [#3407](https://github.com/plotly/dash/pull/3407) Add `hidden` to callback arguments, hiding the callback from appearing in the devtool callback graph.
 
 ## Fixed
 - [#3395](https://github.com/plotly/dash/pull/3395) Fix Components added through set_props() cannot trigger related callback functions. Fix [#3316](https://github.com/plotly/dash/issues/3316)

dash/_callback.py

@@ -64,7 +64,7 @@ def _invoke_callback(func, *args, **kwargs):  # used to mark the frame for the d
 GLOBAL_INLINE_SCRIPTS = []
 
 
-# pylint: disable=too-many-locals
+# pylint: disable=too-many-locals,too-many-arguments
 def callback(
     *_args,
     background: bool = False,
@@ -78,6 +78,7 @@ def callback(
     cache_ignore_triggered=True,
     on_error: Optional[Callable[[Exception], Any]] = None,
     optional: Optional[bool] = False,
+    hidden: Optional[bool] = False,
     **_kwargs,
 ) -> Callable[..., Any]:
     """
@@ -162,6 +163,8 @@ def callback(
             to access the original callback inputs, states and output.
         :param optional:
             Mark all dependencies as not required on the initial layout checks.
+        :param hidden:
+            Hide the callback from the devtools callbacks tab.
     """
 
     background_spec = None
@@ -217,6 +220,7 @@ def callback(
         running=running,
         on_error=on_error,
         optional=optional,
+        hidden=hidden,
     )
 
 
@@ -263,6 +267,7 @@ def insert_callback(
     dynamic_creator: Optional[bool] = False,
     no_output=False,
     optional=False,
+    hidden=False,
 ):
     if prevent_initial_call is None:
         prevent_initial_call = config_prevent_initial_callbacks
@@ -287,6 +292,7 @@ def insert_callback(
         "dynamic_creator": dynamic_creator,
         "no_output": no_output,
         "optional": optional,
+        "hidden": hidden,
     }
     if running:
         callback_spec["running"] = running
@@ -631,6 +637,7 @@ def register_callback(
         running=running,
         no_output=not has_output,
         optional=_kwargs.get("optional", False),
+        hidden=_kwargs.get("hidden", False),
     )
 
     # pylint: disable=too-many-locals

dash/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.react.js

@@ -78,7 +78,11 @@ function generateElements(graphs, profile, extraLinks) {
         });
     }
 
-    (graphs.callbacks || []).forEach((callback, i) => {
+    (graphs.callbacks || []).reduce((visibleIndex, callback) => {
+        if (callback.hidden) {
+            return visibleIndex;
+        }
+
         const cb = `__dash_callback__.${callback.output}`;
         const cbProfile = profile.callbacks[callback.output] || {};
         const count = cbProfile.count || 0;
@@ -87,7 +91,7 @@ function generateElements(graphs, profile, extraLinks) {
         elements.push({
             data: {
                 id: cb,
-                label: `callback.${i}`,
+                label: `callback.${visibleIndex}`,
                 type: 'callback',
                 mode: callback.clientside_function ? 'client' : 'server',
                 count: count,
@@ -97,21 +101,23 @@ function generateElements(graphs, profile, extraLinks) {
             }
         });
 
-        callback.outputs.map(({id, property}) => {
+        callback.outputs.forEach(({id, property}) => {
             const nodeId = recordNode(id, property);
             recordEdge(cb, nodeId, 'output');
         });
 
-        callback.inputs.map(({id, property}) => {
+        callback.inputs.forEach(({id, property}) => {
             const nodeId = recordNode(id, property);
             recordEdge(nodeId, cb, 'input');
         });
 
-        callback.state.map(({id, property}) => {
+        callback.state.forEach(({id, property}) => {
             const nodeId = recordNode(id, property);
             recordEdge(nodeId, cb, 'state');
         });
-    });
+
+        return visibleIndex + 1;
+    }, 0);
 
     // pull together props in the same component
     if (extraLinks) {