Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Bounded zoom, some exon bug fixes
  • Loading branch information
@csw11004
csw11004 committed Mar 13, 2015
1 parent dd96961 commit e4a5e0a
Showing 1 changed file with 89 additions and 41 deletions.
130 changes: 89 additions & 41 deletions VQI_GenomeBrowser.js
View file
Expand Up @@ -6,10 +6,12 @@ function VQI_GenomeBrowser(id) {
var height = 100;

var margin = 50;

var panExtent = [0,width];

var trackList = [];
var trackSelections = [];


var genomeData = [];

var chromosomes = [];
Expand Down Expand Up @@ -47,17 +49,23 @@ function VQI_GenomeBrowser(id) {
// });

var navigateToRegion = function () {
var chrom = $("#" + divId + " #chrom").val();
/*var chrom = $("#" + divId + " #chrom").val();
var chrom_start = $("#" + divId + " #chrom_start").val();
var chrom_end = $("#" + divId + " #chrom_end").val();
var chrom_end = $("#" + divId + " #chrom_end").val();*/
var navigate = $("#" + divId + " #navigate").val();
navigate = navigate.split(/[:-]/);
var chrom = navigate[0].trim();
var chrom_start = Number(navigate[1].trim());
var chrom_end = Number(navigate[2].trim());
graph(chrom, chrom_start, chrom_end);
};
this.makeNavigationForm = function () {
var chromSelectBox = "<select name='chrom' id='chrom'></select>";
/*var chromSelectBox = "<select name='chrom' id='chrom'></select>";
var chromStartBox = "<input type='text' name='chrom_start' id='chrom_start'>";
var chromEndBox = "<input type='text' name='chrom_end' id='chrom_end'>";
var chromEndBox = "<input type='text' name='chrom_end' id='chrom_end'>";*/
var navigateBox = "<input type='text' name='navigate' id='navigate'>";
var navigateButton = "<input type='button' id='navigatebutton' value='Go To'>";
var form = "<form id='navigation_form'>" + chromSelectBox + chromStartBox + chromEndBox + navigateButton + "</form>";
var form = "<form id='navigation_form'>" + navigateBox + navigateButton + "</form>";
$("#" + divId).append(form);
$("#" + divId + " #navigatebutton").on("click", navigateToRegion.bind(this));
};
Expand Down Expand Up @@ -235,7 +243,11 @@ function VQI_GenomeBrowser(id) {
});*/

var zoomed = function () {
xAxisSelection.call(xAxis);


var t = zoom.translate();
//console.log(t[0]);
zoom.translate([panLimit(), 0]);

svg.selectAll("rect")
.attr("width", function (d) {
Expand All @@ -257,6 +269,7 @@ function VQI_GenomeBrowser(id) {

// minNumber.property("value", xScale.domain()[0]);
//maxNumber.property("value", xScale.domain()[1]);
xAxisSelection.call(xAxis);

d3.selectAll(".axis path, .axis line").style({
"fill": "none",
Expand All @@ -268,23 +281,65 @@ function VQI_GenomeBrowser(id) {
"font-size": "11px"});
};

var panLimit = function() {

var divisor = (width) / ((xScale.domain()[1]-xScale.domain()[0])*zoom.scale());
var diff = margin - zoom.scale()* margin;
minX = -(((xScale.domain()[0]-xScale.domain()[1])*zoom.scale())+(panExtent[1]-(panExtent[1]-(width/divisor)))) + diff,
maxX = -(((xScale.domain()[0]-xScale.domain()[1]))+(panExtent[1]-panExtent[0]))*divisor*zoom.scale() + diff;

tx = xScale.domain()[0] < panExtent[0] ?
minX :
xScale.domain()[1] > panExtent[1] ?
maxX :
zoom.translate()[0];

console.log(tx);
return tx;

}

this.navigate = function (chrom, chrom_start, chrom_end) {
graph(chrom, chrom_start, chrom_end);
};

var setBounds = function(min, max){
var xMax = Number(max);
var xMin = Number(min);
var xMin = Number(min) > panExtent[0] ? Number(min) : panExtent[0];
var xMax = Number(max) < panExtent[1] ? Number(max) : panExtent[1];

xScale.domain([xMin - (xMax - xMin) * 1 / 10, xMax + (xMax - xMin) * 1 / 10])
xScale.domain([panExtent[0], panExtent[1]])
.range([margin, width + margin]);

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

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

svg.call(zoom);

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

zoom.scale(scale);

var divisor = (width) / ((xScale.domain()[1]-xScale.domain()[0])*scale);
var diff = margin - scale* margin;
var minX = -(((xScale.domain()[0]-xScale.domain()[1])*scale)+(panExtent[1]-(panExtent[1]-(width/divisor)))) + diff;
var maxX = -(((xScale.domain()[0]-xScale.domain()[1]))+(panExtent[1]-panExtent[0]))*divisor*scale + diff;

var midScale = d3.scale.linear()
.domain([panExtent[0], panExtent[1]])
.range([minX,maxX]);

//TODO: Need to figure out actual translation
var zoomWidth = midScale(xMin);

/*console.log(diff);
console.log(zoomWidth);*/

zoom.translate([zoomWidth,0])
.scale(scale);

zoomed();

// minNumber.property("value", xMin);
// maxNumber.property("value", xMax);
}
Expand All @@ -296,8 +351,6 @@ function VQI_GenomeBrowser(id) {
var self = this;

var currentData;
var xMax = 0;
var xMin = 0;

//Populates drop down list with different chromosomes
// select.selectAll("option")
Expand Down Expand Up @@ -326,30 +379,29 @@ function VQI_GenomeBrowser(id) {
currentData = genomeData.filter(function (d) {
return d[indexList.chr] == chromosome
});

panExtent[0] = d3.min(currentData, function (d) {
return d[indexList.start]
});
panExtent[1] = d3.max(currentData, function (d) {
return d[indexList.end]
});

//Gets relevant data and calculates min/max if needed
if (min == null || max == null) {
xMax = d3.max(currentData, function (d) {
return d[indexList.end]
});
xMin = d3.min(currentData, function (d) {
return d[indexList.start]
});
// minNumber.property("value", xMin);
// maxNumber.property("value", xMax);
if (min == null || max == null) {


d3.select("#chrom_start").property("value", xMin);
d3.select("#chrom_end").property("value", xMax);
d3.select("#chrom_start").property("value", panExtent[0]);
d3.select("#chrom_end").property("value", panExtent[1]);
setBounds(panExtent[0],panExtent[1]);
}
else {
/* currentData = genomeData.filter(function (d) {
return d[indexList.chr] == chromosome;// && d[indexList.start] >= min && d[indexList.end] <= max
});*/
xMax = Number(max);
xMin = Number(min);
setBounds(Number(min),Number(max));
}

setBounds(xMin,xMax);

svg.selectAll("rect")
.data(currentData)
.exit()
Expand Down Expand Up @@ -409,8 +461,6 @@ function VQI_GenomeBrowser(id) {
return (d[index.chr] === chrom_curr);
});

//Just another line

var trackCount = trackIndex + 1;
//name of track
name = name || "track-" + (trackIndex + 1);
Expand Down Expand Up @@ -460,25 +510,23 @@ function VQI_GenomeBrowser(id) {
return height / 2 + margin + 20 + ySpace;
})
.style("stroke", "black")
.style("stroke-width", "2px")

trackSelections.push(tracks);

var exons = [];

$.each(thisData, function (index, value) {

value[indexArray.exonStarts] = value[indexArray.exonStarts].slice(1,value[indexArray.exonStarts].length - 2).split(",");
value[indexArray.exonEnds] = value[indexArray.exonEnds].slice(1,value[indexArray.exonEnds].length - 2).split(",");
var exonStarts = value[indexArray.exonStarts].slice(1,value[indexArray.exonStarts].length - 2).split(",");
var exonEnds = value[indexArray.exonEnds].slice(1,value[indexArray.exonEnds].length - 2).split(",");

for(var i = 0; i < value[indexArray.exonStarts].length; i++)
for(var i = 0; i < exonStarts.length; i++)
{

var exon = value.slice(0);
exon[indexArray.name] = exon[indexArray.name] + " Exon " + (i+1) + "/" + value[indexArray.exonStarts].length;
exon[indexArray.start] = parseInt(exon[indexArray.exonStarts][i]);
exon[indexArray.end] = parseInt(exon[indexArray.exonEnds][i]);
exons.push(exon);

var exon = exonStarts.slice(0);
exon[indexArray.name] = value[indexArray.name] + " Exon " + (i+1) + "/" + exonStarts.length;
exon[indexArray.start] = parseInt(exonStarts[i]);
exon[indexArray.end] = parseInt(exonEnds[i]);
exons.push(exon);
}
});

Expand Down

0 comments on commit e4a5e0a

Please sign in to comment.