From 06aea0a840a18b1ede4fcdc04a8c61e38a9c8b1f Mon Sep 17 00:00:00 2001
From: Maiykol <hartung.michael@outlook.com>
Date: Thu, 17 Jun 2021 17:44:30 +0200
Subject: [PATCH] display protein-drug edges in result graph
---
.../analysis-panel.component.ts | 25 +++++++++++++------
src/app/config.ts | 2 +-
src/app/interfaces.ts | 16 +++++++-----
src/app/network-settings.ts | 14 +++++------
.../explorer-page.component.html | 4 +--
.../explorer-page/explorer-page.component.ts | 2 +-
6 files changed, 38 insertions(+), 25 deletions(-)
diff --git a/src/app/components/analysis-panel/analysis-panel.component.ts b/src/app/components/analysis-panel/analysis-panel.component.ts
index 3dd02f0d..77150c24 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.ts
+++ b/src/app/components/analysis-panel/analysis-panel.component.ts
@@ -22,7 +22,9 @@ import {
getWrapperFromDrug,
getNodeIdsFromPDI,
getNodeIdsFromPPI,
- getProteinNodeId, Tissue
+ getProteinNodeId,
+ Tissue,
+ EdgeType,
} from '../../interfaces';
import html2canvas from 'html2canvas';
import {toast} from 'bulma-toast';
@@ -356,11 +358,18 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
return `${environment.backend}graph_export/?token=${this.token}`;
}
+ public inferEdgeType(edge: object): EdgeType {
+ if (edge['to'].startsWith('d')) {
+ return 'protein-drug';
+ }
+ return 'protein-protein';
+ }
+
public inferNodeType(nodeId: string): WrapperType {
- if (nodeId.startsWith('DB')) {
+ if (nodeId.startsWith('d')) {
return 'drug';
}
- return 'gene';
+ return 'protein';
}
public createNetwork(result: any): { edges: any[], nodes: any[] } {
@@ -391,7 +400,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
nodes.push(this.mapNode(this.inferNodeType(node), wrappers[node], isSeed[nodeObjectKey], scores[nodeObjectKey]));
}
for (const edge of network.edges) {
- edges.push(this.mapEdge(edge, 'protein-protein', wrappers));
+ edges.push(this.mapEdge(edge, this.inferEdgeType(edge), wrappers));
}
return {
nodes,
@@ -400,7 +409,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
}
private mapNode(nodeType: WrapperType, wrapper: Wrapper, isSeed?: boolean, score?: number): any {
- const node = NetworkSettings.getNodeStyle('gene', isSeed, this.analysis.inSelection(wrapper));
+ const node = NetworkSettings.getNodeStyle('protein', isSeed, this.analysis.inSelection(wrapper));
node.id = wrapper.id;
node.label = wrapper.data.name;
node.nodeType = nodeType;
@@ -409,7 +418,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
return node;
}
- private mapEdge(edge: any, type: 'protein-protein' | 'to-drug', wrappers?: { [key: string]: Wrapper }): any {
+ private mapEdge(edge: any, type: 'protein-protein' | 'protein-drug', wrappers?: { [key: string]: Wrapper }): any {
let edgeColor;
if (type === 'protein-protein') {
edgeColor = {
@@ -421,7 +430,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
from, to,
color: edgeColor,
};
- } else if (type === 'to-drug') {
+ } else if (type === 'protein-drug') {
edgeColor = {
color: NetworkSettings.getColor('edgeHostDrug'),
highlight: NetworkSettings.getColor('edgeHostDrugHighlight'),
@@ -479,7 +488,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
for (const interaction of edges) {
console.log(interaction)
const edge = {from: interaction.uniprotAc, to: interaction.drugId};
- this.drugEdges.push(this.mapEdge(edge, 'to-drug'));
+ this.drugEdges.push(this.mapEdge(edge, 'protein-drug'));
}
this.nodeData.nodes.add(Array.from(this.drugNodes.values()));
this.nodeData.edges.add(Array.from(this.drugEdges.values()));
diff --git a/src/app/config.ts b/src/app/config.ts
index 9c07b45a..b24458bb 100644
--- a/src/app/config.ts
+++ b/src/app/config.ts
@@ -78,7 +78,7 @@ export const defaultConfig: IConfig = {
name: 'Default Group',
color: 'yellow',
shape: 'triangle',
- type: 'gene',
+ type: 'protein',
},
protein: {
name: 'Resulting Proteins',
diff --git a/src/app/interfaces.ts b/src/app/interfaces.ts
index f894c008..ed9d700d 100644
--- a/src/app/interfaces.ts
+++ b/src/app/interfaces.ts
@@ -81,17 +81,20 @@ export function getNodeIdsFromPPI(edge: NetworkEdge, wrappers: { [key: string]:
export function getNodeIdsFromPDI(edge: NetworkEdge) {
return {
- from: `p_${edge.from}`,
- to: `d_${edge.to}`,
+ from: `${edge.from}`,
+ to: `${edge.to}`,
};
}
export function getDrugNodeId(drug: Drug) {
- return `d_${drug.id}`;
+ /**
+ * Returns backend_id of Drug object
+ */
+ return drug.netexId
}
export function getDrugBackendId(drug: Drug) {
- return drug.id;
+ return drug.netexId;
}
export function getNodeId(node: Node) {
@@ -120,7 +123,7 @@ export function getWrapperFromNode(gene: Node): Wrapper {
return {
id: getNodeId(gene),
nodeId: getNodeId(gene),
- type: 'gene',
+ type: 'protein',
data: gene,
};
}
@@ -135,7 +138,8 @@ export function getWrapperFromDrug(drug: Drug): Wrapper {
};
}
-export type WrapperType = 'gene' | 'drug';
+export type WrapperType = 'protein' | 'drug';
+export type EdgeType = 'protein-protein' | 'protein-drug';
export interface Wrapper {
id: string;
diff --git a/src/app/network-settings.ts b/src/app/network-settings.ts
index 376d228d..9f4a77fc 100644
--- a/src/app/network-settings.ts
+++ b/src/app/network-settings.ts
@@ -78,7 +78,7 @@ export class NetworkSettings {
private static drugInTrialShape = 'triangle';
static getNodeSize(wrapperType: WrapperType) {
- if (wrapperType === 'gene') {
+ if (wrapperType === 'protein') {
return this.hostSize;
} else if (wrapperType === 'drug') {
return this.drugSize;
@@ -86,7 +86,7 @@ export class NetworkSettings {
}
static getNodeShape(wrapperType: WrapperType, drugInTrial?: boolean) {
- if (wrapperType === 'gene') {
+ if (wrapperType === 'protein') {
return this.hostShape;
} else if (wrapperType === 'drug') {
if (drugInTrial) {
@@ -119,14 +119,14 @@ export class NetworkSettings {
}
}
- static getColor(color: 'gene' | 'approvedDrug' | 'unapprovedDrug' | 'hostFont' | 'drugFont' |
+ static getColor(color: 'protein' | 'approvedDrug' | 'unapprovedDrug' | 'hostFont' | 'drugFont' |
'nonSeedHost' | 'selectedForAnalysis' | 'selectedForAnalysisText' |
'edgeHostDrug' | 'edgeHostDrugHighlight' | 'edgeGeneGene' | 'edgeGeneGeneHighlight')
/**
* Collection of all colors per use-case
*/
{
- if (color === 'gene') {
+ if (color === 'protein') {
return this.hostColor;
} else if (color === 'approvedDrug') {
return this.approvedDrugColor;
@@ -150,7 +150,7 @@ export class NetworkSettings {
}
static getFont(wrapperType: WrapperType, drugInTrial?: boolean) {
- if (wrapperType === 'gene') {
+ if (wrapperType === 'protein') {
return {color: this.hostFontColor, size: this.hostFontSize};
} else if (wrapperType === 'drug') {
if (!drugInTrial) {
@@ -178,9 +178,9 @@ export class NetworkSettings {
nodeShape = NetworkSettings.getNodeShape(nodeType);
nodeSize = NetworkSettings.getNodeSize(nodeType);
nodeFont = NetworkSettings.getFont(nodeType);
- if (nodeType === 'gene') {
+ if (nodeType === 'protein') {
nodeColor = NetworkSettings.getColor(nodeType);
- nodeFont = NetworkSettings.getFont('gene');
+ nodeFont = NetworkSettings.getFont('protein');
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 b3723b06..bc9f5584 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -184,13 +184,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 === 'gene'" class="fas fa-dna" aria-hidden="true"></i>
+ <i *ngIf="selectedWrapper && selectedWrapper.type === 'protein'" 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 === 'gene'">Host Protein</span>
+ <span *ngIf="selectedWrapper.type === 'protein'">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 545454cd..b2510409 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -437,7 +437,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
gProfilerLink(): string {
const queryString = this.analysis.getSelection()
- .filter(wrapper => wrapper.type === 'gene')
+ .filter(wrapper => wrapper.type === 'protein')
.map(wrapper => wrapper.data.uniprotAc)
.join('%0A');
return 'http://biit.cs.ut.ee/gprofiler/gost?' +
--
GitLab