Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Added checkboxes for multiple remove/export, reordering done by arrow… 
…s, tooltip follows mouse
  • Loading branch information
@csw11004
csw11004 committed Apr 10, 2015
1 parent 63de9e2 commit e57a0be
Show file tree
Hide file tree
Showing 3 changed files with 181 additions and 38 deletions.
193 changes: 157 additions & 36 deletions VQI_GenomeBrowser.js
View file
Expand Up @@ -7,6 +7,10 @@ function VQI_GenomeBrowser(id) {

var margin = 50;

var bufferSpace = 20;

var trackHeight = 50;

var panExtent = [0, width];

var trackList = [];
Expand Down Expand Up @@ -181,6 +185,20 @@ function VQI_GenomeBrowser(id) {
};
this.makeFormForColocalization();

var removeSelectedTracks = function(){
var tracknames = []
for (var i in trackList) {
if(graphRegion.selectAll("g").data([trackList[i]['name']], function(d){return d;}).select("#check").node().checked)
{
tracknames.push(trackList[i]['name']);
}
}
for (var i in tracknames) {
removeTrack(tracknames[i]);
}
reorderTracks();
}

var removeTrack = function (removedTrackName) {
//var removedTrackName = $("#" + divId + " #removeTrack").val();
if (removedTrackName != null)
Expand Down Expand Up @@ -215,6 +233,19 @@ function VQI_GenomeBrowser(id) {
};
this.makeFormForRemoveTrack();*/

var exportSelectedTracks = function(){
var tracknames = []
for (var i in trackList) {
if(graphRegion.selectAll("g").data([trackList[i]['name']], function(d){return d;}).select("#check").node().checked)
{
tracknames.push(trackList[i]['name']);
}
}
for (var i in tracknames) {
exportTrack(tracknames[i]);
}
}

var exportTrack = function (track_name) {
// alert("here");

Expand Down Expand Up @@ -244,6 +275,17 @@ function VQI_GenomeBrowser(id) {
}
this.makeFormForExportTrack();*/

this.makeSelectionForm = function () {
var removeButton = "<input type='button' id='removetrackbutton' value='Remove Track'>";
var exportButton = "<input type='button' id='exporttrackbutton' value='Export'>";
var form = "<form id='selectionForm'>" + removeButton + exportButton + "</form>";
$("#" + divId).append(form);
$("#" + divId + " #removetrackbutton").on("click", removeSelectedTracks.bind(this));
$("#" + divId + " #exporttrackbutton").on("click", exportSelectedTracks.bind(this));
};
this.makeSelectionForm();


var self = this;

this.svg = d3.select("#" + id)
Expand Down Expand Up @@ -358,18 +400,19 @@ function VQI_GenomeBrowser(id) {
var xMin = Number(min) > panExtent[0] ? Number(min) : panExtent[0];
var xMax = Number(max) < panExtent[1] ? Number(max) : panExtent[1];

var distance = (panExtent[1] - panExtent[0])/10000
var initialZoom = 10000 //defines what will be considered a zoom scale of 1
var range = (panExtent[1] - panExtent[0])/initialZoom

xScale.domain([panExtent[0], panExtent[0] + distance])
xScale.domain([panExtent[0], panExtent[0] + range])
.range([0,width]);

zoom.scaleExtent([1/10000, (panExtent[1] - panExtent[0]) / 50 / 10000]);
zoom.scaleExtent([1/initialZoom, (panExtent[1] - panExtent[0]) / 50 / initialZoom]);

zoom.x(xScale).on("zoom", zoomed);

svg.call(zoom);
svg.call(zoom).on("dblclick.zoom", null);

var scale = (panExtent[1] - panExtent[0]) / (xMax - xMin) / 10000;
var scale = (panExtent[1] - panExtent[0]) / (xMax - xMin) / initialZoom;

zoom.scale(scale);

Expand Down Expand Up @@ -433,8 +476,6 @@ function VQI_GenomeBrowser(id) {

var graph = function (chromosome, min, max) {

svg.attr("height", height + 2 * margin);

var self = this;

chrom_curr = chromosome;
Expand Down Expand Up @@ -483,12 +524,12 @@ function VQI_GenomeBrowser(id) {
name = name || "track-" + (trackIndex + 1);

if (type == 'cpg') {
initTrack(name, 50);
initTrack(name);
addCpgTrack(thisData, name);
data['type'] = 'cpg';
}else{
// if (type == 'bed') {
initTrack(name, 10);
initTrack(name);
addBEDTrack(thisData, name);
data['type'] = 'bed';
}
Expand All @@ -499,28 +540,32 @@ function VQI_GenomeBrowser(id) {
return data;
}

var initTrack = function (name, fHeight){
var bufferSpace = 20;
var reorderTracks = function (){
svg.attr("height", height + 2 * margin + trackList.length * (trackHeight + bufferSpace));
for(var i in trackList){
graphRegion.selectAll("g").data([trackList[i]['name']], function(d){return d;})
.attr("transform", "translate(" + 0 + "," + (margin + bufferSpace + i * (trackHeight + bufferSpace)) + ")");
}
}

svg.attr("height", Number(svg.attr("height")) + fHeight + bufferSpace);
var thisY = Number(svg.attr("height")) - 2 * margin - fHeight / 2;
var initTrack = function (name){

graphRegion.selectAll("g").data([name], function(d){return d;}).enter().append("g");

var trackGroup = graphRegion.selectAll("g").data([name], function(d){return d;})
.attr("transform", "translate(" + 0 + "," + thisY + ")");
//.attr("transform", "translate(" + 0 + "," + thisY + ")");


trackGroup.selectAll("text").data([name], function(d){return d;}).enter().append("text")
.attr("class", name)
.attr("x", 0)
.attr("y", -fHeight / 2 - bufferSpace / 2)
.attr("y", -trackHeight / 2 - bufferSpace / 2)
.attr("font-family", "sans-serif")
.attr("font-size", "12px")
.attr("fill", "red")
.text(name);

if (trackGroup.select("rect.remove").empty())
/* if (trackGroup.select("rect.remove").empty())
{
trackGroup.append("rect")
.attr("height", 10)
Expand All @@ -540,26 +585,77 @@ function VQI_GenomeBrowser(id) {
.attr("y", -5)
.attr("class", "export")
.on('click', function(){exportTrack(name);});
}*/
if (trackGroup.select(".checkbox").empty())
{
trackGroup.append("foreignObject")
.attr("width", 50)
.attr("height", 20)
.attr("x", width)
.attr("y", -10)
.attr("class", "checkbox")
.append("xhtml:body")
.html("<form><input type=checkbox id=check class=" + name + "/></form>")
.on("click", function(d, i){
console.log(trackGroup.select("#check").node().checked);
xAxisSelection.call(xAxis);//I have no idea why it won't redraw the checkbox unless I call this
});
}

if (trackGroup.select("rect.drag").empty())
if(trackGroup.select("path.up").empty())
{
trackGroup.append("path")
.attr("transform", function(d) { return "translate(" + -20 + "," + -10 + ")" })
.attr("d", d3.svg.symbol().type(["triangle-up"]))
.attr("class", "up")
.on('click', function(){
var i = Number(getTrackIndexByName(name));
if(i > 0)
{
var temp = trackList[i];
trackList[i] = trackList[i-1];
trackList[i-1] = temp;
}
reorderTracks();
});
}

if(trackGroup.select("path.down").empty())
{
trackGroup.append("path")
.attr("transform", function(d) { return "translate(" + -20 + "," + 10 + ")" })
.attr("d", d3.svg.symbol().type(["triangle-down"]))
.attr("class", "down")
.on('click', function(){
var i = Number(getTrackIndexByName(name));
if(i < trackList.length - 1)
{
var temp = trackList[i];
trackList[i] = trackList[i+1];
trackList[i+1] = temp;
}
reorderTracks();
});
}

/*if (trackGroup.select("rect.drag").empty())
{
var drag = d3.behavior.drag()
//.origin(function() { return {x: 0, y: d3.transform(trackGroup.attr("transform")).translate[1] }})
.on("drag", function(){
trackGroup = graphRegion.selectAll("g").data([name], function(d){return d;})
.attr("transform", "translate(" + 0 + "," + Math.max(margin + fHeight/2 - bufferSpace/2, Math.min(svg.attr("height") - 2* margin, d3.transform(trackGroup.attr("transform")).translate[1] + d3.event.y)) + ")");
.attr("transform", "translate(" + 0 + "," + Math.max(margin + trackHeight/2 - bufferSpace/2, Math.min(svg.attr("height") - 2* margin, d3.transform(trackGroup.attr("transform")).translate[1] + d3.event.y)) + ")");
//console.log(thisY + " " +d3.event.y);
});
trackGroup.append("rect")
.attr("height", fHeight)
.attr("height", trackHeight)
.attr("width", 10)
.attr("x", -20)
.attr("y", -fHeight/2)
.attr("y", -trackHeight/2)
.attr("class", "drag")
.call(drag);
}
}*/

if (trackGroup.select("g.scalable").empty())
{
Expand Down Expand Up @@ -639,6 +735,7 @@ function VQI_GenomeBrowser(id) {
$(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] : '';
Expand All @@ -649,33 +746,46 @@ function VQI_GenomeBrowser(id) {

var addBEDTrack = function (data, name) {

var fHeight = 10;
var trackHeight = 10;

var trackScalableGroup = graphRegion.selectAll("g").data([name], function(d){return d;}).select("g.scalable");

//console.log(data[142]);

trackScalableGroup.selectAll("line")
trackScalableGroup.selectAll("rect")
.data(data, function (d) {
return d;
})
.exit()
.remove();

trackScalableGroup.selectAll("line")
trackScalableGroup.selectAll("rect")
.data(data, function (d) {
return d;
})
.enter()
.append("line");
.append("rect");

// console.log(data[1]);

var tracks = trackScalableGroup.selectAll("line")
var tracks = trackScalableGroup.selectAll("rect")
.data(data, function (d) {
return d;
})
.attr("x1", function (d) {
.attr("x", function (d) {
return fullXScale(d[indexArray.start]);
})
.attr("y", -1)
.attr("height", 2)
.attr("width", function (d) {
return fullXScale(d[indexArray.end]) - fullXScale(d[indexArray.start]);
})
.style("fill-opacity", "1")
.style("stroke", "black")
.style("fill", "black")
.style("vector-effect", "non-scaling-stroke")
.attr("class", "scalable")
/*.attr("x1", function (d) {
return fullXScale(d[indexArray.start]);
})
.attr("y1", function (d) {
Expand All @@ -689,7 +799,7 @@ function VQI_GenomeBrowser(id) {
})
.style("stroke", "black")
.style("stroke-width", "2px")
.attr("class", "scalable")
.attr("class", "scalable")*/


if (data[0].length >= indexArray.exonEnds)
Expand Down Expand Up @@ -733,8 +843,8 @@ function VQI_GenomeBrowser(id) {
.attr("x", function (d) {
return fullXScale(d[indexArray.start]);
})
.attr("y", -fHeight / 2)
.attr("height", fHeight)
.attr("y", -trackHeight / 2)
.attr("height", trackHeight)
.attr("width", function (d) {
return fullXScale(d[indexArray.end]) - fullXScale(d[indexArray.start]);
})
Expand All @@ -751,6 +861,7 @@ function VQI_GenomeBrowser(id) {
$(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] : '';
Expand All @@ -759,11 +870,11 @@ function VQI_GenomeBrowser(id) {
});
}

var addHeightTrack = function (data, name) {
/* var addHeightTrack = function (data, name) {
var bufferSpace = 10;
var fHeight = 100;
var thisY = Number(svg.attr("height")) - margin + fHeight / 2 + bufferSpace;
svg.attr("height", Number(svg.attr("height")) + fHeight + bufferSpace);
var trackHeight = 100;
var thisY = Number(svg.attr("height")) - margin + trackHeight / 2 + bufferSpace;
svg.attr("height", Number(svg.attr("height")) + trackHeight + bufferSpace);
var yScale = d3.scale.linear();
Expand All @@ -775,7 +886,7 @@ function VQI_GenomeBrowser(id) {
}) + 1;
yScale.domain([yMin, yMax])
.range([thisY + fHeight / 2, thisY - fHeight / 2]);
.range([thisY + trackHeight / 2, thisY - trackHeight / 2]);
var trackGroup = svg.select("g." + name);
Expand Down Expand Up @@ -876,13 +987,14 @@ function VQI_GenomeBrowser(id) {
.attr("y2", yScale(0))
.style("stroke", "black")
.style("stroke-width", "2px")
}
}*/

this.addTrack = function (data, name, type) {
// data['name'] = name;
data = addOneTrack(data, name, type);

trackList.push(data);
reorderTracks();
updateAllTracksSelectBoxes();
}

Expand Down Expand Up @@ -1143,6 +1255,15 @@ function VQI_GenomeBrowser(id) {
}
};

var getTrackIndexByName = function (name) {
for (var i in trackList) {
var thisTrack = trackList[i];
if (thisTrack['name'] === name) {
return i;
}
}
};

var updateAllTracksSelectBoxes = function () {
var track1Select = $("#" + divId + " #track1");
updateSelectBoxWithTracks(track1Select.get(0));
Expand Down
2 changes: 1 addition & 1 deletion VQI_GenomeBrowserDemo.html
View file
Expand Up @@ -29,7 +29,7 @@
var genomeFile = file_dir + "./hg19_refgene.txt";
obj.addTrackFile(genomeFile, "HG19", 'bed');

var snpile = file_dir + "./Tile2contentsnpplotter.txt";
var snpFile = file_dir + "./Tile2contentsnpplotter.txt";
obj.addTrackFile(snpFile, "Tile2 Content Snp", 'bed');
</script>
</footer>
Expand Down

0 comments on commit e57a0be

Please sign in to comment.