Merge pull request #29 from bcliang/fix-graph-unmount-and-id-generation

release 1.0.3: Fix graph unmount and id generation

README.md

@@ -4,7 +4,7 @@
 ![PyPI - Python Version](https://img.shields.io/pypi/pyversions/dash-extendable-graph.svg)
 [![PyPI - License](https://img.shields.io/pypi/l/dash-extendable-graph.svg)](./LICENSE)
 
-dash-extendable-graph is a Dash component library. This library contains a single component: `ExtendableGraph`. The component is a fork of the Graph() component of [dash-core-components](https://github.com/plotly/dash-core-components) (v 1.0.0). However, the `extendData` for this component has been modified to follow an api that matches the format of `figure['data']` (as opposed to the api defined `Graph.extendData` and `Plotly.extendTraces()`).
+dash-extendable-graph is a Dash component library. This library contains a single component: `ExtendableGraph`. The component is a fork of the Graph() component of [dash-core-components](https://github.com/plotly/dash-core-components) (v 1.1.1). However, the `extendData` for this component has been modified to follow an api that matches the format of `figure['data']` (as opposed to the api defined `Graph.extendData` and `Plotly.extendTraces()`).
 
 Note: plotly.js is required. However, the library is NOT explicitly listed in `MANIFEST.in` or in `dash_extendable_graph\__init__.py` as a way to reduce bundle size. Plotly.js is already distributed with the dash-core-components package, and most projects will import dcc as well as dash-extendable-graph.
 
@@ -26,13 +26,13 @@ $ pip install dash-extendable-graph
 
 General examples may be found in `usage.py`
 
-### extendData keys
+### extendData properties
 
 1. `updateData` [list]: a list of dictionaries, each containing representing trace data (e.g `dict(x=[1], y=[1])`)
 2. `traceIndices` [list, optional]: identify the traces that should be extended. If the specified trace index does not exist, the corresponding trace shall be appended to the figure.
 3. `maxPoints` [number, optional]: define the maximum number of points to plot in the figure (per trace).
 
-Based on the [`Plotly.extendTraces()` api](https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_api.js#L979).
+Based on the [`Plotly.extendTraces()` api](https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_api.js#L979). However, the `updateData` key has been modified to better match the contents of `Plotly.plot()` (e.g. `Graph.figure`). Aside from following dash-familiar styling, this component allows the user to extend traces of different types in a single call (`Plotly.extendTraces()` takes a map of key:val and assumes all traces will share the same data keys).
 
 ### Code
 
@@ -115,7 +115,11 @@ $ python usage.py
 
 ## Tests
 
-- Run the tests with `$pytest tests`
+Integration tests for the component can be found in `tests/`
+
+`$pytest --headless tests`
+
+(note: the `--headless` param runs tests without the GUI)
 
 ### Create a production build and publish:
 

dash_extendable_graph/ExtendableGraph.py

@@ -73,7 +73,7 @@ class ExtendableGraph(Component):
 unless a separate `edits` config item overrides individual parts
   - edits (dict; optional): A set of editable properties. edits has the following type: dict containing keys 'annotationPosition', 'annotationTail', 'annotationText', 'axisTitleText', 'colorbarPosition', 'colorbarTitleText', 'legendPosition', 'legendText', 'shapePosition', 'titleText'.
 Those keys have the following types:
-  - annotationPosition (boolean; optional): annotationPosition: the main anchor of the annotation, which is the
+  - annotationPosition (boolean; optional): The main anchor of the annotation, which is the
 text (if no arrow) or the arrow (which drags the whole thing leaving
 the arrow length & direction unchanged)
   - annotationTail (boolean; optional): Just for annotations with arrows, change the length and direction of the arrow
@@ -107,12 +107,12 @@ class ExtendableGraph(Component):
   - modeBarButtonsToRemove (list; optional): Remove mode bar button by name.
 All modebar button names at https://github.com/plotly/plotly.js/blob/master/src/components/modebar/buttons.js
 Common names include:
- - sendDataToCloud
-- (2D): zoom2d, pan2d, select2d, lasso2d, zoomIn2d, zoomOut2d, autoScale2d, resetScale2d
-- (Cartesian): hoverClosestCartesian, hoverCompareCartesian
-- (3D): zoom3d, pan3d, orbitRotation, tableRotation, handleDrag3d, resetCameraDefault3d, resetCameraLastSave3d, hoverClosest3d
-- (Geo): zoomInGeo, zoomOutGeo, resetGeo, hoverClosestGeo
-- hoverClosestGl2d, hoverClosestPie, toggleHover, resetViews
+sendDataToCloud;
+(2D) zoom2d, pan2d, select2d, lasso2d, zoomIn2d, zoomOut2d, autoScale2d, resetScale2d;
+(Cartesian) hoverClosestCartesian, hoverCompareCartesian;
+(3D) zoom3d, pan3d, orbitRotation, tableRotation, handleDrag3d, resetCameraDefault3d, resetCameraLastSave3d, hoverClosest3d;
+(Geo) zoomInGeo, zoomOutGeo, resetGeo, hoverClosestGeo;
+hoverClosestGl2d, hoverClosestPie, toggleHover, resetViews.
   - modeBarButtonsToAdd (list; optional): Add mode bar button using config objects
   - modeBarButtons (boolean | number | string | dict | list; optional): Fully custom mode bar buttons as nested array,
 where the outer arrays represents button groups, and

dash_extendable_graph/metadata.json

@@ -1,8 +1,47 @@
 {
   "src/lib/components/ExtendableGraph.react.js": {
     "description": "ExtendableGraph can be used to render any plotly.js-powered data vis.\r\n\nYou can define callbacks based on user interaction with ExtendableGraphs such\r\nas hovering, clicking or selecting",
-    "displayName": "ExtendableGraphWithDefaults",
-    "methods": [],
+    "displayName": "ExtendableGraph",
+    "methods": [
+      {
+        "name": "plot",
+        "docblock": null,
+        "modifiers": [],
+        "params": [
+          {
+            "name": "props",
+            "type": null
+          }
+        ],
+        "returns": null
+      },
+      {
+        "name": "extend",
+        "docblock": null,
+        "modifiers": [],
+        "params": [
+          {
+            "name": "props",
+            "type": null
+          }
+        ],
+        "returns": null
+      },
+      {
+        "name": "graphResize",
+        "docblock": null,
+        "modifiers": [],
+        "params": [],
+        "returns": null
+      },
+      {
+        "name": "bindEvents",
+        "docblock": null,
+        "modifiers": [],
+        "params": [],
+        "returns": null
+      }
+    ],
     "props": {
       "id": {
         "type": {
@@ -198,7 +237,7 @@
               "value": {
                 "annotationPosition": {
                   "name": "bool",
-                  "description": "annotationPosition: the main anchor of the annotation, which is the\r\ntext (if no arrow) or the arrow (which drags the whole thing leaving\r\nthe arrow length & direction unchanged)",
+                  "description": "The main anchor of the annotation, which is the\r\ntext (if no arrow) or the arrow (which drags the whole thing leaving\r\nthe arrow length & direction unchanged)",
                   "required": false
                 },
                 "annotationTail": {
@@ -353,7 +392,7 @@
             },
             "modeBarButtonsToRemove": {
               "name": "array",
-              "description": "Remove mode bar button by name.\r\nAll modebar button names at https://github.com/plotly/plotly.js/blob/master/src/components/modebar/buttons.js\r\nCommon names include:\r\n - sendDataToCloud\r\n- (2D): zoom2d, pan2d, select2d, lasso2d, zoomIn2d, zoomOut2d, autoScale2d, resetScale2d\r\n- (Cartesian): hoverClosestCartesian, hoverCompareCartesian\r\n- (3D): zoom3d, pan3d, orbitRotation, tableRotation, handleDrag3d, resetCameraDefault3d, resetCameraLastSave3d, hoverClosest3d\r\n- (Geo): zoomInGeo, zoomOutGeo, resetGeo, hoverClosestGeo\r\n- hoverClosestGl2d, hoverClosestPie, toggleHover, resetViews",
+              "description": "Remove mode bar button by name.\r\nAll modebar button names at https://github.com/plotly/plotly.js/blob/master/src/components/modebar/buttons.js\r\nCommon names include:\r\nsendDataToCloud;\r\n(2D) zoom2d, pan2d, select2d, lasso2d, zoomIn2d, zoomOut2d, autoScale2d, resetScale2d;\r\n(Cartesian) hoverClosestCartesian, hoverCompareCartesian;\r\n(3D) zoom3d, pan3d, orbitRotation, tableRotation, handleDrag3d, resetCameraDefault3d, resetCameraLastSave3d, hoverClosest3d;\r\n(Geo) zoomInGeo, zoomOutGeo, resetGeo, hoverClosestGeo;\r\nhoverClosestGl2d, hoverClosestPie, toggleHover, resetViews.",
               "required": false
             },
             "modeBarButtonsToAdd": {

dash_extendable_graph/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash_extendable_graph",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "plotly-dash custom component. Adds Plotly.extendTraces() support to dash_core_components.Graph()",
   "homepage": "https://github.com/bcliang/dash-extendable-graph",
   "main": "build/index.js",
@@ -32,17 +32,16 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
     "@babel/preset-env": "^7.5.4",
     "@babel/preset-react": "^7.0.0",
-    "babel-eslint": "^10.0.2",
+    "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
     "component-playground": "^3.0.0",
-    "copyfiles": "^2.1.1",
     "css-loader": "^1.0.1",
-    "eslint": "^5.16.0",
-    "eslint-config-prettier": "^3.6.0",
-    "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-react": "^7.12.4",
+    "eslint": "^6.2.2",
+    "eslint-config-prettier": "^6.1.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-react": "^7.14.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^1.16.4",
+    "prettier": "^1.18.2",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-docgen": "^4.1.1",