<!doctype html>
<html>
<head>
  <title>Network | Basic usage</title>

  <script type="text/javascript" src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    #mynetwork {
      width: 400px;
      height: 400px;
      border: 1px solid lightgray;
    }
  </style>
</head>

<body>

<div id="mynetwork"></div>

<script type="text/javascript">
  // create an array with nodes
  var nodes = [
    {id: 1, label: 'Node 1'},
    {id: 2, label: 'Node 2'},
    {id: 3, label: 'Node 3'},
    {id: 4, label: 'Node 4'},
    {id: 5, label: 'Node 5'},
    {id: 6, label: 'Node 6', cid:1},
    {id: 7, label: 'Node 7', cid:1},
    {id: 8, label: 'Node 8', cid:1},
    {id: 9, label: 'Node 9', cid:1},
    {id: 10, label: 'Node 10', cid:1}
  ];

  // create an array with edges
  var edges = [
    {from: 1, to: 2},
    {from: 1, to: 3},
    {from: 10, to: 4},
    {from: 2, to: 5},
    {from: 6, to: 2},
    {from: 7, to: 5},
    {from: 8, to: 6},
    {from: 9, to: 7},
    {from: 10, to: 9}
  ];

  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {};
  var network = new vis.Network(container, data, options);

  var clusterOptions = {
      joinCondition:function(parentOptions,childOptions) {
          return true;
      },
      processClusterProperties: function (properties, childNodes, childEdges) {
          return properties;
      },
      clusterNodeProperties: {id:'bla', borderWidth:2},
  }

  var clusterOptionsByData = {
      joinCondition:function(childOptions) {
          return childOptions.cid == 1;
      },
      processClusterProperties: function (properties, childNodes, childEdges) {
          return properties;
      },
      clusterNodeProperties: {id:'bla', borderWidth:2}
  }

//  network.clusterByNodeData(clusterOptionsByData)
  network.clustering.clusterOutliers({clusterNodeProperties: {shape:'database',borderWidth:3}})
//  network.clusterByConnection(2, clusterOptions);

//  network.clusterByConnection(9, {
//      joinCondition:function(parentOptions,childOptions) {return true;},
//      processProperties:function (properties, childNodes, childEdges) {
//          return properties;
//      },
//      clusterNodeProperties: {id:'bla2', label:"bla2", borderWidth:8}
//  });
    network.body.emitter.on("select", function(params) {
        console.log("here1234")
        if (params.nodes.length == 1) {
            if (network.clustering.isCluster(params.nodes[0]) == true) {
                network.clustering.openCluster(params.nodes[0])
            }
        }
    })
//  network.openCluster('bla');
//  network.openCluster('bla2');

</script>

</body>
</html>