Skip to content

Commit c598d9b

Browse files
author
Xing
authored
Explicitly set Cytoscape's elements default values, fix interactions test (#96)
* Set elements default to {}, yarn build * elements default changed { } -> [ ], update proptypes * Fix Interaction tests and update usage-events
1 parent b0532b4 commit c598d9b

File tree

10 files changed

+162
-1004
lines changed

10 files changed

+162
-1004
lines changed

dash_cytoscape/Cytoscape.py

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ class Cytoscape(Component):
1212
- id (string; optional): The ID used to identify this component in Dash callbacks.
1313
- className (string; optional): Sets the class name of the element (the value of an element's html
1414
class attribute).
15-
- style (dict; optional): Add inline styles to the root element.
16-
- elements (list; optional): A list of dictionaries representing the elements of the networks.
15+
- style (dict; default {width: '600px', height: '600px'}): Add inline styles to the root element.
16+
- elements (list of dicts | dict; optional): A list of dictionaries representing the elements of the networks.
1717
1. Each dictionary describes an element, and specifies its purpose.
1818
- `group` (string): Either 'nodes' or 'edges'. If not given, it's automatically inferred.
1919
- `data` (dictionary): Element specific data.
@@ -32,7 +32,8 @@ class attribute).
3232
- `classes` (string): Space separated string of class names of the element. Those classes can be selected by a style selector.
3333
3434
2. The [official Cytoscape.js documentation](http://js.cytoscape.org/#notation/elements-json) offers an extensive overview and examples of element declaration.
35-
- stylesheet (list; optional): A list of dictionaries representing the styles of the elements.
35+
Alternatively, a dictionary with the format { 'nodes': [], 'edges': [] } is allowed at initialization, but arrays remain the recommended format.
36+
- stylesheet (list of dicts; optional): A list of dictionaries representing the styles of the elements.
3637
1. Each dictionary requires the following keys:
3738
- `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.
3839
- `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).
4243
exhaustively documented in the Cytoscape.js docs. Although methods such
4344
as `cy.elements(...)` and `cy.filter(...)` are not available, the selector
4445
string syntax stays the same.
45-
- layout (dict; optional): A dictionary specifying how to set the position of the elements in your
46+
- layout (dict; default {name: 'grid'}): A dictionary specifying how to set the position of the elements in your
4647
graph. The `'name'` key is required, and indicates which layout (algorithm) to
4748
use.
4849
1. The layouts available by default are:
@@ -80,33 +81,33 @@ class attribute).
8081
Note that certain keys are not supported in Dash since the value is a
8182
JavaScript function or a callback. Please visit [this issue](https://github.com/plotly/dash-cytoscape/issues/25)
8283
for more information.
83-
- pan (dict; optional): Dictionary indicating the initial panning position of the graph. The
84+
- pan (dict; default {x: 0, y: 0}): Dictionary indicating the initial panning position of the graph. The
8485
following keys are accepted:
8586
- `x` (number): The x-coordinate of the position.
8687
- `y` (number): The y-coordinate of the position.
87-
- zoom (number; optional): The initial zoom level of the graph. You can set `minZoom` and
88+
- zoom (number; default 1): The initial zoom level of the graph. You can set `minZoom` and
8889
`maxZoom` to set restrictions on the zoom level.
89-
- panningEnabled (boolean; optional): Whether panning the graph is enabled (i.e., the position of the graph is
90+
- panningEnabled (boolean; default True): Whether panning the graph is enabled (i.e., the position of the graph is
9091
mutable overall).
91-
- userPanningEnabled (boolean; optional): Whether user events (e.g. dragging the graph background) are allowed to
92+
- userPanningEnabled (boolean; default True): Whether user events (e.g. dragging the graph background) are allowed to
9293
pan the graph.
93-
- minZoom (number; optional): A minimum bound on the zoom level of the graph. The viewport can not be
94+
- minZoom (number; default 1e-50): A minimum bound on the zoom level of the graph. The viewport can not be
9495
scaled smaller than this zoom level.
95-
- maxZoom (number; optional): A maximum bound on the zoom level of the graph. The viewport can not be
96+
- maxZoom (number; default 1e50): A maximum bound on the zoom level of the graph. The viewport can not be
9697
scaled larger than this zoom level.
97-
- zoomingEnabled (boolean; optional): Whether zooming the graph is enabled (i.e., the zoom level of the graph
98+
- zoomingEnabled (boolean; default True): Whether zooming the graph is enabled (i.e., the zoom level of the graph
9899
is mutable overall).
99-
- userZoomingEnabled (boolean; optional): Whether user events (e.g. dragging the graph background) are allowed
100+
- userZoomingEnabled (boolean; default True): Whether user events (e.g. dragging the graph background) are allowed
100101
to pan the graph.
101-
- boxSelectionEnabled (boolean; optional): Whether box selection (i.e. drag a box overlay around, and release it
102+
- boxSelectionEnabled (boolean; default False): Whether box selection (i.e. drag a box overlay around, and release it
102103
to select) is enabled. If enabled, the user must taphold to pan the graph.
103-
- autoungrabify (boolean; optional): Whether nodes should be ungrabified (not grabbable by user) by
104+
- autoungrabify (boolean; default False): Whether nodes should be ungrabified (not grabbable by user) by
104105
default (if true, overrides individual node state).
105-
- autolock (boolean; optional): Whether nodes should be locked (not draggable at all) by default
106+
- autolock (boolean; default False): Whether nodes should be locked (not draggable at all) by default
106107
(if true, overrides individual node state).
107-
- autounselectify (boolean; optional): Whether nodes should be unselectified (immutable selection state) by
108+
- autounselectify (boolean; default False): Whether nodes should be unselectified (immutable selection state) by
108109
default (if true, overrides individual element state).
109-
- autoRefreshLayout (boolean; optional): Whether the layout should be refreshed when elements are added or removed.
110+
- autoRefreshLayout (boolean; default True): Whether the layout should be refreshed when elements are added or removed.
110111
- tapNode (dict; optional): The complete node dictionary returned when you tap or click it. Read-only.
111112
112113
1. Node-specific items:
@@ -188,7 +189,7 @@ class attribute).
188189
`'store'` to improve performance by preventing transfer of data to the server.
189190
- imageData (string; optional): String representation of the image requested with generateImage. Null if no
190191
image was requested yet or the previous request failed. Read-only.
191-
- responsive (boolean; optional): Toggles intelligent responsive resize of Cytoscape graph with viewport size change"""
192+
- responsive (boolean; default False): Toggles intelligent responsive resize of Cytoscape graph with viewport size change"""
192193
@_explicitize_args
193194
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):
194195
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/dash_cytoscape.dev.js

Lines changed: 6 additions & 31 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dash_cytoscape/dash_cytoscape.min.js

Lines changed: 12 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dash_cytoscape/dash_cytoscape_extra.dev.js

Lines changed: 68 additions & 115 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dash_cytoscape/dash_cytoscape_extra.min.js

Lines changed: 16 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dash_cytoscape/metadata.json

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -115,13 +115,25 @@
115115
},
116116
"elements": {
117117
"type": {
118-
"name": "arrayOf",
119-
"value": {
120-
"name": "object"
121-
}
118+
"name": "union",
119+
"value": [
120+
{
121+
"name": "arrayOf",
122+
"value": {
123+
"name": "object"
124+
}
125+
},
126+
{
127+
"name": "object"
128+
}
129+
]
122130
},
123131
"required": false,
124-
"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."
132+
"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.",
133+
"defaultValue": {
134+
"value": "[]",
135+
"computed": false
136+
}
125137
},
126138
"stylesheet": {
127139
"type": {

src/lib/components/Cytoscape.react.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -530,8 +530,9 @@ Cytoscape.propTypes = {
530530
* - `classes` (string): Space separated string of class names of the element. Those classes can be selected by a style selector.
531531
*
532532
* 2. The [official Cytoscape.js documentation](http://js.cytoscape.org/#notation/elements-json) offers an extensive overview and examples of element declaration.
533+
* Alternatively, a dictionary with the format { 'nodes': [], 'edges': [] } is allowed at initialization, but arrays remain the recommended format.
533534
*/
534-
elements: PropTypes.arrayOf(PropTypes.object),
535+
elements: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
535536

536537
/**
537538
* A list of dictionaries representing the styles of the elements.
@@ -818,7 +819,8 @@ Cytoscape.defaultProps = {
818819
autoRefreshLayout: true,
819820
generateImage: {},
820821
imageData: null,
821-
responsive: false
822+
responsive: false,
823+
elements: []
822824
};
823825

824826
export default Cytoscape;

tests/test_interactions.py

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -38,16 +38,14 @@ def test_interactions(self):
3838
click_error = "Unable to click Cytoscape nodes properly"
3939
mouseover_error = "Unable to mouseover Cytoscape nodes properly"
4040

41-
y_offset = 60
42-
4341
# View module docstring for more information about initial positions
4442
init_pos = {
45-
'Node 1': (62, 321 - y_offset),
46-
'Node 2': (369, 628 - y_offset),
47-
'Node 3': (267, 510 - 20 - y_offset),
48-
'Node 4': (778, 321 - y_offset),
49-
'Node 5': (471, 423 - y_offset),
50-
'Node 6': (267, 526 - y_offset)
43+
'Node 1': (59, 204),
44+
'Node 2': (227, 373),
45+
'Node 3': (171, 308 - 20),
46+
'Node 4': (451, 204),
47+
'Node 5': (283, 261),
48+
'Node 6': (171, 308)
5149
}
5250
init_x, init_y = init_pos['Node 1']
5351

usage-events.py

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -120,8 +120,8 @@
120120
'name': 'preset'
121121
},
122122
style={
123-
'height': '95vh',
124-
'width': '100%'
123+
'height': '500px',
124+
'width': '500px'
125125
}
126126
)
127127
]),
@@ -187,8 +187,9 @@
187187
])
188188
])
189189
]),
190+
]),
190191

191-
])
192+
html.Div(id='placeholder')
192193
])
193194

194195

0 commit comments

Comments
 (0)