Master 2.6.2

.circleci/config.yml

@@ -294,7 +294,7 @@ jobs:
             . venv/bin/activate && rm -rf components/dash-core-components/dash_core_components
             cd components/dash-core-components
             TESTFILES=$(circleci tests glob "tests/integration/**/test_*.py" | circleci tests split --split-by=timings)
-            pytest --headless --nopercyfinalize --junitxml=test-reports/junit_intg.xml --junitprefix="components.dash-core-components" ${TESTFILES} --reruns 3
+            pytest --headless --nopercyfinalize --junitxml=test-reports/junit_intg.xml --junitprefix="components.dash-core-components" ${TESTFILES}
       - store_artifacts:
           path: ~/dash/components/dash-core-components/test-reports
       - store_test_results:

@plotly/dash-component-plugins/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Plotly, Inc
+Copyright (c) 2022 Plotly, Inc
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

@plotly/dash-generator-test-component-typescript/src/components/RequiredChildrenComponent.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { RequiredChildrenComponentProps } from "../props";
+
+
+const RequiredChildrenComponent = (props: RequiredChildrenComponentProps) => {
+  const {children} = props;
+  return (
+    <div>
+      {children}
+    </div>
+  )
+}
+
+export default RequiredChildrenComponent;

@plotly/dash-generator-test-component-typescript/src/index.ts

@@ -6,6 +6,7 @@ import WrappedHTML from './components/WrappedHTML';
 import FCComponent from './components/FCComponent';
 import EmptyComponent from './components/EmptyComponent';
 import MixedComponent from './components/MixedComponent';
+import RequiredChildrenComponent from './components/RequiredChildrenComponent';
 
 export {
   TypeScriptComponent,
@@ -16,4 +17,5 @@ export {
   FCComponent,
   EmptyComponent,
   MixedComponent,
+  RequiredChildrenComponent,
 };

@plotly/dash-generator-test-component-typescript/src/props.ts

@@ -48,3 +48,7 @@ export type WrappedHTMLProps = {
     children?: React.ReactNode;
     id?: string;
 } & Pick<React.ButtonHTMLAttributes<any>, 'autoFocus'>
+
+export type RequiredChildrenComponentProps = {
+  children: React.ReactNode;
+}

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

@@ -3,13 +3,14 @@ import PropTypes from 'prop-types';
 
 
 const ComponentAsProp = (props) => {
-    const { element, id, shapeEl, list_of_shapes } = props;
+    const { element, id, shapeEl, list_of_shapes, multi_components } = props;
     return (
         <div id={id}>
             {shapeEl && shapeEl.header}
             {element}
             {shapeEl && shapeEl.footer}
             {list_of_shapes && <ul>{list_of_shapes.map(e => <li key={e.value}>{e.label}</li>)}</ul> }
+            {multi_components && <div>{multi_components.map(m => <div id={m.id} key={m.id}>{m.first} - {m.second}</div>)}</div>}
         </div>
     )
 }
@@ -28,6 +29,14 @@ ComponentAsProp.propTypes = {
             label: PropTypes.node,
             value: PropTypes.number,
         })
+    ),
+
+    multi_components: PropTypes.arrayOf(
+        PropTypes.exact({
+            id: PropTypes.string,
+            first: PropTypes.node,
+            second: PropTypes.node,
+        })
     )
 }
 

@plotly/webpack-dash-dynamic-import/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Plotly, Inc
+Copyright (c) 2022 Plotly, Inc
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

CHANGELOG.md

