Merge pull request #381 from plotly/graph_default_id

Refactor Graph.defaultProps.id code into function

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.38.1] - 2018-11-21
+### Fixed
+- Refactored the way the Graph component would generate an unique id if none provided.
+
 ## [0.38.0] - 2018-11-07
 ### Fixed
 - Changed the way the default CSS files for some components are loaded to being loaded with webpack instead of as dependencies.

dash_core_components/dash_core_components.dev.js

@@ -1120,39 +1120,15 @@
   },
   "src/components/Graph.react.js": {
     "description": "",
-    "displayName": "PlotlyGraph",
-    "methods": [
-      {
-        "name": "plot",
-        "docblock": null,
-        "modifiers": [],
-        "params": [
-          {
-            "name": "props",
-            "type": null
-          }
-        ],
-        "returns": null
-      },
-      {
-        "name": "bindEvents",
-        "docblock": null,
-        "modifiers": [],
-        "params": [],
-        "returns": null
-      }
-    ],
+    "displayName": "GraphWithDefaults",
+    "methods": [],
     "props": {
       "id": {
         "type": {
           "name": "string"
         },
         "required": false,
-        "description": "The ID of this component, used to identify dash components\nin callbacks. The ID needs to be unique across all of the\ncomponents in an app.",
-        "defaultValue": {
-          "value": "'graph-' +\nMath.random()\n    .toString(36)\n    .substring(2, 7)",
-          "computed": false
-        }
+        "description": "The ID of this component, used to identify dash components\nin callbacks. The ID needs to be unique across all of the\ncomponents in an app."
       },
       "clickData": {
         "type": {

dash_core_components/dash_core_components.min.js

@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "0.38.0",
+  "version": "0.38.1",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",
@@ -55,7 +55,7 @@
     "react-select-fast-filter-options": "^0.2.2",
     "react-syntax-highlighter": "^5.0.0",
     "react-virtualized-select": "^3.1.0",
-    "style-loader": "^0.21.0",
+    "style-loader": "^0.23.1",
     "styled-jsx": "^3.1.0",
     "webpack": "^4.8.3",
     "webpack-cli": "^2.1.3",

dash_core_components/metadata.json

@@ -1 +1 @@
-__version__ = '0.38.0'
+__version__ = '0.38.1'

dash_core_components/package.json

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

dash_core_components/version.py

@@ -64,15 +64,31 @@ const filterEventData = (gd, eventData, event) => {
     return filteredEventData;
 };
 
-export default class PlotlyGraph extends Component {
+function generateId() {
+    const charAmount = 36;
+    const length = 7;
+    return (
+        'graph-' +
+        Math.random()
+            .toString(charAmount)
+            .substring(2, length)
+    );
+}
+
+const GraphWithDefaults = props => {
+    const id = props.id ? props.id : generateId();
+    return <PlotlyGraph {...props} id={id} />;
+};
+
+class PlotlyGraph extends Component {
     constructor(props) {
         super(props);
         this.bindEvents = this.bindEvents.bind(this);
         this._hasPlotted = false;
     }
 
     plot(props) {
-        const {id, figure, animate, animation_options, config} = props;
+        const {figure, id, animate, animation_options, config} = props;
         const gd = document.getElementById(id);
 
         if (
@@ -94,7 +110,7 @@ export default class PlotlyGraph extends Component {
     }
 
     bindEvents() {
-        const {id, fireEvent, setProps, clear_on_unhover} = this.props;
+        const {fireEvent, id, setProps, clear_on_unhover} = this.props;
 
         const gd = document.getElementById(id);
 
@@ -225,7 +241,7 @@ export default class PlotlyGraph extends Component {
     }
 }
 
-PlotlyGraph.propTypes = {
+const graphPropTypes = {
     /**
      * The ID of this component, used to identify dash components
      * in callbacks. The ID needs to be unique across all of the
@@ -493,14 +509,7 @@ PlotlyGraph.propTypes = {
     fireEvent: PropTypes.func,
 };
 
-PlotlyGraph.defaultProps = {
-    /* eslint-disable no-magic-numbers */
-    id:
-        'graph-' +
-        Math.random()
-            .toString(36)
-            .substring(2, 7),
-    /* eslint-enable no-magic-numbers */
+const graphDefaultProps = {
     clickData: null,
     clickAnnotationData: null,
     hoverData: null,
@@ -556,3 +565,11 @@ PlotlyGraph.defaultProps = {
         mapboxAccessToken: null,
     },
 };
+
+GraphWithDefaults.propTypes = graphPropTypes;
+PlotlyGraph.propTypes = graphPropTypes;
+
+GraphWithDefaults.defaultProps = graphDefaultProps;
+PlotlyGraph.defaultProps = graphDefaultProps;
+
+export default GraphWithDefaults;

package.json

@@ -900,6 +900,20 @@ def test_graphs_with_different_figures(self):
 
         self.snapshot('2 graphs with different figures')
 
+    def test_graphs_without_ids(self):
+        app = dash.Dash(__name__)
+        app.layout = html.Div([
+            dcc.Graph(className='graph-no-id-1'),
+            dcc.Graph(className='graph-no-id-2'),
+        ])
+
+        self.startServer(app=app)
+
+        graph_1 = self.wait_for_element_by_css_selector('.graph-no-id-1')
+        graph_2 = self.wait_for_element_by_css_selector('.graph-no-id-2')
+
+        self.assertNotEqual(graph_1.get_attribute('id'), graph_2.get_attribute('id'))
+
     def test_datepickerrange_updatemodes(self):
         app = dash.Dash(__name__)