Path: blob/master/scenario-notebooks/UserSecurityMetadata/graph.html.template
3253 views
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.css" type="text/css" />
<script src="https://requirejs.org/docs/release/2.1.8/comments/require.js"></script>
<style type="text/css">
#mynetwork {
width: 950px;
height: 950px;
background-color: #ffffff;
border: 1px solid lightgray;
position: relative;
float: left;
}
</style>
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript">
require(["https://unpkg.com/vis-network@latest/dist/vis-network.min.js"], function (vis) {
// initialize global variables.
var edges;
var nodes;
var network;
var container;
var options, data;
// This method is responsible for drawing the graph, returns the drawn network
function drawGraph() {
var container = document.getElementById('mynetwork');
// parsing and collecting nodes and edges from the python
nodes = new vis.DataSet($NODES);
edges = new vis.DataSet($EDGES);
/*var x = - container.clientWidth / 2 + 50;
var y = - container.clientHeight / 2 + 50;
var step = 70;
nodes.add({id: 1000, x: x, y: y, label: 'User', group: 'User', value: 1, fixed: true, physics:false});
nodes.add({id: 1001, x: x, y: y + step, label: 'Group', group: 'Group', value: 1, fixed: true, physics:false});
nodes.add({id: 1002, x: x, y: y + 2 * step, label: 'ServicePrincipal', group: 'ServicePrincipal', value: 1, fixed: true, physics:false});
nodes.add({id: 1003, x: x, y: y + 3 * step, label: 'Subscription', group: 'AzureSubscription', value: 1, fixed: true, physics:false});*/
// adding nodes and edges to the graph
data = { nodes: nodes, edges: edges };
var options = {
width: '100%',
height: '100%',
edges: {
arrows: 'to',
font: { strokeWidth: 0, size: 12, align: 'middle' },
color: { color: '#9fa89b', opacity: 0.7 }
},
groups: {
User: {
shape: 'dot',
color: {
border: '#401155',
background: '#9974AA',
highlight: {
background: '#794A8D',
fontColor: '#280339',
border: '#280339'
}
},
font: '12px arial black',
value: 5
},
AzureSubscription: {
shape: 'dot',
color: {
border: '#4C7513',
background: '#C9EA9C',
highlight: {
border: '#2D4E00',
background: '#9AC361',
fontColor: '#2D4E00'
}
},
font: '12px arial black',
value: 1
},
ServicePrincipal: {
shape: 'dot',
color: {
border: '#506D15',
background: '#9BD5D4',
highlight: {
border: '#774600',
fontColor: '#774600',
background: '#5BEBE9'
}
},
font: '12px arial black',
value: 3
},
Group: {
shape: 'dot',
color: {
border: '#806D15',
background: '#AA9639',
highlight: {
border: '#554600',
fontColor: '#554600',
background: '#D4C26A'
}
},
font: '12px arial black',
value: 3
}
},
physics: {
forceAtlas2Based: {
gravitationalConstant: -26,
centralGravity: 0.005,
springLength: 260,
springConstant: 0.18
},
maxVelocity: 146,
solver: 'forceAtlas2Based',
timestep: 0.35,
stabilization: { iterations: 100 }
}
};
network = new vis.Network(container, data, options);
allNodes = nodes.get({ returnType: "Object" });
allEdges = edges.get({ returnType: "Object" });
network.on("click", neighbourhoodHighlight);
return network;
return network;
}
function neighbourhoodHighlight(params) {
// if something is selected:
if (params.nodes.length > 0) {
highlightActive = true;
var i, j;
var selectedNode = params.nodes[0];
var degrees = 2;
// mark all nodes as hard to read.
for (var nodeId in allNodes) {
allNodes[nodeId].color = 'rgba(200,200,200,0.5)';
if (allNodes[nodeId].hiddenLabel === undefined) {
allNodes[nodeId].hiddenLabel = allNodes[nodeId].label;
allNodes[nodeId].label = undefined;
}
}
// mark all edges as hard to read.
for (var edgeId in allEdges) {
allEdges[edgeId].color = { color: '#9fa89b', opacity: 0.3 };
if (allEdges[edgeId].hiddenLabel === undefined) {
allEdges[edgeId].hiddenLabel = allEdges[edgeId].label;
allEdges[edgeId].label = ' ';
}
}
var connectedNodes = network.getConnectedNodes(selectedNode);
var connectedEdges = network.getConnectedEdges(selectedNode);
// all first degree nodes get their own color and their label back
for (i = 0; i < connectedNodes.length; i++) {
allNodes[connectedNodes[i]].color = undefined;
if (allNodes[connectedNodes[i]].hiddenLabel !== undefined) {
allNodes[connectedNodes[i]].label = allNodes[connectedNodes[i]].hiddenLabel;
allNodes[connectedNodes[i]].hiddenLabel = undefined;
}
}
// all first degree edges get their own color and their label back
for (i = 0; i < connectedEdges.length; i++) {
allEdges[connectedEdges[i]].color = { color: '#9fa89b', opacity: 0.7 };
if (allEdges[connectedEdges[i]].hiddenLabel !== undefined) {
allEdges[connectedEdges[i]].label = allEdges[connectedEdges[i]].hiddenLabel;
allEdges[connectedEdges[i]].hiddenLabel = undefined;
}
}
// the main node gets its own color and its label back.
allNodes[selectedNode].color = undefined;
if (allNodes[selectedNode].hiddenLabel !== undefined) {
allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel;
allNodes[selectedNode].hiddenLabel = undefined;
}
}
else if (highlightActive === true) {
// reset all nodes
for (var nodeId in allNodes) {
allNodes[nodeId].color = undefined;
if (allNodes[nodeId].hiddenLabel !== undefined) {
allNodes[nodeId].label = allNodes[nodeId].hiddenLabel;
allNodes[nodeId].hiddenLabel = undefined;
}
}
// reset all edges
for (var edgeId in allEdges) {
allEdges[edgeId].color = { color: '#9fa89b', opacity: 0.7 };
if (allEdges[edgeId].hiddenLabel !== undefined) {
allEdges[edgeId].label = allEdges[edgeId].hiddenLabel;
allEdges[edgeId].hiddenLabel = undefined;
}
}
highlightActive = false
}
// transform the object into an array
var updateArray = [];
for (nodeId in allNodes) {
if (allNodes.hasOwnProperty(nodeId)) {
updateArray.push(allNodes[nodeId]);
}
}
var updateEdgeArray = [];
for (edgeId in allEdges) {
if (allEdges.hasOwnProperty(edgeId)) {
updateEdgeArray.push(allEdges[edgeId]);
}
}
nodes.update(updateArray);
edges.update(updateEdgeArray);
}
drawGraph();
});
</script>
</body>
</html>