From ed9b8568d9a0a4ee8ad7ee0cfa6b12cecd85e32b Mon Sep 17 00:00:00 2001
From: Maiykol <hartung.michael@outlook.com>
Date: Wed, 23 Jun 2021 20:23:21 +0200
Subject: [PATCH] update legend and remove nodeGroups type for now
---
.../analysis-panel.component.ts | 39 ++--
.../info-tile/info-tile.component.html | 4 -
.../network-legend.component.html | 3 +-
.../network-legend.component.scss | 9 +-
.../query-tile/query-tile.component.html | 6 +-
.../query-tile/query-tile.component.ts | 2 +-
src/app/config.ts | 8 +-
.../launch-analysis.component.ts | 3 +-
src/app/interfaces.ts | 8 -
src/app/main-network.ts | 41 ++--
src/app/network-settings.ts | 205 +++++++++---------
.../explorer-page.component.html | 12 +-
.../explorer-page/explorer-page.component.ts | 25 ++-
src/index.html | 11 +-
14 files changed, 184 insertions(+), 192 deletions(-)
diff --git a/src/app/components/analysis-panel/analysis-panel.component.ts b/src/app/components/analysis-panel/analysis-panel.component.ts
index c26c718c..014a3a46 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.ts
+++ b/src/app/components/analysis-panel/analysis-panel.component.ts
@@ -17,7 +17,6 @@ import {
Task,
Drug,
Wrapper,
- WrapperType,
getWrapperFromNode,
getWrapperFromDrug,
getWrapperFromCustom,
@@ -32,8 +31,6 @@ import {toast} from 'bulma-toast';
import {NetworkSettings} from '../../network-settings';
import { NetexControllerService } from 'src/app/services/netex-controller/netex-controller.service';
import { IConfig } from 'src/app/config';
-import { config } from 'rxjs';
-import { wrapReference } from '@angular/compiler/src/render3/util';
declare var vis: any;
@@ -242,10 +239,10 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
const pos = this.network.getPositions([item.id]);
node.x = pos[item.id].x;
node.y = pos[item.id].y;
- Object.assign(node, NetworkSettings.getNodeStyle(
- node.wrapper.type,
- node.isSeed,
- selected));
+ // Object.assign(node, NetworkSettings.getNodeStyle(
+ // node.wrapper.type,
+ // node.isSeed,
+ // selected));
updatedNodes.push(node);
}
this.nodeData.nodes.update(updatedNodes);
@@ -271,17 +268,17 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
const nodeSelected = this.analysis.idInSelection(node.id);
let drugType;
let drugInTrial;
- if (node.wrapper.type === 'drug') {
+ if (node.wrapper.data.netexId && node.wrapper.data.netexId.startswith('d')) {
drugType = node.wrapper.data.status;
drugInTrial = node.wrapper.data.inTrial;
}
- Object.assign(node, NetworkSettings.getNodeStyle(
- node.wrapper.type,
- node.isSeed,
- nodeSelected,
- drugType,
- drugInTrial,
- node.gradient));
+ // Object.assign(node, NetworkSettings.getNodeStyle(
+ // node.wrapper.type,
+ // node.isSeed,
+ // nodeSelected,
+ // drugType,
+ // drugInTrial,
+ // node.gradient));
updatedNodes.push(node);
});
this.nodeData.nodes.update(updatedNodes);
@@ -468,20 +465,14 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
* @returns
*/
private mapNode(config: IConfig, wrapper: Wrapper, isSeed?: boolean, score?: number): any {
- // const node = NetworkSettings.getNodeStyle(nodeType, isSeed, this.analysis.inSelection(wrapper));
- let group = this.inferNodeGroup(wrapper);
- if (typeof group === 'undefined' || typeof config.nodeGroups[group] === 'undefined') {
- group = 'default';
- }
+
console.log("node group")
- console.log(group)
console.log(config.nodeGroups)
- console.log(config.nodeGroups[group]);
+ console.log(config.nodeGroups[wrapper.data.group]);
- const node = JSON.parse(JSON.stringify(config.nodeGroups[group]));
+ const node = JSON.parse(JSON.stringify(config.nodeGroups[wrapper.data.group]));
node.id = wrapper.id;
node.label = this.inferNodeLabel(config, wrapper);
- node.nodeType = group;
node.isSeed = isSeed;
node.wrapper = wrapper;
return node;
diff --git a/src/app/components/info-tile/info-tile.component.html b/src/app/components/info-tile/info-tile.component.html
index 0b5e1698..f14f0cd2 100644
--- a/src/app/components/info-tile/info-tile.component.html
+++ b/src/app/components/info-tile/info-tile.component.html
@@ -8,10 +8,6 @@
<b><span>Symbol:</span></b>
<span class="is-capitalized"> {{ wrapper.data.symbol }}</span>
</p>
- <p *ngIf="wrapper.type" [ngClass]="{'text-normal':smallStyle}">
- <b><span>Type:</span></b>
- <span class="is-capitalized"> {{ wrapper.type }}</span>
- </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">
diff --git a/src/app/components/network-legend/network-legend.component.html b/src/app/components/network-legend/network-legend.component.html
index 8f53ebdc..f1cc6935 100644
--- a/src/app/components/network-legend/network-legend.component.html
+++ b/src/app/components/network-legend/network-legend.component.html
@@ -39,7 +39,8 @@
<ng-container *ngIf="this.config.showLegendEdges">
<tr *ngFor="let edgeGroup of this.config.edgeGroups | keyvalue" class="list-item">
<td>
- <hr class="edge" [style.background-color]=edgeGroup.value.color>
+ <hr *ngIf="!edgeGroup.value.dashed" class="edge" [style.background-color]=edgeGroup.value.color>
+ <hr *ngIf="edgeGroup.value.dashed" class="edge dashed" [style.color]=edgeGroup.value.color>
</td>
<td> {{ edgeGroup.value.groupName }}</td>
</tr>
diff --git a/src/app/components/network-legend/network-legend.component.scss b/src/app/components/network-legend/network-legend.component.scss
index 931851e3..0000285b 100644
--- a/src/app/components/network-legend/network-legend.component.scss
+++ b/src/app/components/network-legend/network-legend.component.scss
@@ -12,7 +12,6 @@ div.legend {
}
tr.list-item{
padding: 0;
- height: 40px;
td{
height: $legend-circle-size;
vertical-align: middle !important;
@@ -72,9 +71,15 @@ div.legend {
width: $legend-circle-size;
height: $legend-circle-size;
}
- .edge{
+ hr.edge{
width: $legend-edge-width;
height: $legend-edge-height;
+ /* Center edge icon */
+ margin: 0 auto;
+ &.dashed {
+ border-top: dotted;
+ }
+
}
}
diff --git a/src/app/components/query-tile/query-tile.component.html b/src/app/components/query-tile/query-tile.component.html
index 2afbd573..30f9f43c 100644
--- a/src/app/components/query-tile/query-tile.component.html
+++ b/src/app/components/query-tile/query-tile.component.html
@@ -2,9 +2,9 @@
<ng-select [items]="queryItems" bindLabel="id" bindValue="data" [virtualScroll]="true" class="custom"
placeholder="Search..." [hideSelected]="true" [searchFn]="querySearch" (change)="select($event)" data-tooltip="Find proteins in the network.">
<ng-template ng-option-tmp let-item="item">
- <b *ngIf="item.type == 'protein'"> {{item.data.name}}</b>
- <span><small *ngIf="item.type === 'protein'">Host Protein</small> | </span>
- <span *ngIf="item.type == 'protein'"><small>AC: <b>{{item.data.uniprotAc}}</b></small> </span>
+ <b *ngIf="item.data.netexId && item.data.netexId.startsWith('p')"> {{item.data.name}}</b>
+ <span><small *ngIf="item.data.netexId && item.data.netexId.startsWith('p')">Protein</small> | </span>
+ <span *ngIf="item.data.netexId && item.data.netexId.startsWith('p')"><small>AC: <b>{{item.data.uniprotAc}}</b></small> </span>
</ng-template>
</ng-select>
</div>
diff --git a/src/app/components/query-tile/query-tile.component.ts b/src/app/components/query-tile/query-tile.component.ts
index 9dfbdaa7..322fc3c9 100644
--- a/src/app/components/query-tile/query-tile.component.ts
+++ b/src/app/components/query-tile/query-tile.component.ts
@@ -15,7 +15,7 @@ export class QueryTileComponent {
querySearch(term: string, item: Wrapper) {
term = term.toLowerCase();
const data = item.data as Node;
- return data.symbol.toLowerCase().indexOf(term) > -1 || item.type.toLowerCase().indexOf(term) > -1;
+ return data.symbol.toLowerCase().indexOf(term) > -1 || data.uniprotAc.toLowerCase().indexOf(term) > -1;
}
select(item) {
diff --git a/src/app/config.ts b/src/app/config.ts
index ef3e4405..e27f3eec 100644
--- a/src/app/config.ts
+++ b/src/app/config.ts
@@ -2,7 +2,6 @@ export interface NodeGroup {
groupName: string;
color: string;
shape: 'circle' | 'triangle' | 'star' | 'square' | 'image';
- type?: string;
image?: string;
detailShowLabel?: boolean;
}
@@ -11,7 +10,7 @@ export interface EdgeGroup {
groupName: string;
color: string;
// see https://visjs.github.io/vis-network/docs/network/edges.html
- dashes?: false | Array<number>;
+ dashed?: false | Array<number>;
}
export type Identifier = 'symbol'|'uniprot'|'ensg';
@@ -78,20 +77,17 @@ export const defaultConfig: IConfig = {
groupName: 'Default Node Group',
color: 'yellow',
shape: 'triangle',
- type: 'protein',
detailShowLabel: false,
},
default_protein: {
groupName: 'Resulting Proteins',
color: 'red',
shape: 'circle',
- type: 'protein',
},
default_drug: {
groupName: 'Possible Drugs',
color: 'green',
shape: 'star',
- type: 'drug',
}
},
edgeGroups: {
@@ -99,7 +95,7 @@ export const defaultConfig: IConfig = {
// this default group is used for default edge group values
groupName: 'Default Edge Group',
color: 'black',
- dashes: false
+ dashed: false
}
},
};
diff --git a/src/app/dialogs/launch-analysis/launch-analysis.component.ts b/src/app/dialogs/launch-analysis/launch-analysis.component.ts
index bbf91fa3..dc1d4ab2 100644
--- a/src/app/dialogs/launch-analysis/launch-analysis.component.ts
+++ b/src/app/dialogs/launch-analysis/launch-analysis.component.ts
@@ -102,8 +102,7 @@ export class LaunchAnalysisComponent implements OnInit, OnChanges {
}
public async startTask() {
- // filter out all seed nodes that do not have a netex_Id, hence do not
- // exist in the backend
+ // all nodes in selection have netexId, hence exist in the backend
const seeds = this.analysis.getSelection().map((item) => item.data.netexId)
const seedsFiltered = seeds.filter(function (el) {
return el != null;
diff --git a/src/app/interfaces.ts b/src/app/interfaces.ts
index 9f75b456..28336201 100644
--- a/src/app/interfaces.ts
+++ b/src/app/interfaces.ts
@@ -128,7 +128,6 @@ export function getWrapperFromCustom(gene: Node): Wrapper {
return {
id: getNodeId(gene),
nodeId: getNodeId(gene),
- type: 'custom',
data: gene,
};
}
@@ -140,7 +139,6 @@ export function getWrapperFromNode(gene: Node): Wrapper {
return {
id: getNodeId(gene),
nodeId: getNodeId(gene),
- type: 'protein',
data: gene,
};
}
@@ -150,21 +148,15 @@ export function getWrapperFromDrug(drug: Drug): Wrapper {
return {
id: getDrugBackendId(drug),
nodeId: getDrugNodeId(drug),
- type: 'drug',
data: drug,
};
}
-// protein = node that exists as protein in backend
-// drug = drug from backend, found in analysis
-// custom = custom node from user that could not be mapped to protein
-export type WrapperType = 'protein' | 'drug' | 'custom';
export type EdgeType = 'protein-protein' | 'protein-drug';
export interface Wrapper {
id: string;
nodeId: string;
- type: WrapperType;
data: {
id: string;
label: string;
diff --git a/src/app/main-network.ts b/src/app/main-network.ts
index a0aa887c..c1444667 100644
--- a/src/app/main-network.ts
+++ b/src/app/main-network.ts
@@ -1,5 +1,5 @@
import {HttpClient} from '@angular/common/http';
-import { IConfig } from './config';
+import { defaultConfig, IConfig } from './config';
import {NodeInteraction, Node, getProteinNodeId} from './interfaces';
export function getDatasetFilename(dataset: Array<[string, string]>): string {
@@ -41,49 +41,58 @@ export class ProteinNetwork {
}
/** Maps user input node to network node object
+ * If user input node has no group, fall back to default
+ * If user input node has group that is not defined, throw error
*
* @param customNode
* @param config
* @returns
*/
private mapCustomNode(customNode: any, config: IConfig): Node {
-
- if (config.nodeGroups[customNode.group] === undefined) {
- throw `Node with id ${customNode.id} has undefined node group ${customNode.group}.`
+ let node;
+ if (customNode.group === undefined) {
+ // fallback to default node
+ node = {...defaultConfig.nodeGroups.default};
+ } else {
+ if (config.nodeGroups[customNode.group] === undefined) {
+ throw `Node with id ${customNode.id} has undefined node group ${customNode.group}.`
+ }
+ // copy
+ node = {...config.nodeGroups[customNode.group]};
}
-
- let node = JSON.parse(JSON.stringify(config.nodeGroups[customNode.group]));
-
// update the node with custom node properties, including values fetched from backend
node = {
...node,
...customNode
}
-
// label is only used for network visualization
node.label = customNode.label ? customNode.label : customNode.id;
-
if (node.image) {
node.shape = 'image';
}
-
return node;
}
/** Maps user input edge to network edge object
+ * If user input edge has no group, fall back to default
+ * If user input edge has group that is not defined, throw error
*
* @param customEdge
* @param config
* @returns
*/
private mapCustomEdge(customEdge: NodeInteraction, config: IConfig): any {
-
- if (config.edgeGroups[customEdge.group] === undefined) {
- throw `Edge "from ${customEdge.from}" - "to ${customEdge.to}" has undefined edge group ${customEdge.group}.`
+ let edge;
+ if (customEdge.group === undefined) {
+ // fallback to default node
+ edge = {...defaultConfig.edgeGroups.default};
+ } else {
+ if (config.edgeGroups[customEdge.group] === undefined) {
+ throw `Edge "from ${customEdge.from}" - "to ${customEdge.to}" has undefined edge group ${customEdge.group}.`
+ }
+ // copy
+ edge = {...config.edgeGroups[customEdge.group]};
}
-
- let edge = JSON.parse(JSON.stringify(config.edgeGroups[customEdge.group]));
-
edge = {
...edge,
...customEdge
diff --git a/src/app/network-settings.ts b/src/app/network-settings.ts
index 9f4a77fc..3aa64268 100644
--- a/src/app/network-settings.ts
+++ b/src/app/network-settings.ts
@@ -1,4 +1,3 @@
-import {WrapperType} from './interfaces';
import {getGradientColor} from './utils';
export class NetworkSettings {
@@ -77,25 +76,25 @@ export class NetworkSettings {
private static drugNotInTrialShape = 'box';
private static drugInTrialShape = 'triangle';
- static getNodeSize(wrapperType: WrapperType) {
- if (wrapperType === 'protein') {
- return this.hostSize;
- } else if (wrapperType === 'drug') {
- return this.drugSize;
- }
- }
-
- static getNodeShape(wrapperType: WrapperType, drugInTrial?: boolean) {
- if (wrapperType === 'protein') {
- return this.hostShape;
- } else if (wrapperType === 'drug') {
- if (drugInTrial) {
- return this.drugInTrialShape;
- } else {
- return this.drugNotInTrialShape;
- }
- }
- }
+ // static getNodeSize(wrapperType: WrapperType) {
+ // if (wrapperType === 'protein') {
+ // return this.hostSize;
+ // } else if (wrapperType === 'drug') {
+ // return this.drugSize;
+ // }
+ // }
+
+ // static getNodeShape(wrapperType: WrapperType, drugInTrial?: boolean) {
+ // if (wrapperType === 'protein') {
+ // return this.hostShape;
+ // } else if (wrapperType === 'drug') {
+ // if (drugInTrial) {
+ // return this.drugInTrialShape;
+ // } else {
+ // return this.drugNotInTrialShape;
+ // }
+ // }
+ // }
static getOptions(network: 'main' | 'analysis' | 'analysis-big') {
if (network === 'main') {
@@ -149,88 +148,88 @@ export class NetworkSettings {
}
}
- static getFont(wrapperType: WrapperType, drugInTrial?: boolean) {
- if (wrapperType === 'protein') {
- return {color: this.hostFontColor, size: this.hostFontSize};
- } else if (wrapperType === 'drug') {
- if (!drugInTrial) {
- return {color: this.drugFontColor, size: this.drugFontSize};
- } else {
- return {color: this.drugInTrialFontColor, size: this.drugFontSize};
- }
- }
- }
-
- static getNodeStyle(nodeType: WrapperType,
- isSeed: boolean,
- isSelected: boolean,
- drugType?: string,
- drugInTrial?: boolean,
- gradient?: number): any {
- if (!gradient) {
- gradient = 1.0;
- }
- let nodeColor;
- let nodeShape;
- let nodeSize;
- let nodeFont;
- const nodeShadow = true;
- nodeShape = NetworkSettings.getNodeShape(nodeType);
- nodeSize = NetworkSettings.getNodeSize(nodeType);
- nodeFont = NetworkSettings.getFont(nodeType);
- if (nodeType === 'protein') {
- nodeColor = NetworkSettings.getColor(nodeType);
- nodeFont = NetworkSettings.getFont('protein');
- if (!isSeed) {
- nodeColor = NetworkSettings.getColor('nonSeedHost');
- }
- } else if (nodeType === 'drug') {
- if (drugType === 'approved') {
- nodeColor = NetworkSettings.getColor('approvedDrug');
- } else {
- nodeColor = NetworkSettings.getColor('unapprovedDrug');
- }
- if (drugInTrial) {
- nodeShape = NetworkSettings.getNodeShape('drug', true);
- nodeFont = NetworkSettings.getFont('drug', true);
- } else {
- nodeShape = NetworkSettings.getNodeShape('drug', false);
- }
- }
-
- if (gradient === -1) {
- nodeColor = '#A0A0A0';
- } else {
- nodeColor = getGradientColor('#FFFFFF', nodeColor, gradient);
- }
-
- const node: any = {
- size: nodeSize,
- shape: nodeShape,
- font: nodeFont,
- shadow: nodeShadow,
- };
-
- if (isSelected) {
- node.color = {
- background: nodeColor,
- border: this.selectedBorderColor,
- highlight: {
- border: this.selectBorderHighlightColor,
- background: nodeColor,
- },
- };
-
- node.borderWidth = this.selectedBorderWidth;
- node.borderWidthSelected = this.selectedBorderWidthSelected;
- } else {
- node.color = nodeColor;
-
- node.borderWidth = this.borderWidth;
- node.borderWidthSelected = this.borderWidthSelected;
- }
-
- return node;
- }
+ // static getFont(wrapperType: WrapperType, drugInTrial?: boolean) {
+ // if (wrapperType === 'protein') {
+ // return {color: this.hostFontColor, size: this.hostFontSize};
+ // } else if (wrapperType === 'drug') {
+ // if (!drugInTrial) {
+ // return {color: this.drugFontColor, size: this.drugFontSize};
+ // } else {
+ // return {color: this.drugInTrialFontColor, size: this.drugFontSize};
+ // }
+ // }
+ // }
+
+ // static getNodeStyle(nodeType: WrapperType,
+ // isSeed: boolean,
+ // isSelected: boolean,
+ // drugType?: string,
+ // drugInTrial?: boolean,
+ // gradient?: number): any {
+ // if (!gradient) {
+ // gradient = 1.0;
+ // }
+ // let nodeColor;
+ // let nodeShape;
+ // let nodeSize;
+ // let nodeFont;
+ // const nodeShadow = true;
+ // nodeShape = NetworkSettings.getNodeShape(nodeType);
+ // nodeSize = NetworkSettings.getNodeSize(nodeType);
+ // nodeFont = NetworkSettings.getFont(nodeType);
+ // if (nodeType === 'protein') {
+ // nodeColor = NetworkSettings.getColor(nodeType);
+ // nodeFont = NetworkSettings.getFont('protein');
+ // if (!isSeed) {
+ // nodeColor = NetworkSettings.getColor('nonSeedHost');
+ // }
+ // } else if (nodeType === 'drug') {
+ // if (drugType === 'approved') {
+ // nodeColor = NetworkSettings.getColor('approvedDrug');
+ // } else {
+ // nodeColor = NetworkSettings.getColor('unapprovedDrug');
+ // }
+ // if (drugInTrial) {
+ // nodeShape = NetworkSettings.getNodeShape('drug', true);
+ // nodeFont = NetworkSettings.getFont('drug', true);
+ // } else {
+ // nodeShape = NetworkSettings.getNodeShape('drug', false);
+ // }
+ // }
+
+ // if (gradient === -1) {
+ // nodeColor = '#A0A0A0';
+ // } else {
+ // nodeColor = getGradientColor('#FFFFFF', nodeColor, gradient);
+ // }
+
+ // const node: any = {
+ // size: nodeSize,
+ // shape: nodeShape,
+ // font: nodeFont,
+ // shadow: nodeShadow,
+ // };
+
+ // if (isSelected) {
+ // node.color = {
+ // background: nodeColor,
+ // border: this.selectedBorderColor,
+ // highlight: {
+ // border: this.selectBorderHighlightColor,
+ // background: nodeColor,
+ // },
+ // };
+
+ // node.borderWidth = this.selectedBorderWidth;
+ // node.borderWidthSelected = this.selectedBorderWidthSelected;
+ // } else {
+ // node.color = nodeColor;
+
+ // node.borderWidth = this.borderWidth;
+ // node.borderWidthSelected = this.borderWidthSelected;
+ // }
+
+ // return node;
+ // }
}
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index bc9f5584..99c1b0e6 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -184,14 +184,14 @@
<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 === 'drug'" class="fas fa-capsules"
- aria-hidden="true"></i>
+ <!-- <i *ngIf="selectedWrapper && selectedWrapper.data.netexId && selectedWrapper.data.netexId.startsWith('p')" class="fas fa-dna" aria-hidden="true"></i>
+ <i *ngIf="selectedWrapper && selectedWrapper.data.netexId && selectedWrapper.data.netexId.startsWith('d')" 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 === 'drug'">Drug</span>
+ <span *ngIf="selectedWrapper && selectedWrapper.data.netexId">
+ <!-- <span *ngIf="selectedWrapper.data.type">selectedWrapper.data.type</span> -->
+ <span *ngIf="selectedWrapper.data.netexId.startsWith('d')">Drug</span>
</span>
</p>
<a (click)="collapseDetails = !collapseDetails" data-action="collapse"
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index 73fe5295..65ab579d 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -392,9 +392,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
}
// make sure all keys are set
Object.entries(edgeGroups).forEach(([key, value]) => {
- if (!('dashes' in value)) {
- // use dashes default value if not set
- value['dashes'] = defaultConfig.edgeGroups.default.dashes;
+ if (!('dashed' in value)) {
+ // use dashed default value if not set
+ value['dashed'] = defaultConfig.edgeGroups.default.dashed;
}
})
// override default node groups
@@ -424,8 +424,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
}
gProfilerLink(): string {
+ // nodes in selection have netexId
const queryString = this.analysis.getSelection()
- .filter(wrapper => wrapper.type === 'protein')
+ .filter(wrapper => wrapper.data.netexId.startsWith('p'))
.map(wrapper => wrapper.data.uniprotAc)
.join('%0A');
return 'http://biit.cs.ut.ee/gprofiler/gost?' +
@@ -457,14 +458,14 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
const pos = this.networkInternal.getPositions([item.nodeId]);
node.x = pos[item.nodeId].x;
node.y = pos[item.nodeId].y;
- Object.assign(node,
- NetworkSettings.getNodeStyle(
- node.wrapper.type,
- node.isSeed,
- this.analysis.inSelection(item),
- undefined,
- undefined,
- 1.0));
+ // Object.assign(node,
+ // NetworkSettings.getNodeStyle(
+ // node.wrapper.type,
+ // node.isSeed,
+ // this.analysis.inSelection(item),
+ // undefined,
+ // undefined,
+ // 1.0));
node.wrapper = item;
node.gradient = 1.0;
// protein.expressionLevel = undefined;
diff --git a/src/index.html b/src/index.html
index 7311a881..15fb3c4d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -38,13 +38,16 @@
<network-expander id="netexp1"
config='{
- "nodeGroups": {"0.5": {"type": "gene", "color": "rgb(204, 255, 51)", "groupName": "0.5", "shape": "circle"}, "patient_group": {"type": "patient", "color": "red", "groupName": "patient group", "shape": "circle"}},
- "edgeGroups": {"dashes": {"color": "black", "groupName": "Dashes Group", "dashes": [1, 2]}},
+ "nodeGroups": {"0.5": {"color": "rgb(204, 255, 51)", "groupName": "0.5", "shape": "circle"}, "patient_group": {"detailShowLabel": "true", "color": "red", "groupName": "patient group", "shape": "circle"}},
+ "edgeGroups": {"dashed": {"color": "black", "groupName": "Dashed Group", "dashed": [1, 2]}, "notdashed": {"color": "black", "groupName": "not Dashed Group"}},
"identifier": "symbol"
}'
network='{
- "nodes": [{"id": "TP53", "group": "0.5"}, {"id": "C5", "group": "0.5"}, {"id": "Patient", "group": "patient_group"}, {"label": "PTEN", "id": "PTEN", "group": 0.5}],
- "edges": [{"from": "TP53","to": "C5","group": "dashes", "label": "this is a label", "title": "this is a title"}]
+ "nodes": [{"id": "MYC", "label": "node w/o group"}, {"id": "TP53", "group": "0.5"}, {"id": "C5", "group": "0.5"}, {"id": "Patient", "group": "patient_group"}, {"label": "PTEN", "id": "PTEN", "group": 0.5}],
+ "edges": [
+ {"from": "TP53","to": "C5","group": "dashed", "label": "this is a label", "title": "this is a title"},
+ {"from": "Patient No. 5","to": "C5","label": "w/o group"}
+ ]
}'
style="height: 100%; width: 100vw; display: block;"
></network-expander>
--
GitLab