vis.js: How to expand/collapse nodes with mouse click

Question

just playing around with vis.js for a day now and been through all the docs and examples. I'm trying to figure out the best way to refresh my node and edge data with click events. E.g. say I have one node with no edges, then I click it to add 3 child nodes. Could a vis.js expert suggest best way to do this?

Expected Before:

nodes = [{id: 1,   label:"Parent Node"} ];
edges = [ ];

Expected After click on id 1:

nodes = [{id: 1,   label:"Parent Node"},
{id: 2,   label:"Child Node1"},
{id: 3,   label:"Child Node2"},
{id: 4,   label:"Child Node3"} ];
edges = [ {from: 1, to: 2},
          {from: 1, to: 3},
          {from: 1, to: 4} ];

Then I'd want to collapse and go back to just the parent node w/ no children. I get how to do the event handling, it's the updating and redrawing of the nodes and edges I'm not sure about.

Answer 1

Once I posted I figured out my mistake, not using the dynamic DataSet(). So it should be like this:

var nodes = new vis.DataSet([{id: 1,   label:"Parent Node"}]);
var edges = new vis.DataSet([]);

Then you can update like so:

nodes.update({id: 2,   label:"Child Node1"});
nodes.update({id: 3,   label:"Child Node2"});
nodes.update({id: 4,   label:"Child Node3"});

edges.update({from: 1, to: 2});
edges.update({from: 1, to: 3});
edges.update({from: 1, to: 4});