Add _dashprivate_onFigureModified (plotly#865)

Marc-Andre-Rivet · web-flow · commit cd657ac0e114 · 2020-09-15T18:21:38.000-04:00
diff --git a/babel.config.js b/babel.config.js
@@ -4,6 +4,8 @@ const presets = [
 ];
 
 const plugins = [
+    '@babel/plugin-proposal-nullish-coalescing-operator',
+    '@babel/plugin-proposal-optional-chaining',
     '@babel/plugin-syntax-dynamic-import'
 ];
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -61,7 +61,9 @@
   "devDependencies": {
     "@babel/cli": "^7.4.0",
     "@babel/core": "^7.4.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
     "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/preset-env": "^7.4.1",
     "@babel/preset-react": "^7.0.0",
diff --git a/src/fragments/Graph.privateprops.js b/src/fragments/Graph.privateprops.js
@@ -3,9 +3,11 @@ import PropTypes from 'prop-types';
 export const privatePropTypes = {
     _dashprivate_transformConfig: PropTypes.func,
     _dashprivate_transformFigure: PropTypes.func,
+    _dashprivate_onFigureModified: PropTypes.func,
 };
 
 export const privateDefaultProps = {
     _dashprivate_transformConfig: c => c,
     _dashprivate_transformFigure: f => f,
+    _dashprivate_onFigureModified: f => f,
 };
diff --git a/src/fragments/Graph.react.js b/src/fragments/Graph.react.js
@@ -214,6 +214,7 @@ class PlotlyGraph extends Component {
             const gd = this.gd.current;
             return Plotly[plotlyFnKey](gd, updateData, traceIndices, maxPoints);
         });
+
         clearState(dataKey);
     }
 
@@ -352,6 +353,10 @@ class PlotlyGraph extends Component {
         if (this.props.extendData) {
             this.mergeTraces(this.props, 'extendData', 'extendTraces');
         }
+
+        if (this.props.prependData?.length || this.props.extendData?.length) {
+            this.props._dashprivate_onFigureModified(this.props.figure);
+        }
     }
 
     componentWillUnmount() {
@@ -400,6 +405,10 @@ class PlotlyGraph extends Component {
         if (this.props.extendData !== nextProps.extendData) {
             this.mergeTraces(nextProps, 'extendData', 'extendTraces');
         }
+
+        if (this.props.prependData?.length || this.props.extendData?.length) {
+            this.props._dashprivate_onFigureModified(this.props.figure);
+        }
     }
 
     componentDidUpdate(prevProps) {

Original file line number	Diff line number	Diff line change
`@@ -214,6 +214,7 @@ class PlotlyGraph extends Component {`
`214`	`214`	`const gd = this.gd.current;`
`215`	`215`	`return Plotly[plotlyFnKey](gd, updateData, traceIndices, maxPoints);`
`216`	`216`	`});`
	`217`	`+`
`217`	`218`	`clearState(dataKey);`
`218`	`219`	`}`
`219`	`220`
`@@ -352,6 +353,10 @@ class PlotlyGraph extends Component {`
`352`	`353`	`if (this.props.extendData) {`
`353`	`354`	`this.mergeTraces(this.props, 'extendData', 'extendTraces');`
`354`	`355`	`}`
	`356`	`+`
	`357`	`+ if (this.props.prependData?.length \|\| this.props.extendData?.length) {`
	`358`	`+ this.props._dashprivate_onFigureModified(this.props.figure);`
	`359`	`+ }`
`355`	`360`	`}`
`356`	`361`
`357`	`362`	`componentWillUnmount() {`
`@@ -400,6 +405,10 @@ class PlotlyGraph extends Component {`
`400`	`405`	`if (this.props.extendData !== nextProps.extendData) {`
`401`	`406`	`this.mergeTraces(nextProps, 'extendData', 'extendTraces');`
`402`	`407`	`}`
	`408`	`+`
	`409`	`+ if (this.props.prependData?.length \|\| this.props.extendData?.length) {`
	`410`	`+ this.props._dashprivate_onFigureModified(this.props.figure);`
	`411`	`+ }`
`403`	`412`	`}`
`404`	`413`
`405`	`414`	`componentDidUpdate(prevProps) {`