Skip to content
Snippets Groups Projects
Commit 88302781 authored by Maiykol's avatar Maiykol
Browse files

style for output network

parent 4e993a68
Branches
Tags
No related merge requests found
Pipeline #11024 failed
...@@ -30,6 +30,8 @@ import html2canvas from 'html2canvas'; ...@@ -30,6 +30,8 @@ import html2canvas from 'html2canvas';
import {toast} from 'bulma-toast'; import {toast} from 'bulma-toast';
import {NetworkSettings} from '../../network-settings'; import {NetworkSettings} from '../../network-settings';
import { NetexControllerService } from 'src/app/services/netex-controller/netex-controller.service'; import { NetexControllerService } from 'src/app/services/netex-controller/netex-controller.service';
import { IConfig } from 'src/app/config';
import { config } from 'rxjs';
declare var vis: any; declare var vis: any;
...@@ -137,7 +139,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges { ...@@ -137,7 +139,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
} }
if (this.task && this.task.info.done) { if (this.task && this.task.info.done) {
const result = await this.netex.getTaskResult(this.token) const result = await this.netex.getTaskResult(this.token);
console.log(result) console.log(result)
const nodeAttributes = result.nodeAttributes || {}; const nodeAttributes = result.nodeAttributes || {};
const isSeed: { [key: string]: boolean } = nodeAttributes.isSeed || {}; const isSeed: { [key: string]: boolean } = nodeAttributes.isSeed || {};
...@@ -358,21 +360,35 @@ export class AnalysisPanelComponent implements OnInit, OnChanges { ...@@ -358,21 +360,35 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
return `${environment.backend}graph_export/?token=${this.token}`; return `${environment.backend}graph_export/?token=${this.token}`;
} }
public inferEdgeType(edge: object): EdgeType { public inferEdgeGroup(edge: object): EdgeType {
if (edge['to'].startsWith('d')) { if (edge['to'].startsWith('d')) {
return 'protein-drug'; return 'protein-drug';
} }
return 'protein-protein'; return 'protein-protein';
} }
public inferNodeType(nodeId: string): WrapperType { /**
if (nodeId.startsWith('d')) { * Infers wrapper type of node returned from backend.
* Node can only be either an input node from the user with a defined group,
* a drug found in the backend with either user defined type or default drug group,
* or an intermediate protein added by the shortest path to the found drug.
* For the third case, fall back to a default case which can also be set by user.
*/
public inferNodeGroup(wrapper: Wrapper): string {
if (wrapper.data.group !== undefined) {
return wrapper.data.group
}
else if (wrapper.data.netexId !== undefined && wrapper.data.netexId.startsWith('d')) {
return 'drug'; return 'drug';
} }
else if (wrapper.data.netexId !== undefined && wrapper.data.netexId.startsWith('p')) {
return 'protein'; return 'protein';
} }
}
public createNetwork(result: any): { edges: any[], nodes: any[] } { public createNetwork(result: any): { edges: any[], nodes: any[] } {
const config = result.parameters.config;
const nodes = []; const nodes = [];
const edges = []; const edges = [];
...@@ -396,11 +412,10 @@ export class AnalysisPanelComponent implements OnInit, OnChanges { ...@@ -396,11 +412,10 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
} else if (nodeTypes[nodeObjectKey] === 'drug') { } else if (nodeTypes[nodeObjectKey] === 'drug') {
wrappers[node] = getWrapperFromDrug(details[nodeObjectKey]); wrappers[node] = getWrapperFromDrug(details[nodeObjectKey]);
} }
nodes.push(this.mapNode(config, wrappers[node], isSeed[nodeObjectKey], scores[nodeObjectKey]));
nodes.push(this.mapNode(this.inferNodeType(node), wrappers[node], isSeed[nodeObjectKey], scores[nodeObjectKey]));
} }
for (const edge of network.edges) { for (const edge of network.edges) {
edges.push(this.mapEdge(edge, this.inferEdgeType(edge), wrappers)); edges.push(this.mapEdge(edge, this.inferEdgeGroup(edge), wrappers));
} }
return { return {
nodes, nodes,
...@@ -408,11 +423,18 @@ export class AnalysisPanelComponent implements OnInit, OnChanges { ...@@ -408,11 +423,18 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
}; };
} }
private mapNode(nodeType: WrapperType, wrapper: Wrapper, isSeed?: boolean, score?: number): any { private mapNode(config: IConfig, wrapper: Wrapper, isSeed?: boolean, score?: number): any {
const node = NetworkSettings.getNodeStyle('protein', isSeed, this.analysis.inSelection(wrapper)); // const node = NetworkSettings.getNodeStyle(nodeType, isSeed, this.analysis.inSelection(wrapper));
console.log(wrapper)
let group = this.inferNodeGroup(wrapper);
if (typeof group === 'undefined' || typeof config.nodeGroups[group] === 'undefined') {
group = 'default';
}
console.log(group)
const node = JSON.parse(JSON.stringify(config.nodeGroups[group]));
node.id = wrapper.id; node.id = wrapper.id;
node.label = wrapper.data.name; node.label = wrapper.data.name;
node.nodeType = nodeType; node.nodeType = group;
node.isSeed = isSeed; node.isSeed = isSeed;
node.wrapper = wrapper; node.wrapper = wrapper;
return node; return node;
...@@ -481,9 +503,9 @@ export class AnalysisPanelComponent implements OnInit, OnChanges { ...@@ -481,9 +503,9 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
animate: {in: 'fadeIn', out: 'fadeOut'} animate: {in: 'fadeIn', out: 'fadeOut'}
}); });
} else { } else {
for (const drug of drugs) { // for (const drug of drugs) {
this.drugNodes.push(this.mapNode('drug', drug, false, null)); // this.drugNodes.push(this.mapNode(config, 'drug', drug, false, null));
} // }
for (const interaction of edges) { for (const interaction of edges) {
console.log(interaction) console.log(interaction)
......
...@@ -8,6 +8,12 @@ ...@@ -8,6 +8,12 @@
<b><span>Type:</span></b> <b><span>Type:</span></b>
<span class="is-capitalized"> {{ wrapper.type }}</span> <span class="is-capitalized"> {{ wrapper.type }}</span>
</p> </p>
<p *ngIf="wrapper.data.drugId" [ngClass]="{'text-normal':smallStyle}">
<b><span>DrugBank:</span></b>
<a href="https://go.drugbank.com/drugs/{{ wrapper.data.drugId }}" target="_blank">
<span class="is-capitalized"> {{ wrapper.data.drugId }}</span>
</a>
</p>
<p *ngIf="wrapper.data.group" [ngClass]="{'text-normal':smallStyle}"> <p *ngIf="wrapper.data.group" [ngClass]="{'text-normal':smallStyle}">
<b><span>Group:</span></b> <b><span>Group:</span></b>
<span class="is-capitalized"> {{ wrapper.data.group }}</span> <span class="is-capitalized"> {{ wrapper.data.group }}</span>
...@@ -21,7 +27,9 @@ ...@@ -21,7 +27,9 @@
</div> </div>
<app-toggle [value]="analysis.inSelection(wrapper)" [smallStyle]="smallStyle" <app-toggle
*ngIf="wrapper.type !== 'drug'"
[value]="analysis.inSelection(wrapper)" [smallStyle]="smallStyle"
(valueChange)="$event ? analysis.addItems([wrapper]) : analysis.removeItems([wrapper])" textOn="Selected" (valueChange)="$event ? analysis.addItems([wrapper]) : analysis.removeItems([wrapper])" textOn="Selected"
textOff="Deselected" tooltipOn="Add protein to selection." tooltipOff="Remove protein from selection."></app-toggle> textOff="Deselected" tooltipOn="Add protein to selection." tooltipOff="Remove protein from selection."></app-toggle>
</div> </div>
......
import {HttpClient} from '@angular/common/http'; import {HttpClient} from '@angular/common/http';
import { IConfig } from './config';
import {NodeInteraction, Node, getProteinNodeId} from './interfaces'; import {NodeInteraction, Node, getProteinNodeId} from './interfaces';
export function getDatasetFilename(dataset: Array<[string, string]>): string { export function getDatasetFilename(dataset: Array<[string, string]>): string {
...@@ -39,4 +40,76 @@ export class ProteinNetwork { ...@@ -39,4 +40,76 @@ export class ProteinNetwork {
}); });
} }
/** Maps user input node to network node object
*
* @param customNode
* @param config
* @returns
*/
private mapCustomNode(customNode: any, config: IConfig): Node {
let group = customNode.group;
if (typeof group === 'undefined' || typeof config.nodeGroups[group] === 'undefined') {
group = 'default';
}
const node = JSON.parse(JSON.stringify(config.nodeGroups[group]));
// label is only used for network visualization
let nodeLabel = customNode.name;
if (customNode.name.length === 0) {
nodeLabel = customNode.userId;
}
// node.name is actually group name since it comes from the group configuration
// this property is already stored in the wrapper object
// instead, node.name should reflect the actual node name
node.name = customNode.name;
if (node.image) {
node.shape = 'image';
}
node.label = nodeLabel;
node.id = customNode.id;
node.x = customNode.x;
node.y = customNode.y;
node.uniprotAc = customNode.uniprotAc;
node.netexId = customNode.netexId;
// console.log(node)
return node;
}
/** Maps user input edge to network edge object
*
* @param customEdge
* @param config
* @returns
*/
private mapCustomEdge(customEdge: NodeInteraction, config: IConfig): any {
let group = customEdge.group;
if (typeof group === 'undefined' || typeof config.edgeGroups[group] === 'undefined') {
group = 'default';
}
const edge = JSON.parse(JSON.stringify(config.edgeGroups[group]));
edge.from = customEdge.from;
edge.to = customEdge.to;
return edge;
}
public mapDataToNodes(config: IConfig): { nodes: any[], edges: any[]; } {
const nodes = [];
const edges = [];
for (const protein of this.proteins) {
nodes.push(this.mapCustomNode(protein, config));
}
for (const edge of this.edges) {
edges.push(this.mapCustomEdge(edge, config));
}
return {
nodes,
edges,
};
}
} }
...@@ -73,8 +73,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -73,8 +73,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
// extend main column // extend main column
document.getElementById('main-column').classList.add('rightgone'); document.getElementById('main-column').classList.add('rightgone');
} }
} }
this.myConfig[key] = configObj[key]; this.myConfig[key] = configObj[key];
...@@ -267,7 +265,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -267,7 +265,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
this.proteinData = new ProteinNetwork(this.proteins, this.edges); this.proteinData = new ProteinNetwork(this.proteins, this.edges);
this.proteinData.linkNodes(); this.proteinData.linkNodes();
const {nodes, edges} = this.mapDataToNodes(this.proteinData); const {nodes, edges} = this.proteinData.mapDataToNodes(this.myConfig);
this.nodeData.nodes = new vis.DataSet(nodes); this.nodeData.nodes = new vis.DataSet(nodes);
this.nodeData.edges = new vis.DataSet(edges); this.nodeData.edges = new vis.DataSet(edges);
...@@ -348,71 +346,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -348,71 +346,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
this.myConfig[key] = {...this.myConfig[key], ...values}; this.myConfig[key] = {...this.myConfig[key], ...values};
} }
/** Convert input nodes into node objects
*
* @param customNode
* @returns
*/
private mapCustomNode(customNode: any): Node {
let group = customNode.group;
if (typeof group === 'undefined' || typeof this.myConfig.nodeGroups[group] === 'undefined') {
group = 'default';
}
const node = JSON.parse(JSON.stringify(this.myConfig.nodeGroups[group]));
// label is only used for network visualization
let nodeLabel = customNode.name;
if (customNode.name.length === 0) {
nodeLabel = customNode.userId;
}
// node.name is actually group name since it comes from the group configuration
// this property is already stored in the wrapper object
// instead, node.name should reflect the actual node name
node.name = customNode.name;
if (node.image) {
node.shape = 'image';
}
node.label = nodeLabel;
node.id = customNode.id;
node.x = customNode.x;
node.y = customNode.y;
node.uniprotAc = customNode.uniprotAc;
node.netexId = customNode.netexId;
// console.log(node)
return node;
}
private mapCustomEdge(customEdge: NodeInteraction): any {
let group = customEdge.group;
if (typeof group === 'undefined' || typeof this.myConfig.edgeGroups[group] === 'undefined') {
group = 'default';
}
const edge = JSON.parse(JSON.stringify(this.myConfig.edgeGroups[group]));
edge.from = customEdge.from;
edge.to = customEdge.to;
return edge;
}
private mapDataToNodes(data: ProteinNetwork): { nodes: any[], edges: any[]; } {
const nodes = [];
const edges = [];
for (const protein of data.proteins) {
nodes.push(this.mapCustomNode(protein));
}
for (const edge of data.edges) {
edges.push(this.mapCustomEdge(edge));
}
return {
nodes,
edges,
};
}
public toCanvas() { public toCanvas() {
html2canvas(this.networkEl.nativeElement).then((canvas) => { html2canvas(this.networkEl.nativeElement).then((canvas) => {
const generatedImage = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream'); const generatedImage = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment