Graph now uses an id based set of nodes and edges instead of a row based array internally, and supports DataSet

HISTORY.md

@@ -2,6 +2,15 @@ vis.js history
 http://visjs.org
 
 
+## version 0.1.0
+
+- Graph now uses an id based set of nodes and edges instead of a row based array
+  internally.
+- Added support for DataSet to Graph.
+- Methods getSelection and setSelection of Graph now accept a list with ids
+  instead of rows.
+
+
 ## 2013-06-07, version 0.0.9
 
 - First working version of the Graph imported from the old library.

docs/graph.html

@@ -1039,10 +1039,10 @@ var nodes = [
 
     <tr>
         <td>getSelection()</td>
-        <td>Array of selection elements</td>
-        <td>Standard <code>getSelection()</code> implementation.
-            Returns an array with one or multiple selections. Each selection contains
-            the property <code>row</code>. The selections are not ordered.
+        <td>Array of ids</td>
+        <td>Returns an array with the ids of the selected nodes.
+            Returns an empty array if no nodes are selected.
+            The selections are not ordered.
         </td>
     </tr>
 
@@ -1055,10 +1055,11 @@ var nodes = [
     <tr>
         <td>setSelection(selection)</td>
         <td>none</td>
-        <td>Standard <code>setSelection(selection)</code> implementation.
-            <code>selection</code> is an array with selection elements. The visualization
-            accepts one or multiple selection elements, which must have the property <code>row</code>.
-            Example usage: <code>graph.setSelection([{"row": 3}]);</code>.
+        <td>Select nodes.
+            <code>selection</code> is an array with ids of nodes to be selected.
+            The array <code>selection</code> can contain zero or multiple ids.
+            Example usage: <code>graph.setSelection([3, 5]);</code> will select
+            nodes with id 3 and 5.
         </td>
     </tr>
 
@@ -1083,18 +1084,11 @@ var nodes = [
 </p>
 
 <pre class="prettyprint lang-js">
-function onselect() {
-    var sel = graph.getSelection();
-
-    var info = 'selected row(s): ';
-    for (var i = 0; i &lt; sel.length; i++) {
-        info += sel[i].row + ' ';
-    }
-
-    alert(info);
+function onSelect() {
+    alert('selected nodes: ' + graph.getSelection());
 }
 
-vis.events.addListener(graph, 'select', onselect);
+vis.events.addListener(graph, 'select', onSelect);
 </pre>
 
 <p>
@@ -1117,9 +1111,8 @@ vis.events.addListener(graph, 'select', onselect);
         <td>Fired after the user selects or unselects a node by clicking it,
             or when selecting a number of nodes by dragging a selection area
             around them. Not fired when the method <code>setSelection</code>
-            is executed. The corresponding rows in the Array are selected.
-            <br>
-            The selected rows can be retrieved via the method <code>getSelection</code>.
+            is executed. The ids of the selected nodes can be retrieved via the
+            method <code>getSelection</code>.
         </td>
         <td>none</td>
     </tr>

examples/graph/02_random_nodes.html

@@ -88,7 +88,7 @@
             // add event listeners
             vis.events.addListener(graph, 'select', function(params) {
                 document.getElementById('selection').innerHTML =
-                        'Selection: ' + JSON.stringify(graph.getSelection());
+                        'Selection: ' + graph.getSelection();
             });
         }
     </script>

examples/graph/07_selections.html

@@ -52,24 +52,13 @@
 
     // add event listener
     function onSelect() {
-        var selection = graph.getSelection();
-
-        var info = 'selection: ';
-        selection.forEach(function (s) {
-            info += s.row + ' ';
-        });
-
-        document.getElementById('info').innerHTML += info + '<br>';
+        document.getElementById('info').innerHTML +=
+                'selection: ' + graph.getSelection().join(', ') + '<br>';
     }
     vis.events.addListener(graph, 'select', onSelect);
 
-    // set initial selection (row based, zero-based)
-    var selection = [
-        {'row': 2},
-        {'row': 3},
-        {'row': 4}
-    ];
-    graph.setSelection(selection);
+    // set initial selection (id's of some nodes)
+    graph.setSelection([3, 4, 5]);
 </script>
 
 </body>

examples/graph/16_dynamic_data.html

@@ -0,0 +1,265 @@
+<!doctype html>
+<html>
+<head>
+    <title>Graph | DataSet</title>
+
+    <style type="text/css">
+        html, body {
+            font: 11pt arial;
+        }
+
+        h1 {
+            font-size: 150%;
+            margin: 5px 0;
+        }
+
+        h2 {
+            font-size: 100%;
+            margin: 5px 0;
+        }
+
+        table.view {
+            width: 100%;
+        }
+
+        table td {
+            vertical-align: top;
+        }
+
+        table table {
+            background-color: #f5f5f5;
+            border: 1px solid #e5e5e5;
+        }
+
+        table table td {
+            vertical-align: middle;
+        }
+
+        input[type=text], pre {
+            border: 1px solid lightgray;
+        }
+
+        pre {
+            margin: 0;
+            padding: 5px;
+            font-size: 10pt;
+        }
+
+        #graph {
+            width: 100%;
+            height: 400px;
+            border: 1px solid lightgray;
+        }
+    </style>
+
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
+    <script type="text/javascript" src="../../vis.js"></script>
+
+    <script type="text/javascript">
+        var nodes, edges, graph;
+
+        // convenience method to stringify a JSON object
+        function toJSON (obj) {
+            return JSON.stringify(obj, null, 4);
+        }
+
+        $(window).load(function () {
+            // attach actions to the node buttons
+            $('#node-add').click(function () {
+                try {
+                    nodes.add({
+                        id: $('#node-id').val(),
+                        label: $('#node-label').val()
+                    });
+                }
+                catch (err) {
+                    alert(err);
+                }
+            });
+            $('#node-update').click(function () {
+                try {
+                    nodes.update({
+                        id: $('#node-id').val(),
+                        label: $('#node-label').val()
+                    });
+                }
+                catch (err) {
+                    alert(err);
+                }
+            });
+            $('#node-remove').click(function () {
+                try {
+                    var id = $('#node-id').val();
+                    nodes.remove(id);
+                }
+                catch (err) {
+                    alert(err);
+                }
+            });
+
+            // attach actions to the edge buttons
+            $('#edge-add').click(function () {
+                try {
+                    edges.add({
+                        id: $('#edge-id').val(),
+                        from: $('#edge-from').val(),
+                        to: $('#edge-to').val()
+                    });
+                }
+                catch (err) {
+                    alert(err);
+                }
+            });
+            $('#edge-update').click(function () {
+                try {
+                    edges.update({
+                        id: $('#edge-id').val(),
+                        from: $('#edge-from').val(),
+                        to: $('#edge-to').val()
+                    });
+                }
+                catch (err) {
+                    alert(err);
+                }
+            });
+            $('#edge-remove').click(function () {
+                try {
+                    var id = $('#edge-id').val();
+                    edges.remove(id);
+                }
+                catch (err) {
+                    alert(err);
+                }
+            });
+
+            // create an array with nodes
+            nodes = new vis.DataSet();
+            nodes.subscribe('*', function () {
+                $('#nodes').html(toJSON(nodes.get()));
+            });
+            nodes.add([
+                {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'}
+            ]);
+
+            // create an array with edges
+            edges = new vis.DataSet();
+            edges.subscribe('*', function () {
+                $('#edges').html(toJSON(edges.get()));
+            });
+            edges.add([
+                {id: '1', from: '1', to: '2'},
+                {id: '2', from: '1', to: '3'},
+                {id: '3', from: '2', to: '4'},
+                {id: '4', from: '2', to: '5'}
+            ]);
+
+            // create a graph
+            var container = $('#graph').get(0);
+            var data = {
+                nodes: nodes,
+                edges: edges
+            };
+            var options = {};
+            graph = new vis.Graph(container, data, options);
+        });
+    </script>
+</head>
+
+<body>
+
+<p>
+    This example demonstrates dynamically adding, updating and removing nodes
+    using a DataSet.
+</p>
+
+<h1>Adjust</h1>
+<table>
+    <tr>
+        <td>
+            <h2>Node</h2>
+            <table>
+                <tr>
+                    <td></td>
+                    <td><label for="node-id">Id</label></td>
+                    <td><input id="node-id" type="text" value="6"></td>
+                </tr>
+                <tr>
+                    <td></td>
+                    <td><label for="node-label">Label</label></td>
+                    <td><input id="node-label" type="text" value="Node 6"></td>
+                </tr>
+                <tr>
+                    <td></td>
+                    <td>Action</td>
+                    <td>
+                        <button id="node-add">Add</button>
+                        <button id="node-update">Update</button>
+                        <button id="node-remove">Remove</button>
+                    </td>
+                </tr>
+            </table>
+        </td>
+        <td>
+            <h2>Edge</h2>
+            <table>
+                <tr>
+                    <td></td>
+                    <td><label for="edge-id">Id</label></td>
+                    <td><input id="edge-id" type="text" value="5"></td>
+                </tr>
+                <tr>
+                    <td></td>
+                    <td><label for="edge-from">From</label></td>
+                    <td><input id="edge-from" type="text" value="3"></td>
+                </tr>
+                <tr>
+                    <td></td>
+                    <td><label for="edge-to">To</label></td>
+                    <td><input id="edge-to" type="text" value="4"></td>
+                </tr>
+                <tr>
+                    <td></td>
+                    <td>Action</td>
+                    <td>
+                        <button id="edge-add">Add</button>
+                        <button id="edge-update">Update</button>
+                        <button id="edge-remove">Remove</button>
+                    </td>
+                </tr>
+            </table>
+        </td>
+    </tr>
+
+</table>
+
+<h1>View</h1>
+<table class="view">
+    <colgroup>
+        <col width="25%">
+        <col width="25%">
+        <col width="50%">
+    </colgroup>
+    <tr>
+        <td>
+            <h2>Nodes</h2>
+            <pre id="nodes"></pre>
+        </td>
+
+        <td>
+            <h2>Edges</h2>
+            <pre id="edges"></pre>
+        </td>
+
+        <td>
+            <h2>Graph</h2>
+            <div id="graph"></div>
+        </td>
+    </tr>
+</table>
+
+</body>
+</html>

src/DataSet.js

@@ -34,6 +34,7 @@
  *                                              and the field type as value.
  * @constructor DataSet
  */
+// TODO: add a DataSet constructor DataSet(data, options)
 function DataSet (options) {
     this.id = util.randomUUID();
 

src/graph/Edge.js

@@ -34,11 +34,11 @@ function Edge (properties, graph, constants) {
     // Added to support dashed lines
     // David Jordan
     // 2012-08-08
-    this.dash = util.extend({}, constants.edges.dash); // contains properties length, gaph, altLength
+    this.dash = util.extend({}, constants.edges.dash); // contains properties length, gap, altLength
 
-    this.stiffness = undefined; // depends on the length of the edge
-    this.color  = constants.edges.color;
-    this.widthFixed = false;
+    this.stiffness   = undefined; // depends on the length of the edge
+    this.color       = constants.edges.color;
+    this.widthFixed  = false;
     this.lengthFixed = false;
 
     this.setProperties(properties, constants);
@@ -54,12 +54,12 @@ Edge.prototype.setProperties = function(properties, constants) {
         return;
     }
 
-    if (properties.from != undefined) {this.from = this.graph._getNode(properties.from);}
-    if (properties.to != undefined) {this.to = this.graph._getNode(properties.to);}
+    if (properties.from != undefined)           {this.from = this.graph.nodes[properties.from];}
+    if (properties.to != undefined)             {this.to = this.graph.nodes[properties.to];}
 
-    if (properties.id != undefined)         {this.id = properties.id;}
-    if (properties.style != undefined)      {this.style = properties.style;}
-    if (properties.label != undefined)       {this.label = properties.label;}
+    if (properties.id != undefined)             {this.id = properties.id;}
+    if (properties.style != undefined)          {this.style = properties.style;}
+    if (properties.label != undefined)          {this.label = properties.label;}
     if (this.label) {
         this.fontSize = constants.edges.fontSize;
         this.fontFace = constants.edges.fontFace;
@@ -68,17 +68,17 @@ Edge.prototype.setProperties = function(properties, constants) {
         if (properties.fontSize != undefined)   {this.fontSize = properties.fontSize;}
         if (properties.fontFace != undefined)   {this.fontFace = properties.fontFace;}
     }
-    if (properties.title != undefined)      {this.title = properties.title;}
-    if (properties.width != undefined)      {this.width = properties.width;}
-    if (properties.value != undefined)      {this.value = properties.value;}
-    if (properties.length != undefined)     {this.length = properties.length;}
+    if (properties.title != undefined)          {this.title = properties.title;}
+    if (properties.width != undefined)          {this.width = properties.width;}
+    if (properties.value != undefined)          {this.value = properties.value;}
+    if (properties.length != undefined)         {this.length = properties.length;}
 
     // Added to support dashed lines
     // David Jordan
     // 2012-08-08
     if (properties.dash) {
-        if (properties.dash.length != undefined) {this.dash.length = properties.dash.length;}
-        if (properties.dash.gap != undefined) {this.dash.gap = properties.dash.gap;}
+        if (properties.dash.length != undefined)    {this.dash.length = properties.dash.length;}
+        if (properties.dash.gap != undefined)       {this.dash.gap = properties.dash.gap;}
         if (properties.dash.altLength != undefined) {this.dash.altLength = properties.dash.altLength;}
     }
     

src/timeline/component/ItemSet.js

@@ -394,19 +394,8 @@ ItemSet.prototype.hide = function hide() {
  */
 ItemSet.prototype.setItems = function setItems(items) {
     var me = this,
-        ids;
-
-    // unsubscribe from current dataset
-    var current = this.itemsData;
-    if (current) {
-        util.forEach(this.listeners, function (callback, event) {
-            current.unsubscribe(event, callback);
-        });
-
-        // remove all drawn items
-        ids = current.getIds();
-        this._onRemove(ids);
-    }
+        ids,
+        oldItemsData = this.itemsData;
 
     // replace the dataset
     if (!items) {
@@ -419,6 +408,17 @@ ItemSet.prototype.setItems = function setItems(items) {
         throw new TypeError('Data must be an instance of DataSet');
     }
 
+    if (oldItemsData) {
+        // unsubscribe from old dataset
+        util.forEach(this.listeners, function (callback, event) {
+            oldItemsData.unsubscribe(event, callback);
+        });
+
+        // remove all drawn items
+        ids = oldItemsData.getIds();
+        this._onRemove(ids);
+    }
+
     if (this.itemsData) {
         // subscribe to new dataset
         var id = this.id;