@@ -2,6 +2,19 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## [2.6.2] - 2022-09-23
+
+### Fixed
+
+- [#2237](https://github.com/plotly/dash/pull/2237) Ensure calls to `plotly.js` from `dcc.Graph` are properly sequenced even if React initiates multiple render cycles in quick succession.
+- [#2218](https://github.com/plotly/dash/pull/2218) Fix bug [#1348](https://github.com/plotly/dash/issues/1348) Validate children prop (required or not).
+- [#2223](https://github.com/plotly/dash/pull/2223) Exclude hidden folders when building `dash.page_registry`.
+- [#2182](https://github.com/plotly/dash/pull/2182) Fix [#2172](https://github.com/plotly/dash/issues/2172)  Make it so that when using pages, if `suppress_callback_exceptions=True` the `validation_layout` is not set.
+- [#2152](https://github.com/plotly/dash/pull/2152) Fix bug [#2128](https://github.com/plotly/dash/issues/2128) preventing rendering of multiple components inside a dictionary.
+- [#2187](https://github.com/plotly/dash/pull/2187) Fix confusing error message when trying to use pytest fixtures but `dash[testing]` is not installed.
+- [#2202](https://github.com/plotly/dash/pull/2202) Fix bug [#2185](https://github.com/plotly/dash/issues/2185) when you copy text with multiple quotes into a table
+- [#2226](https://github.com/plotly/dash/pull/2226) Fix [#2219](https://github.com/plotly/dash/issues/2219) pages register & background callbacks.
+
 ## [2.6.1] - 2022-08-01
 
 ### Fixed

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2021 Plotly, Inc
+Copyright (c) 2022 Plotly, Inc
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

components/dash-core-components/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2019 Plotly Technologies
+Copyright (c) 2022 Plotly Technologies
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

components/dash-core-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",
@@ -21,7 +21,7 @@
     "private::lint.prettier": "prettier --config .prettierrc src/**/*.js --list-different",
     "prepublishOnly": "rm -rf lib && babel src --out-dir lib --copy-files --config-file ./.lib.babelrc && rm -rf lib/jl/ lib/*.jl",
     "test": "run-s -c lint test:intg test:pyimport",
-    "test:intg": "pytest --nopercyfinalize --headless tests/integration --reruns 3",
+    "test:intg": "pytest --nopercyfinalize --headless tests/integration ",
     "test:pyimport": "python -m unittest tests/test_dash_import.py",
     "prebuild:js": "cp node_modules/plotly.js-dist-min/plotly.min.js dash_core_components_base/plotly.min.js",
     "build:js": "webpack --mode production",

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

@@ -59,7 +59,7 @@ DashMarkdown.propTypes = {
     link_target: PropTypes.string,
 
     /**
-     * A markdown string (or array of strings) that adhreres to the CommonMark spec
+     * A markdown string (or array of strings) that adheres to the CommonMark spec
      */
     children: PropTypes.oneOfType([
         PropTypes.string,

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

@@ -136,6 +136,7 @@ class PlotlyGraph extends Component {
         this.gd = React.createRef();
         this._hasPlotted = false;
         this._prevGd = null;
+        this._queue = Promise.resolve();
 
         this.bindEvents = this.bindEvents.bind(this);
         this.getConfig = this.getConfig.bind(this);
@@ -144,6 +145,7 @@ class PlotlyGraph extends Component {
         this.getLayoutOverride = this.getLayoutOverride.bind(this);
         this.graphResize = this.graphResize.bind(this);
         this.isResponsive = this.isResponsive.bind(this);
+        this.amendTraces = this.amendTraces.bind(this);
 
         this.state = {override: {}, originals: {}};
     }
@@ -219,41 +221,78 @@ class PlotlyGraph extends Component {
             });
     }
 
-    mergeTraces(props, dataKey, plotlyFnKey) {
-        const clearState = props.clearState;
-        const dataArray = props[dataKey];
+    amendTraces(p, oldProps, newProps) {
+        const {prependData: oldPrepend, extendData: oldExtend} = oldProps;
+        const {prependData: newPrepend, extendData: newExtend} = newProps;
+        const _this = this;
 
-        let p = Promise.resolve();
+        function mergeTraces(props, dataKey, plotlyFnKey) {
+            const clearState = props.clearState;
+            const dataArray = props[dataKey];
 
-        dataArray.forEach(data => {
-            let updateData, traceIndices, maxPoints;
-            if (Array.isArray(data) && typeof data[0] === 'object') {
-                [updateData, traceIndices, maxPoints] = data;
-            } else {
-                updateData = data;
-            }
+            let _p = Promise.resolve();
 
-            if (!traceIndices) {
-                function getFirstProp(data) {
-                    return data[Object.keys(data)[0]];
+            dataArray.forEach(data => {
+                let updateData, traceIndices, maxPoints;
+                if (Array.isArray(data) && typeof data[0] === 'object') {
+                    [updateData, traceIndices, maxPoints] = data;
+                } else {
+                    updateData = data;
                 }
 
-                function generateIndices(data) {
-                    return Array.from(Array(getFirstProp(data).length).keys());
+                if (!traceIndices) {
+                    function getFirstProp(data) {
+                        return data[Object.keys(data)[0]];
+                    }
+
+                    function generateIndices(data) {
+                        return Array.from(
+                            Array(getFirstProp(data).length).keys()
+                        );
+                    }
+                    traceIndices = generateIndices(updateData);
                 }
-                traceIndices = generateIndices(updateData);
-            }
 
-            p = p.then(() => {
-                const gd = this.gd.current;
-                return (
-                    gd &&
-                    Plotly[plotlyFnKey](gd, updateData, traceIndices, maxPoints)
-                );
+                _p = _p.then(() => {
+                    const gd = _this.gd.current;
+                    return (
+                        gd &&
+                        Plotly[plotlyFnKey](
+                            gd,
+                            updateData,
+                            traceIndices,
+                            maxPoints
+                        )
+                    );
+                });
             });
-        });
 
-        p.then(() => clearState(dataKey));
+            return _p.then(() => clearState(dataKey));
+        }
+
+        let modified = false;
+
+        if (newPrepend?.length && oldPrepend !== newPrepend) {
+            modified = true;
+            p = p.then(() =>
+                mergeTraces(newProps, 'prependData', 'prependTraces')
+            );
+        }
+
+        if (newExtend?.length && oldExtend !== newExtend) {
+            modified = true;
+            p = p.then(() =>
+                mergeTraces(newProps, 'extendData', 'extendTraces')
+            );
+        }
+
+        if (modified) {
+            p = p.then(() =>
+                newProps._dashprivate_onFigureModified(newProps.figure)
+            );
+        }
+
+        return p;
     }
 
     getConfig(config, responsive) {
@@ -405,23 +444,8 @@ class PlotlyGraph extends Component {
     }
 
     componentDidMount() {
-        let p = this.plot(this.props);
-        if (this.props.prependData) {
-            p = p.then(() =>
-                this.mergeTraces(this.props, 'prependData', 'prependTraces')
-            );
-        }
-        if (this.props.extendData) {
-            p = p.then(() =>
-                this.mergeTraces(this.props, 'extendData', 'extendTraces')
-            );
-        }
-
-        if (this.props.prependData?.length || this.props.extendData?.length) {
-            p.then(() =>
-                this.props._dashprivate_onFigureModified(this.props.figure)
-            );
-        }
+        const p = this.plot(this.props);
+        this._queue = this.amendTraces(p, {}, this.props);
     }
 
     componentWillUnmount() {
@@ -454,7 +478,8 @@ class PlotlyGraph extends Component {
             return;
         }
 
-        let p = Promise.resolve();
+        let p = this._queue;
+
         if (
             this.props.mathjax !== nextProps.mathjax ||
             this.props.figure !== nextProps.figure ||
@@ -463,34 +488,18 @@ class PlotlyGraph extends Component {
             this.props._dashprivate_transformFigure !==
                 nextProps._dashprivate_transformFigure
         ) {
-            p = this.plot(nextProps);
+            p = p.then(() => this.plot(nextProps));
         }
 
-        if (this.props.prependData !== nextProps.prependData) {
-            p = p.then(() =>
-                this.mergeTraces(nextProps, 'prependData', 'prependTraces')
-            );
-        }
-
-        if (this.props.extendData !== nextProps.extendData) {
-            p = p.then(() =>
-                this.mergeTraces(nextProps, 'extendData', 'extendTraces')
-            );
-        }
-
-        if (this.props.prependData?.length || this.props.extendData?.length) {
-            p.then(() =>
-                this.props._dashprivate_onFigureModified(this.props.figure)
-            );
-        }
+        this._queue = this.amendTraces(p, this.props, nextProps);
     }
 
     componentDidUpdate(prevProps) {
         if (
             prevProps.id !== this.props.id ||
             prevProps.mathjax !== this.props.mathjax
         ) {
-            this.plot(this.props);
+            this._queue = this._queue.then(() => this.plot(this.props));
         }
     }