Merge pull request #3384 from plotly/master-3.2.0

Master 3.2.0

Author: T4rk1n

.circleci/config.yml

@@ -163,14 +163,17 @@ jobs:
       - run:
           name: npm prereqs
           command: |
+            nvm use 18
             npm ci
             cd dash/dash-renderer && npm i && cd ../../
             cd components/dash-html-components && npm i && npm run extract && cd ../../
       - run:
           name: ️️🏗️ build dash
           command: |
+            nvm use 18
             . venv/Scripts/activate
-            npm run private::build.jupyterlab && npm run private::build.renderer && python dash/development/update_components.py 'dash-html-components'
+            npm run private::build.jupyterlab && npm run private::build.renderer
+            cd components/dash-html-components && npm run build
           no_output_timeout: 30m
 
   test-312: &test

CHANGELOG.md

@@ -2,6 +2,21 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## [3.2.0] - 2025-07-31
+
+## Added
+- [#3369](https://github.com/plotly/dash/pull/3369) Expose `dash.NoUpdate` type
+- [#3371](https://github.com/plotly/dash/pull/3371) Add devtool hook to add components to the devtool bar ui.
+
+## Fixed
+- [#3353](https://github.com/plotly/dash/pull/3353) Support pattern-matching/dict ids in `dcc.Loading` `target_components`
+- [#3371](https://github.com/plotly/dash/pull/3371) Fix allow_optional triggering a warning for not found input.
+- [#3379](https://github.com/plotly/dash/pull/3379) Fix dcc.Graph backward compatibility with dash 2.0 for ddk.Graph
+- [#3373](https://github.com/plotly/dash/pull/3373) Fix layout as list and persistence.
+
+# Changed
+- [#3365](https://github.com/plotly/dash/pull/3365) Warn if dcc.Slider has more than 500 marks and use default instead.
+
 # [3.1.1] - 2025-06-29
 
 ## Fixed

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

@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",
@@ -63,11 +63,11 @@
     "uniqid": "^5.4.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.27.2",
-    "@babel/core": "^7.27.4",
-    "@babel/eslint-parser": "^7.27.5",
+    "@babel/cli": "^7.28.0",
+    "@babel/core": "^7.28.0",
+    "@babel/eslint-parser": "^7.28.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@plotly/dash-component-plugins": "^1.2.3",
     "@plotly/webpack-dash-dynamic-import": "^1.3.0",
@@ -85,8 +85,8 @@
     "react-jsx-parser": "1.21.0",
     "rimraf": "^5.0.5",
     "style-loader": "^3.3.3",
-    "styled-jsx": "^3.4.4",
-    "webpack": "^5.99.9",
+    "styled-jsx": "^5.1.7",
+    "webpack": "^5.101.0",
     "webpack-cli": "^5.1.4"
   },
   "optionalDependencies": {

components/dash-core-components/package.json

@@ -87,6 +87,7 @@ function Loading({
     custom_spinner,
 }) {
     const ctx = window.dash_component_api.useDashContext();
+
     const loading = ctx.useSelector(
         loadingSelector(ctx.componentPath, target_components),
         equals

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

@@ -13,11 +13,10 @@ import {
 import PropTypes from 'prop-types';
 import {graphPropTypes, graphDefaultProps} from '../components/Graph.react';
 
-import LoadingElement from '../utils/LoadingElement';
-
 /* global Plotly:true */
 
 import ResizeDetector from '../utils/ResizeDetector';
+import LoadingElement from '../utils/LoadingElement';
 
 /**
  * `autosize: true` causes Plotly.js to conform to the parent element size.
@@ -537,23 +536,46 @@ class PlotlyGraph extends Component {
     }
 
     render() {
-        const {className, id} = this.props;
+        const {className, id, loading_state} = this.props;
         const style = this.getStyle();
 
+        if (window.dash_component_api) {
+            return (
+                <LoadingElement
+                    id={id}
+                    key={id}
+                    className={className}
+                    style={style}
+                    ref={this.parentElement}
+                >
+                    <ResizeDetector
+                        onResize={this.graphResize}
+                        targets={[this.parentElement, this.gd]}
+                    />
+                    <div
+                        ref={this.gd}
+                        style={{height: '100%', width: '100%'}}
+                    />
+                </LoadingElement>
+            );
+        }
         return (
-            <LoadingElement
+            <div
                 id={id}
                 key={id}
                 className={className}
                 style={style}
                 ref={this.parentElement}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                }
             >
                 <ResizeDetector
                     onResize={this.graphResize}
                     targets={[this.parentElement, this.gd]}
                 />
                 <div ref={this.gd} style={{height: '100%', width: '100%'}} />
-            </LoadingElement>
+            </div>
         );
     }
 }

components/dash-core-components/src/fragments/Graph.react.js

@@ -17,6 +17,8 @@ import {
 } from '../utils/formatSliderTooltip';
 import LoadingElement from '../utils/LoadingElement';
 
+const MAX_MARKS = 500;
+
 const sliderProps = [
     'min',
     'max',
@@ -76,6 +78,21 @@ export default class Slider extends Component {
         } = this.props;
         const value = this.state.value;
 
+        // Check if marks exceed 500 limit for performance
+        let processedMarks = marks;
+        if (marks && typeof marks === 'object' && marks !== null) {
+            const marksCount = Object.keys(marks).length;
+            if (marksCount > MAX_MARKS) {
+                /* eslint-disable no-console */
+                console.error(
+                    `dcc.Slider: Too many marks (${marksCount}) provided. ` +
+                        `For performance reasons, marks are limited to 500. ` +
+                        `Using auto-generated marks instead.`
+                );
+                processedMarks = undefined;
+            }
+        }
+
         let tipProps, tipFormatter;
         if (tooltip) {
             /**
@@ -136,11 +153,16 @@ export default class Slider extends Component {
                     tipFormatter={tipFormatter}
                     style={{position: 'relative'}}
                     value={value}
-                    marks={sanitizeMarks({min, max, marks, step})}
-                    max={setUndefined(min, max, marks).max_mark}
-                    min={setUndefined(min, max, marks).min_mark}
+                    marks={sanitizeMarks({
+                        min,
+                        max,
+                        marks: processedMarks,
+                        step,
+                    })}
+                    max={setUndefined(min, max, processedMarks).max_mark}
+                    min={setUndefined(min, max, processedMarks).min_mark}
                     step={
-                        step === null && !isNil(marks)
+                        step === null && !isNil(processedMarks)
                             ? null
                             : calcStep(min, max, step)
                     }

components/dash-core-components/src/fragments/Slider.react.js

@@ -1,5 +1,6 @@
 from multiprocessing import Lock
 from dash import Dash, Input, Output, dcc, html
+from dash.dependencies import stringify_id
 from dash.testing import wait
 import time
 
@@ -414,9 +415,9 @@ def updateDiv(n_clicks):
     assert dash_dcc.get_logs() == []
 
 
-# multiple components, only one triggers the spinner
-def test_ldcp010_loading_component_target_components(dash_dcc):
-
+# update multiple props of same component, only targeted id/prop triggers spinner
+# test that target_components id can be a dict id
+def test_ldcp011_loading_component_target_components(dash_dcc):
     lock = Lock()
 
     app = Dash(__name__)
@@ -425,53 +426,61 @@ def test_ldcp010_loading_component_target_components(dash_dcc):
         [
             dcc.Loading(
                 [
-                    html.Button(id="btn-1"),
+                    html.Button(id={"type": "button", "index": "one"}),
                     html.Button(id="btn-2"),
+                    html.Button(id="btn-3"),
                 ],
                 className="loading-1",
-                target_components={"btn-2": "children"},
+                target_components={
+                    stringify_id({"type": "button", "index": "one"}): "className"
+                },
             )
         ],
         id="root",
     )
 
-    @app.callback(Output("btn-1", "children"), [Input("btn-2", "n_clicks")])
+    @app.callback(
+        Output({"type": "button", "index": "one"}, "children"),
+        [Input("btn-2", "n_clicks")],
+    )
     def updateDiv1(n_clicks):
         if n_clicks:
             with lock:
                 return "changed 1"
-
         return "content 1"
 
-    @app.callback(Output("btn-2", "children"), [Input("btn-1", "n_clicks")])
+    @app.callback(
+        Output({"type": "button", "index": "one"}, "className"),
+        [Input("btn-3", "n_clicks")],
+    )
     def updateDiv2(n_clicks):
         if n_clicks:
             with lock:
-                return "changed 2"
-
-        return "content 2"
+                return "new-class"
+        return ""
 
     dash_dcc.start_server(app)
 
-    dash_dcc.wait_for_text_to_equal("#btn-1", "content 1")
-    dash_dcc.wait_for_text_to_equal("#btn-2", "content 2")
-
-    with lock:
-        dash_dcc.find_element("#btn-1").click()
+    btn1id = "#" + stringify_id({"type": "button", "index": "one"})
 
-        dash_dcc.find_element(".loading-1 .dash-spinner")
-        dash_dcc.wait_for_text_to_equal("#btn-2", "")
-
-    dash_dcc.wait_for_text_to_equal("#btn-2", "changed 2")
+    dash_dcc.wait_for_text_to_equal(btn1id, "content 1")
 
     with lock:
         dash_dcc.find_element("#btn-2").click()
-        spinners = dash_dcc.find_elements(".loading-1 .dash-spinner")
-        dash_dcc.wait_for_text_to_equal("#btn-1", "")
 
-    dash_dcc.wait_for_text_to_equal("#btn-1", "changed 1")
+        spinners = dash_dcc.find_elements(".loading-1 .dash-spinner")
+        dash_dcc.wait_for_text_to_equal(btn1id, "")
+    dash_dcc.wait_for_text_to_equal(btn1id, "changed 1")
     assert spinners == []
 
+    with lock:
+        dash_dcc.find_element("#btn-3").click()
+
+        dash_dcc.find_element(".loading-1 .dash-spinner")
+        dash_dcc.wait_for_text_to_equal(btn1id, "")
+
+    dash_dcc.wait_for_class_to_equal(btn1id, "new-class")
+
     assert dash_dcc.get_logs() == []
 
 

components/dash-core-components/tests/integration/loading/test_loading_component.py

@@ -616,3 +616,50 @@ def test_sls016_sliders_format_tooltips(dash_dcc):
     dash_dcc.percy_snapshot("sliders-format-tooltips")
 
     assert dash_dcc.get_logs() == []
+
+
+def test_slsl017_marks_limit_500(dash_dcc):
+    """Test that slider works with exactly 500 marks"""
+    app = Dash(__name__)
+    marks_500 = {str(i): f"Mark {i}" for i in range(500)}
+    app.layout = html.Div(
+        [
+            dcc.Slider(id="slider", min=0, max=499, marks=marks_500, value=250),
+            html.Div(id="output"),
+        ]
+    )
+
+    @app.callback(Output("output", "children"), [Input("slider", "value")])
+    def update_output(value):
+        return f"Selected: {value}"
+
+    dash_dcc.start_server(app)
+    dash_dcc.wait_for_text_to_equal("#output", "Selected: 250")
+
+    # No warnings should be logged for 500 marks
+    assert dash_dcc.get_logs() == []
+
+
+def test_slsl018_marks_limit_exceeded(dash_dcc):
+    """Test behavior when marks exceed 500 limit"""
+    app = Dash(__name__)
+    marks_501 = {str(i): f"Mark {i}" for i in range(501)}
+    app.layout = html.Div(
+        [
+            dcc.Slider(id="slider", min=0, max=500, marks=marks_501, value=250),
+            html.Div(id="output"),
+        ]
+    )
+
+    @app.callback(Output("output", "children"), [Input("slider", "value")])
+    def update_output(value):
+        return f"Selected: {value}"
+
+    dash_dcc.start_server(app)
+    dash_dcc.wait_for_text_to_equal("#output", "Selected: 250")
+
+    # Check that warning is logged
+    logs = dash_dcc.get_logs()
+    assert len(logs) > 0
+    warning_found = any("Too many marks" in log["message"] for log in logs)
+    assert warning_found, "Expected warning about too many marks not found in logs"