Pre-v0.2.0 PR: Change package manager to npm, improve readme, update …

…changelog, fix emails/tagging, upgrade package versions (#100)

* README: Reorder R instructions, detail about SVG, link to tests

* Code of conduct: fix email

* Clearly specify usage of yarn over npm

* Specify yarn in the PR templates

* Add unlogged changes

* yarn upgrade

Upgrade everything

* Log yarn upgrade's

* yarn run build:all

* Fix interactions (again)

* Change emails for Code of conduct

* Remove yarn.lock, use package-lock

* Update docs to specify usage of npm instead of yarn

* Apply suggestions from code review

Co-authored-by: alexcjohnson <johnson.alex.c@gmail.com>

* Create CODEOWNERS

* Update .github/CODEOWNERS

Co-authored-by: alexcjohnson <johnson.alex.c@gmail.com>

Co-authored-by: alexcjohnson <johnson.alex.c@gmail.com>

.github/CODEOWNERS

@@ -0,0 +1,3 @@
+# These owners will be the default owners for everything in
+# the repo. Unless a later match takes precedence
+* @alexcjohnson @Marc-Andre-Rivet @xhlulu

.github/PULL_REQUEST_TEMPLATE.md

@@ -21,7 +21,7 @@ What does this implement/fix? Explain your changes.
 
 ## Pre-Merge checklist
 - [ ] The project was correctly built with `npm run build:all`.
-- [ ] If there was any conflict, it was solved correctly
+- [ ] If there was any conflict, it was solved correctly.
 - [ ] All changes were documented in CHANGELOG.md.
 - [ ] All tests on CircleCI have passed.
 - [ ] All Percy visual changes have been approved.

CHANGELOG.md

@@ -9,25 +9,31 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 * Contributed initial build of R package.
 * Added access to cytoscape.js PNG and JPG image generation API through `generateImage` and
-  `imageData` properties.
+  `imageData` properties (PR [#88](https://github.com/plotly/dash-cytoscape/pull/88)).
 * Added ability to download image files generated with `generateImage` client-side without sending 
-  data to the server.
-* Used the newly added `generateImage` and `imageData` properties to enable svg generation using https://github.com/kinimesi/cytoscape-svg
-* Added responsive cytoscape.js graph feature toggled using the `responsive` property.
+  data to the server (PR [#88](https://github.com/plotly/dash-cytoscape/pull/88)).
+* Used the newly added `generateImage` and `imageData` properties to enable svg generation using [cytoscape-svg](https://github.com/kinimesi/cytoscape-svg).
+* Added responsive cytoscape.js graph feature toggled using the `responsive` property (PR [#93](https://github.com/plotly/dash-cytoscape/pull/92)).
 * One new demo:
     * `demos/usage-responsive-graph.py`: Example of graph with the ability to toggle the responsive feature on and off.
+    * `demos/usage-image-export.py`: Shows how to export images as JPG, PNG or SVG.
 
 ### Changed
+* Changed the official package manager from `yarn` to `npm`.
 * `utils.Tree`: v0.1.1 broke compatibility with Python 2. Therefore, modified code to be compatible
   with Python 2. Added `props` and `edge_props` properties to accept arguments passed directly to
   the node's and edge's dictionaries, respectively (e.g., 'classes', 'positions', etc.).
 * Removed `Tree`'s method `add_child`, because it is redundant with `add_children` called with an
   argument of length 1.
-* `setup.py`: Remove `dash-html-components` and `dash_renderer` from `install_requires`
+* `setup.py`: Remove `dash-html-components` and `dash_renderer` from `install_requires`.
+* `usage-events.py`: Fix the size of the cytoscape graph to 500px by 500px.
+* Upgrade `react-cytoscape.js` to latest.
 
 ### Fixed
 * `setup.py`: Use `packages=find_packages(include=[package_name, package_name + ".*"])` so that all 
   subpackages like `utils` will be included when you `pip install dash-cytoscape`.
+* Issue where `dash-cytoscape` cannot read property of 'length' of undefined when elements is not specified.
+* `tests.test_interactions`.
 
 ## [0.1.1] - 2019-04-05
 

CODE_OF_CONDUCT.md

@@ -34,7 +34,7 @@ This Code of Conduct applies both within project spaces and in public spaces whe
 
 ## Enforcement
 
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at chris@plotly.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at chris@plotly.com or alex@plotly.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
 
 Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
 

CONTRIBUTING.md

@@ -27,10 +27,14 @@ venv\Scripts\activate
 
 3. Install the JavaScript dependencies and build the code:
 ```commandline
-yarn
-yarn run build:all
+npm install
+npm run build:all
 ```
 
+#### Package manager
+
+Before v0.2.0, our preferred package manager for this project is Yarn. Starting with v0.2.0, we will be using `npm` in order to create less confusion and ensure a unified package manager with other Dash components. Therefore we use `package-lock.json` rather than `yarn.lock.`. If you are contributing a PR to dash-cytoscape, we encourage you to also use `npm`.
+
 ## Coding Style
 
 Please lint any additions to Python code with `pylint` and `flake8`:
@@ -108,7 +112,7 @@ Those tests are rendered into images located inside `tests/screenshots`, which a
 
 ## Publishing
 
-Create a pull request and tag the Plotly team (`@plotly/dash_bio`) and tag / request review from [@xhlulu](https://github.com/xhlulu).
+Create a pull request and tag the Plotly team (`@plotly/dash-core`) and tag / request review from [@xhlulu](https://github.com/xhlulu).
 
 After a review has been done and your changes have been approved, create a prerelease and comment in the PR. Version numbers should follow [semantic versioning][].
 
@@ -190,12 +194,7 @@ Complete the "Publishing" section.
 - [ ] Step 1 and 2 of Post-merge checklist are completed.
 - [ ] You have closed all issues that this pull request solves, and commented the new version number users should install.
 - [ ] If significant enough, you have created an issue about documenting the new feature or change and you have added it to the [Documentation] project.
-- [ ] You have created a pull request in [Dash Docs] with the new release of your feature by editing that project's [`requirements.txt` file](https://github.com/plotly/dash-docs/blob/master/requirements.txt) and you have assigned `@chriddyp` to review.
-
-## Notes
-
-#### Package manager
-Our preferred package manager for this project is Yarn. Therefore we use `yarn.lock` rather than `package-lock.json`. If you decide to start using npm for package management (which will create package-lock.json) and you commit this project to Dokku, make sure to delete `yarn.lock`.
+- [ ] You have created a pull request in [Dash Docs] with the new release of your feature by editing that project's [`requirements.txt` file](https://github.com/plotly/dash-docs/blob/master/requirements.txt).
 
 
 ## Financial Contributions

README.md

@@ -12,26 +12,20 @@ A Dash component library for creating interactive and customizable networks in P
 * 🗺 [Component Reference](https://dash.plotly.com/cytoscape/reference)
 * 📺 [Webinar Recording](https://www.youtube.com/watch?v=snXcIsCMQgk)
 
-## Getting Started
+## Getting Started in Python
 
-### Prerequisites (Python)
+### Prerequisites
 
 Make sure that dash and its dependent libraries are correctly installed:
 ```commandline
-pip install dash dash-html-components
+pip install dash
 ```
 
 If you want to install the latest versions, check out the [Dash docs on installation](https://dash.plotly.com/installation).
 
-### Prerequisites (R)
+### Usage
 
-```R
-install.packages(c("devtools", "dash"))
-```
-
-### Usage (Python)
-
-Install the library using pip:
+Install the library using `pip`:
 
 ```
 pip install dash-cytoscape
@@ -63,7 +57,34 @@ if __name__ == '__main__':
 
 ![basic-usage](https://raw.githubusercontent.com/plotly/dash-cytoscape/master/demos/images/basic-usage.gif)
 
-### Usage (R)
+### External layouts
+
+You can also add external layouts. Use the `cyto.load_extra_layouts()` function to get started:
+
+```python
+import dash
+import dash_cytoscape as cyto
+import dash_html_components as html
+
+cyto.load_extra_layouts()
+
+app = dash.Dash(__name__)
+app.layout = html.Div([
+    cyto.Cytoscape(...)
+])
+```
+
+Calling `cyto.load_extra_layouts()` also enables generating SVG images.
+
+
+## Getting Started in R
+
+### Prerequisites
+
+```R
+install.packages(c("devtools", "dash"))
+```
+### Usage
 
 Install the library using devtools:
 
@@ -100,23 +121,6 @@ app$layout(
 app$run_server()
 ```
 
-### External layouts
-
-You can also add external layouts. Use the `cyto.load_extra_layouts()` function to get started:
-
-```python
-import dash
-import dash_cytoscape as cyto
-import dash_html_components as html
-
-cyto.load_extra_layouts()
-
-app = dash.Dash(__name__)
-app.layout = html.Div([
-    cyto.Cytoscape(...)
-])
-```
-
 ## Documentation
 
 The [Dash Cytoscape User Guide](https://dash.plotly.com/cytoscape/) contains everything you need to know about the library. It contains useful examples, functioning code, and is fully interactive. You can also use the [component reference](https://dash.plotly.com/cytoscape/reference/) for a complete and concise specification of the API. 
@@ -127,7 +131,11 @@ For supplementary information about the underlying Javascript  API, view the [Cy
 
 ## Contributing
 
-Make sure that you have read and understood our [code of conduct](CODE_OF_CONDUCT.md), then head over to [CONTRIBUTING](CONTRIBUTING.md) to get started. 
+Make sure that you have read and understood our [code of conduct](CODE_OF_CONDUCT.md), then head over to [CONTRIBUTING](CONTRIBUTING.md) to get started.
+
+### Testing
+
+Instructions on how to run [tests](CONTRIBUTING.md#tests) are given in [CONTRIBUTING.md](CONTRIBUTING.md).
 
 ## License
 

dash_cytoscape/Cytoscape.py

@@ -12,8 +12,8 @@ class Cytoscape(Component):
 - id (string; optional): The ID used to identify this component in Dash callbacks.
 - className (string; optional): Sets the class name of the element (the value of an element's html
 class attribute).
-- style (dict; default {width: '600px', height: '600px'}): Add inline styles to the root element.
-- elements (list of dicts | dict; optional): A list of dictionaries representing the elements of the networks.
+- style (dict; optional): Add inline styles to the root element.
+- elements (list | dict; optional): A list of dictionaries representing the elements of the networks.
     1. Each dictionary describes an element, and specifies its purpose.
         - `group` (string): Either 'nodes' or 'edges'. If not given, it's automatically inferred.
         - `data` (dictionary): Element specific data.
@@ -33,7 +33,7 @@ class attribute).
 
     2. The [official Cytoscape.js documentation](http://js.cytoscape.org/#notation/elements-json) offers an extensive overview and examples of element declaration.
 Alternatively, a dictionary with the format { 'nodes': [], 'edges': [] } is allowed at initialization, but arrays remain the recommended format.
-- stylesheet (list of dicts; optional): A list of dictionaries representing the styles of the elements.
+- stylesheet (list; optional): A list of dictionaries representing the styles of the elements.
     1. Each dictionary requires the following keys:
         - `selector` (string): Which elements you are styling. Generally, you select a group of elements (node, edges, both), a class (that you declare in the element dictionary), or an element by ID.
         - `style` (dictionary): What aspects of the elements you want to modify. This could be the size or color of a node, the shape of an edge arrow, or many more.
@@ -43,7 +43,7 @@ class attribute).
     exhaustively documented in the Cytoscape.js docs. Although methods such
     as `cy.elements(...)` and `cy.filter(...)` are not available, the selector
     string syntax stays the same.
-- layout (dict; default {name: 'grid'}): A dictionary specifying how to set the position of the elements in your
+- layout (dict; optional): A dictionary specifying how to set the position of the elements in your
 graph. The `'name'` key is required, and indicates which layout (algorithm) to
 use.
     1. The layouts available by default are:
@@ -81,33 +81,33 @@ class attribute).
     Note that certain keys are not supported in Dash since the value is a
     JavaScript function or a callback. Please visit [this issue](https://github.com/plotly/dash-cytoscape/issues/25)
     for more information.
-- pan (dict; default {x: 0, y: 0}): Dictionary indicating the initial panning position of the graph. The
+- pan (dict; optional): Dictionary indicating the initial panning position of the graph. The
 following keys are accepted:
     - `x` (number): The x-coordinate of the position.
     - `y` (number): The y-coordinate of the position.
-- zoom (number; default 1): The initial zoom level of the graph. You can set `minZoom` and
+- zoom (number; optional): The initial zoom level of the graph. You can set `minZoom` and
 `maxZoom` to set restrictions on the zoom level.
-- panningEnabled (boolean; default True): Whether panning the graph is enabled (i.e., the position of the graph is
+- panningEnabled (boolean; optional): Whether panning the graph is enabled (i.e., the position of the graph is
 mutable overall).
-- userPanningEnabled (boolean; default True): Whether user events (e.g. dragging the graph background) are allowed to
+- userPanningEnabled (boolean; optional): Whether user events (e.g. dragging the graph background) are allowed to
 pan the graph.
-- minZoom (number; default 1e-50): A minimum bound on the zoom level of the graph. The viewport can not be
+- minZoom (number; optional): A minimum bound on the zoom level of the graph. The viewport can not be
 scaled smaller than this zoom level.
-- maxZoom (number; default 1e50): A maximum bound on the zoom level of the graph. The viewport can not be
+- maxZoom (number; optional): A maximum bound on the zoom level of the graph. The viewport can not be
 scaled larger than this zoom level.
-- zoomingEnabled (boolean; default True): Whether zooming the graph is enabled (i.e., the zoom level of the graph
+- zoomingEnabled (boolean; optional): Whether zooming the graph is enabled (i.e., the zoom level of the graph
 is mutable overall).
-- userZoomingEnabled (boolean; default True): Whether user events (e.g. dragging the graph background) are allowed
+- userZoomingEnabled (boolean; optional): Whether user events (e.g. dragging the graph background) are allowed
 to pan the graph.
-- boxSelectionEnabled (boolean; default False): Whether box selection (i.e. drag a box overlay around, and release it
+- boxSelectionEnabled (boolean; optional): Whether box selection (i.e. drag a box overlay around, and release it
 to select) is enabled. If enabled, the user must taphold to pan the graph.
-- autoungrabify (boolean; default False): Whether nodes should be ungrabified (not grabbable by user) by
+- autoungrabify (boolean; optional): Whether nodes should be ungrabified (not grabbable by user) by
 default (if true, overrides individual node state).
-- autolock (boolean; default False): Whether nodes should be locked (not draggable at all) by default
+- autolock (boolean; optional): Whether nodes should be locked (not draggable at all) by default
 (if true, overrides individual node state).
-- autounselectify (boolean; default False): Whether nodes should be unselectified (immutable selection state) by
+- autounselectify (boolean; optional): Whether nodes should be unselectified (immutable selection state) by
 default (if true, overrides individual element state).
-- autoRefreshLayout (boolean; default True): Whether the layout should be refreshed when elements are added or removed.
+- autoRefreshLayout (boolean; optional): Whether the layout should be refreshed when elements are added or removed.
 - tapNode (dict; optional): The complete node dictionary returned when you tap or click it. Read-only.
 
     1. Node-specific items:
@@ -189,7 +189,7 @@ class attribute).
 `'store'` to improve performance by preventing transfer of data to the server.
 - imageData (string; optional): String representation of the image requested with generateImage. Null if no
 image was requested yet or the previous request failed. Read-only.
-- responsive (boolean; default False): Toggles intelligent responsive resize of Cytoscape graph with viewport size change"""
+- responsive (boolean; optional): Toggles intelligent responsive resize of Cytoscape graph with viewport size change"""
     @_explicitize_args
     def __init__(self, id=Component.UNDEFINED, className=Component.UNDEFINED, style=Component.UNDEFINED, elements=Component.UNDEFINED, stylesheet=Component.UNDEFINED, layout=Component.UNDEFINED, pan=Component.UNDEFINED, zoom=Component.UNDEFINED, panningEnabled=Component.UNDEFINED, userPanningEnabled=Component.UNDEFINED, minZoom=Component.UNDEFINED, maxZoom=Component.UNDEFINED, zoomingEnabled=Component.UNDEFINED, userZoomingEnabled=Component.UNDEFINED, boxSelectionEnabled=Component.UNDEFINED, autoungrabify=Component.UNDEFINED, autolock=Component.UNDEFINED, autounselectify=Component.UNDEFINED, autoRefreshLayout=Component.UNDEFINED, tapNode=Component.UNDEFINED, tapNodeData=Component.UNDEFINED, tapEdge=Component.UNDEFINED, tapEdgeData=Component.UNDEFINED, mouseoverNodeData=Component.UNDEFINED, mouseoverEdgeData=Component.UNDEFINED, selectedNodeData=Component.UNDEFINED, selectedEdgeData=Component.UNDEFINED, generateImage=Component.UNDEFINED, imageData=Component.UNDEFINED, responsive=Component.UNDEFINED, **kwargs):
         self._prop_names = ['id', 'className', 'style', 'elements', 'stylesheet', 'layout', 'pan', 'zoom', 'panningEnabled', 'userPanningEnabled', 'minZoom', 'maxZoom', 'zoomingEnabled', 'userZoomingEnabled', 'boxSelectionEnabled', 'autoungrabify', 'autolock', 'autounselectify', 'autoRefreshLayout', 'tapNode', 'tapNodeData', 'tapEdge', 'tapEdgeData', 'mouseoverNodeData', 'mouseoverEdgeData', 'selectedNodeData', 'selectedEdgeData', 'generateImage', 'imageData', 'responsive']

dash_cytoscape/package.json

@@ -41,7 +41,7 @@
     "lodash": "^4.17.11",
     "ramda": "^0.25.0",
     "react": "15.4.2",
-    "react-cytoscapejs": "1.1.0",
+    "react-cytoscapejs": "1.2.1",
     "react-dom": "15.4.2"
   },
   "devDependencies": {