<commit_before>class TabPaper{
	constructor(w=900,h=900*1.41,bps=4,bl=4,lw=840,lh=140){
		this.width=w;
		this.height=h;
		this.lineHeight=lh;
		this.lineWidth=lw;
		this.beatLength=bl;
		this.beatPerSection=bps;
		this.vHTML="";
		this.scale=1;
		this.animatInfo=[0,0,0];//start time,elapsed time,frame
		this.content=document.createElement('div');
		this.content.style.outline="none";
		this.content.style.textAlign='center';
		this.content.onselectstart=function(){return false;}
		this.content.setAttribute('tabindex','1');
		this.content.addEventListener("click",this.ckEvent.bind(this));
		this.content.addEventListener("keydown",this.kdEvent.bind(this));
		this.content.addEventListener("mousedown",this.mdEvent.bind(this));
		this.content.addEventListener("mouseup",()=>{
			this.content.removeEventListener("mousemove",this.grabMove);
		});
		this.content.addEventListener("mouseout",()=>{
			this.content.removeEventListener("mousemove",this.grabMove);
		});
		this.grabMove=this.grabMove.bind(this);
		this.data=null;
		this.sel=[];
		this.check();
	}
	check(){
		if(this.width<500)this.width=500;
		if(this.height<500)this.height=500;
		if(this.lineHeight>300)this.lineHeight=120;
		if(this.lineWidth>this.width)this.lineWidth=this.width-60;
	}
	
	render(){
		if(!this.data){
			this.vHTML='pleas load data first';
			return;
		}
		this.vHTML="";
		var nx=(this.width-this.lineWidth)/2,ix=nx,iy=60,time=0;
		this.drawLine(ix,iy);
		ix+=80;
		for(let i=0;i<this.data.length;i++){
			this.drawNote(ix,iy,i,this.data[i][0],this.data[i].slice(1));
			time+=this.beatLength/this.data[i][0];
			if(time>this.beatPerSection){
				this.drawAlert(ix,iy);
				time=this.beatPerSection;
			}
			if(time==this.beatPerSection){
				ix+=20;
				if(ix<nx+this.lineWidth)this.drawBar(ix,iy);
				ix+=20;
				time=0;
			}else{
				ix+=80*this.beatLength/this.data[i][0];
			}
			if(ix>=nx+this.lineWidth){
				ix=nx,iy+=this.lineHeight;
				this.drawLine(ix,iy);
				ix+=80;
			}
		}
		this.vHTML=`<div><svg width="${this.width}" height="${this.height}" 
			style="box-shadow:1px 1px 4px 2px #777;background:#FFFFFF";>`
			+this.vHTML+"</svg></div>";
		this.content.innerHTML=this.vHTML;
		this.zoom();
	}
	
	zoom(){
		this.content.style.width=100*this.scale+"%";
		this.content.style.height=100*this.scale+"%";
		this.content.children[0].style.width=this.width*this.scale+"px";
		this.content.children[0].style.height=this.height*this.scale+"px";
		this.content.children[0].style.margin="auto";
		this.content.children[0].children[0].style.transformOrigin="50% 0%";
		this.content.children[0].children[0].style.transform=`scale(${this.scale},${this.scale})`;
	}
	
	animate(){
		requestAnimationFrame(this.animateFrame.bind(this));
	}
	
	animateFrame(t){
		var frametime=500;
		if(this.animatInfo[0]==0){
			this.animatInfo[0]=t;
			this.aData=this.data;
			this.data=[];
		}
		this.animatInfo[1]=t-this.animatInfo[0]-this.animatInfo[2]*frametime;
		if(this.animatInfo[1]>=frametime){
			this.animatInfo[1]=0;
			this.animatInfo[2]++;
			this.data=this.aData.slice(0,this.animatInfo[2]);
			this.render();
		}
		if(this.data.length!=this.aData.length){requestAnimationFrame(this.animateFrame.bind(this));}
		else{console.log("animation end");}
	}
	
	mdEvent(e){
		this.my=e.screenY;
		this.mx=e.screenX;
		this.content.addEventListener('mousemove',this.grabMove);
	}
	
	grabMove(e){
		document.body.scrollTop-=e.screenY-this.my;
		document.body.scrollLeft-=e.screenX-this.mx;
		this.my=e.screenY;
		this.mx=e.screenX;
	}
	
	selNote(pos,id){
		this.sel[0]=[pos,id];
		this.render();
	}
	
	ckEvent(e){
		if(e.target.getAttribute('data-type')=='nt'){
			var pos=e.target.getAttribute('data-pos');
			var id=e.target.getAttribute('data-i');
			this.selNote(pos,id);
		}
	}
	
	kdEvent(e){
		if(e.keyCode==107){
			if(this.sel.length>0){
				this.data[this.sel[0][0]][this.sel[0][1]*2+1+1]++;
				this.render();
			}
			this.scale+=0.1;
			this.render();
		}
		if(e.keyCode==109){
			if(this.sel.length>0){
				var p=this.sel[0][0];
				var id=this.sel[0][1];
				if(this.data[p][id*2+1+1]>0)this.data[p][id*2+1+1]--;
				this.render();
			}
			this.scale-=0.1;
			this.render();
		}
		if(e.keyCode==87){
			if(this.sel.length>0){
				var p=this.sel[0][0];
				var id=this.sel[0][1];
				if(this.data[p][id*2+1]>1)this.data[p][id*2+1]--;
				this.render();
			}
		}
		if(e.keyCode==83){
			if(this.sel.length>0){
				var p=this.sel[0][0];
				var id=this.sel[0][1];
				if(this.data[p][id*2+1]<6)this.data[p][id*2+1]++;
				this.render();
			}
		}
	}
	
	load(data){
		this.data=data;<commit_msg>content script<commit_after>class TabPaper{
	constructor(w=900,h=900*1.41,bps=4,bl=4,lw=840,lh=140){
		this.width=w;
		this.height=h;
		this.lineHeight=lh;
		this.lineWidth=lw;
		this.beatLength=bl;
		this.beatPerSection=bps;
		this.vHTML="";
		this.scale=1;
		this.animatInfo=[0,0,0];//start time,elapsed time,frame
		this.content=document.createElement('div');
		this.content.style.outline="none";
		this.content.onselectstart=function(){return false;}
		this.content.setAttribute('tabindex','1');
		this.content.addEventListener("click",this.ckEvent.bind(this));
		this.content.addEventListener("keydown",this.kdEvent.bind(this));
		this.data=null;
		this.sel=[];
		this.check();
	}
	check(){
		if(this.width<500)this.width=500;
		if(this.height<500)this.height=500;
		if(this.lineHeight>300)this.lineHeight=120;
		if(this.lineWidth>this.width)this.lineWidth=this.width-60;
	}
	
	render(){
		if(!this.data){
			this.vHTML='pleas load data first';
			return;
		}
		this.vHTML="";
		var nx=(this.width-this.lineWidth)/2,ix=nx,iy=60,time=0;
		this.drawLine(ix,iy);
		ix+=80;
		for(let i=0;i<this.data.length;i++){
			this.drawNote(ix,iy,i,this.data[i][0],this.data[i].slice(1));
			time+=this.beatLength/this.data[i][0];
			if(time>this.beatPerSection){
				this.drawAlert(ix,iy);
				time=this.beatPerSection;
			}
			if(time==this.beatPerSection){
				ix+=20;
				if(ix<nx+this.lineWidth)this.drawBar(ix,iy);
				ix+=20;
				time=0;
			}else{
				ix+=80*this.beatLength/this.data[i][0];
			}
			if(ix>=nx+this.lineWidth){
				ix=nx,iy+=this.lineHeight;
				this.drawLine(ix,iy);
				ix+=80;
			}
		}
		this.vHTML=`<div style="overflow:hidden;padding:3px;"><svg width="${this.width}" height="${this.height}" 
			style="box-shadow:1px 1px 4px 2px #777;background:#FFFFFF";>`
			+this.vHTML+"</svg></div>";
		this.content.innerHTML=this.vHTML;
		this.zoom();
	}
	
	zoom(){
		this.content.children[0].style.width=this.width*this.scale+6+"px";
		this.content.children[0].style.height=this.height*this.scale+6+"px";
		this.content.children[0].style.margin="auto";
		this.content.children[0].children[0].style.transformOrigin="0% 0%";
		this.content.children[0].children[0].style.transform=`scale(${this.scale},${this.scale})`;
	}
	
	animate(){
		this.animatInfo=[0,0,0];
		requestAnimationFrame(this.animateFrame.bind(this));
	}
	
	animateFrame(t){
		var frametime=500;
		if(this.animatInfo[0]==0){
			this.animatInfo[0]=t;
			this.aData=this.data;
			this.data=[];
		}
		this.animatInfo[1]=t-this.animatInfo[0]-this.animatInfo[2]*frametime;
		if(this.animatInfo[1]>=frametime){
			this.animatInfo[1]=0;
			this.animatInfo[2]++;
			this.data=this.aData.slice(0,this.animatInfo[2]);
			this.render();
		}
		if(this.data.length!=this.aData.length){requestAnimationFrame(this.animateFrame.bind(this));}
		else{console.log("animation end");}
	}
	
	selNote(pos,id){
		this.sel[0]=[pos,id];
		this.render();
	}
	
	ckEvent(e){
		if(e.target.getAttribute('data-type')=='nt'){
			var pos=e.target.getAttribute('data-pos');
			var id=e.target.getAttribute('data-i');
			this.selNote(pos,id);
		}
	}
	
	kdEvent(e){
		if(e.keyCode==107){
			if(this.sel.length>0){
				this.data[this.sel[0][0]][this.sel[0][1]*2+1+1]++;
				this.render();
			}
			if(this.scale<3)this.scale+=0.1;
			this.render();
		}
		if(e.keyCode==109){
			if(this.sel.length>0){
				var p=this.sel[0][0];
				var id=this.sel[0][1];
				if(this.data[p][id*2+1+1]>0)this.data[p][id*2+1+1]--;
				this.render();
			}
			if(this.scale>0.5)this.scale-=0.1;
			this.render();
		}
		if(e.keyCode==87){
			if(this.sel.length>0){
				var p=this.sel[0][0];
				var id=this.sel[0][1];
				if(this.data[p][id*2+1]>1)this.data[p][id*2+1]--;
				this.render();
			}
		}
		if(e.keyCode==83){
			if(this.sel.length>0){
				var p=this.sel[0][0];
				var id=this.sel[0][1];
				if(this.data[p][id*2+1]<6)this.data[p][id*2+1]++;
				this.render();
			}
		}
	}
	
	load(data){
		this.data=data;
{'fraction_non_alphanumeric': 0.21995065209728587, 'fraction_numerical': 0.036658442016214314, 'mean_word_length': 4.466923570969814, 'pattern_counts': {'":': 0, '<': 22, '<?xml version=': 0, '>': 36, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2869747', 'n_tokens_mistral': 4122, 'n_tokens_neox': 3546, 'n_words': 300}