Add 2 new demos, reoganize README, update Cytoscape wrapper default values and docstring (#47)

* Added new demos for using preset animations and reset button

* Update usage-events to have ids for edges

* Reorganize README + more images

* Cytoscape.react.js: Added default values, updated docstring, added normalize feature

* Added util function to display the default value by reading metadata

* `npm run build:all`

* Update CHANGELOG.md

* Apply suggestions from code review

Co-Authored-By: xhlulu <[email protected]>

* Updated based on PR feedback

* Fixed variable name

Author: Xing

CHANGELOG.md

@@ -9,15 +9,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 * `demos/usage-dag-edges.py`: Show different types of edges in a DAG
 * `demos/usage-elements-extra.py`: Shows how to load external layouts, otherwise same app as `usage-elements.py`.
+* `demos/usage-preset-animation.py`: Example of animating nodes using the preset layout.
+* `demos/usage-reset-button.py`: Example of resetting the graph position using a button.
 * `dash_cytoscape.load_extra_layouts()`: A new function that can be called before initializing the Dash app (`app = dash.Dash(__name__)`) to load the JS bundle containing the external layouts. 
 * `webpack.[dev|prod].extra.config.js`: Two new webpack configs for external layouts.
 * `src/lib/extra_index.js`: Loads external layouts before exporting the `Cytoscape` class. Needed to generate the new bundles.
 * Images of new external layouts.
 * `dash_cytoscape/dash_cytoscape_extra.[min|dev].js`: New bundles containing the extra layouts. Those bundles are double in size compared to the default bundles. Therefore, they are only loaded when the user uses `load_extra_layouts()` to limit bandwidth usage and maximize loading speed. Please view [fast3g-cytoscape](demos/images/fast3g-cytoscape.PNG) for an example of the impact on loading time.
+* `dash_cytoscape._display_default_values()`: A util function to display the default prop values by reading `metadata.json`. Useful for documentation.
 
 ### Changed
-* `src/lib/components/Cytoscape.react.js`: Updated description to include information about new external layouts.
+* `usage-events.py`: Added IDs for the edges in order to pass Percy tests.
+* `src/lib/components/Cytoscape.react.js`: Updated docstring to include information about new external layouts and warning about nodes that can't be modified by a callback. Added more default props for a better expected behavior.
 * `package.json`: Added new builds for the extra layouts, modified `npm build:all` to include new builds. Added external layouts as dependencies.
+* `README.md`: Moved images, added more images at the end, added useful links.
+
 
 ## [0.0.5] - 2019-03-08
 

README.md

@@ -1,12 +1,15 @@
 # Dash Cytoscape [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/plotly/dash-cytoscape/blob/master/LICENSE) [![PyPi Version](https://img.shields.io/pypi/v/dash-cytoscape.svg)](https://pypi.org/project/dash-cytoscape/)
 
-A Component Library for Dash aimed at facilitating network visualization in Python, wrapped around [Cytoscape.js](http://js.cytoscape.org/).
+A Dash component library for creating interactive and customizable networks in Python, wrapped around [Cytoscape.js](http://js.cytoscape.org/).
 
-Interacting with the stylesheet:
 ![usage-stylesheet-demo](https://raw.githubusercontent.com/plotly/dash-cytoscape/master/demos/images/usage-stylesheet-demo.gif)
 
-Interacting with the elements:
-![usage-elements-demo](https://raw.githubusercontent.com/plotly/dash-cytoscape/master/demos/images/usage-elements-demo.gif)
+* 🌟 [Medium Article](https://medium.com/@plotlygraphs/introducing-dash-cytoscape-ce96cac824e4)
+* 📣 [Community Announcement](https://community.plot.ly/t/announcing-dash-cytoscape/19095)
+* 💻 [Github Repository](https://github.com/plotly/dash-cytoscape) 
+* 📚 [User Guide](https://dash.plot.ly/cytoscape) 
+* 🗺 [Component Reference](https://dash.plot.ly/cytoscape/reference)
+* 📺 [Webinar Recording](https://www.youtube.com/watch?v=snXcIsCMQgk)
 
 ## Getting Started
 
@@ -52,16 +55,34 @@ if __name__ == '__main__':
     app.run_server(debug=True)
 ```
 
+![basic-usage](https://raw.githubusercontent.com/plotly/dash-cytoscape/master/demos/images/basic-usage.gif)
+
+### 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
 
-View the [Dash Cytoscape User Guide](https://dash.plot.ly/cytoscape/) to get started now. You can also use the [component reference](https://dash.plot.ly/cytoscape/reference/) to find how to use a certain feature.
+The [Dash Cytoscape User Guide](https://dash.plot.ly/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.plot.ly/cytoscape/reference/) for a complete and concise specification of the API. 
 
 To learn more about the core Dash components and how to use callbacks, view the [Dash documentation](https://dash.plot.ly/).
 
 For supplementary information about the underlying Javascript  API, view the [Cytoscape.js documentation](http://js.cytoscape.org/).
 
-### Development and Contributions
+## 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. 
 
@@ -79,3 +100,11 @@ Huge thanks to the Cytoscape Consortium and the Cytoscape.js team for their cont
 
 The Pull Request and Issue Templates were inspired from the
 [scikit-learn project](https://github.com/scikit-learn/scikit-learn).
+
+## Gallery
+
+Interacting with the [elements](usage-elements.py):
+![usage-elements-demo](demos/images/usage-elements-demo.gif)
+
+Using [external layouts](demos/usage-elements-extra.py):
+![usage-elements-extra](demos/images/usage-elements-extra.gif)

dash_cytoscape/Cytoscape.py

@@ -54,7 +54,10 @@ class attribute).
         - `breadthfirst`: Tree structure built using BFS, with optional `roots`
         - `cose`: Force-directed physics simulation
 
-    2. The following external layouts are also included:
+    2. Some external layouts are also included. To use them, run
+    `dash_cytoscape.load_extra_layouts()` before creating your Dash app. Be careful about
+    using the extra layouts when not necessary, since they require supplementary bandwidth
+    for loading, which impacts the startup time of the app.
         - `cose-bilkent`: https://github.com/cytoscape/cytoscape.js-cose-bilkent
         - `cola`: https://github.com/cytoscape/cytoscape.js-cola
         - `euler`: https://github.com/cytoscape/cytoscape.js-dagre
@@ -104,7 +107,7 @@ class attribute).
 - autounselectify (boolean; optional): Whether nodes should be unselectified (immutable selection state) by
 default (if true, overrides individual element state).
 - 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.
+- tapNode (dict; optional): The complete node dictionary returned when you tap or click it. Read-only.
 
     1. Node-specific items:
         - `edgesData` (dictionary)
@@ -133,8 +136,8 @@ class attribute).
         - `isChild` (boolean)
         - `isOrphan` (boolean)
         - `relativePosition` (dictionary)
-- tapNodeData (dict; optional): The data dictionary of a node returned when you tap or click it.
-- tapEdge (dict; optional): The complete edge dictionary returned when you tap or click it.
+- tapNodeData (dict; optional): The data dictionary of a node returned when you tap or click it. Read-only.
+- tapEdge (dict; optional): The complete edge dictionary returned when you tap or click it. Read-only.
 
     1. Edge-specific items:
         - `isLoop` (boolean)
@@ -155,13 +158,13 @@ class attribute).
         - `selectable` (boolean)
         - `selected` (boolean)
         - `style` (dictionary)
-- tapEdgeData (dict; optional): The data dictionary of an edge returned when you tap or click it.
-- mouseoverNodeData (dict; optional): The data dictionary of a node returned when you hover over it.
-- mouseoverEdgeData (dict; optional): The data dictionary of an edge returned when you hover over it.
+- tapEdgeData (dict; optional): The data dictionary of an edge returned when you tap or click it. Read-only.
+- mouseoverNodeData (dict; optional): The data dictionary of a node returned when you hover over it. Read-only.
+- mouseoverEdgeData (dict; optional): The data dictionary of an edge returned when you hover over it. Read-only.
 - selectedNodeData (list; optional): The list of data dictionaries of all selected nodes (e.g. using
-Shift+Click to select multiple nodes, or Shift+Drag to use box selection).
+Shift+Click to select multiple nodes, or Shift+Drag to use box selection). Read-only.
 - selectedEdgeData (list; optional): The list of data dictionaries of all selected edges (e.g. using
-Shift+Click to select multiple nodes, or Shift+Drag to use box selection)."""
+Shift+Click to select multiple nodes, or Shift+Drag to use box selection). Read-only."""
     @_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, **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']

dash_cytoscape/__init__.py

@@ -90,3 +90,32 @@ def load_extra_layouts():
             'namespace': package_name
         }
     ]
+
+
+def _display_default_values():
+    out_string = ""
+
+    metadata_path = _os.path.join(
+        _os.path.dirname(_os.path.realpath(__file__)),
+        'metadata.json'
+    )
+
+    with open(metadata_path, 'r') as file:
+        data = json.loads(file.read())
+
+    for component in data:
+        component_name = component.replace('src/lib/components/', '').replace('.react.js', '')
+        metadata = data[component]
+        props = metadata['props']
+
+        out_string += "## {} Default Values\n\n".format(component_name)
+
+        for prop_name in props:
+            prop = props[prop_name]
+
+            if 'defaultValue' in prop:
+                default = prop['defaultValue']['value']
+
+                out_string += "* *{}*: {}\n".format(prop_name, default)
+
+    return out_string