Edge Attributes/Labels (future work)

[realboa]

Is it possible to show edge properties/attributes (relationship description) in cytoscape? In Dash there is a way to show the edge properties when hover, but it will be good if it can just show like node label.

[daddycocoaman]

@realboa Do you mean something like this?

If so, this is in the Cytoscape.js documentation. In the Cytoscape.js documentation for labels. You just set label to a value like data(name) to show edge labels names.

But if you mean to show actual data when you hover over it, you could probably use the mouseoverEdgeData reference for a callback so that a tool tip or something displays when you hover over it. Cytoscape Component Reference

[xhluca]

Hi @realboa, did @daddycocoaman 's suggestion work for you?

[ppakorn]

I cannot display the edge label too. Also, I couldn't see the edge label in the first example of this guide.

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)

[plbremer]

@ppakorn (months later lol) and anyone else from this thread https://stackoverflow.com/questions/56706002/how-can-i-make-the-label-of-an-edge-displayed-just-in-the-middle-position

you can make something like

        cyto.Cytoscape(
            id='cyto_sample',
            elements=[],
            stylesheet=[
                {
                    'selector':'edge[label',
                    'style':{
                        'label':'data(label)',
                    }
                },
        ),