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

use backend running of alfred for development

parent ebbe5211
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 94 additions and 54 deletions
src/app/components/analysis-panel/analysis-panel.component.ts
+ 11
− 11
View file @ e29b4ee8
......@@ -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;
......
src/app/components/info-tile/info-tile.component.ts
+ 1
− 1
View file @ e29b4ee8
......@@ -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);
......
src/app/dialogs/add-expressed-proteins/add-expressed-proteins.component.ts
+ 2
− 2
View file @ e29b4ee8
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;
......
src/app/dialogs/custom-proteins/custom-proteins.component.ts
+ 3
− 3
View file @ e29b4ee8
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);
......
src/app/interfaces.ts
+ 25
− 6
View file @ e29b4ee8
......@@ -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;
......
src/app/network-settings.ts
+ 20
− 22
View file @ e29b4ee8
......@@ -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');
}
......
src/app/pages/explorer-page/explorer-page.component.html
+ 2
− 2
View file @ e29b4ee8
......@@ -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>
......
src/app/pages/explorer-page/explorer-page.component.ts
+ 13
− 3
View file @ e29b4ee8
......@@ -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;
......
src/app/services/analysis/analysis.service.ts
+ 3
− 3
View file @ e29b4ee8
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);
......
src/environments/environment.ts
+ 1
− 1
View file @ e29b4ee8
......@@ -4,7 +4,7 @@
export const environment = {
production: false,
backend: 'https://exbio.wzw.tum.de/drugstone/api/',
backend: 'http://10.162.163.20/',
};
/*
......
src/index.html
+ 13
− 0
View file @ e29b4ee8
......@@ -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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment