cytoscape compound groups

by Rishi Kumar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.5.3/cytoscape.min.js"></script>
<script src="https://cdn.rawgit.com/cpettitt/dagre/master/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/master/cytoscape-dagre.js"></script>
<div id="cy" style="width: 800px; height: 800px;"></div>

JavaScript

var style = [
    {
      selector: 'node',
      css: {
        'content': 'data(id)',
        'text-valign': 'center',
        'text-halign': 'center',
        'background-color': '#11479e'
      }
    },
    {
      selector: 'edge',
      css: {
        'label': 'data(id)',
        'font-size': 10,
        'target-arrow-shape': 'vee',
      }
    },
    {
      selector: ':active',
      css: {
        'background-color': 'red'
      }
    },
    {
    	selector: '$node > node',
      css: {
      	'background-color': 'grey',
        'background-opacity': .05,
        'border-color': 'grey',
        'border-opacity': .05,
        'content': 'data(id)',
        'text-valign': 'top',
        'text-halign': 'center',
        'text-background-color': 'red',
        'text-background-padding': '5px',
        'text-background-opacity': 1
      }
    }
  ]

  // graph --------------------------------------------------------------------
  var children_a = ['a_1', 'a_2', 'a_3'];
  var children_b = ['b_1', 'b_2', 'b_3'];
  data = {
    nodes: ['A', ...children_a, 'B', ...children_b].map(make_node),
    edges: [
      ...children_a.map((v) => make_edge("A", v)),
      ...children_b.map((v) => make_edge("B", v))
    ]
  }

  cy = init(data);
  cy.add({data: {id: 'group_A'}});
  grp_a = cy.$("node[id = 'group_A']");
	man_a = cy.$("node[id = 'A']").connectedEdges().targets()
                                .move({parent: 'group_A'});
  
 

  function make_node(id){
    return { data: { id: id, label: id } }
  }

  function make_edge(src, trgt){
    var id = `${src}_x_${trgt}`
    return { data: { id: id, source: src, target: trgt, label: id}}
  }

  function init(data){
    return cytoscape({
      container: document.getElementById('cy'),
      boxSelectionEnabled: false,
      //autounselectify: true,
      layout: {
        name: 'dagre',
      },
      style: style,
      elements: data
    })
  }