change aggregated interaction values to percentages

src/plugin/depiction.ts

@@ -140,11 +140,9 @@ class Depiction {
 
     /**
      * Adds circles around atoms corresponding to the value of 
-     * their weights.The size, color and number of circles around 
-     * atom indicates the strength of weight. Currently maximum of
-     * three circles are drawn
+     * their weights.The size and color of circles around 
+     * atom indicates the strength of weight.
      * @param {any} weights objects with atom names and value of weight
-     * @param {string} colorScheme Name of color to be used for circles
      * @memberof Depiction
      */
 
@@ -159,6 +157,7 @@ class Depiction {
         });
 
         const data = this.atoms;
+
         const scales = this.getScale();
         this.weight.selectAll("*").remove();
         /**
@@ -195,7 +194,7 @@ class Depiction {
             .data(data)
             .enter()
             .append('circle')
-                .attr("class", x => `${x.name}_Circles weightCircles`)
+                .attr("class", x => `${x.name}_Circles`)
                 .attr("cx", x => x.position.x)
                 .attr("cy", x => x.position.y)
                 /**
@@ -210,7 +209,7 @@ class Depiction {
                  */
                 .attr("fill-opacity", "1")
                 /**
-                 * This is a fill-opacity function if we want to drawn "weight"
+                 * This is a fill-opacity function if we want to draw "weight"
                  * on top of "structure"
                  */
                 // .attr("fill-opacity", (x:Atom) => {
@@ -256,18 +255,19 @@ class Depiction {
      */
     private getScale() {
         /**
-         * scales are generated for only non-zero values.
+         * scales for radius are generated for only non-zero values.
          * keeping zero as the minimum value of domain will generate
          * very small radius which cannot be highlighted, alternatively
-         * if the minimum value of range is increased, this will lead to
-         * very high value of maximum of the range, that is not suitable 
+         * if the minimum value of range is increased, then maximum value 
+         * of the range also need to be increased which will result in very
+         * large circles for high values 
         */
         const weights = this.atoms.map(x => x.value).filter(x => x > 0)
         const weightMax = d3.max(weights);
         const weightMin = d3.min(weights);
         const radiusScale = d3.scaleSqrt([weightMin, weightMax], [10,30]);
-        const colorScale = d3.scaleSqrt(
-            [weightMin, 0.01, weightMax],
+        const colorScale = d3.scaleLinear(
+            [0, 0.01, weightMax],
             ["#f0fcf0","#a0bb9e","#505d50"]
         );
         return {
@@ -391,6 +391,11 @@ class Depiction {
         return newMap;
     }
 
+    /**
+     * Highlights an atom by transitioning the 
+     * radius of circles around atoms and increasing
+     * the stroke width changing the colour
+     */
     private highlightAtom(element) {
         this.removeHighlights();
         const scales = this.getScale()
@@ -430,6 +435,10 @@ class Depiction {
         animateStroke();
     }
 
+    /**
+     * Removes the highlights of the atom on 
+     * mouse leaving
+     */
     private removeHighlights(){
         const scales = this.getScale();
         const selectedCircle = d3.selectAll(".selectedCircle");        
@@ -487,6 +496,7 @@ class Depiction {
             bubbles: true,
             detail: {
                 tooltip: atom.toTooltip("%"),
+                atomName: atom.name,
                 external: propagation
             }
         });

src/plugin/manager.ts

@@ -125,10 +125,6 @@ class Visualization {
         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
-         */
-        // const atom = this.depiction.atoms.filter(x => x.value >0 && x.name === atomName);
         const atom = this.depiction.atoms.filter(x => x.name === atomName);
 
         const selection = d3.select(`.${atomName}_Circles`);

src/plugin/model.ts

@@ -557,7 +557,7 @@ namespace Model {
 
             const atomPropensity = atomCount.map((x) => 
                 ({"atom": x.atom,
-                 "value": (x.count/totalIntx).toFixed(2)
+                 "value": (x.count/totalIntx)*100
                 })
                 );