dcc.Graph: Improve responsiveness, expose resize status, allow wrapper extension (#706)

Author: Marc-Andre-Rivet

CHANGELOG.md

@@ -2,6 +2,17 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Added
+- [#706](https://github.com/plotly/dash-core-components/pull/706)
+  - Added new `responsive` property that overrides the underlying Plotly.js graph responsiveness from Dash-land
+  - Added responsiveness on graph parent element resize (previously only worked on window.resize)
+  - Added new `dash-graph--pending` class to dcc.Graph, present while resizing, (re-)rendering, loading
+
+### Updated
+- [#706](https://github.com/plotly/dash-core-components/pull/706)
+  - Upgraded plotly.js to [1.51.3](https://github.com/plotly/plotly.js/releases/tag/v1.51.3)
+
 ## [1.6.0] - 2019-11-27
 ### Updated
 - Upgraded plotly.js to 1.51.2 [#708](https://github.com/plotly/dash-core-components/pull/708)

CONTRIBUTING.md

@@ -34,9 +34,7 @@ Locally](README.md#testing-locally) section of README.md.
 ## Updating Plotly.js
 
 1. Update the version of `plotly.js` in package.json. Always use an exact version without "^" or "~"
-2. Run `npm install` followed by `npm run build`, this will ensure the latest version of Plotly.js is in `node_modules` and copy
-that version over with the other build artifacts
-3. Update `dash_core_components_base/__init__.py` plotly.js `relative_package_path` and `external_url`
+2. Run `npm install` followed by `npm run build`, the Plotly.js artifact will be copied and bundled over as required
 4. Update `CHANGELOG.md` with links to the releases and a description of the changes. The message should state (see the existing `CHANGELOG.md` for examples):
     * If you're only bumping the patch level, the heading is "Fixed" and the text starts "Patched plotly.js". Otherwise the heading is "Updated" and the text starts "Upgraded plotly.js"
     * The new plotly.js version number, and the PR in which this was done

MANIFEST.in

@@ -5,7 +5,7 @@ include dash_core_components/async~*.js.map
 include dash_core_components/highlight.pack.js
 include dash_core_components/metadata.json
 include dash_core_components/package-info.json
-include dash_core_components/plotly-*.min.js
+include dash_core_components/plotly.min.js
 include README.md
 include LICENSE.txt
 include package.json

dash_core_components_base/__init__.py

@@ -92,10 +92,10 @@
         'dynamic': True
     },
     {
-        'relative_package_path': 'plotly-1.51.2.min.js',
+        'relative_package_path': 'plotly.min.js',
         'external_url': (
             'https://unpkg.com/dash-core-components@{}'
-            '/dash_core_components/plotly-1.51.2.min.js'
+            '/dash_core_components/plotly.min.js'
         ).format(__version__),
         'namespace': 'dash_core_components',
         'async': 'eager'

dash_core_components_base/plotly-1.51.2.min.js

@@ -24,6 +24,7 @@
     "format": "prettier --config .prettierrc --write src/**/*.js tests/unit/*.js",
     "format:test": "prettier --config .prettierrc src/**/*.js tests/unit/*.js --list-different",
     "uninstall-local": "pip uninstall dash-core-components -y",
+    "prebuild:js": "cp node_modules/plotly.js/dist/plotly.min.js dash_core_components_base/plotly.min.js",
     "build:js": "webpack --mode production",
     "build:py_and_r": "dash-generate-components ./src/components dash_core_components -p package-info.json && cp dash_core_components_base/** dash_core_components/ && dash-generate-components ./src/components dash_core_components -p package-info.json --r-prefix 'dcc'",
     "build": "run-s build:js generator build:py_and_r",
@@ -36,7 +37,7 @@
     "color": "^3.1.0",
     "fast-isnumeric": "^1.1.3",
     "moment": "^2.20.1",
-    "plotly.js": "1.51.2",
+    "plotly.js": "1.51.3",
     "prop-types": "^15.6.0",
     "ramda": "^0.26.1",
     "rc-slider": "^8.6.11",
@@ -78,6 +79,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",
     "terser-webpack-plugin": "^2.3.0",

package-lock.json

@@ -1,8 +1,12 @@
-import React, {Component, PureComponent, Suspense} from 'react';
+import React, {Component, memo, Suspense} from 'react';
 import PropTypes from 'prop-types';
 
 import {asyncDecorator} from '@plotly/dash-component-plugins';
 import LazyLoader from '../utils/LazyLoader';
+import {
+    privatePropTypes,
+    privateDefaultProps,
+} from '../fragments/Graph.privateprops';
 
 const EMPTY_EXTEND_DATA = [];
 
@@ -76,11 +80,9 @@ class PlotlyGraph extends Component {
     render() {
         return (
             <ControlledPlotlyGraph
-                {...{
-                    ...this.props,
-                    extendData: this.state.extendData,
-                    clearExtendData: this.clearExtendData,
-                }}
+                {...this.props}
+                extendData={this.state.extendData}
+                clearExtendData={this.clearExtendData}
             />
         );
     }
@@ -90,24 +92,58 @@ const RealPlotlyGraph = asyncDecorator(PlotlyGraph, () =>
     LazyLoader.plotly().then(LazyLoader.graph)
 );
 
-class ControlledPlotlyGraph extends PureComponent {
-    render() {
-        return (
-            <Suspense fallback={null}>
-                <RealPlotlyGraph {...this.props} />
-            </Suspense>
-        );
-    }
-}
+const ControlledPlotlyGraph = memo(props => {
+    const {className, id} = props;
+
+    const extendedClassName = className
+        ? 'dash-graph ' + className
+        : 'dash-graph';
+
+    return (
+        <Suspense
+            fallback={
+                <div
+                    id={id}
+                    key={id}
+                    className={`${extendedClassName} dash-graph--pending`}
+                />
+            }
+        >
+            <RealPlotlyGraph {...props} className={extendedClassName} />
+        </Suspense>
+    );
+});
+
+ControlledPlotlyGraph.propTypes = PropTypes.any;
 
 PlotlyGraph.propTypes = {
+    ...privatePropTypes,
+
     /**
      * The ID of this component, used to identify dash components
      * in callbacks. The ID needs to be unique across all of the
      * components in an app.
      */
     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, the Plotly.js plot not be responsive to window resize and
+     * parent element resize event. This is achieved by overriding `config.responsive`
+     * to False and `figure.layout.autosize` to False.
+     * If 'auto' (default), 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`.
+     * This is the legacy behavior of the Graph component.
+     *
+     * Needs to be combined with appropriate dimension / styling through the `style` prop
+     * to fully take effect.
+     */
+    responsive: PropTypes.oneOf([true, false, 'auto']),
+
     /**
      * Data from latest click event. Read-only.
      */
@@ -479,6 +515,8 @@ PlotlyGraph.propTypes = {
 };
 
 PlotlyGraph.defaultProps = {
+    ...privateDefaultProps,
+
     clickData: null,
     clickAnnotationData: null,
     hoverData: null,
@@ -491,6 +529,7 @@ PlotlyGraph.defaultProps = {
         layout: {},
         frames: [],
     },
+    responsive: 'auto',
     animate: false,
     animation_options: {
         frame: {

package.json

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+
+export const privatePropTypes = {
+    _dashprivate_transformConfig: PropTypes.func,
+    _dashprivate_transformFigure: PropTypes.func,
+};
+
+export const privateDefaultProps = {
+    _dashprivate_transformConfig: c => c,
+    _dashprivate_transformFigure: f => f,
+};