plotly / dash-cytoscape

Interactive network visualization in Python and Dash, powered by Cytoscape.js
https://dash.plot.ly/cytoscape
MIT License
601 stars 119 forks source link

Adding Elements does not work with Clientside Callbacks #199

Open Louiszk opened 10 months ago

Louiszk commented 10 months ago

MRE:

import dash
from dash import dcc, html,Input, Output, State, no_update
import dash_cytoscape as cyto

app = dash.Dash(__name__)

app.layout = html.Div([
    cyto.Cytoscape(
        id='cytoscape',
        elements=[
            {'data': {'id': 'node1', 'label':"node1"}, 'positions': {'x': 0, 'y': 0}}
        ],
        layout={'name': 'preset'},
        style={'width': '400px', 'height': '400px'}
    ),
    html.Button('Add Node', id='add-node-btn')
])

app.clientside_callback(
'''
function (nClicks, currentElements){
    if (!nClicks) {
        return dash_clientside.no_update;
    }
    let x=50;
    let y=100;
    let newNode = { 'data': { 'id': 'node2' }, 'position': { 'x': x, 'y': y } };
    currentElements.push(newNode);
    console.log(currentElements);

    return JSON.parse(JSON.stringify(currentElements));
}

''',
    Output('cytoscape', 'elements'),
    Input('add-node-btn', 'n_clicks'),
    State('cytoscape', 'elements'),
    prevent_initial_call=True
)

if __name__ == '__main__':
    app.run_server(debug=True)

Expected Results

Clientside Callbacks should be able to add elements.

Actual Results

It does not work.

Versions

Cytoscape 0.3.0 Dash 2,14.1