Merge pull request hammerlab#56 from erictu/reads_enhancement

Click Visual Elements for More Information
Georgehe4 · Aug 4, 2015 · 9e01ee3 · 9e01ee3
2 parents 1e39d3d + 0fc9fe2
commit 9e01ee3
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 8 deletions.
diff --git a/mango-cli/src/main/scala/org/bdgenomics/mango/cli/VizReads.scala b/mango-cli/src/main/scala/org/bdgenomics/mango/cli/VizReads.scala
@@ -149,8 +149,10 @@ object VizReads extends BDGCommandCompanion with Logging {
     val referenceString: String = rdd.adamGetReferenceString(region)
     val splitReference: Array[String] = referenceString.split("")
     var tracks = new scala.collection.mutable.ListBuffer[ReferenceJson]
+    var positionCount: Long = region.start
     for (base <- splitReference) {
-      tracks += new ReferenceJson(base.toUpperCase())
+      tracks += new ReferenceJson(base.toUpperCase(), positionCount)
+      positionCount += 1
     }
     tracks.toList
   }
@@ -160,8 +162,10 @@ object VizReads extends BDGCommandCompanion with Logging {
     val referenceString = new String(refSeq.getBases())
     val splitReference: Array[String] = referenceString.split("")
     var tracks = new scala.collection.mutable.ListBuffer[ReferenceJson]
+    var positionCount: Long = region.start
     for (base <- splitReference) {
-      tracks += new ReferenceJson(base.toUpperCase())
+      tracks += new ReferenceJson(base.toUpperCase(), positionCount)
+      positionCount += 1
     }
     tracks.toList
   }
@@ -193,7 +197,7 @@ case class TrackJson(readName: String, start: Long, end: Long, readNegativeStran
 case class VariationJson(contigName: String, alleles: String, start: Long, end: Long, track: Long)
 case class FreqJson(base: Long, freq: Long)
 case class FeatureJson(featureId: String, featureType: String, start: Long, end: Long, track: Long)
-case class ReferenceJson(reference: String)
+case class ReferenceJson(reference: String, position: Long)
 
 class VizReadsArgs extends Args4jBase with ParquetArgs {
   @Argument(required = true, metaVar = "reference", usage = "The reference file to view, required", index = 0)

diff --git a/mango-cli/src/main/webapp/js/overall.js b/mango-cli/src/main/webapp/js/overall.js
@@ -199,7 +199,6 @@ function renderReference() {
       .attr("class", "axis")
       .call(refAxis);
 
-
   d3.json(referenceStringLocation, function(error, data) {
 
     var rects = refContainer.selectAll("rect").data(data);
@@ -236,6 +235,16 @@ function renderReference() {
           return Math.max(1, width/(viewRegEnd-viewRegStart));
         })
         .attr("height", refHeight)
+        .on("click", function(d) {
+          refDiv.transition()
+            .duration(200)
+            .style("opacity", .9);
+          refDiv.html(
+            "Base: " + d.reference + "<br>" +
+            "Position: " + d.position)
+            .style("left", (d3.event.pageX) + "px")
+            .style("top", (d3.event.pageY - 28) + "px");
+        })
         .on("mouseover", function(d) {
           refDiv.transition()
             .duration(200)
@@ -281,6 +290,18 @@ function renderFeatures() {
         .attr("width", (function(d) { return Math.max(1,(d.end-d.start)*(width/(viewRegEnd-viewRegStart))); }))
         .attr("height", featHeight)
         .attr("fill", "#6600CC")
+        .on("click", function(d) {
+          featDiv.transition()
+            .duration(200)
+            .style("opacity", .9);
+          featDiv.html(
+            "Feature Id: " + d.featureId + "<br>" +
+            "Feature Type: " + d.featureType + "<br>" +
+            "Start: " + d.start + "<br>" +
+            "End: " + d.end)
+            .style("left", (d3.event.pageX) + "px")
+            .style("top", (d3.event.pageY - 28) + "px");
+        })
         .on("mouseover", function(d) {
           featDiv.transition()
           .duration(200)
@@ -337,13 +358,23 @@ function renderVariants() {
         })
         .attr("width", (function(d) { return Math.max(1,(d.end-d.start)*(width/(viewRegEnd-viewRegStart))); }))
         .attr("height", varHeight)
+        .on("click", function(d) {
+          varDiv.transition()
+            .duration(200)
+            .style("opacity", .9);
+          varDiv.html(
+            "Contig: " + d.contigName + "<br>" +
+            "Alleles: " + d.alleles)
+            .style("left", (d3.event.pageX) + "px")
+            .style("top", (d3.event.pageY - 28) + "px");
+        })
         .on("mouseover", function(d) {
           varDiv.transition()
-          .duration(200)
-          .style("opacity", .9);
+            .duration(200)
+            .style("opacity", .9);
           varDiv.html(d.alleles)
-          .style("left", (d3.event.pageX) + "px")
-          .style("top", (d3.event.pageY - 28) + "px");
+            .style("left", (d3.event.pageX) + "px")
+            .style("top", (d3.event.pageY - 28) + "px");
         })
         .on("mouseout", function(d) {
           varDiv.transition()
@@ -412,6 +443,18 @@ function renderReads() {
         .attr("height", (trackHeight-2))
         .attr("marker-end", "url(#end)")
         .attr("fill", "steelblue")
+        .on("click", function(d) {
+          readDiv.transition()
+            .duration(200)
+            .style("opacity", .9);
+          readDiv.html(
+            "Read Name: " + d.readName + "<br>" +
+            "Start: " + d.start + "<br>" +
+            "End: " + d.end + "<br>" +
+            "Reverse Strand: " + d.readNegativeStrand)
+            .style("left", (d3.event.pageX) + "px")
+            .style("top", (d3.event.pageY - 28) + "px");
+        })
         .on("mouseover", function(d) {
           readDiv.transition()
             .duration(200)