highlight atoms on mouseover

src/plugin/depiction.ts

@@ -195,8 +195,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, true))
-                .on('mouseleave', () => this.atomMouseLeaveEventHandler(true));     
+                .on('mouseenter', (x:Atom, i:number, g:any) => this.atomMouseEnterEventHandler(x,g[i],false))
+                .on('mouseleave', (_:Atom, i:number, g:any) => this.atomMouseLeaveEventHandler(g[i],false));     
             
     }
 
@@ -303,6 +303,17 @@ class Depiction {
         return newMap;
     }
 
+    private highlightAtom(element){
+        d3.select(element)
+            .style("stroke", "#FBBD1D")
+            .style("stroke-width", 5); 
+    }
+
+    private removeHighlight(element){
+        d3.select(element).style("stroke", null);
+
+    }
+
     // #region event handlers
     /**
      * Mouse enter event handler for circles around atoms
@@ -313,7 +324,8 @@ class Depiction {
      * @memebrof Depiction
      */
 
-    public atomMouseEnterEventHandler(x: Atom, propagation: boolean){
+    public atomMouseEnterEventHandler(x: Atom, element: any, propagation:boolean){
+        this.highlightAtom(element);
         this.fireExternalAtomEvent(x, propagation, Config.LigandShowAtomEvent);
     }
 
@@ -324,7 +336,8 @@ class Depiction {
      * @param {boolean} propagation if event should be triggered on external components
      * @memberof Depiction
      */
-    public atomMouseLeaveEventHandler(propagation: boolean){
+    public atomMouseLeaveEventHandler(element: any, propagation:boolean){
+        this.removeHighlight(element);
         this.fireExternalNullEvent(propagation, Config.LigandHideAtomEvent);
     }
     // #endregion

src/plugin/manager.ts

@@ -80,7 +80,7 @@ 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.ligandHeatmapMouseoutEvent, e => this.ligHeatmapMouseoutEventHandler(e));
 
         document.addEventListener(Config.molstarClickEvent, e => this.molstarClickEventHandler(e));
         document.addEventListener(Config.molstarMouseoverEvent, e => this.molstarClickEventHandler(e)); 
@@ -128,15 +128,15 @@ 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], true);
+            this.depiction.atomMouseEnterEventHandler(atom[0], e.currentTarget, true);
         } else {
-            this.depiction.atomMouseLeaveEventHandler(false);
+            this.depiction.atomMouseLeaveEventHandler(e.currentTarget, false);
         }
     }
 
-    private ligHeatmapMouseoutEventHandler() {
+    private ligHeatmapMouseoutEventHandler(e:any) {
         if (this.depiction === undefined) return;
-        this.depiction.atomMouseLeaveEventHandler(true);
+        this.depiction.atomMouseLeaveEventHandler(e.currentTarget, true);
     }
 
 
@@ -313,7 +313,7 @@ class Visualization {
     public async initLigandWeights(ligandId: string){
         const weightUrl = `https://raw.githubusercontent.com/roshkjr/Learning-sources/main/${ligandId}_atom_residue_intx.json`
         return d3.json(weightUrl)
-            .then((d: any) => this.ligandIntxData = d);
+            .then((d: any) => this.ligandIntxData = d[ligandId]);
     }
 
 
@@ -334,7 +334,7 @@ class Visualization {
     /**
      * Adds circles around atoms higlighting the weights of atoms.
      *
-     * @param {string} contactType 
+     * @param {string[]| string} contactType 
      * @memberof Visualization
      */
     public showWeights(contactType: string[]){