Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
VQI_GenomeBrowser/VQI_GenomeBrowser.js
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
executable file
870 lines (736 sloc)
30.9 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function VQI_GenomeBrowser(id) { | |
var divId = id; | |
var width = 1000; | |
var height = 100; | |
var margin = 50; | |
var panExtent = [0,width]; | |
var trackList = []; | |
var trackSelections = []; | |
var genomeData = []; | |
var chromosomes = []; | |
var thisObj = this; | |
var chrom_curr = "chr1"; | |
var indexArray = {chr: 0, start: 1, end: 2, name: 3, type: 3, score: 4, strand: 5, options: 6, exonStarts: 9, exonEnds: 10}; | |
// $("#" + id).append("<div style='border : 1px solid; display : inline-block'>CPG:<input type='file' id='cpg'/>Shore:<input type='file' id='shore'/>Shelve:<input type='file' id='shelve'/><input id='submit' type='submit' /></div>"); | |
// d3.select("#" + id).append("div").text("Chromosome: ") | |
// var select = d3.select("#" + id) | |
// .append("div") | |
// .append("select") | |
// .on("change", function (d) { | |
// graph(select.property("value")); | |
// }); | |
// | |
// d3.select("#" + id).append("div").text("Start: ") | |
// var minNumber = d3.select("#" + id) | |
// .append("input") | |
// .attr("type", "number") | |
// .property("value", 0); | |
// | |
// d3.select("#" + id).append("div").text("End: ") | |
// var maxNumber = d3.select("#" + id) | |
// .append("input") | |
// .attr("type", "number") | |
// .property("value", 0); | |
// var graphButton = d3.select("#" + id) | |
// .append("input") | |
// .attr("type", "button") | |
// .attr("value", "Graph") | |
// .on("click", function () { | |
// graph(select.property("value"), minNumber.property("value"), maxNumber.property("value")) | |
// }); | |
var navigateToRegion = function () { | |
/*var chrom = $("#" + divId + " #chrom").val(); | |
var chrom_start = $("#" + divId + " #chrom_start").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 chromStartBox = "<input type='text' name='chrom_start' id='chrom_start'>"; | |
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'>" + navigateBox + navigateButton + "</form>"; | |
$("#" + divId).append(form); | |
$("#" + divId + " #navigatebutton").on("click", navigateToRegion.bind(this)); | |
}; | |
this.makeNavigationForm(); | |
var browseToGene = function () { | |
var geneName = $("#" + divId + " #geneName").val(); | |
var genes = [geneName]; | |
dataToPost = JSON.stringify(genes); | |
$.ajax({ | |
url: vqi_url + 'serverside/web/VQService.php?service=gene-info-for-gene-symbol', | |
type: 'POST', | |
dataType: "json", | |
data: { | |
"genes": dataToPost | |
}, | |
async: false | |
}).success(function (data) { | |
var thisGene = data.slice(1)[0]; | |
var gene_chrom = thisGene[2]; | |
var gene_start = thisGene[3]; | |
var gene_end = thisGene[4]; | |
thisObj.navigate(gene_chrom, gene_start, gene_end); | |
// objVQIResult.parseSNPAndSNP(data, true); | |
}).error(function (req, status, error) { | |
$("body").append(status + ": " + error); | |
}); | |
}; | |
this.makeFormForGeneSearch = function () { | |
var geneText = "Gene: <input type='text' name='geneName' id='geneName'>"; | |
var geneSearchButton = "<input type='button' id='genesearchbutton' value='Search'>"; | |
var form = "<form id='colocalization_form'>" + geneText + geneSearchButton + "</form>"; | |
$("#" + divId).append(form); | |
$("#" + divId + " #genesearchbutton").on("click", browseToGene.bind(this)); | |
}; | |
this.makeFormForGeneSearch(); | |
var colocalize = function () { | |
var track1Name = $("#" + divId + " #track1").val(); | |
var track2Name = $("#" + divId + " #track2").val(); | |
var coloc_dist = $("#" + divId + " #coloc_dist").val(); | |
var data1 = this.getTrackByName(track1Name); | |
var data2 = this.getTrackByName(track2Name); | |
var dataToPost1 = [], dataToPost2 = []; | |
dataToPost1 = JSON.stringify(data1); | |
dataToPost2 = JSON.stringify(data2); | |
$.ajax({ | |
url: vqi_url + 'serverside/web/VQService.php?service=coloc-bed-and-bed', | |
type: 'POST', | |
dataType: "json", | |
data: { | |
"bed1": dataToPost1, | |
"bed2": dataToPost2, | |
"coloc_dist": coloc_dist | |
}, | |
async: false | |
}).success(function (data) { | |
var data1 = []; | |
var data2 = [] | |
data = data.slice(1); | |
for (var i in data) { | |
data1.push(data[i].slice(0, 6)); | |
data2.push(data[i].slice(6)); | |
} | |
thisObj.addTrack(data1); | |
thisObj.addTrack(data2); | |
// objVQIResult.parseSNPAndSNP(data, true); | |
}).error(function (req, status, error) { | |
$("body").append(status + ": " + error); | |
}); | |
}; | |
this.makeFormForColocalization = function () { | |
var track1Select = "Track1: <select name='track1' id='track1'>"; | |
for (var i in trackList) { | |
var thisTrack = trackList[i]; | |
var text = thisTrack['name']; | |
var value = thisTrack['name']; | |
track1Select += "<option value='" + value + "'>" + text + "</option>"; | |
} | |
track1Select += "</select>"; | |
var track2Select = " Track2: <select name='track2' id='track2'>"; | |
for (var i in trackList) { | |
var thisTrack = trackList[i]; | |
var text = thisTrack['name']; | |
var value = thisTrack['name']; | |
track2Select += "<option value='" + value + "'>" + text + "</option>"; | |
} | |
track2Select += "</select>"; | |
var distanceTextBox = "<input type=text name='coloc_dist' id='coloc_dist' value='0'>"; | |
var colocalizeButton = "<input type='button' id='colocalize' value='colocalize'>"; | |
var form = "<form id='colocalization_form'>" + track1Select + track2Select + distanceTextBox + colocalizeButton + "</form>"; | |
$("#" + divId).append(form); | |
$("#" + divId + " #colocalize").on("click", colocalize.bind(this)); | |
}; | |
this.makeFormForColocalization(); | |
var self = this; | |
this.svg = d3.select("#" + id) | |
.append("svg") | |
.attr("width", width + 2 * margin) | |
.attr("height", height + 2 * margin) | |
.style("border", "1px solid black"); | |
var svg = this.svg; | |
//set up scales and axis | |
var xScale = d3.scale.linear(); | |
var xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient("bottom") | |
.ticks(10); | |
//x-axis | |
var xAxisSelection = svg.append("g") | |
.call(xAxis) | |
.attr("class", "axis") | |
.attr("transform", "translate(0," + (0 + margin) + ")"); | |
// .attr("transform", "translate(0," + (height + margin) + ")"); | |
//Just a line | |
svg.append("line") | |
.attr("x1", margin) | |
.attr("y1", height / 2 + margin + 20) | |
.attr("x2", width + margin) | |
.attr("y2", height / 2 + margin + 20) | |
.style("stroke", "blue"); | |
var zoom = d3.behavior.zoom(); | |
//set up tool tips | |
/*var tip = d3.tip() | |
.attr('class', 'd3-tip') | |
.offset([-20, 0]) | |
.html(function (d) { | |
// if(/) | |
// if | |
var strand = ""; | |
if (d.length > indexArray.strand) { | |
strand = " (" + d[indexArray.strand] + ")"; | |
} | |
return "<span style='color:white; font-size:10pt; display:block; text-align:center'>" + d[indexArray.name] + strand + "</span>" | |
+ "<span style='color:white; font-size:10pt; display:block'>(" + d[indexArray.chr] + " : " + d[indexArray.start] + " - " + d[indexArray.end] + ")" + "</span>"; | |
}); | |
svg.call(tip); | |
d3.selectAll(".d3-tip").style({ | |
"line-height": "1", | |
"font-weight": "bold", | |
"padding": "12px", | |
"background": "rgba(0, 0, 0, 0.8)", | |
"color": "#fff", | |
"border-radius": "2px" | |
});*/ | |
var zoomed = function () { | |
var t = zoom.translate(); | |
//console.log(t[0]); | |
zoom.translate([panLimit(), 0]); | |
svg.selectAll("rect") | |
.attr("width", function (d) { | |
return xScale(d[indexArray.end]) - xScale(d[indexArray.start]) | |
}) | |
.attr("x", function (d) { | |
return xScale(d[indexArray.start]) | |
}) | |
for (var i in trackSelections) { | |
trackSelections[i] | |
.attr("x1", function (d) { | |
return xScale(d[indexArray.start]); | |
}) | |
.attr("x2", function (d) { | |
return xScale(d[indexArray.end]); | |
}) | |
} | |
// minNumber.property("value", xScale.domain()[0]); | |
//maxNumber.property("value", xScale.domain()[1]); | |
xAxisSelection.call(xAxis); | |
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 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]; | |
return tx; | |
} | |
this.navigate = function (chrom, chrom_start, chrom_end) { | |
graph(chrom, chrom_start, chrom_end); | |
}; | |
var setBounds = function(min, max){ | |
var xMin = Number(min) > panExtent[0] ? Number(min) : panExtent[0]; | |
var xMax = Number(max) < panExtent[1] ? Number(max) : panExtent[1]; | |
xScale.domain([panExtent[0], panExtent[1]]) | |
.range([margin, width + margin]); | |
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); | |
//translates scale with regards to the middle of xMin and xMax | |
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] + (xMax - xMin) / 2, panExtent[1] - (xMax - xMin) / 2]) | |
.range([minX,maxX]); | |
var zoomWidth = midScale((xMax + xMin)/2); | |
zoom.translate([zoomWidth,0]) | |
.scale(scale); | |
zoomed(); | |
// minNumber.property("value", xMin); | |
// maxNumber.property("value", xMax); | |
} | |
var graph = function (chromosome, min, max) { | |
var indexList = indexArray; | |
//Graphs the current chromosome. If min and max are specified, graph only in that range. | |
//Otherwise, graphs the whole chromosome | |
var self = this; | |
var currentData; | |
//Populates drop down list with different chromosomes | |
// select.selectAll("option") | |
// .data(chromosomes) | |
// .enter() | |
// .append("option") | |
// .attr("value", function (d) { | |
// return d; | |
// }) | |
// .text(function (d) { | |
// return d; | |
// }); | |
d3.select("#chrom").selectAll("option") | |
.data(chromosomes) | |
.enter() | |
.append("option") | |
.attr("value", function (d) { | |
return d; | |
}) | |
.text(function (d) { | |
return d; | |
}); | |
chrom_curr = chromosome; | |
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) { | |
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 | |
});*/ | |
setBounds(Number(min),Number(max)); | |
} | |
svg.selectAll("rect") | |
.data(currentData) | |
.exit() | |
.remove(); | |
svg.selectAll("rect") | |
.data(currentData) | |
.enter() | |
.append("rect"); | |
svg.selectAll("rect") | |
.style("fill-opacity", ".4") | |
.style("stroke", function (d) { | |
var type = d[indexList.type]; | |
return type == "cpg" ? "red" : type == "shore" ? "green" : "yellow" | |
}) | |
.style("fill", function (d) { | |
var type = d[indexList.type]; | |
return type == "cpg" ? "red" : type == "shore" ? "green" : "yellow" | |
}) | |
.attr("height", function (d) { | |
var type = d[indexList.type]; | |
return type == "cpg" ? 40 : type == "shore" ? 20 : 15 | |
}) | |
.attr("width", function (d) { | |
return xScale(d[indexList.end]) - xScale(d[indexList.start]) | |
}) | |
.attr("x", function (d) { | |
return xScale(d[indexList.start]) | |
}) | |
.attr("y", function (d) { | |
var type = d[indexList.type]; | |
var offset = type == "cpg" ? 0 : type == "shore" ? 10 : 12.5; | |
return height / 2 + margin + offset | |
}) | |
//.on('mouseover', tip.show) | |
//.on('mouseout', tip.hide); | |
for (var i in trackList) { | |
addOneTrack(trackList[i], trackList[i]['name'], i); | |
} | |
} | |
var addOneTrack = function (data, name, i) { | |
i = Number(i); | |
var trackIndex; | |
if (!isNaN(i)) { | |
trackIndex = i; | |
} else { | |
trackIndex = trackList.length; | |
} | |
var index = indexArray; | |
var thisData = data.filter(function (d) { | |
return (d[index.chr] === chrom_curr); | |
}); | |
var trackCount = trackIndex + 1; | |
//name of track | |
name = name || "track-" + (trackIndex + 1); | |
var ySpace = 50 * trackCount; | |
var fHeight = 10; | |
svg.attr("height", height + 2 * margin + ySpace); | |
var thisY = height / 2 + margin + 20 + ySpace; | |
if (!i) { | |
/*svg.append("line") | |
.attr("x1", margin) | |
.attr("y1", height / 2 + margin + 20 + ySpace) | |
.attr("x2", width + margin) | |
.attr("y2", height / 2 + margin + 20 + ySpace) | |
.style("stroke-width", 1) | |
.style("stroke", "black");*/ | |
svg.selectAll("text") | |
.data([name], function (d) {return d;}) | |
.enter() | |
.append("text") | |
.attr("x", 0) | |
.attr("y", thisY - 10) | |
.attr("font-family", "sans-serif") | |
.attr("font-size", "12px") | |
.attr("fill", "red") | |
.text(name); | |
} | |
// test.addTrack({start:20000000, end:20000100}) | |
svg.selectAll("line") | |
.data(thisData, function (d){return d;}) | |
.enter() | |
.append("line"); | |
var tracks = svg.selectAll("line") | |
.data(thisData, function (d){return d;}) | |
var lineAttributes = tracks | |
.attr("x1", function (d) { | |
return xScale(d[index.start]); | |
}) | |
.attr("y1", function (d) { | |
return thisY; | |
}) | |
.attr("x2", function (d) { | |
return xScale(d[index.end]); | |
}) | |
.attr("y2", function (d) { | |
// return 50; | |
return thisY; | |
}) | |
.style("stroke", "black") | |
.style("stroke-width", "2px") | |
trackSelections.push(tracks); | |
var exons = []; | |
$.each(thisData, function (index, value) { | |
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 < exonStarts.length; i++) | |
{ | |
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); | |
} | |
}); | |
var exonRect = svg.selectAll("tracks") | |
.data(exons, function (d) {return d;}) | |
.enter() | |
.append("rect"); | |
var exonRectAttributes = exonRect | |
.attr("x", function (d) { | |
return xScale(d[index.start]); | |
}) | |
.attr("y", function (d) { | |
return thisY - fHeight / 2; | |
}) | |
.attr("height", function (d) { | |
return fHeight; | |
}) | |
.attr("width", function (d) { | |
// return 50; | |
return xScale(d[index.end]) - xScale(d[index.start]); | |
}) | |
.style("fill-opacity", ".8") | |
.style("stroke", "gray") | |
.style("fill", "gray"); | |
//.style("fill", "green") | |
//.on('mouseover', tip.show) | |
//.on('mouseout', tip.hide); | |
$('svg rect').tipsy({ | |
gravity: 'n', | |
html: true, | |
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] + ")"; | |
} | |
}); | |
$(tracks[0]).tipsy({ | |
gravity: 'n', | |
html: true, | |
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] + ")"; | |
} | |
}); | |
data['name'] = name; | |
return data; | |
} | |
this.addTrack = function (data, name) { | |
// data['name'] = name; | |
data = addOneTrack(data, name); | |
trackList.push(data); | |
updateAllTracksSelectBoxes(); | |
} | |
this.addTrackFile = function (dataFile, name, header) { | |
$.get(dataFile, function (data) { | |
var dataRows = thisObj.parseTrackFile(data, header); | |
thisObj.addTrack(dataRows, name); | |
}); | |
} | |
this.setData = function (data) { | |
genomeData = data; | |
graph(chromosomes[0]); | |
} | |
this.getData = function () { | |
return genomeData; | |
} | |
var submitFile = function () { | |
genomeData = []; | |
chromosomes = []; | |
var file_dir = "./saved-data/"; | |
file_dir = "../../../saved-data/"; | |
var cpg = file_dir + "./CpG_site_hg19.txt"; | |
var shoer = file_dir + "./shoer_hg19.txt"; | |
var shelve = file_dir + "./shelve_hg19.txt"; | |
//Will read the 3 files and place all data into genomeData | |
//as objects with attributes 'chromosome', 'start', 'end', 'type' | |
$.get(cpg, function (data) { | |
var cpgData = data.trim().split("\n"); | |
$.each(cpgData, function (index, value) { | |
cpgData[index] = cpgData[index].trim().split("\t").map(function (item) { | |
return isNaN(Number(item)) ? item : Number(item); | |
}); | |
}); | |
//get all unique chromosomes | |
var currentChromosome = ""; | |
$.each(cpgData, function (index, value) { | |
if (value[0] != currentChromosome) | |
{ | |
chromosomes.push(value[0]); | |
currentChromosome = value[0]; | |
} | |
}); | |
cpgData = cpgData.map(function (data) { | |
// return {"chromosome": data[0], "start": data[1], "end": data[2], "type": "cpg"} | |
return [data[0], data[1], data[2], "cpg"]; | |
}); | |
genomeData = genomeData.concat(cpgData); | |
}); | |
$.get(shoer, function (data) { | |
var tempShoreData = data.trim().split("\n"); | |
$.each(tempShoreData, function (index, value) { | |
tempShoreData[index] = tempShoreData[index].trim().split("\t").map(function (item) { | |
return isNaN(Number(item)) ? item : Number(item); | |
}); | |
}); | |
var shoreData = []; | |
$.each(tempShoreData, function (index, value) { | |
// shoreData.push({"chromosome": value[0], "start": value[1], "end": value[2], "type": "shore"}); | |
shoreData.push([value[0], value[1], value[2], "shore"]); | |
shoreData.push([value[0], value[3], value[4], "shore"]); | |
// shoreData.push({"chromosome": value[0], "start": value[3], "end": value[4], "type": "shore"}); | |
}); | |
genomeData = genomeData.concat(shoreData); | |
}); | |
$.get(shelve, function (data) { | |
var tempShelveData = data.trim().split("\n"); | |
$.each(tempShelveData, function (index, value) { | |
tempShelveData[index] = tempShelveData[index].trim().split("\t").map(function (item) { | |
return isNaN(Number(item)) ? item : Number(item); | |
}); | |
}); | |
var shelveData = []; | |
$.each(tempShelveData, function (index, value) { | |
shelveData.push([value[0], value[1], value[2], "shelve"]); | |
// shelveData.push({"chromosome": value[0], "start": value[1], "end": value[2], "type": "shelve"}); | |
shelveData.push([value[0], value[3], value[4], "shelve"]); | |
// shelveData.push({"chromosome": value[0], "start": value[3], "end": value[4], "type": "shelve"}); | |
}); | |
genomeData = genomeData.concat(shelveData); | |
graph(chromosomes[0]); | |
}); | |
} | |
d3.select("#" + id + " #submit").on("click", submitFile.bind(this)); | |
// submitFile(); | |
this.loadCPGFiles = function (cpg, shoer, shelf) { | |
genomeData = []; | |
chromosomes = []; | |
//Will read the 3 files and place all data into genomeData | |
//as objects with attributes 'chromosome', 'start', 'end', 'type' | |
$.get(cpg, function (data) { | |
var cpgData = data.trim().split("\n"); | |
$.each(cpgData, function (index, value) { | |
cpgData[index] = cpgData[index].trim().split("\t").map(function (item) { | |
return isNaN(Number(item)) ? item : Number(item); | |
}); | |
}); | |
//get all unique chromosomes | |
var currentChromosome = ""; | |
$.each(cpgData, function (index, value) { | |
if (value[0] != currentChromosome) | |
{ | |
chromosomes.push(value[0]); | |
currentChromosome = value[0]; | |
} | |
}); | |
cpgData = cpgData.map(function (data) { | |
return [data[0], data[1], data[2], "cpg"]; | |
}); | |
genomeData = genomeData.concat(cpgData); | |
}); | |
$.get(shoer, function (data) { | |
var tempShoreData = data.trim().split("\n"); | |
$.each(tempShoreData, function (index, value) { | |
tempShoreData[index] = tempShoreData[index].trim().split("\t").map(function (item) { | |
return isNaN(Number(item)) ? item : Number(item); | |
}); | |
}); | |
var shoreData = []; | |
$.each(tempShoreData, function (index, value) { | |
// shoreData.push({"chromosome": value[0], "start": value[1], "end": value[2], "type": "shore"}); | |
shoreData.push([value[0], value[1], value[2], "shore"]); | |
shoreData.push([value[0], value[3], value[4], "shore"]); | |
// shoreData.push({"chromosome": value[0], "start": value[3], "end": value[4], "type": "shore"}); | |
}); | |
genomeData = genomeData.concat(shoreData); | |
}); | |
$.get(shelf, function (data) { | |
var tempShelveData = data.trim().split("\n"); | |
$.each(tempShelveData, function (index, value) { | |
tempShelveData[index] = tempShelveData[index].trim().split("\t").map(function (item) { | |
return isNaN(Number(item)) ? item : Number(item); | |
}); | |
}); | |
var shelveData = []; | |
$.each(tempShelveData, function (index, value) { | |
shelveData.push([value[0], value[1], value[2], "shelve"]); | |
// shelveData.push({"chromosome": value[0], "start": value[1], "end": value[2], "type": "shelve"}); | |
shelveData.push([value[0], value[3], value[4], "shelve"]); | |
// shelveData.push({"chromosome": value[0], "start": value[3], "end": value[4], "type": "shelve"}); | |
}); | |
genomeData = genomeData.concat(shelveData); | |
graph(chromosomes[0]); | |
}); | |
} | |
this.parseTrackFile = function (data, header) { | |
var delimeter = "\t"; | |
var thisData = new Array(); | |
var txtContent = data.split(/\r\n|\r|\n/g); | |
var startRow = 0; | |
if (header) { | |
startRow = 1; | |
} | |
for (var i = startRow; i < txtContent.length; i++) { | |
var thisRow = txtContent[i].split(delimeter); | |
var thisObject = {}; | |
thisObject = thisRow; | |
if (thisRow[0].indexOf("##") === 0) { | |
continue; | |
} | |
thisData.push(thisObject); | |
} | |
return thisData; | |
}; | |
// this.makeFormForColocalization = function () { | |
// var track1Select = "<br>track1 <select name='track1' id='track1'>"; | |
// for (var i in trackList) { | |
// var thisTrack = trackList[i]; | |
// var text = thisTrack['name']; | |
// var value = thisTrack['name']; | |
// track1Select += "<option value='" + value + "'>" + text + "</option>"; | |
// } | |
// track1Select += "</select>"; | |
// | |
// var track2Select = "<br>track2 <select name='track2' id='track2'>"; | |
// for (var i in trackList) { | |
// var thisTrack = trackList[i]; | |
// var text = thisTrack['name']; | |
// var value = thisTrack['name']; | |
// track2Select += "<option value='" + value + "'>" + text + "</option>"; | |
// } | |
// track2Select += "</select>"; | |
// | |
// | |
// var colocalizeButton = "<br><input type='button' id='colocalize' value='colocalize'>"; | |
// var form = "<form id='colocalization_form'>" + track1Select + track2Select + colocalizeButton + "</form>"; | |
// $("#" + divId).append(form); | |
// $("#" + divId + " #colocalize").on("click", colocalize.bind(this)); | |
// }; | |
// | |
// var colocalize = function () { | |
// var track1Name = $("#" + divId + " #track1").val(); | |
// var track2Name = $("#" + divId + " #track2").val(); | |
// | |
// var data1 = this.getTrackByName(track1Name); | |
// var data2 = this.getTrackByName(track2Name); | |
// | |
// var dataToPost1 = [], dataToPost2 = []; | |
// dataToPost1 = JSON.stringify(data1); | |
// dataToPost2 = JSON.stringify(data2); | |
// | |
// $.ajax({ | |
// url: vqi_url + 'serverside/web/VQService.php?service=coloc-bed-and-bed', | |
// type: 'POST', | |
// dataType: "json", | |
// data: { | |
// "bed1": dataToPost1, | |
// "bed2": dataToPost2 | |
// }, | |
// async: false | |
// }).success(function (data) { | |
// var data1 = []; | |
// var data2 = [] | |
// data = data.slice(1); | |
// for (var i in data) { | |
// data1.push(data[i].slice(0, 3)); | |
// data2.push(data[i].slice(3)); | |
// } | |
// thisObj.addTrack(data1); | |
// thisObj.addTrack(data2); | |
// | |
//// objVQIResult.parseSNPAndSNP(data, true); | |
// }).error(function (req, status, error) { | |
// $("body").append(status + ": " + error); | |
// }); | |
// | |
// }; | |
this.getTrackByName = function (name) { | |
for (var i in trackList) { | |
var thisTrack = trackList[i]; | |
if (thisTrack['name'] === name) { | |
return thisTrack; | |
} | |
} | |
}; | |
var updateAllTracksSelectBoxes = function () { | |
var track1Select = $("#" + divId + " #track1"); | |
updateSelectBoxWithTracks(track1Select.get(0)); | |
var track2Select = $("#" + divId + " #track2"); | |
updateSelectBoxWithTracks(track2Select.get(0)); | |
} | |
var updateSelectBoxWithTracks = function (selectBox) { | |
selectBox = selectBox; | |
selectBox.options.length = 0; | |
var optionIndex = 0; | |
for (var i in trackList) { | |
var text = trackList[i]['name']; | |
var value = text; | |
selectBox.options[optionIndex++] = new Option(text, value); | |
} | |
}; | |
// this.makeFormForColocalization(); | |
} | |
VQI_GenomeBrowser.prototype = new VQI_Publisher(); |