Merge pull request #3275 from plotly/master-3.0.3

Master 3.0.3

Author: T4rk1n

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/).
 
+## [3.0.3] - 2025-04-14
+
+## 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
+- [#3273](https://github.com/plotly/dash/pull/3273) Fix hooks entry point, renamed from invalid hyphen `dash-hooks` to underscored `dash_hooks`. Fix [#3272](https://github.com/plotly/dash/issues/3272)
+- [#3271](https://github.com/plotly/dash/pull/3271) fix issue with tooltip styling. Fix [#3269](https://github.com/plotly/dash/issues/3269)
+
+## 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
@@ -17,6 +28,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 ## Added
 - [#3248](https://github.com/plotly/dash/pull/3248) added new `dashRenderType` to determine why the component layout was changed (`internal`, `callback`, `parent`, `clientsideApi`):
     - this can be utilized to keep from rendering components by the component having `dashRenderType` defined as a prop, and the `dashRenderType = true` must be set on the component, eg (`Div.dashRenderType = true`)
+- [#3241](https://github.com/plotly/dash/pull/3241) Added a collapse / expand button to Dash Dev Tools.
 
 ## [3.0.1] - 2025-03-24
 

components/dash-core-components/dash_core_components_base/__init__.py

@@ -13,7 +13,7 @@
     send_string,
 )
 
-__all__ = _components + [
+__all__ = _components + [  # type: ignore[reportUnsupportedDunderAll]
     "send_bytes",
     "send_data_frame",
     "send_file",

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

@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",

components/dash-core-components/package.json

@@ -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/components/Tabs.react.js

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import _JSXStyle from 'styled-jsx/style'; // eslint-disable-line no-unused-vars
-import LoadingElement from '../utils/LoadingElement';
 
 /**
  * A tooltip with an absolute position.
@@ -27,9 +26,9 @@ const Tooltip = ({
     return (
         <>
             <div className="dcc-tooltip-bounding-box">
-                <LoadingElement
-                    elementType="span"
+                <div
                     className={`hover hover-${direction}`}
+                    data-dash-is-loading={is_loading}
                 >
                     <span
                         id={id}
@@ -42,7 +41,7 @@ const Tooltip = ({
                             props.children
                         )}
                     </span>
-                </LoadingElement>
+                </div>
             </div>
             <style jsx>{`
                 .dcc-tooltip-bounding-box {

components/dash-core-components/src/components/Tooltip.react.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/src/utils/ResizeDetector.js

@@ -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.wait_for_element(".dash-graph .js-plotly-plot.dash-graph--pending")
+    dash_dcc.wait_for_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")

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

@@ -1,3 +1,5 @@
+# type: ignore
+
 import os as _os
 import sys as _sys
 import json

components/dash-table/dash_table_base/__init__.py

@@ -472,25 +472,14 @@ export const propTypes = {
      * View the documentation examples to learn more.
      *
      */
-    fixed_columns: PropTypes.oneOfType([
-        PropTypes.exact({
-            /**
-             * Example `{'headers':False, 'data':0}` No columns are fixed (the default)
-             */
-
-            data: PropTypes.oneOf([0]),
-            headers: PropTypes.oneOf([false])
-        }),
-
-        PropTypes.exact({
-            /**
-             * Example `{'headers':True, 'data':1}` one column is fixed.
-             */
+    fixed_columns: PropTypes.exact({
+        /**
+         * Example `{'headers':False, 'data':0}` No columns are fixed (the default)
+         */
 
-            data: PropTypes.number,
-            headers: PropTypes.oneOf([true]).isRequired
-        })
-    ]),
+        data: PropTypes.number,
+        headers: PropTypes.bool
+    }),
 
     /**
      * `fixed_rows` will "fix" the set of rows so that
@@ -505,24 +494,14 @@ export const propTypes = {
      * way that your columns are rendered or sized.
      * View the documentation examples to learn more.
      */
-    fixed_rows: PropTypes.oneOfType([
-        PropTypes.exact({
-            /**
-             * Example `{'headers':False, 'data':0}` No rows are fixed (the default)
-             */
-
-            data: PropTypes.oneOf([0]),
-            headers: PropTypes.oneOf([false])
-        }),
-        PropTypes.exact({
-            /**
-             * Example `{'headers':True, 'data':1}` one row is fixed.
-             */
+    fixed_rows: PropTypes.exact({
+        /**
+         * Example `{'headers':False, 'data':0}` No rows are fixed (the default)
+         */
 
-            data: PropTypes.number,
-            headers: PropTypes.oneOf([true]).isRequired
-        })
-    ]),
+        data: PropTypes.number,
+        headers: PropTypes.bool
+    }),
 
     /**
      * If `single`, then the user can select a single column or group

components/dash-table/src/dash-table/dash/DataTable.js

@@ -77,7 +77,7 @@ def callback(
     cache_ignore_triggered=True,
     on_error: Optional[Callable[[Exception], Any]] = None,
     **_kwargs,
-):
+) -> Callable[..., Any]:
     """
     Normally used as a decorator, `@dash.callback` provides a server-side
     callback relating the values of one or more `Output` items to one or
@@ -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:
@@ -360,7 +365,9 @@ def register_callback(
     # pylint: disable=too-many-locals
     def wrap_func(func):
 
-        if background is not None:
+        if background is None:
+            background_key = None
+        else:
             background_key = BaseBackgroundCallbackManager.register_func(
                 func,
                 background.get("progress") is not None,
@@ -515,7 +522,7 @@ def add_context(*args, **kwargs):
                     return to_json(response)
             else:
                 try:
-                    output_value = _invoke_callback(func, *func_args, **func_kwargs)
+                    output_value = _invoke_callback(func, *func_args, **func_kwargs)  # type: ignore[reportArgumentType]
                 except PreventUpdate as err:
                     raise err
                 except Exception as err:  # pylint: disable=broad-exception-caught
@@ -555,7 +562,7 @@ def add_context(*args, **kwargs):
                     if NoUpdate.is_no_update(val):
                         continue
                     for vali, speci in (
-                        zip(val, spec) if isinstance(spec, list) else [[val, spec]]
+                        zip(val, spec) if isinstance(spec, list) else [[val, spec]]  # type: ignore[reportArgumentType]]
                     ):
                         if not NoUpdate.is_no_update(vali):
                             has_update = True
@@ -590,6 +597,7 @@ def add_context(*args, **kwargs):
                 dist = app.get_dist(diff_packages)
                 response["dist"] = dist
 
+            jsonResponse = None
             try:
                 jsonResponse = to_json(response)
             except TypeError:

dash/_callback.py

@@ -207,15 +207,15 @@ def response(self):
 
     @staticmethod
     @has_context
-    def record_timing(name, duration=None, description=None):
+    def record_timing(name, duration, description=None):
         """Records timing information for a server resource.
 
         :param name: The name of the resource.
         :type name: string
 
         :param duration: The time in seconds to report. Internally, this
             is rounded to the nearest millisecond.
-        :type duration: float or None
+        :type duration: float
 
         :param description: A description of the resource.
         :type description: string or None

dash/_callback_context.py

@@ -1,6 +1,6 @@
 import os
 
-__version__ = "2.0.6"
+__version__ = "2.0.7"
 
 _available_react_versions = {"18.3.1", "18.2.0", "16.14.0"}
 _available_reactdom_versions = {"18.3.1", "18.2.0", "16.14.0"}
@@ -64,7 +64,7 @@ def _set_react_version(v_react, v_reactdom=None):
     {
         "relative_package_path": "dash-renderer/build/dash_renderer.min.js",
         "dev_package_path": "dash-renderer/build/dash_renderer.dev.js",
-        "external_url": "https://unpkg.com/[email protected].6"
+        "external_url": "https://unpkg.com/[email protected].7"
         "/build/dash_renderer.min.js",
         "namespace": "dash",
     },