Last changes

main.go

@@ -10,7 +10,7 @@ import (
 
 func main() {
 	bind := flag.String("bind", ":20002", "Port to bind to")
-	iterations := flag.Int("i", 600, "Graph layout iterations to run (0 = auto, buggy)")
+	iterations := flag.Int("i", 200, "Graph layout iterations to run (0 = auto, buggy)")
 	flag.Parse()
 
 	data, err := formats.FromD3JSON("network.json")
@@ -26,7 +26,13 @@ func main() {
 	log.Printf("Loaded propagation data: %d timestamps\n", len(plog.Timestamps))
 
 	log.Printf("Initializing layout...")
-	l := layout.NewAuto(data)
+	//l := layout.NewAuto(data)
+
+	repelling := layout.NewGravityForce(-50.0, layout.BarneHutMethod)
+	springs := layout.NewSpringForce(0.02, 5, layout.ForEachLink)
+	drag := layout.NewDragForce(0.4, layout.ForEachNode)
+
+	l := layout.New(data, repelling, springs, drag)
 
 	ws := NewWSServer(l)
 	if *iterations == 0 {

web/bundle.js

@@ -236,6 +236,57 @@ replayButton.addEventListener('click', replay);
 
 animate();
 
+// Handle mouse hover
+var INTERSECTED;
+
+function onMouseMove( event ) {
+	let canvasBounds = renderer.context.canvas.getBoundingClientRect();
+    mouse.x = ( ( event.clientX - canvasBounds.left ) / ( canvasBounds.right - canvasBounds.left ) ) * 2 - 1;
+	mouse.y = - ( ( event.clientY - canvasBounds.top ) / ( canvasBounds.bottom - canvasBounds.top) ) * 2 + 1;
+
+	raycaster.setFromCamera( mouse, camera );
+	var intersects = raycaster.intersectObjects( scene.children, true );
+
+    let nodeInfo = document.getElementById('nodeInfo');
+    let nodeID = document.getElementById('selectedNodeID');
+	if (intersects.length > 0) {
+		// if the closest object intersected is not the currently stored intersection object
+		if (intersects[0].object != INTERSECTED) {
+			// restore previous intersection object (if it exists) to its original color
+			if (INTERSECTED)
+				INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
+			// store reference to closest object as current intersection object
+			
+			// find the object representing node (has __data.id field)
+			let obj = intersects.filter(x => x.object.__data !== undefined);
+			if (obj.length == 0) { return }
+			INTERSECTED = obj[0].object;
+			if (INTERSECTED.__data !== undefined) {
+				let id = INTERSECTED.__data.id;
+				nodeInfo.hidden = false;
+				nodeID.innerHTML = id;
+				let stats = current();
+				let nodeStats = stats.Nodes.filter(x => x.ID == id)[0];
+				let count = nodeStats.ClientsNum + nodeStats.PeersNum;
+			}
+			// store color of closest object (for later restoration)
+			INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
+			// set a new color for closest object
+			INTERSECTED.material.color.setHex(0xffff00);
+		}
+	} else {
+		// restore previous intersection object (if it exists) to its original color
+		if (INTERSECTED)
+		  INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
+		// remove previous intersection object reference
+		//     by setting current intersection object to "nothing"
+		INTERSECTED = null;
+		nodeInfo.hidden = true;
+	}
+}
+
+canvas.addEventListener( 'mousemove', onMouseMove, false );
+
 },{"./js/animation.js":2,"./js/colors.js":3,"./js/ethereum.js":4,"./js/keys.js":5,"./js/shitty_hacks.js":6,"dat.gui":11,"stats-js":12}],2:[function(require,module,exports){
 var gradient = require('d3-scale-chromatic').interpolateCool;
 

web/index.js

@@ -234,3 +234,54 @@ var replayButton = document.getElementById('replayButton');
 replayButton.addEventListener('click', replay);
 
 animate();
+
+// Handle mouse hover
+var INTERSECTED;
+
+function onMouseMove( event ) {
+	let canvasBounds = renderer.context.canvas.getBoundingClientRect();
+    mouse.x = ( ( event.clientX - canvasBounds.left ) / ( canvasBounds.right - canvasBounds.left ) ) * 2 - 1;
+	mouse.y = - ( ( event.clientY - canvasBounds.top ) / ( canvasBounds.bottom - canvasBounds.top) ) * 2 + 1;
+
+	raycaster.setFromCamera( mouse, camera );
+	var intersects = raycaster.intersectObjects( scene.children, true );
+
+    let nodeInfo = document.getElementById('nodeInfo');
+    let nodeID = document.getElementById('selectedNodeID');
+	if (intersects.length > 0) {
+		// if the closest object intersected is not the currently stored intersection object
+		if (intersects[0].object != INTERSECTED) {
+			// restore previous intersection object (if it exists) to its original color
+			if (INTERSECTED)
+				INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
+			// store reference to closest object as current intersection object
+			
+			// find the object representing node (has __data.id field)
+			let obj = intersects.filter(x => x.object.__data !== undefined);
+			if (obj.length == 0) { return }
+			INTERSECTED = obj[0].object;
+			if (INTERSECTED.__data !== undefined) {
+				let id = INTERSECTED.__data.id;
+				nodeInfo.hidden = false;
+				nodeID.innerHTML = id;
+				let stats = current();
+				let nodeStats = stats.Nodes.filter(x => x.ID == id)[0];
+				let count = nodeStats.ClientsNum + nodeStats.PeersNum;
+			}
+			// store color of closest object (for later restoration)
+			INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
+			// set a new color for closest object
+			INTERSECTED.material.color.setHex(0xffff00);
+		}
+	} else {
+		// restore previous intersection object (if it exists) to its original color
+		if (INTERSECTED)
+		  INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
+		// remove previous intersection object reference
+		//     by setting current intersection object to "nothing"
+		INTERSECTED = null;
+		nodeInfo.hidden = true;
+	}
+}
+
+canvas.addEventListener( 'mousemove', onMouseMove, false );