dash-cytoscape
dash-cytoscape copied to clipboard
Is edge label currently supported?
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
(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)
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.