Adding option to load external layouts (#46)

* 🚫  Update Gitignore

* 📦 Add external layouts to package.json

Also update yarn.lock

* 🆕 Create extra_index.js to load external layouts

Update Cytoscape.react.js description as well

* Add new webpack configs + update build scripts

* 🚧 `npm run build:all`

* 🆕 Add `load_extra_layouts()` to dash_cytoscape

This function lets the user load the extra layouts by changing the global _js_dist

* 🆕 Create demos for new features

* 📷 Images for external layouts

* Update requirements.txt

* Update CHANGELOG.md

* Flake 8 on new demos

* Add docstring to load_extra_layouts()

Author: Xing

.gitignore

@@ -301,3 +301,5 @@ temp.py# Sublime-github package stores a github token in this file
 # https://packagecontrol.io/packages/sublime-github
 GitHub.sublime-settings
 temp.py
+test.py
+tests/selenium_scripting.py

CHANGELOG.md

@@ -6,6 +6,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### 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`.
+* `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.
+
+### Changed
+* `src/lib/components/Cytoscape.react.js`: Updated description to include information about new external layouts.
+* `package.json`: Added new builds for the extra layouts, modified `npm build:all` to include new builds. Added external layouts as dependencies.
+
 ## [0.0.5] - 2019-03-08
 
 ### Added

dash_cytoscape/Cytoscape.py

@@ -54,16 +54,26 @@ class attribute).
         - `breadthfirst`: Tree structure built using BFS, with optional `roots`
         - `cose`: Force-directed physics simulation
 
-    2. The keys accepted by `layout` vary depending on the algorithm, but some
+    2. The following external layouts are also included:
+        - `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
+        - `spread`: https://github.com/cytoscape/cytoscape.js-spread
+        - `dagre`: https://github.com/cytoscape/cytoscape.js-dagre
+        - `klay`: https://github.com/cytoscape/cytoscape.js-klay
+
+    3. The keys accepted by `layout` vary depending on the algorithm, but some
     keys are accepted by all layouts:
         - `fit` (boolean): Whether to render the nodes in order to fit the canvas.
         - `padding` (number): Padding around the sides of the canvas, if fit is enabled.
         - `animate` (boolean): Whether to animate change in position when the layout changes.
         - `animationDuration` (number): Duration of animation in milliseconds, if enabled.
         - `boundingBox` (dictionary): How to constrain the layout in a specific area. Keys accepted are either `x1, y1, x2, y2` or `x1, y1, w, h`, all of which receive a pixel value.
 
-    3. The complete list of layouts and their accepted options are available
-    on the [Cytoscape.js docs](http://js.cytoscape.org/#layouts).
+    4. The complete list of layouts and their accepted options are available
+    on the [Cytoscape.js docs](http://js.cytoscape.org/#layouts). For the
+    external layouts, the options are listed in the "API" section of the
+    README.
     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.
@@ -151,16 +161,13 @@ class attribute).
 - 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).
 - 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).
-
-Available events: """
+Shift+Click to select multiple nodes, or Shift+Drag to use box selection)."""
     @_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']
         self._type = 'Cytoscape'
         self._namespace = 'dash_cytoscape'
         self._valid_wildcard_attributes =            []
-        self.available_events = []
         self.available_properties = ['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']
         self.available_wildcard_properties =            []
 
@@ -174,26 +181,3 @@ def __init__(self, id=Component.UNDEFINED, className=Component.UNDEFINED, style=
                 raise TypeError(
                     'Required argument `' + k + '` was not specified.')
         super(Cytoscape, self).__init__(**args)
-
-    def __repr__(self):
-        if(any(getattr(self, c, None) is not None
-               for c in self._prop_names
-               if c is not self._prop_names[0])
-           or any(getattr(self, c, None) is not None
-                  for c in self.__dict__.keys()
-                  if any(c.startswith(wc_attr)
-                  for wc_attr in self._valid_wildcard_attributes))):
-            props_string = ', '.join([c+'='+repr(getattr(self, c, None))
-                                      for c in self._prop_names
-                                      if getattr(self, c, None) is not None])
-            wilds_string = ', '.join([c+'='+repr(getattr(self, c, None))
-                                      for c in self.__dict__.keys()
-                                      if any([c.startswith(wc_attr)
-                                      for wc_attr in
-                                      self._valid_wildcard_attributes])])
-            return ('Cytoscape(' + props_string +
-                   (', ' + wilds_string if wilds_string != '' else '') + ')')
-        else:
-            return (
-                'Cytoscape(' +
-                repr(getattr(self, self._prop_names[0], None)) + ')')

dash_cytoscape/__init__.py

@@ -10,6 +10,7 @@
 from ._imports_ import *
 from ._imports_ import __all__
 
+
 if not hasattr(_dash, 'development'):
     print('Dash was not successfully imported. '
           'Make sure you don\'t have a file '
@@ -45,3 +46,47 @@
 for _component in __all__:
     setattr(locals()[_component], '_js_dist', _js_dist)
     setattr(locals()[_component], '_css_dist', _css_dist)
+
+
+def load_extra_layouts():
+    """
+    Load 3rd party layouts that are not included by default with Cytoscape. You can find the
+    documentation about those layouts here:
+        - `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
+        - `spread`: https://github.com/cytoscape/cytoscape.js-spread
+        - `dagre`: https://github.com/cytoscape/cytoscape.js-dagre
+        - `klay`: https://github.com/cytoscape/cytoscape.js-klay
+
+    Example:
+
+    ```
+    import dash
+    import dash_html_components as html
+    import dash_cytoscape as cyto
+
+    cyto.load_extra_layouts()
+
+    app = dash.Dash(__name__)
+
+    app.layout = html.Div([
+        cyto.Cytoscape(...),
+    ])
+    ```
+
+    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.
+    """
+    global _js_dist
+
+    _js_dist = [
+        {
+            'relative_package_path': 'dash_cytoscape_extra.min.js',
+            'dev_package_path': 'dash_cytoscape_extra.dev.js',
+            'external_url': 'https://unpkg.com/dash-cytoscape@{}/{}/{}.min.js'.format(
+                __version__, __name__, 'dash_cytoscape_extra'
+            ),
+            'namespace': package_name
+        }
+    ]