From e29b4ee80c55946415472aa0501ae3e2b31b60f4 Mon Sep 17 00:00:00 2001
From: Maiykol <hartung.michael@outlook.com>
Date: Wed, 12 May 2021 13:02:23 +0200
Subject: [PATCH] use backend running of alfred for development
---
.../analysis-panel.component.ts | 22 +++++-----
.../info-tile/info-tile.component.ts | 2 +-
.../add-expressed-proteins.component.ts | 4 +-
.../custom-proteins.component.ts | 6 +--
src/app/interfaces.ts | 31 +++++++++++---
src/app/network-settings.ts | 42 +++++++++----------
.../explorer-page.component.html | 4 +-
.../explorer-page/explorer-page.component.ts | 16 +++++--
src/app/services/analysis/analysis.service.ts | 6 +--
src/environments/environment.ts | 2 +-
src/index.html | 13 ++++++
11 files changed, 94 insertions(+), 54 deletions(-)
diff --git a/src/app/components/analysis-panel/analysis-panel.component.ts b/src/app/components/analysis-panel/analysis-panel.component.ts
index 43f231c4..c9706787 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.ts
+++ b/src/app/components/analysis-panel/analysis-panel.component.ts
@@ -18,7 +18,7 @@ import {
Drug,
Wrapper,
WrapperType,
- getWrapperFromProtein,
+ getWrapperFromNode,
getWrapperFromDrug,
getNodeIdsFromPDI,
getNodeIdsFromPPI,
@@ -359,7 +359,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
if (nodeId.startsWith('DB')) {
return 'drug';
}
- return 'protein';
+ return 'gene';
}
public createNetwork(result: any): { edges: any[], nodes: any[] } {
@@ -380,7 +380,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
for (const node of network.nodes) {
if (nodeTypes[node] === 'protein') {
this.proteins.push(details[node]);
- wrappers[node] = getWrapperFromProtein(details[node]);
+ wrappers[node] = getWrapperFromNode(details[node]);
} else if (nodeTypes[node] === 'drug') {
wrappers[node] = getWrapperFromDrug(details[node]);
}
@@ -404,7 +404,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
let drugInTrial;*/
/*if (nodeType === 'protein') {
const protein = details as Node;
- // wrapper = getWrapperFromProtein(protein);
+ // wrapper = getWrapperFromNode(protein);
nodeLabel = protein.name;
if (!protein.name) {
nodeLabel = protein.id;
@@ -421,7 +421,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
}
}*/
- const node = NetworkSettings.getNodeStyle('protein', isSeed, this.analysis.inSelection(details));
+ const node = NetworkSettings.getNodeStyle('gene', isSeed, this.analysis.inSelection(details));
node.id = details.id;
node.label = details.name;
node.nodeType = nodeType;
@@ -435,8 +435,8 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
let edgeColor;
if (type === 'protein-protein') {
edgeColor = {
- color: NetworkSettings.getColor('edgeHostVirus'),
- highlight: NetworkSettings.getColor('edgeHostVirusHighlight'),
+ color: NetworkSettings.getColor('edgeGeneGene'),
+ highlight: NetworkSettings.getColor('edgeGeneGeneHighlight'),
};
const {from, to} = getNodeIdsFromPPI(edge, wrappers);
return {
@@ -536,13 +536,13 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
const addItems = [];
const removeItems = [];
for (const i of this.tableSelectedProteins) {
- const wrapper = getWrapperFromProtein(i);
+ const wrapper = getWrapperFromNode(i);
if (oldSelection.indexOf(i) === -1) {
addItems.push(wrapper);
}
}
for (const i of oldSelection) {
- const wrapper = getWrapperFromProtein(i);
+ const wrapper = getWrapperFromNode(i);
if (this.tableSelectedProteins.indexOf(i) === -1) {
removeItems.push(wrapper);
}
@@ -564,7 +564,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
this.selectedTissue = null;
const updatedNodes = [];
for (const protein of this.proteins) {
- const item = getWrapperFromProtein(protein);
+ const item = getWrapperFromNode(protein);
const node = this.nodeData.nodes.get(item.nodeId);
if (!node) {
continue;
@@ -596,7 +596,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
const updatedNodes = [];
const maxExpr = Math.max(...levels.map(lvl => lvl.level));
for (const lvl of levels) {
- const item = getWrapperFromProtein(lvl.protein);
+ const item = getWrapperFromNode(lvl.protein);
const node = this.nodeData.nodes.get(item.nodeId);
if (!node) {
continue;
diff --git a/src/app/components/info-tile/info-tile.component.ts b/src/app/components/info-tile/info-tile.component.ts
index 53d7c3c8..52401682 100644
--- a/src/app/components/info-tile/info-tile.component.ts
+++ b/src/app/components/info-tile/info-tile.component.ts
@@ -17,7 +17,7 @@ export class InfoTileComponent implements OnInit {
ngOnInit(): void {
}
-
+
public beautify(url: string): string {
if (url.startsWith('https://')) {
url = url.substr('https://'.length);
diff --git a/src/app/dialogs/add-expressed-proteins/add-expressed-proteins.component.ts b/src/app/dialogs/add-expressed-proteins/add-expressed-proteins.component.ts
index 2de915ea..43799475 100644
--- a/src/app/dialogs/add-expressed-proteins/add-expressed-proteins.component.ts
+++ b/src/app/dialogs/add-expressed-proteins/add-expressed-proteins.component.ts
@@ -1,6 +1,6 @@
import {Component, EventEmitter, Input, OnChanges, Output, SimpleChanges} from '@angular/core';
import {AnalysisService} from '../../services/analysis/analysis.service';
-import {getWrapperFromProtein, Node, Tissue} from '../../interfaces';
+import {getWrapperFromNode, Node, Tissue} from '../../interfaces';
import {environment} from '../../../environments/environment';
import {HttpClient} from '@angular/common/http';
@@ -40,7 +40,7 @@ export class AddExpressedProteinsComponent implements OnChanges {
{tissueId: this.selectedTissue.id, threshold: this.threshold}).toPromise();
const items = [];
for (const detail of result) {
- items.push(getWrapperFromProtein(detail));
+ items.push(getWrapperFromNode(detail));
}
this.addedCount = this.analysis.addItems(items);
this.loading = false;
diff --git a/src/app/dialogs/custom-proteins/custom-proteins.component.ts b/src/app/dialogs/custom-proteins/custom-proteins.component.ts
index 8552cd7a..3e94fc32 100644
--- a/src/app/dialogs/custom-proteins/custom-proteins.component.ts
+++ b/src/app/dialogs/custom-proteins/custom-proteins.component.ts
@@ -1,7 +1,7 @@
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {environment} from '../../../environments/environment';
-import {getWrapperFromProtein, Node, Wrapper} from '../../interfaces';
+import {getWrapperFromNode, Node, Wrapper} from '../../interfaces';
import {AnalysisService} from '../../services/analysis/analysis.service';
@Component({
@@ -53,7 +53,7 @@ export class CustomProteinsComponent implements OnInit {
const details = result.details;
const items = [];
for (const detail of details) {
- items.push(getWrapperFromProtein(detail));
+ items.push(getWrapperFromNode(detail));
}
this.itemsFound = items;
this.addedCount = this.analysis.addItems(items);
@@ -74,7 +74,7 @@ export class CustomProteinsComponent implements OnInit {
const items = [];
for (const detail of details) {
proteinItems.push(detail as Node);
- items.push(getWrapperFromProtein(detail));
+ items.push(getWrapperFromNode(detail));
}
this.itemsFound = items;
// this.addedCount = this.analysis.addVisibleHostProteins(this.visibleNodes, proteinItems);
diff --git a/src/app/interfaces.ts b/src/app/interfaces.ts
index b473b85b..70113c66 100644
--- a/src/app/interfaces.ts
+++ b/src/app/interfaces.ts
@@ -90,15 +90,34 @@ export function getDrugBackendId(drug: Drug) {
return drug.drugId;
}
-export function getWrapperFromProtein(protein: Node): Wrapper {
+export function getGeneBackendId(gene: Node) {
+ /**
+ * Returns backend_id of Gene object
+ */
+ return gene.id.toString();
+}
+
+export function getGeneNodeId(gene: Node) {
+ /**
+ * Returns the network node id based on a given gene
+ */
+ return `${gene.id}`;
+}
+
+
+export function getWrapperFromNode(gene: Node): Wrapper {
+ /**
+ * Constructs wrapper interface for gene
+ */
return {
- backendId: getProteinBackendId(protein),
- nodeId: getProteinNodeId(protein),
- type: 'protein',
- data: protein,
+ backendId: getGeneBackendId(gene),
+ nodeId: getGeneNodeId(gene),
+ type: 'gene',
+ data: gene,
};
}
+
export function getWrapperFromDrug(drug: Drug): Wrapper {
return {
backendId: getDrugBackendId(drug),
@@ -108,7 +127,7 @@ export function getWrapperFromDrug(drug: Drug): Wrapper {
};
}
-export type WrapperType = 'protein' | 'drug';
+export type WrapperType = 'gene' | 'drug';
export interface Wrapper {
backendId: string;
diff --git a/src/app/network-settings.ts b/src/app/network-settings.ts
index 83a622c3..376d228d 100644
--- a/src/app/network-settings.ts
+++ b/src/app/network-settings.ts
@@ -5,7 +5,6 @@ export class NetworkSettings {
// Node color
private static hostColor = '#123456';
- private static virusColor = '#BE093C';
private static approvedDrugColor = '#48C774';
private static unapprovedDrugColor = '#F8981D';
private static nonSeedHostColor = '#3070B3';
@@ -19,6 +18,9 @@ export class NetworkSettings {
private static edgeHostVirusHighlightColor = '#686868';
private static edgeHostDrugColor = '#686868';
private static edgeHostDrugHighlightColor = '#686868';
+ private static edgeGeneGeneColor = '#686868';
+ private static edgeGeneGeneHighlightColor = '#686868';
+
// Border width
private static selectedBorderWidth = 3;
@@ -29,10 +31,8 @@ export class NetworkSettings {
// Node Font
private static hostFontSize = 20;
- private static virusFontSize = 50;
private static drugFontSize = 30;
private static hostFontColor = '#FFFFFF';
- private static virusFontColor = '#FFFFFF';
private static drugFontColor = '#FFFFFF';
private static drugInTrialFontColor = 'black';
@@ -70,17 +70,15 @@ export class NetworkSettings {
// Node size
private static hostSize = 20;
- private static virusSize = 30;
private static drugSize = 15;
// Node shape
private static hostShape = 'ellipse';
- private static virusShape = 'ellipse';
private static drugNotInTrialShape = 'box';
private static drugInTrialShape = 'triangle';
static getNodeSize(wrapperType: WrapperType) {
- if (wrapperType === 'protein') {
+ if (wrapperType === 'gene') {
return this.hostSize;
} else if (wrapperType === 'drug') {
return this.drugSize;
@@ -88,7 +86,7 @@ export class NetworkSettings {
}
static getNodeShape(wrapperType: WrapperType, drugInTrial?: boolean) {
- if (wrapperType === 'protein') {
+ if (wrapperType === 'gene') {
return this.hostShape;
} else if (wrapperType === 'drug') {
if (drugInTrial) {
@@ -121,10 +119,14 @@ export class NetworkSettings {
}
}
- static getColor(color: 'protein' | 'approvedDrug' | 'unapprovedDrug' | 'hostFont' | 'virusFont' | 'drugFont' |
- 'nonSeedHost' | 'nonSeedVirus' | 'selectedForAnalysis' | 'selectedForAnalysisText' |
- 'edgeHostVirus' | 'edgeHostVirusHighlight' | 'edgeHostDrug' | 'edgeHostDrugHighlight') {
- if (color === 'protein') {
+ static getColor(color: 'gene' | 'approvedDrug' | 'unapprovedDrug' | 'hostFont' | 'drugFont' |
+ 'nonSeedHost' | 'selectedForAnalysis' | 'selectedForAnalysisText' |
+ 'edgeHostDrug' | 'edgeHostDrugHighlight' | 'edgeGeneGene' | 'edgeGeneGeneHighlight')
+ /**
+ * Collection of all colors per use-case
+ */
+ {
+ if (color === 'gene') {
return this.hostColor;
} else if (color === 'approvedDrug') {
return this.approvedDrugColor;
@@ -132,27 +134,23 @@ export class NetworkSettings {
return this.unapprovedDrugColor;
} else if (color === 'hostFont') {
return this.hostFontColor;
- } else if (color === 'virusFont') {
- return this.virusFontColor;
} else if (color === 'drugFont') {
return this.drugFontColor;
} else if (color === 'nonSeedHost') {
return this.nonSeedHostColor;
- } else if (color === 'nonSeedVirus') {
- return this.nonSeedVirusColor;
- } else if (color === 'edgeHostVirus') {
- return this.edgeHostVirusColor;
} else if (color === 'edgeHostDrug') {
return this.edgeHostDrugColor;
- } else if (color === 'edgeHostVirusHighlight') {
- return this.edgeHostVirusHighlightColor;
} else if (color === 'edgeHostDrugHighlight') {
return this.edgeHostDrugHighlightColor;
+ } else if (color === 'edgeGeneGene') {
+ return this.edgeGeneGeneColor;
+ } else if (color === 'edgeGeneGeneHighlight') {
+ return this.edgeGeneGeneHighlightColor;
}
}
static getFont(wrapperType: WrapperType, drugInTrial?: boolean) {
- if (wrapperType === 'protein') {
+ if (wrapperType === 'gene') {
return {color: this.hostFontColor, size: this.hostFontSize};
} else if (wrapperType === 'drug') {
if (!drugInTrial) {
@@ -180,9 +178,9 @@ export class NetworkSettings {
nodeShape = NetworkSettings.getNodeShape(nodeType);
nodeSize = NetworkSettings.getNodeSize(nodeType);
nodeFont = NetworkSettings.getFont(nodeType);
- if (nodeType === 'protein') {
+ if (nodeType === 'gene') {
nodeColor = NetworkSettings.getColor(nodeType);
- nodeFont = NetworkSettings.getFont('protein');
+ nodeFont = NetworkSettings.getFont('gene');
if (!isSeed) {
nodeColor = NetworkSettings.getColor('nonSeedHost');
}
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index b4f06030..e5d7385c 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -185,13 +185,13 @@
<p class="card-header-title">
<span class="icon">
<i *ngIf="!selectedWrapper" class="fas fa-info" aria-hidden="true"></i>
- <i *ngIf="selectedWrapper && selectedWrapper.type === 'protein'" class="fas fa-dna" aria-hidden="true"></i>
+ <i *ngIf="selectedWrapper && selectedWrapper.type === 'gene'" class="fas fa-dna" aria-hidden="true"></i>
<i *ngIf="selectedWrapper && selectedWrapper.type === 'drug'" class="fas fa-capsules"
aria-hidden="true"></i>
</span>
<span *ngIf="!selectedWrapper">No item selected</span>
<span *ngIf="selectedWrapper">
- <span *ngIf="selectedWrapper.type === 'protein'">Host Protein</span>
+ <span *ngIf="selectedWrapper.type === 'gene'">Host Protein</span>
<span *ngIf="selectedWrapper.type === 'drug'">Drug</span>
</span>
</p>
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index 99a5776d..646e82fe 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -9,7 +9,7 @@ import {
NodeInteraction,
Node,
Wrapper,
- getWrapperFromProtein,
+ getWrapperFromNode,
Tissue
} from '../../interfaces';
import {ProteinNetwork} from '../../main-network';
@@ -66,6 +66,10 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
return;
}
+ console.log(network)
+
+ console.log( this.myConfig)
+
this.networkJSON = network;
this.createNetwork();
@@ -216,6 +220,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
public async openSummary(item: Wrapper, zoom: boolean) {
this.selectedWrapper = item;
+ console.log(this.selectedWrapper)
if (zoom) {
this.zoomToNode(item.nodeId);
}
@@ -234,6 +239,8 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
this.proteinData = new ProteinNetwork(this.proteins, this.edges);
this.proteinData.linkNodes();
+ console.log(this.proteinData)
+
const {nodes, edges} = this.mapDataToNodes(this.proteinData);
this.nodeData.nodes = new vis.DataSet(nodes);
this.nodeData.edges = new vis.DataSet(edges);
@@ -259,6 +266,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
if (nodeIds.length > 0) {
const nodeId = nodeIds[0];
const node = this.nodeData.nodes.get(nodeId);
+ console.log(node)
const wrapper = node.wrapper;
this.openSummary(wrapper, false);
} else {
@@ -283,7 +291,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
fillQueryItems(hostProteins: Node[]) {
this.queryItems = [];
hostProteins.forEach((protein) => {
- this.queryItems.push(getWrapperFromProtein(protein));
+ this.queryItems.push(getWrapperFromNode(protein));
});
this.currentViewNodes = this.nodeData.nodes;
@@ -315,6 +323,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
}
private mapCustomNode(customNode: Node): any {
+ const wrapper = getWrapperFromNode(customNode);
let group = customNode.group;
if (typeof group === 'undefined' || typeof this.myConfig.nodeGroups[group] === 'undefined') {
group = 'default';
@@ -331,6 +340,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
node.id = customNode.id;
node.x = customNode.x;
node.y = customNode.y;
+ node.wrapper = wrapper;
return node;
}
@@ -446,7 +456,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
// const updatedNodes = [];
// const maxExpr = Math.max(...levels.map(lvl => lvl.level));
// for (const lvl of levels) {
- // const item = getWrapperFromProtein(lvl.protein);
+ // const item = getWrapperFromNode(lvl.protein);
// const node = this.nodeData.nodes.get(item.nodeId);
// if (!node) {
// continue;
diff --git a/src/app/services/analysis/analysis.service.ts b/src/app/services/analysis/analysis.service.ts
index d5fd40dd..9db871bb 100644
--- a/src/app/services/analysis/analysis.service.ts
+++ b/src/app/services/analysis/analysis.service.ts
@@ -1,4 +1,4 @@
-import {Wrapper, Task, getWrapperFromProtein, Node, Dataset, Tissue} from '../../interfaces';
+import {Wrapper, Task, getWrapperFromNode, Node, Dataset, Tissue} from '../../interfaces';
import {Subject} from 'rxjs';
import {HttpClient} from '@angular/common/http';
import {environment} from '../../../environments/environment';
@@ -172,7 +172,7 @@ export class AnalysisService {
const items: Wrapper[] = [];
const visibleIds = new Set<string>(nodes.getIds());
for (const protein of proteins) {
- const wrapper = getWrapperFromProtein(protein);
+ const wrapper = getWrapperFromNode(protein);
const found = visibleIds.has(wrapper.nodeId);
if (found && !this.inSelection(wrapper) && protein.expressionLevel > threshold) {
items.push(wrapper);
@@ -187,7 +187,7 @@ export class AnalysisService {
const items: Wrapper[] = [];
const visibleIds = new Set<string>(nodes.getIds());
for (const protein of proteins) {
- const wrapper = getWrapperFromProtein(protein);
+ const wrapper = getWrapperFromNode(protein);
const found = visibleIds.has(wrapper.nodeId);
if (found && !this.inSelection(wrapper)) {
items.push(wrapper);
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 2516ae63..02963a3d 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -4,7 +4,7 @@
export const environment = {
production: false,
- backend: 'https://exbio.wzw.tum.de/drugstone/api/',
+ backend: 'http://10.162.163.20/',
};
/*
diff --git a/src/index.html b/src/index.html
index 7487e01f..87840dec 100644
--- a/src/index.html
+++ b/src/index.html
@@ -25,6 +25,7 @@
<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>
+<input id="new_color" type="text" /> <button onclick=changeColor(document.getElementById("new_color").value) >Set Color </button> <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>
@@ -89,6 +90,18 @@
}));
}
+ function changeColor(hexacode) {
+ console.log(hexacode)
+ const elements_background_color = document.getElementsByClassName('is-primary');
+ for(var i = 0; i < elements_background_color.length; i++){
+ elements_background_color[i].setAttribute('style', `background-color: ${hexacode} !important; color: white !important; border-color: ${hexacode} !important`);
+ }
+ const elements_text = document.getElementsByClassName('has-text-primary');
+ for(var i = 0; i < elements_text.length; i++){
+ elements_text[i].setAttribute('style', `color: ${hexacode} !important`);
+ }
+ }
+
</script>
</body>
</html>
--
GitLab