Dagre Rendering Fails Based On Compound Node Element Order

Description

The “dagre” layout produces badly formatted layouts when the parent node follows children nodes in the list of elements. This isn’t noted in the documentation, to my knowledge.

Steps/Code to Reproduce

import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html

import dash_cytoscape as cyto

cyto.load_extra_layouts()

app = dash.Dash(__name__)

elements = [
    {
        "data": { 
            "id": "1",
            "label": "1",
        }
    },

    {
        "data": { 
            "id": "2_parent",
            "label": "2_parent",
        }
    },

    {
        "data": { 
            "id": "2",
            "label": "2",
            "parent": "2_parent",
        }
    },

    {
        "data": {
            "source": "1",
            "target": "2",
        }
    }
]

app.layout = html.Div([
    cyto.Cytoscape(
        id='cytoscape-compound',
        layout={
            "name": "dagre",
            "nodeDimensionsIncludeLabels": "true",
            "animate": "true",
        },
        style={'width': '50%', 'height': '400px', "background-color": "azure",},
        stylesheet=[
            {
                'selector': 'node',
                'style': {'content': 'data(label)'}
            },
            {
                "selector": "edge",
                "style": {
                    "curve-style": "straight",
                    "target-arrow-shape": "triangle",
                    "arrow-scale": 2,
                },
            },
        ],
        elements=elements,
    )
])

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

Above is the working code. To reproduce, swap the 2nd and 3rd elements in the elements list.

elements = [
    {
        "data": { 
            "id": "1",
            "label": "1",
        }
    },

    {
        "data": { 
            "id": "2",
            "label": "2",
            "parent": "2_parent",
        }
    },

    {
        "data": { 
            "id": "2_parent",
            "label": "2_parent",
        }
    },

    {
        "data": {
            "source": "1",
            "target": "2",
        }
    }
]

Alternatively, insert elements = elements[::-1].

Expected Results

From working example:

Actual Results

From broken example:

Notice that not all elements are in the viewport. This is the output after zooming out:

The output is also not deterministic. Sometimes the layout renders like this:

Zoomed out:

However, the rendering is fine in any order when the “animate” option isn’t specified in the layout dictionary ("animate": "false" still fails). Omitting the “animate” option yields:

Versions

Dash 1.16.0 Dash Core Components 1.1.1 Dash HTML Components 1.12.0 Dash Renderer 1.8.0 Dash Cytoscape 0.2.0

[riverchen99]

Thanks for your help @xhlulu ! Your gist with reproduces the error when I try to run it. Will open a PR in the dagre repo. Appreciate your help!

[xhluca]

This is definitely a strange issue. I tried to run it locally and it seems to work in v0.1.1 but not in v0.2.0, so I’m suspecting it is linked to #106 .

Were you able to run the steps described in this comment with your graph? If it has the same behavior (i.e. the problem appears after 4cba5bcc8aa8110b5365c0995e177b318e09c18d), then I believe this problem can be solved at the same time as #106

Given sufficient bandwidth, I’ll spend some time looking into this issue (along with the previous issue). In the meantime, I recommend using Dash Cytoscape v0.1.1 if you do not need image export and responsive relayout.