cyto-chromosome-vis/cyto-chromosome.min.js

Interactive visual representation/ web visualization tool for chromosome ideograms

!function(){var t={},e=window.d3;"undefined"!=typeof module&&module.exports?(module.exports=t,e=require("d3")):"undefined"!=typeof angular||(window.cyto_chr=t),function(t,e){"use strict";t.margin={top:38,left:14,right:5};var r=248956422,n=1217e5,i=function(){this._segment="1",this._selectionMode="single",this._domTarget=e.select(document.documentElement),this._resolution="550",this._width=null,this._height=17,this._useRelative=!0,this._showAxis=!1,this.dispatch=e.dispatch("bandclick","selectorchange","selectorend","selectordelete"),this.rendered=!1,this.selectors=[],this.model=[],this.maxBasePair=0,this.xscale=e.scale.linear()};i.prototype.getMaxBasepair=function(){return this.maxBasePair},i.prototype.segment=function(e){return"number"==typeof e&&(e=e.toString()),t.InitGetterSetter.call(this,"_segment",e)},i.prototype.selectionMode=function(e){return t.InitGetterSetter.call(this,"_selectionMode",e)},i.prototype.target=function(r){if("string"==typeof r&&(r=e.select(r)),r.empty())throw"Error: Invalid dom target";return t.InitGetterSetter.call(this,"_domTarget",r)},i.prototype.resolution=function(e){if("number"==typeof e&&(e=e.toString()),"400"===e||"550"===e||"850"===e||"1200"===e||void 0===e)return t.InitGetterSetter.call(this,"_resolution",e);throw"Error: Invalid resolution. Please enter 400, 550, 850, or 1200 only."},i.prototype.width=function(e){return t.InitGetterSetter.call(this,"_width",e)},i.prototype.height=function(e){return t.InitGetterSetter.call(this,"_height",e)},i.prototype.useRelative=function(e){return t.InitGetterSetter.call(this,"_useRelative",e)},i.prototype.showAxis=function(e){return t.InitGetterSetter.call(this,"_showAxis",e)},i.prototype.on=function(t,e){if(!this.dispatch.hasOwnProperty(t))throw"Error: No event for "+t;this.dispatch.on(t,e)},i.prototype.config=function(t,e){return this[t](e)},i.prototype.renderAxis=function(){var r=e.svg.axis().scale(this.xscale).tickFormat(e.format("s")).orient("bottom");!this._useRelative||"Y"!==this._segment&&"22"!==this._segment&&"21"!==this._segment&&"20"!==this._segment&&"19"!==this._segment||r.ticks(6);var n=this.svgTarget.append("g").classed("bp-axis",!0).attr("transform","translate("+t.margin.left+","+(this._height+t.margin.top+6)+")");n.call(r),n.selectAll("text").style("font","10px sans-serif"),n.selectAll("path, line").style({fill:"none",stroke:"#666666","shape-rendering":"crispEdges"})},i.prototype.remove=function(){this.svgTarget.remove()},i.prototype.moveSelectorTo=function(t,e){if(2!==arguments.length)throw"Error moveSelectorTo: Invalid number of arguments. Both start and stop coordinates are required";0===this.selectors.length?this.newSelector(0,"10000000"):this.selectors[0].move(t,e)},i.prototype.newSelector=function(e,r){function n(t){i.dispatch.selectordelete(t);var e=i.selectors.indexOf(t);i.selectors.splice(e,1)}var i=this,s=t.selector(n).x(t.margin.left).y(t.margin.top-this._height/4).height(this._height+this._height/2).xscale(this.xscale).extent([e,r]).target(this.svgTarget).render();s.dispatch.on("change",function(t){i.dispatch.selectorchange(t)}),s.dispatch.on("changeend",function(t){i.dispatch.selectorend(t)}),this.selectors.push(s)},i.prototype.getSelections=function(){for(var t=[],e=0;e<this.selectors.length;e++){var r=this.selectors[e].extent();t.push({start:r[0],stop:r[1]})}return t},i.prototype.getSelectedBands=function(t){var e=[];if(this.selectors.length>0){var r=this.selectors[0].extent(),n=+r[0],i=+r[1];"undefined"!=typeof t&&(n-=t,i+=t),e=this.model.slice().filter(function(t){var e=+t.bp_start,r=+t.bp_stop;return n>=e&&r>n||i>e&&r>=i||e>=n&&i>=r?!0:!1})}return e},i.prototype.getSVGTarget=function(){return this.svgTarget},i.prototype.render=function(i){var s=this;if(s.rendered&&(s.selectors=[],s.remove()),null===s._width){var o=e.select(s._domTarget[0][0].parentNode).node().getBoundingClientRect().width;s.width(o)}return t.modelLoader.load(this._segment,this._resolution,function(o){function a(e){var r=0;return s.alignCentromere&&"1"!==s._segment&&(r=s.xscale(n)-s.xscale(s.segMid)),s.xscale(e)+t.margin.left+r}s.model=o,s.maxBasePair=e.max(o,function(t){return+t.bp_stop}),s.segMid=0;for(var l=0;l<o.length;l++)if("acen"===o[l].stain){s.segMid=o[l].bp_stop;break}var h=s._useRelative?s.maxBasePair/r*s._width:s._width;h-=t.margin.left+t.margin.right,s.xscale.domain(i?[i[0],i[1]]:[1,s.maxBasePair]),s.xscale.range([0,h]);var c=s._height+62,u=s._width;s.svgTarget=s._domTarget.style("height",c+"px").style("width",u+5+"px").append("svg").attr("width",u).attr("height",c);var p=s.svgTarget.selectAll("g").data(o).enter();s.svgTarget.append("text").text(s._segment).attr("x",5).attr("y",t.margin.top+s._height/2+2).attr("text-anchor","middle").style("font","10px sans-serif"),p.append("g").each(function(r,n){function i(){this.attr("stroke","#000000").attr("stroke-width",.2)}function l(e,r,n,i,o,l){return this.append("path").attr("d",t.roundedRect(a(e.bp_start),t.margin.top,a(e.bp_stop)-a(e.bp_start),s._height,r,n,i,o,l)).style("fill",t.getStainColour(e.stain,e.density))}var h=e.select(this),c="1200"===s._resolution?8:2;if(s._useRelative&&"1200"==s._resolution&&"Y"==s._segment&&(c=12),n%c===0){var u=(a(r.bp_stop)+a(r.bp_start))/2;h.append("line").attr("x1",u).attr("y1",t.margin.top).attr("x2",u).attr("y2",t.margin.top-4).style("stroke","grey").style("stroke-width",1),h.append("text").attr("transform","translate("+u+","+(t.margin.top-6)+")rotate(-50)").style("font","10px sans-serif").text(r.arm+r.band)}var p,d=a(r.bp_stop)-a(r.bp_start),g="1200"==s._resolution?7:6;if(0===n&&d>10)p=l.call(h,r,4,!0,!1,!0,!1),i.call(p);else if("acen"===r.stain&&d>g)"p"===r.arm?p=l.call(h,r,5,!1,!0,!1,!0):"q"===r.arm&&(p=l.call(h,r,5,!0,!1,!0,!1));else if(n===o.length-1)p=l.call(h,r,5,!1,!0,!1,!0),i.call(p);else{var f="stalk"===r.stain?t.margin.top+s._height/4:t.margin.top,_="stalk"===r.stain?s._height/2:s._height;p=h.append("rect").attr("x",a(r.bp_start)).attr("y",f).attr("height",_).attr("width",s.xscale(r.bp_stop)-s.xscale(r.bp_start)).style("fill",t.getStainColour(r.stain,r.density)),i.call(p)}p.append("title").text(r.arm+r.band),p.on("mouseover",function(r){var n=e.select(this).style("opacity","0.5").style("cursor","pointer");"gneg"===r.stain&&n.style("fill",t.getStainColour("gpos","25"))}),p.on("mouseout",function(r){var n=e.select(this).style("opacity","1").style("cursor","default");"gneg"===r.stain&&n.style("fill",t.getStainColour("gneg"))}),p.on("click",function(t){(0===s.selectors.length||"multi"===s._selectionMode&&e.event.altKey)&&s.newSelector(t.bp_start,t.bp_stop),"single"===s._selectionMode&&s.selectors.length>0&&s.moveSelectorTo(t.bp_start,t.bp_stop),s.dispatch.bandclick(t)})}),s._showAxis&&s.renderAxis(),s.rendered=!0}),s},t.chromosome=function(){return new i}}(t||{},e),function(t,e){function r(){this.status="notloaded",this.cache=[]}function n(t,r,n){var i=l[r];if(0===i.cache.length){if("loading"===i.status)return void h.push({res:r,cb:n});"notloaded"===i.status&&(i.status="loading",e.tsv(t,function(t){for(i.cache=t,i.status="loaded",n(t);h.length>0;){var e=h.shift();e.cb(t)}}))}else n(i.cache)}function i(t,e,r){t=t||"1",e=e||"550";var i=o[e];n(a+i,e,function(e){if(e){var n=s(e,t);r(n)}})}function s(t,e){for(var r=[],n=0;n<t.length;n++)t[n]["#chromosome"]===e&&r.push(t[n]);return r}var o={400:"ideogram_9606_GCF_000001305.14_400_V1",550:"ideogram_9606_GCF_000001305.14_550_V1",850:"ideogram_9606_GCF_000001305.14_850_V1",1200:"ideogram_9606_GCF_000001305.13_1200_v1"},a="data/",l={400:new r,550:new r,850:new r,1200:new r},h=[];t.modelLoader={load:i,setDataDir:function(t){a=t},getDataDir:function(){return a}}}(t||{},e),function(t,e){var r=function(t){this._brush=e.svg.brush(),this.dispatch=e.dispatch("change","changeend","selectordelete"),this._x=0,this._y=0,this._extent=[0,0],this._height=0,this._closecb=t};r.prototype.test=function(e){var r=this;return t.InitGetterSetter.call(this,"_test",e,function(){r._another="_that"})},r.prototype.extent=function(e){var r=this;return"undefined"==typeof e?r._brush.extent():t.InitGetterSetter.call(this,"_extent",e,function(){r._brush.extent(e)})},r.prototype.xscale=function(e){var r=this;return t.InitGetterSetter.call(this,"_xscale",e,function(){r._brush.x(e)})},r.prototype.target=function(e){return t.InitGetterSetter.call(this,"_target",e)},r.prototype.height=function(e){return t.InitGetterSetter.call(this,"_height",e)},r.prototype.x=function(e){return t.InitGetterSetter.call(this,"_x",e)},r.prototype.y=function(e){return t.InitGetterSetter.call(this,"_y",e)},r.prototype.render=function(){var r=this;this.selector=this._target.append("g").attr("transform","translate("+this._x+","+this._y+")").call(this._brush),this.selector.selectAll("rect").attr("height",this._height),this.selector.select(".background").remove();var n=(this.selector.select(".extent").style("fill","steelblue").style("opacity","0.5"),this._xscale(this._extent[1])+t.margin.left),i=t.margin.top-3,s=this._target.append("g");return s.append("title").text("remove"),this.deleteButton=s.append("circle").attr("cx",n).attr("cy",i).attr("r",5).attr("fill","red").on("mouseover",function(){e.select(this).style("cursor","pointer")}).on("mouseout",function(){e.select(this).style("cursor","default")}).on("click",function(){r.remove()}),this._brush.on("brush",function(){r.updateXButton();var t=r._brush.extent();r.dispatch.change(t)}),this._brush.on("brushend",function(t){var e=r._brush.extent();r.dispatch.changeend(e)}),this},r.prototype.remove=function(){return this.selector.remove(),this.deleteButton.remove(),this._closecb(this),this},r.prototype.updateXButton=function(){var e=this._brush.extent(),r=this._xscale(e[1])+t.margin.left;this.deleteButton.attr("cx",r)},r.prototype.move=function(t,e){this._brush.extent([t,e]),this.selector.call(this._brush),this.updateXButton()},t.selector=function(t){return new r(t)}}(t||{},e),function(t,e){t.initPattern=function(){var t=this.append("pattern").attr("id","acen-fill").attr("patternUnits","userSpaceOnUse").attr("x","0").attr("y","0").attr("width","10").attr("height","10").append("g").style({fill:"none",stroke:"#708090","stroke-width":"2"});t.append("path").attr("d","M0,0 l10,10"),t.append("path").attr("d","M10,0 l-10,10")},t.roundedRect=function(t,e,r,n,i,s,o,a,l){var h;return h="M"+(t+i)+","+e,h+="h"+(r-2*i),o?h+="a"+i+","+i+" 0 0 1 "+i+","+i:(h+="h"+i,h+="v"+i),h+="v"+(n-2*i),l?h+="a"+i+","+i+" 0 0 1 "+-i+","+i:(h+="v"+i,h+="h"+-i),h+="h"+(2*i-r),a?h+="a"+i+","+i+" 0 0 1 "+-i+","+-i:(h+="h"+-i,h+="v"+-i),h+="v"+(2*i-n),s?h+="a"+i+","+i+" 0 0 1 "+i+","+-i:(h+="v"+-i,h+="h"+i),h+="z"},t.getStainColour=function(t,e){if("gpos"===t){if(""===e||null===e)return"#000000";switch(e){case"100":return"#000000";case"75":return"#666666";case"50":return"#999999";case"25":return"#d9d9d9"}}return"gneg"===t?"#ffffff":"acen"===t?"#708090":"gvar"===t?"#e0e0e0":"stalk"===t?"#708090":"green"},t.setOption=function(t,e){return"undefined"!=typeof t?t:e},t.InitGetterSetter=function(t,e,r){return"undefined"!=typeof e?(this[t]=e,"function"==typeof r&&r(),this):this[t]}}(t||{},e),function(t,e){"undefined"!=typeof angular&&(t.modelLoader.setDataDir("./node_modules/cyto-chromosome-vis/data/"),angular.module("cyto-chromosome-vis",[]).directive("cytochromosome",[function(){function r(r,n,i){i.resolution=t.setOption(i.resolution,"550"),i.width=t.setOption(i.width,1e3),i.segment=t.setOption(i.segment,"1"),i.useRelative=t.setOption(i.useRelative,!0),i.showAxis=t.setOption(i.showAxis,!1),t.chromosome().target(e.select(n[0])).width(i.width).segment(i.segment).resolution(i.resolution).useRelative("true"==i.useRelative).showAxis("true"==i.showAxis).render()}return{link:r,restrict:"E"}}]).provider("cytochromosome",function(){this.build=function(){return t.chromosome()},this.setDataDir=function(e){t.modelLoader.setDataDir(e)},this.$get=function(){return this}}))}(t||{},e)}();