diff --git a/src/app/components/info-tile/info-tile.component.html b/src/app/components/info-tile/info-tile.component.html
index 43201efbcdfedccebf24814eadf22fd60bc31957..50881477dc63319433dd796d2a561af899f89cf4 100644
--- a/src/app/components/info-tile/info-tile.component.html
+++ b/src/app/components/info-tile/info-tile.component.html
@@ -1,6 +1,6 @@
<div *ngIf="wrapper">
<div>
- <p *ngIf="wrapper.data.label" [ngClass]="{'text-normal':smallStyle}">
+ <p *ngIf="wrapper.data.detailShowLabel && wrapper.data.label" [ngClass]="{'text-normal':smallStyle}">
<b><span>Label:</span></b>
<span class="is-capitalized"> {{ wrapper.data.label }}</span>
</p>
@@ -18,9 +18,9 @@
<span class="is-capitalized"> {{ wrapper.data.drugId }}</span>
</a>
</p>
- <p *ngIf="wrapper.data.group" [ngClass]="{'text-normal':smallStyle}">
+ <p *ngIf="wrapper.data.groupName" [ngClass]="{'text-normal':smallStyle}">
<b><span>Group:</span></b>
- <span class="is-capitalized"> {{ wrapper.data.group }}</span>
+ <span class="is-capitalized"> {{ wrapper.data.groupName }}</span>
</p>
<p *ngIf="wrapper.data.uniprotAc" [ngClass]="{'text-normal':smallStyle}">
<b><span>Access:</span></b>
diff --git a/src/app/config.ts b/src/app/config.ts
index b284320c5490c8962a1166aecedac58e57ac7311..ef3e4405626cffe75e2921d26d72b26334891372 100644
--- a/src/app/config.ts
+++ b/src/app/config.ts
@@ -1,21 +1,14 @@
-// export interface NodeGroup {
-// fill: string;
-// }
-//
-// export interface EdgeGroup {
-// color: string;
-// }
-
export interface NodeGroup {
- name: string;
+ groupName: string;
color: string;
shape: 'circle' | 'triangle' | 'star' | 'square' | 'image';
- type: 'gene' | 'protein' | 'drug';
+ type?: string;
image?: string;
+ detailShowLabel?: boolean;
}
export interface EdgeGroup {
- name: string;
+ groupName: string;
color: string;
// see https://visjs.github.io/vis-network/docs/network/edges.html
dashes?: false | Array<number>;
@@ -54,6 +47,10 @@ export interface IConfig {
identifier?: Identifier;
}
+/**
+ * Provide default values
+ */
+
export const defaultConfig: IConfig = {
legendUrl: '', // 'https://exbio.wzw.tum.de/covex/assets/leg1.png' show legend image if set, otherwise default legend
legendClass: 'legend',
@@ -77,19 +74,21 @@ export const defaultConfig: IConfig = {
interactionProteinProtein: 'STRING',
nodeGroups: {
default: {
- name: 'Default Group',
+ // this default group is used for default node group values
+ groupName: 'Default Node Group',
color: 'yellow',
shape: 'triangle',
type: 'protein',
+ detailShowLabel: false,
},
- protein: {
- name: 'Resulting Proteins',
+ default_protein: {
+ groupName: 'Resulting Proteins',
color: 'red',
shape: 'circle',
type: 'protein',
},
- drug: {
- name: 'Possible Drugs',
+ default_drug: {
+ groupName: 'Possible Drugs',
color: 'green',
shape: 'star',
type: 'drug',
@@ -97,8 +96,10 @@ export const defaultConfig: IConfig = {
},
edgeGroups: {
default: {
- name: 'Edgy edges',
- color: 'black'
+ // this default group is used for default edge group values
+ groupName: 'Default Edge Group',
+ color: 'black',
+ dashes: false
}
},
};
diff --git a/src/app/interfaces.ts b/src/app/interfaces.ts
index 0776354581ff56a88fb41150e974c0a499944e26..bed1808d32a7c035107bb80f86be321c73644f40 100644
--- a/src/app/interfaces.ts
+++ b/src/app/interfaces.ts
@@ -8,6 +8,7 @@ export interface Node {
uniprotAc?: string;
ensg?: Array<string>;
group?: string;
+ groupName?: string;
color?: string;
shape?: string;
interactions?: Node[];
@@ -172,6 +173,7 @@ export interface Wrapper {
color?: string;
interactions?: any;
group?: string;
+ groupName?: string;
uniprotAc?: string;
expressionLevel?: number;
x?: number;
@@ -181,6 +183,7 @@ export interface Wrapper {
inTrial?: boolean;
inLiterature?: boolean;
trialLinks?: string[];
+ detailShowLabel?: boolean;
};
}
diff --git a/src/app/main-network.ts b/src/app/main-network.ts
index 869a372e336d4114b94b02c262587c5fe0c56201..d6f1a124a8973e4a33cbf59a861a94856fb8188f 100644
--- a/src/app/main-network.ts
+++ b/src/app/main-network.ts
@@ -53,13 +53,6 @@ export class ProteinNetwork {
}
let node = JSON.parse(JSON.stringify(config.nodeGroups[group]));
- // remove group name
- delete node.name
-
- // 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";
// update the node with custom node properties, including values fetched from backend
node = {
... node,
@@ -67,6 +60,7 @@ export class ProteinNetwork {
}
// label is only used for network visualization
+ console.log(customNode)
node.label = customNode.label ? customNode.label : customNode.id;
if (node.image) {
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index 5cba20c5613ba3d6fcd8312e70e6f05f098468cc..0cb436074123bb63e7eabf8e65d82b6033168f54 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -13,7 +13,6 @@ import {
Tissue
} from '../../interfaces';
import {ProteinNetwork} from '../../main-network';
-import {HttpClient} from '@angular/common/http';
import {AnalysisService} from '../../services/analysis/analysis.service';
import {OmnipathControllerService} from '../../services/omnipath-controller/omnipath-controller.service';
import html2canvas from 'html2canvas';
@@ -38,6 +37,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
private networkJSON = '{"nodes": [], "edges": []}';
+ // set default config on init
public myConfig: IConfig = JSON.parse(JSON.stringify(defaultConfig));
@Input()
@@ -53,11 +53,17 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
for (const key of Object.keys(configObj)) {
if (key === 'nodeGroups' ) {
this.setConfigNodeGroup(key, configObj[key]);
+ // dont set the key here, will be set in function
+ continue;
} else if (key === 'edgeGroups') {
this.setConfigEdgeGroup(key, configObj[key])
+ // dont set the key here, will be set in function
+ continue;
}
else if (key === 'interactions') {
this.getInteractions();
+ // dont set the key here, will be set in function
+ continue;
} else if (key === 'showLeftSidebar') {
if (configObj[key]) {
// shrink main column
@@ -343,30 +349,54 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
}
/**
- * Function to set the node group attribute in config
- * Handles setting defaults
+ * Function to set the node group attribute in config
+ * Validates input NodeGroups and handles setting defaults
* @param key
* @param values
*/
- public setConfigNodeGroup(key: string, values: Array<NodeGroup>) {
- this.myConfig[key] = {...this.myConfig[key], ...values};
+ public setConfigNodeGroup(key: string, nodeGroups: Array<NodeGroup>) {
+ console.log(Object.keys(nodeGroups).length)
+ if (nodeGroups === undefined || !Object.keys(nodeGroups).length) {
+ // if node groups are not set or empty, use default edge group(s)
+ this.myConfig[key] = defaultConfig.nodeGroups;
+ // stop if nodeGroups do not contain any information
+ return
+ }
+ // make sure all keys are set
+ Object.entries(nodeGroups).forEach(([key, value]) => {
+ if (!('detailShowLabel' in value)) {
+ // use detailShowLabel default value if not set
+ value['detailShowLabel'] = defaultConfig.nodeGroups.default.detailShowLabel;
+ }
+ })
+
+ // override default edge groups
+ this.myConfig[key] = nodeGroups;
+ console.log(nodeGroups)
}
/**
* Function to set the edge group attribute in config
- * Handles setting defaults
+ * Validates input EdgeGroups and handles setting defaults
* @param key
* @param values
*/
public setConfigEdgeGroup(key: string, edgeGroups: Array<EdgeGroup>) {
+ if (edgeGroups === undefined || !edgeGroups.length) {
+ // if edge groups are not set or empty, use default edge group(s)
+ this.myConfig[key] = defaultConfig.edgeGroups;
+ // stop if edgeGroups do not contain any information
+ return
+ }
// make sure all keys are set
Object.entries(edgeGroups).forEach(([key, value]) => {
if (!('dashes' in value)) {
- // dashes defaults to 'false' if not set
- value['dashes'] = false;
+ // use dashes default value if not set
+ value['dashes'] = defaultConfig.edgeGroups.default.dashes;
}
})
- this.myConfig[key] = {...this.myConfig[key], ...edgeGroups};
+ // override default node groups
+ this.myConfig[key] = edgeGroups;
}
public toCanvas() {
diff --git a/src/index.html b/src/index.html
index 70da15eb8d66c0d4b6108cd6b5f480afc44d82ce..5b34b758f39df3c6fc7e424f835198d9d784d980 100644
--- a/src/index.html
+++ b/src/index.html
@@ -38,10 +38,9 @@
<network-expander id="netexp1"
config='{
- "nodeGroups": {"0.5": {"type": "gene", "color": "rgb(204, 255, 51)", "name": "0.5", "shape": "circle"}, "patient_group": {"type": "patient", "color": "red", "name": "patient group", "shape": "circle"}, "2.0": {"type": "gene", "color": "rgb(51, 204, 51)", "name": "2.0", "shape": "circle"}, "-2.0": {"type": "gene", "color": "rgb(255, 0, 0)", "name": "-2.0", "shape": "circle"}},
- "edgeGroups": {"dashes": {"color": "black", "name": "Custom Group", "dashes": [1, 2]}},
- "identifier": "symbol",
- "legendUrl": "https://exbio.wzw.tum.de/covex/assets/leg1.png"
+ "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]}},
+ "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}],