Prototype using Cytoscape

For relational graph widget #4632

by Rishi Kumar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="http://js.cytoscape.org/js/cytoscape.min.js"></script>
<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://raw.githubusercontent.com/iVis-at-Bilkent/cytoscape.js-grid-guide/master/cytoscape-grid-guide.js"></script>
<div id="cy">

</div>

CSS

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

JavaScript

guideGrid(cytoscape, jquery)
var cy = cytoscape({
  container: document.getElementById('cy'),
  elements: {
    nodes: [
      { data: { id: 'a'}},
      {data: {id: 'a1'}},
      { data: { id: 'b', parent: 'a1'  } },
      { data: { id: 'c', parent: 'a1' }},
      { data: { id: 'd', parent: 'a1'  }},
      { data: { id: 'e' } },
      {data: {id: 'e1'}},
      { data: { id: 'f', parent: 'e1' }},
      { data: { id: 'g', parent: 'e1' }}
    ],
    edges: [
      { data: { id: 'ab', source: 'a', target: 'b' } },
      { data: { id: 'ac', source: 'a', target: 'c' } },
      { data: { id: 'ad', source: 'a', target: 'd' } },
      { data: { id: 'be', source: 'b', target: 'e' } },
      { data: { id: 'ce', source: 'c', target: 'e' } },
      { data: { id: 'de', source: 'd', target: 'e' } },
      { data: { id: 'ef', source: 'e', target: 'f' } },
      { data: { id: 'eg', source: 'e', target: 'g' } }

    ]
  },
  layout: {
    name: "dagre"
  },
  style: [{
      selector: 'node',
      css: {
        'content': 'data(id)',
        'text-valign': 'center',
        'text-halign': 'center'
      }
    },
    {
      selector: '$node > node',
      css: {
        'padding-top': '10px',
        'padding-left': '50px',
        'padding-bottom': '10px',
        'padding-right': '10px',
        'text-valign': 'top',
        'text-halign': 'left',
        'background-color': '#bbb'
      }
    },
    {
      selector: 'edge',
      css: {
        'target-arrow-shape': 'triangle'
      }
    },
    {
      selector: ':selected',
      css: {
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      }
    }]
});