vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

273 lines
10 KiB

9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <script type="text/javascript" src="../dist/vis.js"></script>
  7. <link href="../dist/vis.css" rel="stylesheet" type="text/css"/>
  8. <style type="text/css">
  9. #mynetwork {
  10. width: 600px;
  11. height: 400px;
  12. border: 1px solid lightgray;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div id="mynetwork"></div>
  18. <script>
  19. var network = null;
  20. // create an array with nodes
  21. var nodes = new vis.DataSet([
  22. {id: 1, label: 'Node 1', cid:1},
  23. {id: 2, label: 'Node 2', cid:1},
  24. {id: 3, label: 'Node 3'},
  25. {id: 4, label: 'Node 4'},
  26. {id: 5, label: 'Node 5'}
  27. ]);
  28. // create an array with edges
  29. var edges = new vis.DataSet([
  30. {id: 'e1', from: 1, to: 3, label: 'hi'},
  31. {from: 1, to: 2},
  32. {from: 2, to: 4},
  33. {from: 2, to: 5}
  34. ]);
  35. var data = {
  36. nodes: nodes,
  37. edges: edges
  38. };
  39. var container = document.getElementById('mynetwork');
  40. function drawQuick(testOptions) {
  41. draw({physics:{stabilization:false}});
  42. }
  43. function draw(options) {
  44. try {
  45. // clean
  46. if (network !== null) {
  47. network.destroy();
  48. network = null;
  49. }
  50. network = new vis.Network(container, data, options);
  51. }
  52. catch (err) {
  53. console.log("err")
  54. }
  55. }
  56. function clusterByCid() {
  57. drawQuick();
  58. var clusterOptionsByData = {
  59. joinCondition:function(childOptions) {
  60. return childOptions.cid == 1;
  61. },
  62. clusterNodeProperties: {id:'cidCluster', borderWidth:3, shape:'database'}
  63. }
  64. network.cluster(clusterOptionsByData);
  65. }
  66. function clusterByConnection() {
  67. drawQuick();
  68. network.clusterByConnection(1)
  69. }
  70. function clusterByHubsize() {
  71. drawQuick();
  72. var clusterOptionsByData = {
  73. processProperties: function(clusterOptions, childNodes) {
  74. clusterOptions.label = "[" + childNodes.length + "]";
  75. return clusterOptions;
  76. },
  77. clusterNodeProperties: {borderWidth:3, shape:'box', font:{size:30}}
  78. }
  79. network.clusterByHubsize(undefined, clusterOptionsByData);
  80. }
  81. function checkMethods() {
  82. var methods = [
  83. {name:"setSize", arguments: [200,300]},
  84. {name:"canvasToDOM", arguments: [{x:10,y:20}]},
  85. {name:"DOMtoCanvas", arguments: [{x:10,y:20}]},
  86. {name:"findNode", arguments: [1]},
  87. {name:"isCluster", arguments: [1]},
  88. {name:"cluster", arguments: null, func: clusterByCid},
  89. {name:"findNode", arguments: [1]},
  90. {name:"isCluster", arguments: ['cidCluster']},
  91. {name:"getNodesInCluster", arguments: ['cidCluster']},
  92. {name:"openCluster", arguments: ['cidCluster']},
  93. {name:"clusterByConnection",arguments: null, func: clusterByConnection},
  94. {name:"clusterByHubsize", arguments: null, func: clusterByHubsize},
  95. {name:"clusterOutliers", arguments: null, funcFirst: drawQuick},
  96. {name:"getSeed", arguments: null, funcFirst: drawQuick},
  97. {name:"enableEditMode", arguments: null},
  98. {name:"disableEditMode", arguments: null},
  99. {name:"addNodeMode", arguments: null},
  100. {name:"disableEditMode", arguments: null},
  101. {name:"editNode", arguments: null, funcFirst: function() {network.setOptions({manipulation:{editNode:function(data,callback) {callback(data);}}})}},
  102. {name:"disableEditMode", arguments: null},
  103. {name:"addEdgeMode", arguments: null},
  104. {name:"disableEditMode", arguments: null},
  105. {name:"editEdgeMode", arguments: null},
  106. {name:"disableEditMode", arguments: null},
  107. {name:"selectNodes", arguments: [[5], true]},
  108. {name:"deleteSelected", arguments: null, funcFirst:drawQuick},
  109. {name:"disableEditMode", arguments: null},
  110. {name:"getPositions", arguments: [[1]]},
  111. {name:"storePositions", arguments: null, funcFirst:drawQuick},
  112. {name:"getBoundingBox", arguments: [1]},
  113. {name:"getConnectedNodes", arguments: [1]},
  114. {name:"getConnectedEdges", arguments: [1]},
  115. {name:"startSimulation", arguments: null},
  116. {name:"stopSimulation", arguments: null},
  117. {name:"stabilize", arguments: null},
  118. {name:"getSelection", arguments: null},
  119. {name:"getSelectedNodes", arguments: null},
  120. {name:"getSelectedEdges", arguments: null},
  121. {name:"getNodeAt", arguments: [{x:10,y:20}]},
  122. {name:"getEdgeAt", arguments: [{x:10,y:20}]},
  123. {name:"selectNodes", arguments: [[1],false]},
  124. {name:"selectEdges", arguments: [['e1']]},
  125. {name:"unselectAll", arguments: null},
  126. {name:"redraw", arguments: null},
  127. {name:"getScale", arguments: null},
  128. {name:"getViewPosition", arguments: null},
  129. {name:"fit", arguments: null},
  130. {name:"moveTo", arguments: [{position:{x:0,y:0}}]},
  131. {name:"focus", arguments: [1]},
  132. {name:"releaseNode", arguments: null},
  133. {name:"getOptionsFromConfigurator", arguments: null},
  134. ]
  135. drawQuick();
  136. for (var i = 0; i < methods.length; i++) {
  137. setTimeout(testMethod.bind(this,methods,i), i*50);
  138. }
  139. }
  140. function testMethod(methods,i) {
  141. var methodName = methods[i].name;
  142. console.log("Currently testing:", methodName);
  143. if (methods[i].funcFirst !== undefined) {
  144. methods[i].funcFirst();
  145. }
  146. if (methods[i].func !== undefined) {
  147. methods[i].func();
  148. }
  149. else {
  150. if (methods[i].arguments === null) {
  151. network[methodName].apply(network);
  152. }
  153. else {
  154. network[methodName].apply(network, methods[i].arguments)
  155. }
  156. }
  157. }
  158. var amountOfOptionChecks = 50;
  159. var optionsThreshold = 0.8;
  160. var optionGlobalCount = 0;
  161. function checkOptions() {
  162. optionGlobalCount++;
  163. if (optionGlobalCount == amountOfOptionChecks) {
  164. checkMethods();
  165. }
  166. else {
  167. var allOptions = vis.network.allOptions.allOptions;
  168. var testOptions = {};
  169. constructOptions(allOptions, testOptions);
  170. var failed = setTimeout(function () {
  171. console.error("FAILED", JSON.stringify(testOptions, null, 4))
  172. }, 500);
  173. var counter = 0;
  174. drawQuick(testOptions);
  175. network.on("afterDrawing", function () {
  176. counter++;
  177. if (counter > 2) {
  178. counter = 0;
  179. network.off('afterDrawing');
  180. clearTimeout(failed);
  181. network.destroy();
  182. }
  183. })
  184. network.on("stabilized", function () {
  185. clearTimeout(failed);
  186. network.destroy();
  187. });
  188. network.on("destroy", function () {
  189. clearTimeout(failed);
  190. setTimeout(checkOptions, 100);
  191. })
  192. console.log("now testing:",testOptions)
  193. network.setOptions(testOptions);
  194. }
  195. }
  196. function constructOptions(allOptions, testOptions) {
  197. for (var option in allOptions) {
  198. if (Math.random() < optionsThreshold) {
  199. if (option !== "__type__" && option !== '__any__' && option !== 'locales' && option !== 'image' && option !== 'id') {
  200. if (allOptions[option].__type__ !== undefined) {
  201. if (testOptions[option] === undefined) {
  202. testOptions[option] = {};
  203. }
  204. constructOptions(allOptions[option], testOptions[option])
  205. if (Object.keys(testOptions).length === 0) {
  206. testOptions[option] = undefined;
  207. delete testOptions[option];
  208. }
  209. }
  210. else {
  211. if (allOptions[option].boolean !== undefined) {
  212. if (testOptions[option] === undefined) {
  213. testOptions[option] = {};
  214. }
  215. testOptions[option] = Math.random() < 0.5;
  216. }
  217. else if(allOptions[option].number !== undefined) {
  218. if (testOptions[option] === undefined) {
  219. testOptions[option] = {};
  220. }
  221. testOptions[option] = 1 * Math.random();
  222. }
  223. else if(allOptions[option].string !== undefined && Array.isArray(allOptions[option].string)) {
  224. var value = allOptions[option].string[Math.floor(Math.random() * allOptions[option].string.length)];
  225. if (value !== 'image' && value !== 'circularImage' && value !== 'icon') {
  226. if (testOptions[option] === undefined) {
  227. testOptions[option] = {};
  228. }
  229. testOptions[option] = value;
  230. }
  231. }
  232. else if(allOptions[option].string !== undefined) {
  233. // if (testOptions[option] === undefined) {
  234. // testOptions[option] = {};
  235. // }
  236. // testOptions[option] = "hello world";
  237. }
  238. }
  239. }
  240. }
  241. }
  242. }
  243. checkOptions();
  244. // for (var i = 0; i < amountOfOptionChecks; i++) {
  245. // setTimeout(checkOptions.bind(this,i), i*optionCheckTime);
  246. // }
  247. // setTimeout(checkMethods, amountOfOptionChecks*optionCheckTime);
  248. </script>
  249. </body>
  250. </html>