Created
June 13, 2018 04:51
-
-
Save coinables/034003b80148e88f68c641950ff08956 to your computer and use it in GitHub Desktop.
lightning nodes & edges
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<!-- START SIGMA IMPORTS --> | |
<script src="../src/sigma.core.js"></script> | |
<script src="../src/conrad.js"></script> | |
<script src="../src/utils/sigma.utils.js"></script> | |
<script src="../src/utils/sigma.polyfills.js"></script> | |
<script src="../src/sigma.settings.js"></script> | |
<script src="../src/classes/sigma.classes.dispatcher.js"></script> | |
<script src="../src/classes/sigma.classes.configurable.js"></script> | |
<script src="../src/classes/sigma.classes.graph.js"></script> | |
<script src="../src/classes/sigma.classes.camera.js"></script> | |
<script src="../src/classes/sigma.classes.quad.js"></script> | |
<script src="../src/classes/sigma.classes.edgequad.js"></script> | |
<script src="../src/captors/sigma.captors.mouse.js"></script> | |
<script src="../src/captors/sigma.captors.touch.js"></script> | |
<script src="../src/renderers/sigma.renderers.canvas.js"></script> | |
<script src="../src/renderers/sigma.renderers.webgl.js"></script> | |
<script src="../src/renderers/sigma.renderers.svg.js"></script> | |
<script src="../src/renderers/sigma.renderers.def.js"></script> | |
<script src="../src/renderers/webgl/sigma.webgl.nodes.def.js"></script> | |
<script src="../src/renderers/webgl/sigma.webgl.nodes.fast.js"></script> | |
<script src="../src/renderers/webgl/sigma.webgl.edges.def.js"></script> | |
<script src="../src/renderers/webgl/sigma.webgl.edges.fast.js"></script> | |
<script src="../src/renderers/webgl/sigma.webgl.edges.arrow.js"></script> | |
<script src="../src/renderers/canvas/sigma.canvas.labels.def.js"></script> | |
<script src="../src/renderers/canvas/sigma.canvas.hovers.def.js"></script> | |
<script src="../src/renderers/canvas/sigma.canvas.nodes.def.js"></script> | |
<script src="../src/renderers/canvas/sigma.canvas.edges.def.js"></script> | |
<script src="../src/renderers/canvas/sigma.canvas.edges.curve.js"></script> | |
<script src="../src/renderers/canvas/sigma.canvas.edges.arrow.js"></script> | |
<script src="../src/renderers/canvas/sigma.canvas.edges.curvedArrow.js"></script> | |
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.def.js"></script> | |
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.curve.js"></script> | |
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.arrow.js"></script> | |
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.curvedArrow.js"></script> | |
<script src="../src/renderers/canvas/sigma.canvas.extremities.def.js"></script> | |
<script src="../src/renderers/svg/sigma.svg.utils.js"></script> | |
<script src="../src/renderers/svg/sigma.svg.nodes.def.js"></script> | |
<script src="../src/renderers/svg/sigma.svg.edges.def.js"></script> | |
<script src="../src/renderers/svg/sigma.svg.edges.curve.js"></script> | |
<script src="../src/renderers/svg/sigma.svg.labels.def.js"></script> | |
<script src="../src/renderers/svg/sigma.svg.hovers.def.js"></script> | |
<script src="../src/middlewares/sigma.middlewares.rescale.js"></script> | |
<script src="../src/middlewares/sigma.middlewares.copy.js"></script> | |
<script src="../src/misc/sigma.misc.animation.js"></script> | |
<script src="../src/misc/sigma.misc.bindEvents.js"></script> | |
<script src="../src/misc/sigma.misc.bindDOMEvents.js"></script> | |
<script src="../src/misc/sigma.misc.drawHovers.js"></script> | |
<!-- END SIGMA IMPORTS --> | |
<script src="../plugins/sigma.plugins.neighborhoods/sigma.plugins.neighborhoods.js"></script> | |
<script src="../plugins/sigma.layout.forceAtlas2/supervisor.js"></script> | |
<script src="../plugins/sigma.layout.forceAtlas2/worker.js"></script> | |
<script src="lib/jquery-2.1.1.min.js"></script> | |
<style> | |
html,body{ | |
font-family: "Calibri", "Arial", "sans-serif"; | |
} | |
#graph-container { | |
top: -20px; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
height: 600px; | |
position: relative; | |
background-color: #fff; | |
} | |
.sigma-edge { | |
stroke: #57b6f2; | |
} | |
.sigma-node { | |
fill: #990188; | |
stroke: #14191C; | |
stroke-width: 2px; | |
} | |
.sigma-node:hover { | |
fill: blue; | |
} | |
.muted { | |
fill-opacity: 0.1; | |
stroke-opacity: 0.1; | |
stroke: #ccc; | |
} | |
.channels{ | |
padding: 5px; | |
background-color: darkslateblue; | |
color: aliceblue; | |
border-radius: 8px; | |
border: 1px solid #000039; | |
margin: 3px; | |
} | |
.nodeAlias{ | |
padding: 5px; | |
background-color: white; | |
color: #111111; | |
border-radius: 8px; | |
border: 1px solid #fff; | |
margin: 3px; | |
} | |
h4{ | |
margin: -5px; | |
} | |
#searchOutput{ | |
width: 30%; | |
position: absolute; | |
right: 4px; | |
top:50px; | |
text-align: right; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="container"> | |
<div id="graph-container"></div> | |
<br> | |
</div> | |
<input type="text" placeholder="SEARCH BY ALIAS" onkeyup="return nodeSearch();" id="search"> | |
<div id="searchOutput"></div> | |
<script> | |
var nodesJSON = (function () { | |
var json = null; | |
$.ajax({ | |
'async': false, | |
'global': false, | |
'url': "nodes.json", | |
'dataType': "json", | |
'success': function (data) { | |
json = data; | |
} | |
}); | |
return json; | |
})(); | |
var channelsJSON = (function () { | |
var json = null; | |
$.ajax({ | |
'async': false, | |
'global': false, | |
'url': "channels.json", | |
'dataType': "json", | |
'success': function (data) { | |
json = data; | |
} | |
}); | |
return json; | |
})(); | |
let nodesLength = nodesJSON.nodes.length; | |
h = { | |
nodes: [], | |
connections: [] | |
} | |
for(var i=0;i<nodesLength;i++){ | |
h.nodes.push({ | |
id: nodesJSON.nodes[i].nodeid, | |
label: nodesJSON.nodes[i].alias, | |
address: null | |
}); | |
} | |
let innerNodes = h.nodes.length; | |
for(var i=0;i<innerNodes;i++){ | |
let innerCounter = 0; | |
let channelsLength = channelsJSON.channels.length; | |
for(ii=0;ii<channelsLength;ii++){ | |
if(channelsJSON.channels[ii].destination === h.nodes[i].id){ | |
innerCounter++; | |
} | |
} | |
h.connections.push(innerCounter); | |
} | |
var i, | |
s, | |
N = nodesJSON.nodes.length, | |
E = channelsJSON.channels.length, | |
g = { | |
nodes: [], | |
edges: [] | |
}; | |
for (i = 0; i < N; i++) | |
g.nodes.push({ | |
id: h.nodes[i].id, | |
label: h.nodes[i].label, | |
x: Math.random() *25, | |
y: Math.random() *10, | |
size: h.connections[i] +30, | |
color: '#991188' | |
}); | |
for (i = 0; i < E; i++) | |
g.edges.push({ | |
id: channelsJSON.channels[i].short_channel_id+i, | |
source: channelsJSON.channels[i].source, | |
target: channelsJSON.channels[i].destination, | |
size: Math.random(), | |
color: '#ccc' | |
}); | |
function nodeSearch(){ | |
document.getElementById("searchOutput").innerHTML = ""; | |
var userInputText = document.getElementById("search").value; | |
var uitl = userInputText.length; | |
//if(uitl > 0){ | |
var uilwr = userInputText.toLowerCase(); | |
hn = h.nodes.length; | |
for(i=0;i<hn;i++){ | |
if(h.nodes[i].label){ | |
var checkNSub = h.nodes[i].label.substring(0, uitl); | |
var checkNLwer = checkNSub.toLowerCase(); | |
if(checkNLwer === uilwr){ | |
console.log(h.nodes[i].label+" "+h.connections[i]); | |
$("#searchOutput").append("<br><h4><span class='nodeAlias'>"+h.nodes[i].label+'</span><span class="channels">'+h.connections[i]+"</span><br><input type='text' id='"+i+"' value='"+h.nodes[i].id+"' readonly></h4>"); | |
} | |
} else { | |
// | |
} | |
} | |
//} | |
} | |
// Instantiate sigma: | |
s = new sigma({ | |
graph: g, | |
settings: { | |
enableHovering: false | |
} | |
}); | |
s.addRenderer({ | |
id: 'main', | |
type: 'svg', | |
container: document.getElementById('graph-container'), | |
freeStyle: true | |
}); | |
s.refresh(); | |
// Binding silly interactions | |
function mute(node) { | |
if (!~node.getAttribute('class').search(/muted/)) | |
node.setAttributeNS(null, 'class', node.getAttribute('class') + ' muted'); | |
} | |
function unmute(node) { | |
node.setAttributeNS(null, 'class', node.getAttribute('class').replace(/(\s|^)muted(\s|$)/g, '$2')); | |
} | |
$('.sigma-node').click(function() { | |
// Muting | |
$('.sigma-node, .sigma-edge').each(function() { | |
mute(this); | |
}); | |
// Unmuting neighbors | |
var neighbors = s.graph.neighborhood($(this).attr('data-node-id')); | |
neighbors.nodes.forEach(function(node) { | |
unmute($('[data-node-id="' + node.id + '"]')[0]); | |
}); | |
neighbors.edges.forEach(function(edge) { | |
unmute($('[data-edge-id="' + edge.id + '"]')[0]); | |
}); | |
}); | |
s.bind('clickStage', function() { | |
$('.sigma-node, .sigma-edge').each(function() { | |
unmute(this); | |
}); | |
}); | |
if (location.protocol != 'https:') | |
{ | |
location.href = 'https:' + window.location.href.substring(window.location.protocol.length); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment