I am a relative newbie at Plotly Dash Python programming. I am trying o get to grips with the methodology of using the Dash Cytoscape component. What I want to do is to be able to [1] Define an initial zero node or null network, then [2] generate the network (say) from a dataframe within a callback function. Very few of the example codes I have found show how to update components within a callback. I did find the example called usage-reset-button.py here:

https://github.com/plotly/dash-cytoscape/blob/main/demos/usage-reset-button.py

What I have tried to do with this is is to modify the example code so that I declare the Cytoscape component in the layout, with no elements, but add elements to that dynamically in the callback. If I use static coordinates it seems to work fine. If I generate the coordinates dynamically using random numbers, then I expect the two node network to move around, but it does not do that. I even print() out the text of ‘myelements’ to the console and this shows changing node coordinates but the network I see is always fixed. I am finding Dash programming pretty tough, mainly because I do not see easy ways to access the components in the callbacks. Knowing what the valid component properties are and finding examples of these is a tough search, so many quite simple examples and so few of what I want and need to do. My example code is below. If someone can suggest why the network seen on the web page never changes, that would be a step forward. Mark

—————————–

I tried to understand ways of using Dash by modifying the example code to the code below:

see web page

https://github.com/plotly/dash-cytoscape/blob/main/demos/usage-reset-button.py

“””
An example to show how to reset the position, zoom level, and layout of a Cytoscape graph, using a
button attached to a callback.
“””
import dash
from dash import Input, Output, html, callback, State
import dash_cytoscape as cyto
import random

cytoelements = []
#    {"data": {"id": "one", "label": "Node 1"}, "position": {"x": 50, "y": 50}},
#    {"data": {"id": "two", "label": "Node 2"}, "position": {"x": 200, "y": 200}},
#    {"data": {"source": "one", "target": "two", "label": "Node 1 to 2"}},

layout = {"name": "grid"}

app = dash.Dash(__name__)
app.layout = html.Div(
    [
        html.Button("Reset", id="bt-reset"),
        cyto.Cytoscape(id="cytoscape", elements=cytoelements, layout=layout, zoom=1),
    ]
)


@callback(
    Output("cytoscape", "zoom"),
    Output("cytoscape", "elements"),
    Input("bt-reset", "n_clicks"),
    # State("cytoscape","elements"),
    # prevent_initial_call=True
)
# def reset_layout(n_clicks,elements):
def reset_layout(n_clicks):
    print(n_clicks, "click")
    x1=random.randrange(1,200)
    y1=random.randrange(1,200)
    x2=random.randrange(1,200)
    y2=random.randrange(1,200)
    print("coordinates ",x1,y1,x2,y2)
    myelements = [
        {"data": {"id": "one", "label": "Node A"}, "position": {"x": x1, "y": y1}},
        {"data": {"id": "two", "label": "Node B"}, "position": {"x": x2, "y": y2}},
        {"data": {"source": "one", "target": "two", "label": "Node 1 to 2"}},
    ]
    print(myelements)
    return [1, myelements]


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

# -----------------------------------