Browse Source
- Added getConnectedNodes method.
- Added fontSizeMin, fontSizeMax, fontSizeMaxVisible, scaleFontWithValue, fontDrawThreshold to Nodes. - Added fade in of labels (on nodes) near the fontDrawThreshold. - Added nodes option to zoomExtent to zoom in on specific set of nodes. - Added stabilizationIterationsDone event which fires at the end of the internal stabilization run. Does not imply that the network is stabilized. - Added setFreezeSimulation method. - Added clusterByZoom option and increaseClusterLevel and decreaseClusterLevel methods. Still clustering bug and need more documentation on new featuresv3_develop
Alex de Mulder
10 years ago
13 changed files with 14878 additions and 14317 deletions
Split View
Diff Options
-
+8 -0HISTORY.md
-
+14286 -14160dist/vis.js
-
+10 -2docs/network.html
-
+1 -0examples/network/25_physics_configuration.html
-
+1 -1examples/network/29_neighbourhood_highlight.html
-
+24 -16lib/network/Edge.js
-
+124 -26lib/network/Network.js
-
+43 -17lib/network/Node.js
-
+61 -91lib/network/mixins/ClusterMixin.js
-
+1 -1lib/network/mixins/HierarchicalLayoutMixin.js
-
+6 -3lib/network/mixins/physics/PhysicsMixin.js
-
+22 -0lib/util.js
-
+291 -0test/EU/js/init_precalc.js
+ 8
- 0
HISTORY.md
View File
+ 14286
- 14160
dist/vis.js
File diff suppressed because it is too large
View File
+ 10
- 2
docs/network.html
View File
+ 1
- 0
examples/network/25_physics_configuration.html
View File
+ 1
- 1
examples/network/29_neighbourhood_highlight.html
View File
+ 24
- 16
lib/network/Edge.js
View File
+ 124
- 26
lib/network/Network.js
View File
+ 43
- 17
lib/network/Node.js
View File
+ 61
- 91
lib/network/mixins/ClusterMixin.js
View File
+ 1
- 1
lib/network/mixins/HierarchicalLayoutMixin.js
View File
+ 6
- 3
lib/network/mixins/physics/PhysicsMixin.js
View File
+ 22
- 0
lib/util.js
View File
+ 291
- 0
test/EU/js/init_precalc.js
View File
| @ -0,0 +1,291 @@ | |||
| function focusOn(event) { | |||
| var nodeId = event.value; | |||
| network.selectNodes([nodeId]); | |||
| highlightConnections({nodes:[nodeId]}) | |||
| network.focusOnNode(nodeId,{animation:false, scale:0.2}) | |||
| } | |||
| function viewAllNeighbours() { | |||
| network.zoomExtent({nodes:connectedNodes, duration:0}) | |||
| } | |||
| function doSteps(amount) { | |||
| network.setOptions({stabilizationIterations:amount}) | |||
| network._stabilize() | |||
| } | |||
| var network; | |||
| var nodes; | |||
| var edges; | |||
| var edgeOpacity = 0.15; | |||
| function drawAll(dataJSON, file) { | |||
| // create an array with nodes | |||
| nodes = new vis.DataSet(dataJSON.nodes); | |||
| var totalMass = 0; | |||
| for (var i = 0; i < dataJSON.nodes.length; i++) { | |||
| totalMass += dataJSON.nodes[i].mass; | |||
| //console.log(dataJSON.nodes[i].mass) | |||
| } | |||
| var gravityConstant = -20000; | |||
| if (totalMass < 2000) { | |||
| gravityConstant = -2000; | |||
| } | |||
| var edgeNodeRatio = Math.max(1,dataJSON.edges.length) / Math.max(1,dataJSON.nodes.length); | |||
| var nodeEdgeRatio = Math.max(1,dataJSON.nodes.length) / Math.max(1,dataJSON.edges.length); | |||
| var centralGravity = Math.min(5,Math.max(0.1,edgeNodeRatio)); | |||
| opacity = Math.min(1.0,Math.max(0.15,nodeEdgeRatio)); | |||
| // create an array with edges | |||
| edges = new vis.DataSet(dataJSON.edges); | |||
| // console.log(edgesArray.length,edgesArray) | |||
| // create a network | |||
| var container = document.getElementById('mynetwork'); | |||
| var data = { | |||
| nodes: nodes, | |||
| edges: edges | |||
| }; | |||
| var amountOfNodes = dataJSON.nodes.length; | |||
| var options = { | |||
| stabilize: true, | |||
| stabilizationIterations: 15000, | |||
| smoothCurves: { | |||
| enabled: false, | |||
| dynamic: false | |||
| }, | |||
| configurePhysics: false, | |||
| physics: {barnesHut: {gravitationalConstant: gravityConstant, centralGravity: centralGravity, springLength: 100, springConstant: 0.001}}, | |||
| //physics: {barnesHut: {gravitationalConstant: 0, centralGravity: 0.0, springConstant: 0}}, | |||
| nodes: { | |||
| shape: 'dot', | |||
| radiusMax: amountOfNodes * 0.5, | |||
| fontColor: '#ffffff', | |||
| fontDrawThreshold: 8, | |||
| scaleFontWithValue: true, | |||
| fontSizeMin: 14, | |||
| fontSizeMax: amountOfNodes * 0.25, | |||
| fontSizeMaxVisible: 20, | |||
| fontStrokeWidth: 1, // px | |||
| fontStrokeColor: '#222222' | |||
| }, | |||
| edges: { | |||
| opacity: edgeOpacity | |||
| }, | |||
| hideEdgesOnDrag: true, | |||
| maxVelocity: 100, | |||
| tooltip: { | |||
| delay: 200, | |||
| fontSize: 12, | |||
| color: { | |||
| background: "#fff" | |||
| } | |||
| } | |||
| }; | |||
| network = new vis.Network(container, {nodes:[],edges:[]}, options); | |||
| network.on("stabilizationIterationsDone", function() { | |||
| this.setFreezeSimulation(true); | |||
| }); | |||
| network.on("stabilized", function() { | |||
| console.log('downloading') | |||
| network.storePositions(); | |||
| download(file); | |||
| setTimeout(getNewTask(file),3000); | |||
| }) | |||
| network.setData(data); | |||
| if (dataJSON.nodes.length < 2) { | |||
| console.log('downloading because few nodes') | |||
| network.storePositions(); | |||
| download(file); | |||
| setTimeout(getNewTask(file),3000); | |||
| } | |||
| //network.on("click", highlightConnections); | |||
| //window.onresize = function () { | |||
| // network.redraw() | |||
| //}; | |||
| //network.on("stabilized", function() { | |||
| // network.setOptions({physics: {barnesHut: {gravitationalConstant: 0, centralGravity: 0, springConstant: 0}}}); | |||
| // console.log('downlaoding') | |||
| // download(); | |||
| // setTimeout(next,2000); | |||
| //}); | |||
| //populateCompanyDropdown(); | |||
| } | |||
| // marked is used so we don't do heavy stuff on each click | |||
| var marked = false; | |||
| var connectedNodes = []; | |||
| function highlightConnections(selectedItems) { | |||
| var nodeId; | |||
| var requireUpdate = false; | |||
| // we get all data from the dataset once to avoid updating multiple times. | |||
| if (selectedItems.nodes.length == 0 && marked === true) { | |||
| connectedNodes = []; | |||
| requireUpdate = true; | |||
| var allNodes = nodes.get({returnType:"Object"}); | |||
| // restore on unselect | |||
| for (nodeId in allNodes) { | |||
| allNodes[nodeId].color = undefined; | |||
| if (allNodes[nodeId].oldLabel !== undefined) { | |||
| allNodes[nodeId].label = allNodes[nodeId].oldLabel; | |||
| allNodes[nodeId].oldLabel = undefined; | |||
| } | |||
| } | |||
| marked = false; | |||
| network.setOptions({nodes:{fontSizeMin:14},edges:{opacity:0.15}}) | |||
| } | |||
| else if (selectedItems.nodes.length > 0) { | |||
| var allNodes = nodes.get({returnType:"Object"}); | |||
| marked = true; | |||
| requireUpdate = true; | |||
| var mainNode = selectedItems.nodes[0]; // this is an ID | |||
| connectedNodes = network.getConnectedNodes(mainNode); | |||
| connectedNodes.push(mainNode); | |||
| for (nodeId in allNodes) { | |||
| allNodes[nodeId].color = 'rgba(150,150,150,0.1)'; | |||
| if (allNodes[nodeId].oldLabel === undefined) { | |||
| allNodes[nodeId].oldLabel = allNodes[nodeId].label; | |||
| allNodes[nodeId].label = ""; | |||
| } | |||
| } | |||
| for (var i = 0; i < connectedNodes.length; i++) { | |||
| allNodes[connectedNodes[i]].color = undefined; | |||
| if (allNodes[connectedNodes[i]].oldLabel !== undefined) { | |||
| allNodes[connectedNodes[i]].label = allNodes[connectedNodes[i]].oldLabel; | |||
| allNodes[connectedNodes[i]].oldLabel = undefined; | |||
| } | |||
| } | |||
| network.setOptions({nodes:{fontSizeMin:150},edges:{opacity:0.025}}) | |||
| } | |||
| if (requireUpdate === true) { | |||
| var updateArray = []; | |||
| for (nodeId in allNodes) { | |||
| updateArray.push(allNodes[nodeId]); | |||
| } | |||
| nodes.update(updateArray); | |||
| } | |||
| } | |||
| function loadJSON(path, success, error) { | |||
| var xhr = new XMLHttpRequest(); | |||
| xhr.onreadystatechange = function() { | |||
| if (xhr.readyState === 4) { | |||
| if (xhr.status === 200) { | |||
| success(JSON.parse(xhr.responseText), path); | |||
| } | |||
| else { | |||
| error(); | |||
| } | |||
| } | |||
| }; | |||
| xhr.open("GET", path, true); | |||
| xhr.send(); | |||
| } | |||
| function populateDropdown() { | |||
| var nodesAr = nodes.get(); | |||
| var nodeIds = []; | |||
| for (var i = 0; i < nodesAr.length;i++) { | |||
| nodeIds.push(nodesAr[i].id); | |||
| } | |||
| nodeIds.sort() | |||
| var dropdown = document.getElementById("companyDropdown"); | |||
| var option = document.createElement('option'); | |||
| option.text = option.value = 'pick a company to focus on.'; | |||
| dropdown.add(option); | |||
| for (i = 0; i < nodeIds.length; i++) { | |||
| option = document.createElement('option'); | |||
| option.text = option.value = nodeIds[i]; | |||
| dropdown.add(option); | |||
| } | |||
| } | |||
| function download(path) { | |||
| var file = path.replace("./data/data/",""); | |||
| var nodesAr = nodes.get(); | |||
| var edgesAr = edges.get(); | |||
| var obj = {nodes: nodesAr, edges: edgesAr}; | |||
| var json = JSON.stringify(obj); | |||
| var blob = new Blob([json], {type: "text/plain;charset=utf-8"}); | |||
| saveAs(blob, "processed_" + file); | |||
| } | |||
| function startTask(path, success) { | |||
| // if we find the file already processed, we go to the next one | |||
| loadJSON("./data/processedData/processed_" + path, | |||
| function() { | |||
| getNewTask(path); | |||
| }, | |||
| function() { | |||
| loadJSON("./data/data/" + path, success, function() { | |||
| console.log("could not find file ", path); | |||
| }) | |||
| }); | |||
| } | |||
| function askAgent(to, message) { | |||
| return new Promise(function (resolve, reject) { | |||
| if (typeof message == 'object') { | |||
| message = JSON.stringify(message); | |||
| } | |||
| // create XMLHttpRequest object to send the POST request | |||
| var http = new XMLHttpRequest(); | |||
| // insert the callback function. This is called when the message has been delivered and a response has been received | |||
| http.onreadystatechange = function () { | |||
| if (http.readyState == 4 && http.status == 200) { | |||
| var response = ""; | |||
| if (http.responseText.length > 0) { | |||
| response = JSON.parse(http.responseText); | |||
| } | |||
| resolve(response); | |||
| } | |||
| else if (http.readyState == 4) { | |||
| reject(new Error("http.status:" + http.status)); | |||
| } | |||
| }; | |||
| // open an asynchronous POST connection | |||
| http.open("POST", to, true); | |||
| // include header so the receiving code knows its a JSON object | |||
| http.setRequestHeader("Content-Type", "text/plain"); | |||
| // send | |||
| http.send(message); | |||
| }); | |||
| } | |||
| function getNewTask(path) { | |||
| var file = undefined; | |||
| if (path !== undefined) { | |||
| file = path.replace("./data/data/", ""); | |||
| } | |||
| askAgent("http://127.0.0.1:3000/agents/proxy", {jsonrpc:"2.0",method:"getAssignment", params:{finishedFile:file}}).then(function(reply) { | |||
| console.log(reply, reply.result); | |||
| if (reply.result != 'none') { | |||
| startTask(reply.result, function(data,path) {document.getElementById("FILENAME").innerHTML = path; setTimeout(function() {drawAll(data,path);},200)}); | |||
| } | |||
| }) | |||
| } | |||
| getNewTask() | |||