Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Ajax loading of Tooltips
  • Loading branch information
@csw11004
csw11004 committed Jul 30, 2015
1 parent 18d2dd0 commit 57bad74
Show file tree
Hide file tree
Showing 5 changed files with 137 additions and 35 deletions.
154 changes: 119 additions & 35 deletions VQI_GenomeBrowser.js
View file
Expand Up @@ -25,6 +25,7 @@ function VQI_GenomeBrowser(id, serviceURL) {
var testdata;
var isready = false;
var zoomOnly = false;
var waitTime;


var trackInfo = [];
Expand Down Expand Up @@ -539,8 +540,11 @@ function VQI_GenomeBrowser(id, serviceURL) {
//console.log(zoom.scale());
//optmizedTrack();
if (! zoomOnly){
updateTrack();
}
if (waitTime != undefined)
{
clearTimeout(waitTime);
}
waitTime = setTimeout(updateTrack, 100); }
//addOneTrack(testdata, "HG19", 'bed');
$("#" + divId + " #navigate").val(chrom_curr + ":" + Math.round(xScale.domain()[0]) + "-" + Math.round(xScale.domain()[1]));
};
Expand Down Expand Up @@ -1043,28 +1047,45 @@ function VQI_GenomeBrowser(id, serviceURL) {
var offset = type == "cpg" ? -20 : type == "shore" ? -10 : -7.5;
return offset;//height / 2 + margin + offset
});
/*if(trackScalableGroup.select("rect").empty())
{
trackScalableGroup.append("rect")
.style("fill-opacity", ".4")
.style("stroke", "red")
.style("fill", "red")
.style("vector-effect", "non-scaling-stroke")
.attr("height", 40)
.attr("width", fullXScale(2000000) - fullXScale(1000000))
.attr("x", fullXScale(1000000))
.attr("y", height / 2 + margin);
}*/
$(trackScalableGroup.selectAll('*')[0]).tipsy({
gravity: 'n',
html: true,
follow: 'x',
title: function () {
var d = this.__data__;
var name = (d.length > indexArray.name) ? d[indexArray.name] : '';
return name + " (" + d[indexArray.chr] + " : " + d[indexArray.start] + " - " + d[indexArray.end] + ")";
}
});

trackScalableGroup.selectAll('*').each(function(d){
$(this).qtip({
content: {
text: function(event, api) {
$.ajax({
url: serviceURL,
type: 'POST',
dataType: "json",
data: {
"loadTooltip": "",
"trackName" : name,
"type" : d[indexArray.type],
"xCoordinate" : d[indexArray.start]
}
})
.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);
});

return 'Loading...'; // Set some initial text
}
},
position: {
my: 'top center',
at: 'top center',
target: 'mouse',
adjust: {
mouse: true, // Can be omitted (e.g. default behaviour)
y: 10
}
}
});
})

}

var addBEDTrack = function (data, name, exons) {
Expand Down Expand Up @@ -1131,6 +1152,43 @@ function VQI_GenomeBrowser(id, serviceURL) {
})
.style("vector-effect", "non-scaling-stroke")
.attr("class", "scalable")
.each(function(d){
$(this).qtip({
content: {
text: function(event, api) {
$.ajax({
url: serviceURL,
type: 'POST',
dataType: "json",
data: {
"loadTooltip": "",
"trackName" : name,
"type" : "gene",
"xCoordinate" : d[indexArray.start]
}
})
.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);
});

return 'Loading...'; // Set some initial text
}
},
position: {
my: 'top center',
at: 'top center',
target: 'mouse',
adjust: {
mouse: true, // Can be omitted (e.g. default behaviour)
y: 10
}
}
});
})
/*.attr("x1", function (d) {
return fullXScale(d[indexArray.start]);
})
Expand Down Expand Up @@ -1184,21 +1242,47 @@ function VQI_GenomeBrowser(id, serviceURL) {
.style("fill", "black")
.style("vector-effect", "non-scaling-stroke")
.attr("class", "scalable")
.each(function(d){
$(this).qtip({
content: {
text: function(event, api) {
$.ajax({
url: serviceURL,
type: 'POST',
dataType: "json",
data: {
"loadTooltip": "",
"trackName" : name,
"type" : "exon",
"xCoordinate" : d[indexArray.start]
}
})
.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);
});

return 'Loading...'; // Set some initial text
}
},
position: {
my: 'top center',
at: 'top center',
target: 'mouse',
adjust: {
mouse: true, // Can be omitted (e.g. default behaviour)
y: 10
}
}
});
})

}

// //addHeightTrack(thisData, name);

$(trackScalableGroup.selectAll('*')[0]).tipsy({
gravity: 'n',
html: true,
follow: 'x',
title: function () {
var d = this.__data__;
var name = (d.length > indexArray.name) ? d[indexArray.name] : '';
return name + " (" + d[indexArray.chr] + " : " + d[indexArray.start] + " - " + d[indexArray.end] + ")";
}
});
}

/* var addHeightTrack = function (data, name) {
Expand Down
2 changes: 2 additions & 0 deletions VQI_GenomeBrowserDemo.html
View file
Expand Up @@ -8,8 +8,10 @@
<script src="./d3.tip.v0.6.3.js"></script>
<script src="VQI_GenomeBrowser.js"></script>
<script src="FileSaver.min.js"></script>
<script src="jquery.qtip.min.js"></script>

<link href="tipsy.css" rel="stylesheet" type="text/css" />
<link href="jquery.qtip.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
Expand Down
8 changes: 8 additions & 0 deletions dynamic_loading.php
View file
Expand Up @@ -49,6 +49,10 @@
$result = getStartEndTrackData($_POST["fileHandles"], $_POST["name"], $_POST["chrom"]);
ajaxReturn($result);
}
else if (isset($_POST["loadTooltip"])){
$result = loadTooltip($_POST["trackName"], $_POST["type"], $_POST["xCoordinate"]);
ajaxReturn($result);
}
else {
loadTable();
}
Expand Down Expand Up @@ -494,6 +498,10 @@
return $returnArray;
}

function loadTooltip($trackName, $type, $xCoordinate){
return $trackName.$type.$xCoordinate;
}

function ajaxReturn($result){
echo json_encode($result);
}
Expand Down
3 changes: 3 additions & 0 deletions jquery.qtip.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions jquery.qtip.min.js
View file

Large diffs are not rendered by default.

0 comments on commit 57bad74

Please sign in to comment.