Explicitly set Cytoscape's elements default values, fix interactions test

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 | 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.
@@ -32,7 +32,8 @@ 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.
+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.
     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 +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; 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 +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; 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:
@@ -188,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; optional): Toggles intelligent responsive resize of Cytoscape graph with viewport size change"""
+- responsive (boolean; default False): 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/metadata.json

@@ -115,13 +115,25 @@
       },
       "elements": {
         "type": {
-          "name": "arrayOf",
-          "value": {
-            "name": "object"
-          }
+          "name": "union",
+          "value": [
+            {
+              "name": "arrayOf",
+              "value": {
+                "name": "object"
+              }
+            },
+            {
+              "name": "object"
+            }
+          ]
         },
         "required": false,
-        "description": "A list of dictionaries representing the elements of the networks.\n    1. Each dictionary describes an element, and specifies its purpose.\n        - `group` (string): Either 'nodes' or 'edges'. If not given, it's automatically inferred.\n        - `data` (dictionary): Element specific data.\n             - `id` (string): Reference to the element, useful for selectors and edges. Randomly assigned if not given.\n             - `label` (string): Optional name for the element, useful when `data(label)` is given to a style's `content` or `label`. It is only a convention.\n             - `parent` (string): Only for nodes. Optional reference to another node. Needed to create compound nodes.\n             - `source` (string): Only for edges. The id of the source node, which is where the edge starts.\n             - `target` (string): Only for edges. The id of the target node, where the edge ends.\n        - `position` (dictionary): Only for nodes. The position of the node.\n             - `x` (number): The x-coordinate of the node.\n             - `y` (number): The y-coordinate of the node.\n        - `selected` (boolean): If the element is selected upon initialisation.\n        - `selectable` (boolean): If the element can be selected.\n        - `locked` (boolean): Only for nodes. If the position is immutable.\n        - `grabbable` (boolean): Only for nodes. If the node can be grabbed and moved by the user.\n        - `classes` (string): Space separated string of class names of the element. Those classes can be selected by a style selector.\n\n    2. The [official Cytoscape.js documentation](http://js.cytoscape.org/#notation/elements-json) offers an extensive overview and examples of element declaration."
+        "description": "A list of dictionaries representing the elements of the networks.\n    1. Each dictionary describes an element, and specifies its purpose.\n        - `group` (string): Either 'nodes' or 'edges'. If not given, it's automatically inferred.\n        - `data` (dictionary): Element specific data.\n             - `id` (string): Reference to the element, useful for selectors and edges. Randomly assigned if not given.\n             - `label` (string): Optional name for the element, useful when `data(label)` is given to a style's `content` or `label`. It is only a convention.\n             - `parent` (string): Only for nodes. Optional reference to another node. Needed to create compound nodes.\n             - `source` (string): Only for edges. The id of the source node, which is where the edge starts.\n             - `target` (string): Only for edges. The id of the target node, where the edge ends.\n        - `position` (dictionary): Only for nodes. The position of the node.\n             - `x` (number): The x-coordinate of the node.\n             - `y` (number): The y-coordinate of the node.\n        - `selected` (boolean): If the element is selected upon initialisation.\n        - `selectable` (boolean): If the element can be selected.\n        - `locked` (boolean): Only for nodes. If the position is immutable.\n        - `grabbable` (boolean): Only for nodes. If the node can be grabbed and moved by the user.\n        - `classes` (string): Space separated string of class names of the element. Those classes can be selected by a style selector.\n\n    2. The [official Cytoscape.js documentation](http://js.cytoscape.org/#notation/elements-json) offers an extensive overview and examples of element declaration.\nAlternatively, a dictionary with the format { 'nodes': [], 'edges': [] } is allowed at initialization, but arrays remain the recommended format.",
+        "defaultValue": {
+          "value": "[]",
+          "computed": false
+        }
       },
       "stylesheet": {
         "type": {

src/lib/components/Cytoscape.react.js

@@ -530,8 +530,9 @@ Cytoscape.propTypes = {
      *         - `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.
+     * Alternatively, a dictionary with the format { 'nodes': [], 'edges': [] } is allowed at initialization, but arrays remain the recommended format.
      */
-    elements: PropTypes.arrayOf(PropTypes.object),
+    elements: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 
     /**
      * A list of dictionaries representing the styles of the elements.
@@ -818,7 +819,8 @@ Cytoscape.defaultProps = {
     autoRefreshLayout: true,
     generateImage: {},
     imageData: null,
-    responsive: false
+    responsive: false,
+    elements: []
 };
 
 export default Cytoscape;

tests/test_interactions.py

@@ -38,16 +38,14 @@ def test_interactions(self):
         click_error = "Unable to click Cytoscape nodes properly"
         mouseover_error = "Unable to mouseover Cytoscape nodes properly"
 
-        y_offset = 60
-
         # View module docstring for more information about initial positions
         init_pos = {
-            'Node 1': (62, 321 - y_offset),
-            'Node 2': (369, 628 - y_offset),
-            'Node 3': (267, 510 - 20 - y_offset),
-            'Node 4': (778, 321 - y_offset),
-            'Node 5': (471, 423 - y_offset),
-            'Node 6': (267, 526 - y_offset)
+            'Node 1': (59, 204),
+            'Node 2': (227, 373),
+            'Node 3': (171, 308 - 20),
+            'Node 4': (451, 204),
+            'Node 5': (283, 261),
+            'Node 6': (171, 308)
         }
         init_x, init_y = init_pos['Node 1']
 

usage-events.py

@@ -120,8 +120,8 @@
                 'name': 'preset'
             },
             style={
-                'height': '95vh',
-                'width': '100%'
+                'height': '500px',
+                'width': '500px'
             }
         )
     ]),
@@ -187,8 +187,9 @@
                 ])
             ])
         ]),
+    ]),
 
-    ])
+    html.Div(id='placeholder')
 ])