Don't attempt to resize unmounted graphs (plotly#563)

* Don't attempt to resize unmounted graphs Fixes #534 * Anon resize function -> named bound function; add removeEventListener * Add additional gd conditional in plot() * Add integration test for resizing unmounted graphs * Add changelog entry for PR plotly#563 (Don't attempt to resize unmounted graphs) * black for test_integration.py * CHANGELOG ticks
HammadTheOne · Jun 12, 2019 · 839eb09 · 839eb09
1 parent 63d8016
commit 839eb09
Show file tree

Hide file tree

Showing 3 changed files with 2,438 additions and 2,329 deletions.
diff --git a/packages/dash-core-components/CHANGELOG.md b/packages/dash-core-components/CHANGELOG.md
@@ -5,6 +5,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ## [Unreleased]
 ### Fixed
 - Fixed `min_date_allowed` and `max_date_allowed` bug in `DatePickerRange` [#551]https://github.com/plotly/dash-core-components/issues/551)
+- Fixed unwanted `resize()` calls on unmounted `Graph`s [#534](https://github.com/plotly/dash-core-components/issues/534)
 
 ### Changed
 - Changed `dcc.Checklist` prop `values` to `value`, to match all the other input components [#558](https://github.com/plotly/dash-core-components/pull/558). Also improved prop types for `Dropdown` and `RadioItems` `value` props to consistently accept both strings and numbers.

diff --git a/packages/dash-core-components/src/components/Graph.react.js b/packages/dash-core-components/src/components/Graph.react.js
@@ -91,6 +91,7 @@ class PlotlyGraph extends Component {
         super(props);
         this.bindEvents = this.bindEvents.bind(this);
         this._hasPlotted = false;
+        this.graphResize = this.graphResize.bind(this);
     }
 
     plot(props) {
@@ -111,9 +112,13 @@ class PlotlyGraph extends Component {
             config: config,
         }).then(() => {
             if (!this._hasPlotted) {
-                this.bindEvents();
-                Plotly.Plots.resize(document.getElementById(id));
-                this._hasPlotted = true;
+                // double-check gd hasn't been unmounted
+                const gd = document.getElementById(id);
+                if (gd) {
+                    this.bindEvents();
+                    Plotly.Plots.resize(gd);
+                    this._hasPlotted = true;
+                }
             }
         });
     }
@@ -141,6 +146,13 @@ class PlotlyGraph extends Component {
         return Plotly.extendTraces(id, updateData, traceIndices, maxPoints);
     }
 
+    graphResize() {
+        const graphDiv = document.getElementById(this.props.id);
+        if (graphDiv) {
+            Plotly.Plots.resize(graphDiv);
+        }
+    }
+
     bindEvents() {
         const {id, setProps, clear_on_unhover} = this.props;
 
@@ -195,16 +207,15 @@ class PlotlyGraph extends Component {
 
     componentDidMount() {
         this.plot(this.props).then(() => {
-            window.addEventListener('resize', () => {
-                Plotly.Plots.resize(document.getElementById(this.props.id));
-            });
+            window.addEventListener('resize', this.graphResize);
         });
     }
 
     componentWillUnmount() {
         if (this.eventEmitter) {
             this.eventEmitter.removeAllListeners();
         }
+        window.removeEventListener('resize', this.graphResize);
     }
 
     shouldComponentUpdate(nextProps) {