diff --git a/README.md b/README.md
index b226da77510cc52bfb6db1e20d297a3ff754c196..140237d7426a04605b0ac3b81475ba387cde52f8 100644
--- a/README.md
+++ b/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`
diff --git a/app-test/icons.html b/app-test/icons.html
index 6eeef83c74fad792c36a0e8371215871be95cd0f..9518ca1496078c9d77c8e7629c13e258df579145 100644
--- a/app-test/icons.html
+++ b/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');
diff --git a/app-test/legend_image.html b/app-test/legend_image.html
index ff3a2ea7612aabc96e1a17c9aaa7cd515214da1c..58f6f1e7566fddbb914d5091099b2131fd9644eb 100644
--- a/app-test/legend_image.html
+++ b/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>-->
diff --git a/src/app/config.ts b/src/app/config.ts
index fd1b4a943e7561e82e2012aaeaf4f6f621e90f08..72b4b9c9d55f58ab8add1ece38b0ae83899ebaec 100644
--- a/src/app/config.ts
+++ b/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 = {
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index 3cfb48cfb4e7baaec8d110c32dccf7f2bbc390c8..2ce7b68724c043a00527fa6a571a82172ec601e1 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/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
diff --git a/src/app/services/omnipath-controller/omnipath-controller.service.ts b/src/app/services/omnipath-controller/omnipath-controller.service.ts
index 6be99b63fd0474dae2327e3b91d90da11aaa5283..2b972edae8dab46cb6335917730a6cdef1149a9a 100644
--- a/src/app/services/omnipath-controller/omnipath-controller.service.ts
+++ b/src/app/services/omnipath-controller/omnipath-controller.service.ts
@@ -1,6 +1,5 @@
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();
}
}
diff --git a/src/index.html b/src/index.html
index 90aec8ff8fb0ebda4f85b7a9b95ba3a1d4efad79..b1211c10e4100a16e293b281518a106899cc86c8 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,20 +1,94 @@
-
-
-<!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>