getting interactions from omnipath: get query implemented

README.md

@@ -25,3 +25,8 @@ Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protrac
 ## Further help
 
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+
+
+## Create exportable js and css
+
+`npm run build:netex`

app-test/icons.html

@@ -42,7 +42,7 @@
   "legendPos": "right",
   "nodeGroups": {"default": {"color": "grey", "name": "Default Group", "shape": "triangle", "image": "https://i.ibb.co/vmLV1tB/dna.png"}, "pug-group": {"color": "grey", "name": "Pug Group", "shape": "triangle", "image": "https://static.raymondcamden.com/images/2016/11/pug.png"} },
   "edgeGroups":{"default": {"color": "grey", "name": "Default Edge Group"}, "custom": {"color": "red", "name": "Custom Edge Group"}}
-  }' onload="init1()" style="height: 100vh"></network-expander>
+  }' style="height: 100vh"></network-expander>
 </div>
 
 <!--
@@ -53,9 +53,6 @@
 -->
 
 <script>
-  function init1() {
-    document.getElementsByClassName('my-legend-1')[0].onclick = function() {this.remove()};
-  }
 
   function changeConfig() {
     const netexp = document.getElementById('netexp1');

app-test/legend_image.html

@@ -25,8 +25,8 @@
 <input type="checkbox" onclick=changeConfigStr('{"showSelection":'+this.checked+'}') checked /> Show Selection<br>
 <input type="checkbox" onclick=changeConfigStr('{"showFooter":'+this.checked+'}') checked /> Show Footer<br>
 <input type="checkbox" onclick=changeConfigStr('{"showLegend":'+this.checked+'}') checked /> Show Legend<br>
-<button onclick=changeConfigStr('{"legendPos":'+'"left"'+'}') > Legend to Left </button> <br>
-<button onclick=changeConfigStr('{"legendPos":'+'"right"'+'}') > Legend to Right </button> <br>
+<button onclick=changeConfigStr('{"legendPos":"left"}') > Legend to Left </button> <br>
+<button onclick=changeConfigStr('{"legendPos":"right"}') > Legend to Right </button> <br>
 
 <!--<input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') checked /> Show SimpleAnalysis<br>-->
 

src/app/config.ts

@@ -38,7 +38,7 @@ export interface IConfig {
   showLegendEdges: boolean;
   nodeGroups: { [key: string]: NodeGroup };
   edgeGroups: { [key: string]: EdgeGroup };
-
+  interactions?: 'omnipath';
 }
 
 export const defaultConfig: IConfig = {

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

@@ -15,6 +15,7 @@ import {
 import {ProteinNetwork} from '../../main-network';
 import {HttpClient} from '@angular/common/http';
 import {AnalysisService} from '../../services/analysis/analysis.service';
+import {OmnipathControllerService} from '../../services/omnipath-controller/omnipath-controller.service';
 import html2canvas from 'html2canvas';
 import {NetworkSettings} from '../../network-settings';
 import {defaultConfig, EdgeGroup, IConfig, NodeGroup} from '../../config';
@@ -48,6 +49,10 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
         this.myConfig[key] = {...this.myConfig[key], ...configObj[key]};
         continue;
       }
+      if (key === 'interactions') {
+        this.getInteractions();
+        continue;
+      }
       this.myConfig[key] = configObj[key];
     }
   }
@@ -114,7 +119,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
 
   @ViewChild('network', {static: false}) networkEl: ElementRef;
 
-  constructor(private http: HttpClient, public analysis: AnalysisService) {
+  constructor(public omnipath: OmnipathControllerService, public analysis: AnalysisService) {
 
     this.showDetails = false;
 
@@ -164,6 +169,12 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
     }
   }
 
