454 lines
1.1 MiB
HTML
454 lines
1.1 MiB
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#loadingBar {
|
||
|
|
position:absolute;
|
||
|
|
top:0px;
|
||
|
|
left:0px;
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
background-color:rgba(200,200,200,0.8);
|
||
|
|
-webkit-transition: all 0.5s ease;
|
||
|
|
-moz-transition: all 0.5s ease;
|
||
|
|
-ms-transition: all 0.5s ease;
|
||
|
|
-o-transition: all 0.5s ease;
|
||
|
|
transition: all 0.5s ease;
|
||
|
|
opacity:1;
|
||
|
|
}
|
||
|
|
|
||
|
|
#bar {
|
||
|
|
position:absolute;
|
||
|
|
top:0px;
|
||
|
|
left:0px;
|
||
|
|
width:20px;
|
||
|
|
height:20px;
|
||
|
|
margin:auto auto auto auto;
|
||
|
|
border-radius:11px;
|
||
|
|
border:2px solid rgba(30,30,30,0.05);
|
||
|
|
background: rgb(0, 173, 246); /* Old browsers */
|
||
|
|
box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
|
||
|
|
}
|
||
|
|
|
||
|
|
#border {
|
||
|
|
position:absolute;
|
||
|
|
top:10px;
|
||
|
|
left:10px;
|
||
|
|
width:500px;
|
||
|
|
height:23px;
|
||
|
|
margin:auto auto auto auto;
|
||
|
|
box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
|
||
|
|
border-radius:10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#text {
|
||
|
|
position:absolute;
|
||
|
|
top:8px;
|
||
|
|
left:530px;
|
||
|
|
width:30px;
|
||
|
|
height:50px;
|
||
|
|
margin:auto auto auto auto;
|
||
|
|
font-size:22px;
|
||
|
|
color: #000000;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.outerBorder {
|
||
|
|
position:relative;
|
||
|
|
top:400px;
|
||
|
|
width:600px;
|
||
|
|
height:44px;
|
||
|
|
margin:auto auto auto auto;
|
||
|
|
border:8px solid rgba(0,0,0,0.1);
|
||
|
|
background: rgb(252,252,252); /* Old browsers */
|
||
|
|
background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
|
||
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
|
||
|
|
background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
|
||
|
|
background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */
|
||
|
|
background: -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* IE10+ */
|
||
|
|
background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
|
||
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
|
||
|
|
border-radius:72px;
|
||
|
|
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="card" style="width: 100%">
|
||
|
|
|
||
|
|
|
||
|
|
<div id="mynetwork" class="card-body"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div id="loadingBar">
|
||
|
|
<div class="outerBorder">
|
||
|
|
<div id="text">0%</div>
|
||
|
|
<div id="border">
|
||
|
|
<div id="bar"></div>
|
||
|
|
</div>
|
||
|
|
</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": "\u0627\u0642\u062a\u0635\u0627\u062f \u06a9\u0644\u0627\u0633\u06cc\u06a9\r \r \u062f\u0631 \u0686\u0647\u0627\u0631\u0686\u0648\u0628 \u0641\u06a9\u0631\u06cc \u06a9\u0647 \u0644\u06cc\u0628\u0631\u0627\u0644\u200c\u0647\u0627\u06cc \u06a9\u0644\u0627\u0633\u06cc\u06a9 \u0628\u0631\u067e\u0627 \u06a9\u0631\u062f\u0646\u062f\u060c \u0645\u06a9\u062a\u0628 \u0627\u0642\u062a\u0635\u0627\u062f\u06cc \u067e\u0631\u0646\u0641\u0648\u0630\u06cc \u0634\u06a9\u0644 \u06af\u0631\u0641\u062a \u06a9\u0647 \u0628\u0647 \u0627\u0642\u062a\u0635\u0627\u062f \u06a9\u0644\u0627\u0633\u06cc\u06a9 \u0645\u0634\u0647\u0648\u0631 \u0627\u0633\u062a.", "shape": "box", "title": "\u0627\u0642\u062a\u0635\u0627\u062f \u06a9\u0644\u0627\u0633\u06cc\u06a9 \u062f\u0631 \u0686\u0647\u0627\u0631\u0686\u0648\u0628 \u0641\u06a9\u0631\u06cc \u06a9\u0647\n\u0644\u06cc\u0628\u0631\u0627\u0644\u200c\u0647\u0627\u06cc \u06a9\u0644\u0627\u0633\u06cc\u06a9 \u0628\u0631\u067e\u0627 \u06a9\u0631\u062f\u0646\u062f\u060c \u0645\u06a9\u062a\u0628\n\u0627\u0642\u062a\u0635\u0627\u062f\u06cc \u067e\u0631\u0646\u0641\u0648\u0630\u06cc \u0634\u06a9\u0644 \u06af\u0631\u0641\u062a \u06a9\u0647 \u0628\u0647 \u0627\u0642\u062a\u0635\u0627\u062f\n\u06a9\u0644\u0627\u0633\u06cc\u06a9 \u0645\u0634\u0647\u0648\u0631 \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": "\u0627\u0642\u062a\u0635\u0627\u062f \u06a9\u0644\u0627\u0633\u06cc\u06a9 \u0646\u062e\u0633\u062a\u06cc\u0646 \u0628\u0631\u062f\u0627\u0634\u062a \u0646\u0638\u0631\u06cc \u0647\u0645\u0647\u200c\u062c\u0627\u0646\u0628\u0647 \u0648 \u0645\u0646\u0638\u0645\u06cc \u0628\u0648\u062f \u06a9\u0647 \u0628\u0647 \u062a\u0628\u06cc\u06cc\u0646 \u0633\u0631\u0645\u0627\u06cc\u0647\u200c\u062f\u0627\u0631\u06cc \u0648 \u0686\u06af\u0648\u0646\u06af\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0622\u0646 \u067e\u0631\u062f\u0627\u062e\u062a.", "shape": "box", "title": "\u0627\u0642\u062a\u0635\u0627\u062f \u06a9\u0644\u0627\u0633\u06cc\u06a9 \u0646\u062e\u0633\u062a\u06cc\u0646 \u0628\u0631\u062f\u0627\u0634\u062a \u0646\u0638\u0631\u06cc\n\u0647\u0645\u0647\u200c\u062c\u0627\u0646\u0628\u0647 \u0648 \u0645\u0646\u0638\u0645\u06cc \u0628\u0648\u062f \u06a9\u0647 \u0628\u0647 \u062a\u0628\u06cc\u06cc\u0646\n\u0633\u0631\u0645\u0627\u06cc\u0647\u200c\u062f\u0627\u0631\u06cc \u0648 \u0686\u06af\u0648\u0646\u06af\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0622\u0646 \u067e\u0631\u062f\u0627\u062e\u062a."}, {"color": {"background": "#e76f51", "border": "#1f6e64", "highlight": {"background": "#3bc2b4"}}, "font": {"color": "white"}, "id": "node_L0_2", "label": "\u0633\u0637\u062d 0\nnode_L0_2", "level": 0, "num_sentences": 1, "sentences": "\u0645\u06a9\u062a\u0628 \u06a9\u0644\u0627\u0633\u06cc\u06a9 \u06a9\u0647 \u0631\u0648\u0646\u0642 \u0622\u0646 \u0647\u0645\u0627\u0646 \u0633\u0627\u0644\u200c\u0647\u0627\u06cc \u06f1\u06f7\u06f5\u06f0 \u062a\u0627 \u06f1\u06f8\u06f5\u06f0 \u0628\u0648\u062f\u060c \u0645\u062c\u0645\u0648\u0639\u0647\u200c\u0627\u06cc \u0627\u0633\u062a \u0627\u0632 \u062a\u0641\u06a9\u0631 \u0646\u0638\u0631\u06cc\u0647\u200c\u067e\u0631\u062f\u0627\u0632\u0627\u0646 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0639\u0631\u0648\u0641\u06cc \u0686\u0648\u0646 \u062a\u0648\u0645\u0627\u0633 \u0631\u0627\u0628\u0631\u062a \u0645\u0627\u0644\u062a\u0648\u0633\u060c \u062c\u0627\u0646 \u0627\u0633\u062a\u0648\u0627\u0631\u062a \u0645\u06cc\u0644\u060c \u062f\u06cc\u0648\u06cc\u062f \u0631\u06cc\u06a9\u0627\u0631\u062f\u0648\u060c \u0698\u0627\u0646 \u0628\u0627\u062a\u06cc\u0633\u062a \u0633\u06cc\u060c \u0646\u0627\u0633\u0627 \u0
|
||
|
|
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_2", "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_2", "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_2", "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_2", "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_3", "smooth": {"forceDirection": "vertical", "roundness": 0.4, "type": "cubicBezier"}, "to": "node_L0_13", "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_14", "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_15", "width": 3}, {"arrows": {"to": {"enabled": true, "scaleFactor": 1.2}}, "col
|
||
|
|
|
||
|
|
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);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
network.on("stabilizationProgress", function(params) {
|
||
|
|
document.getElementById('loadingBar').removeAttribute("style");
|
||
|
|
var maxWidth = 496;
|
||
|
|
var minWidth = 20;
|
||
|
|
var widthFactor = params.iterations/params.total;
|
||
|
|
var width = Math.max(minWidth,maxWidth * widthFactor);
|
||
|
|
document.getElementById('bar').style.width = width + 'px';
|
||
|
|
document.getElementById('text').innerHTML = Math.round(widthFactor*100) + '%';
|
||
|
|
});
|
||
|
|
network.once("stabilizationIterationsDone", function() {
|
||
|
|
document.getElementById('text').innerHTML = '100%';
|
||
|
|
document.getElementById('bar').style.width = '496px';
|
||
|
|
document.getElementById('loadingBar').style.opacity = 0;
|
||
|
|
// really clean the dom element
|
||
|
|
setTimeout(function () {document.getElementById('loadingBar').style.display = 'none';}, 500);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
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>
|