360 lines
691 KiB
HTML
360 lines
691 KiB
HTML
|
<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>
|
||
|
|
<style>.vis-overlay{bottom:0;left:0;position:absolute;right:0;top:0;z-index:10}.vis-active{box-shadow:0 0 10px #86d5f8}.vis [class*=span]{min-height:0;width:auto}div.vis-color-picker{background-color:#fff;border-radius:15px;box-shadow:0 0 10px 0 rgba(0,0,0,.5);display:none;height:444px;left:30px;margin-left:30px;margin-top:-140px;padding:10px;position:absolute;top:0;width:310px;z-index:1}div.vis-color-picker div.vis-arrow{left:5px;position:absolute;top:147px}div.vis-color-picker div.vis-arrow:after,div.vis-color-picker div.vis-arrow:before{border:solid transparent;content:" ";height:0;pointer-events:none;position:absolute;right:100%;top:50%;width:0}div.vis-color-picker div.vis-arrow:after{border-color:hsla(0,0%,100%,0) #fff hsla(0,0%,100%,0) hsla(0,0%,100%,0);border-width:30px;margin-top:-30px}div.vis-color-picker div.vis-color{cursor:pointer;height:289px;position:absolute;width:289px}div.vis-color-picker div.vis-brightness{position:absolute;top:313px}div.vis-color-picker div.vis-opacity{position:absolute;top:350px}div.vis-color-picker div.vis-selector{background:#4c4c4c;background:-moz-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4c4c4c),color-stop(12%,#595959),color-stop(25%,#666),color-stop(39%,#474747),color-stop(50%,#2c2c2c),color-stop(51%,#000),color-stop(60%,#111),color-stop(76%,#2b2b2b),color-stop(91%,#1c1c1c),color-stop(100%,#131313));background:-webkit-linear-gradient(top,#4c4c4c,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313);background:-o-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-ms-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:linear-gradient(180deg,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313);border:1px solid #fff;border-radius:15px;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c4c4c",endColorstr="#131313",GradientType=0);height:15px;left:137px;position:absolute;top:137px;width:15px}div.vis-color-picker div.vis-new-color{left:159px;padding-right:2px;text-align:right}div.vis-color-picker div.vis-initial-color,div.vis-color-picker div.vis-new-color{border:1px solid rgba(0,0,0,.1);border-radius:5px;color:rgba(0,0,0,.4);font-size:10px;height:20px;line-height:20px;position:absolute;top:380px;vertical-align:middle;width:140px}div.vis-color-picker div.vis-initial-color{left:10px;padding-left:2px;text-align:left}div.vis-color-picker div.vis-label{left:10px;position:absolute;width:300px}div.vis-color-picker div.vis-label.vis-brightness{top:300px}div.vis-color-picker div.vis-label.vis-opacity{top:338px}div.vis-color-picker div.vis-button{background-color:#f7f7f7;border:2px solid #d9d9d9;border-radius:10px;cursor:pointer;height:25px;line-height:25px;position:absolute;text-align:center;top:410px;vertical-align:middle;width:68px}div.vis-color-picker div.vis-button.vis-cancel{left:5px}div.vis-color-picker div.vis-button.vis-load{left:82px}div.vis-color-picker div.vis-button.vis-apply{left:159px}div.vis-color-picker div.vis-button.vis-save{left:236px}div.vis-color-picker input.vis-range{height:20px;width:290px}div.vis-configuration{display:block;float:left;font-size:12px;position:relative}div.vis-configuration-wrapper{display:block;width:700px}div.vis-configuration-wrapper:after{clear:both;content:"";display:block}div.vis-configuration.vis-config-option-container{background-color:#fff;border:2px solid #f7f8fa;border-radius:4px;display:block;left:10px;margin-top:20px;padding-left:5px;width:495px}div.vis-configuration.vis-config-button{background-color:#f7f8fa;border:2px solid #ceced0;border-radius:4px;cursor:pointer;display:block;height:25px;left:10px;line-height:25px;margin-bottom:30px;margin-top:20px;padding-left:5px;vertical-align:mi
|
||
|
|
<script>/**
|
||
|
|
* vis-network
|
||
|
|
* https://visjs.github.io/vis-network/
|
||
|
|
*
|
||
|
|
* A dynamic, browser-based visualization library.
|
||
|
|
*
|
||
|
|
* @version 9.1.2
|
||
|
|
* @date 2022-03-28T20:17:35.342Z
|
||
|
|
*
|
||
|
|
* @copyright (c) 2011-2017 Almende B.V, http://almende.com
|
||
|
|
* @copyright (c) 2017-2019 visjs contributors, https://github.com/visjs
|
||
|
|
*
|
||
|
|
* @license
|
||
|
|
* vis.js is dual licensed under both
|
||
|
|
*
|
||
|
|
* 1. The Apache 2.0 License
|
||
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||
|
|
*
|
||
|
|
* and
|
||
|
|
*
|
||
|
|
* 2. The MIT License
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
* vis.js may be distributed under either license.
|
||
|
|
*/
|
||
|
|
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).vis=t.vis||{})}(this,(function(t){"use strict";var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},i=function(t){return t&&t.Math==Math&&t},n=i("object"==typeof globalThis&&globalThis)||i("object"==typeof window&&window)||i("object"==typeof self&&self)||i("object"==typeof e&&e)||function(){return this}()||Function("return this")(),o=function(t){try{return!!t()}catch(t){return!0}},r=!o((function(){var t=function(){}.bind();return"function"!=typeof t||t.hasOwnProperty("prototype")})),s=r,a=Function.prototype,h=a.apply,l=a.call,d="object"==typeof Reflect&&Reflect.apply||(s?l.bind(h):function(){return l.apply(h,arguments)}),c=r,u=Function.prototype,f=u.bind,p=u.call,v=c&&f.bind(p,p),g=c?function(t){return t&&v(t)}:function(t){return t&&function(){return p.apply(t,arguments)}},y=function(t){return"function"==typeof t},m={},b=!o((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]})),w=r,k=Function.prototype.call,_=w?k.bind(k):function(){return k.apply(k,arguments)},x={},E={}.propertyIsEnumerable,O=Object.getOwnPropertyDescriptor,C=O&&!E.call({1:2},1);x.f=C?function(t){var e=O(this,t);return!!e&&e.enumerable}:E;var S,T,M=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}},P=g,D=P({}.toString),I=P("".slice),B=function(t){return I(D(t),8,-1)},z=g,N=o,F=B,A=n.Object,j=z("".split),R=N((function(){return!A("z").propertyIsEnumerable(0)}))?function(t){return"String"==F(t)?j(t,""):A(t)}:A,L=n.TypeError,H=function(t){if(null==t)throw L("Can't call method on "+t);return t},W=R,q=H,V=function(t){return W(q(t))},U=y,Y=function(t){return"object"==typeof t?null!==t:U(t)},X={},G=X,K=n,$=y,Z=function(t){return $(t)?t:void 0},Q=function(t,e){return arguments.length<2?Z(G[t])||Z(K[t]):G[t]&&G[t][e]||K[t]&&K[t][e]},J=g({}.isPrototypeOf),tt=Q("navigator","userAgent")||"",et=n,it=tt,nt=et.process,ot=et.Deno,rt=nt&&nt.versions||ot&&ot.version,st=rt&&rt.v8;st&&(T=(S=st.split("."))[0]>0&&S[0]<4?1:+(S[0]+S[1])),!T&&it&&(!(S=it.match(/Edge\/(\d+)/))||S[1]>=74)&&(S=it.match(/Chrome\/(\d+)/))&&(T=+S[1]);var at=T,ht=at,lt=o,dt=!!Object.getOwnPropertySymbols&&!lt((function(){var t=Symbol();return!String(t)||!(Object(t)instanceof Symbol)||!Symbol.sham&&ht&&ht<41})),ct=dt&&!Symbol.sham&&"symbol"==typeof Symbol.iterator,ut=Q,ft=y,pt=J,vt=ct,gt=n.Object,yt=vt?function(t){return"symbol"==typeof t}:function(t){var e=ut("Symbol");return ft(e)&&pt(e.prototype,gt(t))},mt=n.String,bt=function(t){try{return mt(t)}catch(t){return"Object"}},wt=y,kt=bt,_t=n.TypeError,xt=function(t){if(wt(t))return t;throw _t(kt(t)+" is not a function")},Et=xt,Ot=function(t,e){var i=t[e];return null==i?void 0:Et(i)},Ct=_,St=y,Tt=Y,Mt=n.TypeError,Pt={exports:{}},Dt=n,It=Object.defineProperty,Bt=function(t,e){try{It(Dt,t,{value:e,configurable:!0,writable:!0})}catch(i){Dt[t]=e}return e},zt="__core-js_shared__",Nt=n[zt]||Bt(zt,{}),Ft=Nt;(Pt.exports=function(t,e){return Ft[t]||(Ft[t]=void 0!==e?e:{})})("versions",[]).push({version:"3.21.1",mode:"pure",copyright:"© 2014-2022 Denis Pushkarev (zloirock.ru)",license:"https://github.com/zloirock/core-js/blob/v3.21.1/LICENSE",source:"https://github.com/zloirock/core-js"});var At=H,jt=n.Object,Rt=function(t){return jt(At(t))},Lt=Rt,Ht=g({}.hasOwnProperty),Wt=Object.hasOwn||function(t,e){return Ht(Lt(t),e)},qt=g,Vt=0,Ut=Math.random(),Yt=qt(1..toString),Xt=function(t){return"Symbol("+(void 0===t?"":t)+")_"+Yt(++Vt+Ut,36)},Gt=n,Kt=Pt.exports,$t=Wt,Zt=Xt,Qt=dt,Jt=ct,te=Kt("wks"),ee=Gt.Symbol,ie=ee&&ee.for,ne=Jt?ee:ee&&ee.withoutSetter||Zt,oe=function(t){if(!$t(te,t)||!Qt&&"string"!=typeof te[t]){var e="Symbol."+t;Qt&&$t(ee,t)?te[t]=ee[t]:te[t]=Jt&&ie?ie(e):ne(e)}return te[t]},re=_,se=Y,ae=yt,he=Ot,le=function(t,e){var i,n;if("string"===e&&St(i=t.toString)&&!Tt(n=Ct(i,t)))return n;if(St(i=t.valueOf)&&!Tt(n=
|
||
|
|
//# sourceMappingURL=vis-network.min.js.map</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: 100vh;
|
||
|
|
background-color: #1a1a1a;
|
||
|
|
border: 1px solid lightgray;
|
||
|
|
position: relative;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="card" style="width: 100%">
|
||
|
|
|
||
|
|
|
||
|
|
<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 : []
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// 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": {"background": "#2a9d8f", "border": "#21867a", "highlight": {"background": "#3bc2b4", "border": "#2a9d8f"}}, "font": {"color": "white"}, "id": "node_1", "label": "\u0633\u0637\u062d 0\nnode_1", "level": 0, "num_sentences": 0, "sentences": "", "shape": "box", "size": 10, "title": "\u0631\u0634\u062f \u0646\u0645\u0627\u06cc\u06cc \u062d\u062c\u0645 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0648 \u0642\u062f\u0631\u062a \u0645\u062d\u0627\u0633\u0628\u0627\u062a\u06cc\u060c\n\u0647\u0645\u0631\u0627\u0647 \u0628\u0627 \u067e\u06cc\u0634\u0631\u0641\u062a \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645\u200c\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc\n\u0645\u0627\u0634\u06cc\u0646 \u0648 \u06a9\u0627\u0648\u0634 \u062f\u0627\u062f\u0647\u060c \u0645\u0646\u062c\u0631 \u0628\u0647 \u062a\u062d\u0648\u0644\u06cc \u0627\u0646\u0642\u0644\u0627\u0628\u06cc\n\u062f\u0631 \u06a9\u0634\u0641 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u067e\u0646\u0647\u0627\u0646 \u0648 \u0646\u0648\u0622\u0648\u0631\u06cc \u0646\u0638\u0631\u06cc \u062f\u0631\n\u062d\u0648\u0632\u0647\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0639\u0644\u0645\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a."}, {"color": {"background": "#2a9d8f", "border": "#21867a", "highlight": {"background": "#3bc2b4", "border": "#2a9d8f"}}, "font": {"color": "white"}, "id": "node_2", "label": "\u0633\u0637\u062d 0\nnode_2", "level": 0, "num_sentences": 0, "sentences": "", "shape": "box", "size": 10, "title": "\u0637\u0628\u0642\u0647\u200c\u0628\u0646\u062f\u06cc \u06cc\u06a9\u06cc \u0627\u0632 \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc \u06a9\u0627\u0648\u0634 \u062f\u0627\u062f\u0647 \u0627\u0633\u062a\n\u06a9\u0647 \u062f\u0631 \u0622\u0646 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0628\u0631\u0686\u0633\u0628\u200c\u0647\u0627\u06cc \u0627\u0632\n\u067e\u06cc\u0634 \u062a\u0639\u0631\u06cc\u0641\u200c\u0634\u062f\u0647 \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u0645\u06cc\u200c\u0634\u0648\u0646\u062f."}, {"color": {"background": "#2a9d8f", "border": "#21867a", "highlight": {"background": "#3bc2b4", "border": "#2a9d8f"}}, "font": {"color": "white"}, "id": "node_3", "label": "\u0633\u0637\u062d 0\nnode_3", "level": 0, "num_sentences": 0, "sentences": "", "shape": "box", "size": 10, "title": "\u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645\u200c\u0647\u0627\u06cc \u0637\u0628\u0642\u0647\u200c\u0633\u0627\u0632\u06cc \u0628\u0627 \u0648\u062c\u0648\u062f \u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627\u06cc\n\u06af\u0633\u062a\u0631\u062f\u0647\u060c \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06cc\u0627\u0628\u06cc \u0628\u0647 \u06a9\u0627\u0631\u0627\u06cc\u06cc \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f\n\u0628\u0647\u062a\u0631 \u0646\u06cc\u0627\u0632\u0645\u0646\u062f \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9\u200c\u062a\u0631 \u0648 \u062e\u0627\u0644\u0635\u200c\u062a\u0631\u06cc\n\u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u06a9\u0627\u0647\u0634 \u0646\u0645\u0648\u0646\u0647 \u0628\u0631\n\u0631\u0648\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc\u200c\u0634\u0648\u0646\u062f."}, {"color": {"background": "#2a9d8f", "border": "#21867a", "highlight": {"background": "#3bc2b4", "border": "#2a9d8f"}}, "font": {"color": "white"}, "id": "node_4", "label": "\u0633\u0637\u062d 1\nnode_4", "level": 1, "num_sentences": 0, "sentences": "", "shape": "box", "size": 10, "title": "\u0631\u0634\u062f \u0646\u0645\u0627\u06cc\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0648 \u0642\u062f\u0631\u062a \u0645\u062d\u0627\u0633\u0628\u0627\u062a\u06cc \u0628\u0647\n\u0647\u0645\u0631\u0627\u0647 \u067e\u06cc\u0634\u0631\u0641\u062a \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645\u200c\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc
|
||
|
|
edges = new vis.DataSet([]);
|
||
|
|
|
||
|
|
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 = {"layout": {"hierarchical": {"enabled": true, "direction": "DU", "sortMethod": "directed", "nodeSpacing": 200, "levelSeparation": 150}}, "physics": {"enabled": false}, "interaction": {"hover": true, "navigationButtons": true}};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
network = new vis.Network(container, data, options);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
return network;
|
||
|
|
|
||
|
|
}
|
||
|
|
drawGraph();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
network.on("click", function (params) {
|
||
|
|
if (params.nodes.length > 0) {
|
||
|
|
var nodeId = params.nodes[0];
|
||
|
|
var clickedNode = nodes.get(nodeId); // گرفتن تمام اطلاعات نود
|
||
|
|
|
||
|
|
window.parent.postMessage({
|
||
|
|
type: 'node_click',
|
||
|
|
id: nodeId,
|
||
|
|
label: clickedNode.label,
|
||
|
|
summary: clickedNode.title,
|
||
|
|
sentences: clickedNode.sentences || 'اطلاعات جملات موجود نیست.',
|
||
|
|
num_sentences: clickedNode.num_sentences || 0
|
||
|
|
}, '*');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|