Skip to content
Snippets Groups Projects
Unverified Commit eda46463 authored by Angelo Capossele's avatar Angelo Capossele Committed by GitHub
Browse files

Merge pull request #175 from iotaledger/fix/visualizer-in-out 

improves visualizer
parents 3a038049 3a6445c0
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
plugins/analysis/client/plugin.go
+ 1
− 1
View file @ eda46463
...@@ -157,7 +157,7 @@ func reportAcceptedNeighbors(dispatchers *EventDispatchers) { ...@@ -157,7 +157,7 @@ func reportAcceptedNeighbors(dispatchers *EventDispatchers) {
if autopeering.Selection != nil { if autopeering.Selection != nil {
for _, acceptedNeighbor := range autopeering.Selection.GetIncomingNeighbors() { for _, acceptedNeighbor := range autopeering.Selection.GetIncomingNeighbors() {
//dispatchers.AddNode(acceptedNeighbor.ID().Bytes()) //dispatchers.AddNode(acceptedNeighbor.ID().Bytes())
dispatchers.ConnectNodes(local.GetInstance().ID().Bytes(), acceptedNeighbor.ID().Bytes()) dispatchers.ConnectNodes(acceptedNeighbor.ID().Bytes(), local.GetInstance().ID().Bytes())
} }
} }
} }
......
plugins/analysis/webinterface/httpserver/index.go
+ 41
− 12
View file @ eda46463
...@@ -8,6 +8,11 @@ import ( ...@@ -8,6 +8,11 @@ import (
func index(w http.ResponseWriter, r *http.Request) { func index(w http.ResponseWriter, r *http.Request) {
fmt.Fprintf(w, `<head> fmt.Fprintf(w, `<head>
<style> <style>
html {
font-family: monospace, monospace;
line-height: 1.15;
-webkit-text-size-adjust: 100%%;
}
body { body {
text-align: center; text-align: center;
margin: 0; margin: 0;
...@@ -83,8 +88,8 @@ func index(w http.ResponseWriter, r *http.Request) { ...@@ -83,8 +88,8 @@ func index(w http.ResponseWriter, r *http.Request) {
<div id="nodestat"> <div id="nodestat">
<p id="in"></p> <p id="in"></p>
<p id="out"></p> <p id="out"></p>
</div>
</div> </div>
<script> <script>
var socket = new WebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/datastream"); var socket = new WebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/datastream");
...@@ -144,6 +149,8 @@ func index(w http.ResponseWriter, r *http.Request) { ...@@ -144,6 +149,8 @@ func index(w http.ResponseWriter, r *http.Request) {
var existingLinks = {}; var existingLinks = {};
let highlightNodes = []; let highlightNodes = [];
let highlightInbound = [];
let highlightOutbound = [];
let highlightLinks = []; let highlightLinks = [];
let highlightLink = null; let highlightLink = null;
...@@ -155,10 +162,23 @@ func index(w http.ResponseWriter, r *http.Request) { ...@@ -155,10 +162,23 @@ func index(w http.ResponseWriter, r *http.Request) {
.graphData(data) .graphData(data)
.enableNodeDrag(false) .enableNodeDrag(false)
.onNodeClick(showNodeStat) .onNodeClick(showNodeStat)
.nodeColor(node => highlightNodes.indexOf(node) === -1 ? 'rgba(0,255,255,0.6)' : 'rgb(255,0,0,1)') .nodeColor(node => {
.linkWidth(link => highlightLinks.indexOf(link) === -1 ? 1 : 4) if (highlightNodes.indexOf(node) != -1) {
.linkDirectionalParticles(link => highlightLinks.indexOf(link) === -1 ? 0 : 4) return 'rgb(255,0,0,1)'
.linkDirectionalParticleWidth(4) }
if (highlightInbound.indexOf(node) != -1) {
return 'rgba(0,255,100,0.6)'
}
if (highlightOutbound.indexOf(node) != -1) {
return 'rgba(0,100,255,0.6)'
}
else {
return 'rgba(0,255,255,0.6)'
}
})
.linkWidth(link => highlightLinks.indexOf(link) === -1 ? 1 : 3)
.linkDirectionalParticles(link => highlightLinks.indexOf(link) === -1 ? 0 : 3)
.linkDirectionalParticleWidth(3)
.onNodeHover(node => { .onNodeHover(node => {
// no state change // no state change
if ((!node && !highlightNodes.length) || (highlightNodes.length === 1 && highlightNodes[0] === node)) return; if ((!node && !highlightNodes.length) || (highlightNodes.length === 1 && highlightNodes[0] === node)) return;
...@@ -166,9 +186,21 @@ func index(w http.ResponseWriter, r *http.Request) { ...@@ -166,9 +186,21 @@ func index(w http.ResponseWriter, r *http.Request) {
highlightNodes = node ? [node] : []; highlightNodes = node ? [node] : [];
highlightLinks = []; highlightLinks = [];
highlightInbound = [];
highlightOutbound = [];
clearNodeStat(); clearNodeStat();
if (node != null) { if (node != null) {
highlightLinks = data.links.filter(l => (l.target.id == node.id) || (l.source.id == node.id)); highlightLinks = data.links.filter(l => (l.target.id == node.id) || (l.source.id == node.id));
highlightLinks.forEach(function(link){
if (link.target.id == node.id) {
highlightInbound.push(link.source)
}
else {
highlightOutbound.push(link.target)
}
});
showNodeStat(node); showNodeStat(node);
} }
updateHighlight(); updateHighlight();
...@@ -244,7 +276,7 @@ func index(w http.ResponseWriter, r *http.Request) { ...@@ -244,7 +276,7 @@ func index(w http.ResponseWriter, r *http.Request) {
} }
function connectNodes(sourceNodeId, targetNodeId) { function connectNodes(sourceNodeId, targetNodeId) {
if(existingLinks[sourceNodeId + targetNodeId] == undefined && existingLinks[targetNodeId + sourceNodeId] == undefined) { if(existingLinks[sourceNodeId + targetNodeId] == undefined) {
if (!(sourceNodeId in nodesById)) { if (!(sourceNodeId in nodesById)) {
addNode(sourceNodeId); addNode(sourceNodeId);
} }
...@@ -261,9 +293,8 @@ func index(w http.ResponseWriter, r *http.Request) { ...@@ -261,9 +293,8 @@ func index(w http.ResponseWriter, r *http.Request) {
} }
function disconnectNodes(sourceNodeId, targetNodeId) { function disconnectNodes(sourceNodeId, targetNodeId) {
data.links = data.links.filter(l => !(l.source.id == sourceNodeId && l.target.id == targetNodeId) && !(l.source.id == targetNodeId && l.target.id == sourceNodeId)); data.links = data.links.filter(l => !(l.source.id == sourceNodeId && l.target.id == targetNodeId));
delete existingLinks[sourceNodeId + targetNodeId]; delete existingLinks[sourceNodeId + targetNodeId];
delete existingLinks[targetNodeId + sourceNodeId];
updateGraph(); updateGraph();
} }
...@@ -278,18 +309,16 @@ func index(w http.ResponseWriter, r *http.Request) { ...@@ -278,18 +309,16 @@ func index(w http.ResponseWriter, r *http.Request) {
document.getElementById("nodeId").innerHTML = "ID: " + node.id.substr(0, 16); document.getElementById("nodeId").innerHTML = "ID: " + node.id.substr(0, 16);
var incoming = data.links.filter(l => (l.target.id == node.id)); var incoming = data.links.filter(l => (l.target.id == node.id));
document.getElementById("in").innerHTML = "IN: " + incoming.length + "<br>"; document.getElementById("in").innerHTML = "INBOUND (accepted): " + incoming.length + "<br>";
incoming.forEach(function(link){ incoming.forEach(function(link){
document.getElementById("in").innerHTML += link.source.id.substr(0, 16) + " &rarr; NODE <br>"; document.getElementById("in").innerHTML += link.source.id.substr(0, 16) + " &rarr; NODE <br>";
}); });
var outgoing = data.links.filter(l => (l.source.id == node.id)); var outgoing = data.links.filter(l => (l.source.id == node.id));
document.getElementById("out").innerHTML = "OUT: " + outgoing.length + "<br>"; document.getElementById("out").innerHTML = "OUTBOUND (chosen): " + outgoing.length + "<br>";
outgoing.forEach(function(link){ outgoing.forEach(function(link){
document.getElementById("out").innerHTML += "NODE &rarr; " + link.target.id.substr(0, 16) + "<br>"; document.getElementById("out").innerHTML += "NODE &rarr; " + link.target.id.substr(0, 16) + "<br>";
}); });
nodesById[node.id].color = 'rgba(0,255,255,1)'
} }
</script> </script>
</body>`) </body>`)
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment