Implement filtering

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">

src/app/pages/explorer-page/explorer-page.component.scss

@@ -7,3 +7,8 @@
 .card-block{
   height: 100%;
 }
+
+.bait-frame {
+  height: 300px;
+  overflow: scroll;
+}

src/app/pages/protein-network.ts

+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);
+      }
+    });
+  }
+
+}

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>