Responsive graph merge (#92)

* Add prop to enable responsive resize of the cytoscape graph

* Add compensation to handle changing unconstrained dimension during constrained zoom

* Improve function and variable names

* Reset viewport dimensions on toggle on

* Add responsive graph demo

* Add responsive graph demo to tests

* Pull data for responsive graph demo from cytoscapejs rather than local

* Lint responsive graph code

* Updated CHANGELOG.md

* Update README for responsive feature

* Moved cytoscape responsive file to avoid docgen error

* Fix formatting errors

* Build

* Reacquire initial positions and add y offset

* Remove package-lock.json

Author: Manfred Cheung

CHANGELOG.md

@@ -13,6 +13,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 * 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.
+* One new demo:
+    * `demos/usage-responsive-graph.py`: Example of graph with the ability to toggle the responsive feature on and off.
 
 ### Changed
 * `utils.Tree`: v0.1.1 broke compatibility with Python 2. Therefore, modified code to be compatible

README.md

@@ -174,4 +174,8 @@ The Pull Request and Issue Templates were inspired from the
 [Code](demos/usage-image-export.py)
 ![View usage-image-export on Github](demos/images/usage-image-export.gif)
 
+### Make graph responsive
+[Code](demos/usage-responsive-graph.py)
+![View usage-responsive-graph on Github](demos/images/usage-responsive-graph.gif)
+
 For an extended gallery, visit the [demos' readme](demos/README.md).

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; optional): A list of dictionaries representing the elements of the networks.
+- style (dict; optional): Add inline styles to the root element.
+- elements (list; 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 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.
@@ -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; 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:
@@ -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; 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:
@@ -187,14 +187,15 @@ class attribute).
 the image, it may be prudent to invoke `'download'` for `action` instead of
 `'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."""
+image was requested yet or the previous request failed. Read-only.
+- 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, **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']
+    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']
         self._type = 'Cytoscape'
         self._namespace = 'dash_cytoscape'
         self._valid_wildcard_attributes =            []
-        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', 'generateImage', 'imageData']
+        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', 'generateImage', 'imageData', 'responsive']
         self.available_wildcard_properties =            []
 
         _explicit_args = kwargs.pop('_explicit_args')

dash_cytoscape/dash_cytoscape.dev.js

@@ -364,6 +364,17 @@
           "value": "null",
           "computed": false
         }
+      },
+      "responsive": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "Toggles intelligent responsive resize of Cytoscape graph with viewport size change",
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        }
       }
     }
   }

dash_cytoscape/dash_cytoscape.min.js

@@ -0,0 +1,98 @@
+"""
+Original Demo: http://js.cytoscape.org/demos/cose-layout/
+
+Note: This implementation looks different from the original implementation,
+although the input paramters are exactly the same.
+"""
+import urllib.request
+import json
+
+import dash
+from dash.dependencies import Input, Output
+import dash_html_components as html
+
+import dash_cytoscape as cyto
+
+app = dash.Dash(__name__)
+server = app.server
+
+app.scripts.config.serve_locally = True
+app.css.config.serve_locally = True
+
+# Load Data
+with urllib.request.urlopen('https://js.cytoscape.org/demos/colajs-graph/data.json') as url:
+    elements = json.loads(url.read().decode())
+
+with urllib.request.urlopen('https://js.cytoscape.org/demos/colajs-graph/cy-style.json') as url:
+    stylesheet = json.loads(url.read().decode())
+
+styles = {
+    'container': {
+        'position': 'fixed',
+        'display': 'flex',
+        'flex-direction': 'column',
+        'height': '100%',
+        'width': '100%'
+    },
+    'cy-container': {
+        'flex': '1',
+        'position': 'relative'
+    },
+    'cytoscape': {
+        'position': 'absolute',
+        'width': '100%',
+        'height': '100%',
+        'z-index': 999
+    }
+}
+
+# App
+app.layout = html.Div(style=styles['container'], children=[
+    html.Div([
+        html.Button("Responsive Toggle", id='toggle-button'),
+        html.Div(id='toggle-text')
+    ]),
+    html.Div(className='cy-container', style=styles['cy-container'], children=[
+        cyto.Cytoscape(
+            id='cytoscape',
+            elements=elements,
+            stylesheet=stylesheet,
+            style=styles['cytoscape'],
+            layout={
+                'name': 'cose',
+                'idealEdgeLength': 100,
+                'nodeOverlap': 20,
+                'refresh': 20,
+                'fit': True,
+                'padding': 30,
+                'randomize': False,
+                'componentSpacing': 100,
+                'nodeRepulsion': 400000,
+                'edgeElasticity': 100,
+                'nestingFactor': 5,
+                'gravity': 80,
+                'numIter': 1000,
+                'initialTemp': 200,
+                'coolingFactor': 0.95,
+                'minTemp': 1.0
+            },
+            responsive=True
+        )
+    ])
+])
+
+
+@app.callback(Output('cytoscape', 'responsive'), [Input('toggle-button', 'n_clicks')])
+def toggle_responsive(n_clicks):
+    n_clicks = 2 if n_clicks is None else n_clicks
+    toggle_on = n_clicks % 2 == 0
+    return toggle_on
+
+
+@app.callback(Output('toggle-text', 'children'), [Input('cytoscape', 'responsive')])
+def update_toggle_text(responsive):
+    return '\t' + 'Responsive ' + ('On' if responsive else 'Off')
+
+
+if __name__ == '__main__':
+    app.run_server(debug=True)