Fix #260, allow '{}' as Graph.figure

CHANGELOG.md

@@ -2,6 +2,12 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.28.1] - 2018-08-29
+### Changed
+- `candlestick` and `OHLC` charts are now plotted using the `Plotly.react` method instead of the `Plotly.newPlot` method.
+### Fixed
+- Fix bug where front-end error was thrown when setting `Graph.figure = {}` (fixes [#260]).
+
 ## [0.28.0]
 - Upgraded Plotly.js, the underlying library behind the
 `dash_core_components.Graph` component, to [version 1.40.1](https://github.com/plotly/plotly.js/releases/tag/v1.40.1).

dash_core_components/metadata.json

@@ -2703,7 +2703,7 @@
         "required": false,
         "description": "Overrides the default (inline) styles when disabled",
         "defaultValue": {
-          "value": "{\n    color: '#d6d6d6',\n}",
+          "value": "{\n    color: '#d6d6d6'\n}",
           "computed": false
         }
       },
@@ -2864,7 +2864,7 @@
         "required": false,
         "description": "Holds the colors used by the Tabs and Tab components. If you set these, you should specify colors for all properties, so:\ncolors: {\n   border: '#d6d6d6',\n   primary: '#1975FA',\n   background: '#f9f9f9'\n }",
         "defaultValue": {
-          "value": "{\n    border: '#d6d6d6',\n    primary: '#1975FA',\n    background: '#f9f9f9',\n}",
+          "value": "{\n    border: '#d6d6d6',\n    primary: '#1975FA',\n    background: '#f9f9f9'\n}",
           "computed": false
         }
       }

dash_core_components/version.py

@@ -1 +1 @@
-__version__ = '0.28.0'
+__version__ = '0.28.1'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "0.28.0",
+  "version": "0.28.1",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",

src/components/Graph.react.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {contains, intersection, filter, has, isNil, type, pluck} from 'ramda';
+import {contains, filter, has, isNil, type} from 'ramda';
 /* global Plotly:true */
 
 const filterEventData = (gd, eventData, event) => {
@@ -77,18 +77,7 @@ export default class PlotlyGraph extends Component {
         if (animate && this._hasPlotted && figure.data.length === gd.data.length) {
             return Plotly.animate(id, figure, animation_options);
         } else {
-
-            let PlotMethod;
-            if (intersection(
-                pluck('type', figure.data),
-                ['candlestick', 'ohlc']).length
-            ) {
-                PlotMethod = Plotly.newPlot;
-            } else {
-                PlotMethod = Plotly.react;
-            }
-
-            return PlotMethod(id, figure.data, figure.layout, config).then(
+            return Plotly.react(id, figure.data, figure.layout, config).then(
                 () => {
                     if (!this._hasPlotted) {
                         this.bindEvents();

src/components/Tab.react.js

@@ -63,14 +63,14 @@ Tab.propTypes = {
     /**
      * Overrides the default (inline) styles for the Tab component when it is selected.
      */
-    selected_style: PropTypes.object,
+    selected_style: PropTypes.object
 };
 
 Tab.defaultProps = {
     disabled: false,
     disabled_style: {
-        color: '#d6d6d6',
-    },
+        color: '#d6d6d6'
+    }
 };
 
 export default Tab;

src/components/Tabs.react.js

@@ -17,7 +17,7 @@ const EnhancedTab = ({
     disabled_className,
     mobile_breakpoint,
     amountOfTabs,
-    colors,
+    colors
 }) => {
     let tabStyle = style;
     if (disabled) {
@@ -110,14 +110,14 @@ export default class Tabs extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            selected: this.props.value || 'tab-1',
+            selected: this.props.value || 'tab-1'
         };
 
         this.selectHandler = this.selectHandler.bind(this);
     }
     selectHandler(value) {
         this.setState({
-            selected: value,
+            selected: value
         });
         if (this.props.setProps) {
             this.props.setProps({value: value});
@@ -126,7 +126,7 @@ export default class Tabs extends Component {
     componentWillReceiveProps(newProps) {
         const value = newProps.value;
         this.setState({
-            selected: value,
+            selected: value
         });
     }
     render() {
@@ -270,8 +270,8 @@ Tabs.defaultProps = {
     colors: {
         border: '#d6d6d6',
         primary: '#1975FA',
-        background: '#f9f9f9',
-    },
+        background: '#f9f9f9'
+    }
 };
 
 Tabs.propTypes = {
@@ -343,6 +343,6 @@ Tabs.propTypes = {
     colors: PropTypes.shape({
         border: PropTypes.string,
         primary: PropTypes.string,
-        background: PropTypes.string,
-    }),
+        background: PropTypes.string
+    })
 };

test/test_integration.py

@@ -12,7 +12,6 @@
 import dash_html_components as html
 import dash_core_components as dcc
 import dash_table_experiments as dt
-from selenium import webdriver
 from selenium.webdriver.common.keys import Keys
 from selenium.common.exceptions import InvalidElementStateException
 
@@ -851,3 +850,30 @@ def on_click(n_clicks):
         time.sleep(2)
 
         self.driver.switch_to.alert.accept()
+
+    def test_empty_graph(self):
+        app = dash.Dash(__name__)
+
+        app.layout = html.Div([
+            html.Button(id='click', children='Click me'),
+            dcc.Graph(
+                id='graph',
+                figure={
+                    'data': [dict(x=[1, 2, 3], y=[1, 2, 3], type='scatter')]
+                }
+            )
+        ])
+
+        @app.callback(dash.dependencies.Output('graph', 'figure'),
+                      [dash.dependencies.Input('click', 'n_clicks')],
+                      [dash.dependencies.State('graph', 'figure')])
+        def render_content(click, prev_graph):
+            if click:
+                return {}
+            return prev_graph
+
+        self.startServer(app)
+        button = self.wait_for_element_by_css_selector('#click')
+        button.click()
+        time.sleep(2)  # Wait for graph to re-render
+        self.snapshot('render-empty-graph')