node shadow and edge shadow

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',

src/app/interfaces.ts

@@ -44,6 +44,7 @@ export interface NodeInteraction {
   group?: string;
   label?: string;
   title?: string;
+  shadow?: boolean;
 }
 
 export interface NetworkEdge {

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

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;

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"}],

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;