Issue jiffyclub#14

Rows are now highlighted in the table when the item in the SVG is
mousedover. Highlighting is acieved through custom formatting, it would
be nice if this could be achieved through daatatable's natural
formatting.

snakeviz/static/drawsvg.js

@@ -199,26 +199,52 @@ var sv_update_info_div = function sv_update_info_div (d) {
 
 
 var apply_mouseover = function apply_mouseover (selection) {
-  selection.on('mouseover', function (d, i) {
-    // select all the nodes that represent this exact function
-    // and highlight them by darkening their color
-    var thisname = d.name;
-    var thispath = selection.filter(function(d, i) {
-        return d.name === thisname;})
-    var thiscolor = d3.rgb('#ff00ff');
-    thispath.style('fill', thiscolor.toString());
-    sv_update_info_div(d);
-    sv_show_info_div();
+	var highlighter = new rowHighlighter('#pstats-table');
+	selection.on('mouseover', function (d, i) {
+		// select all the nodes that represent this exact function
+		// and highlight them by darkening their color
+		var thisname = d.name;
+		var thispath = selection.filter(function(d, i) {
+			return d.name === thisname;})
+		var thiscolor = d3.rgb('#ff00ff');
+		thispath.style('fill', thiscolor.toString());
+		sv_update_info_div(d);
+		sv_show_info_div();
+		highlighter.highlight(sv_item_name(thisname));
   })
   .on('mouseout', function(d, i){
       // reset nodes to their original color
       var thisname = d.name;
       var thispath = selection.filter(function(d, i) {
           return d.name === thisname;});
       thispath.style('fill', color(d));
+      highlighter.remove();
   });
 };
 
+var rowHighlighter = function(tableRefernce){
+	var table = $(tableRefernce).DataTable();
+	this.highlight = function(rowName){
+		var rowToHighlight = table.rows().eq(0).filter( function(rowIdx){
+			return htmlToText(table.cell( rowIdx, 5 ).data()) === rowName ? true : false;
+			});
+		table.rows( rowToHighlight )
+		    .nodes()
+		    .to$()
+		    .addClass( 'highlight' );
+		this.highlightedRows = rowToHighlight;
+		};
+	this.remove = function(){
+		table.rows( this.highlightedRows )
+		    .nodes()
+		    .to$()
+		    .removeClass( 'highlight' );
+	};
+};
+
+var htmlToText = function(html){
+	return $.parseHTML(html)[0].textContent;
+};
 
 // This is having D3 do its thing.
 var drawSunburst = function drawSunburst(json) {

snakeviz/static/snakeviz.css

@@ -202,3 +202,10 @@ select {
     -webkit-transform: scale(1.0);
   }
 }
+
+.highlight{
+	background-color: #E0E0E0 !important;
+}
+.highlight td.sorting_1 {
+	background-color: transparent !important;
+}

snakeviz/static/snakeviz.js

@@ -59,7 +59,7 @@ var sv_call_stack_btn_for_hide = function sv_call_stack_btn_for_hide() {
 // Items on the call stack can include directory names that we want
 // to remove for display in the call stack list.
 var sv_item_name = function sv_item_name (name) {
-    var slash = name.lastIndexOf('/');
+    var slash = Math.max(name.lastIndexOf('/'),name.lastIndexOf('\\'));
     var rename = name;
     if (slash !== -1) {
         rename = name.slice(slash + 1);