Release of version 0.6.0

build/muts-needle-plot.css

@@ -9,7 +9,6 @@ body {
 }
 
 .selected {
-    opacity: 0.9;
     fill: lightblue;
     stroke-width: 4;
 }
@@ -19,26 +18,43 @@ body {
     opacity: 0.7;
     stroke-width: 2;
     stroke: lightgrey;
-    dy: "0.35em";
 }
 
 .breakLabels {
     font-size: 12px;
-    font-weight: bold;
+}
+
+.breakLabels.nomuts {
+    font-weight: normal;
+    opacity: 0.3;
 }
 
 .needle-line {
     stroke: black;
     stroke-width: 1;
 }
 
+.noshow {
+    opacity: 0.1;
+}
+
 .regionsBG {
     fill: lightgrey;
 }
 
-.regionName {
+.regionGroup:hover > .regionName {
     fill: black;
     font-weight: bold;
+    opacity: 1;
+}
+
+.regionGroup:hover > rect {
+    stroke-width: 4;
+}
+
+.regionName {
+    fill: black;
+    opacity: 0.5;
 }
 
 .x-axis path, .x-axis line, .y-axis path, .y-axis line {

how-to-publish.txt

@@ -6,7 +6,7 @@ Make sure you have npm installed.
 
     git pull
 
-2. Check and increment the version in the `package.json` file. E.g. version "0.5.2"
+2. Check and increment the version in the `package.json` file. E.g. version "0.6.0"
 
 3. Check if examples are working fine
 
@@ -23,14 +23,14 @@ Make sure you have npm installed.
 
 5. Commit all changes, push to repository
 
-    git commit -a -m "Release of version 0.5.2"
-    git tag -a v0.5.2 -m 'version 0.5.2'
+    git commit -a -m "Release of version 0.6.0"
+    git tag -a v0.6.0 -m 'version 0.6.0'
     git push
     git push origin --tags
 
 6. Go to GitHub and schedule a new Release
     Title: Mutations Needle Plot
     Changelog:
-    v0.5.2
+    v0.6.0
      * Selection (new)
      * Legend (new)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "muts-needle-plot",
   "description": "Draws a Needle-Plot for mutation data (stacked).",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "homepage": "https://github.com/bbglab/muts-needle-plot",
   "author": {
     "name": "Michael P Schroeder",

snippets/EXAMPLE.js

@@ -37,3 +37,5 @@ plotConfig = {
 // Instantiate a plot
 instance = new mutneedles(plotConfig);
 
+// BioJS event system test
+//instance=instance

snippets/EXAMPLE_AGGREGATION.js

@@ -79,6 +79,8 @@ d3.json("./data/muts.json", function(error, data){
 // Instantiate a plot
   instance =new mutneedles(plotConfig);
 
+// BioJS event system test
+//instance=instance
 
 });
 

snippets/KRAS.js

@@ -21,3 +21,6 @@ var config = {maxCoord: 350, mutationData: muts, regionData: regions, target: ta
 
 instance =  new mutneedles(config);
 
+// BioJS event system test
+//instance=instance
+

snippets/LOGO.js

@@ -41,3 +41,6 @@ var config = {maxCoord: 220, minCoord: 130, mutationData: muts, regionData: regi
 
 instance =  new mutneedles(config);
 
+// BioJS event system test
+//instance=instance
+

snippets/data/regions.json

@@ -1,7 +1,8 @@
 {
     "region1": "50-58",
     "region2": "120-180",
-    "X-binding": "2-40",
     "C1": "187-190",
-    "C2": "300-350"
+    "X-binding": "2-40",
+    "X99" : "4.5-5.5",
+    "X88" : "191-192"
 }

src/css/muts-needle-plot.css

@@ -42,9 +42,19 @@ body {
     fill: lightgrey;
 }
 
-.regionName {
+.regionGroup:hover > .regionName {
     fill: black;
     font-weight: bold;
+    opacity: 1;
+}
+
+.regionGroup:hover > rect {
+    stroke-width: 4;
+}
+
+.regionName {
+    fill: black;
+    opacity: 0.5;
 }
 
 .x-axis path, .x-axis line, .y-axis path, .y-axis line {

src/js/MutsNeedlePlot.js

@@ -359,19 +359,91 @@ MutsNeedlePlot.prototype.drawRegions = function(svg, regionData) {
 
         });
 
+        // Place and label location
+        var labels = [];
+
         regions.append("text")
             .attr("class", "regionName")
             .attr("text-anchor", "middle")
             .attr("x", function (r) {
-                return x(r.start) + (x(r.end) - x(r.start)) / 2
+                r.x = x(r.start) + (x(r.end) - x(r.start)) / 2;
+                return r.x;
             })
-            .attr("y", y(0) + text_offset)
+            .attr("y", function(r) {r.y = y(0) + text_offset; return r.y; } )
             .attr("dy", "0.35em")
             .style("font-size", "12px")
             .style("text-decoration", "bold")
             .text(function (data) {
                 return data.name
             });
+
+        var regionNames = d3.selectAll(".regionName");
+        regionNames.each(function(d, i) {
+            var interactionLength = this.getBBox().width / 2;
+            labels.push({x: d.x, y: d.y, label: d.name, weight: d.name.length, radius: interactionLength});
+        });
+
+        var force = d3.layout.force()
+            .chargeDistance(5)
+            .nodes(labels)
+            .charge(-10)
+            .gravity(0);
+
+        var minX = x(minCoord);
+        var maxX = x(maxCoord);
+        var withinBounds = function(x) {
+            return d3.min([
+                d3.max([
+                    minX,
+                    x]),
+                maxX
+            ]);
+        };
+        function collide(node) {
+            var r = node.radius + 3,
+                nx1 = node.x - r,
+                nx2 = node.x + r,
+                ny1 = node.y - r,
+                ny2 = node.y + r;
+            return function(quad, x1, y1, x2, y2) {
+                if (quad.point && (quad.point !== node)) {
+                    var l = node.x - quad.point.x,
+                        x = l;
+                    r = node.radius + quad.point.radius;
+                    if (Math.abs(l) < r) {
+                        l = (l - r) / l * .005;
+                        x *= l;
+                        x =  (node.x > quad.point.x && x < 0) ? -x : x;
+                        node.x += x;
+                        quad.point.x -= x;
+                    }
+                }
+                return x1 > nx2
+                    || x2 < nx1
+                    || y1 > ny2
+                    || y2 < ny1;
+            };
+        }
+        force.on("tick", function(e) {
+            var q = d3.geom.quadtree(labels),
+                i = 0,
+                n = labels.length;
+            while (++i < n) {
+                q.visit(collide(labels[i]));
+            }
+            // Update the position of the text element
+            svg.selectAll("text.regionName")
+                .attr("x", function(d) {
+                    for (i = 0; i < n; i++) {
+                        if (d.name == labels[i].label) {
+                            labels[i].x = withinBounds(labels[i].x);
+                            return labels[i].x;
+                        }
+                    }
+                }
+            );
+        });
+        force.start();
     }
 
     function formatRegions(regions) {