sequence-viewer/dist/sequence-viewer.min.js

A protein sequence viewer written in javascript

/*! sequence-viewer 2016-08-19 */
var Sequence=function(){function a(a,b){function c(a,b,c){(new Date).getTime();0===a.length&&$(v+" .fastaSeq").html(A);var e=A,f=e.toString(),g=0,h=0;for(i in a)g=d(a[i].start),h=d(a[i].end),f=f.substring(0,g)+"<span class='stringsSelected' style=\"background:"+b+';color:white;">'+f.substring(g,h)+"</span>"+f.substring(h,f.length);$(v+" .fastaSeq").html(f)}function d(a){var b=a+~~(a/10)+4*~~(a/B);return b}function e(b){for(var c=b.slice(),d=0;d<=b.length-1;d++)0===d?(b[0].start>0&&c.unshift({start:0,end:b[0].start,color:"black",underscore:!1}),d===b.length-1&&c.push({start:b[d].end,end:a.length,color:"black",underscore:!1})):d===b.length-1?(b[d-1].end<b[d].start&&c.push({start:b[d-1].end,end:b[d].start,color:"black",underscore:!1}),b[d].end<a.length-1&&c.push({start:b[d].end,end:a.length,color:"black",underscore:!1})):b[d-1].end<b[d].start&&c.push({start:b[d-1].end,end:b[d].start,color:"black",underscore:!1}),0!==d&&b[d-1].end>b[d].start&&console.warn("WARNING (error): Some positions in the coverage list are overlapping");return c.sort(function(a,b){return a.start-b.start}),c}function f(a,b){for(var c=$(a).html().split("<br>"),d=parseInt($(a).attr("display-option")),e=[],f=0,g=0;g<c.length;g++)e.push(f+1+"<br>"),f+=d;$(b).html(e.join(""))}function g(a){var b=parseInt($(a).attr("display-option"));b=(b+b/10).toString();var c=$(a).html();c=c.toString().match(/.{1,10}/g).join(" ").match(new RegExp(".{1,"+b+"}","g")).join("<br>"),$(a).html(c)}function h(){$(v+" .sequenceHeader").append('<input class="inputSearchSeq form-control pull-right" type="text" style="width:40%;margin-top:3px;" placeholder="Search in sequence.. (Regex supported)">'),j()}function j(){$(v+" .inputSearchSeq").keyup(function(){var b=$(this).val();if(""!==b){for(var d,e=new RegExp(b,"gi"),f=[];null!=(d=e.exec(a));)f.push({start:d.index,end:d.index+d[0].length});f.sort(function(a,b){return b.start-a.start}),k(f),c(f,"#C50063")}else $(v+" .fastaSeq").html(A)})}function k(b){var c=l(b,a);c&&m(c)}function l(a,b){var c=[];return a.length&&a.forEach(function(a){c.push({start:a.start+1,end:a.end,sequence:b.substring(a.start,a.end)})}),c}function m(a){if(CustomEvent){var b=new CustomEvent(s.events.SEQUENCE_SELECTED_EVENT,{detail:a});x.dispatchEvent(b)}else console.warn("CustomEvent is not defined....");s.trigger&&s.trigger(s.events.SEQUENCE_SELECTED_EVENT,a)}function n(){$(v+" .fastaSeq").mouseup(function(){var a=o();a&&p(a)})}function o(){var a=window.getSelection().toString().replace(/\s+/g,""),b=window.getSelection(),c=$(v+" .fastaSeq")[0],d=0,e=$(v+" .fastaSeq").text(),f=b.getRangeAt(0),g=f.cloneRange();g.selectNodeContents(c),g.setEnd(f.endContainer,f.endOffset),d=g.toString().length;var h=e.substring(0,d).replace(/\s+/g,"").length,i=h-(a.length-1),j={text:a,start:i,end:h};return j}function p(a){if(CustomEvent){var b=new CustomEvent(s.events.MOUSE_SELECTION_EVENT,{detail:{selection:a.text,start:a.start,end:a.end}});x.dispatchEvent(b)}else console.warn("CustomEvent is not defined....");s.trigger&&s.trigger(s.events.MOUSE_SELECTION_EVENT,{selection:a})}function q(a){var b=w;b.charsPerLine=a.value,s.render(v,b)}function r(){var a=["50","60","70","80","90","100"],b='<form class="form-inline" role="form"><div class="sequenceToolbar row" style="margin-bottom:15px;"><div class="input-group" style="margin-left:20px;"> <span class="input-group-addon">Char per line</i></span><select class="CPLChoice form-control" style="border-top-left-radius: 0px;border-bottom-left-radius: 0px;"><option>Select</option>{{#each CPL}}<option value={{this}}>{{this}}</option>{{/each}}</select></div></div></form>',c=Handlebars.compile(b),d=c({CPL:a});$(v+" .sequenceBody").prepend(d),$(v+" .CPLChoice").change(function(){q(this),$(v+" .CPLChoice option:selected").text($(this).val())})}var s=this;this.events={MOUSE_SELECTION_EVENT:"sequence-viewer-mouse-selection",SEQUENCE_SELECTED_EVENT:"sequence-viewer-substring-selected"};var t;t=void 0!==b?b:"",console.log(t);var u,v,w,x,y,z,a=a,A="",B=0;this.render=function(b,c){if("string"!=typeof b)throw new Error("Div identifier must be a string");if(v=b,x=document.getElementById(b.substring(1)),null===x)throw new Error("Cannot find element with id: "+b.substring(1));if("undefined"==typeof c)var c={showLineNumbers:!0,wrapAminoAcids:!0,charsPerLine:30,search:!1,toolbar:!1,title:"Protein Sequence",sequenceMaxHeight:"400px",badge:!0};else w=c;B="undefined"==typeof c.charsPerLine?30:c.charsPerLine,u="undefined"==typeof c.title?"Protein Sequence":c.title,y="undefined"==typeof c.sequenceMaxHeight?"400px":c.sequenceMaxHeight,z="undefined"==typeof c.badge?!0:c.badge;var d='<div style="display:inline-block;"><span class="badge" style="border-radius:70%;border: 2px solid black;color:#C50063;padding:8px 5px;background-color:white;margin-right:10px;vertical-align:middle;">{{sequenceLength}}</span></div>',e=z?d:"",i='<div class="sequenceHeader row" style="border-bottom: 1px solid #E7EAEC;padding-bottom:5px;margin:0px 0px 15px">'+e+'<h4 style="display:inline-block;vertical-align:middle;">'+u+'</h4></div><div class="sequenceBody" style="margin-top: 5px;"><div class="scroller" style="max-height:'+y+';overflow:auto;white-space: nowrap;padding-right:20px;margin-right:10px;s"><div class="charNumbers" style="font-family: monospace;font-size: 13px;display:inline-block;text-align:right; padding-right:5px; border-right:1px solid LightGray;"></div><div id=\'teste\' class="fastaSeq" display-option="'+B+'" style="font-family: monospace;font-size: 13px;display:inline-block;padding:5px;">{{{sequence}}}</div></div><div class="coverageLegend" style="margin-top: 10px;margin-left:15px;"></div></div>',j=Handlebars.compile(i),k=j({sequence:a,sequenceLength:a.length});$(b).html(k),c.wrapAminoAcids!==!1?g(b+" .fastaSeq"):$(b+" .scroller").css("overflow-x","auto"),c.showLineNumbers!==!1&&f(b+" .fastaSeq",b+" .charNumbers"),c.search&&h(),c.toolbar&&(r(),""!==t&&$(".sequenceToolbar").append('<a class="btn btn-default" href="http://www.nextprot.org/db/entry/'+t.split("-")[0]+"/fasta?isoform="+t.slice(3)+'" style="margin-left:15px;">view Fasta</a><a class="btn btn-default disabled" href="" style="margin-left:15px;">Blast sequence</a><a class="btn btn-default disabled" href="" style="margin-left:15px;">Blast selection</a>')),A=$(b+" .fastaSeq").html(),n()},this.selection=function(a,b,c,d){var e=[a,b],f=A;k([{start:a,end:b}]),e[0]=e[0]+~~(e[0]/10)+4*~~(e[0]/B),e[1]=e[1]+~~(e[1]/10)+4*~~(e[1]/B);f=f.substring(0,e[0])+"<span class='stringSelected' style=\"background:"+c+';color:white;">'+f.substring(e[0],e[1])+"</span>"+f.substring(e[1],f.length),$(v+" .fastaSeq").html(f)},this.addLegend=function(a){for(var b=0;b<a.length;b++)a[b].underscore===!0?$(v+" .coverageLegend").append('<div style="display:inline-block;background:'+a[b].color+';width:20px;height:20px;vertical-align:middle;margin:0px 5px 0px 10px;border-radius:50%; border: 1px solid grey;text-align:center; line-height:0.8;">_</div><p style="display:inline-block;font-weight:bold;font-size:11px;font-style:italic;margin:0;padding-top:3px;vertical-align:top;">'+a[b].name+"</p></div>"):$(v+" .coverageLegend").append('<div style="display:inline-block;background:'+a[b].color+';width:20px;height:20px;vertical-align:middle;margin:0px 5px 0px 10px;border-radius:50%;"></div><p style="display:inline-block;font-weight:bold;font-size:11px;font-style:italic;margin:0;padding-top:3px;vertical-align:top;">'+a[b].name+"</p>")},this.coverage=function(a,b,c,f){a.sort(function(a,b){return a.start-b.start}),a=e(a),console.log(a);(new Date).getTime();if(!b)var b=0;if(!c)var c=0;if(!f)var f="#FFE5A3";for(var g="",h="",i=0;i<a.length;i++){var j="";void 0!==a[i].tooltip&&(j=' title="'+a[i].tooltip+'"');var k="";void 0!==a[i].bgcolor&&(k="background:"+a[i].bgcolor+";");var l="",m="";void 0!==a[i].onclick&&(l=' onclick=" return '+i+';" ',m="cursor: pointer;"),a[i].underscore?(h='<span style="text-decoration:underline;color:'+a[i].color+";"+k+m+'"'+j+l+">",g+=h):(h='<span style="color:'+a[i].color+";"+k+m+'"'+j+l+">",g+=h),c?b>=a[i].start&&b<a[i].end&&c>=a[i].start&&c<a[i].end?(g+=A.substring(d(a[i].start),d(b))+'<span class="peptideHighlighted" style="background:'+f+';">'+A.substring(d(b),d(c+1)),g+="</span>"+A.substring(d(c+1),d(a[i].end))+"</span>"):g+=b>=a[i].start&&b<a[i].end?A.substring(d(a[i].start),d(b))+'</span><span class="peptideHighlighted" style="background:'+f+';">'+h+A.substring(d(b),d(a[i].end))+"</span>":c>=a[i].start&&c<a[i].end?A.substring(d(a[i].start),d(c+1))+"</span></span>"+h+A.substring(d(c+1),d(a[i].end))+"</span>":A.substring(d(a[i].start),d(a[i].end))+"</span>":g+=A.substring(d(a[i].start),d(a[i].end))+"</span>"}var n=$(v+" .fastaSeq");n.html(g);for(var o=$("[onclick]",n),i=0;i<o.length;i++){var p=o[i].onclick();o[i].onclick=a[p].onclick}},this.onMouseSelection=function(a){x.addEventListener(s.events.MOUSE_SELECTION_EVENT,a)},this.onSubpartSelected=function(a){x.addEventListener(s.events.SEQUENCE_SELECTED_EVENT,a)}}return a}();"object"==typeof module&&"object"==typeof module.exports&&(module.exports=Sequence);