Merge branch 'dev' into support-async-callbacks

Author: BSd3v

@plotly/dash-generator-test-component-typescript/dash_prop_typing.py

@@ -0,0 +1,23 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+
+const RenderType = (props) => {
+    const onClick = () => {
+        props.setProps({n_clicks: (props.n_clicks || 0) + 1})
+    }
+
+    return <div id={props.id}>
+        <span>{props.dashRenderType}</span>
+        <button onClick={onClick}>Test Internal</button>
+    </div>;
+};
+
+RenderType.propTypes = {
+    id: PropTypes.string,
+    dashRenderType: PropTypes.string,
+    n_clicks: PropTypes.number,
+    setProps: PropTypes.func
+};
+
+RenderType.dashRenderType = true;
+export default RenderType;

@plotly/dash-test-components/src/components/RenderType.js

@@ -7,6 +7,7 @@ import MyPersistedComponentNested from './components/MyPersistedComponentNested'
 import StyledComponent from './components/StyledComponent';
 import WidthComponent from './components/WidthComponent';
 import ComponentAsProp from './components/ComponentAsProp';
+import RenderType from './components/RenderType';
 
 import DrawCounter from './components/DrawCounter';
 import AddPropsComponent from "./components/AddPropsComponent";
@@ -32,4 +33,5 @@ export {
     ShapeOrExactKeepOrderComponent,
     ArrayOfExactOrShapeWithNodePropAssignNone,
     ExternalComponent,
+    RenderType
 };

@plotly/dash-test-components/src/index.js

@@ -4,9 +4,27 @@ 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
+
+
+## [3.0.2] - 2025-04-01
+
 ## Changed
 - [#3113](https://github.com/plotly/dash/pull/3113) Adjusted background polling requests to strip the data from the request, this allows for context to flow as normal. This addresses issue [#3111](https://github.com/plotly/dash/pull/3111)
+- [#3248](https://github.com/plotly/dash/pull/3248) Changes to rendering logic:
+  - if it is first time rendering, render from the parent props
+  - listens only to updates for that single component, no children listening to parents
+  - if parents change a prop with components as props, only the prop changed re-renders, this is then forced on all children regardless of whether or not the props changed
 
+## Fixed
+- [#3251](https://github.com/plotly/dash/pull/3251). Prevented default styles from overriding `className_*` props in `dcc.Upload` component.
+
+## 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
 

CHANGELOG.md

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

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

@@ -64,6 +64,11 @@ export default class Upload extends Component {
             style_reject,
             style_disabled,
         } = this.props;
+
+        const activeStyle = className_active ? undefined : style_active;
+        const disabledStyle = className_disabled ? undefined : style_disabled;
+        const rejectStyle = className_reject ? undefined : style_reject;
+
         return (
             <LoadingElement id={id}>
                 <Dropzone
@@ -79,9 +84,9 @@ export default class Upload extends Component {
                     rejectClassName={className_reject}
                     disabledClassName={className_disabled}
                     style={style}
-                    activeStyle={style_active}
-                    rejectStyle={style_reject}
-                    disabledStyle={style_disabled}
+                    activeStyle={activeStyle}
+                    rejectStyle={rejectStyle}
+                    disabledStyle={disabledStyle}
                 >
                     {children}
                 </Dropzone>

components/dash-core-components/package.json

@@ -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/fragments/Upload.react.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.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")

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

@@ -28,10 +28,32 @@ def test_upca001_upload_children_gallery(dash_dcc):
                     "textAlign": "center",
                 },
             ),
+            dcc.Upload(
+                "upload",
+                disabled=True,
+                className_disabled="upload-disabled",
+                id="upload",
+            ),
+            dcc.Upload("upload", disabled=True, id="upload-no-className"),
         ]
     )
     dash_dcc.start_server(app)
     time.sleep(0.5)
     dash_dcc.percy_snapshot("upca001 children gallery")
 
+    first_child = dash_dcc.find_element("#upload").find_element_by_css_selector(
+        ":first-child"
+    )
+    # Check that there is no default style since className is specified
+    style = first_child.get_attribute("style")
+    assert "opacity: 0.5" not in style
+
+    first_child = dash_dcc.find_element(
+        "#upload-no-className"
+    ).find_element_by_css_selector(":first-child")
+
+    # Check that there is default style since no className is specified
+    style = first_child.get_attribute("style")
+    assert "opacity: 0.5" in style
+
     assert dash_dcc.get_logs() == []