lexicon-mono-seq
Version:
LexiconMonoSeq, DOM Text based MSA visualization written in Javascript
221 lines (219 loc) • 7.26 kB
HTML
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="LexiconMonoSeq, DOM Text based MSA visualization written in Javascript">
<meta name="keywords" content="Lexicon,LexiconMonoSeq,Data,Visualization,Javascript">
<meta name="author" content="Ibrahim Tanyalcin">
<meta property="og:title" content="LexiconMonoSeq">
<meta property="og:description" content="LexiconMonoSeq, DOM Text based MSA visualization written in Javascript">
<meta property="og:image" content="//cdn.jsdelivr.net/gh/IbrahimTanyalcin/lexicon-mono-seq/logo.gif">
<meta property="og:url" content="//github.com/IbrahimTanyalcin/lexicon-mono-seq">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:site_name" content="LexiconMonoSeq">
<meta name="twitter:image:alt" content="LexiconMonoSeq, DOM Text based MSA visualization written in Javascript">
<meta name="twitter:widgets:theme" content="light">
<meta name="twitter:widgets:link-color" content="#55acee">
<meta name="twitter:widgets:border-color" content="#55acee">
<meta name="theme-color" content="#1e90ff">
<title>LexiconMonoSeq</title>
<style>
@font-face {font-family: "Consolas";
src: url("//db.onlinewebfonts.com/t/1db29588408eadbd4406aae9238555eb.eot");
src: url("//db.onlinewebfonts.com/t/1db29588408eadbd4406aae9238555eb.eot?#iefix") format("embedded-opentype"),
url("//db.onlinewebfonts.com/t/1db29588408eadbd4406aae9238555eb.woff2") format("woff2"),
url("//db.onlinewebfonts.com/t/1db29588408eadbd4406aae9238555eb.woff") format("woff"),
url("//db.onlinewebfonts.com/t/1db29588408eadbd4406aae9238555eb.ttf") format("truetype"),
url("//db.onlinewebfonts.com/t/1db29588408eadbd4406aae9238555eb.svg#Consolas") format("svg");
}
#test {
width:100vw;
height:100vh;
position:relative;
}
#loading {
width:20vw;
height:20vh;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
font-size:24px;
white-space:pre;
font-family:Consolas;
text-align:center;
}
#label {
position:absolute;
white-space:pre-line;
width:150px;
height:150px;
background:rgba(0,0,0,0.5);
color:White;
font-family:Consolas;
text-align:center;
font-size:24px;
visibility:hidden;
display:flex;
align-items:center;
justify-content:center;
border-radius:5px;
}
#label.topLeft {
transform: translate(-120%,-120%);
}
#label.topRight {
transform: translate(20%,-120%);
}
#label.botLeft {
transform: translate(-120%,20%);
}
#label.botRight {
transform: translate(20%,20%);
}
body {
margin:0px;
overflow:hidden;
}
</style>
<body>
<script src="https://cdn.jsdelivr.net/gh/IbrahimTanyalcin/lexicon-mono-seq@0.18.0/lexiconMonoSeq.v0.18.0.js"></script>
<div id="test"></div>
<div id="loading"></div>
<div id="label"></div>
<script>
!function(){
var instance = window.instance = LexiconMonoSeq("#test",{parallelRendering:4});//create instance
instance.maxAllowedLabelLength = 30;
instance.displayPadding = 0.1; //default is 0.2
var req = new XMLHttpRequest,
loading = document.getElementById("loading"),
label = document.getElementById("label"),
labelStyle = label.style,
throttle = function(){label._busy = false},
obj = [];
req.open("GET","https://distreau.com/lexicon-mono-seq/datasets/pi10M.txt",true);
req.onprogress = function(e){
if(!e.lengthComputable){console.log("NOT COMPUTABLE!");return}
loading.textContent = "Loading " + (e.loaded/e.total * 100 | 0) + "%";
};
req.onload = function(){
loading.parentNode.removeChild(loading);
var str = this.responseText;
//create data set
for(var i = 0,j = 20000,k,m,n,o,l = str.length;i < l;i += j){
k = m = str.slice(i,i + j);
o = "";
while(m.length){
n = m.slice(0,2);
m = m.slice(2);
o += String.fromCharCode(65 + (+n) % 26);
}
obj.push({
name: "" + i + "-" + (i + j - 1),
seq:k,
type:"number"
});
obj.push({
name: "" + i + "-" + (i + j - 1),
seq:o,
type:"alphabet",
charWidth:2
});
}
//add handlers
!function(){
//start instance and enable drag
setTimeout(function(){instance.update(
LexiconMonoSeq.createRuler(obj,true),
{
durationPaint:50
}
).enableDrag(
{
start: function(e){
label._dragStarted = true;
hide(label);
},
end: function(e) {
label._dragStarted = false;
fireUp(e);
}
}
)},1500);
//some constants
var viewportRect = instance.container.getBoundingClientRect(),
viewportWidthHalf = viewportRect.width / 2,
viewportHeightHalf = viewportRect.height / 2;
//add listeners
window.addEventListener("resize",function(){
viewportRect = instance.container.getBoundingClientRect();
viewportWidthHalf = viewportRect.width / 2;
viewportHeightHalf = viewportRect.height / 2;
},false);
instance.wrapper.addEventListener("mousemove",fireUp,false);
label.addEventListener("mouseover",function(){hide(label)},false);
//helper functions
function fireUp (e){
if(label._dragStarted){return}
if(label._busy){return}
label._busy = true;
window.requestAnimationFrame(throttle);
var clientX = e.clientX !== undefined ? e.clientX : e.changedTouches[0].clientX,
clientY = e.clientY !== undefined ? e.clientY : e.changedTouches[0].clientY,
x = clientX - viewportRect.left,
y = clientY - viewportRect.top;
switch((x > viewportWidthHalf) + ((y > viewportHeightHalf) << 1)) {
case 0:
if(label._pos !== 0) {
label._pos = 0;
label.className = "botRight";
}
break;
case 1:
if(label._pos !== 1) {
label._pos = 1;
label.className = "botLeft";
}
break;
case 2:
if(label._pos !== 2) {
label._pos = 2;
label.className = "topRight";
}
break;
case 3:
if(label._pos !== 3) {
label._pos = 3;
label.className = "topLeft";
}
}
labelStyle.left = clientX + "px";
labelStyle.top = clientY + "px";
show(label);
var info = instance.getInfoFromEvent(e);
if(info.detail === "HIT") {
if(info.trackNumber % 2) {
label.textContent = "Pos: " + ((info.trackNumber / 2 | 0) * 20000 + info.pos) + "\nChar: " + info.letter;
} else {
label.textContent = "Pos: " + (((info.trackNumber - 1) / 2 | 0) * 20000 + info.pos * 2) + "\nChar: " + info.letter;
}
} else {
label.textContent = "";
}
}
function show(node){
!node._isVisible
&& (node._isVisible = true, node.style.visibility = "visible");
}
function hide(node){
node._isVisible
&& (node._isVisible = false, node.style.visibility = "hidden");
}
}();
};
req.send();
}();
</script>
</body>
</html>