interactions and dynamic zoom fixes

package-lock.json

 {
   "name": "pdb-ligand-env",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "pdb-ligand-env",
-      "version": "1.0.0",
+      "version": "2.0.0",
       "license": "Apache License 2.0",
       "dependencies": {
         "@types/d3": "^5.16.3",

src/plugin/depiction.ts

@@ -190,13 +190,18 @@ class Depiction {
             .data(data)
             .enter()
             .append('circle')
+                .attr("class", x => `${x.name}_Circles weightCircles`)
                 .attr("cx", x => x.position.x)
                 .attr("cy", x => x.position.y)
                 .attr("r", x => firstScale.radiusScale(x.value))
                 .attr("fill", x=> firstScale.colorScale(x.value))
                 .attr("fill-opacity", "0.5")
-                .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));     
+                .on('mouseenter', (x:Atom, i:number, g:any) => {
+                    this.atomMouseEnterEventHandler(x, g[i], false);
+                })
+                .on('mouseleave', (_x:Atom, _i:number, _g:any) => {
+                    this.atomMouseLeaveEventHandler(false);
+                });     
             
     }
 
@@ -303,15 +308,15 @@ class Depiction {
         return newMap;
     }
 
-    private highlightAtom(element){
+    private highlightAtom(element) {
         d3.select(element)
             .style("stroke", "#FBBD1D")
             .style("stroke-width", 5); 
     }
 
-    private removeHighlight(element){
-        d3.select(element).style("stroke", null);
-
+    private removeHighlights(){
+        d3.selectAll(".weightCircles")
+            .style("stroke", null);
     }
 
     // #region event handlers
@@ -336,8 +341,8 @@ class Depiction {
      * @param {boolean} propagation if event should be triggered on external components
      * @memberof Depiction
      */
-    public atomMouseLeaveEventHandler(element: any, propagation:boolean){
-        this.removeHighlight(element);
+    public atomMouseLeaveEventHandler(propagation:boolean){
+        this.removeHighlights();
         this.fireExternalNullEvent(propagation, Config.LigandHideAtomEvent);
     }
     // #endregion

src/plugin/manager.ts

@@ -91,8 +91,9 @@ class Visualization {
     private getZoomHandler() {
         return d3.zoom()
             .scaleExtent([1 / 10, 10])
-            .on('zoom', () => this.canvas
-                .attr('transform', d3.event.transform));
+            .on('zoom', () => {
+                this.canvas.attr('transform', d3.event.transform)
+            });
     }
 
 
@@ -124,16 +125,21 @@ class Visualization {
         if (this.depiction === undefined) return;
         const atomName = e.detail.name; // CustomEvent
         const atom = this.depiction.atoms.filter(x => x.value >0 && x.name === atomName);
+
+        const selection = d3.select(`.${atomName}_Circles`);
+        const nodes = selection.nodes();
+        const lastElement = nodes[nodes.length - 1];
+
         if (atom.length > 0) {
-            this.depiction.atomMouseEnterEventHandler(atom[0], e.currentTarget, true);
+            this.depiction.atomMouseEnterEventHandler(atom[0], lastElement, true);
         } else {
-            this.depiction.atomMouseLeaveEventHandler(e.currentTarget, false);
+            this.depiction.atomMouseLeaveEventHandler(false);
         }
     }
 
-    private ligHeatmapMouseoutEventHandler(e:any) {
+    private ligHeatmapMouseoutEventHandler(_e:any) {
         if (this.depiction === undefined) return;
-        this.depiction.atomMouseLeaveEventHandler(e.currentTarget, true);
+        this.depiction.atomMouseLeaveEventHandler(true);
     }
 
 
@@ -358,6 +364,7 @@ class Visualization {
 
     public toggleZoom(active: boolean) {
         this.zoomHandler = active ? this.getZoomHandler() : undefined;
+        this.zoomHandler(this.svg, d3.zoomIdentity);
     }