Merge branch 'v4' into feature/dcc-refactor-input

Author: KoolADE85

CHANGELOG.md

@@ -2,6 +2,17 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## [UNRELEASED]
+
+## 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)
+- [#3397](https://github.com/plotly/dash/pull/3397) Add optional callbacks, suppressing callback warning for missing component ids for a single callback.
+
 ## [3.2.0] - 2025-07-31
 
 ## Added

components/dash-html-components/package-lock.json

@@ -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,
@@ -77,6 +77,8 @@ def callback(
     cache_args_to_ignore: Optional[list] = None,
     cache_ignore_triggered=True,
     on_error: Optional[Callable[[Exception], Any]] = None,
+    optional: Optional[bool] = False,
+    hidden: Optional[bool] = False,
     **_kwargs,
 ) -> Callable[..., Any]:
     """
@@ -159,6 +161,10 @@ def callback(
             Function to call when the callback raises an exception. Receives the
             exception object as first argument. The callback_context can be used
             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
@@ -213,6 +219,8 @@ def callback(
         manager=manager,
         running=running,
         on_error=on_error,
+        optional=optional,
+        hidden=hidden,
     )
 
 
@@ -258,6 +266,8 @@ def insert_callback(
     running=None,
     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
@@ -281,6 +291,8 @@ def insert_callback(
         },
         "dynamic_creator": dynamic_creator,
         "no_output": no_output,
+        "optional": optional,
+        "hidden": hidden,
     }
     if running:
         callback_spec["running"] = running
@@ -624,6 +636,8 @@ def register_callback(
         dynamic_creator=allow_dynamic_callbacks,
         running=running,
         no_output=not has_output,
+        optional=_kwargs.get("optional", False),
+        hidden=_kwargs.get("hidden", False),
     )
 
     # pylint: disable=too-many-locals

components/dash-table/package-lock.json

@@ -1,16 +1,58 @@
+import functools
+
+from contextvars import ContextVar, copy_context
 from textwrap import dedent
 
 APP = None
 
+app_context = ContextVar("dash_app_context")
+
+
+def with_app_context(func):
+    @functools.wraps(func)
+    def wrap(self, *args, **kwargs):
+        app_context.set(self)
+        ctx = copy_context()
+        return ctx.run(func, self, *args, **kwargs)
+
+    return wrap
+
+
+def with_app_context_async(func):
+    @functools.wraps(func)
+    async def wrap(self, *args, **kwargs):
+        app_context.set(self)
+        ctx = copy_context()
+        print("copied and set")
+        return await ctx.run(func, self, *args, **kwargs)
+
+    return wrap
+
+
+def with_app_context_factory(func, app):
+    @functools.wraps(func)
+    def wrap(*args, **kwargs):
+        app_context.set(app)
+        ctx = copy_context()
+        return ctx.run(func, *args, **kwargs)
+
+    return wrap
+
 
 def get_app():
+    try:
+        ctx_app = app_context.get()
+        if ctx_app is not None:
+            return ctx_app
+    except LookupError:
+        pass
+
     if APP is None:
         raise Exception(
             dedent(
                 """
                 App object is not yet defined.  `app = dash.Dash()` needs to be run
-                before `dash.get_app()` is called and can only be used within apps that use
-                the `pages` multi-page app feature: `dash.Dash(use_pages=True)`.
+                before `dash.get_app()`.
 
                 `dash.get_app()` is used to get around circular import issues when Python files
                 within the pages/` folder need to reference the `app` object.

dash/_callback.py

@@ -22,6 +22,7 @@
 
 
 HookDataType = _tx.TypeVar("HookDataType")
+DevtoolPosition = _tx.Literal["right", "left"]
 
 
 # pylint: disable=too-few-public-methods
@@ -217,7 +218,13 @@ def wrap(func: _t.Callable[[_t.Dict], _t.Any]):
 
         return wrap
 
-    def devtool(self, namespace: str, component_type: str, props=None):
+    def devtool(
+        self,
+        namespace: str,
+        component_type: str,
+        props=None,
+        position: DevtoolPosition = "right",
+    ):
         """
         Add a component to be rendered inside the dev tools.
 
@@ -232,6 +239,7 @@ def devtool(self, namespace: str, component_type: str, props=None):
                 "namespace": namespace,
                 "type": component_type,
                 "props": props or {},
+                "position": position,
             }
         )
 

dash/_get_app.py

@@ -36,13 +36,13 @@ import {
 } from '../types/callbacks';
 import {isMultiValued, stringifyId, isMultiOutputProp} from './dependencies';
 import {urlBase} from './utils';
-import {getCSRFHeader, dispatchError} from '.';
+import {getCSRFHeader, dispatchError, setPaths} from '.';
 import {createAction, Action} from 'redux-actions';
 import {addHttpHeaders} from '../actions';
 import {notifyObservers, updateProps} from './index';
 import {CallbackJobPayload} from '../reducers/callbackJobs';
 import {handlePatch, isPatch} from './patch';
-import {getPath} from './paths';
+import {computePaths, getPath} from './paths';
 
 import {requestDependencies} from './requestDependencies';
 
@@ -51,6 +51,7 @@ import {loadLibrary} from '../utils/libraries';
 import {parsePMCId} from './patternMatching';
 import {replacePMC} from './patternMatching';
 import {loaded, loading} from './loading';
+import {getComponentLayout} from '../wrapper/wrapping';
 
 export const addBlockedCallbacks = createAction<IBlockedCallback[]>(
     CallbackActionType.AddBlocked
@@ -409,7 +410,30 @@ function sideUpdate(outputs: SideUpdateOutput, cb: ICallbackPayload) {
                 return acc;
             }, [] as any[])
             .forEach(([id, idProps]) => {
+                const state = getState();
                 dispatch(updateComponent(id, idProps, cb));
+
+                const componentPath = getPath(state.paths, id);
+                if (!componentPath) {
+                    // Component doesn't exist, doesn't matter just allow the
+                    // callback to continue.
+                    return;
+                }
+                const oldComponent = getComponentLayout(componentPath, state);
+
+                dispatch(
+                    setPaths(
+                        computePaths(
+                            {
+                                ...oldComponent,
+                                props: {...oldComponent.props, ...idProps}
+                            },
+                            [...componentPath],
+                            state.paths,
+                            state.paths.events
+                        )
+                    )
+                );
             });
     };
 }

dash/_hooks.py

@@ -570,12 +570,18 @@ export function validateCallbacksToLayout(state_, dispatchError) {
         for (const id in map) {
             const idProps = map[id];
             const fcb = flatten(values(idProps));
-            const optional = all(
-                ({allow_optional}) => allow_optional,
-                flatten(
-                    fcb.map(cb => concat(cb.outputs, cb.inputs, cb.states))
-                ).filter(dep => dep.id === id)
-            );
+            const optional = fcb.reduce((acc, cb) => {
+                if (acc === false || cb.optional) {
+                    return acc;
+                }
+                const deps = concat(cb.outputs, cb.inputs, cb.states).filter(
+                    dep => dep.id === id
+                );
+                return (
+                    !deps.length ||
+                    all(({allow_optional}) => allow_optional, deps)
+                );
+            }, true);
             if (optional) {
                 continue;
             }

dash/dash-renderer/package-lock.json

@@ -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) {