added possible propagation to external events on mouse enter, leave

src/plugin/depiction.ts

@@ -196,8 +196,8 @@ class Depiction {
                 .attr("r", x => firstScale.radiusScale(x.value))
                 .attr("fill", x=> firstScale.colorScale(x.value))
                 .attr("fill-opacity", "0.5")
-                .on('mouseenter', (x:Atom) => this.atomMouseEnterEventHandler(x))
-                .on('mouseleave', () => this.atomMouseLeaveEventHandler());     
+                .on('mouseenter', (x:Atom) => this.atomMouseEnterEventHandler(x, true))
+                .on('mouseleave', () => this.atomMouseLeaveEventHandler(true));     
             
     }
 
@@ -310,21 +310,23 @@ class Depiction {
      * depicting their weights
      * @public
      * @param {Atom} atom object
+     * @param {boolean} propagation if event should be triggered on external components
      * @memebrof Depiction
      */
 
-    public atomMouseEnterEventHandler(x: Atom){
-        this.fireExternalAtomEvent(x, Config.LigandShowAtomEvent);
+    public atomMouseEnterEventHandler(x: Atom, propagation: boolean){
+        this.fireExternalAtomEvent(x, propagation, Config.LigandShowAtomEvent);
     }
 
     /**
      * Mouse leave event handler for circlea round atoms
      * depicting their weights
      * @public
+     * @param {boolean} propagation if event should be triggered on external components
      * @memberof Depiction
      */
-    public atomMouseLeaveEventHandler(){
-        this.fireExternalNullEvent(Config.LigandHideAtomEvent);
+    public atomMouseLeaveEventHandler(propagation: boolean){
+        this.fireExternalNullEvent(propagation, Config.LigandHideAtomEvent);
     }
     // #endregion
 
@@ -337,11 +339,12 @@ class Depiction {
      * @param {string} eventName name of event
      * @memeberof Depiction
      */
-    private fireExternalAtomEvent(atom: Atom, eventName: string){
+    private fireExternalAtomEvent(atom: Atom, propagation:boolean, eventName: string){
         const e = new CustomEvent(eventName, {
             bubbles: true,
             detail: {
-                tooltip: atom.toTooltip()
+                tooltip: atom.toTooltip(),
+                external: propagation
             }
         });
         this.parent.dispatchEvent(e);
@@ -350,13 +353,16 @@ class Depiction {
     /**
      * Dispatches event to hide tooltip on mouse leave
      * @private
+     * @param {boolean} propagation if event should be triggered on external components
      * @param {string} eventName name of event
      * @memeberof Depiction 
      */
-    private fireExternalNullEvent(eventName: string) {
+    private fireExternalNullEvent(propagation:boolean, eventName: string) {
         const e = new CustomEvent(eventName, {
             bubbles: true,
-            detail: {}
+            detail: {
+                external: propagation
+            }
         });
 
         this.parent.dispatchEvent(e);

src/plugin/manager.ts

@@ -127,14 +127,14 @@ class Visualization {
         const atomName = e.detail.name; // CustomEvent
         const atom = this.depiction.atoms.filter(x => x.value >0 && x.name === atomName);
         if (atom.length > 0) {
-            this.depiction.atomMouseEnterEventHandler(atom[0]);
+            this.depiction.atomMouseEnterEventHandler(atom[0], true);
         } else {
-            this.depiction.atomMouseLeaveEventHandler();
+            this.depiction.atomMouseLeaveEventHandler(false);
         }
     }
 
     private ligHeatmapMouseoutEventHandler() {
-        this.depiction.atomMouseLeaveEventHandler();
+        this.depiction.atomMouseLeaveEventHandler(true);
     }