Spaces:

chrisfinlayson
/

foundry-pdf-knowledge-graph-pyvis

Sleeping

foundry-pdf-knowledge-graph-pyvis / docs /index.html

Chris Finlayson

First commit

02cc2d7 over 1 year ago

15.9 kB

	<html>
	<head>
	<meta charset="utf-8">

	<script>function neighbourhoodHighlight(params) {
	// console.log("in nieghbourhoodhighlight");
	allNodes = nodes.get({ returnType: "Object" });
	// originalNodes = JSON.parse(JSON.stringify(allNodes));
	// 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 (let nodeId in allNodes) {
	// nodeColors[nodeId] = allNodes[nodeId].color;
	allNodes[nodeId].color = "rgba(200,200,200,0.5)";
	if (allNodes[nodeId].hiddenLabel === undefined) {
	allNodes[nodeId].hiddenLabel = allNodes[nodeId].label;
	allNodes[nodeId].label = undefined;
	}
	}
	var connectedNodes = network.getConnectedNodes(selectedNode);
	var allConnectedNodes = [];

	// get the second degree nodes
	for (i = 1; i < degrees; i++) {
	for (j = 0; j < connectedNodes.length; j++) {
	allConnectedNodes = allConnectedNodes.concat(
	network.getConnectedNodes(connectedNodes[j])
	);
	}
	}

	// all second degree nodes get a different color and their label back
	for (i = 0; i < allConnectedNodes.length; i++) {
	// allNodes[allConnectedNodes[i]].color = "pink";
	allNodes[allConnectedNodes[i]].color = "rgba(150,150,150,0.75)";
	if (allNodes[allConnectedNodes[i]].hiddenLabel !== undefined) {
	allNodes[allConnectedNodes[i]].label =
	allNodes[allConnectedNodes[i]].hiddenLabel;
	allNodes[allConnectedNodes[i]].hiddenLabel = undefined;
	}
	}

	// all first degree nodes get their own color and their label back
	for (i = 0; i < connectedNodes.length; i++) {
	// allNodes[connectedNodes[i]].color = undefined;
	allNodes[connectedNodes[i]].color = nodeColors[connectedNodes[i]];
	if (allNodes[connectedNodes[i]].hiddenLabel !== undefined) {
	allNodes[connectedNodes[i]].label =
	allNodes[connectedNodes[i]].hiddenLabel;
	allNodes[connectedNodes[i]].hiddenLabel = undefined;
	}
	}

	// the main node gets its own color and its label back.
	// allNodes[selectedNode].color = undefined;
	allNodes[selectedNode].color = nodeColors[selectedNode];
	if (allNodes[selectedNode].hiddenLabel !== undefined) {
	allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel;
	allNodes[selectedNode].hiddenLabel = undefined;
	}
	} else if (highlightActive === true) {
	// console.log("highlightActive was true");
	// reset all nodes
	for (let nodeId in allNodes) {
	// allNodes[nodeId].color = "purple";
	allNodes[nodeId].color = nodeColors[nodeId];
	// delete allNodes[nodeId].color;
	if (allNodes[nodeId].hiddenLabel !== undefined) {
	allNodes[nodeId].label = allNodes[nodeId].hiddenLabel;
	allNodes[nodeId].hiddenLabel = undefined;
	}
	}
	highlightActive = false;
	}

	// transform the object into an array
	var updateArray = [];
	if (params.nodes.length > 0) {
	for (let nodeId in allNodes) {
	if (allNodes.hasOwnProperty(nodeId)) {
	// console.log(allNodes[nodeId]);
	updateArray.push(allNodes[nodeId]);
	}
	}
	nodes.update(updateArray);
	} else {
	// console.log("Nothing was selected");
	for (let nodeId in allNodes) {
	if (allNodes.hasOwnProperty(nodeId)) {
	// console.log(allNodes[nodeId]);
	// allNodes[nodeId].color = {};
	updateArray.push(allNodes[nodeId]);
	}
	}
	nodes.update(updateArray);
	}
	}

	function filterHighlight(params) {
	allNodes = nodes.get({ returnType: "Object" });
	// if something is selected:
	if (params.nodes.length > 0) {
	filterActive = true;
	let selectedNodes = params.nodes;

	// hiding all nodes and saving the label
	for (let nodeId in allNodes) {
	allNodes[nodeId].hidden = true;
	if (allNodes[nodeId].savedLabel === undefined) {
	allNodes[nodeId].savedLabel = allNodes[nodeId].label;
	allNodes[nodeId].label = undefined;
	}
	}

	for (let i=0; i < selectedNodes.length; i++) {
	allNodes[selectedNodes[i]].hidden = false;
	if (allNodes[selectedNodes[i]].savedLabel !== undefined) {
	allNodes[selectedNodes[i]].label = allNodes[selectedNodes[i]].savedLabel;
	allNodes[selectedNodes[i]].savedLabel = undefined;
	}
	}

	} else if (filterActive === true) {
	// reset all nodes
	for (let nodeId in allNodes) {
	allNodes[nodeId].hidden = false;
	if (allNodes[nodeId].savedLabel !== undefined) {
	allNodes[nodeId].label = allNodes[nodeId].savedLabel;
	allNodes[nodeId].savedLabel = undefined;
	}
	}
	filterActive = false;
	}

	// transform the object into an array
	var updateArray = [];
	if (params.nodes.length > 0) {
	for (let nodeId in allNodes) {
	if (allNodes.hasOwnProperty(nodeId)) {
	updateArray.push(allNodes[nodeId]);
	}
	}
	nodes.update(updateArray);
	} else {
	for (let nodeId in allNodes) {
	if (allNodes.hasOwnProperty(nodeId)) {
	updateArray.push(allNodes[nodeId]);
	}
	}
	nodes.update(updateArray);
	}
	}

	function selectNode(nodes) {
	network.selectNodes(nodes);
	neighbourhoodHighlight({ nodes: nodes });
	return nodes;
	}

	function selectNodes(nodes) {
	network.selectNodes(nodes);
	filterHighlight({nodes: nodes});
	return nodes;
	}

	function highlightFilter(filter) {
	let selectedNodes = []
	let selectedProp = filter['property']
	if (filter['item'] === 'node') {
	let allNodes = nodes.get({ returnType: "Object" });
	for (let nodeId in allNodes) {
	if (allNodes[nodeId][selectedProp] && filter['value'].includes((allNodes[nodeId][selectedProp]).toString())) {
	selectedNodes.push(nodeId)
	}
	}
	}
	else if (filter['item'] === 'edge'){
	let allEdges = edges.get({returnType: 'object'});
	// check if the selected property exists for selected edge and select the nodes connected to the edge
	for (let edge in allEdges) {
	if (allEdges[edge][selectedProp] && filter['value'].includes((allEdges[edge][selectedProp]).toString())) {
	selectedNodes.push(allEdges[edge]['from'])
	selectedNodes.push(allEdges[edge]['to'])
	}
	}
	}
	selectNodes(selectedNodes)
	}</script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/dist/vis-network.min.css" integrity="sha512-WgxfT5LWjfszlPHXRmBWHkV2eceiWTOBvrKCNbdgDYTHrT2AeLCGbF4sZlZw3UMN3WtL0tGUoIAKsu8mllg/XA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/vis-network.min.js" integrity="sha512-LnvoEWDFrqGHlHmDD2101OrLcbsfkrzoSpvtSQtxK3RMnRV0eOkhhBN2dXHKRrUU8p2DGRTk35n4O8nWSVe1mQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>






	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tom-select/2.0.0-rc.4/css/tom-select.min.css" integrity="sha512-43fHB3GLgZfz8QXl1RPQ8O66oIgv3po9cJ5erMt1c4QISq9dYb195T3vr5ImnJPXuVroKcGBPXBFKETW8jrPNQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tom-select/2.0.0-rc.4/js/tom-select.complete.js" integrity="sha512-jeF9CfnvzDiw9G9xiksVjxR2lib44Gnovvkv+3CgCG6NXCD4gqlA5nDAVW5WjpA+i+/zKsUWV5xNEbW1X/HH0Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>



	<center>
	<h1></h1>
	</center>

	<!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />
	<script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->
	<link
	href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
	rel="stylesheet"
	integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
	crossorigin="anonymous"
	/>
	<script
	src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
	integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
	crossorigin="anonymous"
	></script>


	<center>
	<h1></h1>
	</center>
	<style type="text/css">

	#mynetwork {
	width: 100%;
	height: 900px;
	background-color: #ffffff;
	border: 1px solid lightgray;
	position: relative;
	float: left;
	}




	#config {
	float: left;
	width: 400px;
	height: 600px;
	}



	</style>
	</head>


	<body>
	<div class="card" style="width: 100%">

	<div id="select-menu" class="card-header">
	<div class="row no-gutters">
	<div class="col-10 pb-2">
	<select
	class="form-select"
	aria-label="Default select example"
	onchange="selectNode([value]);"
	id="select-node"
	placeholder="Select node..."
	>
	<option selected>Select a Node by ID</option>

	<option value="special purpose which">special purpose which</option>

	<option value="special purpose scheduler">special purpose scheduler</option>

	<option value=""></option>

	<option value="performance usage">performance usage</option>

	<option value="simpliﬁed submission">simpliﬁed submission</option>

	<option value="sensitive workloads">sensitive workloads</option>

	<option value="gigabit Ethernet">gigabit Ethernet</option>

	<option value="actual it">actual it</option>

	<option value="which">which</option>

	</select>
	</div>
	<div class="col-2 pb-2">
	<button type="button" class="btn btn-primary btn-block" onclick="neighbourhoodHighlight({nodes: []});">Reset Selection</button>
	</div>
	</div>
	</div>


	<div id="mynetwork" class="card-body"></div>
	</div>



	<div id="config"></div>


	<script type="text/javascript">

	// initialize global variables.
	var edges;
	var nodes;
	var allNodes;
	var allEdges;
	var nodeColors;
	var originalNodes;
	var network;
	var container;
	var options, data;
	var filter = {
	item : '',
	property : '',
	value : []
	};


	new TomSelect("#select-node",{
	create: false,
	sortField: {
	field: "text",
	direction: "asc"
	}
	});




	// 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([{"color": "#97c2fc", "id": "special purpose which", "label": "special purpose which", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "special purpose scheduler", "label": "special purpose scheduler", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "", "label": "", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "performance usage", "label": "performance usage", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "simpli\ufb01ed submission", "label": "simpli\ufb01ed submission", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "sensitive workloads", "label": "sensitive workloads", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "gigabit Ethernet", "label": "gigabit Ethernet", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "actual it", "label": "actual it", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "which", "label": "which", "shape": "dot", "size": 10}]);
	edges = new vis.DataSet([{"edge": "workloads", "from": "special purpose which", "to": "special purpose scheduler", "width": 1}, {"edge": "workloads", "from": "", "to": "performance usage", "width": 1}, {"edge": "workloads", "from": "", "to": "simpli\ufb01ed submission", "width": 1}, {"edge": "workloads", "from": "", "to": "", "width": 1}, {"edge": "workloads", "from": "", "to": "sensitive workloads", "width": 1}, {"edge": "workloads", "from": "", "to": "gigabit Ethernet", "width": 1}, {"edge": "workloads", "from": "actual it", "to": "which", "width": 1}]);

	nodeColors = {};
	allNodes = nodes.get({ returnType: "Object" });
	for (nodeId in allNodes) {
	nodeColors[nodeId] = allNodes[nodeId].color;
	}
	allEdges = edges.get({ returnType: "Object" });
	// adding nodes and edges to the graph
	data = {nodes: nodes, edges: edges};

	var options = {
	"configure": {
	"enabled": true,
	"filter": [
	"physics"
	]
	},
	"edges": {
	"color": {
	"inherit": true
	},
	"smooth": {
	"enabled": true,
	"type": "dynamic"
	}
	},
	"interaction": {
	"dragNodes": true,
	"hideEdgesOnDrag": false,
	"hideNodesOnDrag": false
	},
	"physics": {
	"enabled": true,
	"forceAtlas2Based": {
	"avoidOverlap": 0,
	"centralGravity": 0.015,
	"damping": 0.4,
	"gravitationalConstant": -31,
	"springConstant": 0.08,
	"springLength": 100
	},
	"solver": "forceAtlas2Based",
	"stabilization": {
	"enabled": true,
	"fit": true,
	"iterations": 1000,
	"onlyDynamicEdges": false,
	"updateInterval": 50
	}
	}
	};





	// if this network requires displaying the configure window,
	// put it in its div
	options.configure["container"] = document.getElementById("config");


	network = new vis.Network(container, data, options);




	network.on("selectNode", neighbourhoodHighlight);







	return network;

	}
	drawGraph();
	</script>
	</body>
	</html>