Skip to content
Permalink
Browse files

Ajax loading of Tooltips

  • Loading branch information
csw11004 committed Jul 30, 2015
1 parent 18d2dd0 commit 57bad7469cb1a4a7a093e462d3b45fb050c550a9
Showing with 137 additions and 35 deletions.
  1. +119 −35 VQI_GenomeBrowser.js
  2. +2 −0 VQI_GenomeBrowserDemo.html
  3. +8 −0 dynamic_loading.php
  4. +3 −0 jquery.qtip.min.css
  5. +5 −0 jquery.qtip.min.js
@@ -25,6 +25,7 @@ function VQI_GenomeBrowser(id, serviceURL) {
var testdata;
var isready = false;
var zoomOnly = false;
var waitTime;


var trackInfo = [];
@@ -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]));
};
@@ -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) {
@@ -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]);
})
@@ -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) {
@@ -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>
@@ -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();
}
@@ -494,6 +498,10 @@ function getStartEndTrackData($fileHandles,$name,$chrom){
return $returnArray;
}
function loadTooltip($trackName, $type, $xCoordinate){
return $trackName.$type.$xCoordinate;
}
function ajaxReturn($result){
echo json_encode($result);
}

Some generated files are not rendered by default. Learn more.

Large diffs are not rendered by default.

0 comments on commit 57bad74

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