diff --git a/VQI_GenomeBrowser.js b/VQI_GenomeBrowser.js index 152108d..d3dcfbf 100755 --- a/VQI_GenomeBrowser.js +++ b/VQI_GenomeBrowser.js @@ -850,17 +850,22 @@ function VQI_GenomeBrowser(id, serviceURL) { return offset;//height / 2 + margin + offset }) - addTooltip($(trackScalableGroup.selectAll("rect") + addTooltip(trackScalableGroup.selectAll("rect") .filter(function (d) { - return d[indexArray.type] == "cpg";})[0]), name, "cpg"); + return d[indexArray.type] == "cpg";}), name, "cpg"); - addTooltip($(trackScalableGroup.selectAll("rect") + addTooltip(trackScalableGroup.selectAll("rect") .filter(function (d) { - return d[indexArray.type] == "shore";})[0]), name, "shore"); + return d[indexArray.type] == "shore";}), name, "shore"); - addTooltip($(trackScalableGroup.selectAll("rect") + addTooltip(trackScalableGroup.selectAll("rect") .filter(function (d) { - return d[indexArray.type] == "shelve";})[0]), name, "shelve"); + return d[indexArray.type] == "shelve";}), name, "shelve"); + + /*$(trackScalableGroup.selectAll("rect")[0]).mousemove(function(event){ + $(this).mouseenter(); + });*/ + } var addBEDTrack = function (data, name, exons) { @@ -921,9 +926,9 @@ function VQI_GenomeBrowser(id, serviceURL) { .style("vector-effect", "non-scaling-stroke") .attr("class", "scalable") - addTooltip($(trackScalableGroup.selectAll("rect") + addTooltip(trackScalableGroup.selectAll("rect") .data(data, function (d) { - return d;})[0]), name, "gene") + return d;}), name, "gene") if (exons) { @@ -958,9 +963,9 @@ function VQI_GenomeBrowser(id, serviceURL) { .style("vector-effect", "non-scaling-stroke") .attr("class", "scalable") - addTooltip($(trackScalableGroup.selectAll("rect") + addTooltip(trackScalableGroup.selectAll("rect") .data(exons, function (d) { - return d;})[0]), name, "exon") + return d;}), name, "exon") } } @@ -992,54 +997,91 @@ function VQI_GenomeBrowser(id, serviceURL) { } } } - selection.qtip({ - content: { - text: function(event, api) { - var min,max; - if(type === "exon"){ - min = $( this ).prop("__data__")[0]; - max = $( this ).prop("__data__")[1]; - } - else - { - min = $( this ).prop("__data__")[indexArray.start]; - max = $( this ).prop("__data__")[indexArray.end]; - } - return $.ajax({ - url: serviceURL, - type: 'POST', - dataType: "json", - data: { - "loadTooltip": "", - "chrom": chrom_curr, - "trackName" : name, - "type" : type, - "min" : min, - "max": max, - 'fileHandle': fileHandle + selection.each( + function(d){ + $(this).qtip({ + content: { + text: function(event, api) { + var min,max; + if(type === "exon"){ + min = d[0]; + max = d[1]; + } + else + { + min = d[indexArray.start]; + max = d[indexArray.end]; + } + $.ajax({ + url: serviceURL, + type: 'POST', + dataType: "json", + data: { + "loadTooltip": "", + "chrom": chrom_curr, + "trackName" : name, + "type" : type, + "min" : min, + "max": max, + 'fileHandle': fileHandle + } + }) + .then(function(content) { + // Set the tooltip content upon successful retrieval + api.set('content.text', content); + }, function(xhr, status, error) { + // Upon failure... set the tooltip content to the status and error value + api.set('content.text', status + ': ' + error); + }); + } - }) - .then(function(content) { - // Set the tooltip content upon successful retrieval - return content; - }, function(xhr, status, error) { - // Upon failure... set the tooltip content to the status and error value - api.set('content.text', status + ': ' + error); - }); + }, + position: { + my: 'top center', + at: 'top center', + target: 'mouse', + adjust: { + mouse: true, // Can be omitted (e.g. default behaviour) + y: 10 + } + } + }) + }); - } - }, - position: { - my: 'top center', - at: 'top center', - target: 'mouse', - adjust: { - mouse: true, // Can be omitted (e.g. default behaviour) - y: 10 - } - } - }); - } + selection.each(function(){ + var selected = $(this); + var hoverTimeout = 0; + $(this).mousemove(function(event) { + clearTimeout(hoverTimeout); + hoverTimeout = setTimeout(function(){ + var pixelWidth = (xScale.domain()[1] - xScale.domain()[0])/1000 + var min = (event.pageX - 59) * pixelWidth + xScale.domain()[0]; + var max = (event.pageX - 58) * pixelWidth + xScale.domain()[0]; + $.ajax({ + url: serviceURL, + type: 'POST', + dataType: "json", + data: { + "loadTooltip": "", + "chrom": chrom_curr, + "trackName" : name, + "type" : type, + "min" : min, + "max": max, + 'fileHandle': fileHandle + } + }) + .then(function(content) { + // Set the tooltip content upon successful retrieval + selected.qtip('option', 'content.text', content); + }, function(xhr, status, error) { + // Upon failure... set the tooltip content to the status and error value + selected.qtip('option', 'content.text', status + ': ' + error); + }); + } , 200); + }); + }); +} this.addTrackFromDatabase = function(){ var chrom = "chr1";