ChronoSense / concept_network_visualization.html

Upload 27 files

64b5d29 verified about 1 year ago

17.1 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>








	<center>
	<h1>ChronoSense Konsept A�� (Metriklerle)</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>ChronoSense Konsept A�� (Metriklerle)</h1>
	</center>
	<style type="text/css">

	#mynetwork {
	width: 100%;
	height: 800px;
	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="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 : []
	};





	// 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": "#ff7f0e", "id": "b8566bb8-f043-45d0-8442-c8f3e729a626", "label": "ai", "shape": "dot", "size": 40.0, "title": "ID: b8566bb8-f043-45d0-8442-c8f3e729a626\u003cbr\u003eName: ai\u003cbr\u003edegree_centrality: 0.300\u003cbr\u003ecommunity_id: 1"}, {"color": "#2ca02c", "id": "acdb0052-9fb5-4a61-8ce3-4fa9188ccd68", "label": "unsupervised learning: finding", "shape": "dot", "size": 40.0, "title": "ID: acdb0052-9fb5-4a61-8ce3-4fa9188ccd68\u003cbr\u003eName: unsupervised learning: finding\u003cbr\u003edegree_centrality: 0.300\u003cbr\u003ecommunity_id: 2"}, {"color": "#2ca02c", "id": "c9a071e5-358b-460f-897d-5a0d68b4dc91", "label": "reinforcement learning", "shape": "dot", "size": 40.0, "title": "ID: c9a071e5-358b-460f-897d-5a0d68b4dc91\u003cbr\u003eName: reinforcement learning\u003cbr\u003edegree_centrality: 0.300\u003cbr\u003ecommunity_id: 2"}, {"color": "#d62728", "id": "8bcb0007-453a-45a8-b0f5-ccb49fc963be", "label": "deep learning", "shape": "dot", "size": 10, "title": "ID: 8bcb0007-453a-45a8-b0f5-ccb49fc963be\u003cbr\u003eName: deep learning\u003cbr\u003edegree_centrality: 0.000\u003cbr\u003ecommunity_id: 3"}, {"color": "#1f77b4", "id": "544a779d-f9b6-4720-bfdf-80a26574d819", "label": "nlp", "shape": "dot", "size": 20.0, "title": "ID: 544a779d-f9b6-4720-bfdf-80a26574d819\u003cbr\u003eName: nlp\u003cbr\u003edegree_centrality: 0.100\u003cbr\u003ecommunity_id: 0"}, {"color": "#ff7f0e", "id": "1b3a4eb6-a80f-4098-b98e-2ca50ecbdbc6", "label": "chatbots", "shape": "dot", "size": 30.0, "title": "ID: 1b3a4eb6-a80f-4098-b98e-2ca50ecbdbc6\u003cbr\u003eName: chatbots\u003cbr\u003edegree_centrality: 0.200\u003cbr\u003ecommunity_id: 1"}, {"color": "#2ca02c", "id": "ffec4610-96c3-4a0f-a592-573143619a30", "label": "supervised learning", "shape": "dot", "size": 40.0, "title": "ID: ffec4610-96c3-4a0f-a592-573143619a30\u003cbr\u003eName: supervised learning\u003cbr\u003edegree_centrality: 0.300\u003cbr\u003ecommunity_id: 2"}, {"color": "#2ca02c", "id": "c7b69b48-9fea-45de-868d-27f935a7b2b7", "label": "labeled data unsupervised learning", "shape": "dot", "size": 40.0, "title": "ID: c7b69b48-9fea-45de-868d-27f935a7b2b7\u003cbr\u003eName: labeled data unsupervised learning\u003cbr\u003edegree_centrality: 0.300\u003cbr\u003ecommunity_id: 2"}, {"color": "#1f77b4", "id": "18f1cc03-9cfc-40c8-aa86-279a700a7f58", "label": "this approach", "shape": "dot", "size": 20.0, "title": "ID: 18f1cc03-9cfc-40c8-aa86-279a700a7f58\u003cbr\u003eName: this approach\u003cbr\u003edegree_centrality: 0.100\u003cbr\u003ecommunity_id: 0"}, {"color": "#ff7f0e", "id": "78b888f4-c0bf-492e-b514-3da1f628797d", "label": "gpt-4", "shape": "dot", "size": 30.0, "title": "ID: 78b888f4-c0bf-492e-b514-3da1f628797d\u003cbr\u003eName: gpt-4\u003cbr\u003edegree_centrality: 0.200\u003cbr\u003ecommunity_id: 1"}, {"color": "#ff7f0e", "id": "903e5742-9937-42c1-917d-ea7ff7ac449e", "label": "these models", "shape": "dot", "size": 20.0, "title": "ID: 903e5742-9937-42c1-917d-ea7ff7ac449e\u003cbr\u003eName: these models\u003cbr\u003edegree_centrality: 0.100\u003cbr\u003ecommunity_id: 1"}]);
	edges = new vis.DataSet([{"color": "#9370DB", "from": "b8566bb8-f043-45d0-8442-c8f3e729a626", "title": "Type: combined\u003cbr\u003eRelation: RELATED_TO\u003cbr\u003eSimilarity: 0.648", "to": "1b3a4eb6-a80f-4098-b98e-2ca50ecbdbc6", "value": 0.647527813911438}, {"color": "#9370DB", "from": "b8566bb8-f043-45d0-8442-c8f3e729a626", "title": "Type: combined\u003cbr\u003eRelation: RELATED_TO\u003cbr\u003eSimilarity: 0.648", "to": "78b888f4-c0bf-492e-b514-3da1f628797d", "value": 0.647527813911438}, {"color": "#4682B4", "from": "b8566bb8-f043-45d0-8442-c8f3e729a626", "title": "Type: similarity\u003cbr\u003eSimilarity: 0.627", "to": "903e5742-9937-42c1-917d-ea7ff7ac449e", "value": 0.6268218755722046}, {"color": "#FF6347", "from": "acdb0052-9fb5-4a61-8ce3-4fa9188ccd68", "title": "Type: extracted\u003cbr\u003eRelation: RELATED_TO", "to": "c9a071e5-358b-460f-897d-5a0d68b4dc91", "value": 0.8}, {"color": "#FF6347", "from": "acdb0052-9fb5-4a61-8ce3-4fa9188ccd68", "title": "Type: extracted\u003cbr\u003eRelation: RELATED_TO", "to": "ffec4610-96c3-4a0f-a592-573143619a30", "value": 0.8}, {"color": "#FF6347", "from": "acdb0052-9fb5-4a61-8ce3-4fa9188ccd68", "title": "Type: extracted\u003cbr\u003eRelation: RELATED_TO", "to": "c7b69b48-9fea-45de-868d-27f935a7b2b7", "value": 0.8}, {"color": "#FF6347", "from": "c9a071e5-358b-460f-897d-5a0d68b4dc91", "title": "Type: extracted\u003cbr\u003eRelation: RELATED_TO", "to": "ffec4610-96c3-4a0f-a592-573143619a30", "value": 0.8}, {"color": "#FF6347", "from": "c9a071e5-358b-460f-897d-5a0d68b4dc91", "title": "Type: extracted\u003cbr\u003eRelation: RELATED_TO", "to": "c7b69b48-9fea-45de-868d-27f935a7b2b7", "value": 0.8}, {"color": "#FF6347", "from": "544a779d-f9b6-4720-bfdf-80a26574d819", "title": "Type: extracted\u003cbr\u003eRelation: RELATED_TO", "to": "18f1cc03-9cfc-40c8-aa86-279a700a7f58", "value": 0.8}, {"color": "#FF6347", "from": "1b3a4eb6-a80f-4098-b98e-2ca50ecbdbc6", "title": "Type: extracted\u003cbr\u003eRelation: RELATED_TO", "to": "78b888f4-c0bf-492e-b514-3da1f628797d", "value": 0.8}, {"color": "#FF6347", "from": "ffec4610-96c3-4a0f-a592-573143619a30", "title": "Type: extracted\u003cbr\u003eRelation: RELATED_TO", "to": "c7b69b48-9fea-45de-868d-27f935a7b2b7", "value": 0.8}]);

	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",
	"nodes",
	"edges"
	]
	},
	"edges": {
	"color": {
	"inherit": true
	},
	"smooth": {
	"enabled": true,
	"type": "dynamic"
	}
	},
	"interaction": {
	"dragNodes": true,
	"hideEdgesOnDrag": false,
	"hideNodesOnDrag": false
	},
	"physics": {
	"barnesHut": {
	"avoidOverlap": 0,
	"centralGravity": 0.1,
	"damping": 0.09,
	"gravitationalConstant": -8000,
	"springConstant": 0.005,
	"springLength": 150
	},
	"enabled": true,
	"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);










	return network;

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