从 Dash Cytoscape 的下拉菜单中选择不同的元素选项

Question

I am trying to use different lists of elements, 'A' and 'B' in this example as option for dropdown for my network graphs. I updated the elements but it does not show up in the change. I wonder what need to be corrected so that I can select different graph ('A' or B) using dropdown. Please find my code below.

import dash
import dash
from dash import dcc
from dash import html
import pandas as pd
import dash_cytoscape as cyto
from dash.dependencies import Input, Output
import plotly.express as px

elements_list = {
        'A' : [{'data': {'id': 'ca', 'label': 'Canada'}},
        {'data': {'id': 'on', 'label': 'Ontario'}},
        {'data': {'id': 'qc', 'label': 'Quebec'}},
        {'data': {'source': 'ca', 'target': 'on'}},
        {'data': {'source': 'ca', 'target': 'qc'}}],
        'B' : [{'data': {'id': 'ca', 'label': 'Canada'}},
        {'data': {'id': 'on', 'label': 'Ontario'}},
        {'data': {'id': 'qc', 'label': 'Quebec'}}]
}

graphs = ['A', 'B']

app = dash.Dash(__name__)

my_layout = {'name': 'grid'}
my_style = {'display': 'inline-block', 'width': '1000px', 'height': '800px', 'border': '2px black solid'}

app.layout = html.Div(children=[
        html.H1("My Network", style={'color': 'black', 'fontSize': 32}),
        html.Br(),
        dcc.Dropdown(
                id='graph-input',
                value=graphs[0],
                clearable=False,
                options=[
                        [{'label': graphs[i], 'value': graphs[i]} for i in range(0, len(graphs))]
                ]
        ),
        html.Br(),
        cyto.Cytoscape(
                id='network-output',
                elements=elements_list['A'], # How do I have an option for different elements here?
                layout=my_layout,
                style=my_style
        ),
        html.Br()
])

@app.callback(Output('network-output', 'elements'),
        Input('graph-input', 'value'))

def update_elements(value):
        elements = elements_list[value]

if __name__ == '__main__':
        app.run_server(debug=False, host='0.0.0.0', port=8051)

Thanks in advance.

Answer 1

I'm not 100% sure what you are trying to achieve with the info re Canada, but, assuming you want to figure out how to code synchronized custom changes where selecting an option from the dropdown changes the network graph, I've demonstrated a very basic example template for you.

I took a look at your code and the Dash Cytoscape docs and was able to figure out I think what you may be looking to try to do. Take a look at these changes I made and let me know if this helps and/or you have any further questions; happy to help out as I'm learning Dash too myself right now 🙂:

import dash
import dash
import dash_cytoscape as cyto
import pandas as pd

from dash import dcc
from dash import html
from dash import no_update
from dash.dependencies import Input
from dash.dependencies import Output

graphs = ["A", "B"]

app = dash.Dash(__name__)

my_layout = {"name": "grid"}
my_style = {
    "display": "inline-block",
    "width": "1000px",
    "height": "800px",
    "border": "2px black solid",
}

app.layout = html.Div(
    children=[
        html.H1("My Network", style={"color": "black", "fontSize": 32}),
        html.Br(),
        dcc.Dropdown(
            id="graph-input",
            placeholder="Select a Node",
            clearable=False,
            value=None,
            options=[{"label": i, "value": i} for i in graphs],
        ),
        html.Br(),
        cyto.Cytoscape(
            id="network-output",
            elements=[
                {
                    "data": {"id": "A", "label": "A"},
                    "position": {"x": 75, "y": 75},
                    "classes": "A",
                },
                {
                    "data": {"id": "B", "label": "B"},
                    "position": {"x": 200, "y": 200},
                    "classes": "B",
                },
                {"data": {"source": "A", "target": "B"}},
            ],  # How do I have an option for different elements here?
            layout=my_layout,
            style=my_style,
            stylesheet=[
                {
                    "selector": "node",
                    "style": {"width": "50px", "height": "50px"},
                }
            ],
        ),
        html.Br(),
    ]
)


@app.callback(
    [Output("network-output", "stylesheet")], Input("graph-input", "value")
)
def update_elements(value):
    if value:
        return (
            [
                {
                    "selector": f".{value}",
                    "style": {
                        "background-color": "#FD8008",
                        "background-opacity": "0.8",
                        "border-color": "#00C1FF",
                        "border-width": "2",
                        "width": "55px",
                        "height": "55px",
                        "label": "data(label)",
                    },
                }
            ],
        )
    else:
        return no_update


if __name__ == "__main__":
    app.run_server(
        debug=True, host="0.0.0.0", port=8051, dev_tools_hot_reload=True
    )

This results in the following, where choosing "A" or "B" highlights respectively nodes A or B:

→ then, when an option from dropdown is selected: