diff --git a/VQI_GenomeBrowser.js b/VQI_GenomeBrowser.js index 2c4fef4..9c07db7 100755 --- a/VQI_GenomeBrowser.js +++ b/VQI_GenomeBrowser.js @@ -10,7 +10,6 @@ function VQI_GenomeBrowser(id) { var panExtent = [0,width]; var trackList = []; - var trackSelections = []; var genomeData = []; @@ -177,9 +176,40 @@ function VQI_GenomeBrowser(id) { }; this.makeFormForColocalization(); - var self = this; + var removeTrack = function () { + var removedTrackName = $("#" + divId + " #removeTrack").val(); + + for (var i in trackList) { + var thisTrack = trackList[i]; + if (thisTrack['name'] === removedTrackName) { + trackList[i]["selections"].remove(); + trackList.splice(i,1); + break; + } + } + + updateAllTracksSelectBoxes(); + graph(chrom_curr, xScale.domain()[0], xScale.domain()[1]); + }; + 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 self = this; this.svg = d3.select("#" + id) .append("svg") @@ -257,9 +287,14 @@ function VQI_GenomeBrowser(id) { return xScale(d[indexArray.start]) }) - for (var i in trackSelections) { - trackSelections[i] - .attr("x1", function (d) { + for (var i in trackList) { + + //Tried to select only the lines in the selection + var trackLines = trackList[i]["selections"].filter(function(d){ + return d[indexArray.name].indexOf("/") == -1; + }); + + trackLines.attr("x1", function (d) { return xScale(d[indexArray.start]); }) .attr("x2", function (d) { @@ -341,6 +376,9 @@ function VQI_GenomeBrowser(id) { } var graph = function (chromosome, min, max) { + + svg.attr("height", height + 2 * margin); + var indexList = indexArray; //Graphs the current chromosome. If min and max are specified, graph only in that range. //Otherwise, graphs the whole chromosome @@ -360,7 +398,7 @@ function VQI_GenomeBrowser(id) { // return d; // }); - d3.select("#chrom").selectAll("option") + /*d3.select("#chrom").selectAll("option") .data(chromosomes) .enter() .append("option") @@ -369,7 +407,7 @@ function VQI_GenomeBrowser(id) { }) .text(function (d) { return d; - }); + });*/ chrom_curr = chromosome; currentData = genomeData.filter(function (d) { @@ -398,6 +436,19 @@ function VQI_GenomeBrowser(id) { setBounds(Number(min),Number(max)); } + svg.selectAll("text") + .data(["cpg"], function (d) {return d;}) + .enter() + .append("text") + .attr("x", 0) + .attr("y", height / 2 + margin) + .attr("font-family", "sans-serif") + .attr("font-size", "12px") + .attr("fill", "red") + svg.selectAll("text") + .data(["cpg"], function (d) {return d;}) + .text(chromosome); + svg.selectAll("rect") .data(currentData) .exit() @@ -466,6 +517,9 @@ function VQI_GenomeBrowser(id) { svg.attr("height", height + 2 * margin + ySpace); var thisY = height / 2 + margin + 20 + ySpace; + //empty selection + var trackSelections = d3.selectAll(".empty"); + if (!i) { /*svg.append("line") .attr("x1", margin) @@ -477,13 +531,19 @@ function VQI_GenomeBrowser(id) { 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); + .append("text"); + + var text = svg.selectAll("text") + .data([name], function (d) {return d;}); + + trackSelections[0].push(text.node()); + + 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") @@ -510,7 +570,7 @@ function VQI_GenomeBrowser(id) { .style("stroke", "black") .style("stroke-width", "2px") - trackSelections.push(tracks); + trackSelections[0] = trackSelections[0].concat(tracks[0]); var exons = []; $.each(thisData, function (index, value) { @@ -528,10 +588,12 @@ function VQI_GenomeBrowser(id) { } }); - var exonRect = svg.selectAll("tracks") + svg.selectAll("rect") .data(exons, function (d) {return d;}) .enter() .append("rect"); + var exonRect = svg.selectAll("rect") + .data(exons, function (d) {return d;}); var exonRectAttributes = exonRect .attr("x", function (d) { return xScale(d[index.start]); @@ -555,6 +617,8 @@ function VQI_GenomeBrowser(id) { //.on('mouseover', tip.show) //.on('mouseout', tip.hide); + trackSelections[0] = trackSelections[0].concat(exonRect[0]); + $('svg rect').tipsy({ gravity: 'n', html: true, @@ -575,6 +639,7 @@ function VQI_GenomeBrowser(id) { }); data['name'] = name; + data['selections'] = trackSelections; return data; @@ -746,7 +811,7 @@ function VQI_GenomeBrowser(id) { // shelveData.push({"chromosome": value[0], "start": value[3], "end": value[4], "type": "shelve"}); }); genomeData = genomeData.concat(shelveData); - graph(chromosomes[0]); + graph("chr1"); }); } @@ -849,6 +914,8 @@ function VQI_GenomeBrowser(id) { updateSelectBoxWithTracks(track1Select.get(0)); var track2Select = $("#" + divId + " #track2"); updateSelectBoxWithTracks(track2Select.get(0)); + var removeTrackSelect = $("#" + divId + " #removeTrack"); + updateSelectBoxWithTracks(removeTrackSelect.get(0)); } var updateSelectBoxWithTracks = function (selectBox) { selectBox = selectBox;