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>
<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": 304
        },
        {
          "caller": 310,
          "callee": 311
        },
        {
          "caller": 311,
          "callee": 304
        }
     ...