more examples, more tweaks, small expansion of the validator to check locally for matches.

dist/vis.js

@@ -19396,7 +19396,9 @@ return /******/ (function(modules) { // webpackBootstrap
         var localSearchThreshold = 8;
         var globalSearchThreshold = 4;
 
-        if (globalSearch.distance <= globalSearchThreshold && localSearch.distance > globalSearch.distance) {
+        if (localSearch.indexMatch !== undefined) {
+          console.log('%cUnknown option detected: "' + option + '" in ' + Validator.printLocation(localSearch.path, option, '') + 'Perhaps it was incomplete? Did you mean: "' + localSearch.indexMatch + '"?\n\n', printStyle);
+        } else if (globalSearch.distance <= globalSearchThreshold && localSearch.distance > globalSearch.distance) {
           console.log('%cUnknown option detected: "' + option + '" in ' + Validator.printLocation(localSearch.path, option, '') + 'Perhaps it was misplaced? Matching option found at: ' + Validator.printLocation(globalSearch.path, globalSearch.closestMatch, ''), printStyle);
         } else if (localSearch.distance <= localSearchThreshold) {
           console.log('%cUnknown option detected: "' + option + '". Did you mean "' + localSearch.closestMatch + '"?' + Validator.printLocation(localSearch.path, option), printStyle);
@@ -19424,6 +19426,8 @@ return /******/ (function(modules) { // webpackBootstrap
         var min = 1000000000;
         var closestMatch = '';
         var closestMatchPath = [];
+        var lowerCaseOption = option.toLowerCase();
+        var indexMatch = undefined;
         for (var op in options) {
           var type = Validator.getType(options[op]);
           var distance = undefined;
@@ -19433,8 +19437,12 @@ return /******/ (function(modules) { // webpackBootstrap
               closestMatch = result.closestMatch;
               closestMatchPath = result.path;
               min = result.distance;
+              indexMatch = result.indexMatch;
             }
           } else {
+            if (op.toLowerCase().indexOf(lowerCaseOption) !== -1) {
+              indexMatch = op;
+            }
             distance = Validator.levenshteinDistance(option, op);
             if (min > distance) {
               closestMatch = op;
@@ -19443,7 +19451,7 @@ return /******/ (function(modules) { // webpackBootstrap
             }
           }
         }
-        return { closestMatch: closestMatch, path: closestMatchPath, distance: min };
+        return { closestMatch: closestMatch, path: closestMatchPath, distance: min, indexMatch: indexMatch };
       }
     }, {
       key: 'printLocation',
@@ -20949,7 +20957,7 @@ return /******/ (function(modules) { // webpackBootstrap
             min: 14,
             max: 30,
             maxVisible: 30,
-            drawThreshold: 6
+            drawThreshold: 5
           },
           customScalingFunction: function customScalingFunction(min, max, total, value) {
             if (max === min) {
@@ -21407,7 +21415,7 @@ return /******/ (function(modules) { // webpackBootstrap
             min: 14,
             max: 30,
             maxVisible: 30,
-            drawThreshold: 6
+            drawThreshold: 5
           },
           customScalingFunction: function customScalingFunction(min, max, total, value) {
             if (max === min) {

docs/network/edges.html

@@ -138,7 +138,7 @@ var options = {
         min: 14,
         max: 30,
         maxVisible: 30,
-        drawThreshold: 6
+        drawThreshold: 5
       },
       customScalingFunction: function (min,max,total,value) {
         if (max === min) {
@@ -480,7 +480,7 @@ var options: {
         <tr parent="scaling" class="hidden">
             <td class="indent2">scaling.label.drawThreshold</td>
             <td>Number</td>
-            <td><code>6</code></td>
+            <td><code>5</code></td>
             <td>When zooming out, the font will be drawn smaller. This defines a lower limit for when the font is drawn.
                 When using font scaling, you can use this together with the maxVisible to first show labels of important
                 edges when zoomed out and only show the rest when zooming in.

docs/network/nodes.html

@@ -143,7 +143,7 @@ var options = {
         min: 14,
         max: 30,
         maxVisible: 30,
-        drawThreshold: 6
+        drawThreshold: 5
       },
       customScalingFunction: function (min,max,total,value) {
         if (max === min) {
@@ -507,7 +507,7 @@ network.setOptions(options);
         <tr parent="scaling" class="hidden">
             <td class="indent2">scaling.label.drawThreshold</td>
             <td>Number</td>
-            <td><code>6</code></td>
+            <td><code>5</code></td>
             <td>When zooming out, the font will be drawn smaller. This defines a lower limit for when the font is drawn.
                 When using font scaling, you can use this together with the maxVisible to first show labels of important
                 nodes when zoomed out and only show the rest when zooming in.

examples/network/categories/23_hierarchical_layout.html

@@ -1,156 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <title>Network | Hierarchical layout</title>
-
-  <style type="text/css">
-    body {
-      font: 10pt sans;
-    }
-    #mynetwork {
-      width: 600px;
-      height: 600px;
-      border: 1px solid lightgray;
-    }
-  </style>
-
-  <script type="text/javascript" src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-
-  <script type="text/javascript">
-    var nodes = null;
-    var edges = null;
-    var network = null;
-
-    function destroy() {
-        if (network !== null) {
-            network.destroy();
-            network = null;
-        }
-    }
-
-    function draw() {
-      destroy();
-      nodes = [];
-      edges = [];
-      var connectionCount = [];
-
-      // randomly create some nodes and edges
-      var nodeCount = document.getElementById('nodeCount').value;
-      for (var i = 0; i < nodeCount; i++) {
-        nodes.push({
-          id: i,
-          label: String(i)
-        });
-
-        connectionCount[i] = 0;
-
-        // create edges in a scale-free-network way
-        if (i == 1) {
-          var from = i;
-          var to = 0;
-          edges.push({
-            from: from,
-            to: to
-          });
-          connectionCount[from]++;
-          connectionCount[to]++;
-        }
-        else if (i > 1) {
-          var conn = edges.length * 2;
-          var rand = Math.floor(Math.random() * conn);
-          var cum = 0;
-          var j = 0;
-          while (j < connectionCount.length && cum < rand) {
-            cum += connectionCount[j];
-            j++;
-          }
-
-
-          var from = i;
-          var to = j;
-          edges.push({
-            from: from,
-            to: to
-          });
-          connectionCount[from]++;
-          connectionCount[to]++;
-        }
-      }
-
-      // create a network
-      var container = document.getElementById('mynetwork');
-      var data = {
-        nodes: nodes,
-        edges: edges
-      };
-    var directionInput = document.getElementById("direction").value;
-    var options = {
-        layout: {
-            hierarchical:{
-                direction: directionInput
-            }
-        }
-    };
-      network = new vis.Network(container, data, options);
-
-      // add event listeners
-      network.on('select', function(params) {
-        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
-      });
-    }
-
-  </script>
-  <script src="../googleAnalytics.js"></script>
-</head>
-
-<body onload="draw();">
-<h2>Hierarchical Layout - Scale-Free-Network</h2>
-<div style="width:700px; font-size:14px; text-align: justify;">
-    This example shows the randomly generated <b>scale-free-network</b> set of nodes and connected edges from example 2.
-    In this example, hierarchical layout has been enabled and the vertical levels are determined automatically.
-</div>
-<br />
-<form onsubmit="draw(); return false;">
-  <label for="nodeCount">Number of nodes:</label>
-  <input id="nodeCount" type="text" value="25" style="width: 50px;">
-  <input type="submit" value="Go">
-</form>
-<p>
-  <input type="button" id="btn-UD" value="Up-Down">
-  <input type="button" id="btn-DU" value="Down-Up">
-  <input type="button" id="btn-LR" value="Left-Right">
-  <input type="button" id="btn-RL" value="Right-Left">
-  <input type="hidden" id='direction' value="UD">
-</p>
-
-<script language="javascript">
-    var directionInput = document.getElementById("direction");
-    var btnUD = document.getElementById("btn-UD");
-    btnUD.onclick = function() {
-        directionInput.value = "UD";
-        draw();
-    }
-    var btnDU = document.getElementById("btn-DU");
-    btnDU.onclick = function() {
-        directionInput.value = "DU";
-        draw();
-    };
-    var btnLR = document.getElementById("btn-LR");
-    btnLR.onclick = function() {
-        directionInput.value = "LR";
-        draw();
-    };
-    var btnRL = document.getElementById("btn-RL");
-    btnRL.onclick = function() {
-        directionInput.value = "RL";
-        draw();
-    };
-</script>
-<br>
-
-<div id="mynetwork"></div>
-
-<p id="selection"></p>
-</body>
-</html>

examples/network/categories/data/dynamic_data.html

@@ -1,266 +1,265 @@
 <!doctype html>
 <html>
 <head>
-  <title>Network | DataSet</title>
+    <title>Network | DataSet</title>
 
-  <style type="text/css">
-    html, body {
-      font: 11pt arial;
-    }
-
-    h1 {
-      font-size: 150%;
-      margin: 5px 0;
-    }
+    <style type="text/css">
+        html, body {
+            font: 11pt arial;
+        }
 
-    h2 {
-      font-size: 100%;
-      margin: 5px 0;
-    }
+        h1 {
+            font-size: 150%;
+            margin: 5px 0;
+        }
 
-    table.view {
-      width: 100%;
-    }
+        h2 {
+            font-size: 100%;
+            margin: 5px 0;
+        }
 
-    table td {
-      vertical-align: top;
-    }
+        table.view {
+            width: 100%;
+        }
 
-    table table {
-      background-color: #f5f5f5;
-      border: 1px solid #e5e5e5;
-    }
+        table td {
+            vertical-align: top;
+        }
 
-    table table td {
-      vertical-align: middle;
-    }
+        table table {
+            background-color: #f5f5f5;
+            border: 1px solid #e5e5e5;
+        }
 
-    input[type=text], pre {
-      border: 1px solid lightgray;
-    }
+        table table td {
+            vertical-align: middle;
+        }
 
-    pre {
-      margin: 0;
-      padding: 5px;
-      font-size: 10pt;
-    }
+        input[type=text], pre {
+            border: 1px solid lightgray;
+        }
 
-    #network {
-      width: 100%;
-      height: 400px;
-      border: 1px solid lightgray;
-    }
-  </style>
+        pre {
+            margin: 0;
+            padding: 5px;
+            font-size: 10pt;
+        }
 
-  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
-  <script type="text/javascript" src="../../../../dist/vis.js"></script>
-  <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
+        #network {
+            width: 100%;
+            height: 400px;
+            border: 1px solid lightgray;
+        }
+    </style>
 
-  <script type="text/javascript">
-    var nodes, edges, network;
+    <script type="text/javascript" src="../../../../dist/vis.js"></script>
+    <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css"/>
 
-    // convenience method to stringify a JSON object
-    function toJSON (obj) {
-      return JSON.stringify(obj, null, 4);
-    }
+    <script type="text/javascript">
+        var nodes, edges, network;
 
-    $(window).load(function () {
-      // attach actions to the node buttons
-      $('#node-add').click(function () {
-        try {
-          nodes.add({
-            id: $('#node-id').val(),
-            label: $('#node-label').val()
-          });
+        // convenience method to stringify a JSON object
+        function toJSON(obj) {
+            return JSON.stringify(obj, null, 4);
         }
-        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()
-          });
+        function addNode() {
+            try {
+                nodes.add({
+                    id: document.getElementById('node-id').value,
+                    label: document.getElementById('node-label').value
+                });
+            }
+            catch (err) {
+                alert(err);
+            }
         }
-        catch (err) {
-          alert(err);
+
+        function updateNode() {
+            try {
+                nodes.update({
+                    id: document.getElementById('node-id').value,
+                    label: document.getElementById('node-label').value
+                });
+            }
+            catch (err) {
+                alert(err);
+            }
         }
-      });
-      $('#edge-update').click(function () {
-        try {
-          edges.update({
-            id: $('#edge-id').val(),
-            from: $('#edge-from').val(),
-            to: $('#edge-to').val()
-          });
+        function removeNode() {
+            try {
+                nodes.remove({id: document.getElementById('node-id').value});
+            }
+            catch (err) {
+                alert(err);
+            }
         }
-        catch (err) {
-          alert(err);
+
+        function addEdge() {
+            try {
+                edges.add({
+                    id: document.getElementById('edge-id').value,
+                    from: document.getElementById('edge-from').value,
+                    to: document.getElementById('edge-to').value
+                });
+            }
+            catch (err) {
+                alert(err);
+            }
         }
-      });
-      $('#edge-remove').click(function () {
-        try {
-          var id = $('#edge-id').val();
-          edges.remove(id);
+        function updateEdge() {
+            try {
+                edges.update({
+                    id: document.getElementById('edge-id').value,
+                    from: document.getElementById('edge-from').value,
+                    to: document.getElementById('edge-to').value
+                });
+            }
+            catch (err) {
+                alert(err);
+            }
         }
-        catch (err) {
-          alert(err);
+        function removeEdge() {
+            try {
+                edges.remove({id: document.getElementById('edge-id').value});
+            }
+            catch (err) {
+                alert(err);
+            }
         }
-      });
 
-      // create an array with nodes
-      nodes = new vis.DataSet();
-      nodes.on('*', 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'}
-      ]);
+        function draw() {
+            // create an array with nodes
+            nodes = new vis.DataSet();
+            nodes.on('*', function () {
+                document.getElementById('nodes').innerHTML = JSON.stringify(nodes.get(), null, 4);
+            });
+            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.on('*', function () {
+                document.getElementById('edges').innerHTML = JSON.stringify(edges.get(), null, 4);
+            });
+            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 an array with edges
-      edges = new vis.DataSet();
-      edges.on('*', 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 network
+            var container = document.getElementById('network');
+            var data = {
+                nodes: nodes,
+                edges: edges
+            };
+            var options = {};
+            network = new vis.Network(container, data, options);
 
-      // create a network
-      var container = $('#network').get(0);
-      var data = {
-        nodes: nodes,
-        edges: edges
-      };
-      var options = {};
-      network = new vis.Network(container, data, options);
-    });
-  </script>
-  <script src="../../../googleAnalytics.js"></script>
+        }
+
+    </script>
+    <script src="../../../googleAnalytics.js"></script>
 </head>
 
-<body>
+<body onload="draw();">
 
 <p>
-  This example demonstrates dynamically adding, updating and removing nodes
-  and edges using a DataSet.
+    This example demonstrates dynamically adding, updating and removing nodes
+    and edges 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>
+    <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" onclick="addNode();">Add</button>
+                        <button id="node-update" onclick="updateNode();">Update</button>
+                        <button id="node-remove" onclick="removeNode();">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" onclick="addEdge();">Add</button>
+                        <button id="edge-update" onclick="updateEdge();">Update</button>
+                        <button id="edge-remove" onclick="removeEdge();">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>
+    <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>Edges</h2>
-      <pre id="edges"></pre>
-    </td>
+        <td>
+            <h2>Network</h2>
 
-    <td>
-      <h2>Network</h2>
-      <div id="network"></div>
-    </td>
-  </tr>
+            <div id="network"></div>
+        </td>
+    </tr>
 </table>
 
 </body>

examples/network/categories/32_hierarchicaLayoutMethods.html → examples/network/categories/layout/hierarchica_layout_methods.html

@@ -14,8 +14,8 @@
     }
   </style>
 
-  <script type="text/javascript" src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script type="text/javascript" src="../../../../dist/vis.js"></script>
+  <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var network = null;
@@ -74,15 +74,10 @@
         }
       };
       network = new vis.Network(container, data, options);
-
-      // add event listeners
-      network.on('select', function(params) {
-        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
-      });
     }
 
   </script>
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../../googleAnalytics.js"></script>
 </head>
 
 <body onload="draw();">

examples/network/categories/layout/hierarchical_layout.html

@@ -0,0 +1,114 @@
+<!doctype html>
+<html>
+<head>
+    <title>Network | Hierarchical layout</title>
+
+    <style type="text/css">
+        body {
+            font: 10pt sans;
+        }
+
+        #mynetwork {
+            width: 600px;
+            height: 600px;
+            border: 1px solid lightgray;
+        }
+    </style>
+
+    <script type="text/javascript" src="../../exampleUtil.js"></script>
+    <script type="text/javascript" src="../../../../dist/vis.js"></script>
+    <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css"/>
+
+
+    <script type="text/javascript">
+        var nodes = null;
+        var edges = null;
+        var network = null;
+
+        function destroy() {
+            if (network !== null) {
+                network.destroy();
+                network = null;
+            }
+        }
+
+        function draw() {
+            destroy();
+            // randomly create some nodes and edges
+            var nodeCount = document.getElementById('nodeCount').value;
+            var data = getScaleFreeNetwork(nodeCount)
+
+            // create a network
+            var container = document.getElementById('mynetwork');
+            var directionInput = document.getElementById("direction").value;
+            var options = {
+                layout: {
+                    hierarchical: {
+                        direction: directionInput
+                    }
+                }
+            };
+            network = new vis.Network(container, data, options);
+
+            // add event listeners
+            network.on('select', function (params) {
+                document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
+            });
+        }
+
+    </script>
+    <script src="../googleAnalytics.js"></script>
+</head>
+
+<body onload="draw();">
+<h2>Hierarchical Layout - Scale-Free-Network</h2>
+
+<div style="width:700px; font-size:14px; text-align: justify;">
+    This example shows the randomly generated <b>scale-free-network</b> set of nodes and connected edges from example 2.
+    In this example, hierarchical layout has been enabled and the vertical levels are determined automatically.
+</div>
+<br/>
+
+<form onsubmit="draw(); return false;">
+    <label for="nodeCount">Number of nodes:</label>
+    <input id="nodeCount" type="text" value="25" style="width: 50px;">
+    <input type="submit" value="Go">
+</form>
+<p>
+    <input type="button" id="btn-UD" value="Up-Down">
+    <input type="button" id="btn-DU" value="Down-Up">
+    <input type="button" id="btn-LR" value="Left-Right">
+    <input type="button" id="btn-RL" value="Right-Left">
+    <input type="hidden" id='direction' value="UD">
+</p>
+
+<script language="javascript">
+    var directionInput = document.getElementById("direction");
+    var btnUD = document.getElementById("btn-UD");
+    btnUD.onclick = function () {
+        directionInput.value = "UD";
+        draw();
+    }
+    var btnDU = document.getElementById("btn-DU");
+    btnDU.onclick = function () {
+        directionInput.value = "DU";
+        draw();
+    };
+    var btnLR = document.getElementById("btn-LR");
+    btnLR.onclick = function () {
+        directionInput.value = "LR";
+        draw();
+    };
+    var btnRL = document.getElementById("btn-RL");
+    btnRL.onclick = function () {
+        directionInput.value = "RL";
+        draw();
+    };
+</script>
+<br>
+
+<div id="mynetwork"></div>
+
+<p id="selection"></p>
+</body>
+</html>

examples/network/categories/24_hierarchical_layout_userdefined.html → examples/network/categories/layout/hierarchical_layout_userdefined.html

@@ -13,9 +13,9 @@
       border: 1px solid lightgray;
     }
   </style>
+    <script type="text/javascript" src="../../../../dist/vis.js"></script>
+    <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
 
-  <script type="text/javascript" src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;
@@ -36,84 +36,39 @@
       edges = [];
       var connectionCount = [];
 
-        // randomly create some nodes and edges
-        for (var i = 0; i < 15; i++) {
-            nodes.push({
-                id: i,
-                label: String(i)
-            });
-        }
-        edges.push({
-            from: 0,
-            to: 1
-        });
-        edges.push({
-            from: 0,
-            to: 6
-        });
-        edges.push({
-            from: 0,
-            to: 13
-        });edges.push({
-            from: 0,
-            to: 11
-        });
-        edges.push({
-            from: 1,
-            to: 2
-        });
-        edges.push({
-            from: 2,
-            to: 3
-        });
-        edges.push({
-            from: 2,
-            to: 4
-        });
-        edges.push({
-            from: 3,
-            to: 5
-        });
-        edges.push({
-            from: 1,
-            to: 10
-        });
-        edges.push({
-            from: 1,
-            to: 7
-        });
-        edges.push({
-            from: 2,
-            to: 8
-        });
-        edges.push({
-            from: 2,
-            to: 9
-        });
-        edges.push({
-            from: 3,
-            to: 14
-        });
-        edges.push({
-            from: 1,
-            to: 12
-        });
-        nodes[0]["level"] = 0;
-        nodes[1]["level"] = 1;
-        nodes[2]["level"] = 3;
-        nodes[3]["level"] = 4;
-        nodes[4]["level"] = 4;
-        nodes[5]["level"] = 5;
-        nodes[6]["level"] = 1;
-        nodes[7]["level"] = 2;
-        nodes[8]["level"] = 4;
-        nodes[9]["level"] = 4;
-        nodes[10]["level"] = 2;
-        nodes[11]["level"] = 1;
-        nodes[12]["level"] = 2;
-        nodes[13]["level"] = 1;
-        nodes[14]["level"] = 5;
-
+      // randomly create some nodes and edges
+      for (var i = 0; i < 15; i++) {
+          nodes.push({id: i,label: String(i)});
+      }
+      edges.push({from: 0, to: 1 });
+      edges.push({from: 0, to: 6 });
+      edges.push({from: 0, to: 13});
+      edges.push({from: 0, to: 11});
+      edges.push({from: 1, to: 2 });
+      edges.push({from: 2, to: 3 });
+      edges.push({from: 2, to: 4 });
+      edges.push({from: 3, to: 5 });
+      edges.push({from: 1, to: 10});
+      edges.push({from: 1, to: 7 });
+      edges.push({from: 2, to: 8 });
+      edges.push({from: 2, to: 9 });
+      edges.push({from: 3, to: 14});
+      edges.push({from: 1, to: 12});
+      nodes[0]["level"] = 0;
+      nodes[1]["level"] = 1;
+      nodes[2]["level"] = 3;
+      nodes[3]["level"] = 4;
+      nodes[4]["level"] = 4;
+      nodes[5]["level"] = 5;
+      nodes[6]["level"] = 1;
+      nodes[7]["level"] = 2;
+      nodes[8]["level"] = 4;
+      nodes[9]["level"] = 4;
+      nodes[10]["level"] = 2;
+      nodes[11]["level"] = 1;
+      nodes[12]["level"] = 2;
+      nodes[13]["level"] = 1;
+      nodes[14]["level"] = 5;
 
       // create a network
       var container = document.getElementById('mynetwork');
@@ -141,7 +96,7 @@
     }
 
   </script>
-  <script src="../googleAnalytics.js"></script>
+  <script src="../../../googleAnalytics.js"></script>
 </head>
 
 <body onload="draw();">

examples/network/categories/layout/randomSeed.html

@@ -0,0 +1,60 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Setting the random seed</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: 600px;
+      height: 400px;
+      border: 1px solid lightgray;
+    }
+
+    p {
+      max-width:600px;
+    }
+  </style>
+</head>
+<body>
+
+<p>
+  Create a simple network with some nodes and edges but with a fixed seed. This means the layout will be the same every time the nodes
+  are settled.
+</p>
+
+<div id="mynetwork"></div>
+
+<script type="text/javascript">
+  // create an array with nodes
+  var nodes = new vis.DataSet([
+    {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
+  var edges = new vis.DataSet([
+    {from: 1, to: 3},
+    {from: 1, to: 2},
+    {from: 2, to: 4},
+    {from: 2, to: 5}
+  ]);
+
+  // create a network
+  var container = document.getElementById('mynetwork');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {layout:{randomSeed:2}};
+  var network = new vis.Network(container, data, options);
+</script>
+
+<script src="../../../googleAnalytics.js"></script>
+</body>
+</html>

lib/network/modules/EdgesHandler.js

@@ -57,7 +57,7 @@ class EdgesHandler {
           min: 14,
           max: 30,
           maxVisible: 30,
-          drawThreshold: 6
+          drawThreshold: 5
         },
         customScalingFunction: function (min,max,total,value) {
           if (max === min) {

lib/network/modules/NodesHandler.js

@@ -72,7 +72,7 @@ class NodesHandler {
           min: 14,
           max: 30,
           maxVisible: 30,
-          drawThreshold: 6
+          drawThreshold: 5
         },
         customScalingFunction: function (min,max,total,value) {
           if (max === min) {

lib/shared/Validator.js

@@ -170,7 +170,10 @@ class Validator {
     let localSearchThreshold = 8;
     let globalSearchThreshold = 4;
 
-    if (globalSearch.distance <= globalSearchThreshold && localSearch.distance > globalSearch.distance) {
+    if (localSearch.indexMatch !== undefined) {
+      console.log('%cUnknown option detected: "' + option + '" in ' + Validator.printLocation(localSearch.path, option,'') + 'Perhaps it was incomplete? Did you mean: "' + localSearch.indexMatch + '"?\n\n', printStyle);
+    }
+    else if (globalSearch.distance <= globalSearchThreshold && localSearch.distance > globalSearch.distance) {
       console.log('%cUnknown option detected: "' + option + '" in ' + Validator.printLocation(localSearch.path, option,'') + 'Perhaps it was misplaced? Matching option found at: ' + Validator.printLocation(globalSearch.path, globalSearch.closestMatch,''), printStyle);
     }
     else if (localSearch.distance <= localSearchThreshold) {
@@ -196,6 +199,8 @@ class Validator {
     let min = 1e9;
     let closestMatch = '';
     let closestMatchPath = [];
+    let lowerCaseOption = option.toLowerCase();
+    let indexMatch = undefined;
     for (let op in options) {
       let type = Validator.getType(options[op]);
       let distance;
@@ -205,9 +210,13 @@ class Validator {
           closestMatch = result.closestMatch;
           closestMatchPath = result.path;
           min = result.distance;
+          indexMatch = result.indexMatch;
         }
       }
       else {
+        if (op.toLowerCase().indexOf(lowerCaseOption) !== -1) {
+          indexMatch = op;
+        }
         distance = Validator.levenshteinDistance(option, op);
         if (min > distance) {
           closestMatch = op;
@@ -216,7 +225,7 @@ class Validator {
         }
       }
     }
-    return {closestMatch:closestMatch, path:closestMatchPath, distance:min}
+    return {closestMatch:closestMatch, path:closestMatchPath, distance:min, indexMatch: indexMatch}
   }
 
   static printLocation(path, option, prefix = 'Problem value found at: \n') {