diff --git a/VQI_GenomeBrowser.js b/VQI_GenomeBrowser.js index e92f2b9..d266286 100755 --- a/VQI_GenomeBrowser.js +++ b/VQI_GenomeBrowser.js @@ -127,6 +127,8 @@ function VQI_GenomeBrowser(id) { var dataToPost1 = [], dataToPost2 = []; dataToPost1 = JSON.stringify(data1); dataToPost2 = JSON.stringify(data2); + var data1Length = data1.length; + var data2Length = data2.length; $.ajax({ url: vqi_url + 'serverside/web/VQService.php?service=coloc-bed-and-bed', @@ -149,6 +151,8 @@ function VQI_GenomeBrowser(id) { thisObj.addTrack(data1); thisObj.addTrack(data2); + thisObj.getPValue(data1Length, data2Length, data1.length); + // objVQIResult.parseSNPAndSNP(data, true); }).error(function (req, status, error) { $("body").append(status + ": " + error); @@ -156,6 +160,38 @@ function VQI_GenomeBrowser(id) { }; + /** + * + * @author Pujan Joshi + * @since April 16, 2015 + * @param {type} k1 + * @param {type} k2 + * @param {type} ob + * @returns {p-value} + * + * This method calls Yue's pvalue program and returns p-value result. + */ + this.getPValue = function (k1, k2, ob) { + $.ajax({ + url: vqi_url + 'serverside/web/VQService.php?service=coloc-pvalue', + type: 'GET', + dataType: "text", + data: { + "K1": k1, + "K2": k2, + "OB": ob + }, + async: true + }).success(function (data) { + console.log(data); + alert("pvalue = " + data); + +// objVQIResult.parseSNPAndSNP(data, true); + }).error(function (req, status, error) { + $("body").append(status + ": " + error); + }); + } + this.makeFormForColocalization = function () { var track1Select = "Track1: "; - var distanceTextBox = ""; + var distanceTextBox = ""; var colocalizeButton = ""; var form = "
" + track1Select + track2Select + distanceTextBox + colocalizeButton + "
"; @@ -185,10 +221,12 @@ function VQI_GenomeBrowser(id) { }; this.makeFormForColocalization(); - var removeSelectedTracks = function(){ + 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) + if (graphRegion.selectAll("g").data([trackList[i]['name']], function (d) { + return d; + }).select("#check").node().checked) { tracknames.push(trackList[i]['name']); } @@ -206,7 +244,9 @@ function VQI_GenomeBrowser(id) { for (var i in trackList) { var thisTrack = trackList[i]; if (thisTrack['name'] === removedTrackName) { - svg.selectAll("g").data([trackList[i]['name']], function(d){return d;}).remove(); + svg.selectAll("g").data([trackList[i]['name']], function (d) { + return d; + }).remove(); trackList.splice(i, 1); break; } @@ -217,26 +257,28 @@ function VQI_GenomeBrowser(id) { }; /*this.makeFormForRemoveTrack = function () { - var removeTrackSelect = "Remove: "; - - var removeButton = ""; - var form = "
" + removeTrackSelect + removeButton + "
"; - $("#" + divId).append(form); - $("#" + divId + " #removetrackbutton").on("click", removeTrack.bind(this)); - }; - this.makeFormForRemoveTrack();*/ + var removeTrackSelect = "Remove: "; + + var removeButton = ""; + var form = "
" + removeTrackSelect + removeButton + "
"; + $("#" + divId).append(form); + $("#" + divId + " #removetrackbutton").on("click", removeTrack.bind(this)); + }; + this.makeFormForRemoveTrack();*/ - var exportSelectedTracks = function(){ + 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) + if (graphRegion.selectAll("g").data([trackList[i]['name']], function (d) { + return d; + }).select("#check").node().checked) { tracknames.push(trackList[i]['name']); } @@ -259,21 +301,21 @@ function VQI_GenomeBrowser(id) { } /*this.makeFormForExportTrack = function () { - var exportTrackSelect = "Export: "; - - var exportButton = ""; - var form = "
" + exportTrackSelect + exportButton + "
"; - $("#" + divId).append(form); - $("#" + divId + " #exporttrackbutton").on("click", exportTrack.bind(this)); - } - this.makeFormForExportTrack();*/ + var exportTrackSelect = "Export: "; + + var exportButton = ""; + var form = "
" + exportTrackSelect + exportButton + "
"; + $("#" + divId).append(form); + $("#" + divId + " #exporttrackbutton").on("click", exportTrack.bind(this)); + } + this.makeFormForExportTrack();*/ this.makeSelectionForm = function () { var removeButton = ""; @@ -382,7 +424,7 @@ function VQI_GenomeBrowser(id) { var divisor = (width) / ((xScale.domain()[1] - xScale.domain()[0]) * zoom.scale()); minX = -(((xScale.domain()[0] - xScale.domain()[1]) * zoom.scale()) + (panExtent[1] - (panExtent[1] - (width / divisor)))), - maxX = -(((xScale.domain()[0] - xScale.domain()[1])) + (panExtent[1] - panExtent[0])) * divisor * zoom.scale(); + maxX = -(((xScale.domain()[0] - xScale.domain()[1])) + (panExtent[1] - panExtent[0])) * divisor * zoom.scale(); tx = xScale.domain()[0] < panExtent[0] ? minX : @@ -401,12 +443,12 @@ function VQI_GenomeBrowser(id) { var xMax = Number(max) < panExtent[1] ? Number(max) : panExtent[1]; var initialZoom = 10000 //defines what will be considered a zoom scale of 1 - var range = (panExtent[1] - panExtent[0])/initialZoom + var range = (panExtent[1] - panExtent[0]) / initialZoom xScale.domain([panExtent[0], panExtent[0] + range]) - .range([0,width]); + .range([0, width]); - zoom.scaleExtent([1/initialZoom, (panExtent[1] - panExtent[0]) / 50 / initialZoom]); + zoom.scaleExtent([1 / initialZoom, (panExtent[1] - panExtent[0]) / 50 / initialZoom]); zoom.x(xScale).on("zoom", zoomed); @@ -464,14 +506,14 @@ function VQI_GenomeBrowser(id) { panExtent[0] = isNaN(min) ? 0 : min; panExtent[1] = isNaN(max) ? width : max; - var distance = (panExtent[1] - panExtent[0])/10000 + var distance = (panExtent[1] - panExtent[0]) / 10000 /*xScale.domain([0,distance]) - .range([0,width]);*/ + .range([0,width]);*/ fullXScale = d3.scale.linear() .domain([panExtent[0], panExtent[0] + distance]) - .range([0,width]); + .range([0, width]); } var graph = function (chromosome, min, max) { @@ -527,7 +569,7 @@ function VQI_GenomeBrowser(id) { initTrack(name); addCpgTrack(thisData, name); data['type'] = 'cpg'; - }else{ + } else { // if (type == 'bed') { initTrack(name); addBEDTrack(thisData, name); @@ -540,23 +582,31 @@ function VQI_GenomeBrowser(id) { return data; } - var reorderTracks = function (){ + 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)) + ")"); + 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)) + ")"); } } - var initTrack = function (name){ + var initTrack = function (name) { - graphRegion.selectAll("g").data([name], function(d){return d;}).enter().append("g"); + 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 + ")"); + var trackGroup = graphRegion.selectAll("g").data([name], function (d) { + return d; + }) + //.attr("transform", "translate(" + 0 + "," + thisY + ")"); - trackGroup.selectAll("text").data([name], function(d){return d;}).enter().append("text") + trackGroup.selectAll("text").data([name], function (d) { + return d; + }).enter().append("text") .attr("class", name) .attr("x", 0) .attr("y", -trackHeight / 2 - bufferSpace / 2) @@ -565,97 +615,101 @@ function VQI_GenomeBrowser(id) { .attr("fill", "red") .text(name); - /* if (trackGroup.select("rect.remove").empty()) - { - trackGroup.append("rect") - .attr("height", 10) - .attr("width", 10) - .attr("x", width + 10) - .attr("y", -5) - .attr("class", "remove") - .on('click', function(){removeTrack(name);}); - } - - if (trackGroup.select("rect.export").empty()) - { - trackGroup.append("rect") - .attr("height", 10) - .attr("width", 10) - .attr("x", width + 30) - .attr("y", -5) - .attr("class", "export") - .on('click', function(){exportTrack(name);}); - }*/ + /* if (trackGroup.select("rect.remove").empty()) + { + trackGroup.append("rect") + .attr("height", 10) + .attr("width", 10) + .attr("x", width + 10) + .attr("y", -5) + .attr("class", "remove") + .on('click', function(){removeTrack(name);}); + } + + if (trackGroup.select("rect.export").empty()) + { + trackGroup.append("rect") + .attr("height", 10) + .attr("width", 10) + .attr("x", width + 30) + .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("
") - .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 - }); + .attr("width", 50) + .attr("height", 20) + .attr("x", width) + .attr("y", -10) + .attr("class", "checkbox") + .append("xhtml:body") + .html("
") + .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("path.up").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(); - }); + .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()) + 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(); - }); + .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 + 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", trackHeight) - .attr("width", 10) - .attr("x", -20) - .attr("y", -trackHeight/2) - .attr("class", "drag") - .call(drag); - }*/ + { + + 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 + 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", trackHeight) + .attr("width", 10) + .attr("x", -20) + .attr("y", -trackHeight/2) + .attr("class", "drag") + .call(drag); + }*/ if (trackGroup.select("g.scalable").empty()) { @@ -668,8 +722,10 @@ function VQI_GenomeBrowser(id) { var addCpgTrack = function (data, name) { - //Just a line - graphRegion.selectAll("g").data([name], function(d){return d;}) + //Just a line + graphRegion.selectAll("g").data([name], function (d) { + return d; + }) .append("line") .attr("x1", 0) .attr("y1", 0) @@ -677,7 +733,9 @@ function VQI_GenomeBrowser(id) { .attr("y2", 0) .style("stroke", "blue"); - var trackScalableGroup = graphRegion.selectAll("g").data([name], function(d){return d;}).select("g.scalable"); + var trackScalableGroup = graphRegion.selectAll("g").data([name], function (d) { + return d; + }).select("g.scalable"); trackScalableGroup.selectAll("rect") .data(data, function (d) { @@ -745,10 +803,23 @@ function VQI_GenomeBrowser(id) { } var addBEDTrack = function (data, name) { + /** + * @author Pujan Joshi + * @since April 16, 2015 + * + * if data is empty, we do not need to proceed. Trying to check for + * some records in empty array was causing error in this method. + * + */ + if (data.length === 0) { + return; + } var trackHeight = 10; - var trackScalableGroup = graphRegion.selectAll("g").data([name], function(d){return d;}).select("g.scalable"); + var trackScalableGroup = graphRegion.selectAll("g").data([name], function (d) { + return d; + }).select("g.scalable"); //console.log(data[142]); @@ -766,17 +837,17 @@ function VQI_GenomeBrowser(id) { .enter() .append("rect"); - // console.log(data[1]); + // console.log(data[1]); var tracks = trackScalableGroup.selectAll("rect") .data(data, function (d) { return d; }) .attr("x", function (d) { - return fullXScale(d[indexArray.start]); - }) + return fullXScale(d[indexArray.start]); + }) .attr("y", -1) - .attr("height", 2) + .attr("height", 5) .attr("width", function (d) { return fullXScale(d[indexArray.end]) - fullXScale(d[indexArray.start]); }) @@ -785,21 +856,21 @@ function VQI_GenomeBrowser(id) { .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) { - return 0; - }) - .attr("x2", function (d) { - return fullXScale(d[indexArray.end]); - }) - .attr("y2", function (d) { - return 0; - }) - .style("stroke", "black") - .style("stroke-width", "2px") - .attr("class", "scalable")*/ + /*.attr("x1", function (d) { + return fullXScale(d[indexArray.start]); + }) + .attr("y1", function (d) { + return 0; + }) + .attr("x2", function (d) { + return fullXScale(d[indexArray.end]); + }) + .attr("y2", function (d) { + return 0; + }) + .style("stroke", "black") + .style("stroke-width", "2px") + .attr("class", "scalable")*/ if (data[0].length >= indexArray.exonEnds) @@ -870,124 +941,124 @@ function VQI_GenomeBrowser(id) { }); } - /* var addHeightTrack = function (data, name) { - var bufferSpace = 10; - 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(); - - var yMin = d3.min(data, function (d) { - return isNaN(d[indexArray.score]) ? 0 : Number(d[indexArray.score]) - }) - 1; - var yMax = d3.max(data, function (d) { - return isNaN(d[indexArray.score]) ? 0 : Number(d[indexArray.score]) - }) + 1; - - yScale.domain([yMin, yMax]) - .range([thisY + trackHeight / 2, thisY - trackHeight / 2]); - - var trackGroup = svg.select("g." + name); - - var yAxis = d3.svg.axis() - .scale(yScale) - .orient("left") - .ticks(5); - - var yAxisSelection = trackGroup.append("g") - .call(yAxis) - .attr("class", "axis " + name) - .attr("transform", "translate(" + margin + "," + 0 + ")"); - - d3.selectAll(".axis path, .axis line").style({ - "fill": "none", - "stroke": "black", - "shape-rendering": "crispEdges"}); - - d3.selectAll(".axis text").style({ - "font-family": "sans-serif", - "font-size": "11px"}); - - var trackScalableGroup = trackGroup.select("g.scalable"); - - if (trackScalableGroup.select("g.height").empty()) - { - trackScalableGroup.append("g") - .attr("class", "height") - } - var trackHeightGroup = svg.select("g.height"); - - var lines = data.filter(function (d) { - return d[indexArray.score] == ""; - }); - var rects = data.filter(function (d) { - return !isNaN(d[indexArray.score]) && d[indexArray.score] != ""; - }); - - trackHeightGroup.selectAll("rect") - .data(rects, function (d) { - return d; - }) - .exit() - .remove(); - - trackHeightGroup.selectAll("rect") - .data(rects, function (d) { - return d; - }) - .enter() - .append("rect"); - - trackHeightGroup.selectAll("rect") - .data(rects, function (d) { - return d; - }) - .attr("x", function (d) { - return fullXScale(Number(d[indexArray.start])); - }) - .attr("y", function (d) { - return d < 0 ? yScale(0) : yScale(d[indexArray.score]); - }) - .attr("height", function (d) { - return Math.abs(yScale(d[indexArray.score]) - yScale(0)); - }) - .attr("width", function (d) { - return fullXScale(Number(d[indexArray.end])) - fullXScale(Number(d[indexArray.start])); - }) - .style("fill-opacity", ".8") - .style("stroke", "gray") - .style("fill", "gray") - - trackHeightGroup.selectAll("line") - .data(lines, function (d) { - return d; - }) - .exit() - .remove(); - - trackHeightGroup.selectAll("line") - .data(lines, function (d) { - return d; - }) - .enter() - .append("line"); - - trackHeightGroup.selectAll("line") - .data(lines, function (d) { - return d; - }) - .attr("x1", function (d) { - return fullXScale(d[indexArray.start]); - }) - .attr("y1", yScale(0)) - .attr("x2", function (d) { - return fullXScale(d[indexArray.end]); - }) - .attr("y2", yScale(0)) - .style("stroke", "black") - .style("stroke-width", "2px") - }*/ + /* var addHeightTrack = function (data, name) { + var bufferSpace = 10; + 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(); + + var yMin = d3.min(data, function (d) { + return isNaN(d[indexArray.score]) ? 0 : Number(d[indexArray.score]) + }) - 1; + var yMax = d3.max(data, function (d) { + return isNaN(d[indexArray.score]) ? 0 : Number(d[indexArray.score]) + }) + 1; + + yScale.domain([yMin, yMax]) + .range([thisY + trackHeight / 2, thisY - trackHeight / 2]); + + var trackGroup = svg.select("g." + name); + + var yAxis = d3.svg.axis() + .scale(yScale) + .orient("left") + .ticks(5); + + var yAxisSelection = trackGroup.append("g") + .call(yAxis) + .attr("class", "axis " + name) + .attr("transform", "translate(" + margin + "," + 0 + ")"); + + d3.selectAll(".axis path, .axis line").style({ + "fill": "none", + "stroke": "black", + "shape-rendering": "crispEdges"}); + + d3.selectAll(".axis text").style({ + "font-family": "sans-serif", + "font-size": "11px"}); + + var trackScalableGroup = trackGroup.select("g.scalable"); + + if (trackScalableGroup.select("g.height").empty()) + { + trackScalableGroup.append("g") + .attr("class", "height") + } + var trackHeightGroup = svg.select("g.height"); + + var lines = data.filter(function (d) { + return d[indexArray.score] == ""; + }); + var rects = data.filter(function (d) { + return !isNaN(d[indexArray.score]) && d[indexArray.score] != ""; + }); + + trackHeightGroup.selectAll("rect") + .data(rects, function (d) { + return d; + }) + .exit() + .remove(); + + trackHeightGroup.selectAll("rect") + .data(rects, function (d) { + return d; + }) + .enter() + .append("rect"); + + trackHeightGroup.selectAll("rect") + .data(rects, function (d) { + return d; + }) + .attr("x", function (d) { + return fullXScale(Number(d[indexArray.start])); + }) + .attr("y", function (d) { + return d < 0 ? yScale(0) : yScale(d[indexArray.score]); + }) + .attr("height", function (d) { + return Math.abs(yScale(d[indexArray.score]) - yScale(0)); + }) + .attr("width", function (d) { + return fullXScale(Number(d[indexArray.end])) - fullXScale(Number(d[indexArray.start])); + }) + .style("fill-opacity", ".8") + .style("stroke", "gray") + .style("fill", "gray") + + trackHeightGroup.selectAll("line") + .data(lines, function (d) { + return d; + }) + .exit() + .remove(); + + trackHeightGroup.selectAll("line") + .data(lines, function (d) { + return d; + }) + .enter() + .append("line"); + + trackHeightGroup.selectAll("line") + .data(lines, function (d) { + return d; + }) + .attr("x1", function (d) { + return fullXScale(d[indexArray.start]); + }) + .attr("y1", yScale(0)) + .attr("x2", function (d) { + return fullXScale(d[indexArray.end]); + }) + .attr("y2", yScale(0)) + .style("stroke", "black") + .style("stroke-width", "2px") + }*/ this.addTrack = function (data, name, type) { // data['name'] = name; @@ -1270,9 +1341,9 @@ function VQI_GenomeBrowser(id) { var track2Select = $("#" + divId + " #track2"); updateSelectBoxWithTracks(track2Select.get(0)); /*var removeTrackSelect = $("#" + divId + " #removeTrack"); - updateSelectBoxWithTracks(removeTrackSelect.get(0)); - var exportTrackSelect = $("#" + divId + " #exportTrack"); - updateSelectBoxWithTracks(exportTrackSelect.get(0));*/ + updateSelectBoxWithTracks(removeTrackSelect.get(0)); + var exportTrackSelect = $("#" + divId + " #exportTrack"); + updateSelectBoxWithTracks(exportTrackSelect.get(0));*/ } var updateSelectBoxWithTracks = function (selectBox) { selectBox = selectBox;