Description
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