Async component / IE11 compatibility

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2
 jobs:
     "node":
         docker:
-            - image: circleci/node:8.11.3
+            - image: circleci/node:10
 
         steps:
             - checkout
@@ -13,7 +13,7 @@ jobs:
 
             - run:
                 name: Install package.json
-                command: npm i
+                command: npm ci
 
             - save_cache:
                 key: deps1-{{ .Branch }}-{{ checksum "package.json" }}

.pylintrc

@@ -144,7 +144,8 @@ disable=print-statement,
         duplicate-code,
         too-many-function-args,
         attribute-defined-outside-init,
-        broad-except
+        broad-except,
+        W0612
 
 # Enable the message, report, category or checker with the given id(s). You can
 # either give multiple identifier separated by comma (,) or put this option

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
+* [#75](https://github.com/plotly/dash-cytoscape/pull/75) Async cytoscape component
 * Contributed initial build of R package.
 
 ### Changed
@@ -102,7 +103,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 into a Cytoscape graph, with interactive features such as highlighting.
 
 ### Updated
-* React-Cytoscapejs version, from 1.0.1 to 1.1.0 
+* React-Cytoscapejs version, from 1.0.1 to 1.1.0
 
 ## [0.0.2] - 2018-11-08
 ### Added

MANIFEST.in

@@ -1,7 +1,7 @@
 include dash_cytoscape/dash_cytoscape.min.js
-include dash_cytoscape/dash_cytoscape.dev.js
 include dash_cytoscape/dash_cytoscape_extra.min.js
-include dash_cytoscape/dash_cytoscape_extra.dev.js
+include dash_cytoscape/async~*.js
+include dash_cytoscape/async_extra~*.js
 include dash_cytoscape/metadata.json
 include dash_cytoscape/package.json
 include dash_cytoscape/utils

babel.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/react'
+  ],
+  plugins: [
+    '@babel/plugin-syntax-dynamic-import'
+  ]
+};

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; optional): Add inline styles to the root element.
-- elements (list; optional): A list of dictionaries representing the elements of the networks.
+- style (dict; default { width: '600px', height: '600px' }): Add inline styles to the root element.
+- elements (list of dicts; 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.
@@ -32,7 +32,7 @@ class attribute).
         - `classes` (string): Space separated string of class names of the element. Those classes can be selected by a style selector.
 
     2. The [official Cytoscape.js documentation](http://js.cytoscape.org/#notation/elements-json) offers an extensive overview and examples of element declaration.
-- stylesheet (list; optional): A list of dictionaries representing the styles of the elements.
+- stylesheet (list of dicts; 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.
@@ -42,7 +42,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; optional): A dictionary specifying how to set the position of the elements in your
+- layout (dict; default { name: 'grid' }): 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:
@@ -80,33 +80,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; optional): Dictionary indicating the initial panning position of the graph. The
+- pan (dict; default { x: 0, y: 0 }): 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; optional): The initial zoom level of the graph. You can set `minZoom` and
+- zoom (number; default 1): The initial zoom level of the graph. You can set `minZoom` and
 `maxZoom` to set restrictions on the zoom level.
-- panningEnabled (boolean; optional): Whether panning the graph is enabled (i.e., the position of the graph is
+- panningEnabled (boolean; default True): Whether panning the graph is enabled (i.e., the position of the graph is
 mutable overall).
-- userPanningEnabled (boolean; optional): Whether user events (e.g. dragging the graph background) are allowed to
+- userPanningEnabled (boolean; default True): Whether user events (e.g. dragging the graph background) are allowed to
 pan the graph.
-- minZoom (number; optional): A minimum bound on the zoom level of the graph. The viewport can not be
+- minZoom (number; default 1e-50): A minimum bound on the zoom level of the graph. The viewport can not be
 scaled smaller than this zoom level.
-- maxZoom (number; optional): A maximum bound on the zoom level of the graph. The viewport can not be
+- maxZoom (number; default 1e50): A maximum bound on the zoom level of the graph. The viewport can not be
 scaled larger than this zoom level.
-- zoomingEnabled (boolean; optional): Whether zooming the graph is enabled (i.e., the zoom level of the graph
+- zoomingEnabled (boolean; default True): Whether zooming the graph is enabled (i.e., the zoom level of the graph
 is mutable overall).
-- userZoomingEnabled (boolean; optional): Whether user events (e.g. dragging the graph background) are allowed
+- userZoomingEnabled (boolean; default True): Whether user events (e.g. dragging the graph background) are allowed
 to pan the graph.
-- boxSelectionEnabled (boolean; optional): Whether box selection (i.e. drag a box overlay around, and release it
+- boxSelectionEnabled (boolean; default False): 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; optional): Whether nodes should be ungrabified (not grabbable by user) by
+- autoungrabify (boolean; default False): Whether nodes should be ungrabified (not grabbable by user) by
 default (if true, overrides individual node state).
-- autolock (boolean; optional): Whether nodes should be locked (not draggable at all) by default
+- autolock (boolean; default False): Whether nodes should be locked (not draggable at all) by default
 (if true, overrides individual node state).
-- autounselectify (boolean; optional): Whether nodes should be unselectified (immutable selection state) by
+- autounselectify (boolean; default False): 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.
+- autoRefreshLayout (boolean; default True): 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:

dash_cytoscape/__init__.py

@@ -30,16 +30,30 @@
 
 _this_module = _sys.modules[__name__]
 
+async_resources = [
+    'cytoscape'
+]
+
+_js_dist = []
 
-_js_dist = [
+_js_dist.extend([{
+        'relative_package_path': 'async~{}.js'.format(async_resource),
+        'external_url': (
+            'https://unpkg.com/dash-cytoscape@{}'
+            '/dash_cytoscape/async~{}.js'
+        ).format(__version__, async_resource),
+        'namespace': 'dash_cytoscape',
+        'async': True
+    } for async_resource in async_resources])
+
+_js_dist.extend([
     {
         'relative_package_path': 'dash_cytoscape.min.js',
-        'dev_package_path': 'dash_cytoscape.dev.js',
         'external_url': 'https://unpkg.com/dash-cytoscape@{2}/{1}/{1}.min.js'.format(
             package_name, __name__, __version__),
         'namespace': package_name
     }
-]
+])
 
 _css_dist = []
 
@@ -81,16 +95,27 @@ def load_extra_layouts():
     """
     global _js_dist
 
-    _js_dist = [
+    _js_dist = []
+
+    _js_dist.extend([{
+            'relative_package_path': 'async_extra~{}.js'.format(async_resource),
+            'external_url': (
+                'https://unpkg.com/dash-cytoscape@{}'
+                '/dash_cytoscape/async_extra~{}.js'
+            ).format(__version__, async_resource),
+            'namespace': 'dash_cytoscape',
+            'async': True
+        } for async_resource in async_resources])
+
+    _js_dist.extend([
         {
             '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
         }
-    ]
+    ])
 
 
 def _display_default_values():