+  async getInteractions() {
+    const names = this.nodeData.nodes.map( (node) => node.label);
+    const interactions = await this.omnipath.getInteractions(names);
+    console.log(interactions)
+  }
+
   private getNetwork() {
     const network = JSON.parse(this.networkJSON);
 
@@ -208,7 +219,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
     this.selectedWrapper = null;
     this.getNetwork();
     this.proteinData = new ProteinNetwork(this.proteins, this.edges);
-    console.log(this.proteinData)
     this.proteinData.linkNodes();
 
     // Populate baits

src/app/services/omnipath-controller/omnipath-controller.service.ts

 import { Injectable } from '@angular/core';
 import {HttpClient, HttpParams} from '@angular/common/http';
-import {environment} from '../../../environments/environment';
 
 @Injectable({
   providedIn: 'root'
@@ -14,14 +13,13 @@ export class OmnipathControllerService {
   }
 
   public async getInteractions(genes): Promise<any> {
-    const genesStringified = JSON.stringify(genes);
+    const genesString = genes.join(',');
     const params = new HttpParams()
       .set('genesymbols', '1')  // return also gene symbols
       .set('fields', 'sources,references') // returned additional information
-      .set('sources', JSON.stringify(genesStringified))
-      .set('targets', JSON.stringify(genesStringified)) // all interactions between all genes
+      .set('sources', genesString)
+      .set('targets', genesString) // all interactions between all genes
       .set('source_target', 'AND'); // for interactions which source in sources 'AND'/ 'OR' target in targets
-
     return this.http.get<any>(`${this.omnipathdb}interactions/`, {params}).toPromise();
   }
 }

src/index.html

-
-
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <title>Title</title>
+  <meta charset="utf-8">
+  <title>Network Expander</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/ico" href="src/assets/covex_logo_small.png">
+  <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
+
+
+<!--  <link rel="stylesheet" href="netex-build/styles.css">-->
+<!--  <script type="text/javascript" src="netex-build/netex.js"></script>-->
+
 </head>
 <body>
 
-here
-<div id="example">
+<input type="checkbox" onclick=changeConfigStr('{"showOverview":'+this.checked+'}') checked /> Show overview<br>
+<input type="checkbox" onclick=changeConfigStr('{"showQuery":'+this.checked+'}') /> Show query<br>
+<input type="checkbox" onclick=changeConfigStr('{"showLeftSidebar":'+this.checked+'}') checked /> Show sidebar<br>
+<input type="checkbox" onclick=changeConfigStr('{"showItemSelector":'+this.checked+'}') checked /> Show ItemSelector<br>
+<input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') /> Show SimpleAnalysis<br>
+<input type="checkbox" onclick=changeConfigStr('{"showAdvAnalysis":'+this.checked+'}') checked /> Show Advanced Analysis<br>
+<input type="checkbox" onclick=changeConfigStr('{"showTasks":'+this.checked+'}') checked /> Show Tasks<br>
+<input type="checkbox" onclick=changeConfigStr('{"showSelection":'+this.checked+'}') checked /> Show Selection<br>
+<input type="checkbox" onclick=changeConfigStr('{"showFooter":'+this.checked+'}') checked /> Show Footer<br>
+<input type="checkbox" onclick=changeConfigStr('{"showLegend":'+this.checked+'}') checked /> Show Legend<br>
+<button onclick=changeConfigStr('{"legendPos":"left"}') > Legend to Left </button> <br>
+<button onclick=changeConfigStr('{"legendPos":"right"}') > Legend to Right </button> <br>
+<button onclick=changeConfigStr('{"interactions":"omnipath"}') >Get Omnipath Interactions </button> <br>
+
+<!--<input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') checked /> Show SimpleAnalysis<br>-->
+
+<br>
+
+<button onclick="setNetwork('netexp1')">Add nodes</button>
 
+
+<div>
+  <network-expander id="netexp1"
+                    config='{
+  "showQuery": false,
+  "legendPos": "right",
+  "nodeGroups": {"genes": {"type": "gene", "color": "blue", "name": "Genes", "shape": "round"} },
+  "edgeGroups":{"default": {"color": "grey", "name": "Default Edge Group"}, "custom": {"color": "red", "name": "Custom Edge Group"} },
+  "lookupInteractions": true
+  }'
+                    style="height: 100vh"></network-expander>
 </div>
 
-</body>
-</html>
 
+<script>
+
+  function changeConfig() {
+    const netexp = document.getElementById('netexp1');
+    netexp.setAttribute('config', '{"showLeftSidebar": false}');
+  }
 
+  function changeConfigStr(config) {
+    console.log(config);
+    const netexp = document.getElementById('netexp1');
+    netexp.setAttribute('config', config);
+  }
 
+  function setNetwork(nw) {
+    const netexp = document.getElementById(nw);
+
+    netexp.setAttribute('network', JSON.stringify({
+      nodes: [
+        {
+          name: "PTEN",
+          id: "1",
+          access: "A",
+          group: "genes"
+        },
+        {
+          name: "TP53",
+          id: "2",
+          access: "B",
+          group: "genes"
+        }
+      ],
+      edges: [
+        {
+          from: '1',
+          to: '2',
+        }
+      ]
+    }));
+  }
+
+</script>
+</body>
+</html>