Dash Cytoscape - Labels inside nodes

Dash Python
1

Xhlu:
Dash Cytoscape is great. Is it possible to have the labels included in the node, and also to add more text in the node such as:

image
image855×586 9.92 KB
I noticed that Cytoscape uses images as the nodes/
Pengcu

2

You can find an example below. To find a solution, I used https://dash.plot.ly/cytoscape/styling to understand how styling works and then directly the cytoscape documentation to find the css property values (https://js.cytoscape.org/#style/node-body and https://js.cytoscape.org/#style/labels).

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-two-nodes',
        layout={'name': 'preset'},
        style={'width': '100%', 'height': '400px'},
        elements=[
            {'data': {'id': 'one', 'label': 'Node 1'}, 'position': {'x': 75, 'y': 75}},
            {'data': {'id': 'two', 'label': 'Node 2'}, 'position': {'x': 200, 'y': 200}},
            {'data': {'source': 'one', 'target': 'two'}}
        ],
        stylesheet=[
        # Group selectors
        {
            'selector': 'node',
            'style': {
                'content': 'data(label)',
                'text-halign':'center',
                'text-valign':'center',
                'width':'label',
                'height':'label',
                'shape':'square'
            }
        },]
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)
1 Like
3

Thanks, it is a good example and good resources.