Highlighting points works in Firefox but still doesn't work in chrome

Also noticed issue with chromosome ordering in Firefox

2 files changed, 6 insertions, 4 deletions

diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.coffee b/wqflask/wqflask/static/new/javascript/marker_regression.coffee
index ebd96b19..01ecb6f9 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.coffee
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.coffee
@@ -276,16 +276,17 @@ $ ->
                 .attr("r", 2)
                 .classed("circle", true)
                 .on("mouseover", (d) =>
+                    console.log("foodie")
                     console.log("this:", this)
                     console.log("d3.event is:", d3.event)
                     console.log("d is:", d)
-                    d3.select(d3.event)
+                    d3.select(d3.event.target).classed("d3_highlight", true)
                         .attr("r", 5)
                         .attr("fill", "yellow")
                         .call(@show_marker_in_table(d))
                 )
                 .on("mouseout", () =>
-                    d3.select(d3.event)
+                    d3.select(d3.event.target).classed("d3_highlight", false)
                         .attr("r", 2)
                         .attr("fill", "black")
                         .call(@show_marker_in_table())
diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.js b/wqflask/wqflask/static/new/javascript/marker_regression.js
index 25a8d5b5..8186457e 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.js
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.js
@@ -249,12 +249,13 @@
         }).attr("cy", function(d) {
           return _this.plot_height - ((_this.plot_height - _this.y_buffer) * d[1] / _this.y_max);
         }).attr("r", 2).classed("circle", true).on("mouseover", function(d) {
+          console.log("foodie");
           console.log("this:", _this);
           console.log("d3.event is:", d3.event);
           console.log("d is:", d);
-          return d3.select(d3.event).attr("r", 5).attr("fill", "yellow").call(_this.show_marker_in_table(d));
+          return d3.select(d3.event.target).classed("d3_highlight", true).attr("r", 5).attr("fill", "yellow").call(_this.show_marker_in_table(d));
         }).on("mouseout", function() {
-          return d3.select(d3.event).attr("r", 2).attr("fill", "black").call(_this.show_marker_in_table());
+          return d3.select(d3.event.target).classed("d3_highlight", false).attr("r", 2).attr("fill", "black").call(_this.show_marker_in_table());
         });
       };