Unable to modify Cytoscape.elements using global variable

Dash Python
1

Here is an MWE, it runs without errors. And seems to be making the callback, as the graph will be seen zooming in when you click the button, presumably because “new data” was loaded.

import dash
import dash_cytoscape as cyto
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output, State

app = dash.Dash(__name__)

server = app.server

global_elements = [
            {'data': {'id': 'one', 'label': 'A', 'classes': 'object', 'color': 'white'}, 'position': {'x': 75, 'y': 75}},
            {'data': {'id': 'two', 'label': 'B', 'classes': 'object', 'color': 'white'}, 'position': {'x': 200, 'y': 200}},
            {'data': {'label': 'f', 'source': 'one', 'target': 'two', 'classes': 'arrow', 'color': 'pink'}}
        ]

app.layout = html.Div([
    cyto.Cytoscape(
        id='cytoscape-two-nodes',
        layout={'name': 'preset'},
        style={'width': '100%', 'height': '400px'},
        elements=global_elements
    ),
    html.Button('Add Node', id='add-node-button', n_clicks=0)
])

@app.callback(Output('cytoscape-two-nodes', 'elements'),
              Input('add-node-button', 'n_clicks'))
def on_add_node_clicked(num_clicks):
    global global_elements
    global_elements = list(global_elements)
    global_elements.append({
        'data': {
        'id': 'one', 
        'label': 'A1', 
        'classes': 'object', 
        'color': 'white'
        },
        'position': {'x': 75, 'y': 75}})
    return global_elements
    
    
if __name__ == '__main__':
    app.run_server(debug=True)

I can’t however get it to modify the graph, which is the goal.

2

[Solved] You also need to update the “id” field of the node’s data. This I guess uniquely identifies the node for Cytoscape, and the way I’m adding data doesn’t cause an overwrite of the data that’s there.