added listening to PDB.ligHeatmap mouseover and mouseout

src/plugin/config.ts

@@ -14,6 +14,9 @@ namespace Config {
     export const molstarMouseoverEvent: string = 'PDB.molstar.mouseover';
     export const molstarMouseoutEvent: string = 'PDB.molstar.mouseout';
 
+    export const ligandHeatmapMouseoverEvent: string = 'PDB.ligHeatmap.mouseover';
+    export const ligandHeatmapMouseoutEvent: string = 'PDB.ligHeatmap.mouseout';
+
     export const aaTypes = new Map<string, Array<string>>([
         ['hydrophobic', new Array<string>('A', 'I', 'L', 'M', 'F', 'W', 'V')],
         ['positive', Array<string>('K', 'R', 'O')],

src/plugin/depiction.ts

@@ -308,24 +308,23 @@ class Depiction {
     /**
      * Mouse enter event handler for circles around atoms
      * depicting their weights
-     * @private
+     * @public
      * @param {Atom} atom object
      * @memebrof Depiction
      */
 
-    private atomMouseEnterEventHandler(x: Atom){
+    public atomMouseEnterEventHandler(x: Atom){
         this.fireExternalAtomEvent(x, Config.LigandShowAtomEvent);
     }
 
     /**
      * Mouse leave event handler for circlea round atoms
      * depicting their weights
-     * @private
+     * @public
      * @memberof Depiction
      */
-    private atomMouseLeaveEventHandler(){
+    public atomMouseLeaveEventHandler(){
         this.fireExternalNullEvent(Config.LigandHideAtomEvent);
-
     }
     // #endregion
 

src/plugin/manager.ts

@@ -79,8 +79,11 @@ class Visualization {
 
         if (uiParameters.zoom) this.zoomHandler = this.getZoomHandler();
 
+        document.addEventListener(Config.ligandHeatmapMouseoverEvent, e => this.ligHeatmapMouseoverEventHandler(e));
+        document.addEventListener(Config.ligandHeatmapMouseoutEvent, () => this.ligHeatmapMouseoutEventHandler());
+
         document.addEventListener(Config.molstarClickEvent, e => this.molstarClickEventHandler(e));
-        document.addEventListener(Config.molstarMouseoverEvent, e => this.molstarClickEventHandler(e));
+        document.addEventListener(Config.molstarMouseoverEvent, e => this.molstarClickEventHandler(e)); 
         document.addEventListener(Config.molstarMouseoutEvent, () => this.molstarMouseoutEventHandler());
 
         d3.select(this.parent).on('resize', () => this.resize());
@@ -106,7 +109,7 @@ class Visualization {
     private molstarClickEventHandler(e: any) {
         if (this.fullScreen) return;
 
-        let hash = `${e.eventData.auth_asym_id}${e.eventData.auth_seq_id}${e.eventData.ins_code}`;
+    let hash = `${e.eventData.auth_asym_id}${e.eventData.auth_seq_id}${e.eventData.ins_code}`;
 
         this.nodes?.each((node: Model.InteractionNode, index: number, group: any) => {
             this.nodeDim(node, index, group);
@@ -120,6 +123,18 @@ class Visualization {
 
     }
 
+    private ligHeatmapMouseoverEventHandler(e: any) {
+        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]);
+        }
+    }
+
+    private ligHeatmapMouseoutEventHandler() {
+        this.depiction.atomMouseLeaveEventHandler();
+    }
+
 
     /**
      * Handles mouse leave molstar event. Removes interaction node highlight