Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is edge label currently supported? #174

Open
ppakorn opened this issue Apr 29, 2022 · 1 comment
Open

Is edge label currently supported? #174

ppakorn opened this issue Apr 29, 2022 · 1 comment

Comments

@ppakorn
Copy link

ppakorn commented Apr 29, 2022

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
Copy link

loijord commented Apr 29, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants