src/plugin/depiction.ts

@@ -385,13 +385,47 @@ class Depiction {
 
     private highlightAtom(element) {
         this.removeHighlights();
+
+        const data = this.atoms;
+        const radiusScale = d3.scaleLinear(
+            [0, d3.max(data.map(x => x.value))],
+            [15, 30]
+        )
+
         d3.select(element)
-            .style("stroke", "#E275E5")
-            .style("stroke-width", 5); 
+            .classed("selectedCircle", true)
+            .classed("isAnimating", true)
+            .style("stroke", "#FBBD1D")
+            .style("stroke-width", 5);
+
+        function animateStroke() {
+            if (d3.select('.selectedCircle').classed("isAnimating")) {
+                d3.select('.selectedCircle').transition()
+                        .duration(500) // 500 milliseconds
+                        .style("stroke-width", 10)
+                        .attr("r", (d:Atom) => radiusScale(d.value)*1.3) // Double the size
+                        .transition()
+                        .duration(500) // 500 milliseconds
+                        .style("stroke-width", 5)
+                        .attr("r", (d:Atom) => radiusScale(d.value))// Revert to original size
+                        .on("end", animateStroke)
+            }
+        }
+        animateStroke();
     }
 
     private removeHighlights(){
-        d3.selectAll(".weightCircles")
+        const data = this.atoms;
+        const radiusScale = d3.scaleLinear(
+            [0, d3.max(data.map(x => x.value))],
+            [15, 30]
+        )
+
+        d3.selectAll(".selectedCircle")
+            .classed("selectedCircle", false)
+            .classed("isAnimating", false)
+            .interrupt()
+            .attr("r", (d:Atom) => radiusScale(d.value))
             .style("stroke", null);
     }
 

src/plugin/manager.ts

@@ -123,6 +123,7 @@ class Visualization {
 
     private ligHeatmapMouseoverEventHandler(e: any) {
         if (this.depiction === undefined) return;
+        if (this.ligandIntxData === undefined) return;
         const atomName = e.detail.name; // CustomEvent
         /**
          * This has been changed so we can highlight every Atom
@@ -136,9 +137,10 @@ class Visualization {
 
         if (atom.length > 0) {
             this.depiction.atomMouseEnterEventHandler(atom[0], lastElement, true);
-        } else {
-            this.depiction.atomMouseLeaveEventHandler(false);
         }
+        // else {
+        //     this.depiction.atomMouseLeaveEventHandler(false);
+        // }
     }
 
     private ligHeatmapMouseoutEventHandler(_e:any) {