agersch2
commented
4 years ago UPDATE:
Actually, it's not just parent and child nodes...
When I tried copying the add/remove example code (exactly, no changes) and running it locally, I get (many) similar errors - when clicking on the add (back after removing) button!!! https://dash.plotly.com/cytoscape/callbacks And I now note that it doesn't even work on the demo/example page either!!!
import dash import dash_cytoscape as cyto import dash_html_components as html import dash_core_components as dcc from pprint import pprint from dash.dependencies import Input, Output, State
app = dash.Dash(name)
nodes = [ { 'data': {'id': short, 'label': label}, 'position': {'x': 20lat, 'y': -20long} } for short, label, long, lat in ( ('la', 'Los Angeles', 34.03, -118.25), ('nyc', 'New York', 40.71, -74), ('to', 'Toronto', 43.65, -79.38), ('mtl', 'Montreal', 45.50, -73.57), ('van', 'Vancouver', 49.28, -123.12), ('chi', 'Chicago', 41.88, -87.63), ('bos', 'Boston', 42.36, -71.06), ('hou', 'Houston', 29.76, -95.37) ) ]
edges = [ {'data': {'source': source, 'target': target}} for source, target in ( ('van', 'la'), ('la', 'chi'), ('hou', 'chi'), ('to', 'mtl'), ('mtl', 'bos'), ('nyc', 'bos'), ('to', 'hou'), ('to', 'nyc'), ('la', 'nyc'), ('nyc', 'bos') ) ]
default_stylesheet = [ { 'selector': 'node', 'style': { 'background-color': '#BFD7B5', 'label': 'data(label)' } }, { 'selector': 'edge', 'style': { 'line-color': '#A3C4BC' } } ]
app.layout = html.Div([ html.Div([ html.Button('Add Node', id='btn-add-node', n_clicks_timestamp=0), html.Button('Remove Node', id='btn-remove-node', n_clicks_timestamp=0) ]),
cyto.Cytoscape(
id='cytoscape-elements-callbacks',
layout={'name': 'circle'},
stylesheet=default_stylesheet,
style={'width': '100%', 'height': '450px'},
elements=edges+nodes
)])
@app.callback(Output('cytoscape-elements-callbacks', 'elements'), [Input('btn-add-node', 'n_clicks_timestamp'), Input('btn-remove-node', 'n_clicks_timestamp')], [State('cytoscape-elements-callbacks', 'elements')]) def update_elements(btn_add, btn_remove, elements):
If the add button was clicked most recently
if int(btn_add) > int(btn_remove):
next_node_idx = len(elements) - len(edges)
# As long as we have not reached the max number of nodes, we add them
# to the cytoscape elements
if next_node_idx < len(nodes):
return edges + nodes[:next_node_idx+1]
# If the remove button was clicked most recently
elif int(btn_remove) > int(btn_add):
if len(elements) > len(edges):
return elements[:-1]
# Neither have been clicked yet (or fallback condition)
return elementsif name == 'main': app.run_server(debug=True)
riverchen99
xhluca
thhung
Wheest
I am trying to show a graph with parent and child nodes (representing clusters) and have a menu or button callback to remove/hide the parent nodes and leave the children (and appropriate edges.) I've tried various approaches, but essentially, they seem to all return the same error. The callback(s) return a whole new "elements" to Cytoscape and they inevitably result in a JS error in the browser like this example:
Can not create edge
7cf808c5-c6a2-4937-8ca8-8b43d1bd8893with nonexistant sourcenycI have put together a small test/demo to show the problem, based directly on some of the examples from the documentation. As far as I can see from the documentation examples, this should do what I want, but I still get the errors. I don't think I'm missing anything (this is pretty straightforwardly copying and pasting from the examples...) so I suspect there's a but here.
In my debugging efforts, I noticed that if one changes the IDs of the nodes in the callback instead of leaving them the same as the originals, then it seems to work. But that would be somewhat kludgey and cumbersome to do for a graph with lots of actual data. (Note: I did try looking at the JS in the browser console tool. if I followed it correctly, it looks like it's removing all the nodes and edges, then trying to add back edges before creating the nodes... maybe...)
Thanks in advance for your help! -Al
My Example CODE:
import dash import dash_cytoscape as cyto import dash_html_components as html from dash.dependencies import Input, Output, State
app = dash.Dash(name) app.config.suppress_callback_exceptions = True
app.layout = html.Div([ cyto.Cytoscape( id='cytoscape-compound', layout={'name': 'preset'}, style={'width': '100%', 'height': '450px'}, stylesheet=[ { 'selector': 'node', 'style': {'content': 'data(label)'} }, { 'selector': '.countries', 'style': {'width': 5, 'visible': 'false' } }, { 'selector': '.cities', 'style': {'line-style': 'dashed'} } ], elements=[
Parent Nodes
@app.callback(Output('cytoscape-compound', 'elements'), [Input('btn-add-node-example', 'n_clicks_timestamp'), Input('btn-remove-node-example', 'n_clicks_timestamp')], [State('cytoscape-compound', 'elements')]) def update_elements(btn_add, btn_remove, elements): if int(btn_add) > int(btn_remove): elements = [
Children Nodes
if name == 'main': app.run_server(debug=True)