From 925f5f8d9cb7a8c591053a6250f54dd3bdd2d739 Mon Sep 17 00:00:00 2001
From: Chris Stadler <chrisstadler@gmail.com>
Date: Thu, 1 Jan 2015 22:56:15 -0500
Subject: [PATCH] interactive legend

Hovering on a gem in the legend highlights all of its frames. Useful for
distinguishing between gems of similar colors.
---
 lib/flamegraph/flamegraph.html | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/lib/flamegraph/flamegraph.html b/lib/flamegraph/flamegraph.html
index 2e4ed37..dff2b66 100644
--- a/lib/flamegraph/flamegraph.html
+++ b/lib/flamegraph/flamegraph.html
@@ -248,6 +248,31 @@ <h3>Frame Info</h3>
      .attr('opacity',1);
 };
 
+// highlight the nodes of a gem
+var gemSelect = function(e) {
+	var name = e.data.name;
+	d3.selectAll(getGemNodes(name)).attr('opacity',0.5);
+	return false;
+};
+
+// remove highlighting of the nodes of a gem
+var gemDeSelect = function(e) {
+	var name = e.data.name;
+	d3.selectAll(getGemNodes(name)).attr('opacity',1);
+	return false;
+};
+
+// given the name of a gem, return all of its nodes
+var getGemNodes = function(gem_name) {
+	var frames = gemStats[gem_name].frames;
+	var nodes = [];
+	$.each(frames, function(i,f) {
+	var i = info[f];
+	nodes = nodes.concat(i.nodes);  
+	});
+	return nodes;
+};
+
 var backtrace = function(frame){
   for(var i=0; i<data.length; i++){
     if(frame === data[i]){ break; }
@@ -488,7 +513,9 @@ <h3>Frame Info</h3>
 _.each(gemsSorted, function(gem){
   var node = $("<div></div>")
     .css("background-color", gem.color)
-    .text(gem.name + " " + samplePercent(gem.samples.length)) ;
+    .text(gem.name + " " + samplePercent(gem.samples.length))
+	.on("mouseover", {name: gem.name}, gemSelect)
+    .on("mouseout", {name: gem.name}, gemDeSelect);
   $('.legend').append(node);
 });