359 lines
736 KiB
HTML
359 lines
736 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": "#e76f51", "border": "#1f6e64", "highlight": {"background": "#3bc2b4"}}, "font": {"color": "white"}, "id": "node_L0_0", "label": "\u0633\u0637\u062d 0\nnode_L0_0", "level": 0, "num_sentences": 1, "sentences": "\u0638\u0647\u0648\u0631 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0648 \u0631\u0634\u062f \u0642\u062f\u0631\u062a \u0645\u062d\u0627\u0633\u0628\u0627\u062a\u06cc\u060c \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0646\u0648\u06cc\u0646\u060c \u0645\u0646\u062c\u0631 \u0628\u0647 \u062f\u0633\u062a\u0627\u0648\u0631\u062f\u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647\u06cc \u062f\u0631 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u062d\u0648\u0632\u0647\u200c\u0647\u0627\u06cc \u0639\u0644\u0645\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a.", "shape": "box", "title": "\u0638\u0647\u0648\u0631 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0648 \u0631\u0634\u062f \u0642\u062f\u0631\u062a \u0645\u062d\u0627\u0633\u0628\u0627\u062a\u06cc\u060c \u0628\u0647\n\u0647\u0645\u0631\u0627\u0647 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0646\u0648\u06cc\u0646\u060c \u0645\u0646\u062c\u0631 \u0628\u0647\n\u062f\u0633\u062a\u0627\u0648\u0631\u062f\u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647\u06cc \u062f\u0631 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632\n\u062d\u0648\u0632\u0647\u200c\u0647\u0627\u06cc \u0639\u0644\u0645\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a."}, {"color": {"background": "#e76f51", "border": "#1f6e64", "highlight": {"background": "#3bc2b4"}}, "font": {"color": "white"}, "id": "node_L0_1", "label": "\u0633\u0637\u062d 0\nnode_L0_1", "level": 0, "num_sentences": 1, "sentences": "\u062f\u0631 \u0686\u0646\u062f \u0633\u0627\u0644 \u0627\u062e\u06cc\u0631\u060c \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0627\u0634\u06cc\u0646\u06cc \u0648 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u06cc\u06a9 \u0645\u0648\u062c \u062c\u062f\u06cc\u062f \u0627\u0632 \u062a\u0648\u062c\u0647\u0627\u062a \u0631\u0627 \u0628\u0647 \u062e\u0648\u062f \u062c\u0644\u0628 \u06a9\u0631\u062f\u0647\u200c\u0627\u0646\u062f \u06a9\u0647 \u0639\u0644\u062a \u0627\u0635\u0644\u06cc \u0622\u0646\u060c \u062d\u062c\u0645 \u0639\u0638\u06cc\u0645 \u0648 \u0631\u0648\u0632\u0627\u0641\u0632\u0648\u0646 \u062f\u0627\u062f\u0647 \u0648 \u0642\u062f\u0631\u062a \u0645\u062d\u0627\u0633\u0628\u0627\u062a\u06cc\u060c \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u06a9\u0634\u0641 \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645\u200c\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0628\u0647\u0628\u0648\u062f \u06cc\u0627\u0641\u062a\u0647\u060c \u0645\u06cc\u00ac\u0628\u0627\u0634\u062f[1].", "shape": "box", "title": "\u062f\u0631 \u0686\u0646\u062f \u0633\u0627\u0644 \u0627\u062e\u06cc\u0631\u060c \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0627\u0634\u06cc\u0646\u06cc \u0648 \u0647\u0648\u0634\n\u0645\u0635\u0646\u0648\u0639\u06cc \u06cc\u06a9 \u0645\u0648\u062c \u062c\u062f\u06cc\u062f \u0627\u0632 \u062a\u0648\u062c\u0647\u0627\u062a \u0631\u0627 \u0628\u0647 \u062e\u0648\u062f\n\u062c\u0644\u0628 \u06a9\u0631\u062f\u0647\u200c\u0627\u0646\u062f \u06a9\u0647 \u0639\u0644\u062a \u0627\u0635\u0644\u06cc \u0622\u0646\u060c \u062d\u062c\u0645 \u0639\u0638\u06cc\u0645 \u0648\n\u0631\u0648\u0632\u0627\u0641\u0632\u0648\u0646 \u062f\u0627\u062f\u0647 \u0648 \u0642\u062f\u0631\u062a \u0645\u062d\u0627\u0633\u0628\u0627\u062a\u06cc\u060c \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646\n\u06a9\u0634\u0641 \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645\u200c\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0628\u0647\u0628\u0648\u062f \u06cc\u0627\u0641\u062a\u0647\u060c\n\u0645\u06cc\u00ac\u0628\u0627\u0634\u062f[1]."}, {"color": {"background": "#e76f51", "border": "#1f6e64", "highlight": {"background": "#3bc2b4"}}, "font": {"color": "white"},
|
||
|
|
edges = new vis.DataSet([{"arrows": {"to": {"enabled": true, "scaleFactor": 1.2}}, "color": {"color": "#e9c46a", "highlight": "#f4a261"}, "from": "node_L1_1", "smooth": {"forceDirection": "vertical", "roundness": 0.4, "type": "cubicBezier"}, "to": "node_L0_0", "width": 3}, {"arrows": {"to": {"enabled": true, "scaleFactor": 1.2}}, "color": {"color": "#e9c46a", "highlight": "#f4a261"}, "from": "node_L1_1", "smooth": {"forceDirection": "vertical", "roundness": 0.4, "type": "cubicBezier"}, "to": "node_L0_1", "width": 3}, {"arrows": {"to": {"enabled": true, "scaleFactor": 1.2}}, "color": {"color": "#e9c46a", "highlight": "#f4a261"}, "from": "node_L1_1", "smooth": {"forceDirection": "vertical", "roundness": 0.4, "type": "cubicBezier"}, "to": "node_L0_2", "width": 3}, {"arrows": {"to": {"enabled": true, "scaleFactor": 1.2}}, "color": {"color": "#e9c46a", "highlight": "#f4a261"}, "from": "node_L1_1", "smooth": {"forceDirection": "vertical", "roundness": 0.4, "type": "cubicBezier"}, "to": "node_L0_3", "width": 3}, {"arrows": {"to": {"enabled": true, "scaleFactor": 1.2}}, "color": {"color": "#e9c46a", "highlight": "#f4a261"}, "from": "node_L1_1", "smooth": {"forceDirection": "vertical", "roundness": 0.4, "type": "cubicBezier"}, "to": "node_L0_4", "width": 3}, {"arrows": {"to": {"enabled": true, "scaleFactor": 1.2}}, "color": {"color": "#e9c46a", "highlight": "#f4a261"}, "from": "node_L1_1", "smooth": {"forceDirection": "vertical", "roundness": 0.4, "type": "cubicBezier"}, "to": "node_L0_5", "width": 3}, {"arrows": {"to": {"enabled": true, "scaleFactor": 1.2}}, "color": {"color": "#e9c46a", "highlight": "#f4a261"}, "from": "node_L1_1", "smooth": {"forceDirection": "vertical", "roundness": 0.4, "type": "cubicBezier"}, "to": "node_L0_6", "width": 3}, {"arrows": {"to": {"enabled": true, "scaleFactor": 1.2}}, "color": {"color": "#e9c46a", "highlight": "#f4a261"}, "from": "node_L1_2", "smooth": {"forceDirection": "vertical", "roundness": 0.4, "type": "cubicBezier"}, "to": "node_L0_7", "width": 3}, {"arrows": {"to": {"enabled": true, "scaleFactor": 1.2}}, "color": {"color": "#e9c46a", "highlight": "#f4a261"}, "from": "node_L1_2", "smooth": {"forceDirection": "vertical", "roundness": 0.4, "type": "cubicBezier"}, "to": "node_L0_8", "width": 3}, {"arrows": {"to": {"enabled": true, "scaleFactor": 1.2}}, "color": {"color": "#e9c46a", "highlight": "#f4a261"}, "from": "node_L1_3", "smooth": {"forceDirection": "vertical", "roundness": 0.4, "type": "cubicBezier"}, "to": "node_L0_9", "width": 3}, {"arrows": {"to": {"enabled": true, "scaleFactor": 1.2}}, "color": {"color": "#e9c46a", "highlight": "#f4a261"}, "from": "node_L1_3", "smooth": {"forceDirection": "vertical", "roundness": 0.4, "type": "cubicBezier"}, "to": "node_L0_10", "width": 3}, {"arrows": {"to": {"enabled": true, "scaleFactor": 1.2}}, "color": {"color": "#e9c46a", "highlight": "#f4a261"}, "from": "node_L1_4", "smooth": {"forceDirection": "vertical", "roundness": 0.4, "type": "cubicBezier"}, "to": "node_L0_11", "width": 3}, {"arrows": {"to": {"enabled": true, "scaleFactor": 1.2}}, "color": {"color": "#e9c46a", "highlight": "#f4a261"}, "from": "node_L1_4", "smooth": {"forceDirection": "vertical", "roundness": 0.4, "type": "cubicBezier"}, "to": "node_L0_12", "width": 3}, {"arrows": {"to": {"enabled": true, "scaleFactor": 1.2}}, "color": {"color": "#e9c46a", "highlight": "#f4a261"}, "from": "node_L1_4", "smooth": {"forceDirection": "vertical", "roundness": 0.4, "type": "cubicBezier"}, "to": "node_L0_13", "width": 3}]);
|
||
|
|
|
||
|
|
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": 250, "levelSeparation": 150}}, "physics": {"hierarchicalRepulsion": {"centralGravity": 0.0, "springLength": 100, "springConstant": 0.01, "nodeDistance": 250, "damping": 0.09}, "solver": "hierarchicalRepulsion"}, "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>
|