dcc.Graph: Improve responsiveness, expose resize status, allow wrapper extension

package.json

@@ -78,6 +78,7 @@
     "prettier": "^1.14.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-resize-detector": "^4.2.1",
     "style-loader": "^0.23.1",
     "styled-jsx": "^3.1.1",
     "webpack": "^4.37.0",
@@ -91,4 +92,4 @@
     "react": "^16.0.0",
     "react-dom": "^16.0.0"
   }
-}
+}

src/components/Graph.react.js

@@ -108,6 +108,20 @@ PlotlyGraph.propTypes = {
      */
     id: PropTypes.string,
 
+    /**
+     * If True, the Plotly.js plot will be fully responsive to window resize
+     * and parent element resize event. This is achieved by overriding
+     * `config.responsive` to True, `figure.layout.autosize` to True and unsetting
+     * `figure.layout.height` and `figure.layout.width`.
+     * If False (default), the Plotly.js plot may exhibit certain responsive
+     * behaviors on its own but nothing is done in Dash to help this behavior.
+     * This is the legacy behavior of the Graph component.
+     * If 'auto', the Graph will determine if the Plotly.js plot can be made fully
+     * responsive (True) or not (False) based on the values in `config.responsive`,
+     * `figure.layout.autosize`, `figure.layout.height`, `figure.layout.width`.
+     */
+    responsive: PropTypes.oneOf([true, false, 'auto']),
+
     /**
      * Data from latest click event. Read-only.
      */
@@ -491,6 +505,7 @@ PlotlyGraph.defaultProps = {
         layout: {},
         frames: [],
     },
+    responsive: false,
     animate: false,
     animation_options: {
         frame: {

src/fragments/Graph.react.js

@@ -1,9 +1,42 @@
 import React, {Component} from 'react';
-import {clone, equals, filter, has, includes, isNil, omit, type} from 'ramda';
+import ResizeDetector from 'react-resize-detector';
+import {
+    clone,
+    equals,
+    filter,
+    has,
+    includes,
+    isNil,
+    mergeDeepRight,
+    omit,
+    type,
+} from 'ramda';
 import PropTypes from 'prop-types';
 import {graphPropTypes, graphDefaultProps} from '../components/Graph.react';
 /* global Plotly:true */
 
+/**
+ * `autosize: true` causes Plotly.js to conform to the parent element size.
+ * This is necessary for `dcc.Graph` call to `Plotly.Plots.resize(target)` to do something.
+ *
+ * Users can override this value for specific use-cases by explicitly passing `autoresize: true`
+ * if `responsive` is not set to True.
+ */
+const DEFAULT_LAYOUT = {
+    autosize: true,
+};
+
+/**
+ * `responsive: true` causes Plotly.js to resize the graph on `window.resize`.
+ * This is necessary for `dcc.Graph` call to `Plotly.Plots.resize(target)` to do something.
+ *
+ * Users can override this value for specific use-cases by explicitly passing `responsive: false`
+ * if `responsive` is not set to True.
+ */
+const DEFAULT_CONFIG = {
+    responsive: true,
+};
+
 const filterEventData = (gd, eventData, event) => {
     let filteredEventData;
     if (includes(event, ['click', 'hover', 'selected'])) {
@@ -79,10 +112,13 @@ class PlotlyGraph extends Component {
         this._hasPlotted = false;
         this._prevGd = null;
         this.graphResize = this.graphResize.bind(this);
+        this.isResponsive = this.isResponsive.bind(this);
     }
 
     plot(props) {
         const {figure, animate, animation_options, config} = props;
+        const responsive = this.isResponsive(props);
+
         const gd = this.gd.current;
 
         if (
@@ -92,11 +128,27 @@ class PlotlyGraph extends Component {
         ) {
             return Plotly.animate(gd, figure, animation_options);
         }
+
+        let layoutClone = figure.layout;
+        if (layoutClone) {
+            if (responsive) {
+                layoutClone = mergeDeepRight(figure.layout, DEFAULT_LAYOUT);
+                delete layoutClone.height;
+                delete layoutClone.width;
+            } else {
+                layoutClone = clone(figure.layout);
+            }
+        }
+
+        const configClone = responsive
+            ? mergeDeepRight(config, DEFAULT_CONFIG)
+            : clone(config);
+
         return Plotly.react(gd, {
             data: figure.data,
-            layout: clone(figure.layout),
+            layout: layoutClone,
             frames: figure.frames,
-            config: config,
+            config: configClone,
         }).then(() => {
             const gd = this.gd.current;
 
@@ -154,7 +206,28 @@ class PlotlyGraph extends Component {
         clearExtendData();
     }
 
+    isResponsive(props) {
+        const {config, figure, responsive} = props;
+
+        if (type(responsive) === 'Boolean') {
+            return responsive;
+        }
+
+        return (
+            (config.responsive || isNil(config.responsive)) &&
+            (!figure.layout ||
+                ((figure.layout.autosize || isNil(figure.layout.autosize)) &&
+                    (isNil(figure.layout.height) ||
+                        isNil(figure.layout.width))))
+        );
+    }
+
     graphResize() {
+        const responsive = this.isResponsive(this.props);
+        if (!responsive) {
+            return;
+        }
+
         const gd = this.gd.current;
         if (gd) {
             Plotly.Plots.resize(gd);
@@ -221,10 +294,7 @@ class PlotlyGraph extends Component {
     }
 
     componentDidMount() {
-        this.plot(this.props).then(() => {
-            window.addEventListener('resize', this.graphResize);
-        });
-
+        this.plot(this.props);
         if (this.props.extendData) {
             this.extend(this.props);
         }
@@ -238,7 +308,6 @@ class PlotlyGraph extends Component {
                 Plotly.purge(gd);
             }
         }
-        window.removeEventListener('resize', this.graphResize);
     }
 
     shouldComponentUpdate(nextProps) {
@@ -277,15 +346,27 @@ class PlotlyGraph extends Component {
 
         return (
             <div
-                key={id}
                 id={id}
-                ref={this.gd}
+                key={id}
                 data-dash-is-loading={
                     (loading_state && loading_state.is_loading) || undefined
                 }
                 style={style}
-                className={className}
-            />
+            >
+                <ResizeDetector
+                    handleHeight={true}
+                    handleWidth={true}
+                    refreshMode="debounce"
+                    refreshOptions={{trailing: true}}
+                    refreshRate={50}
+                    onResize={this.graphResize}
+                />
+                <div
+                    ref={this.gd}
+                    style={{height: '100%', width: '100%'}}
+                    className={className}
+                />
+            </div>
         );
     }
 }