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

Is edge label currently supported? #174

Open ppakorn opened 2 years ago

ppakorn commented 2 years ago

I followed the tutorial https://dash.plotly.com/cytoscape/elements, and the very first example of nodes and edges I saw

# The edge elements
{'data': {'source': 'one', 'target': 'two', 'label': 'Node 1 to 2'}}

and expected that the edge should have 'Node 1 to 2' on it But it doesn't Screen Shot 2565-04-29 at 13 44 05 (image from the tutorial itself)

Full code of the example

import dash
import dash_cytoscape as cyto
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    cyto.Cytoscape(
        id='cytoscape-elements-basic',
        layout={'name': 'preset'},
        style={'width': '100%', 'height': '400px'},
        elements=[
            # The nodes elements
            {'data': {'id': 'one', 'label': 'Node 1'},
             'position': {'x': 50, 'y': 50}},
            {'data': {'id': 'two', 'label': 'Node 2'},
             'position': {'x': 200, 'y': 200}},

            # The edge elements
            {'data': {'source': 'one', 'target': 'two', 'label': 'Node 1 to 2'}}
        ]
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)
loijord commented 2 years ago

You need to pass stylesheet parameter in cyto.Cytoscape:

stylesheet = [
    {'selector': 'node', 'style': {'content': 'data(label)'}},
    {'selector': 'edge',
     'style': {'content': 'data(label)',
               'curve-style': 'unbundled-bezier',
               'width': 1,
               'line-color': 'lightblue',
               'target-arrow-color': 'lightblue',
               'target-arrow-shape': 'triangle',
               'text-margin-x': 0,
               'font-size': 8}}]

Not sure if it supposed to be one-- and preferably only one --obvious way to do it though.