|
|
|
@ -56,6 +56,12 @@ |
|
|
|
<script src="src/misc/sigma.misc.drawHovers.js"></script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="src/plugins/sigma.plugins.neighborhoods/sigma.plugins.neighborhoods.js"></script> |
|
|
|
<script src="src/plugins/sigma.layout.forceAtlas2/supervisor.js"></script> |
|
|
|
<script src="src/plugins/sigma.layout.forceAtlas2/worker.js"></script> |
|
|
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> |
|
|
|
|
|
|
|
</head> |
|
|
|
<body> |
|
|
|
<div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary"> |
|
|
|
@ -88,12 +94,27 @@ |
|
|
|
<div id="container"> |
|
|
|
<style> |
|
|
|
#graph-container { |
|
|
|
top: 5%; |
|
|
|
top: 0; |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
z-index: 0; |
|
|
|
position: absolute; |
|
|
|
/*background-color: #455660;*/ |
|
|
|
} |
|
|
|
.sigma-edge { |
|
|
|
/*stroke: #14191C;*/ |
|
|
|
} |
|
|
|
.sigma-node { |
|
|
|
/*fill: green;*/ |
|
|
|
/*stroke: #14191C;*/ |
|
|
|
/*stroke-width: 2px;*/ |
|
|
|
} |
|
|
|
.sigma-node:hover { |
|
|
|
fill: blue; |
|
|
|
} |
|
|
|
.muted { |
|
|
|
fill-opacity: 0.1; |
|
|
|
stroke-opacity: 0.1; |
|
|
|
} |
|
|
|
</style> |
|
|
|
<div id="graph-container" style="width:100%; height:100%"></div> |
|
|
|
@ -102,7 +123,6 @@ |
|
|
|
<script> |
|
|
|
|
|
|
|
var s, |
|
|
|
r, |
|
|
|
g = { |
|
|
|
nodes: [], |
|
|
|
edges: [] |
|
|
|
@ -114,28 +134,28 @@ |
|
|
|
'#b956af' |
|
|
|
]; |
|
|
|
|
|
|
|
// Instantiate sigma: |
|
|
|
s = new sigma({ |
|
|
|
graph: g, |
|
|
|
renderer: { |
|
|
|
container: document.getElementById('graph-container'), |
|
|
|
type: 'canvas' |
|
|
|
}, |
|
|
|
settings: { |
|
|
|
minNodeSize: 8, |
|
|
|
maxNodeSize: 16, |
|
|
|
enableHovering: false |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
s.addRenderer({ |
|
|
|
id: 'main', |
|
|
|
type: 'svg', |
|
|
|
container: document.getElementById('graph-container'), |
|
|
|
freeStyle: true |
|
|
|
}); |
|
|
|
|
|
|
|
getData = getUrlVars(); |
|
|
|
|
|
|
|
connection = new WebSocket('ws://jrtechs.student.rit.edu:4444'); |
|
|
|
connection = new WebSocket('ws://localhost:4444'); |
|
|
|
|
|
|
|
connection.onopen = function () |
|
|
|
{ |
|
|
|
console.log('Connected!'); |
|
|
|
|
|
|
|
console.log(r); |
|
|
|
|
|
|
|
if(getData["id"] != undefined && getData["id"] != "") |
|
|
|
{ |
|
|
|
connection.send("{id:'" + getData["id"] + "', graph:" + getData["graph"] + "}"); |
|
|
|
@ -206,6 +226,73 @@ |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//jquery stuff for hiding and displaying users when clicked |
|
|
|
s.bind('clickNode doubleClickNode rightClickNode', function(e) |
|
|
|
{ |
|
|
|
console.log(e.type, e); |
|
|
|
$('.sigma-node, .sigma-edge').each(function() |
|
|
|
{ |
|
|
|
mute(this); |
|
|
|
}); |
|
|
|
|
|
|
|
var neighbors = s.graph.neighborhood(e.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]); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
// 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() |
|
|
|
{ |
|
|
|
|
|
|
|
console.log("click"); |
|
|
|
$('.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); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
@ -235,8 +322,6 @@ https://github.com/jrtechs |
|
|
|
|
|
|
|
--> |
|
|
|
|
|
|
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> |
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> |
|
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> |
|
|
|
</body> |
|
|
|
|
jxr8142
6 years ago