plotly / dash-cytoscape

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

[BUG] node label cannot be updated when connected to an edge, after upgrading `dash-cytoscape` from `0.3.0` to `1.0.0` #214

Open FredBill1 opened 3 months ago

FredBill1 commented 3 months ago

Description

After upgrading dash-cytoscape from 0.3.0 to 1.0.0, when trying to update the ["data"]["label"] of a node which is connected by an edge in a callback, the label stays unchanged unless we mannually remove and re-add the node from the elements of the Cytoscape component via two separate callbacks.

But if the node is not connected by an edge, it works as expected, which is pretty wierd.

Steps/Code to Reproduce

import dash_cytoscape as cyto
from dash import Dash, Input, Output, callback, html

@callback(Output("cytoscape", "elements"), Input("button", "n_clicks"))
def update_label(n_clicks):
    return [
        {"data": {"id": "1", "label": str(n_clicks)}},
        {"data": {"id": "2"}},
        {"data": {"source": "1", "target": "2"}},  # remove this line
    ]

app = Dash(__name__)
app.layout = html.Div([html.Button("Update", id="button"), cyto.Cytoscape(id="cytoscape")])

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

Expected Results

The label of node with id="1" should be an integer that increases with the number of clicks of the button increases.

working

Actual Results

In version 0.3.0, it works as expected. But in version 1.0.0, the label of node with id="1" is freezed to be "None".

error

If we remove the edge connecting nodes with id="1" and id="2", it works again.

Versions

Dash 2.16.1
Dash Cytoscape 1.0.0
Dash 2.16.1
Dash Cytoscape 0.2.0