Skip to content
Snippets Groups Projects
Commit 7cf140d7 authored by Julian Späth's avatar Julian Späth Committed by Julian Matschinske
Browse files

Show drug info

parent 8629ab3c
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
src/app/analysis.service.ts
+ 9
− 9
View file @ 7cf140d7
......@@ -106,18 +106,18 @@ export class AnalysisService {
showToast(task: Task, status: 'DONE' | 'FAILED') {
let toastMessage;
let toastType;
const startDate = new Date(task.info.startedAt);
const finishedDate = new Date(task.info.finishedAt);
// const startDate = new Date(task.info.startedAt);
// const finishedDate = new Date(task.info.finishedAt);
if (status === 'DONE') {
toastMessage = `Computation finished succesfully.
\n- Algorithm: ${task.info.algorithm}
\n- Started At: ${startDate.getHours()}:${startDate.getMinutes()}
\n- Finished At: ${finishedDate.getHours()}:${finishedDate.getMinutes()}`;
toastMessage = 'Computation finished succesfully.';
// \n- Algorithm: ${task.info.algorithm}
// \n- Started At: ${startDate.getHours()}:${startDate.getMinutes()}
// \n- Finished At: ${finishedDate.getHours()}:${finishedDate.getMinutes()}`;
toastType = 'is-success';
} else if (status === 'FAILED') {
toastMessage = `Computation failed.
\n- Algorithm: ${task.info.algorithm}
\n- Started At: ${startDate.getHours()}:${startDate.getMinutes()}`;
toastMessage = 'Computation failed.';
// \n- Algorithm: ${task.info.algorithm}
// \n- Started At: ${startDate.getHours()}:${startDate.getMinutes()}`;
toastType = 'is-danger';
}
......
src/app/components/analysis-window/analysis-window.component.ts
+ 53
− 26
View file @ 7cf140d7
......@@ -12,7 +12,7 @@ import {
import {HttpClient} from '@angular/common/http';
import {environment} from '../../../environments/environment';
import {AnalysisService} from '../../analysis.service';
import {Protein, Task, NodeType, ViralProtein} from '../../interfaces';
import {Protein, Task, NodeType, ViralProtein, Drug} from '../../interfaces';
declare var vis: any;
......@@ -71,23 +71,27 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
const options = {};
this.network = new vis.Network(container, this.nodeData, options);
this.network.on('deselectNode', (properties) => {
this.showDetailsChange.emit([false, [null, null, null, null, null, null]]);
});
this.network.on('selectNode', (properties) => {
const selectedNodes = this.nodeData.nodes.get(properties.nodes);
if (selectedNodes.length > 0) {
let selectedProteinItem;
let selectedProteinName;
let selectedProteinType;
let selectedProteinAc;
let selectedProteinDataset;
let selectedProteinVirus;
let selectedItem;
let selectedName;
let selectedType;
let selectedId;
let selectedVirusName;
let selectedStatus;
if (selectedNodes[0].nodeType === 'host') {
const protein: Protein = {name: '', proteinAc: selectedNodes[0].id};
selectedProteinName = null;
selectedProteinDataset = null;
selectedProteinVirus = null;
selectedProteinItem = {name: selectedNodes[0].id, type: 'Host Protein', data: protein};
selectedProteinAc = protein.proteinAc;
selectedProteinType = 'Host Protein';
selectedVirusName = null;
selectedStatus = null;
selectedItem = {name: selectedNodes[0].id, type: 'Host Protein', data: protein};
// TODO use gene name here
selectedName = protein.proteinAc;
selectedId = protein.proteinAc;
selectedType = 'Host Protein';
if (properties.event.srcEvent.ctrlKey) {
if (this.analysis.inSelection(protein.proteinAc)) {
this.analysis.removeItem(protein.proteinAc);
......@@ -97,27 +101,45 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
}
}
} else if (selectedNodes[0].nodeType === 'virus') {
const virus: ViralProtein = {viralProteinId: null, effectName: selectedNodes[0].id, virusName: null, datasetName: null};
selectedProteinAc = null;
selectedProteinDataset = null;
selectedProteinVirus = null;
selectedProteinItem = {name: virus.effectName, type: 'Viral Protein', data: virus};
selectedProteinName = virus.effectName;
selectedProteinType = 'Viral Protein';
const virus: ViralProtein = {
viralProteinId: null,
effectName: selectedNodes[0].id,
virusName: null,
datasetName: null
};
selectedId = null;
selectedStatus = null;
selectedItem = {name: virus.effectName, type: 'Viral Protein', data: virus};
selectedVirusName = virus.virusName;
selectedName = virus.effectName;
selectedType = 'Viral Protein';
if (properties.event.srcEvent.ctrlKey) {
if (this.analysis.inSelection(virus.effectName)) {
this.analysis.removeItem(virus.effectName);
} else {
this.analysis.addItem(selectedProteinItem);
this.analysis.addItem(selectedItem);
this.analysis.getCount();
}
}
}
this.showDetailsChange.emit([true, [selectedProteinItem, selectedProteinName, selectedProteinType, selectedProteinAc,
selectedProteinDataset, selectedProteinVirus]]);
} else if (selectedNodes[0].nodeType === 'drug') {
const drug: Drug = {
drugId: selectedNodes[0].details.drugId,
name: selectedNodes[0].details.name,
status: selectedNodes[0].details.status,
};
selectedId = drug.drugId;
selectedStatus = drug.status;
selectedName = drug.name;
selectedType = 'Drug';
selectedItem = {name: drug.name, type: 'Drug', data: drug};
selectedVirusName = null;
}
this.showDetailsChange.emit([true, [selectedItem, selectedName, selectedType,
selectedId, selectedVirusName, selectedStatus]]);
} else {
this.showDetailsChange.emit([false, [null, null, null, null, null, null]]);
}
});
this.analysis.subscribe((item, selected) => {
......@@ -157,6 +179,8 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
public inferNodeType(nodeId: string): 'host' | 'virus' | 'drug' {
if (nodeId.indexOf('-') !== -1 || nodeId.indexOf('_') !== -1) {
return 'virus';
} else if (nodeId.startsWith('DB')) {
return 'drug';
}
return 'host';
}
......@@ -174,9 +198,12 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
const nodeTypes = attributes.nodeTypes || {};
const isSeed = attributes.isSeed || {};
const scores = attributes.scores || {};
const details = attributes.details || {};
for (const node of network.nodes) {
nodes.push(this.mapNode(node, nodeTypes[node] || this.inferNodeType(node), isSeed[node], scores[node]));
nodes.push(this.mapNode(node, nodeTypes[node] || this.inferNodeType(node), isSeed[node], scores[node], details[node]));
}
for (const edge of network.edges) {
......@@ -225,13 +252,13 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
return {color, shape, size, font, shadow};
}
private mapNode(nodeId: any, nodeType?: NodeType, isSeed?: boolean, score?: number): any {
private mapNode(nodeId: any, nodeType?: NodeType, isSeed?: boolean, score?: number, details?): any {
const {shape, color, size, font, shadow} = this.getNodeLooks(nodeId, nodeType, isSeed);
return {
id: nodeId,
label: nodeId,
size, color, shape, font, shadow,
nodeType, isSeed,
nodeType, isSeed, details
};
}
......
src/app/interfaces.ts
+ 8
− 2
View file @ 7cf140d7
......@@ -53,6 +53,12 @@ export interface Task {
export interface QueryItem {
name: string;
type: 'Host Protein' | 'Viral Protein';
data: Protein | ViralProtein;
type: 'Host Protein' | 'Viral Protein' | 'Drug';
data: Protein | ViralProtein | Drug;
}
export interface Drug {
drugId: string;
name: string;
status: 'approved' | 'investigational';
}
src/app/pages/explorer-page/explorer-page.component.html
+ 37
− 17
View file @ 7cf140d7
......@@ -194,8 +194,11 @@
<header class="card-header">
<p class="card-header-title">
<span class="icon">
<i class="fas fa-info" aria-hidden="true"></i>
</span> {{ selectedProteinType }}
<i *ngIf="!showDetails" class="fas fa-info" aria-hidden="true"></i>
<i *ngIf="selectedType === 'Host Protein'" class="fas fa-dna" aria-hidden="true"></i>
<i *ngIf="selectedType === 'Viral Protein'" class="fas fa-virus" aria-hidden="true"></i>
<i *ngIf="selectedType === 'Drug'" class="fas fa-capsules" aria-hidden="true"></i>
</span> {{ selectedType }}
</p>
<a (click)="collabsDetails = !collabsDetails" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options">
......@@ -207,27 +210,44 @@
<div *ngIf="collabsDetails">
<div class="card-content">
<div *ngIf="showDetails">
<p *ngIf="selectedProteinName"><b>Name:</b> {{ selectedProteinName }}</p>
<p *ngIf="selectedProteinDataset"><b>Virus:</b> {{ selectedProteinVirus }}</p>
<p *ngIf="selectedProteinAc"><b>Protein AC:</b>
<a href="https://www.uniprot.org/uniprot/{{ selectedProteinAc }}"
target="_blank"> {{ selectedProteinAc }}</a>
<p *ngIf="selectedName && selectedType=='Drug'"><b><span>Name:</span></b> {{ selectedName }} <span
class="icon is-small">
<i class="fas fa-capsules"></i>
</span></p>
<p *ngIf="selectedName && selectedType=='Host Protein'"><b><span>Gene Name:</span></b> {{ selectedName }}
<span class="icon is-small">
<i class="fas fa-dna"></i>
</span></p>
<p *ngIf="selectedVirusName"><b><span>Virus:</span></b> {{ selectedVirusName }} <span class="icon is-small">
<i class="fas fa-virus"></i>
</span></p>
<p *ngIf="selectedName && selectedType=='Viral Protein'"><b>Effect:</b> {{ selectedName }}</p>
<p *ngIf="selectedId && selectedType == 'Host Protein'"><b>Uniprot AC:</b>
<a href="https://www.uniprot.org/uniprot/{{ selectedId }}"
target="_blank"> {{ selectedId }}</a>
</p>
<p *ngIf="selectedId && selectedType == 'Drug'"><b>DrugBank ID:</b>
<a href="https://www.drugbank.ca/drugs/{{ selectedId }}"
target="_blank"> {{ selectedId }}</a>
</p>
<p *ngIf="selectedStatus === 'investigational' "><b>Status:</b> Investigational <span class="icon is-small"><i class="fas fa-search investigational"></i></span>
<p *ngIf="selectedStatus === 'approved' "><b>Status:</b> Approved <span class="icon is-small"><i class="fas fa-check"></i></span>
</p>
<div class="field has-addons add-remove-toggle">
<p class="control">
<button class="button is-rounded" [class.is-success]="!analysis.inSelection(selectedProteinName)"
[disabled]="analysis.inSelection(selectedProteinName)"
(click)="analysis.addItem(selectedProteinItem)">
<p *ngIf="selectedType !== 'Drug'" class="control">
<button class="button is-rounded" [class.is-success]="!analysis.inSelection(selectedName)"
[disabled]="analysis.inSelection(selectedName)"
(click)="analysis.addItem(selectedItem)">
<span class="icon is-small">
<i class="fas fa-plus"></i>
</span>
<span>Add to Analysis</span>
</button>
</p>
<p class="control">
<button class="button is-rounded" [class.is-danger]="analysis.inSelection(selectedProteinName)"
[disabled]="!analysis.inSelection(selectedProteinName)"
(click)="analysis.removeItem(selectedProteinName)">
<p *ngIf="selectedType !== 'Drug'" class="control">
<button class="button is-rounded" [class.is-danger]="analysis.inSelection(selectedName)"
[disabled]="!analysis.inSelection(selectedName)"
(click)="analysis.removeItem(selectedName)">
<span>Remove</span>
<span class="icon is-small">
<i class="fas fa-trash"></i>
......
src/app/pages/explorer-page/explorer-page.component.ts
+ 30
− 30
View file @ 7cf140d7
......@@ -23,12 +23,12 @@ declare var vis: any;
export class ExplorerPageComponent implements OnInit, AfterViewInit {
public showDetails = false;
public selectedProteinName = null;
public selectedProteinType = null;
public selectedProteinAc = null;
public selectedProteinItem = null;
public selectedProteinVirus = null;
public selectedProteinDataset = null;
public selectedName = null;
public selectedType = null;
public selectedId = null;
public selectedItem = null;
public selectedVirusName = null;
public selectedStatus = null;
public collabsAnalysis = true;
public collabsDetails = true;
public collabsTask = true;
......@@ -159,29 +159,29 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
}
public changeInfo(showList: any[]) {
this.selectedProteinItem = showList[0];
this.selectedProteinName = showList[1];
this.selectedProteinType = showList[2];
this.selectedProteinAc = showList[3];
this.selectedProteinDataset = showList[4];
this.selectedProteinVirus = showList[5];
this.selectedItem = showList[0];
this.selectedName = showList[1];
this.selectedType = showList[2];
this.selectedId = showList[3];
this.selectedVirusName = showList[4];
this.selectedStatus = showList[5];
}
public async openSummary(item: QueryItem, zoom: boolean) {
this.selectedProteinAc = null;
this.selectedProteinItem = item;
this.selectedProteinType = item.type;
this.selectedProteinName = item.name;
if (this.selectedProteinType === 'Host Protein') {
this.selectedId = null;
this.selectedItem = item;
this.selectedType = item.type;
this.selectedName = item.name;
if (this.selectedType === 'Host Protein') {
const hostProtein = item.data as Protein;
this.selectedProteinAc = hostProtein.proteinAc;
this.selectedId = hostProtein.proteinAc;
if (zoom) {
this.zoomToNode(`p_${item.name}`);
}
} else if (item.type === 'Viral Protein') {
const viralProtein = item.data as ViralProtein;
this.selectedProteinVirus = viralProtein.virusName;
this.selectedProteinDataset = viralProtein.datasetName;
this.selectedName = viralProtein.effectName;
this.selectedVirusName = viralProtein.virusName;
if (zoom) {
this.zoomToNode(`eff_${viralProtein.effectName}_${viralProtein.datasetName}_${viralProtein.virusName}`);
}
......@@ -190,12 +190,12 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
}
public async closeSummary() {
this.selectedProteinItem = null;
this.selectedProteinName = null;
this.selectedProteinType = null;
this.selectedProteinAc = null;
this.selectedProteinVirus = null;
this.selectedProteinDataset = null;
this.selectedItem = null;
this.selectedName = null;
this.selectedType = null;
this.selectedId = null;
this.selectedVirusName = null;
this.selectedStatus = null;
this.showDetails = false;
}
......@@ -292,14 +292,14 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
this.network.stabilize();
}
if (this.selectedProteinItem) {
this.zoomToNode(`p_${this.selectedProteinItem.name}`);
if (this.selectedItem) {
this.zoomToNode(`p_${this.selectedItem.name}`);
}
this.queryItems = [];
this.fillQueryItems(this.proteins, this.effects);
if (this.selectedProteinItem) {
this.network.selectNodes(['p_' + this.selectedProteinItem.name]);
if (this.selectedItem) {
this.network.selectNodes(['p_' + this.selectedItem.name]);
}
}
......
src/styles.scss
+ 4
− 0
View file @ 7cf140d7
......@@ -159,6 +159,10 @@ div.field.has-addons.add-remove-toggle {
color: #48C774;
}
.fa-search.investigational {
color: #e2b600;
}
.fa-spinner {
color: #e2b600;
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment