JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/cytoscape/cytoscape.js/master/dist/cytoscape.js"></script>
<script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
<script src="https://rawgit.com/cytoscape/cytoscape.js-dagre/master/cytoscape-dagre.js"></script>
<script src="https://cdn.rawgit.com/OpenKieler/klayjs/0.4.1/klay.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-klay/master/cytoscape-klay.js"></script>
<div id="cy">

</div>

CSS

#cy {
  width: 100%;
  height: 700px;
  border: 1px solid #aaa;
}

JavaScript

let snapshot = {
    "snapshot": 1501496449474,
    "components": {
        "233": {
            "component": {
                "id": 187,
                "type": "Activity",
                "name": "ACTIVITY_0: Get Routes From DriveNow "
            },
            "annotations": {
                "TEST": "Hallo"
            },
            "child-relations": [
                {
                    "callee": 234,
                    "annotations": {
                        "Direction": "A1 follows A0"
                    }
                },
                {
                    "callee": 303
                },
                {
                    "caller": 303,
                    "callee": 305
                },
                {
                    "caller": 303,
                    "callee": 308,
                    "annotations": {
                        "http.status_code": "200",
                        "lc": "zuul",
                        "http.path": "/drivenow-mobility-service/getroutes",
                        "http.url": "/drivenow-mobility-service/getroutes",
                        "http.method": "POST",
                        "sa": "\u0001"
                    }
                },
                {
                    "caller": 305,
                    "callee": 304
                },
                {
                    "caller": 308,
                    "callee": 309
                },
                {
                    "caller": 309,
                    "callee": 304
                }
            ]
        },
        "234": {
            "component": {
                "id": 188,
                "type": "Activity",
                "name": "ACTIVITY_1: Booking Of A Route"
            },
            "child-relations": [
                {
                    "callee": 303
                },
                {
                    "caller": 303,
                    "callee": 305
                },
                {
                    "caller":...