added highlight animation

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);
     }