Skip to content
Permalink
Browse files

Dynamic tooltip based on pixel coordinates

  • Loading branch information
csw11004 committed Aug 17, 2015
1 parent fc9e4cc commit c4c7dba7dbdfe46a579e0b0a6911262b2c0fd806
Showing with 98 additions and 56 deletions.
  1. +98 −56 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";

0 comments on commit c4c7dba

Please sign in to comment.
You can’t perform that action at this time.