diff --git a/package-lock.json b/package-lock.json
index 01035eb0c17eee0b373b49a5e84b0fee8bd358fc..0357055bdc14810bb51140f4d249d391e07a52db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4008,11 +4008,6 @@
"minimalistic-crypto-utils": "^1.0.0"
}
},
- "emitter-component": {
- "version": "1.1.1",
- "resolved": "https://registry.npmjs.org/emitter-component/-/emitter-component-1.1.1.tgz",
- "integrity": "sha1-Bl4tvtaVm/RwZ57avq95gdEAOrY="
- },
"emoji-regex": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -5071,11 +5066,6 @@
"integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
"dev": true
},
- "hammerjs": {
- "version": "2.0.8",
- "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
- "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
- },
"handle-thing": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -6611,11 +6601,6 @@
"source-map-support": "^0.5.5"
}
},
- "keycharm": {
- "version": "0.2.0",
- "resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.2.0.tgz",
- "integrity": "sha1-+m6i5DuQpoAohD0n8gddNajD5vk="
- },
"killable": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -7308,11 +7293,6 @@
"minimist": "^1.2.5"
}
},
- "moment": {
- "version": "2.24.0",
- "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
- "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
- },
"move-concurrently": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -8986,14 +8966,6 @@
}
}
},
- "propagating-hammerjs": {
- "version": "1.4.7",
- "resolved": "https://registry.npmjs.org/propagating-hammerjs/-/propagating-hammerjs-1.4.7.tgz",
- "integrity": "sha512-oW9Wd+W2Tp5uOz6Fh4mEU7p+FoyU85smLH/mPga83Loh0pHa6AH4ZHGywvwMk3TWP31l7iUsvJyW265p4Ipwrg==",
- "requires": {
- "hammerjs": "^2.0.8"
- }
- },
"protoduck": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/protoduck/-/protoduck-5.0.1.tgz",
@@ -11830,17 +11802,15 @@
"extsprintf": "^1.2.0"
}
},
- "vis": {
- "version": "4.21.0-EOL",
- "resolved": "https://registry.npmjs.org/vis/-/vis-4.21.0-EOL.tgz",
- "integrity": "sha512-JVS1mywKg5S88XbkDJPfCb3n+vlg5fMA8Ae2hzs3KHAwD4ryM5qwlbFZ6ReDfY8te7I4NLCpuCoywJQEehvJlQ==",
- "requires": {
- "emitter-component": "^1.1.1",
- "hammerjs": "^2.0.8",
- "keycharm": "^0.2.0",
- "moment": "^2.18.1",
- "propagating-hammerjs": "^1.4.6"
- }
+ "vis-data": {
+ "version": "6.5.1",
+ "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-6.5.1.tgz",
+ "integrity": "sha512-bOIG0REskXot0JbuAYLFRR61xf4ls+nIYNnZ7X04iq2y/Vrg896A/bfquQjhsERZipOmCgllAR0d58OGyo9s0g=="
+ },
+ "vis-network": {
+ "version": "7.4.2",
+ "resolved": "https://registry.npmjs.org/vis-network/-/vis-network-7.4.2.tgz",
+ "integrity": "sha512-h5GRMOAF9xnrfPip3lYDIiO0ldaEVW9P/X7WEwmtqbzIZJz5FA+m9Ygcjqwyq/chORwtTxd/rjG8YBqtr/kaqQ=="
},
"vm-browserify": {
"version": "1.1.2",
diff --git a/package.json b/package.json
index 036558308792a258ebc54a8cd05cfd0c83f77005..c7d893f67eab01517e933019a653f2ad972ee983 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,8 @@
"python-shell": "^1.0.8",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
- "vis": "^4.21.0-EOL",
+ "vis-data": "^6.5.1",
+ "vis-network": "^7.4.2",
"zone.js": "~0.10.2"
},
"devDependencies": {
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index a407a1a14f74ac657d9f4f02f089037999778af7..0567b28365a791ca6429c34f2115a44059d5af00 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -4,7 +4,6 @@ import {ExplorerPageComponent} from './pages/explorer-page/explorer-page.compone
import {AboutPageComponent} from './pages/about-page/about-page.component';
import {HomePageComponent} from './pages/home-page/home-page.component';
-
export const routes: Routes = [
{ path: '', component: HomePageComponent },
{ path: 'explorer', component: ExplorerPageComponent},
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 3929e22a3cc505c855f89dd9636d02ea317b939a..9847797a68414930de3ef0e4629c44b920cace6f 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -10,13 +10,12 @@ import {ExplorerPageComponent} from './pages/explorer-page/explorer-page.compone
import {AboutPageComponent} from './pages/about-page/about-page.component';
import {HomePageComponent} from './pages/home-page/home-page.component';
-
@NgModule({
declarations: [
AppComponent,
ExplorerPageComponent,
AboutPageComponent,
- HomePageComponent
+ HomePageComponent,
],
imports: [
BrowserModule,
diff --git a/src/app/network/app.component.css b/src/app/network/app.component.css
deleted file mode 100644
index b7ef084c563fcdce196a2076486d16c87ef19cbf..0000000000000000000000000000000000000000
--- a/src/app/network/app.component.css
+++ /dev/null
@@ -1,3 +0,0 @@
-p {
- font-family: Lato;
-}
\ No newline at end of file
diff --git a/src/app/network/app.component.scss b/src/app/network/app.component.scss
deleted file mode 100644
index ba43f5120fcce9ffe92694d5b0825e3effa04348..0000000000000000000000000000000000000000
--- a/src/app/network/app.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-p {
- font-family: Lato;
-}
diff --git a/src/app/network/app.component.ts b/src/app/network/app.component.ts
deleted file mode 100644
index bb62f5466ca58bd5aa747fa2627a832d3a7fce0f..0000000000000000000000000000000000000000
--- a/src/app/network/app.component.ts
+++ /dev/null
@@ -1,813 +0,0 @@
-import { Component } from '@angular/core';
-import { OnInit } from '@angular/core';
-import * as vis from 'vis';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.scss']
-})
-// export class AppComponent {
-// title = 'covid19';
-// }
-
-export class AppComponent implements OnInit {
- name = 'Angular';
- constructor() {
- console.log(vis);
- }
- ngOnInit() {
- // create an array with nodes
- const nodes = new vis.DataSet([
- {id: 0, label: 'pg0', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 1, label: 'pg1', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 2, label: 'pg2', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 3, label: 'pg3', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 4, label: 'pg4', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 5, label: 'pg5', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 6, label: 'pg6', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 7, label: 'pg7', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 8, label: 'pg8', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 9, label: 'pg9', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 10, label: 'pg10', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 11, label: 'pg11', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 12, label: 'pg12', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 13, label: 'pg13', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 14, label: 'pg14', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 15, label: 'pg15', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 16, label: 'pg16', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 17, label: 'pg17', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 18, label: 'pg18', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 19, label: 'pg19', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 20, label: 'pg20', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 21, label: 'pg21', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 22, label: 'pg22', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 23, label: 'pg23', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 24, label: 'pg24', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 25, label: 'pg25', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 26, label: 'pg26', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 27, label: 'pg27', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 28, label: 'pg28', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 29, label: 'pg29', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 30, label: 'pg30', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 31, label: 'pg31', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 32, label: 'pg32', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 33, label: 'pg33', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 34, label: 'pg34', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 35, label: 'pg35', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 36, label: 'pg36', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 37, label: 'pg37', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 38, label: 'pg38', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 39, label: 'pg39', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 40, label: 'pg40', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 41, label: 'pg41', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 42, label: 'pg42', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 43, label: 'pg43', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 44, label: 'pg44', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 45, label: 'pg45', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 46, label: 'pg46', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 47, label: 'pg47', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 48, label: 'pg48', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 49, label: 'pg49', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 50, label: 'pg50', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 51, label: 'pg51', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 52, label: 'pg52', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 53, label: 'pg53', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 54, label: 'pg54', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 55, label: 'pg55', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 56, label: 'pg56', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 57, label: 'pg57', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 58, label: 'pg58', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 59, label: 'pg59', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 60, label: 'pg60', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 61, label: 'pg61', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 62, label: 'pg62', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 63, label: 'pg63', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 64, label: 'pg64', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 65, label: 'pg65', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 66, label: 'pg66', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 67, label: 'pg67', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 68, label: 'pg68', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 69, label: 'pg69', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 70, label: 'pg70', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 71, label: 'pg71', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 72, label: 'pg72', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 73, label: 'pg73', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 74, label: 'pg74', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 75, label: 'pg75', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 76, label: 'pg76', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 77, label: 'pg77', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 78, label: 'pg78', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 79, label: 'pg79', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 80, label: 'pg80', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 81, label: 'pg81', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 82, label: 'pg82', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 83, label: 'pg83', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 84, label: 'pg84', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 85, label: 'pg85', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 86, label: 'pg86', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 87, label: 'pg87', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 88, label: 'pg88', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 89, label: 'pg89', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 90, label: 'pg90', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 91, label: 'pg91', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 92, label: 'pg92', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 93, label: 'pg93', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 94, label: 'pg94', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 95, label: 'pg95', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 96, label: 'pg96', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 97, label: 'pg97', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 98, label: 'pg98', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 99, label: 'pg99', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 100, label: 'pg100', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 101, label: 'pg101', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 102, label: 'pg102', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 103, label: 'pg103', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 104, label: 'pg104', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 105, label: 'pg105', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 106, label: 'pg106', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 107, label: 'pg107', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 108, label: 'pg108', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 109, label: 'pg109', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 110, label: 'pg110', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 111, label: 'pg111', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 112, label: 'pg112', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 113, label: 'pg113', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 114, label: 'pg114', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 115, label: 'pg115', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 116, label: 'pg116', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 117, label: 'pg117', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 118, label: 'pg118', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 119, label: 'pg119', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 120, label: 'pg120', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 121, label: 'pg121', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 122, label: 'pg122', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 123, label: 'pg123', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 124, label: 'pg124', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 125, label: 'pg125', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 126, label: 'pg126', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 127, label: 'pg127', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 128, label: 'pg128', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 129, label: 'pg129', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 130, label: 'pg130', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 131, label: 'pg131', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 132, label: 'pg132', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 133, label: 'pg133', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 134, label: 'pg134', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 135, label: 'pg135', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 136, label: 'pg136', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 137, label: 'pg137', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 138, label: 'pg138', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 139, label: 'pg139', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 140, label: 'pg140', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 141, label: 'pg141', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 142, label: 'pg142', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 143, label: 'pg143', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 144, label: 'pg144', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 145, label: 'pg145', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 146, label: 'pg146', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 147, label: 'pg147', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 148, label: 'pg148', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 149, label: 'pg149', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 150, label: 'pg150', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 151, label: 'pg151', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 152, label: 'pg152', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 153, label: 'pg153', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 154, label: 'pg154', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 155, label: 'pg155', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 156, label: 'pg156', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 157, label: 'pg157', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 158, label: 'pg158', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 159, label: 'pg159', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 160, label: 'pg160', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 161, label: 'pg161', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 162, label: 'pg162', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 163, label: 'pg163', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 164, label: 'pg164', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 165, label: 'pg165', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 166, label: 'pg166', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 167, label: 'pg167', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 168, label: 'pg168', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 169, label: 'pg169', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 170, label: 'pg170', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 171, label: 'pg171', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 172, label: 'pg172', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 173, label: 'pg173', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 174, label: 'pg174', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 175, label: 'pg175', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 176, label: 'pg176', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 177, label: 'pg177', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 178, label: 'pg178', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 179, label: 'pg179', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 180, label: 'pg180', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 181, label: 'pg181', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 182, label: 'pg182', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 183, label: 'pg183', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 184, label: 'pg184', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 185, label: 'pg185', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 186, label: 'pg186', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 187, label: 'pg187', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 188, label: 'pg188', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 189, label: 'pg189', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 190, label: 'pg190', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 191, label: 'pg191', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 192, label: 'pg192', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 193, label: 'pg193', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 194, label: 'pg194', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 195, label: 'pg195', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 196, label: 'pg196', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 197, label: 'pg197', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 198, label: 'pg198', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 199, label: 'pg199', size: 5, color: '#FF2A00', shape: 'square', shadow: true},
- {id: 200, label: 'eff0', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 201, label: 'eff1', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 202, label: 'eff2', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 203, label: 'eff3', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 204, label: 'eff4', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 205, label: 'eff5', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 206, label: 'eff6', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 207, label: 'eff7', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 208, label: 'eff8', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 209, label: 'eff9', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 210, label: 'eff10', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 211, label: 'eff11', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 212, label: 'eff12', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 213, label: 'eff13', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 214, label: 'eff14', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 215, label: 'eff15', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 216, label: 'eff16', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 217, label: 'eff17', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 218, label: 'eff18', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 219, label: 'eff19', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 220, label: 'eff20', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 221, label: 'eff21', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 222, label: 'eff22', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 223, label: 'eff23', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 224, label: 'eff24', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 225, label: 'eff25', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 226, label: 'eff26', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 227, label: 'eff27', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 228, label: 'eff28', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 229, label: 'eff29', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 230, label: 'eff30', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 231, label: 'eff31', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 232, label: 'eff32', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 233, label: 'eff33', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 234, label: 'eff34', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 235, label: 'eff35', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 236, label: 'eff36', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 237, label: 'eff37', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 238, label: 'eff38', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 239, label: 'eff39', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 240, label: 'eff40', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 241, label: 'eff41', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 242, label: 'eff42', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 243, label: 'eff43', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 244, label: 'eff44', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 245, label: 'eff45', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 246, label: 'eff46', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 247, label: 'eff47', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 248, label: 'eff48', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- {id: 249, label: 'eff49', size: 10, color: '#93D276', shape: 'circle', shadow: true},
- ]);
-
- // create an array with edges
- const edges = new vis.DataSet([
- {from: 200, to: 154},
- {from: 200, to: 116},
- {from: 200, to: 181},
- {from: 200, to: 22},
- {from: 200, to: 126},
- {from: 200, to: 130},
- {from: 200, to: 111},
- {from: 200, to: 94},
- {from: 200, to: 30},
- {from: 200, to: 110},
- {from: 201, to: 150},
- {from: 201, to: 100},
- {from: 201, to: 132},
- {from: 201, to: 94},
- {from: 201, to: 136},
- {from: 201, to: 122},
- {from: 201, to: 41},
- {from: 201, to: 85},
- {from: 201, to: 173},
- {from: 201, to: 80},
- {from: 202, to: 180},
- {from: 202, to: 146},
- {from: 202, to: 130},
- {from: 202, to: 38},
- {from: 202, to: 107},
- {from: 202, to: 1},
- {from: 202, to: 12},
- {from: 202, to: 16},
- {from: 202, to: 169},
- {from: 202, to: 11},
- {from: 203, to: 65},
- {from: 203, to: 76},
- {from: 203, to: 65},
- {from: 203, to: 29},
- {from: 203, to: 31},
- {from: 203, to: 170},
- {from: 203, to: 14},
- {from: 203, to: 6},
- {from: 203, to: 141},
- {from: 203, to: 59},
- {from: 204, to: 137},
- {from: 204, to: 16},
- {from: 204, to: 185},
- {from: 204, to: 96},
- {from: 204, to: 189},
- {from: 204, to: 139},
- {from: 204, to: 43},
- {from: 204, to: 67},
- {from: 204, to: 140},
- {from: 204, to: 198},
- {from: 205, to: 51},
- {from: 205, to: 61},
- {from: 205, to: 171},
- {from: 205, to: 192},
- {from: 205, to: 42},
- {from: 205, to: 103},
- {from: 205, to: 190},
- {from: 205, to: 16},
- {from: 205, to: 56},
- {from: 205, to: 163},
- {from: 206, to: 176},
- {from: 206, to: 80},
- {from: 206, to: 9},
- {from: 206, to: 54},
- {from: 206, to: 94},
- {from: 206, to: 174},
- {from: 206, to: 47},
- {from: 206, to: 144},
- {from: 206, to: 52},
- {from: 206, to: 152},
- {from: 207, to: 33},
- {from: 207, to: 74},
- {from: 207, to: 71},
- {from: 207, to: 43},
- {from: 207, to: 73},
- {from: 207, to: 177},
- {from: 207, to: 93},
- {from: 207, to: 175},
- {from: 207, to: 133},
- {from: 207, to: 24},
- {from: 208, to: 174},
- {from: 208, to: 167},
- {from: 208, to: 42},
- {from: 208, to: 117},
- {from: 208, to: 174},
- {from: 208, to: 72},
- {from: 208, to: 59},
- {from: 208, to: 86},
- {from: 208, to: 55},
- {from: 208, to: 15},
- {from: 209, to: 6},
- {from: 209, to: 189},
- {from: 209, to: 174},
- {from: 209, to: 140},
- {from: 209, to: 49},
- {from: 209, to: 98},
- {from: 209, to: 197},
- {from: 209, to: 179},
- {from: 209, to: 19},
- {from: 209, to: 177},
- {from: 210, to: 143},
- {from: 210, to: 21},
- {from: 210, to: 126},
- {from: 210, to: 8},
- {from: 210, to: 14},
- {from: 210, to: 72},
- {from: 210, to: 104},
- {from: 210, to: 80},
- {from: 210, to: 128},
- {from: 210, to: 6},
- {from: 211, to: 49},
- {from: 211, to: 152},
- {from: 211, to: 39},
- {from: 211, to: 16},
- {from: 211, to: 170},
- {from: 211, to: 88},
- {from: 211, to: 99},
- {from: 211, to: 56},
- {from: 211, to: 51},
- {from: 211, to: 126},
- {from: 212, to: 106},
- {from: 212, to: 15},
- {from: 212, to: 75},
- {from: 212, to: 63},
- {from: 212, to: 71},
- {from: 212, to: 89},
- {from: 212, to: 97},
- {from: 212, to: 144},
- {from: 212, to: 100},
- {from: 212, to: 150},
- {from: 213, to: 160},
- {from: 213, to: 67},
- {from: 213, to: 96},
- {from: 213, to: 178},
- {from: 213, to: 163},
- {from: 213, to: 190},
- {from: 213, to: 47},
- {from: 213, to: 172},
- {from: 213, to: 35},
- {from: 213, to: 99},
- {from: 214, to: 135},
- {from: 214, to: 158},
- {from: 214, to: 81},
- {from: 214, to: 196},
- {from: 214, to: 173},
- {from: 214, to: 121},
- {from: 214, to: 0},
- {from: 214, to: 4},
- {from: 214, to: 16},
- {from: 214, to: 9},
- {from: 215, to: 94},
- {from: 215, to: 34},
- {from: 215, to: 119},
- {from: 215, to: 86},
- {from: 215, to: 5},
- {from: 215, to: 25},
- {from: 215, to: 121},
- {from: 215, to: 167},
- {from: 215, to: 153},
- {from: 215, to: 9},
- {from: 216, to: 170},
- {from: 216, to: 69},
- {from: 216, to: 158},
- {from: 216, to: 61},
- {from: 216, to: 52},
- {from: 216, to: 106},
- {from: 216, to: 72},
- {from: 216, to: 151},
- {from: 216, to: 148},
- {from: 216, to: 107},
- {from: 217, to: 76},
- {from: 217, to: 65},
- {from: 217, to: 166},
- {from: 217, to: 92},
- {from: 217, to: 135},
- {from: 217, to: 138},
- {from: 217, to: 101},
- {from: 217, to: 123},
- {from: 217, to: 50},
- {from: 217, to: 165},
- {from: 217, to: 149},
- {from: 217, to: 90},
- {from: 217, to: 84},
- {from: 217, to: 155},
- {from: 217, to: 45},
- {from: 217, to: 162},
- {from: 217, to: 109},
- {from: 217, to: 115},
- {from: 217, to: 37},
- {from: 217, to: 161},
- {from: 217, to: 10},
- {from: 217, to: 66},
- {from: 217, to: 108},
- {from: 217, to: 26},
- {from: 217, to: 20},
- {from: 217, to: 78},
- {from: 217, to: 118},
- {from: 217, to: 83},
- {from: 217, to: 114},
- {from: 217, to: 120},
- {from: 217, to: 131},
- {from: 217, to: 178},
- {from: 217, to: 187},
- {from: 218, to: 51},
- {from: 218, to: 135},
- {from: 218, to: 46},
- {from: 218, to: 144},
- {from: 218, to: 75},
- {from: 218, to: 164},
- {from: 218, to: 156},
- {from: 218, to: 63},
- {from: 218, to: 178},
- {from: 218, to: 116},
- {from: 219, to: 67},
- {from: 219, to: 14},
- {from: 219, to: 97},
- {from: 219, to: 74},
- {from: 219, to: 21},
- {from: 219, to: 198},
- {from: 219, to: 199},
- {from: 219, to: 143},
- {from: 219, to: 62},
- {from: 219, to: 60},
- {from: 220, to: 40},
- {from: 220, to: 35},
- {from: 220, to: 36},
- {from: 220, to: 34},
- {from: 220, to: 93},
- {from: 220, to: 107},
- {from: 220, to: 137},
- {from: 220, to: 190},
- {from: 220, to: 82},
- {from: 220, to: 172},
- {from: 221, to: 192},
- {from: 221, to: 9},
- {from: 221, to: 1},
- {from: 221, to: 8},
- {from: 221, to: 129},
- {from: 221, to: 72},
- {from: 221, to: 94},
- {from: 221, to: 18},
- {from: 221, to: 117},
- {from: 221, to: 85},
- {from: 222, to: 141},
- {from: 222, to: 53},
- {from: 222, to: 23},
- {from: 222, to: 196},
- {from: 222, to: 150},
- {from: 222, to: 166},
- {from: 222, to: 133},
- {from: 222, to: 31},
- {from: 222, to: 179},
- {from: 222, to: 107},
- {from: 223, to: 86},
- {from: 223, to: 43},
- {from: 223, to: 22},
- {from: 223, to: 11},
- {from: 223, to: 121},
- {from: 223, to: 13},
- {from: 223, to: 2},
- {from: 223, to: 153},
- {from: 223, to: 151},
- {from: 223, to: 25},
- {from: 224, to: 96},
- {from: 224, to: 172},
- {from: 224, to: 142},
- {from: 224, to: 197},
- {from: 224, to: 148},
- {from: 224, to: 116},
- {from: 224, to: 21},
- {from: 224, to: 177},
- {from: 224, to: 55},
- {from: 224, to: 87},
- {from: 225, to: 17},
- {from: 225, to: 163},
- {from: 225, to: 134},
- {from: 225, to: 86},
- {from: 225, to: 51},
- {from: 225, to: 122},
- {from: 225, to: 12},
- {from: 225, to: 93},
- {from: 225, to: 60},
- {from: 225, to: 3},
- {from: 226, to: 35},
- {from: 226, to: 80},
- {from: 226, to: 171},
- {from: 226, to: 157},
- {from: 226, to: 40},
- {from: 226, to: 127},
- {from: 226, to: 13},
- {from: 226, to: 54},
- {from: 226, to: 185},
- {from: 226, to: 187},
- {from: 227, to: 80},
- {from: 227, to: 102},
- {from: 227, to: 44},
- {from: 227, to: 70},
- {from: 227, to: 79},
- {from: 227, to: 30},
- {from: 227, to: 104},
- {from: 227, to: 48},
- {from: 227, to: 36},
- {from: 227, to: 128},
- {from: 228, to: 60},
- {from: 228, to: 74},
- {from: 228, to: 44},
- {from: 228, to: 12},
- {from: 228, to: 43},
- {from: 228, to: 32},
- {from: 228, to: 164},
- {from: 228, to: 71},
- {from: 228, to: 87},
- {from: 228, to: 33},
- {from: 229, to: 184},
- {from: 229, to: 62},
- {from: 229, to: 105},
- {from: 229, to: 98},
- {from: 229, to: 193},
- {from: 229, to: 191},
- {from: 229, to: 89},
- {from: 229, to: 160},
- {from: 229, to: 32},
- {from: 229, to: 38},
- {from: 230, to: 42},
- {from: 230, to: 64},
- {from: 230, to: 134},
- {from: 230, to: 146},
- {from: 230, to: 111},
- {from: 230, to: 178},
- {from: 230, to: 42},
- {from: 230, to: 104},
- {from: 230, to: 41},
- {from: 230, to: 133},
- {from: 231, to: 187},
- {from: 231, to: 122},
- {from: 231, to: 130},
- {from: 231, to: 13},
- {from: 231, to: 25},
- {from: 231, to: 42},
- {from: 231, to: 175},
- {from: 231, to: 7},
- {from: 231, to: 98},
- {from: 231, to: 110},
- {from: 232, to: 38},
- {from: 232, to: 112},
- {from: 232, to: 164},
- {from: 232, to: 131},
- {from: 232, to: 193},
- {from: 232, to: 126},
- {from: 232, to: 137},
- {from: 232, to: 140},
- {from: 232, to: 144},
- {from: 232, to: 113},
- {from: 233, to: 24},
- {from: 233, to: 186},
- {from: 233, to: 36},
- {from: 233, to: 9},
- {from: 233, to: 160},
- {from: 233, to: 119},
- {from: 233, to: 9},
- {from: 233, to: 95},
- {from: 233, to: 22},
- {from: 233, to: 87},
- {from: 234, to: 178},
- {from: 234, to: 71},
- {from: 234, to: 171},
- {from: 234, to: 168},
- {from: 234, to: 44},
- {from: 234, to: 5},
- {from: 234, to: 74},
- {from: 234, to: 65},
- {from: 234, to: 71},
- {from: 234, to: 58},
- {from: 235, to: 97},
- {from: 235, to: 14},
- {from: 235, to: 27},
- {from: 235, to: 175},
- {from: 235, to: 145},
- {from: 235, to: 13},
- {from: 235, to: 94},
- {from: 235, to: 86},
- {from: 235, to: 75},
- {from: 235, to: 59},
- {from: 236, to: 147},
- {from: 236, to: 9},
- {from: 236, to: 48},
- {from: 236, to: 134},
- {from: 236, to: 2},
- {from: 236, to: 41},
- {from: 236, to: 128},
- {from: 236, to: 177},
- {from: 236, to: 136},
- {from: 236, to: 169},
- {from: 237, to: 177},
- {from: 237, to: 106},
- {from: 237, to: 54},
- {from: 237, to: 40},
- {from: 237, to: 76},
- {from: 237, to: 152},
- {from: 237, to: 177},
- {from: 237, to: 92},
- {from: 237, to: 186},
- {from: 237, to: 152},
- {from: 238, to: 2},
- {from: 238, to: 54},
- {from: 238, to: 38},
- {from: 238, to: 173},
- {from: 238, to: 154},
- {from: 238, to: 46},
- {from: 238, to: 5},
- {from: 238, to: 98},
- {from: 238, to: 188},
- {from: 238, to: 192},
- {from: 239, to: 125},
- {from: 239, to: 190},
- {from: 239, to: 173},
- {from: 239, to: 44},
- {from: 239, to: 64},
- {from: 239, to: 61},
- {from: 239, to: 131},
- {from: 239, to: 181},
- {from: 239, to: 58},
- {from: 239, to: 106},
- {from: 240, to: 43},
- {from: 240, to: 143},
- {from: 240, to: 194},
- {from: 240, to: 55},
- {from: 240, to: 55},
- {from: 240, to: 183},
- {from: 240, to: 46},
- {from: 240, to: 188},
- {from: 240, to: 69},
- {from: 240, to: 133},
- {from: 241, to: 85},
- {from: 241, to: 136},
- {from: 241, to: 99},
- {from: 241, to: 60},
- {from: 241, to: 188},
- {from: 241, to: 137},
- {from: 241, to: 57},
- {from: 241, to: 6},
- {from: 241, to: 73},
- {from: 241, to: 192},
- {from: 242, to: 182},
- {from: 242, to: 159},
- {from: 242, to: 32},
- {from: 242, to: 97},
- {from: 242, to: 22},
- {from: 242, to: 186},
- {from: 242, to: 146},
- {from: 242, to: 56},
- {from: 242, to: 75},
- {from: 242, to: 175},
- {from: 243, to: 95},
- {from: 243, to: 28},
- {from: 243, to: 170},
- {from: 243, to: 18},
- {from: 243, to: 137},
- {from: 243, to: 111},
- {from: 243, to: 48},
- {from: 243, to: 136},
- {from: 243, to: 36},
- {from: 243, to: 30},
- {from: 244, to: 65},
- {from: 244, to: 91},
- {from: 244, to: 86},
- {from: 244, to: 183},
- {from: 244, to: 98},
- {from: 244, to: 28},
- {from: 244, to: 32},
- {from: 244, to: 77},
- {from: 244, to: 124},
- {from: 244, to: 72},
- {from: 245, to: 65},
- {from: 245, to: 11},
- {from: 245, to: 159},
- {from: 245, to: 64},
- {from: 245, to: 28},
- {from: 245, to: 179},
- {from: 245, to: 117},
- {from: 245, to: 15},
- {from: 245, to: 2},
- {from: 245, to: 116},
- {from: 246, to: 68},
- {from: 246, to: 176},
- {from: 246, to: 48},
- {from: 246, to: 95},
- {from: 246, to: 27},
- {from: 246, to: 79},
- {from: 246, to: 87},
- {from: 246, to: 119},
- {from: 246, to: 180},
- {from: 246, to: 148},
- {from: 247, to: 82},
- {from: 247, to: 106},
- {from: 247, to: 197},
- {from: 247, to: 156},
- {from: 247, to: 62},
- {from: 247, to: 25},
- {from: 247, to: 3},
- {from: 247, to: 9},
- {from: 247, to: 14},
- {from: 247, to: 24},
- {from: 248, to: 132},
- {from: 248, to: 130},
- {from: 248, to: 133},
- {from: 248, to: 188},
- {from: 248, to: 38},
- {from: 248, to: 146},
- {from: 248, to: 159},
- {from: 248, to: 99},
- {from: 248, to: 38},
- {from: 248, to: 79},
- {from: 249, to: 48},
- {from: 249, to: 29},
- {from: 249, to: 69},
- {from: 249, to: 167},
- {from: 249, to: 171},
- {from: 249, to: 43},
- {from: 249, to: 150},
- {from: 249, to: 199},
- {from: 249, to: 195},
- {from: 249, to: 186},
- ]);
- // create a network
- const container = document.getElementById('mynetwork');
- const data = {
- nodes,
- edges
- };
- const options = {};
- const network = new vis.Network(container, data, options);
-
-
-
-
- }
-}
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index cfef21dc45262261a5dcbd3e9c4bc81d3587ffda..a600f48ddfe9dc88b54a6340df25c363b6b487ee 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -1,7 +1,7 @@
<div class="content explorer">
<div class="modal" [class.is-active]="showModal">
- <div class="modal-background"></div>
+ <div class="modal-background" (click)="closeSummary()"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">{{groupId}}</p>
@@ -25,7 +25,7 @@
<h2>Summary</h2>
<figure class="image" (click)="openSummary('A4435')">
- <img src="assets/boxplot.png" alt="Boxplots">
+ <img src="../assets/boxplot.png" alt="Boxplots">
</figure>
</section>
@@ -48,7 +48,26 @@
</header>
<div class="card-content">
<div class="content">
- Information about how to use the explorer
+ <nav class="level">
+ <div class="level-item has-text-centered">
+ <div>
+ <p class="heading">Effects</p>
+ <p class="title"> {{ numberOfEffects }}</p>
+ </div>
+ </div>
+ <div class="level-item has-text-centered">
+ <div>
+ <p class="heading">Protein Groups</p>
+ <p class="title">{{ numberOfProteinGroups }}</p>
+ </div>
+ </div>
+ <div class="level-item has-text-centered">
+ <div>
+ <p class="heading">Interactions</p>
+ <p class="title">{{ numberOfInteractions }}</p>
+ </div>
+ </div>
+ </nav>
</div>
</div>
</div>
@@ -77,7 +96,7 @@
<p class="card-header-title">
<span class="icon">
<i class="fas fa-filter" aria-hidden="true"></i>
- </span> Filter Network
+ </span> Filtering
</p>
</header>
<div class="card-content">
@@ -94,44 +113,31 @@
</button>
</footer>
</div>
-
</div>
-
<div class="content network">
- <div class="card">
- <header class="card-header">
- <p class="card-header-title">
- SARS-CoV-2 Protein-Protein Interaction Network
- </p>
- </header>
- <div class="card-content">
- <div class="card-image">
- <figure class="image" (click)="openSummary('A4435')">
- <img src="assets/graph_example.png" alt="PPI Network" class="network">
- </figure>
+ <div class="card network">
+ <header class="card-header">
+ <p class="card-header-title">
+ SARS-CoV-2 Protein-Protein Interaction Network
+ </p>
+ </header>
+ <div class="card-content">
+ <div class="card-image">
+ <div class="network center" #network>
+ <button class="button is-loading center">Loading</button>
</div>
- <footer class="card-footer">
- <button class="card-footer-item button is-primary">
+ </div>
+ <footer class="card-footer">
+ <button class="card-footer-item button is-primary">
<span class="icon">
<i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
</span>
- </button>
- <a class="card-footer-item">
- <span class="icon">
- <i class="fas fa-search-plus" aria-hidden="true"></i>
- </span>
- </a>
- <a href="#" class="card-footer-item">
- <span class="icon">
- <i class="fas fa-search-minus" aria-hidden="true"></i>
- </span>
- </a>
- </footer>
- </div>
+ </button>
+ </footer>
</div>
-
</div>
+</div>
</div>
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index a16def7f2caa1fd8f8d35d039178fad0d69e1dc3..75f722b2d8ca2b756822ce3a183dee21698faa8a 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -1,12 +1,13 @@
-import {Component, OnInit} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
+import {Network, Edge, Node} from 'vis-network';
@Component({
selector: 'app-explorer-page',
templateUrl: './explorer-page.component.html',
styleUrls: ['./explorer-page.component.scss'],
})
-export class ExplorerPageComponent implements OnInit {
+export class ExplorerPageComponent implements OnInit, AfterViewInit {
public showModal = false;
public groupId = '';
@@ -14,11 +15,17 @@ export class ExplorerPageComponent implements OnInit {
public proteinGroup = '';
public proteinNames: Array<string> = [];
public proteinACs: Array<string> = [];
- public numberOfInteractions = 0;
public baitNames: Array<string> = [];
- constructor(private route: ActivatedRoute, private router: Router) {
+ public numberOfInteractions = 0;
+ public numberOfEffects = 0;
+ public numberOfProteinGroups = 0;
+
+ private network: Network;
+ @ViewChild('network', {static: false}) networkEl: ElementRef;
+
+ constructor(private route: ActivatedRoute, private router: Router) {
this.groupId = 'IFI16';
this.geneNames.push('IFI16');
this.proteinNames.push('Gamma-interface-inducible protein 16');
@@ -30,7 +37,7 @@ export class ExplorerPageComponent implements OnInit {
this.baitNames.push('Bait Protein 4');
this.baitNames.push('Bait Protein 5');
- this.route.params.subscribe(async (params) => {
+ this.route.queryParams.subscribe(async (params) => {
const proteinGroup = params.proteinGroup;
if (!proteinGroup) {
// In this case, the URL is just `/explorer`
@@ -57,15 +64,868 @@ export class ExplorerPageComponent implements OnInit {
}
ngOnInit() {
+ }
+ ngAfterViewInit() {
+ console.log(this.network);
+ if (this.network) {
+ return;
+ } else {
+ this.createNetwork();
+ }
+ }
+
+ public getGroupId() {
+ return this.groupId;
}
public async openSummary(groupId: string) {
- await this.router.navigate(['explorer', groupId]);
+ await this.router.navigate(['explorer'], {queryParams: {proteinGroup: groupId}});
}
public async closeSummary() {
await this.router.navigate(['explorer']);
}
+ private createNetwork() {
+ // create an array with nodes
+ const nodes: Node[] = [
+ {id: 0, label: 'pg0', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 1, label: 'pg1', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 2, label: 'pg2', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 3, label: 'pg3', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 4, label: 'pg4', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 5, label: 'pg5', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 6, label: 'pg6', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 7, label: 'pg7', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 8, label: 'pg8', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 9, label: 'pg9', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 10, label: 'pg10', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 11, label: 'pg11', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 12, label: 'pg12', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 13, label: 'pg13', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 14, label: 'pg14', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 15, label: 'pg15', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 16, label: 'pg16', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 17, label: 'pg17', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 18, label: 'pg18', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 19, label: 'pg19', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 20, label: 'pg20', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 21, label: 'pg21', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 22, label: 'pg22', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 23, label: 'pg23', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 24, label: 'pg24', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 25, label: 'pg25', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 26, label: 'pg26', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 27, label: 'pg27', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 28, label: 'pg28', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 29, label: 'pg29', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 30, label: 'pg30', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 31, label: 'pg31', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 32, label: 'pg32', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 33, label: 'pg33', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 34, label: 'pg34', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 35, label: 'pg35', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 36, label: 'pg36', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 37, label: 'pg37', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 38, label: 'pg38', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 39, label: 'pg39', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 40, label: 'pg40', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 41, label: 'pg41', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 42, label: 'pg42', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 43, label: 'pg43', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 44, label: 'pg44', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 45, label: 'pg45', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 46, label: 'pg46', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 47, label: 'pg47', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 48, label: 'pg48', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 49, label: 'pg49', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 50, label: 'pg50', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 51, label: 'pg51', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 52, label: 'pg52', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 53, label: 'pg53', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 54, label: 'pg54', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 55, label: 'pg55', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 56, label: 'pg56', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 57, label: 'pg57', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 58, label: 'pg58', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 59, label: 'pg59', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 60, label: 'pg60', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 61, label: 'pg61', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 62, label: 'pg62', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 63, label: 'pg63', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 64, label: 'pg64', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 65, label: 'pg65', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 66, label: 'pg66', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 67, label: 'pg67', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 68, label: 'pg68', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 69, label: 'pg69', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 70, label: 'pg70', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 71, label: 'pg71', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 72, label: 'pg72', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 73, label: 'pg73', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 74, label: 'pg74', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 75, label: 'pg75', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 76, label: 'pg76', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 77, label: 'pg77', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 78, label: 'pg78', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 79, label: 'pg79', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 80, label: 'pg80', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 81, label: 'pg81', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 82, label: 'pg82', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 83, label: 'pg83', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 84, label: 'pg84', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 85, label: 'pg85', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 86, label: 'pg86', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 87, label: 'pg87', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 88, label: 'pg88', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 89, label: 'pg89', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 90, label: 'pg90', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 91, label: 'pg91', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 92, label: 'pg92', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 93, label: 'pg93', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 94, label: 'pg94', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 95, label: 'pg95', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 96, label: 'pg96', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 97, label: 'pg97', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 98, label: 'pg98', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 99, label: 'pg99', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 100, label: 'pg100', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 101, label: 'pg101', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 102, label: 'pg102', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 103, label: 'pg103', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 104, label: 'pg104', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 105, label: 'pg105', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 106, label: 'pg106', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 107, label: 'pg107', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 108, label: 'pg108', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 109, label: 'pg109', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 110, label: 'pg110', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 111, label: 'pg111', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 112, label: 'pg112', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 113, label: 'pg113', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 114, label: 'pg114', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 115, label: 'pg115', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 116, label: 'pg116', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 117, label: 'pg117', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 118, label: 'pg118', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 119, label: 'pg119', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 120, label: 'pg120', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 121, label: 'pg121', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 122, label: 'pg122', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 123, label: 'pg123', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 124, label: 'pg124', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 125, label: 'pg125', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 126, label: 'pg126', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 127, label: 'pg127', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 128, label: 'pg128', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 129, label: 'pg129', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 130, label: 'pg130', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 131, label: 'pg131', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 132, label: 'pg132', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 133, label: 'pg133', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 134, label: 'pg134', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 135, label: 'pg135', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 136, label: 'pg136', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 137, label: 'pg137', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 138, label: 'pg138', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 139, label: 'pg139', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 140, label: 'pg140', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 141, label: 'pg141', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 142, label: 'pg142', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 143, label: 'pg143', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 144, label: 'pg144', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 145, label: 'pg145', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 146, label: 'pg146', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 147, label: 'pg147', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 148, label: 'pg148', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 149, label: 'pg149', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 150, label: 'pg150', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 151, label: 'pg151', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 152, label: 'pg152', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 153, label: 'pg153', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 154, label: 'pg154', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 155, label: 'pg155', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 156, label: 'pg156', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 157, label: 'pg157', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 158, label: 'pg158', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 159, label: 'pg159', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 160, label: 'pg160', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 161, label: 'pg161', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 162, label: 'pg162', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 163, label: 'pg163', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 164, label: 'pg164', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 165, label: 'pg165', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 166, label: 'pg166', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 167, label: 'pg167', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 168, label: 'pg168', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 169, label: 'pg169', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 170, label: 'pg170', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 171, label: 'pg171', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 172, label: 'pg172', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 173, label: 'pg173', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 174, label: 'pg174', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 175, label: 'pg175', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 176, label: 'pg176', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 177, label: 'pg177', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 178, label: 'pg178', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 179, label: 'pg179', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 180, label: 'pg180', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 181, label: 'pg181', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 182, label: 'pg182', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 183, label: 'pg183', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 184, label: 'pg184', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 185, label: 'pg185', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 186, label: 'pg186', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 187, label: 'pg187', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 188, label: 'pg188', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 189, label: 'pg189', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 190, label: 'pg190', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 191, label: 'pg191', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 192, label: 'pg192', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 193, label: 'pg193', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 194, label: 'pg194', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 195, label: 'pg195', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 196, label: 'pg196', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 197, label: 'pg197', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 198, label: 'pg198', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 199, label: 'pg199', size: 5, color: '#ADADAD', shape: 'square', shadow: true},
+ {id: 200, label: 'eff0', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 201, label: 'eff1', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 202, label: 'eff2', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 203, label: 'eff3', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 204, label: 'eff4', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 205, label: 'eff5', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 206, label: 'eff6', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 207, label: 'eff7', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 208, label: 'eff8', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 209, label: 'eff9', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 210, label: 'eff10', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 211, label: 'eff11', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 212, label: 'eff12', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 213, label: 'eff13', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 214, label: 'eff14', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 215, label: 'eff15', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 216, label: 'eff16', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 217, label: 'eff17', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 218, label: 'eff18', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 219, label: 'eff19', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 220, label: 'eff20', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 221, label: 'eff21', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 222, label: 'eff22', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 223, label: 'eff23', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 224, label: 'eff24', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 225, label: 'eff25', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 226, label: 'eff26', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 227, label: 'eff27', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 228, label: 'eff28', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 229, label: 'eff29', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 230, label: 'eff30', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 231, label: 'eff31', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 232, label: 'eff32', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 233, label: 'eff33', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 234, label: 'eff34', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 235, label: 'eff35', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 236, label: 'eff36', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 237, label: 'eff37', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 238, label: 'eff38', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 239, label: 'eff39', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 240, label: 'eff40', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 241, label: 'eff41', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 242, label: 'eff42', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 243, label: 'eff43', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 244, label: 'eff44', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 245, label: 'eff45', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 246, label: 'eff46', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 247, label: 'eff47', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 248, label: 'eff48', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ {id: 249, label: 'eff49', size: 10, color: '#118AB2', shape: 'circle', shadow: true},
+ ];
+
+ // create an array with edges
+ const edges: Edge[] = [
+ {from: 200, to: 154, color: {color: 'black', opacity: 0.5}},
+ {from: 200, to: 116, color: {color: 'black', opacity: 0.5}},
+ {from: 200, to: 181, color: {color: 'black', opacity: 0.5}},
+ {from: 200, to: 22, color: {color: 'black', opacity: 0.5}},
+ {from: 200, to: 126, color: {color: 'black', opacity: 0.5}},
+ {from: 200, to: 130, color: {color: 'black', opacity: 0.5}},
+ {from: 200, to: 111, color: {color: 'black', opacity: 0.5}},
+ {from: 200, to: 94, color: {color: 'black', opacity: 0.5}},
+ {from: 200, to: 30, color: {color: 'black', opacity: 0.5}},
+ {from: 200, to: 110, color: {color: 'black', opacity: 0.5}},
+ {from: 201, to: 150, color: {color: 'black', opacity: 0.5}},
+ {from: 201, to: 100, color: {color: 'black', opacity: 0.5}},
+ {from: 201, to: 132, color: {color: 'black', opacity: 0.5}},
+ {from: 201, to: 94, color: {color: 'black', opacity: 0.5}},
+ {from: 201, to: 136, color: {color: 'black', opacity: 0.5}},
+ {from: 201, to: 122, color: {color: 'black', opacity: 0.5}},
+ {from: 201, to: 41, color: {color: 'black', opacity: 0.5}},
+ {from: 201, to: 85, color: {color: 'black', opacity: 0.5}},
+ {from: 201, to: 173, color: {color: 'black', opacity: 0.5}},
+ {from: 201, to: 80, color: {color: 'black', opacity: 0.5}},
+ {from: 202, to: 180, color: {color: 'black', opacity: 0.5}},
+ {from: 202, to: 146, color: {color: 'black', opacity: 0.5}},
+ {from: 202, to: 130, color: {color: 'black', opacity: 0.5}},
+ {from: 202, to: 38, color: {color: 'black', opacity: 0.5}},
+ {from: 202, to: 107, color: {color: 'black', opacity: 0.5}},
+ {from: 202, to: 1, color: {color: 'black', opacity: 0.5}},
+ {from: 202, to: 12, color: {color: 'black', opacity: 0.5}},
+ {from: 202, to: 16, color: {color: 'black', opacity: 0.5}},
+ {from: 202, to: 169, color: {color: 'black', opacity: 0.5}},
+ {from: 202, to: 11, color: {color: 'black', opacity: 0.5}},
+ {from: 203, to: 65, color: {color: 'black', opacity: 0.5}},
+ {from: 203, to: 76, color: {color: 'black', opacity: 0.5}},
+ {from: 203, to: 65, color: {color: 'black', opacity: 0.5}},
+ {from: 203, to: 29, color: {color: 'black', opacity: 0.5}},
+ {from: 203, to: 31, color: {color: 'black', opacity: 0.5}},
+ {from: 203, to: 170, color: {color: 'black', opacity: 0.5}},
+ {from: 203, to: 14, color: {color: 'black', opacity: 0.5}},
+ {from: 203, to: 6, color: {color: 'black', opacity: 0.5}},
+ {from: 203, to: 141, color: {color: 'black', opacity: 0.5}},
+ {from: 203, to: 59, color: {color: 'black', opacity: 0.5}},
+ {from: 204, to: 137, color: {color: 'black', opacity: 0.5}},
+ {from: 204, to: 16, color: {color: 'black', opacity: 0.5}},
+ {from: 204, to: 185, color: {color: 'black', opacity: 0.5}},
+ {from: 204, to: 96, color: {color: 'black', opacity: 0.5}},
+ {from: 204, to: 189, color: {color: 'black', opacity: 0.5}},
+ {from: 204, to: 139, color: {color: 'black', opacity: 0.5}},
+ {from: 204, to: 43, color: {color: 'black', opacity: 0.5}},
+ {from: 204, to: 67, color: {color: 'black', opacity: 0.5}},
+ {from: 204, to: 140, color: {color: 'black', opacity: 0.5}},
+ {from: 204, to: 198, color: {color: 'black', opacity: 0.5}},
+ {from: 205, to: 51, color: {color: 'black', opacity: 0.5}},
+ {from: 205, to: 61, color: {color: 'black', opacity: 0.5}},
+ {from: 205, to: 171, color: {color: 'black', opacity: 0.5}},
+ {from: 205, to: 192, color: {color: 'black', opacity: 0.5}},
+ {from: 205, to: 42, color: {color: 'black', opacity: 0.5}},
+ {from: 205, to: 103, color: {color: 'black', opacity: 0.5}},
+ {from: 205, to: 190, color: {color: 'black', opacity: 0.5}},
+ {from: 205, to: 16, color: {color: 'black', opacity: 0.5}},
+ {from: 205, to: 56, color: {color: 'black', opacity: 0.5}},
+ {from: 205, to: 163, color: {color: 'black', opacity: 0.5}},
+ {from: 206, to: 176, color: {color: 'black', opacity: 0.5}},
+ {from: 206, to: 80, color: {color: 'black', opacity: 0.5}},
+ {from: 206, to: 9, color: {color: 'black', opacity: 0.5}},
+ {from: 206, to: 54, color: {color: 'black', opacity: 0.5}},
+ {from: 206, to: 94, color: {color: 'black', opacity: 0.5}},
+ {from: 206, to: 174, color: {color: 'black', opacity: 0.5}},
+ {from: 206, to: 47, color: {color: 'black', opacity: 0.5}},
+ {from: 206, to: 144, color: {color: 'black', opacity: 0.5}},
+ {from: 206, to: 52, color: {color: 'black', opacity: 0.5}},
+ {from: 206, to: 152, color: {color: 'black', opacity: 0.5}},
+ {from: 207, to: 33, color: {color: 'black', opacity: 0.5}},
+ {from: 207, to: 74, color: {color: 'black', opacity: 0.5}},
+ {from: 207, to: 71, color: {color: 'black', opacity: 0.5}},
+ {from: 207, to: 43, color: {color: 'black', opacity: 0.5}},
+ {from: 207, to: 73, color: {color: 'black', opacity: 0.5}},
+ {from: 207, to: 177, color: {color: 'black', opacity: 0.5}},
+ {from: 207, to: 93, color: {color: 'black', opacity: 0.5}},
+ {from: 207, to: 175, color: {color: 'black', opacity: 0.5}},
+ {from: 207, to: 133, color: {color: 'black', opacity: 0.5}},
+ {from: 207, to: 24, color: {color: 'black', opacity: 0.5}},
+ {from: 208, to: 174, color: {color: 'black', opacity: 0.5}},
+ {from: 208, to: 167, color: {color: 'black', opacity: 0.5}},
+ {from: 208, to: 42, color: {color: 'black', opacity: 0.5}},
+ {from: 208, to: 117, color: {color: 'black', opacity: 0.5}},
+ {from: 208, to: 174, color: {color: 'black', opacity: 0.5}},
+ {from: 208, to: 72, color: {color: 'black', opacity: 0.5}},
+ {from: 208, to: 59, color: {color: 'black', opacity: 0.5}},
+ {from: 208, to: 86, color: {color: 'black', opacity: 0.5}},
+ {from: 208, to: 55, color: {color: 'black', opacity: 0.5}},
+ {from: 208, to: 15, color: {color: 'black', opacity: 0.5}},
+ {from: 209, to: 6, color: {color: 'black', opacity: 0.5}},
+ {from: 209, to: 189, color: {color: 'black', opacity: 0.5}},
+ {from: 209, to: 174, color: {color: 'black', opacity: 0.5}},
+ {from: 209, to: 140, color: {color: 'black', opacity: 0.5}},
+ {from: 209, to: 49, color: {color: 'black', opacity: 0.5}},
+ {from: 209, to: 98, color: {color: 'black', opacity: 0.5}},
+ {from: 209, to: 197, color: {color: 'black', opacity: 0.5}},
+ {from: 209, to: 179, color: {color: 'black', opacity: 0.5}},
+ {from: 209, to: 19, color: {color: 'black', opacity: 0.5}},
+ {from: 209, to: 177, color: {color: 'black', opacity: 0.5}},
+ {from: 210, to: 143, color: {color: 'black', opacity: 0.5}},
+ {from: 210, to: 21, color: {color: 'black', opacity: 0.5}},
+ {from: 210, to: 126, color: {color: 'black', opacity: 0.5}},
+ {from: 210, to: 8, color: {color: 'black', opacity: 0.5}},
+ {from: 210, to: 14, color: {color: 'black', opacity: 0.5}},
+ {from: 210, to: 72, color: {color: 'black', opacity: 0.5}},
+ {from: 210, to: 104, color: {color: 'black', opacity: 0.5}},
+ {from: 210, to: 80, color: {color: 'black', opacity: 0.5}},
+ {from: 210, to: 128, color: {color: 'black', opacity: 0.5}},
+ {from: 210, to: 6, color: {color: 'black', opacity: 0.5}},
+ {from: 211, to: 49, color: {color: 'black', opacity: 0.5}},
+ {from: 211, to: 152, color: {color: 'black', opacity: 0.5}},
+ {from: 211, to: 39, color: {color: 'black', opacity: 0.5}},
+ {from: 211, to: 16, color: {color: 'black', opacity: 0.5}},
+ {from: 211, to: 170, color: {color: 'black', opacity: 0.5}},
+ {from: 211, to: 88, color: {color: 'black', opacity: 0.5}},
+ {from: 211, to: 99, color: {color: 'black', opacity: 0.5}},
+ {from: 211, to: 56, color: {color: 'black', opacity: 0.5}},
+ {from: 211, to: 51, color: {color: 'black', opacity: 0.5}},
+ {from: 211, to: 126, color: {color: 'black', opacity: 0.5}},
+ {from: 212, to: 106, color: {color: 'black', opacity: 0.5}},
+ {from: 212, to: 15, color: {color: 'black', opacity: 0.5}},
+ {from: 212, to: 75, color: {color: 'black', opacity: 0.5}},
+ {from: 212, to: 63, color: {color: 'black', opacity: 0.5}},
+ {from: 212, to: 71, color: {color: 'black', opacity: 0.5}},
+ {from: 212, to: 89, color: {color: 'black', opacity: 0.5}},
+ {from: 212, to: 97, color: {color: 'black', opacity: 0.5}},
+ {from: 212, to: 144, color: {color: 'black', opacity: 0.5}},
+ {from: 212, to: 100, color: {color: 'black', opacity: 0.5}},
+ {from: 212, to: 150, color: {color: 'black', opacity: 0.5}},
+ {from: 213, to: 160, color: {color: 'black', opacity: 0.5}},
+ {from: 213, to: 67, color: {color: 'black', opacity: 0.5}},
+ {from: 213, to: 96, color: {color: 'black', opacity: 0.5}},
+ {from: 213, to: 178, color: {color: 'black', opacity: 0.5}},
+ {from: 213, to: 163, color: {color: 'black', opacity: 0.5}},
+ {from: 213, to: 190, color: {color: 'black', opacity: 0.5}},
+ {from: 213, to: 47, color: {color: 'black', opacity: 0.5}},
+ {from: 213, to: 172, color: {color: 'black', opacity: 0.5}},
+ {from: 213, to: 35, color: {color: 'black', opacity: 0.5}},
+ {from: 213, to: 99, color: {color: 'black', opacity: 0.5}},
+ {from: 214, to: 135, color: {color: 'black', opacity: 0.5}},
+ {from: 214, to: 158, color: {color: 'black', opacity: 0.5}},
+ {from: 214, to: 81, color: {color: 'black', opacity: 0.5}},
+ {from: 214, to: 196, color: {color: 'black', opacity: 0.5}},
+ {from: 214, to: 173, color: {color: 'black', opacity: 0.5}},
+ {from: 214, to: 121, color: {color: 'black', opacity: 0.5}},
+ {from: 214, to: 0, color: {color: 'black', opacity: 0.5}},
+ {from: 214, to: 4, color: {color: 'black', opacity: 0.5}},
+ {from: 214, to: 16, color: {color: 'black', opacity: 0.5}},
+ {from: 214, to: 9, color: {color: 'black', opacity: 0.5}},
+ {from: 215, to: 94, color: {color: 'black', opacity: 0.5}},
+ {from: 215, to: 34, color: {color: 'black', opacity: 0.5}},
+ {from: 215, to: 119, color: {color: 'black', opacity: 0.5}},
+ {from: 215, to: 86, color: {color: 'black', opacity: 0.5}},
+ {from: 215, to: 5, color: {color: 'black', opacity: 0.5}},
+ {from: 215, to: 25, color: {color: 'black', opacity: 0.5}},
+ {from: 215, to: 121, color: {color: 'black', opacity: 0.5}},
+ {from: 215, to: 167, color: {color: 'black', opacity: 0.5}},
+ {from: 215, to: 153, color: {color: 'black', opacity: 0.5}},
+ {from: 215, to: 9, color: {color: 'black', opacity: 0.5}},
+ {from: 216, to: 170, color: {color: 'black', opacity: 0.5}},
+ {from: 216, to: 69, color: {color: 'black', opacity: 0.5}},
+ {from: 216, to: 158, color: {color: 'black', opacity: 0.5}},
+ {from: 216, to: 61, color: {color: 'black', opacity: 0.5}},
+ {from: 216, to: 52, color: {color: 'black', opacity: 0.5}},
+ {from: 216, to: 106, color: {color: 'black', opacity: 0.5}},
+ {from: 216, to: 72, color: {color: 'black', opacity: 0.5}},
+ {from: 216, to: 151, color: {color: 'black', opacity: 0.5}},
+ {from: 216, to: 148, color: {color: 'black', opacity: 0.5}},
+ {from: 216, to: 107, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 76, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 65, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 166, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 92, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 135, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 138, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 101, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 123, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 50, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 165, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 149, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 90, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 84, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 155, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 45, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 162, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 109, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 115, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 37, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 161, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 10, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 66, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 108, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 26, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 20, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 78, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 118, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 83, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 114, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 120, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 131, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 178, color: {color: 'black', opacity: 0.5}},
+ {from: 217, to: 187, color: {color: 'black', opacity: 0.5}},
+ {from: 218, to: 51, color: {color: 'black', opacity: 0.5}},
+ {from: 218, to: 135, color: {color: 'black', opacity: 0.5}},
+ {from: 218, to: 46, color: {color: 'black', opacity: 0.5}},
+ {from: 218, to: 144, color: {color: 'black', opacity: 0.5}},
+ {from: 218, to: 75, color: {color: 'black', opacity: 0.5}},
+ {from: 218, to: 164, color: {color: 'black', opacity: 0.5}},
+ {from: 218, to: 156, color: {color: 'black', opacity: 0.5}},
+ {from: 218, to: 63, color: {color: 'black', opacity: 0.5}},
+ {from: 218, to: 178, color: {color: 'black', opacity: 0.5}},
+ {from: 218, to: 116, color: {color: 'black', opacity: 0.5}},
+ {from: 219, to: 67, color: {color: 'black', opacity: 0.5}},
+ {from: 219, to: 14, color: {color: 'black', opacity: 0.5}},
+ {from: 219, to: 97, color: {color: 'black', opacity: 0.5}},
+ {from: 219, to: 74, color: {color: 'black', opacity: 0.5}},
+ {from: 219, to: 21, color: {color: 'black', opacity: 0.5}},
+ {from: 219, to: 198, color: {color: 'black', opacity: 0.5}},
+ {from: 219, to: 199, color: {color: 'black', opacity: 0.5}},
+ {from: 219, to: 143, color: {color: 'black', opacity: 0.5}},
+ {from: 219, to: 62, color: {color: 'black', opacity: 0.5}},
+ {from: 219, to: 60, color: {color: 'black', opacity: 0.5}},
+ {from: 220, to: 40, color: {color: 'black', opacity: 0.5}},
+ {from: 220, to: 35, color: {color: 'black', opacity: 0.5}},
+ {from: 220, to: 36, color: {color: 'black', opacity: 0.5}},
+ {from: 220, to: 34, color: {color: 'black', opacity: 0.5}},
+ {from: 220, to: 93, color: {color: 'black', opacity: 0.5}},
+ {from: 220, to: 107, color: {color: 'black', opacity: 0.5}},
+ {from: 220, to: 137, color: {color: 'black', opacity: 0.5}},
+ {from: 220, to: 190, color: {color: 'black', opacity: 0.5}},
+ {from: 220, to: 82, color: {color: 'black', opacity: 0.5}},
+ {from: 220, to: 172, color: {color: 'black', opacity: 0.5}},
+ {from: 221, to: 192, color: {color: 'black', opacity: 0.5}},
+ {from: 221, to: 9, color: {color: 'black', opacity: 0.5}},
+ {from: 221, to: 1, color: {color: 'black', opacity: 0.5}},
+ {from: 221, to: 8, color: {color: 'black', opacity: 0.5}},
+ {from: 221, to: 129, color: {color: 'black', opacity: 0.5}},
+ {from: 221, to: 72, color: {color: 'black', opacity: 0.5}},
+ {from: 221, to: 94, color: {color: 'black', opacity: 0.5}},
+ {from: 221, to: 18, color: {color: 'black', opacity: 0.5}},
+ {from: 221, to: 117, color: {color: 'black', opacity: 0.5}},
+ {from: 221, to: 85, color: {color: 'black', opacity: 0.5}},
+ {from: 222, to: 141, color: {color: 'black', opacity: 0.5}},
+ {from: 222, to: 53, color: {color: 'black', opacity: 0.5}},
+ {from: 222, to: 23, color: {color: 'black', opacity: 0.5}},
+ {from: 222, to: 196, color: {color: 'black', opacity: 0.5}},
+ {from: 222, to: 150, color: {color: 'black', opacity: 0.5}},
+ {from: 222, to: 166, color: {color: 'black', opacity: 0.5}},
+ {from: 222, to: 133, color: {color: 'black', opacity: 0.5}},
+ {from: 222, to: 31, color: {color: 'black', opacity: 0.5}},
+ {from: 222, to: 179, color: {color: 'black', opacity: 0.5}},
+ {from: 222, to: 107, color: {color: 'black', opacity: 0.5}},
+ {from: 223, to: 86, color: {color: 'black', opacity: 0.5}},
+ {from: 223, to: 43, color: {color: 'black', opacity: 0.5}},
+ {from: 223, to: 22, color: {color: 'black', opacity: 0.5}},
+ {from: 223, to: 11, color: {color: 'black', opacity: 0.5}},
+ {from: 223, to: 121, color: {color: 'black', opacity: 0.5}},
+ {from: 223, to: 13, color: {color: 'black', opacity: 0.5}},
+ {from: 223, to: 2, color: {color: 'black', opacity: 0.5}},
+ {from: 223, to: 153, color: {color: 'black', opacity: 0.5}},
+ {from: 223, to: 151, color: {color: 'black', opacity: 0.5}},
+ {from: 223, to: 25, color: {color: 'black', opacity: 0.5}},
+ {from: 224, to: 96, color: {color: 'black', opacity: 0.5}},
+ {from: 224, to: 172, color: {color: 'black', opacity: 0.5}},
+ {from: 224, to: 142, color: {color: 'black', opacity: 0.5}},
+ {from: 224, to: 197, color: {color: 'black', opacity: 0.5}},
+ {from: 224, to: 148, color: {color: 'black', opacity: 0.5}},
+ {from: 224, to: 116, color: {color: 'black', opacity: 0.5}},
+ {from: 224, to: 21, color: {color: 'black', opacity: 0.5}},
+ {from: 224, to: 177, color: {color: 'black', opacity: 0.5}},
+ {from: 224, to: 55, color: {color: 'black', opacity: 0.5}},
+ {from: 224, to: 87, color: {color: 'black', opacity: 0.5}},
+ {from: 225, to: 17, color: {color: 'black', opacity: 0.5}},
+ {from: 225, to: 163, color: {color: 'black', opacity: 0.5}},
+ {from: 225, to: 134, color: {color: 'black', opacity: 0.5}},
+ {from: 225, to: 86, color: {color: 'black', opacity: 0.5}},
+ {from: 225, to: 51, color: {color: 'black', opacity: 0.5}},
+ {from: 225, to: 122, color: {color: 'black', opacity: 0.5}},
+ {from: 225, to: 12, color: {color: 'black', opacity: 0.5}},
+ {from: 225, to: 93, color: {color: 'black', opacity: 0.5}},
+ {from: 225, to: 60, color: {color: 'black', opacity: 0.5}},
+ {from: 225, to: 3, color: {color: 'black', opacity: 0.5}},
+ {from: 226, to: 35, color: {color: 'black', opacity: 0.5}},
+ {from: 226, to: 80, color: {color: 'black', opacity: 0.5}},
+ {from: 226, to: 171, color: {color: 'black', opacity: 0.5}},
+ {from: 226, to: 157, color: {color: 'black', opacity: 0.5}},
+ {from: 226, to: 40, color: {color: 'black', opacity: 0.5}},
+ {from: 226, to: 127, color: {color: 'black', opacity: 0.5}},
+ {from: 226, to: 13, color: {color: 'black', opacity: 0.5}},
+ {from: 226, to: 54, color: {color: 'black', opacity: 0.5}},
+ {from: 226, to: 185, color: {color: 'black', opacity: 0.5}},
+ {from: 226, to: 187, color: {color: 'black', opacity: 0.5}},
+ {from: 227, to: 80, color: {color: 'black', opacity: 0.5}},
+ {from: 227, to: 102, color: {color: 'black', opacity: 0.5}},
+ {from: 227, to: 44, color: {color: 'black', opacity: 0.5}},
+ {from: 227, to: 70, color: {color: 'black', opacity: 0.5}},
+ {from: 227, to: 79, color: {color: 'black', opacity: 0.5}},
+ {from: 227, to: 30, color: {color: 'black', opacity: 0.5}},
+ {from: 227, to: 104, color: {color: 'black', opacity: 0.5}},
+ {from: 227, to: 48, color: {color: 'black', opacity: 0.5}},
+ {from: 227, to: 36, color: {color: 'black', opacity: 0.5}},
+ {from: 227, to: 128, color: {color: 'black', opacity: 0.5}},
+ {from: 228, to: 60, color: {color: 'black', opacity: 0.5}},
+ {from: 228, to: 74, color: {color: 'black', opacity: 0.5}},
+ {from: 228, to: 44, color: {color: 'black', opacity: 0.5}},
+ {from: 228, to: 12, color: {color: 'black', opacity: 0.5}},
+ {from: 228, to: 43, color: {color: 'black', opacity: 0.5}},
+ {from: 228, to: 32, color: {color: 'black', opacity: 0.5}},
+ {from: 228, to: 164, color: {color: 'black', opacity: 0.5}},
+ {from: 228, to: 71, color: {color: 'black', opacity: 0.5}},
+ {from: 228, to: 87, color: {color: 'black', opacity: 0.5}},
+ {from: 228, to: 33, color: {color: 'black', opacity: 0.5}},
+ {from: 229, to: 184, color: {color: 'black', opacity: 0.5}},
+ {from: 229, to: 62, color: {color: 'black', opacity: 0.5}},
+ {from: 229, to: 105, color: {color: 'black', opacity: 0.5}},
+ {from: 229, to: 98, color: {color: 'black', opacity: 0.5}},
+ {from: 229, to: 193, color: {color: 'black', opacity: 0.5}},
+ {from: 229, to: 191, color: {color: 'black', opacity: 0.5}},
+ {from: 229, to: 89, color: {color: 'black', opacity: 0.5}},
+ {from: 229, to: 160, color: {color: 'black', opacity: 0.5}},
+ {from: 229, to: 32, color: {color: 'black', opacity: 0.5}},
+ {from: 229, to: 38, color: {color: 'black', opacity: 0.5}},
+ {from: 230, to: 42, color: {color: 'black', opacity: 0.5}},
+ {from: 230, to: 64, color: {color: 'black', opacity: 0.5}},
+ {from: 230, to: 134, color: {color: 'black', opacity: 0.5}},
+ {from: 230, to: 146, color: {color: 'black', opacity: 0.5}},
+ {from: 230, to: 111, color: {color: 'black', opacity: 0.5}},
+ {from: 230, to: 178, color: {color: 'black', opacity: 0.5}},
+ {from: 230, to: 42, color: {color: 'black', opacity: 0.5}},
+ {from: 230, to: 104, color: {color: 'black', opacity: 0.5}},
+ {from: 230, to: 41, color: {color: 'black', opacity: 0.5}},
+ {from: 230, to: 133, color: {color: 'black', opacity: 0.5}},
+ {from: 231, to: 187, color: {color: 'black', opacity: 0.5}},
+ {from: 231, to: 122, color: {color: 'black', opacity: 0.5}},
+ {from: 231, to: 130, color: {color: 'black', opacity: 0.5}},
+ {from: 231, to: 13, color: {color: 'black', opacity: 0.5}},
+ {from: 231, to: 25, color: {color: 'black', opacity: 0.5}},
+ {from: 231, to: 42, color: {color: 'black', opacity: 0.5}},
+ {from: 231, to: 175, color: {color: 'black', opacity: 0.5}},
+ {from: 231, to: 7, color: {color: 'black', opacity: 0.5}},
+ {from: 231, to: 98, color: {color: 'black', opacity: 0.5}},
+ {from: 231, to: 110, color: {color: 'black', opacity: 0.5}},
+ {from: 232, to: 38, color: {color: 'black', opacity: 0.5}},
+ {from: 232, to: 112, color: {color: 'black', opacity: 0.5}},
+ {from: 232, to: 164, color: {color: 'black', opacity: 0.5}},
+ {from: 232, to: 131, color: {color: 'black', opacity: 0.5}},
+ {from: 232, to: 193, color: {color: 'black', opacity: 0.5}},
+ {from: 232, to: 126, color: {color: 'black', opacity: 0.5}},
+ {from: 232, to: 137, color: {color: 'black', opacity: 0.5}},
+ {from: 232, to: 140, color: {color: 'black', opacity: 0.5}},
+ {from: 232, to: 144, color: {color: 'black', opacity: 0.5}},
+ {from: 232, to: 113, color: {color: 'black', opacity: 0.5}},
+ {from: 233, to: 24, color: {color: 'black', opacity: 0.5}},
+ {from: 233, to: 186, color: {color: 'black', opacity: 0.5}},
+ {from: 233, to: 36, color: {color: 'black', opacity: 0.5}},
+ {from: 233, to: 9, color: {color: 'black', opacity: 0.5}},
+ {from: 233, to: 160, color: {color: 'black', opacity: 0.5}},
+ {from: 233, to: 119, color: {color: 'black', opacity: 0.5}},
+ {from: 233, to: 9, color: {color: 'black', opacity: 0.5}},
+ {from: 233, to: 95, color: {color: 'black', opacity: 0.5}},
+ {from: 233, to: 22, color: {color: 'black', opacity: 0.5}},
+ {from: 233, to: 87, color: {color: 'black', opacity: 0.5}},
+ {from: 234, to: 178, color: {color: 'black', opacity: 0.5}},
+ {from: 234, to: 71, color: {color: 'black', opacity: 0.5}},
+ {from: 234, to: 171, color: {color: 'black', opacity: 0.5}},
+ {from: 234, to: 168, color: {color: 'black', opacity: 0.5}},
+ {from: 234, to: 44, color: {color: 'black', opacity: 0.5}},
+ {from: 234, to: 5, color: {color: 'black', opacity: 0.5}},
+ {from: 234, to: 74, color: {color: 'black', opacity: 0.5}},
+ {from: 234, to: 65, color: {color: 'black', opacity: 0.5}},
+ {from: 234, to: 71, color: {color: 'black', opacity: 0.5}},
+ {from: 234, to: 58, color: {color: 'black', opacity: 0.5}},
+ {from: 235, to: 97, color: {color: 'black', opacity: 0.5}},
+ {from: 235, to: 14, color: {color: 'black', opacity: 0.5}},
+ {from: 235, to: 27, color: {color: 'black', opacity: 0.5}},
+ {from: 235, to: 175, color: {color: 'black', opacity: 0.5}},
+ {from: 235, to: 145, color: {color: 'black', opacity: 0.5}},
+ {from: 235, to: 13, color: {color: 'black', opacity: 0.5}},
+ {from: 235, to: 94, color: {color: 'black', opacity: 0.5}},
+ {from: 235, to: 86, color: {color: 'black', opacity: 0.5}},
+ {from: 235, to: 75, color: {color: 'black', opacity: 0.5}},
+ {from: 235, to: 59, color: {color: 'black', opacity: 0.5}},
+ {from: 236, to: 147, color: {color: 'black', opacity: 0.5}},
+ {from: 236, to: 9, color: {color: 'black', opacity: 0.5}},
+ {from: 236, to: 48, color: {color: 'black', opacity: 0.5}},
+ {from: 236, to: 134, color: {color: 'black', opacity: 0.5}},
+ {from: 236, to: 2, color: {color: 'black', opacity: 0.5}},
+ {from: 236, to: 41, color: {color: 'black', opacity: 0.5}},
+ {from: 236, to: 128, color: {color: 'black', opacity: 0.5}},
+ {from: 236, to: 177, color: {color: 'black', opacity: 0.5}},
+ {from: 236, to: 136, color: {color: 'black', opacity: 0.5}},
+ {from: 236, to: 169, color: {color: 'black', opacity: 0.5}},
+ {from: 237, to: 177, color: {color: 'black', opacity: 0.5}},
+ {from: 237, to: 106, color: {color: 'black', opacity: 0.5}},
+ {from: 237, to: 54, color: {color: 'black', opacity: 0.5}},
+ {from: 237, to: 40, color: {color: 'black', opacity: 0.5}},
+ {from: 237, to: 76, color: {color: 'black', opacity: 0.5}},
+ {from: 237, to: 152, color: {color: 'black', opacity: 0.5}},
+ {from: 237, to: 177, color: {color: 'black', opacity: 0.5}},
+ {from: 237, to: 92, color: {color: 'black', opacity: 0.5}},
+ {from: 237, to: 186, color: {color: 'black', opacity: 0.5}},
+ {from: 237, to: 152, color: {color: 'black', opacity: 0.5}},
+ {from: 238, to: 2, color: {color: 'black', opacity: 0.5}},
+ {from: 238, to: 54, color: {color: 'black', opacity: 0.5}},
+ {from: 238, to: 38, color: {color: 'black', opacity: 0.5}},
+ {from: 238, to: 173, color: {color: 'black', opacity: 0.5}},
+ {from: 238, to: 154, color: {color: 'black', opacity: 0.5}},
+ {from: 238, to: 46, color: {color: 'black', opacity: 0.5}},
+ {from: 238, to: 5, color: {color: 'black', opacity: 0.5}},
+ {from: 238, to: 98, color: {color: 'black', opacity: 0.5}},
+ {from: 238, to: 188, color: {color: 'black', opacity: 0.5}},
+ {from: 238, to: 192, color: {color: 'black', opacity: 0.5}},
+ {from: 239, to: 125, color: {color: 'black', opacity: 0.5}},
+ {from: 239, to: 190, color: {color: 'black', opacity: 0.5}},
+ {from: 239, to: 173, color: {color: 'black', opacity: 0.5}},
+ {from: 239, to: 44, color: {color: 'black', opacity: 0.5}},
+ {from: 239, to: 64, color: {color: 'black', opacity: 0.5}},
+ {from: 239, to: 61, color: {color: 'black', opacity: 0.5}},
+ {from: 239, to: 131, color: {color: 'black', opacity: 0.5}},
+ {from: 239, to: 181, color: {color: 'black', opacity: 0.5}},
+ {from: 239, to: 58, color: {color: 'black', opacity: 0.5}},
+ {from: 239, to: 106, color: {color: 'black', opacity: 0.5}},
+ {from: 240, to: 43, color: {color: 'black', opacity: 0.5}},
+ {from: 240, to: 143, color: {color: 'black', opacity: 0.5}},
+ {from: 240, to: 194, color: {color: 'black', opacity: 0.5}},
+ {from: 240, to: 55, color: {color: 'black', opacity: 0.5}},
+ {from: 240, to: 55, color: {color: 'black', opacity: 0.5}},
+ {from: 240, to: 183, color: {color: 'black', opacity: 0.5}},
+ {from: 240, to: 46, color: {color: 'black', opacity: 0.5}},
+ {from: 240, to: 188, color: {color: 'black', opacity: 0.5}},
+ {from: 240, to: 69, color: {color: 'black', opacity: 0.5}},
+ {from: 240, to: 133, color: {color: 'black', opacity: 0.5}},
+ {from: 241, to: 85, color: {color: 'black', opacity: 0.5}},
+ {from: 241, to: 136, color: {color: 'black', opacity: 0.5}},
+ {from: 241, to: 99, color: {color: 'black', opacity: 0.5}},
+ {from: 241, to: 60, color: {color: 'black', opacity: 0.5}},
+ {from: 241, to: 188, color: {color: 'black', opacity: 0.5}},
+ {from: 241, to: 137, color: {color: 'black', opacity: 0.5}},
+ {from: 241, to: 57, color: {color: 'black', opacity: 0.5}},
+ {from: 241, to: 6, color: {color: 'black', opacity: 0.5}},
+ {from: 241, to: 73, color: {color: 'black', opacity: 0.5}},
+ {from: 241, to: 192, color: {color: 'black', opacity: 0.5}},
+ {from: 242, to: 182, color: {color: 'black', opacity: 0.5}},
+ {from: 242, to: 159, color: {color: 'black', opacity: 0.5}},
+ {from: 242, to: 32, color: {color: 'black', opacity: 0.5}},
+ {from: 242, to: 97, color: {color: 'black', opacity: 0.5}},
+ {from: 242, to: 22, color: {color: 'black', opacity: 0.5}},
+ {from: 242, to: 186, color: {color: 'black', opacity: 0.5}},
+ {from: 242, to: 146, color: {color: 'black', opacity: 0.5}},
+ {from: 242, to: 56, color: {color: 'black', opacity: 0.5}},
+ {from: 242, to: 75, color: {color: 'black', opacity: 0.5}},
+ {from: 242, to: 175, color: {color: 'black', opacity: 0.5}},
+ {from: 243, to: 95, color: {color: 'black', opacity: 0.5}},
+ {from: 243, to: 28, color: {color: 'black', opacity: 0.5}},
+ {from: 243, to: 170, color: {color: 'black', opacity: 0.5}},
+ {from: 243, to: 18, color: {color: 'black', opacity: 0.5}},
+ {from: 243, to: 137, color: {color: 'black', opacity: 0.5}},
+ {from: 243, to: 111, color: {color: 'black', opacity: 0.5}},
+ {from: 243, to: 48, color: {color: 'black', opacity: 0.5}},
+ {from: 243, to: 136, color: {color: 'black', opacity: 0.5}},
+ {from: 243, to: 36, color: {color: 'black', opacity: 0.5}},
+ {from: 243, to: 30, color: {color: 'black', opacity: 0.5}},
+ {from: 244, to: 65, color: {color: 'black', opacity: 0.5}},
+ {from: 244, to: 91, color: {color: 'black', opacity: 0.5}},
+ {from: 244, to: 86, color: {color: 'black', opacity: 0.5}},
+ {from: 244, to: 183, color: {color: 'black', opacity: 0.5}},
+ {from: 244, to: 98, color: {color: 'black', opacity: 0.5}},
+ {from: 244, to: 28, color: {color: 'black', opacity: 0.5}},
+ {from: 244, to: 32, color: {color: 'black', opacity: 0.5}},
+ {from: 244, to: 77, color: {color: 'black', opacity: 0.5}},
+ {from: 244, to: 124, color: {color: 'black', opacity: 0.5}},
+ {from: 244, to: 72, color: {color: 'black', opacity: 0.5}},
+ {from: 245, to: 65, color: {color: 'black', opacity: 0.5}},
+ {from: 245, to: 11, color: {color: 'black', opacity: 0.5}},
+ {from: 245, to: 159, color: {color: 'black', opacity: 0.5}},
+ {from: 245, to: 64, color: {color: 'black', opacity: 0.5}},
+ {from: 245, to: 28, color: {color: 'black', opacity: 0.5}},
+ {from: 245, to: 179, color: {color: 'black', opacity: 0.5}},
+ {from: 245, to: 117, color: {color: 'black', opacity: 0.5}},
+ {from: 245, to: 15, color: {color: 'black', opacity: 0.5}},
+ {from: 245, to: 2, color: {color: 'black', opacity: 0.5}},
+ {from: 245, to: 116, color: {color: 'black', opacity: 0.5}},
+ {from: 246, to: 68, color: {color: 'black', opacity: 0.5}},
+ {from: 246, to: 176, color: {color: 'black', opacity: 0.5}},
+ {from: 246, to: 48, color: {color: 'black', opacity: 0.5}},
+ {from: 246, to: 95, color: {color: 'black', opacity: 0.5}},
+ {from: 246, to: 27, color: {color: 'black', opacity: 0.5}},
+ {from: 246, to: 79, color: {color: 'black', opacity: 0.5}},
+ {from: 246, to: 87, color: {color: 'black', opacity: 0.5}},
+ {from: 246, to: 119, color: {color: 'black', opacity: 0.5}},
+ {from: 246, to: 180, color: {color: 'black', opacity: 0.5}},
+ {from: 246, to: 148, color: {color: 'black', opacity: 0.5}},
+ {from: 247, to: 82, color: {color: 'black', opacity: 0.5}},
+ {from: 247, to: 106, color: {color: 'black', opacity: 0.5}},
+ {from: 247, to: 197, color: {color: 'black', opacity: 0.5}},
+ {from: 247, to: 156, color: {color: 'black', opacity: 0.5}},
+ {from: 247, to: 62, color: {color: 'black', opacity: 0.5}},
+ {from: 247, to: 25, color: {color: 'black', opacity: 0.5}},
+ {from: 247, to: 3, color: {color: 'black', opacity: 0.5}},
+ {from: 247, to: 9, color: {color: 'black', opacity: 0.5}},
+ {from: 247, to: 14, color: {color: 'black', opacity: 0.5}},
+ {from: 247, to: 24, color: {color: 'black', opacity: 0.5}},
+ {from: 248, to: 132, color: {color: 'black', opacity: 0.5}},
+ {from: 248, to: 130, color: {color: 'black', opacity: 0.5}},
+ {from: 248, to: 133, color: {color: 'black', opacity: 0.5}},
+ {from: 248, to: 188, color: {color: 'black', opacity: 0.5}},
+ {from: 248, to: 38, color: {color: 'black', opacity: 0.5}},
+ {from: 248, to: 146, color: {color: 'black', opacity: 0.5}},
+ {from: 248, to: 159, color: {color: 'black', opacity: 0.5}},
+ {from: 248, to: 99, color: {color: 'black', opacity: 0.5}},
+ {from: 248, to: 38, color: {color: 'black', opacity: 0.5}},
+ {from: 248, to: 79, color: {color: 'black', opacity: 0.5}},
+ {from: 249, to: 48, color: {color: 'black', opacity: 0.5}},
+ {from: 249, to: 29, color: {color: 'black', opacity: 0.5}},
+ {from: 249, to: 69, color: {color: 'black', opacity: 0.5}},
+ {from: 249, to: 167, color: {color: 'black', opacity: 0.5}},
+ {from: 249, to: 171, color: {color: 'black', opacity: 0.5}},
+ {from: 249, to: 43, color: {color: 'black', opacity: 0.5}},
+ {from: 249, to: 150, color: {color: 'black', opacity: 0.5}},
+ {from: 249, to: 199, color: {color: 'black', opacity: 0.5}},
+ {from: 249, to: 195, color: {color: 'black', opacity: 0.5}},
+ {from: 249, to: 186, color: {color: 'black', opacity: 0.5}},
+ ];
+
+ const savedPositions = localStorage.getItem('positions');
+
+ nodes.forEach((node) => {
+ if (node.shape === 'circle') {
+ this.numberOfEffects += 1;
+ } else {
+ this.numberOfProteinGroups += 1;
+ }
+ });
+
+ if (savedPositions) {
+ const nodePositions = JSON.parse(savedPositions);
+ nodes.forEach((node) => {
+ const nodePosition = nodePositions[node.id];
+ if (nodePosition) {
+ (node as any).x = nodePosition.x;
+ (node as any).y = nodePosition.y;
+ }
+ });
+ }
+
+
+
+ this.numberOfInteractions = edges.length;
+
+ const container = this.networkEl.nativeElement;
+ const data = {nodes, edges};
+ const options = {
+ layout: {
+ improvedLayout: false,
+ },
+ physics: {
+ stabilization: {
+ enabled: false,
+ },
+ },
+ };
+
+ this.network = new Network(container, data, options);
+ this.network.on('click', (properties) => {
+ const id: Array<string> = properties.nodes;
+ // TODO use groupID
+ console.log(id);
+ if (id.length > 0) {
+ console.log('clicked node:', id);
+ this.openSummary(id[0]);
+ }
+ });
+
+
+ if (!savedPositions) {
+ this.network.on('stabilizationIterationsDone', () => {
+ localStorage.setItem('positions', JSON.stringify(this.network.getPositions()));
+ });
+ this.network.stabilize();
+ }
+ }
+
+
}
diff --git a/src/styles.scss b/src/styles.scss
index 86b886c927ba9148a0895f2cc3548090e7dc6454..c62891615f3fef14816bf0b7e667d7ebff1630d9 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -69,11 +69,22 @@ div.content.network {
height: calc(100vh - 90px);
}
-img.network {
- height: calc(100vh - 250px);
- margin: 10px;
+div.card.network {
+ width: 100%;
+ height: calc(100vh - 100px);
+}
+
+div.network {
+ height: calc(100vh - 240px);
}
+div.center {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+
div.content.explorer {
margin-left: 20px;
margin-right: 20px;