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 testdata;
var isready = false; var isready = false;
var zoomOnly = false; var zoomOnly = false;
var waitTime;




var trackInfo = []; var trackInfo = [];
Expand Down Expand Up @@ -539,8 +540,11 @@ function VQI_GenomeBrowser(id, serviceURL) {
//console.log(zoom.scale()); //console.log(zoom.scale());
//optmizedTrack(); //optmizedTrack();
if (! zoomOnly){ if (! zoomOnly){
updateTrack(); if (waitTime != undefined)
} {
clearTimeout(waitTime);
}
waitTime = setTimeout(updateTrack, 100); }
//addOneTrack(testdata, "HG19", 'bed'); //addOneTrack(testdata, "HG19", 'bed');
$("#" + divId + " #navigate").val(chrom_curr + ":" + Math.round(xScale.domain()[0]) + "-" + Math.round(xScale.domain()[1])); $("#" + 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; var offset = type == "cpg" ? -20 : type == "shore" ? -10 : -7.5;
return offset;//height / 2 + margin + offset return offset;//height / 2 + margin + offset
}); });
/*if(trackScalableGroup.select("rect").empty())
{ trackScalableGroup.selectAll('*').each(function(d){
trackScalableGroup.append("rect") $(this).qtip({
.style("fill-opacity", ".4") content: {
.style("stroke", "red") text: function(event, api) {
.style("fill", "red") $.ajax({
.style("vector-effect", "non-scaling-stroke") url: serviceURL,
.attr("height", 40) type: 'POST',
.attr("width", fullXScale(2000000) - fullXScale(1000000)) dataType: "json",
.attr("x", fullXScale(1000000)) data: {
.attr("y", height / 2 + margin); "loadTooltip": "",
}*/ "trackName" : name,
$(trackScalableGroup.selectAll('*')[0]).tipsy({ "type" : d[indexArray.type],
gravity: 'n', "xCoordinate" : d[indexArray.start]
html: true, }
follow: 'x', })
title: function () { .then(function(content) {
var d = this.__data__; // Set the tooltip content upon successful retrieval
var name = (d.length > indexArray.name) ? d[indexArray.name] : ''; api.set('content.text', content);
return name + " (" + d[indexArray.chr] + " : " + d[indexArray.start] + " - " + d[indexArray.end] + ")"; }, 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) { 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") .style("vector-effect", "non-scaling-stroke")
.attr("class", "scalable") .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) { /*.attr("x1", function (d) {
return fullXScale(d[indexArray.start]); return fullXScale(d[indexArray.start]);
}) })
Expand Down Expand Up @@ -1184,21 +1242,47 @@ function VQI_GenomeBrowser(id, serviceURL) {
.style("fill", "black") .style("fill", "black")
.style("vector-effect", "non-scaling-stroke") .style("vector-effect", "non-scaling-stroke")
.attr("class", "scalable") .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); // //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) { /* 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="./d3.tip.v0.6.3.js"></script>
<script src="VQI_GenomeBrowser.js"></script> <script src="VQI_GenomeBrowser.js"></script>
<script src="FileSaver.min.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="tipsy.css" rel="stylesheet" type="text/css" />
<link href="jquery.qtip.min.css" rel="stylesheet" type="text/css" />
</head> </head>


<body> <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"]); $result = getStartEndTrackData($_POST["fileHandles"], $_POST["name"], $_POST["chrom"]);
ajaxReturn($result); ajaxReturn($result);
} }
else if (isset($_POST["loadTooltip"])){
$result = loadTooltip($_POST["trackName"], $_POST["type"], $_POST["xCoordinate"]);
ajaxReturn($result);
}
else { else {
loadTable(); loadTable();
} }
Expand Down Expand Up @@ -494,6 +498,10 @@
return $returnArray; return $returnArray;
} }


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

function ajaxReturn($result){ function ajaxReturn($result){
echo json_encode($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.