diff --git a/iframetest.html b/iframetest.html new file mode 100644 index 0000000..b804365 --- /dev/null +++ b/iframetest.html @@ -0,0 +1,19 @@ + + + + + + + + + + + + + +
+
+ + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..4939d9d --- /dev/null +++ b/index.html @@ -0,0 +1,16 @@ + + + + + isoPlot + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..6b97e0f --- /dev/null +++ b/main.css @@ -0,0 +1,8 @@ +body { + margin:5%; +} + +iframe { + border: 0px inset; +} + diff --git a/plot.css b/plot.css new file mode 100644 index 0000000..7191a3d --- /dev/null +++ b/plot.css @@ -0,0 +1,135 @@ +body { + margin:0px; +} +#plot{ + width:100%; + height: 100%; + margin:5%; +} +/*text { + font: 10px sans-serif; +}*/ + +.tooltip { + position: absolute; + text-align: left; + width: 100px; + height: 40px; + padding: 5px; + margin-top: -20px; + font: 10px sans-serif; + background: #F7EEB3; + pointer-events: none; + opacity: 0.8; +} +.div_class{ + margin:0px; +} + +#version,#gene { + background-color: #7a91ff; + color: white; + padding: 3px; + font-size: 11px; + border: none; + cursor: pointer; + border-radius:2px; + margin:15px; +} + +/* Dropdown button on hover & focus */ +#version:hover, #version:focus, #gene:hover, #gene:focus { + background-color: #6a81df; +} + +/* The container
- needed to position the#version content */ +#version,#gene { + position: relative; + display: inline-block; +} + +/* Dropdown Content (Hidden by Default) */ +#version-content, #gene-content { + display: none; + position: absolute; + background-color: #6a81df; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); +} + +/* Links inside the#version */ +#version-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +/* Change color of#version links on hover */ +#version-content a:hover {background-color: #6a81df} + +/* Show the#version menu (use JS to add this class to the #version-content container when the user clicks on the#version button) */ +.show {display:block;} + +#gene_search_container{ + margin-top: 10px; + /*needed for some reason*/ + margin-left: 0px; + display: none; +} + +/*gene search box */ +#gene_search_box{ + width:120px; + /*float:left;*/ + /*display: none;*/ +} + +/*gene search button*/ +#gene_search_button{ + /*width:50px;*/ + /*float:left;*/ + margin-top:-2px; + /*display: none;*/ +} + +label{ + font-size: 11px; + font: Arial; + color:#7a91ff; +/* font-weight: bold;*/ +} + +input{ + font-size: 11px; + font: Arial; + color:#555555; +} + +.ui-menu .ui-menu-item{ + margin: 0; + padding: 0; + width: 100%; + list-style-image:none; +} + +.ui-widget-content{ + background: #eeeeee; + opacity:0.8; +} + +.ui-widget{ + font-size: 0.7em; +} + +.ui-state-hover, +.ui-widget-content .ui-state-hover, +.ui-widget-header .ui-state-hover, +.ui-state-focus, +.ui-widget-content .ui-state-focus, +.ui-widget-header .ui-state-focus { + border: 2px solid #aac1ff; + background: #7a91ff; + font-weight: bold; + color: #eeeeee; +} \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..91563b5 --- /dev/null +++ b/script.js @@ -0,0 +1,432 @@ + +function drawData(oneGeneData){ + + const svg_width = 1000,svg_height = 300;//svg_height = 1000; + d3.select("body").select("#svg_id").selectAll("svg").remove(); + var svgContainer = d3.select("body").select("#svg_id") + .append("svg") + .attr("width",svg_width) + .attr("height",svg_height); + + const geneInfoKey = ['Gene_ID','Gene_name','Location','Strand']; + var transcripts = oneGeneData["transcript"]; + var groups = new groupInfor(); + groups.countBorder(transcripts); + var geneInfo = [oneGeneData["gene_id"],oneGeneData["gene_name"],oneGeneData["chr"]+" "+groups.start_pos+"~"+groups.end_pos,oneGeneData["strand"]]; + + var count = 0; + const y_coor = 80,line_start = 50,verti_length = 920,line_length = 800; + var geneInfoGroup = svgContainer.append("g"); + var commonGroup = svgContainer.append("g"); + + for(var t=0;t<=geneInfo.length;t++){ + if(t === geneInfo.length){ + geneInfoGroup.append("text").attr("x", line_start).attr("y", 20*(t+1)).text("Overview").attr("font-family", "sans-serif").attr("font-size", "10px").attr("fill", "#392B58"); + break; + } + geneInfoGroup.append("text").attr("x", line_start).attr("y", 20*(t+1)).text(geneInfoKey[t]+" : "+geneInfo[t]).attr("font-family", "sans-serif").attr("font-size", "10px").attr("fill", "#0a116f"); + + } + + geneInfoGroup.append("rect").attr("x",line_start).attr("y",175).attr("width",5).attr("height",5).style("fill","#BDA6F9") + geneInfoGroup.append("text").attr("x", line_start+5).attr("y", 180).text(" : Exon").attr("font-family", "sans-serif").attr("font-size", "10px").attr("fill", "#0a116f"); + geneInfoGroup.append("rect").attr("x",line_start).attr("y",185).attr("width",5).attr("height",5).style("fill","#ECA0C3") + geneInfoGroup.append("text").attr("x", line_start+5).attr("y", 190).text(" : UTR").attr("font-family", "sans-serif").attr("font-size", "10px").attr("fill", "#0a116f"); + geneInfoGroup.append("rect").attr("x",line_start).attr("y",195).attr("width",5).attr("height",5).style("fill","#B4C1FF") + geneInfoGroup.append("text").attr("x", line_start+5).attr("y", 200).text(" : CDS").attr("font-family", "sans-serif").attr("font-size", "10px").attr("fill", "#0a116f"); + for(var i = 0 ;i= iframe2_height){ + svg2_height = (transcripts.length + 1 )*50 + }else{ + svg2_height = iframe2_height; + } + var svgContainer2 = d3.select(innerDoc).select("body").select("#svg_transcripts_id") + .append("svg") + .attr("width",svg_width) + .attr("height",svg2_height); + + if(svgContainer2.empty()){ + alert(1); + }else{ + alert(2); + } + // for(var i = 0 ;i line_length){ + // commonLine.attr("stroke-width",0) + // commonCor.attr("stroke-width", 0) + // commonInfo.text(null) + // } + // else{ + // commonLine.attr("stroke-width",0.5).attr("stroke-dasharray","0.9") + // commonCor.attr("stroke-width", 0.5) + // commonInfo.text(Math.round(axisScale_back(d3.event.pageX))) + // flagGroup.attr("transform","translate("+move+",0)").raise(); + + // } + // } + // }) + // .on("mouseout",function(){ + // commonLine.attr("stroke-width",0) + // commonInfo.text(null) + // commonCor.attr("stroke-width", 0) + // }); + + +} +function groupInfor(){ + this.group = Array() + this.exonConnectMap = new Map(); + this.start_pos; + this.end_pos; + this.addOneGroup = function(one){ + this.group.push(one); + } + this.addOneConnect = function(id1,id2,line,rects){ + var key = new Array(2); + key[0] = id1; + key[1] = id2; + if(!this.exonConnectMap.has(key)){ + var newObject = new Object(); + newObject["line"] = line; + newObject["rects"] = rects; + this.exonConnectMap.set(key,newObject); + } + + } + this.countBorder = function(transArray){ + var countStart = new Array(); + var countEnd = new Array(); + for(var j = 0;j0){ + //create Exons in one transcript + var exonGroup = oneTranscriptGroup.append("g"); + var exons = exonGroup.selectAll("rect") + .data(exonArray) + .enter() + .append("rect"); + + var exonsAttributes = exons.attr("x",function(d){return axisScale(d.start)}) + .attr("y",y_coor - rect_height/2) + .attr("ry",2) + .attr("rx",2) + .attr("width",function(d){return axisScale(d.end) - axisScale(d.start)}) + .attr("height",rect_height) + .style("fill",function(d){return "#BDA6F9"}) + .on("mouseover", function(d){ + div.style("display", "inline"); + d3.select(this) + .attr("stroke-width", 1.5) + .attr("stroke", "#8b64f7"); + //.attr('stroke-alignment',"outer"); + var temp_map = groups.exonConnectMap; + var set = temp_map.entries(); + + while(true){ + var iterator = set.next(); + if(iterator.done === true) + break + var temp = iterator.value + if(checkIdExit(temp[0],d.exon_id)){ + temp[1].line.attr("stroke", "#8b64f7").attr("stroke-width", 1); + temp[1].rects.attr("stroke", "#5b34c7").attr("stroke-width", 1.5); + }else{ + temp[1].line.attr("stroke-width",0); + } + } + + }) + .on("mousemove", function(d){ + div.text("exon "+d.exon_number+" : "+d.start+"~"+d.end+"\n"+d.exon_id) + .style("left", (d3.event.pageX + 10) + "px") + .style("top", (d3.event.pageY - 50) + "px") + }) + .on("mouseout", function(d){ + div.style("display", "none"); + d3.select(this) + .attr("stroke-width", 0); + + + var temp_map = groups.exonConnectMap; + var set = temp_map.entries(); + + while(true){ + var iterator = set.next(); + if(iterator.done === true) + break + var temp = iterator.value + temp[1].line.attr("stroke", "#888888").attr("stroke-width", 1); + temp[1].rects.attr("stroke-width",0); + } + }) + } + if(utrArray.length>0){ + //create UTRs in one transcript + var utrGroup = oneTranscriptGroup.append("g"); + var utrs = utrGroup.selectAll("rect") + .data(utrArray) + .enter() + .append("rect"); + var utrsAttributes = utrs.attr("x",function(d){return axisScale(d.start)}) + .attr("ry",2) + .attr("rx",2) + .attr("y",y_coor) + .attr("width",function(d){return axisScale(d.end) - axisScale(d.start)}) + .attr("height",rect_height/2) + .style("fill",function(d){return "#ECA0C3"}) + .on("mouseover", function(d){ + div.style("display", "inline"); + d3.select(this) + .attr("stroke-width", 1.5) + .attr("stroke", "#df629c"); + + }) + .on("mousemove", function(d){ + div.text("UTR : "+d.start+"~"+d.end) + .style("left", (d3.event.pageX + 10) + "px") + .style("top", (d3.event.pageY - 50) + "px") + }) + .on("mouseout", function(d){ + div.style("display", "none"); + d3.select(this) + .attr("stroke-width", 0) + }) + } + if(cdsArray.length>0){ + //create CDSs in one transcript + var cdsGroup = oneTranscriptGroup.append("g"); + var cdss = cdsGroup.selectAll("rect") + .data(cdsArray) + .enter() + .append("rect"); + var cdssAttributes = cdss.attr("x",function(d){return axisScale(d.start)}) + .attr("ry",2) + .attr("rx",2) + .attr("y",y_coor) + .attr("width",function(d){return axisScale(d.end) - axisScale(d.start)}) + .attr("height",rect_height/2) + .style("fill",function(d){return "#B4C1FF"}) + .on("mouseover", function(d){ + div.style("display", "inline"); + d3.select(this) + .attr("stroke-width", 1.5) + .attr("stroke", "#8491dF"); + }) + .on("mousemove", function(d){ + div.text("CDS : "+d.start+"~"+d.end) + .style("left", (d3.event.pageX + 10) + "px") + .style("top", (d3.event.pageY - 50) + "px") + }) + .on("mouseout", function(d){ + div.style("display", "none"); + d3.select(this) + .attr("stroke-width", 0) + }) + } + var viewGroup = oneTranscriptGroup.append('g'); + var view = viewGroup.append("image") + .attr("x",10) + .attr("y",y_coor - rect_height/2) + .attr("width",25) + .attr("height",30) + .attr("xlink:href","click.png ") + .on("mouseover",function(){ + var temp_groups = groups.group; + var index = count; + for(var i =0;i + + + + isoPlot + + + + + + + + + + + + +
+ + + + display vertical line + +
+
+
+
+ + + \ No newline at end of file diff --git a/test b/test index a9bc721..05127ad 100644 --- a/test +++ b/test @@ -1,2 +1,3 @@ test trytry +trrrrri \ No newline at end of file