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.

290 lines
8.1 KiB

  1. function focusOn(event) {
  2. var nodeId = event.value;
  3. network.selectNodes([nodeId]);
  4. highlightConnections({nodes:[nodeId]})
  5. network.focusOnNode(nodeId,{animation:false, scale:0.2})
  6. }
  7. function viewAllNeighbours() {
  8. network.zoomExtent({nodes:connectedNodes, duration:0})
  9. }
  10. function doSteps(amount) {
  11. network.setOptions({stabilizationIterations:amount})
  12. network._stabilize()
  13. }
  14. var network;
  15. var nodes;
  16. var edges;
  17. var edgeOpacity = 0.15;
  18. function drawAll(dataJSON, file) {
  19. // create an array with nodes
  20. nodes = new vis.DataSet(dataJSON.nodes);
  21. var totalMass = 0;
  22. for (var i = 0; i < dataJSON.nodes.length; i++) {
  23. totalMass += dataJSON.nodes[i].mass;
  24. //console.log(dataJSON.nodes[i].mass)
  25. }
  26. var gravityConstant = -20000;
  27. if (totalMass < 2000) {
  28. gravityConstant = -2000;
  29. }
  30. var edgeNodeRatio = Math.max(1,dataJSON.edges.length) / Math.max(1,dataJSON.nodes.length);
  31. var nodeEdgeRatio = Math.max(1,dataJSON.nodes.length) / Math.max(1,dataJSON.edges.length);
  32. var centralGravity = Math.min(5,Math.max(0.1,edgeNodeRatio));
  33. opacity = Math.min(1.0,Math.max(0.15,nodeEdgeRatio));
  34. // create an array with edges
  35. edges = new vis.DataSet(dataJSON.edges);
  36. // console.log(edgesArray.length,edgesArray)
  37. // create a network
  38. var container = document.getElementById('mynetwork');
  39. var data = {
  40. nodes: nodes,
  41. edges: edges
  42. };
  43. var amountOfNodes = dataJSON.nodes.length;
  44. var options = {
  45. stabilize: true,
  46. stabilizationIterations: 15000,
  47. smoothCurves: {
  48. enabled: false,
  49. dynamic: false
  50. },
  51. configurePhysics: false,
  52. physics: {barnesHut: {gravitationalConstant: gravityConstant, centralGravity: centralGravity, springLength: 100, springConstant: 0.001}},
  53. //physics: {barnesHut: {gravitationalConstant: 0, centralGravity: 0.0, springConstant: 0}},
  54. nodes: {
  55. shape: 'dot',
  56. radiusMax: amountOfNodes * 0.5,
  57. fontColor: '#ffffff',
  58. fontDrawThreshold: 8,
  59. scaleFontWithValue: true,
  60. fontSizeMin: 14,
  61. fontSizeMax: amountOfNodes * 0.25,
  62. fontSizeMaxVisible: 20,
  63. fontStrokeWidth: 1, // px
  64. fontStrokeColor: '#222222'
  65. },
  66. edges: {
  67. opacity: edgeOpacity
  68. },
  69. hideEdgesOnDrag: true,
  70. maxVelocity: 100,
  71. tooltip: {
  72. delay: 200,
  73. fontSize: 12,
  74. color: {
  75. background: "#fff"
  76. }
  77. }
  78. };
  79. network = new vis.Network(container, {nodes:[],edges:[]}, options);
  80. network.on("stabilizationIterationsDone", function() {
  81. this.setFreezeSimulation(true);
  82. });
  83. network.on("stabilized", function() {
  84. console.log('downloading')
  85. network.storePositions();
  86. download(file);
  87. setTimeout(getNewTask(file),3000);
  88. })
  89. network.setData(data);
  90. if (dataJSON.nodes.length < 2) {
  91. console.log('downloading because few nodes')
  92. network.storePositions();
  93. download(file);
  94. setTimeout(getNewTask(file),3000);
  95. }
  96. //network.on("click", highlightConnections);
  97. //window.onresize = function () {
  98. // network.redraw()
  99. //};
  100. //network.on("stabilized", function() {
  101. // network.setOptions({physics: {barnesHut: {gravitationalConstant: 0, centralGravity: 0, springConstant: 0}}});
  102. // console.log('downlaoding')
  103. // download();
  104. // setTimeout(next,2000);
  105. //});
  106. //populateCompanyDropdown();
  107. }
  108. // marked is used so we don't do heavy stuff on each click
  109. var marked = false;
  110. var connectedNodes = [];
  111. function highlightConnections(selectedItems) {
  112. var nodeId;
  113. var requireUpdate = false;
  114. // we get all data from the dataset once to avoid updating multiple times.
  115. if (selectedItems.nodes.length == 0 && marked === true) {
  116. connectedNodes = [];
  117. requireUpdate = true;
  118. var allNodes = nodes.get({returnType:"Object"});
  119. // restore on unselect
  120. for (nodeId in allNodes) {
  121. allNodes[nodeId].color = undefined;
  122. if (allNodes[nodeId].oldLabel !== undefined) {
  123. allNodes[nodeId].label = allNodes[nodeId].oldLabel;
  124. allNodes[nodeId].oldLabel = undefined;
  125. }
  126. }
  127. marked = false;
  128. network.setOptions({nodes:{fontSizeMin:14},edges:{opacity:0.15}})
  129. }
  130. else if (selectedItems.nodes.length > 0) {
  131. var allNodes = nodes.get({returnType:"Object"});
  132. marked = true;
  133. requireUpdate = true;
  134. var mainNode = selectedItems.nodes[0]; // this is an ID
  135. connectedNodes = network.getConnectedNodes(mainNode);
  136. connectedNodes.push(mainNode);
  137. for (nodeId in allNodes) {
  138. allNodes[nodeId].color = 'rgba(150,150,150,0.1)';
  139. if (allNodes[nodeId].oldLabel === undefined) {
  140. allNodes[nodeId].oldLabel = allNodes[nodeId].label;
  141. allNodes[nodeId].label = "";
  142. }
  143. }
  144. for (var i = 0; i < connectedNodes.length; i++) {
  145. allNodes[connectedNodes[i]].color = undefined;
  146. if (allNodes[connectedNodes[i]].oldLabel !== undefined) {
  147. allNodes[connectedNodes[i]].label = allNodes[connectedNodes[i]].oldLabel;
  148. allNodes[connectedNodes[i]].oldLabel = undefined;
  149. }
  150. }
  151. network.setOptions({nodes:{fontSizeMin:150},edges:{opacity:0.025}})
  152. }
  153. if (requireUpdate === true) {
  154. var updateArray = [];
  155. for (nodeId in allNodes) {
  156. updateArray.push(allNodes[nodeId]);
  157. }
  158. nodes.update(updateArray);
  159. }
  160. }
  161. function loadJSON(path, success, error) {
  162. var xhr = new XMLHttpRequest();
  163. xhr.onreadystatechange = function() {
  164. if (xhr.readyState === 4) {
  165. if (xhr.status === 200) {
  166. success(JSON.parse(xhr.responseText), path);
  167. }
  168. else {
  169. error();
  170. }
  171. }
  172. };
  173. xhr.open("GET", path, true);
  174. xhr.send();
  175. }
  176. function populateDropdown() {
  177. var nodesAr = nodes.get();
  178. var nodeIds = [];
  179. for (var i = 0; i < nodesAr.length;i++) {
  180. nodeIds.push(nodesAr[i].id);
  181. }
  182. nodeIds.sort()
  183. var dropdown = document.getElementById("companyDropdown");
  184. var option = document.createElement('option');
  185. option.text = option.value = 'pick a company to focus on.';
  186. dropdown.add(option);
  187. for (i = 0; i < nodeIds.length; i++) {
  188. option = document.createElement('option');
  189. option.text = option.value = nodeIds[i];
  190. dropdown.add(option);
  191. }
  192. }
  193. function download(path) {
  194. var file = path.replace("./data/data/","");
  195. var nodesAr = nodes.get();
  196. var edgesAr = edges.get();
  197. var obj = {nodes: nodesAr, edges: edgesAr};
  198. var json = JSON.stringify(obj);
  199. var blob = new Blob([json], {type: "text/plain;charset=utf-8"});
  200. saveAs(blob, "processed_" + file);
  201. }
  202. function startTask(path, success) {
  203. // if we find the file already processed, we go to the next one
  204. loadJSON("./data/processedData/processed_" + path,
  205. function() {
  206. getNewTask(path);
  207. },
  208. function() {
  209. loadJSON("./data/data/" + path, success, function() {
  210. console.log("could not find file ", path);
  211. })
  212. });
  213. }
  214. function askAgent(to, message) {
  215. return new Promise(function (resolve, reject) {
  216. if (typeof message == 'object') {
  217. message = JSON.stringify(message);
  218. }
  219. // create XMLHttpRequest object to send the POST request
  220. var http = new XMLHttpRequest();
  221. // insert the callback function. This is called when the message has been delivered and a response has been received
  222. http.onreadystatechange = function () {
  223. if (http.readyState == 4 && http.status == 200) {
  224. var response = "";
  225. if (http.responseText.length > 0) {
  226. response = JSON.parse(http.responseText);
  227. }
  228. resolve(response);
  229. }
  230. else if (http.readyState == 4) {
  231. reject(new Error("http.status:" + http.status));
  232. }
  233. };
  234. // open an asynchronous POST connection
  235. http.open("POST", to, true);
  236. // include header so the receiving code knows its a JSON object
  237. http.setRequestHeader("Content-Type", "text/plain");
  238. // send
  239. http.send(message);
  240. });
  241. }
  242. function getNewTask(path) {
  243. var file = undefined;
  244. if (path !== undefined) {
  245. file = path.replace("./data/data/", "");
  246. }
  247. askAgent("http://127.0.0.1:3000/agents/proxy", {jsonrpc:"2.0",method:"getAssignment", params:{finishedFile:file}}).then(function(reply) {
  248. console.log(reply, reply.result);
  249. if (reply.result != 'none') {
  250. startTask(reply.result, function(data,path) {document.getElementById("FILENAME").innerHTML = path; setTimeout(function() {drawAll(data,path);},200)});
  251. }
  252. })
  253. }
  254. getNewTask()