Spaces:

Demosthene-OR
/

Knowledge_Graph_Generator

Sleeping

App Files Files Community

Knowledge_Graph_Generator / knowledge_graph.html

Demosthene-OR

.....

3f5d323 14 days ago

raw

history blame contribute delete

22.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/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
	rel="stylesheet"
	integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
	crossorigin="anonymous"
	/>
	<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/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: 1200px;
	background-color: #222222;
	border: 1px solid lightgray;
	position: relative;
	float: left;
	}






	</style>
	</head>


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


	<div id="filter-menu" class="card-header">
	<div class="row no-gutters">
	<div class="col-3 pb-2">
	<select
	class="form-select"
	aria-label="Default select example"
	onchange="updateFilter(value, 'item')"
	id="select-item"
	>
	<option value="">Select a network item</option>
	<option value="edge">edge</option>
	<option value="node">node</option>
	</select>
	</div>
	<div class="col-3 pb-2">
	<select
	class="form-select"
	aria-label="Default select example"
	onchange="updateFilter(value, 'property')"
	id="select-property"
	>
	<option value="">Select a property...</option>
	</select>
	</div>
	<div class="col-3 pb-2">
	<select
	class="form-select"
	aria-label="Default select example"
	id="select-value"
	>
	<option value="">Select value(s)...</option>
	</select>
	</div>
	<div class="col-1 pb-2">
	<button type="button" class="btn btn-primary btn-block" onclick="highlightFilter(filter);">Filter</button>
	</div>
	<div class="col-2 pb-2">
	<button type="button" class="btn btn-primary btn-block" onclick="clearFilter(true)">Reset Selection</button>
	</div>
	</div>
	</div>

	<div id="mynetwork" class="card-body"></div>
	</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 : []
	};




	// explicitly using onItemAdd and this function as we need to save multiple values
	let updateValueFilter = function() {
	return function () {
	filter['value'].push(arguments[0])
	}
	}

	let valueControl = new TomSelect("#select-value",{
	maxItems: null,
	valueField: 'id',
	labelField: 'title',
	searchField: 'title',
	create: false,
	sortField: {
	field: "text",
	direction: "asc"
	},
	onItemAdd: updateValueFilter()
	});

	let addValues = function() {
	return function () {
	// clear the current value options and add the selected attribute values
	// tom-select handles duplicates
	let selectedProperty = arguments[0];
	valueControl.clear();
	valueControl.clearOptions();
	filter['value'] = []
	if (filter['item'] === 'node') {
	for (let each in allNodes) {
	valueControl.addOption({
	id:allNodes[each][selectedProperty],
	title:allNodes[each][selectedProperty]
	})
	}
	}
	else if (filter['item'] === 'edge') {
	for (let each in allEdges) {
	valueControl.addOption({
	id:allEdges[each][selectedProperty],
	title:allEdges[each][selectedProperty]
	})
	}
	}
	}
	};

	let propControl = new TomSelect("#select-property",{
	valueField: 'id',
	labelField: 'title',
	searchField: 'title',
	create: false,
	sortField: {
	field: "text",
	direction: "asc"
	},
	onItemAdd: addValues()
	});

	let addProperties = function() {
	return function () {
	// loops through the selected network item and adds the attributes to dropdown
	// tom-select handles duplicates
	clearFilter(false)
	if (arguments[0] === 'edge') {
	for (let each in allEdges) {
	if (allEdges.hasOwnProperty(each)) {
	for (let eachProp in allEdges[each]) {
	if (allEdges[each].hasOwnProperty(eachProp)) {
	propControl.addOption({id: eachProp, title: eachProp})
	}
	}
	}
	}
	}
	else if (arguments[0] === 'node') {
	for (let each in allNodes) {
	if (allNodes.hasOwnProperty(each)) {
	for (let eachProp in allNodes[each]) {
	if (allNodes[each].hasOwnProperty(eachProp)
	&& (eachProp !== 'hidden' && eachProp !== 'savedLabel'
	&& eachProp !== 'hiddenLabel')) {
	propControl.addOption({id: eachProp, title: eachProp})

	}
	}
	}
	}
	}
	}
	};

	let itemControl = new TomSelect("#select-item",{
	create: false,
	sortField:{
	field: "text",
	direction: "asc"
	},
	onItemAdd: addProperties()
	});

	function clearFilter(reset) {
	// utility function to clear all the selected filter options
	// if reset is set to true, the existing filter will be removed
	// else, only the dropdown options are cleared
	propControl.clear();
	propControl.clearOptions();
	valueControl.clear();
	valueControl.clearOptions();
	filter = {
	item : '',
	property : '',
	value : []
	}
	if (reset) {
	itemControl.clear();
	filterHighlight({nodes: []})
	}
	}

	function updateFilter(value, key) {
	// key could be 'item' or 'property' and value is as selected in dropdown
	filter[key] = value
	}



	// 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([{"font": {"color": "white"}, "group": "Fictional organization", "id": "Night\u0027S Watch", "label": "Night\u0027S Watch", "shape": "dot", "title": "Fictional organization"}, {"font": {"color": "white"}, "group": "Person", "id": "David Benioff", "label": "David Benioff", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Award", "id": "Primetime Emmy Awards", "label": "Primetime Emmy Awards", "shape": "dot", "title": "Award"}, {"font": {"color": "white"}, "group": "Award", "id": "Hugo Awards", "label": "Hugo Awards", "shape": "dot", "title": "Award"}, {"font": {"color": "white"}, "group": "Person", "id": "D. B. Weiss", "label": "D. B. Weiss", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Fictional continent", "id": "Essos", "label": "Essos", "shape": "dot", "title": "Fictional continent"}, {"font": {"color": "white"}, "group": "Organization", "id": "Hbo", "label": "Hbo", "shape": "dot", "title": "Organization"}, {"font": {"color": "white"}, "group": "Person", "id": "George R. R. Martin", "label": "George R. R. Martin", "shape": "dot", "title": "Person"}, {"font": {"color": "white"}, "group": "Television series", "id": "A Knight Of The Seven Kingdoms", "label": "A Knight Of The Seven Kingdoms", "shape": "dot", "title": "Television series"}, {"font": {"color": "white"}, "group": "Book series", "id": "A Song Of Ice And Fire", "label": "A Song Of Ice And Fire", "shape": "dot", "title": "Book series"}, {"font": {"color": "white"}, "group": "Award", "id": "Golden Globe Award For Best Television Series \u2013 Drama", "label": "Golden Globe Award For Best Television Series \u2013 Drama", "shape": "dot", "title": "Award"}, {"font": {"color": "white"}, "group": "Book", "id": "A Game Of Thrones", "label": "A Game Of Thrones", "shape": "dot", "title": "Book"}, {"font": {"color": "white"}, "group": "Television series", "id": "Game Of Thrones", "label": "Game Of Thrones", "shape": "dot", "title": "Television series"}, {"font": {"color": "white"}, "group": "Fictional object", "id": "Iron Throne", "label": "Iron Throne", "shape": "dot", "title": "Fictional object"}, {"font": {"color": "white"}, "group": "Fictional place", "id": "Seven Kingdoms", "label": "Seven Kingdoms", "shape": "dot", "title": "Fictional place"}, {"font": {"color": "white"}, "group": "Television series", "id": "House Of The Dragon", "label": "House Of The Dragon", "shape": "dot", "title": "Television series"}, {"font": {"color": "white"}, "group": "Award", "id": "Peabody Award", "label": "Peabody Award", "shape": "dot", "title": "Award"}, {"font": {"color": "white"}, "group": "Fictional continent", "id": "Westeros", "label": "Westeros", "shape": "dot", "title": "Fictional continent"}]);
	edges = new vis.DataSet([{"arrows": "to", "from": "Game Of Thrones", "label": "creator", "to": "David Benioff"}, {"arrows": "to", "from": "Game Of Thrones", "label": "creator", "to": "D. B. Weiss"}, {"arrows": "to", "from": "Game Of Thrones", "label": "network", "to": "Hbo"}, {"arrows": "to", "from": "Game Of Thrones", "label": "adaptation", "to": "A Song Of Ice And Fire"}, {"arrows": "to", "from": "A Song Of Ice And Fire", "label": "author", "to": "George R. R. Martin"}, {"arrows": "to", "from": "A Song Of Ice And Fire", "label": "first_book", "to": "A Game Of Thrones"}, {"arrows": "to", "from": "Game Of Thrones", "label": "setting", "to": "Westeros"}, {"arrows": "to", "from": "Game Of Thrones", "label": "setting", "to": "Essos"}, {"arrows": "to", "from": "Game Of Thrones", "label": "focus", "to": "Iron Throne"}, {"arrows": "to", "from": "Game Of Thrones", "label": "focus", "to": "Seven Kingdoms"}, {"arrows": "to", "from": "Game Of Thrones", "label": "focus", "to": "Night\u0027S Watch"}, {"arrows": "to", "from": "Game Of Thrones", "label": "award", "to": "Primetime Emmy Awards"}, {"arrows": "to", "from": "Game Of Thrones", "label": "award", "to": "Hugo Awards"}, {"arrows": "to", "from": "Game Of Thrones", "label": "award", "to": "Peabody Award"}, {"arrows": "to", "from": "Game Of Thrones", "label": "nomination", "to": "Golden Globe Award For Best Television Series \u2013 Drama"}, {"arrows": "to", "from": "House Of The Dragon", "label": "network", "to": "Hbo"}, {"arrows": "to", "from": "A Knight Of The Seven Kingdoms", "label": "network", "to": "Hbo"}]);

	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 = {"physics": {"forceAtlas2Based": {"gravitationalConstant": -100, "centralGravity": 0.01, "springLength": 200, "springConstant": 0.08}, "minVelocity": 0.75, "solver": "forceAtlas2Based"}};






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










	return network;

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