Multiple roots with breadthfirst layout

Dash Python
1

Hi, I am trying to figure out how to set 2 root nodes when using the breadthfirst layout. According to the documentation I’ve seen, defining a single root is like
roots = ‘id =“node ID”’
and multiple roots it’s like:
roots = ‘#node1 ID, #node2 ID’

The single root works fine, it will present a graph where the root node is at the top and you get this top-down spread of nodes.
However for the multiple roots, it just becomes a single line with all nodes lined-up in a straight line.
As an example, I’m trying to achieve something similar to the following:


                              Node1                           Node2
                                |                               |
                              Node3                            Node4
                              /   \                            /   \
                           Node5 Node6                     Node7  Node8
                          /   \       \                    /   \              \
                       Node9  NodeA    \                 /   NodeB  
                                        \              /                                              
                                             NodeD

Can someone point me out in the right direction for this to work?

2

Hey @einarmar,

First and foremost, welcome to the community.

I might come up with something. Hope this would be helpful for you!

I am assuming that you also had a problem with syntax of defining the root nodes, at least it was the case for me because I got the single line with all nodes lined-up in a straight line constellation as well at my first try.

Here is my code that gives the below output:

Screenshot 2023-12-16 at 22.53.52
Screenshot 2023-12-16 at 22.53.522780×590 81.8 KB

from dash import Dash, html
import dash_cytoscape as cyto

app = Dash(__name__)

nodes = [
    {
        'data': {'id': short, 'label': label},
        'position': {'x': 20 * lat, 'y': -20 * long}
    }
    for short, label, long, lat in (
        ('la', 'Los Angeles', 34.03+5, -118.25),
        ('nyc', 'New York', 40.71, -74),
        ('to', 'Toronto', 43.65, -79.38),
        ('mtl', 'Montreal', 45.50, -73.57),
        ('van', 'Vancouver', 49.28, -123.12),
        ('chi', 'Chicago', 41.88, -87.63),
        ('bos', 'Boston', 42.36, -71.06),
        ('hou', 'Houston', 29.76, -95.37) 
        
    )
]

nodes2 = [
    {
        'data': {'id': short, 'label': label},
        'position': {'x': 25 * lat, 'y': -20 * long}
    }
    for short, label, long, lat in (
        ('la2', 'Los Angeles2', 34.03+5, -118.25),
        ('nyc2', 'New York2', 40.71, -74),
        ('to2', 'Toronto2', 43.65, -79.38),
        ('mtl2', 'Montreal2', 45.50, -73.57),
        ('van2', 'Vancouver2', 49.28, -123.12),
        ('chi2', 'Chicago2', 41.88, -87.63),
        ('bos2', 'Boston2', 42.36, -71.06),
        ('hou2', 'Houston2', 29.76, -95.37) 
        
    )
]


edges = [
    {'data': {'source': source, 'target': target}}
    for source, target in (
        ('hou', 'la'),
        ('la', 'mtl'),
        ('hou', 'chi'),
        ('bos', 'chi'),
        ('mtl', 'bos'),
        ('nyc', 'bos'),
        ('to', 'hou'),
        ('van', 'hou'),
        ('to', 'nyc'),
        ('to', 'van'),
        ('la', 'nyc'),
        ('nyc', 'bos'),
    )
]

edges2 = [
    {'data': {'source': source, 'target': target}}
    for source, target in (
        ('hou2', 'la2'),
        ('la2', 'mtl2'),
        ('hou2', 'chi2'),
        ('bos2', 'chi2'),
        ('mtl2', 'bos2'),
        ('nyc2', 'bos2'),
        ('to2', 'hou2'),
        ('van2', 'hou2'),
        ('to2', 'nyc2'),
        ('to2', 'van2'),
        ('la2', 'nyc2'),
        ('nyc2', 'bos2'),
    )
]

edges3 = [
    {'data': {'source': source, 'target': target}}
    for source, target in (
        ('van', 'chi2'),
    )
]


elements2 = nodes2 + edges2
elements = nodes + edges


app.layout = html.Div([
    cyto.Cytoscape(
        id='cytoscape-layout-6',
        elements = elements + elements2 + edges3,  # define all of them here
        style={'width': '100%', 'height': '350px'},
        layout={
            'name': 'breadthfirst',
            'roots': '[id = "nyc"], [id = "nyc2"]' # define roots in this syntax!
        }
    ),
   
])

if __name__ == '__main__':
    app.run(debug=True)

Cheers!

3

Hi @Berbere and thanks for the tip. This seems to have worked fine for me. Greatly appreciate it.