Prototype using Cytoscape

For relational graph widget #4632

by bilbobaggins

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.30.2/cytoscape.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/cpettitt/[email protected]/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

var cy = cytoscape({
  container: document.getElementById('cy'),
  elements: {
          nodes: 
[
  {
    "data": {
      "id": "zn_Wmrb2xlafyQmd652",
      "label": "cluster"
    }
  },
  {
    "data": {
      "id": "main_zone",
      "label": "New",
      "main_zone": true
    }
  },
  {
    "data": {
      "id": "zn_WmgNeRlafwrjiLNW",
      "label": "cluster"
    }
  },
  {
    "data": {
      "id": "zn_Wmr6nRlafyQmd658",
      "label": "dftb"
    }
  },
  
  {
    "data": {
      "id": "zn_WnBhFBlafzUlU_5F",
      "label": "vasp_sp"
    }
  },
  {
    "data": {
      "id": "zn_WnMH7hlafzUlVRwL",
      "label": "vasp_sp"
    }
  },
  
],
          edges: [{
  "data": {
    "id": "fw_Wmrb2xlafyQmd653",
    "source": "main_zone",
    "target": "zn_Wmrb2xlafyQmd652",
    "label": "csp",
    "fw_type": "csp"
  },
  "classes": "autorotate"
},
{
  "data": {
    "id": "fw_WmgNeRlafwrjiLNX",
    "source": "zn_Wmrb2xlafyQmd652",
    "target": "zn_WmgNeRlafwrjiLNW",
    "label": "csp",
    "fw_type": "cluster"
  },
  "classes": "autorotate"
}]
        },
  layout: {
    name: "dagre",
    rankDir: 'LR'
  },
  style:
  
   

  [
    {
    selector: 'node',
    style: {
      'label': 'data(id)',
      'width': '100%',
      'height': '70%',
      'font-size': '8px',
      'text-valign': 'center',
      'shape': 'rectangle',
      'background-color': 'rgba(113,158,252,1)'
    }
  }, {
    selector: 'edge',
    style: {
      'width': 2,
      'line-color': '#ccc',
      'target-arrow-color': '#ccc',
      'target-arrow-shape': 'triangle'
    }
  }]
});
let container = document.getElementById("cy");
    container.style.height = `calc(100% - 410px)`;

    this.cy.resize();
    this.cy.fit();