Merge branch 'pyright-typing-fixes' of github.com:plotly/dash into pyright-typing-fixes

Author: T4rk1n

CHANGELOG.md

@@ -2,6 +2,15 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## [unreleased]
+
+## Fixed
+- [#3264](https://github.com/plotly/dash/pull/3264) Fixed an issue where moving components inside of children would not update the `setProps` path, leading to hashes being incorrect
+- [#3265](https://github.com/plotly/dash/pull/3265) Fixed issue where the resize of graphs was cancelling others
+
+## Added
+- [#3268](https://github.com/plotly/dash/pull/3268) Added the ability for component devs to subscribe to descendent updates by setting `dashChildrenUpdate = true` on the component, eg: `Tabs.dashChildrenUpdate = true`
+
 ## [3.0.2] - 2025-04-01
 
 ## Changed

components/dash-core-components/src/components/Tabs.react.js

@@ -121,14 +121,6 @@ const EnhancedTab = ({
     );
 };
 
-EnhancedTab.defaultProps = {
-    loading_state: {
-        is_loading: false,
-        component_name: '',
-        prop_name: '',
-    },
-};
-
 /**
  * A Dash component that lets you render pages with tabs - the Tabs component's children
  * can be dcc.Tab components, which can hold a label that will be displayed as a tab, and can in turn hold
@@ -439,3 +431,5 @@ Tabs.propTypes = {
      */
     persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
 };
+
+Tabs.dashChildrenUpdate = true;

components/dash-core-components/src/utils/ResizeDetector.js

@@ -4,11 +4,10 @@ import PropTypes from 'prop-types';
 // Debounce 50 ms
 const DELAY = 50;
 
-let resizeTimeout;
-
 const ResizeDetector = props => {
     const {onResize, children, targets} = props;
     const ref = createRef();
+    let resizeTimeout;
 
     const debouncedResizeHandler = useCallback(() => {
         if (resizeTimeout) {

components/dash-core-components/tests/integration/graph/test_graph_responsive.py

@@ -1,6 +1,7 @@
 import pytest
 
 from dash import Dash, Input, Output, State, dcc, html
+import plotly.graph_objects as go
 
 from dash.exceptions import PreventUpdate
 from dash.testing import wait
@@ -134,3 +135,77 @@ def resize(n_clicks, style):
     )
 
     assert dash_dcc.get_logs() == []
+
+
+def test_grrs002_graph(dash_dcc):
+    app = Dash(__name__)
+
+    app.layout = html.Div(
+        [
+            html.Button("Generate Figures", id="generate-btn", n_clicks=0),
+            html.Button("Get Bounding Box", id="bounding-btn"),
+            html.Div(
+                id="graph-container",
+                children=[
+                    html.Div(id="bounding-output"),
+                    dcc.Graph(
+                        id="prec-climate-daily",
+                        style={"height": "45vh"},
+                        config={"responsive": True},
+                    ),
+                    dcc.Graph(
+                        id="temp-climate-daily",
+                        style={"height": "45vh"},
+                        config={"responsive": True},
+                    ),
+                ],
+                style={"display": "none"},
+            ),
+        ]
+    )
+
+    app.clientside_callback(
+        """() => {
+            pcd_container = document.querySelector("#prec-climate-daily")
+            pcd_container_bbox = pcd_container.getBoundingClientRect()
+            pcd_graph = pcd_container.querySelector('.main-svg')
+            pcd_graph_bbox = pcd_graph.getBoundingClientRect()
+            tcd_container = document.querySelector("#temp-climate-daily")
+            tcd_container_bbox = tcd_container.getBoundingClientRect()
+            tcd_graph = tcd_container.querySelector('.main-svg')
+            tcd_graph_bbox = tcd_graph.getBoundingClientRect()
+            return JSON.stringify(
+            pcd_container_bbox.height == pcd_graph_bbox.height &&
+            pcd_container_bbox.width == pcd_graph_bbox.width &&
+            tcd_container_bbox.height == tcd_graph_bbox.height &&
+            tcd_container_bbox.width == tcd_graph_bbox.width
+            )
+        }""",
+        Output("bounding-output", "children"),
+        Input("bounding-btn", "n_clicks"),
+        prevent_initial_call=True,
+    )
+
+    @app.callback(
+        [
+            Output("prec-climate-daily", "figure"),
+            Output("temp-climate-daily", "figure"),
+            Output("graph-container", "style"),
+            Output("bounding-output", "children", allow_duplicate=True),
+        ],
+        [Input("generate-btn", "n_clicks")],
+        prevent_initial_call=True,
+    )
+    def update_figures(n_clicks):
+        fig_acc = go.Figure(data=[go.Scatter(x=[0, 1, 2], y=[0, 1, 0], mode="lines")])
+        fig_daily = go.Figure(data=[go.Scatter(x=[0, 1, 2], y=[1, 0, 1], mode="lines")])
+        return fig_acc, fig_daily, {"display": "block"}, "loaded"
+
+    dash_dcc.start_server(app)
+    dash_dcc.wait_for_text_to_equal("#generate-btn", "Generate Figures")
+    dash_dcc.find_element("#generate-btn").click()
+    dash_dcc.wait_for_text_to_equal("#bounding-output", "loaded")
+    dash_dcc.find_element(".dash-graph .js-plotly-plot.dash-graph--pending")
+    dash_dcc.find_element(".dash-graph .js-plotly-plot:not(.dash-graph--pending)")
+    dash_dcc.find_element("#bounding-btn").click()
+    dash_dcc.wait_for_text_to_equal("#bounding-output", "true")

dash/_callback.py

@@ -124,6 +124,7 @@ def callback(
             while a callback is running, the callback is canceled.
             Note that the value of the property is not significant, any change in
             value will result in the cancellation of the running job (if any).
+            This parameter only applies to background callbacks (`background=True`).
         :param progress:
             An `Output` dependency grouping that references properties of
             components in the app's layout. When provided, the decorated function
@@ -132,21 +133,25 @@ def callback(
             function should call in order to provide updates to the app on its
             current progress. This function accepts a single argument, which
             correspond to the grouping of properties specified in the provided
-            `Output` dependency grouping
+            `Output` dependency grouping. This parameter only applies to background
+            callbacks (`background=True`).
         :param progress_default:
             A grouping of values that should be assigned to the components
             specified by the `progress` argument when the callback is not in
             progress. If `progress_default` is not provided, all the dependency
             properties specified in `progress` will be set to `None` when the
-            callback is not running.
+            callback is not running. This parameter only applies to background
+            callbacks (`background=True`).
         :param cache_args_to_ignore:
             Arguments to ignore when caching is enabled. If callback is configured
             with keyword arguments (Input/State provided in a dict),
             this should be a list of argument names as strings. Otherwise,
             this should be a list of argument indices as integers.
+            This parameter only applies to background callbacks (`background=True`).
         :param cache_ignore_triggered:
             Whether to ignore which inputs triggered the callback when creating
-            the cache.
+            the cache. This parameter only applies to background callbacks
+            (`background=True`).
         :param interval:
             Time to wait between the background callback update requests.
         :param on_error:

dash/dash-renderer/src/wrapper/DashWrapper.tsx

@@ -65,6 +65,7 @@ function DashWrapper({
     const dispatch = useDispatch();
     const memoizedKeys: MutableRefObject<MemoizedKeysType> = useRef({});
     const newRender = useRef(false);
+    const renderedPath = useRef<DashLayoutPath>(componentPath);
     let renderComponent: any = null;
     let renderComponentProps: any = null;
     let renderH: any = null;
@@ -90,6 +91,7 @@ function DashWrapper({
         } else {
             newRender.current = false;
         }
+        renderedPath.current = componentPath;
     }, [_newRender]);
 
     const setProps = (newProps: UpdatePropsPayload) => {
@@ -101,7 +103,10 @@ function DashWrapper({
         dispatch((dispatch, getState) => {
             const currentState = getState();
             const {graphs} = currentState;
-            const oldLayout = getComponentLayout(componentPath, currentState);
+            const oldLayout = getComponentLayout(
+                renderedPath.current,
+                currentState
+            );
             if (!oldLayout) return;
             const {props: oldProps} = oldLayout;
             if (!oldProps) return;
@@ -144,7 +149,7 @@ function DashWrapper({
                 dispatch(
                     updateProps({
                         props: changedProps,
-                        itempath: componentPath,
+                        itempath: renderedPath.current,
                         renderType: 'internal'
                     })
                 );

dash/dash-renderer/src/wrapper/selectors.ts

@@ -1,8 +1,85 @@
 import {DashLayoutPath, DashComponent, BaseDashProps} from '../types/component';
-import {getComponentLayout, stringifyPath} from './wrapping';
+import {
+    getComponentLayout,
+    stringifyPath,
+    checkDashChildrenUpdate
+} from './wrapping';
+import {pathOr} from 'ramda';
 
 type SelectDashProps = [DashComponent, BaseDashProps, number, object, string];
 
+interface ChangedPropsRecord {
+    hash: number;
+    changedProps: Record<string, any>;
+    renderType: string;
+}
+
+interface Hashes {
+    [key: string]: any; // Index signature for string keys with number values
+}
+
+const previousHashes: Hashes = {};
+
+const isFirstLevelPropsChild = (
+    updatedPath: string,
+    strPath: string
+): [boolean, string[]] => {
+    const updatedSegments = updatedPath.split(',');
+    const fullSegments = strPath.split(',');
+
+    // Check that strPath actually starts with updatedPath
+    const startsWithPath = fullSegments.every(
+        (seg, i) => updatedSegments[i] === seg
+    );
+
+    if (!startsWithPath) return [false, []];
+
+    // Get the remaining path after the prefix
+    const remainingSegments = updatedSegments.slice(fullSegments.length);
+
+    const propsCount = remainingSegments.filter(s => s === 'props').length;
+
+    return [propsCount < 2, remainingSegments];
+};
+
+function determineChangedProps(
+    state: any,
+    strPath: string
+): ChangedPropsRecord {
+    let combinedHash = 0;
+    let renderType: any; // Default render type, adjust as needed
+    const changedProps: Record<string, any> = {};
+    Object.entries(state.layoutHashes).forEach(([updatedPath, pathHash]) => {
+        const [descendant, remainingSegments] = isFirstLevelPropsChild(
+            updatedPath,
+            strPath
+        );
+        if (descendant) {
+            const previousHash: any = pathOr({}, [updatedPath], previousHashes);
+            combinedHash += pathOr(0, ['hash'], pathHash);
+            if (previousHash !== pathHash) {
+                if (updatedPath !== strPath) {
+                    Object.assign(changedProps, {[remainingSegments[1]]: true});
+                    renderType = 'components';
+                } else {
+                    Object.assign(
+                        changedProps,
+                        pathOr({}, ['changedProps'], pathHash)
+                    );
+                    renderType = pathOr({}, ['renderType'], pathHash);
+                }
+                previousHashes[updatedPath] = pathHash;
+            }
+        }
+    });
+
+    return {
+        hash: combinedHash,
+        changedProps,
+        renderType
+    };
+}
+
 export const selectDashProps =
     (componentPath: DashLayoutPath) =>
     (state: any): SelectDashProps => {
@@ -12,7 +89,12 @@ export const selectDashProps =
         // Then it can be easily compared without having to compare the props.
         const strPath = stringifyPath(componentPath);
 
-        const hash = state.layoutHashes[strPath];
+        let hash;
+        if (checkDashChildrenUpdate(c)) {
+            hash = determineChangedProps(state, strPath);
+        } else {
+            hash = state.layoutHashes[strPath];
+        }
         let h = 0;
         let changedProps: object = {};
         let renderType = '';

dash/dash-renderer/src/wrapper/wrapping.ts

@@ -72,3 +72,14 @@ export function checkRenderTypeProp(componentDefinition: any) {
         )
     );
 }
+
+export function checkDashChildrenUpdate(componentDefinition: any) {
+    return (
+        'dashChildrenUpdate' in
+        pathOr(
+            {},
+            [componentDefinition?.namespace, componentDefinition?.type],
+            window as any
+        )
+    );
+}

tests/integration/callbacks/test_prevent_update.py

@@ -36,7 +36,11 @@ def callback1(value):
         raise PreventUpdate("testing callback does not update")
         return value
 
-    @app.callback(Output("output2", "children"), [Input("output1", "children")])
+    @app.callback(
+        Output("output2", "children"),
+        [Input("output1", "children")],
+        prevent_initial_call=True,
+    )
     def callback2(value):
         callback2_count.value += 1
         return value