diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index 04f20ef31a2b64cfe26155dc7ba98f96bc75260f..a65196b7089f59f7717194d6c29b939c42ab7738 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -48,23 +48,23 @@
</header>
<div class="card-content">
<div class="content">
- <nav class="level">
+ <nav class="level" *ngIf="proteinData">
<div class="level-item has-text-centered">
<div>
<p class="heading">Effects</p>
- <p class="title"> {{ numberOfEffects }}</p>
+ <p class="title"> {{ proteinData.effects.length }}</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Protein Groups</p>
- <p class="title">{{ numberOfProteinGroups }}</p>
+ <p class="title">{{ proteinData.proteinGroups.length }}</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Interactions</p>
- <p class="title">{{ numberOfInteractions }}</p>
+ <p class="title">{{ proteinData.edges.length }}</p>
</div>
</div>
</nav>
@@ -102,10 +102,14 @@
<div class="card-content">
<div class="content">
<p><b>Baits</b></p>
- <label class="checkbox" *ngFor="let baitName of baitNames">
- <input type="checkbox" class="checkbox">
- {{ baitName }}
- </label>
+ <div class="bait-frame">
+ <div *ngFor="let bait of baitProteins">
+ <label class="checkbox">
+ <input type="checkbox" class="checkbox" [ngModel]="bait.checked" (ngModelChange)="bait.checked = $event; filterNodes()">
+ Bait {{ bait.data.name }}
+ </label>
+ </div>
+ </div>
</div>
</div>
<footer class="card-footer">
diff --git a/src/app/pages/explorer-page/explorer-page.component.scss b/src/app/pages/explorer-page/explorer-page.component.scss
index 230c9db23bc69c20eda1da9a21c0b05c93ebbbdb..378457d713ef9525321187bcf190f3f6cfe27333 100644
--- a/src/app/pages/explorer-page/explorer-page.component.scss
+++ b/src/app/pages/explorer-page/explorer-page.component.scss
@@ -7,3 +7,8 @@
.card-block{
height: 100%;
}
+
+.bait-frame {
+ height: 300px;
+ overflow: scroll;
+}
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index 814ca57730befd38450de0e6cdee8fbcffc9a65c..b7b63484ab7c7c13bc1f6c57702058d0228ce8aa 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -1,6 +1,8 @@
import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
-import {Network, Edge, Node} from 'vis-network';
+import {Effect, ProteinNetwork} from '../protein-network';
+
+declare var vis: any;
@Component({
selector: 'app-explorer-page',
@@ -17,11 +19,14 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
public proteinACs: Array<string> = [];
public baitNames: Array<string> = [];
- public numberOfInteractions = 0;
- public numberOfEffects = 0;
- public numberOfProteinGroups = 0;
+ public baitProteins: Array<{ checked: boolean; data: Effect }> = [];
+
+ public proteinData: ProteinNetwork;
- private network: Network;
+ private network: any;
+ private nodeData: { nodes: any, edges: any } = {nodes: null, edges: null};
+
+ private seed = 1; // TODO: Remove this
@ViewChild('network', {static: false}) networkEl: ElementRef;
@@ -65,12 +70,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
ngOnInit() {
}
- ngAfterViewInit() {
- console.log(this.network);
- if (this.network) {
- return;
- } else {
- this.createNetwork();
+ async ngAfterViewInit() {
+ if (!this.network) {
+ await this.createNetwork();
}
}
@@ -96,817 +98,35 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
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;
- }
- });
+ private async createNetwork() {
+ const {proteinGroups, effects, edges: proteinEdges} = await this.loadNetwork();
+ this.proteinData = new ProteinNetwork(proteinGroups, effects, proteinEdges);
+ this.proteinData.loadPositions();
+ this.proteinData.linkNodes();
- 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;
- }
+ // Populate baits
+ this.proteinData.effects.forEach((effect) => {
+ this.baitProteins.push({
+ checked: false,
+ data: effect,
});
- }
+ });
- this.numberOfInteractions = edges.length;
+ const {nodes, edges} = this.mapDataToNodes(this.proteinData);
+
+ console.log(nodes, edges);
+
+ this.nodeData.nodes = new vis.DataSet(nodes);
+ this.nodeData.edges = new vis.DataSet(edges);
const container = this.networkEl.nativeElement;
- const data = {nodes, edges};
const options = {
layout: {
improvedLayout: false,
},
+ edges: {
+ smooth: false,
+ },
physics: {
stabilization: {
enabled: false,
@@ -914,20 +134,18 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
},
};
- this.network = new Network(container, data, options);
+ this.network = new vis.Network(container, this.nodeData, 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]);
- } else {
- this.closeSummary();
}
});
-
- if (!savedPositions) {
+ if (!localStorage.getItem('positions')) {
this.network.on('stabilizationIterationsDone', () => {
localStorage.setItem('positions', JSON.stringify(this.network.getPositions()));
});
@@ -940,4 +158,154 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
}
+ public async filterNodes() {
+ const visibleIds = new Set<string>(this.nodeData.nodes.getIds());
+
+ const removeIds = new Set<string>();
+ const addNodes = new Map<string, Node>();
+
+ const showAll = !this.baitProteins.find((eff) => eff.checked);
+ console.log(showAll);
+
+ const connectedProteinGroupIds = new Set<number>();
+ this.baitProteins.forEach((bait) => {
+ const nodeId = `eff${bait.data.id}`;
+ const found = visibleIds.has(nodeId);
+ if ((bait.checked || showAll) && !found) {
+ const node = this.mapEffectToNode(bait.data);
+ // this.nodeData.nodes.add(node);
+ addNodes.set(node.id, node);
+ } else if ((!showAll && !bait.checked) && found) {
+ // this.nodeData.nodes.remove(nodeId);
+ removeIds.add(nodeId);
+ }
+ if (bait.checked || showAll) {
+ bait.data.proteinGroups.forEach((pg) => {
+ connectedProteinGroupIds.add(pg.id);
+ });
+ }
+ });
+ for (const proteinGroup of this.proteinData.proteinGroups) {
+ const nodeId = `pg${proteinGroup.id}`;
+ const contains = connectedProteinGroupIds.has(proteinGroup.id);
+ const found = visibleIds.has(nodeId);
+ if (contains && !found) {
+ const node = this.mapProteinGroupToNode(proteinGroup);
+ // this.nodeData.nodes.add(node);
+ addNodes.set(node.id, node);
+ } else if (!contains && found) {
+ // this.nodeData.nodes.remove(nodeId);
+ removeIds.add(nodeId);
+ }
+ }
+
+ this.nodeData.nodes.remove(Array.from(removeIds.values()));
+ this.nodeData.nodes.add(Array.from(addNodes.values()));
+ }
+
+ private async loadNetwork(): Promise<any> {
+ // TODO: Load from backend instead of generating random stuff here...
+
+ const proteinGroupCount = 10000;
+ const effectCount = 50;
+ const edgeCount = 2000;
+
+ const proteinGroups = [];
+ const effects = [];
+ const edges = [];
+
+ for (let i = 0; i < effectCount; i++) {
+ effects.push({
+ id: i,
+ name: `eff${i}`,
+ });
+ }
+
+ const proteinGroupIds = [];
+ for (let i = 0; i < edgeCount; i++) {
+ const proteinGroupId = Math.floor(this.random() * proteinGroupCount);
+ const effectId = Math.floor(this.random() * effects.length);
+ let found = false;
+ for (const edge of edges) {
+ if (edge.proteinGroupId === proteinGroupId && edge.effectId === effectId) {
+ found = true;
+ break;
+ }
+ }
+ if (!found) {
+ edges.push({
+ proteinGroupId, effectId
+ });
+ if (proteinGroupIds.indexOf(proteinGroupId) === -1) {
+ proteinGroupIds.push(proteinGroupId);
+ }
+ }
+ }
+
+ for (const proteinGroupId of proteinGroupIds) {
+ proteinGroups.push({
+ id: proteinGroupId,
+ name: `pg${proteinGroupId}`,
+ });
+ }
+
+ return {
+ proteinGroups,
+ effects,
+ edges
+ };
+ }
+
+ private mapProteinGroupToNode(proteinGroup: any): any {
+ return {
+ id: `pg${proteinGroup.id}`,
+ label: `pg${proteinGroup.id}`,
+ size: 5, color: '#ADADAD', shape: 'square', shadow: true,
+ x: proteinGroup.x,
+ y: proteinGroup.y
+ };
+ }
+
+ private mapEffectToNode(effect: any): any {
+ return {
+ id: `eff${effect.id}`,
+ label: `eff${effect.id}`,
+ size: 10, color: '#118AB2', shape: 'circle', shadow: true,
+ x: effect.x,
+ y: effect.y
+ };
+ }
+
+ private mapEdge(edge: any): any {
+ return {from: `pg${edge.proteinGroupId}`, to: `eff${edge.effectId}`};
+ }
+
+ private mapDataToNodes(data: ProteinNetwork): { nodes: any[], edges: any[] } {
+ const nodes = [];
+ const edges = [];
+
+ for (const proteinGroup of data.proteinGroups) {
+ nodes.push(this.mapProteinGroupToNode(proteinGroup));
+ }
+
+ for (const effect of data.effects) {
+ nodes.push(this.mapEffectToNode(effect));
+ }
+
+ for (const edge of data.edges) {
+ edges.push(this.mapEdge(edge));
+ }
+
+ return {
+ nodes,
+ edges,
+ };
+ }
+
+ // TODO: Remove this:
+ private random() {
+ const x = Math.sin(this.seed++) * 10000;
+ return x - Math.floor(x);
+ }
+
}
diff --git a/src/app/pages/protein-network.ts b/src/app/pages/protein-network.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2398b9f2d05209a3924756680a48802dc04738e8
--- /dev/null
+++ b/src/app/pages/protein-network.ts
@@ -0,0 +1,74 @@
+export interface ProteinGroup {
+ id: number;
+ name: string;
+ effects?: Effect[];
+ x?: number;
+ y?: number;
+}
+
+export interface Effect {
+ id: number;
+ name: string;
+ proteinGroups?: ProteinGroup[];
+ x?: number;
+ y?: number;
+}
+
+export interface Edge {
+ proteinGroupId: number;
+ effectId: number;
+}
+
+export class ProteinNetwork {
+
+ constructor(public proteinGroups: ProteinGroup[], public effects: Effect[], public edges: Edge[]) {
+ }
+
+ public loadPositions() {
+ const savedPositions = localStorage.getItem('positions');
+ if (!savedPositions) {
+ return;
+ }
+ const nodePositions = JSON.parse(savedPositions);
+ this.proteinGroups.forEach((node) => {
+ const nodePosition = nodePositions[`pg${node.id}`];
+ if (nodePosition) {
+ node.x = nodePosition.x;
+ node.y = nodePosition.y;
+ }
+ });
+ this.effects.forEach((node) => {
+ const nodePosition = nodePositions[`eff${node.id}`];
+ if (nodePosition) {
+ node.x = nodePosition.x;
+ node.y = nodePosition.y;
+ }
+ });
+ }
+
+ public getProteinGroup(id: number): ProteinGroup {
+ return this.proteinGroups.find((pg) => pg.id === id);
+ }
+
+ public getEffect(id: number): Effect {
+ return this.effects.find((eff) => eff.id === id);
+ }
+
+ public linkNodes() {
+ this.proteinGroups.forEach((pg) => {
+ pg.effects = [];
+ });
+ this.effects.forEach((eff) => {
+ eff.proteinGroups = [];
+ });
+ this.edges.forEach((edge) => {
+ const proteinGroup = this.getProteinGroup(edge.proteinGroupId);
+ const effect = this.getEffect(edge.effectId);
+ if (proteinGroup && effect) {
+ proteinGroup.effects.push(effect);
+ effect.proteinGroups.push(proteinGroup);
+ }
+ });
+ }
+
+}
diff --git a/src/index.html b/src/index.html
index 82b85d025b288c79124f834415b62d664a6bc593..df4348ce5e8685a8abc46c4dad87ab89f9e47184 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/ico" href="../../assets/logo.png">
<script src="https://kit.fontawesome.com/3ad4fe992f.js" crossorigin="anonymous"></script>
+ <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
</head>
<body>
<app-root></app-root>