diff --git a/plugins/analysis/webinterface/httpserver/index.go b/plugins/analysis/webinterface/httpserver/index.go
index c3cab773b3452013acf43b0c138c9b07ec9b0306..f91ca4f6f504433ebdf4aa0145bed750b8a4de11 100644
--- a/plugins/analysis/webinterface/httpserver/index.go
+++ b/plugins/analysis/webinterface/httpserver/index.go
@@ -7,15 +7,84 @@ import (
func index(w http.ResponseWriter, r *http.Request) {
fmt.Fprintf(w, `<head>
- <style> body { margin: 0; } </style>
+ <style>
+ body {
+ text-align: center;
+ margin: 0;
+ overflow: hidden;
+ }
+
+ #nfo{
+ position:absolute;
+ right: 0;
+ padding:10px;
+ }
+
+ #knownPeers{
+ position:relative;
+ margin:0;
+ font-size:14px;
+ font-weight: bold;
+ text-align:right;
+ color:#aaa;
+ }
+
+ #avgNeighbors{
+ position:relative;
+ margin:0;
+ font-size:13px;
+ text-align:right;
+ color:grey;
+ }
+
+ #graphc {
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ margin:0;
+ right: 0px;
+ }
+
+ #nodeId{
+ position:relative;
+ margin:0;
+ padding:5px 0;
+ font-size:13px;
+ font-weight: bold;
+ text-align:right;
+ color:#aaa;
+ }
+
+ #nodestat{
+ position:relative;
+ margin:0;
+ font-size:12px;
+ text-align:right;
+ color:grey;
+ }
+
+ #in, #out{
+ margin:0;
+ padding: 3px 0;
+ }
+
+ </style>
<script src="https://unpkg.com/3d-force-graph"></script>
<!--<script src="../../dist/3d-force-graph.js"></script>-->
</head>
<body>
- <div id="3d-graph"></div>
-
+ <div id="graphc"></div>
+ <div id="nfo">
+ <p id="knownPeers"></p>
+ <p id="avgNeighbors"></p>
+ <div id="nodeId"></div>
+ <div id="nodestat">
+ <p id="in"></p>
+ <p id="out"></p>
+ </div>
+
<script>
var socket = new WebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/datastream");
@@ -26,7 +95,8 @@ func index(w http.ResponseWriter, r *http.Request) {
};
socket.onmessage = function (e) {
- console.log("Len: ", data.nodes.length);
+ document.getElementById("knownPeers").innerHTML = "Known peers: " + data.nodes.length;
+ document.getElementById("avgNeighbors").innerHTML = "Average neighbors: " + parseFloat(((data.links.length * 2) / data.nodes.length).toFixed(2));
switch (e.data[0]) {
case "_":
// do nothing - its just a ping
@@ -73,12 +143,12 @@ func index(w http.ResponseWriter, r *http.Request) {
var existingLinks = {};
- const elem = document.getElementById("3d-graph");
+ const elem = document.getElementById("graphc");
const Graph = ForceGraph3D()(elem)
.enableNodeDrag(false)
.onNodeHover(node => elem.style.cursor = node ? 'pointer' : null)
- .onNodeClick()
+ .onNodeClick(showNodeID)
.nodeColor(node => node.online ? 'rgba(0,255,0,1)' : 'rgba(255,255,255,1)')
.graphData(data);
@@ -144,6 +214,7 @@ func index(w http.ResponseWriter, r *http.Request) {
}
nodesById[sourceNodeId].online = true;
nodesById[targetNodeId].online = true;
+ existingLinks[sourceNodeId + targetNodeId] = true
data.links = [...data.links, { source: sourceNodeId, target: targetNodeId }];
updateGraph();
@@ -158,10 +229,20 @@ func index(w http.ResponseWriter, r *http.Request) {
updateGraph();
}
- function removeNodeX(node) {
- if (node.id in nodesById) {
- removeNode(node.id);
- }
+ function showNodeID(node) {
+ document.getElementById("nodeId").innerHTML = "ID: " + node.id;
+
+ var incoming = data.links.filter(l => (l.target.id == node.id));
+ document.getElementById("in").innerHTML = "IN: " + incoming.length + "<br>";
+ incoming.forEach(function(link){
+ document.getElementById("in").innerHTML += link.source.id + " → NODE <br>";
+ });
+
+ var outgoing = data.links.filter(l => (l.source.id == node.id));
+ document.getElementById("out").innerHTML = "OUT: " + outgoing.length + "<br>";
+ outgoing.forEach(function(link){
+ document.getElementById("out").innerHTML += "NODE → " + link.target.id + "<br>";
+ });
}
</script>
</body>`)