diff --git a/src/app/config.ts b/src/app/config.ts index 79e05d6c3c949d26faf027d0d2a070e10149def0..ab2ff2790c38c14ae38b7d23c03dcf5bc1fa88bf 100644 --- a/src/app/config.ts +++ b/src/app/config.ts @@ -12,6 +12,7 @@ export interface NodeGroup { borderWidth?: number; borderWidthSelected?: number; background?: any; + shadow?: any; } export interface EdgeGroup { @@ -19,6 +20,7 @@ export interface EdgeGroup { color: string; // see https://visjs.github.io/vis-network/docs/network/edges.html dashes?: false | Array<number>; + shadow?: any; } export type Identifier = 'symbol'|'uniprot'|'ensg'; @@ -55,6 +57,8 @@ export interface IConfig { interactionProteinProtein: InteractionProteinProteinDB; interactions?: InteractionDatabase; identifier?: Identifier; + nodeShadow?: boolean; + edgeShadow?: boolean; } /** @@ -85,6 +89,8 @@ export const defaultConfig: IConfig = { identifier: 'symbol', interactionDrugProtein: 'DrugBank', interactionProteinProtein: 'STRING', + nodeShadow: true, + edgeShadow: true, nodeGroups: { // all NodeGroups but the default group must be set, if not provided by the user, they will be taken from here // IMPORTANT: node color must be hexacode! @@ -99,6 +105,7 @@ export const defaultConfig: IConfig = { border: '#FF0000', background: '#FF0000' }, + shadow: true, }, shape: 'triangle', type: 'default type', diff --git a/src/app/interfaces.ts b/src/app/interfaces.ts index c93617025f8b74d3af56cd9d2e81dc0eb0c77fc2..2e6a5760d437d7ee8a0800498ebbb1b65bcb2ac0 100644 --- a/src/app/interfaces.ts +++ b/src/app/interfaces.ts @@ -44,6 +44,7 @@ export interface NodeInteraction { group?: string; label?: string; title?: string; + shadow?: boolean; } export interface NetworkEdge { diff --git a/src/app/network-settings.ts b/src/app/network-settings.ts index 717f8c27c00ac1d932f1889121930df94dc3d587..46dfcf39da95860a566772ebb9541815666ceb27 100644 --- a/src/app/network-settings.ts +++ b/src/app/network-settings.ts @@ -152,6 +152,7 @@ export class NetworkSettings { if (node.image) { node.shape = 'image'; } + // use opactiy as gradient if (gradient === null) { node.opacity = 0 diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts index e190b0d26cdb3c3674f6a823b3612cd909e00da5..98bbfcf66a914a6df94c11aebd51f432f6a5bff7 100644 --- a/src/app/pages/explorer-page/explorer-page.component.ts +++ b/src/app/pages/explorer-page/explorer-page.component.ts @@ -25,6 +25,7 @@ import {defaultConfig, EdgeGroup, IConfig, InteractionDatabase, NodeGroup} from import {NetexControllerService} from 'src/app/services/netex-controller/netex-controller.service'; import {removeDuplicateObjectsFromList, rgbaToHex, rgbToHex, standardize_color} from '../../utils' import * as merge from 'lodash/fp/merge'; +import { config } from 'rxjs'; // import * as 'vis' from 'vis-network'; // import {DataSet} from 'vis-data'; @@ -479,8 +480,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { if (nodeGroups === undefined || !Object.keys(nodeGroups).length) { // if node groups are not set or empty, use default node group(s) this.myConfig[key] = defaultConfig.nodeGroups; - // stop if nodeGroups do not contain any information - return; } // make sure all keys are set @@ -522,6 +521,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { if (group.image) { group.shape = 'image'; } + // implement nodeShadow option, it needs to be set for all nodes or none + group.shadow = this.myConfig.nodeShadow; + // color needs to be hexacode to calculate gradient, group.color might not be set for seed and selected group // if (!group.color.startsWith('#')) { // // color is either rgba, rgb or string like "red" @@ -569,6 +571,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { // use dashes default value if not set value['dashes'] = defaultConfig.edgeGroups.default.dashes; } + + // implement edgeShadow option, it needs to be set for all nodes or none + value.shadow = this.myConfig.edgeShadow; }); // override default node groups this.myConfig[key] = edgeGroups; diff --git a/src/index.html b/src/index.html index 57a79c49ade8c5194954d12699c033595a477f78..90593de97587d8dc0b0c0aede9f94850c93c2902 100644 --- a/src/index.html +++ b/src/index.html @@ -35,9 +35,11 @@ <network-expander id="netexp1" config='{ - "nodeGroups": {"selectedNode": {"font": {"size": "18"} }, "0.5": {"font": "18px verdana blue", "type": "0.5er Instanz", "color": "green", "groupName": "0.5", "shape": "star"}, "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": {"shadow":"true","font": "18px verdana blue", "type": "0.5er Instanz", "color": "green", "groupName": "0.5", "shape": "star"}, "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": {"xxx": {"color": "black", "groupName": "xxx Group", "dashes": [1, 2]}, "notdashes": {"color": "black", "groupName": "not dashes Group"}}, - "identifier": "symbol" + "identifier": "symbol", + "nodeShadow": "true", + "edgeShadow": "true" }' network='{ "nodes": [{"id": "TP53", "group": "0.5"}, {"id": "MYC", "group": "pugGroup"}, {"id": "Patient No. 5", "group": "patientgroup"}, {"label": "PTEN", "id": "PTEN", "group": 0.5, "value":"5"}], diff --git a/src/theme-styles.scss b/src/theme-styles.scss index eb50f8a59a677d32b25f36ae1d0e69581a10f4ae..2735e244171d8759ed66f1024d6481eac4bd6e87 100644 --- a/src/theme-styles.scss +++ b/src/theme-styles.scss @@ -233,7 +233,7 @@ a:hover { // scrolllbar styles network-expander { --thumbBG: var(--drgstn-primary); - --scrollbarBG: var(--drgstn-secondary); + --scrollbarBG: var(--drgstn-background); } network-expander { scrollbar-width: thin;