Prototype using Cytoscape

For relational graph widget #4632

by Loxos

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": 303,
            "callee": 310,
            "annotations": {
              "http.status_code": "200",
              "lc": "zuul",
              "http.path": "/accounting-core-service/drive-now/3/book",
              "http.url": "/accounting-core-service/drive-now/3/book",
              "http.method": "GET",
              "sa": "\u0001"
            }
          },
          {
            "caller": 305,
            "callee":...