Merge pull request #306 from plotly/hotfix-tabs

Fix Tabs and Tabs tests

Author: valentijnnieman

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.30.2] - 2018-09-21
+### Fixed
+- Fixed regression in Graph component where it wouldn't resize correctly [#256](https://github.com/plotly/dash-core-components/issues/256)
+
 ## [0.30.1] - 2018-09-20
 ### Fixed
 - Renamed `__init__.py` external_path to dash_core_components.min.js

dash_core_components/dash_core_components.min.js

@@ -1,27 +1,25 @@
 {
   "name": "dash-core-components",
-  "version": "0.29.0",
+  "version": "0.30.2",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",
     "url": "git://github.com/plotly/dash-core-components.git"
   },
   "main": "src/index.js",
   "scripts": {
-    "build-dev": "builder run clean-lib && builder run extract-metadata && builder run generate-python-classes && webpack -w --config=./config/webpack/webpack.config.dev.js",
-    "build-dist": "builder run clean-lib && builder run extract-metadata && builder run generate-python-classes && cross-env NODE_ENV=production webpack --config=./config/webpack/webpack.config.dist.js",
-    "copy-lib": "cp -f lib/* dash_core_components",
     "generate-python-classes": "python -c \"import dash; dash.development.component_loader.generate_classes('dash_core_components', 'dash_core_components/metadata.json');\"",
     "install-local": "npm run copy-lib && python setup.py install",
-    "prepublish": "npm test && builder run build-dist && npm run copy-lib",
+    "prepublish": "npm test && npm run build:js && npm run build:js-dev && npm run build:py",
     "publish-all": "npm publish && python setup.py sdist upload",
     "publish-pypi": "npm run prepublish && python setup.py sdist && twine upload --sign --skip-existing",
-    "start": "./node_modules/.bin/builder run build-dev",
+    "start": "webpack-serve ./webpack.serve.config.js --open",
     "test": "eslint src",
     "test-watch": "./node_modules/.bin/builder run test-frontend-watch",
     "test-debug": "./node_modules/.bin/builder run test-frontend-debug",
     "uninstall-local": "pip uninstall dash-core-components -y",
     "build:js": "webpack --mode production",
+    "build:js-dev": "webpack --mode development",
     "build:py": "node ./extract-meta src/components > dash_core_components/metadata.json && cp package.json dash_core_components && npm run generate-python-classes"
   },
   "author": "Chris Parmer <chris@plot.ly>",

dash_core_components/package.json

@@ -1 +1 @@
-__version__ = '0.30.1'
+__version__ = '0.30.2'

dash_core_components/version.py

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

package-lock.json

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {contains, filter, has, isNil, type} from 'ramda';
+import {contains, filter, clone, has, isNil, type} from 'ramda';
 /* global Plotly:true */
 
 const filterEventData = (gd, eventData, event) => {
@@ -77,15 +77,13 @@ export default class PlotlyGraph extends Component {
         if (animate && this._hasPlotted && figure.data.length === gd.data.length) {
             return Plotly.animate(id, figure, animation_options);
         }
-        return Plotly.react(id, figure.data, figure.layout, config).then(
-            () => {
-                if (!this._hasPlotted) {
-                    this.bindEvents();
-                    Plotly.Plots.resize(document.getElementById(id));
-                    this._hasPlotted = true;
-                }
+        return Plotly.react(id, figure.data, clone(figure.layout), config).then(() => {
+            if (!this._hasPlotted) {
+                this.bindEvents();
+                Plotly.Plots.resize(document.getElementById(id));
+                this._hasPlotted = true;
             }
-        );
+        });
     }
 
     bindEvents() {

package.json

@@ -168,20 +168,17 @@ export default class Tabs extends Component {
 
             const amountOfTabs = this.props.children.length;
 
-            window.console.log('this.props.children', this.props.children);
             EnhancedTabs = this.props.children.map((child, index) => {
                 // TODO: handle components that are not dcc.Tab components (throw error)
                 // enhance Tab components coming from Dash (as dcc.Tab) with methods needed for handling logic
                 let childProps;
 
-                window.console.log('child', child);
 
                 if (child.props.children) {
                     // if props appears on .children, props are coming from Dash
                     childProps = child.props.children.props;
                 } else {
                     // else props are coming from React (Demo.react.js)
-                    window.console.log('child props', child.props);
                     childProps = child.props;
                 }
 

src/components/Graph.react.js

@@ -539,10 +539,19 @@ def on_click(n_clicks):
 
         button_one.click()
 
+        # wait for tabs to be loaded after clicking
+        WebDriverWait(self.driver, 10).until(
+            EC.visibility_of_element_located((By.CSS_SELECTOR, "#graph-one .main-svg"))
+        )
+
         self.snapshot("Tabs 1 rendered ")
 
         button_two.click()
-        time.sleep(1)
+
+        # wait for tabs to be loaded after clicking
+        WebDriverWait(self.driver, 10).until(
+            EC.visibility_of_element_located((By.CSS_SELECTOR, "#graph-two .main-svg"))
+        )
 
         self.snapshot("Tabs 2 rendered ")
 
@@ -629,6 +638,11 @@ def render_content(tab):
         self.snapshot("Tabs with Graph - initial (graph should not resize)")
         tab_two.click()
 
+        # wait for Graph's internal svg to be loaded after clicking
+        WebDriverWait(self.driver, 10).until(
+            EC.visibility_of_element_located((By.CSS_SELECTOR, "#graph-2-tabs .main-svg"))
+        )
+
         self.snapshot("Tabs with Graph - clicked tab 2 (graph should not resize)")
 
         WebDriverWait(self.driver, 10).until(
@@ -637,6 +651,11 @@ def render_content(tab):
 
         tab_one.click()
 
+        # wait for Graph to be loaded after clicking
+        WebDriverWait(self.driver, 10).until(
+            EC.visibility_of_element_located((By.CSS_SELECTOR, "#graph-1-tabs .main-svg"))
+        )
+
         self.snapshot("Tabs with Graph - clicked tab 1 (graph should not resize)")