|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<script>function neighbourhoodHighlight(params) {
|
|
|
|
|
|
allNodes = nodes.get({ returnType: "Object" });
|
|
|
|
|
|
|
|
|
if (params.nodes.length > 0) {
|
|
|
highlightActive = true;
|
|
|
var i, j;
|
|
|
var selectedNode = params.nodes[0];
|
|
|
var degrees = 2;
|
|
|
|
|
|
|
|
|
for (let 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;
|
|
|
}
|
|
|
}
|
|
|
var connectedNodes = network.getConnectedNodes(selectedNode);
|
|
|
var allConnectedNodes = [];
|
|
|
|
|
|
|
|
|
for (i = 1; i < degrees; i++) {
|
|
|
for (j = 0; j < connectedNodes.length; j++) {
|
|
|
allConnectedNodes = allConnectedNodes.concat(
|
|
|
network.getConnectedNodes(connectedNodes[j])
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
for (i = 0; i < allConnectedNodes.length; i++) {
|
|
|
|
|
|
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;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
for (i = 0; i < connectedNodes.length; i++) {
|
|
|
|
|
|
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;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
allNodes[selectedNode].color = nodeColors[selectedNode];
|
|
|
if (allNodes[selectedNode].hiddenLabel !== undefined) {
|
|
|
allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel;
|
|
|
allNodes[selectedNode].hiddenLabel = undefined;
|
|
|
}
|
|
|
} else if (highlightActive === true) {
|
|
|
|
|
|
|
|
|
for (let nodeId in allNodes) {
|
|
|
|
|
|
allNodes[nodeId].color = nodeColors[nodeId];
|
|
|
|
|
|
if (allNodes[nodeId].hiddenLabel !== undefined) {
|
|
|
allNodes[nodeId].label = allNodes[nodeId].hiddenLabel;
|
|
|
allNodes[nodeId].hiddenLabel = undefined;
|
|
|
}
|
|
|
}
|
|
|
highlightActive = false;
|
|
|
}
|
|
|
|
|
|
|
|
|
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 filterHighlight(params) {
|
|
|
allNodes = nodes.get({ returnType: "Object" });
|
|
|
|
|
|
if (params.nodes.length > 0) {
|
|
|
filterActive = true;
|
|
|
let selectedNodes = params.nodes;
|
|
|
|
|
|
|
|
|
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) {
|
|
|
|
|
|
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;
|
|
|
}
|
|
|
|
|
|
|
|
|
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'});
|
|
|
|
|
|
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
|
|
|
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">
|
|
|
|
|
|
|
|
|
var edges;
|
|
|
var nodes;
|
|
|
var allNodes;
|
|
|
var allEdges;
|
|
|
var nodeColors;
|
|
|
var originalNodes;
|
|
|
var network;
|
|
|
var container;
|
|
|
var options, data;
|
|
|
var filter = {
|
|
|
item : '',
|
|
|
property : '',
|
|
|
value : []
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function drawGraph() {
|
|
|
var container = document.getElementById('mynetwork');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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" });
|
|
|
|
|
|
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
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
options.configure["container"] = document.getElementById("config");
|
|
|
|
|
|
|
|
|
network = new vis.Network(container, data, options);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return network;
|
|
|
|
|
|
}
|
|
|
drawGraph();
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
