Getting TypeError while trying to change the layout of the graph

[goyaljai1]

Introduction

I am getting following error, whenever I am trying to change the layout of the graph:
ERROR TypeError: Cannot set properties of undefined (setting 'rank')
Following are the cells in the graph:

[
    {
        "position": {
            "x": 70,
            "y": 480
        },
        "size": {
            "width": 270,
            "height": 210
        },
        "angle": 0,
        "type": "app.Container",
        "options": {
            "deep": true
        },
        "markup": [
            {
                "selector": "body",
                "tagName": "rect"
            },
            {
                "selector": "label",
                "tagName": "text"
            },
            {
                "selector": "button",
                "tagName": "rect"
            },
            {
                "selector": "buttonLabel",
                "tagName": "text"
            }
        ],
        "embeds": [
            "159adece-3bec-414b-acac-84eff4982136"
        ],
        "id": "fd4f1c4b-0881-49a9-94ad-86edb9cc5a4b",
        "name": "Container",
        "z": -1,
        "attrs": {
            "body": {
                "stroke": "#353535",
                "fill": "#FFFFFF",
                "bodyBackground": {
                    "color": "#FFFFFF",
                    "isFill": true
                },
                "changeLayer": {
                    "changeTo": ""
                },
                "cursor": "default",
                "filter": "",
                "gradient": {
                    "color": "#1d1e20",
                    "isGradient": false,
                    "position": {
                        "x1": "0%",
                        "x2": "0%",
                        "y1": "100%",
                        "y2": "0%"
                    }
                },
                "rotateClockwise": {
                    "rotateAngle": 0
                },
                "rx": 0,
                "ry": 0,
                "shadowRound": {
                    "rounded": false,
                    "shadow": false
                },
                "strokeColor": {
                    "color": "#353535",
                    "isStroke": true
                },
                "strokeDasharray": "0",
                "visibility": "visible"
            },
            "label": {
                "x": "calc(w/2)",
                "fill": "#353535",
                "fontFamily": "Open Sans",
                "fontStyle": "none",
                "fontWeight": "Normal",
                "format": [
                    ""
                ],
                "strokeWidth": 0,
                "text": "",
                "textDecoration": "none",
                "visibility": "visible",
                "y": "calc(h + 8)"
            },
            "button": {
                "width": 15,
                "x": 5,
                "y": 5,
                "event": "element:button:pointerdown",
                "fill": "#cfcfd1",
                "stroke": "black",
                "strokeWidth": 1
            },
            "buttonLabel": {
                "x": 12,
                "y": 13,
                "fill": "black",
                "fontSize": 8,
                "fontWeight": "bold",
                "text": "–"
            }
        }
    },
    {
        "type": "standard.Path",
        "position": {
            "x": -17,
            "y": 375
        },
        "size": {
            "width": 120,
            "height": 80
        },
        "angle": 0,
        "id": "233d5c64-2d7c-4394-ab8d-98be8623f3e0",
        "name": "Callout",
        "z": 3,
        "attrs": {
            "body": {
                "d": "\n                  M 0 0\n                  L calc(w) 0\n                  L calc(w) calc(0.6 * h)\n                  L calc(0.67 * w) calc(0.6 * h)\n                  L calc(0.5 * w) calc(h)\n                  L calc(0.5 * w) calc(0.6 * h)\n                  L 0 calc(0.6 * h)\n                  Z\n                ",
                "stroke": "#353535",
                "bodyBackground": {
                    "color": "#FFFFFF",
                    "isFill": true
                },
                "changeLayer": {
                    "changeTo": ""
                },
                "filter": "",
                "gradient": {
                    "color": "#1d1e20",
                    "isGradient": false,
                    "position": {
                        "x1": "0%",
                        "x2": "0%",
                        "y1": "100%",
                        "y2": "0%"
                    }
                },
                "rotateClockwise": {
                    "rotateAngle": 0
                },
                "shadowRound": {
                    "rounded": false,
                    "shadow": false
                },
                "strokeColor": {
                    "color": "#353535",
                    "isStroke": true
                },
                "strokeDasharray": "0",
                "visibility": "visible"
            },
            "label": {
                "y": "calc(0.1*h)",
                "fontSize": 11,
                "fill": "#353535",
                "fontFamily": "Open Sans",
                "fontStyle": "none",
                "fontWeight": "Normal",
                "format": [
                    ""
                ],
                "strokeWidth": 0,
                "text": "",
                "textDecoration": "none",
                "visibility": "visible"
            }
        }
    },
    {
        "position": {
            "x": 120,
            "y": 500
        },
        "size": {
            "width": 200,
            "height": 150
        },
        "angle": 0,
        "type": "app.Container",
        "options": {
            "deep": true
        },
        "markup": [
            {
                "selector": "body",
                "tagName": "rect"
            },
            {
                "selector": "label",
                "tagName": "text"
            },
            {
                "selector": "button",
                "tagName": "rect"
            },
            {
                "selector": "buttonLabel",
                "tagName": "text"
            }
        ],
        "embeds": [
            "31ba71fb-8ce2-4050-8fe7-a9ba4cf47bdc"
        ],
        "id": "159adece-3bec-414b-acac-84eff4982136",
        "name": "Container",
        "parent": "fd4f1c4b-0881-49a9-94ad-86edb9cc5a4b",
        "z": 12,
        "attrs": {
            "body": {
                "stroke": "#353535",
                "fill": "#FFFFFF",
                "bodyBackground": {
                    "color": "#FFFFFF",
                    "isFill": true
                },
                "changeLayer": {
                    "changeTo": ""
                },
                "cursor": "default",
                "filter": "",
                "gradient": {
                    "color": "#1d1e20",
                    "isGradient": false,
                    "position": {
                        "x1": "0%",
                        "x2": "0%",
                        "y1": "100%",
                        "y2": "0%"
                    }
                },
                "rotateClockwise": {
                    "rotateAngle": 0
                },
                "rx": 0,
                "ry": 0,
                "shadowRound": {
                    "rounded": false,
                    "shadow": false
                },
                "strokeColor": {
                    "color": "#353535",
                    "isStroke": true
                },
                "strokeDasharray": "0",
                "visibility": "visible"
            },
            "originalDimensions": {
                "visibility": "visible"
            },
            "label": {
                "x": "calc(w/2)",
                "fill": "#353535",
                "fontFamily": "Open Sans",
                "fontStyle": "none",
                "fontWeight": "Normal",
                "format": [
                    ""
                ],
                "strokeWidth": 0,
                "text": "",
                "textDecoration": "none",
                "visibility": "visible",
                "y": "calc(h + 8)"
            },
            "button": {
                "width": 15,
                "x": 5,
                "y": 5,
                "event": "element:button:pointerdown",
                "fill": "#cfcfd1",
                "stroke": "black",
                "strokeWidth": 1,
                "visibility": "visible"
            },
            "buttonLabel": {
                "x": 12,
                "y": 13,
                "fill": "black",
                "fontSize": 8,
                "fontWeight": "bold",
                "text": "–",
                "visibility": "visible"
            }
        }
    },
    {
        "type": "app.StepModel",
        "uniqueName": "",
        "offset": 0.2,
        "markup": [
            {
                "attrs": {
                    "data-selector": "body"
                },
                "selector": "body",
                "tagName": "path"
            },
            {
                "attrs": {
                    "data-selector": "label"
                },
                "selector": "label",
                "tagName": "text"
            }
        ],
        "position": {
            "x": 146,
            "y": 535
        },
        "size": {
            "width": 120,
            "height": 80
        },
        "angle": 0,
        "id": "31ba71fb-8ce2-4050-8fe7-a9ba4cf47bdc",
        "name": "Step",
        "parent": "159adece-3bec-414b-acac-84eff4982136",
        "z": 13,
        "attrs": {
            "root": {
                "visibility": "visible"
            },
            "body": {
                "bodyBackground": {
                    "color": "#FFFFFF",
                    "isFill": true
                },
                "changeLayer": {
                    "changeTo": ""
                },
                "filter": "",
                "gradient": {
                    "color": "#1d1e20",
                    "isGradient": false,
                    "position": {
                        "x1": "0%",
                        "x2": "0%",
                        "y1": "100%",
                        "y2": "0%"
                    }
                },
                "rotateClockwise": {
                    "rotateAngle": 0
                },
                "shadowRound": {
                    "rounded": false,
                    "shadow": false
                },
                "strokeColor": {
                    "color": "#353535",
                    "isStroke": true
                },
                "visibility": "visible"
            },
            "label": {
                "y": "calc(h/2)",
                "textVerticalAnchor": "middle",
                "fontStyle": "none",
                "format": [
                    ""
                ],
                "text": "",
                "textDecoration": "none",
                "visibility": "visible"
            }
        }
    },
    {
        "type": "app.Link",
        "name": "Dotted arrow",
        "router": {
            "name": "orthogonal"
        },
        "connector": {
            "name": "rounded"
        },
        "labels": [],
        "originalConnections": {
            "sourceId": "",
            "targetId": "31ba71fb-8ce2-4050-8fe7-a9ba4cf47bdc",
            "tempSourceId": "233d5c64-2d7c-4394-ab8d-98be8623f3e0",
            "tempTargetId": "31ba71fb-8ce2-4050-8fe7-a9ba4cf47bdc",
            "sourcElementIndex": -1,
            "targetElementIndex": -1
        },
        "originalConnectionsPosition": {
            "sourceId": -1,
            "targetId": -1,
            "tempSourceId": -1,
            "tempTargetId": -1
        },
        "source": {
            "id": "233d5c64-2d7c-4394-ab8d-98be8623f3e0"
        },
        "target": {
            "id": "159adece-3bec-414b-acac-84eff4982136"
        },
        "id": "c6c0f478-167e-4a4f-9ac3-8be1283c64a9",
        "z": 14,
        "attrs": {}
    }
]

Please let me know how to resolve the error. Thank you!

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS, JointJS+

[kumilingus]

Duplicate of #455.