Skip to content
Snippets Groups Projects
Commit 18208d12 authored by Michael Hartung's avatar Michael Hartung
Browse files

fallback to default node settings; selected node and seed node styles

parent aa71dd15
No related branches found
No related tags found
No related merge requests found
{ {
"name": "netex", "name": "netex",
"version": "0.4.2", "version": "0.7.1",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
...@@ -7718,6 +7718,11 @@ ...@@ -7718,6 +7718,11 @@
"integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=", "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
"dev": true "dev": true
}, },
"lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
},
"lodash.sortby": { "lodash.sortby": {
"version": "4.7.0", "version": "4.7.0",
"resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
......
...@@ -13,6 +13,7 @@ export class NetworkLegendComponent implements OnInit { ...@@ -13,6 +13,7 @@ export class NetworkLegendComponent implements OnInit {
@Input() set config(value: IConfig) { @Input() set config(value: IConfig) {
// copy to not override user config // copy to not override user config
value = JSON.parse(JSON.stringify(value)); value = JSON.parse(JSON.stringify(value));
delete value.nodeGroups.selectedNode;
if (!this.analysis) { if (!this.analysis) {
// do not show the analysis-groups in the explorer network // do not show the analysis-groups in the explorer network
delete value.nodeGroups.foundNode; delete value.nodeGroups.foundNode;
......
// https://visjs.github.io/vis-network/docs/network/nodes.html
export interface NodeGroup { export interface NodeGroup {
groupName: string; groupName: string;
color: string; color?: string;
shape: 'circle' | 'triangle' | 'star' | 'square' | 'image' | 'text' | 'ellipse' | 'box' | 'diamond' | 'dot'; shape?: 'circle' | 'triangle' | 'star' | 'square' | 'image' | 'text' | 'ellipse' | 'box' | 'diamond' | 'dot';
type: string; type?: string;
image?: string; image?: string;
detailShowLabel?: boolean; detailShowLabel?: boolean;
font?: any;
border?: any;
highlight?: any;
borderWidth?: number;
borderWidthSelected?: number;
} }
export interface EdgeGroup { export interface EdgeGroup {
...@@ -86,6 +92,21 @@ export const defaultConfig: IConfig = { ...@@ -86,6 +92,21 @@ export const defaultConfig: IConfig = {
shape: 'triangle', shape: 'triangle',
type: 'default type', type: 'default type',
detailShowLabel: false, detailShowLabel: false,
font: {
color: 'black',
size: 14,
face: 'arial',
background: undefined,
strokeWidth: 0,
strokeColor: '#ffffff',
align: 'center',
bold: false,
ital: false,
boldital: false,
mono: false,
},
borderWidth: 1,
borderWidthSelected: 3
}, },
foundNode: { foundNode: {
groupName: 'Found Nodes', groupName: 'Found Nodes',
...@@ -101,9 +122,33 @@ export const defaultConfig: IConfig = { ...@@ -101,9 +122,33 @@ export const defaultConfig: IConfig = {
}, },
seedNode: { seedNode: {
groupName: 'Seed Nodes', groupName: 'Seed Nodes',
color: 'blue', // color: '#F8981D',
shape: 'circle', // shape: 'circle',
type: 'seed', // type: 'seed',
border: '#F8981D',
highlight: {
border: '#F8981D',
background: '#F8981D'
},
font: {
color: '#F8981D',
size: 14
}
},
selectedNode: {
groupName: 'Selected Nodes',
color: '#F8981D',
// shape: 'dot',
// type: 'selected',
border: '#F8981D',
highlight: {
border: '#F8981D',
background: '#F8981D'
},
font: {
color: '#F8981D',
size: 14
}
} }
}, },
edgeGroups: { edgeGroups: {
......
...@@ -12,11 +12,16 @@ export interface Node { ...@@ -12,11 +12,16 @@ export interface Node {
groupName?: string; groupName?: string;
color?: string | any; // mostly any, but vis js allows detail settings color?: string | any; // mostly any, but vis js allows detail settings
shape?: string; shape?: string;
image?: string;
interactions?: Node[]; interactions?: Node[];
x?: number; x?: number;
y?: number; y?: number;
borderWidth: number; borderWidth: number;
borderWidthSelected: number; borderWidthSelected: number;
font: {
color: string;
size: number;
}
} }
export interface Tissue { export interface Tissue {
......
...@@ -16,39 +16,15 @@ export class NetworkSettings { ...@@ -16,39 +16,15 @@ export class NetworkSettings {
private static approvedDrugColor = '#48C774'; private static approvedDrugColor = '#48C774';
private static unapprovedDrugColor = '#F8981D'; private static unapprovedDrugColor = '#F8981D';
private static nonSeedHostColor = '#3070B3'; private static nonSeedHostColor = '#3070B3';
private static nonSeedVirusColor = '#87082c';
private static selectedBorderColor = NetworkSettings.Black;
private static selectBorderHighlightColor = NetworkSettings.Black;
private static seedBorderColor = '#F8981D';
private static seedBorderHighlightColor = '#F8981D';
// Edge color // Edge color
private static edgeHostVirusColor = '#686868';
private static edgeHostVirusHighlightColor = '#686868';
private static edgeHostDrugColor = '#686868'; private static edgeHostDrugColor = '#686868';
private static edgeHostDrugHighlightColor = '#686868'; private static edgeHostDrugHighlightColor = '#686868';
private static edgeGeneGeneColor = '#686868'; private static edgeGeneGeneColor = '#686868';
private static edgeGeneGeneHighlightColor = '#686868'; private static edgeGeneGeneHighlightColor = '#686868';
// Border width for nodes in selection
private static selectedBorderWidth = 3;
private static selectedBorderWidthSelected = 3;
// Border width for seed nodes
private static seedBorderWidth = 3;
private static seedBorderWidthSelected = 3;
// Border width
private static borderWidth = 1;
private static borderWidthSelected = 3;
// Node Font
private static hostFontSize = 20;
private static drugFontSize = 30;
private static hostFontColor = NetworkSettings.White; private static hostFontColor = NetworkSettings.White;
private static drugFontColor = NetworkSettings.White; private static drugFontColor = NetworkSettings.White;
private static drugInTrialFontColor = NetworkSettings.Black;
// Network Layout // Network Layout
private static analysisLayout = { private static analysisLayout = {
...@@ -163,18 +139,6 @@ export class NetworkSettings { ...@@ -163,18 +139,6 @@ 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( static getNodeStyle(
node: Node, node: Node,
config: IConfig, config: IConfig,
...@@ -184,123 +148,32 @@ export class NetworkSettings { ...@@ -184,123 +148,32 @@ export class NetworkSettings {
drugInTrial?: boolean, drugInTrial?: boolean,
gradient?: number): any { gradient?: number): any {
let nodeGroupObject;
if (node.group === 'default') { if (node.group === 'default') {
nodeGroupObject = defaultConfig.nodeGroups.default; node = {...node, ...defaultConfig.nodeGroups.default};
} else { } else {
nodeGroupObject = config.nodeGroups[node.group]; node = {...node, ...config.nodeGroups[node.group]};
} }
let nodeColor; // note that seed and selected node style are applied after the node style is fetched.
if (gradient === null) { // this allows to overwrite only attributes of interest, therefor in e.g. seedNode group
nodeColor = NetworkSettings.Grey; // certain attributes like shape can remain undefined
} else {
nodeColor = getGradientColor(NetworkSettings.White, nodeGroupObject.color, gradient);
}
// vis js style attributes
const nodeShadow = true;
// const nodeShape = node.shape;
// const nodeSize = 10;
// const nodeFont = node.font;
if (isSeed) { if (isSeed) {
node.color = { // apply seed node style to node
background: nodeColor, node = {...node, ...config.nodeGroups.seedNode};
border: this.seedBorderColor,
highlight: {
border: this.seedBorderHighlightColor,
background: nodeColor
}
};
node.borderWidth = this.seedBorderWidth;
node.borderWidthSelected = this.seedBorderWidthSelected;
} else if (isSelected) { } else if (isSelected) {
node.color = { // apply selected node style to node
background: nodeColor, node = {...node, ...config.nodeGroups.selectedNode};
border: this.selectedBorderColor,
highlight: {
border: this.selectBorderHighlightColor,
background: nodeColor
} }
}; // show image if image url is given
node.borderWidth = this.selectedBorderWidth; if (node.image) {
node.borderWidthSelected = this.selectedBorderWidthSelected; node.shape = 'image';
}
// calculate color gradient if gradient is givel
if (gradient === null) {
node.color = NetworkSettings.Grey;
} else { } else {
node.color = nodeColor; node.color = getGradientColor(NetworkSettings.White, node.color, gradient);
node.borderWidth = this.borderWidth;
node.borderWidthSelected = this.borderWidthSelected;
} }
return node; return node;
} }
// static getNodeStyleOld(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 = NetworkSettings.GREY;
// } else {
// nodeColor = getGradientColor(NetworkSettings.WHITE, 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;
// }
} }
...@@ -21,6 +21,7 @@ import {NetworkSettings} from '../../network-settings'; ...@@ -21,6 +21,7 @@ import {NetworkSettings} from '../../network-settings';
import {defaultConfig, EdgeGroup, IConfig, InteractionDatabase, NodeGroup} from '../../config'; import {defaultConfig, EdgeGroup, IConfig, InteractionDatabase, NodeGroup} from '../../config';
import {NetexControllerService} from 'src/app/services/netex-controller/netex-controller.service'; import {NetexControllerService} from 'src/app/services/netex-controller/netex-controller.service';
import {rgbaToHex, rgbToHex, standardize_color} from '../../utils' import {rgbaToHex, rgbToHex, standardize_color} from '../../utils'
import * as merge from 'lodash/fp/merge';
// import * as 'vis' from 'vis-network'; // import * as 'vis' from 'vis-network';
// import {DataSet} from 'vis-data'; // import {DataSet} from 'vis-data';
// import {vis} from 'src/app/scripts/vis-network.min.js'; // import {vis} from 'src/app/scripts/vis-network.min.js';
...@@ -53,10 +54,10 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -53,10 +54,10 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
} }
// check if config updates affect network // check if config updates affect network
let updateNetworkFlag = false; let updateNetworkFlag = false;
const configObj = JSON.parse(config); const configObj = JSON.parse(config);
for (const key of Object.keys(configObj)) { for (const key of Object.keys(configObj)) {
if (key === 'nodeGroups') { if (key === 'nodeGroups') {
console.log("set node config")
this.setConfigNodeGroup(key, configObj[key]); this.setConfigNodeGroup(key, configObj[key]);
updateNetworkFlag = true; updateNetworkFlag = true;
// dont set the key here, will be set in function // dont set the key here, will be set in function
...@@ -107,7 +108,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -107,7 +108,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
return; return;
} }
this.networkJSON = network; this.networkJSON = network;
console.log(this.myConfig)
this.createNetwork(); this.createNetwork();
} }
...@@ -412,20 +412,26 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -412,20 +412,26 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
// stop if nodeGroups do not contain any information // stop if nodeGroups do not contain any information
return; return;
} }
// // do not allow '_' in node Group names since it causes problems with backend // // do not allow '_' in node Group names since it causes problems with backend
// nodeGroups = removeUnderscoreFromKeys(nodeGroups) // nodeGroups = removeUnderscoreFromKeys(nodeGroups)
// make sure all keys are set // make sure all keys are set
Object.entries(nodeGroups).forEach(([key, group]) => { Object.entries(nodeGroups).forEach(([key, group]) => {
if (!('color' in group)) {
// use detailShowLabel default value if not set
group['color'] = defaultConfig.nodeGroups.default.color;
}
if (!('detailShowLabel' in group)) { if (!('detailShowLabel' in group)) {
// use detailShowLabel default value if not set // use detailShowLabel default value if not set
group['detailShowLabel'] = defaultConfig.nodeGroups.default.detailShowLabel; group['detailShowLabel'] = defaultConfig.nodeGroups.default.detailShowLabel;
} }
if (!('font' in group)) {
// use detailShowLabel default value if not set
group['font'] = defaultConfig.nodeGroups.default.font;
}
// color needs to be hexacode to calculate gradient // color needs to be hexacode to calculate gradient
if (!group.color.startsWith('#')) { if (!group.color.startsWith('#')) {
// color is either rgba, rgb or string like "red" // color is either rgba, rgb or string like "red"
console.log(group.color)
if (group.color.startsWith('rgba')) { if (group.color.startsWith('rgba')) {
group.color = rgbaToHex(group.color).slice(0, 7) group.color = rgbaToHex(group.color).slice(0, 7)
} else if (group.color.startsWith('rgb')) { } else if (group.color.startsWith('rgb')) {
...@@ -433,7 +439,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -433,7 +439,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
} else ( } else (
group.color = standardize_color(group.color) group.color = standardize_color(group.color)
) )
console.log(group.color)
} }
}); });
...@@ -442,8 +447,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -442,8 +447,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
// if user has set nodeGroups, do not use group "default" // if user has set nodeGroups, do not use group "default"
delete defaultNodeGroups.default; delete defaultNodeGroups.default;
// if user has not set the return-groups, take the defaults // if user has not set the return-groups, take the defaults
nodeGroups = {...defaultNodeGroups, ...nodeGroups}; // user merge function to do deep merge
// override default node groups nodeGroups = merge(defaultNodeGroups, nodeGroups);
// overwrite default node groups
this.myConfig[key] = nodeGroups; this.myConfig[key] = nodeGroups;
} }
...@@ -529,7 +535,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -529,7 +535,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
} }
public selectTissue(tissue: Tissue | null) { public selectTissue(tissue: Tissue | null) {
console.log("here")
this.expressionExpanded = false; this.expressionExpanded = false;
if (!tissue) { if (!tissue) {
this.selectedTissue = null; this.selectedTissue = null;
......
...@@ -87,10 +87,7 @@ export class NetexControllerService { ...@@ -87,10 +87,7 @@ export class NetexControllerService {
* Returns the expression in the given tissue for given nodes and cancerNodes * Returns the expression in the given tissue for given nodes and cancerNodes
*/ */
// slice prefix of netex id away for direct lookup in db, if node not mapped to db, replace by undefined // slice prefix of netex id away for direct lookup in db, if node not mapped to db, replace by undefined
console.log("before genesBackendIds")
const genesBackendIds = nodes.map( (node: Node) => node.netexId ? node.netexId.slice(1) : undefined); const genesBackendIds = nodes.map( (node: Node) => node.netexId ? node.netexId.slice(1) : undefined);
console.log("genesBackendIds")
console.log(genesBackendIds)
const params = new HttpParams() const params = new HttpParams()
.set('tissue', tissue.netexId) .set('tissue', tissue.netexId)
.set('proteins', JSON.stringify(genesBackendIds)); .set('proteins', JSON.stringify(genesBackendIds));
......
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
<network-expander id="netexp1" <network-expander id="netexp1"
config='{ config='{
"nodeGroups": {"0.5": {"type": "0.5er Instanz", "color": "green", "groupName": "0.5", "shape": "hexagon"}, "patientgroup": {"type": "Patient", "detailShowLabel": "true", "color": "#632345", "groupName": "patient group", "shape": "dot", "size": "50"}, "pugGroup": {"type": "woof woof", "color": "grey", "groupName": "Pug Group", "shape": "triangle", "image": "https://static.raymondcamden.com/images/2016/11/pug.png"}}, "nodeGroups": {"selectedNode": {"font": {"size": "18"} }, "0.5": {"font": "18px verdana blue", "type": "0.5er Instanz", "color": "green", "groupName": "0.5", "shape": "hexagon"}, "patientgroup": {"type": "Patient", "detailShowLabel": "true", "color": "#632345", "groupName": "patient group", "shape": "dot", "size": "50"}, "pugGroup": {"type": "woof woof", "color": "grey", "groupName": "Pug Group", "shape": "triangle", "image": "https://static.raymondcamden.com/images/2016/11/pug.png"}},
"edgeGroups": {"dashes": {"color": "black", "groupName": "dashes Group", "dashes": [1, 2]}, "notdashes": {"color": "black", "groupName": "not dashes Group"}}, "edgeGroups": {"dashes": {"color": "black", "groupName": "dashes Group", "dashes": [1, 2]}, "notdashes": {"color": "black", "groupName": "not dashes Group"}},
"identifier": "symbol" "identifier": "symbol"
}' }'
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment