Commit 23a9ded8 authored by Patrick Barth's avatar Patrick Barth
Browse files

add js file for genome viewer

parent 7fab1294
(function (d3) {
var div = d3.select( "body" )
.append( "div" )
.attr( "class", "tooltip" )
.style( "opacity", 0 );
Array.from( document.getElementsByClassName( "container-lin-dna" ) ).forEach( (e) => {
e.style.padding = '4rem 5rem';
} );
Array.from( document.getElementsByClassName( "lin-dna" ) ).forEach( (e) => {
const svgHeight = e.clientHeight;
const svgWidth = e.clientWidth;
const padding = 40;
//create axis
const xScale = d3.scaleLinear()
.domain( [ e.getAttribute( "data-cluster-start"), e.getAttribute( "data-cluster-end" ) ] )
.range( [ 0, svgWidth ] );
const xAxis = d3.axisBottom( xScale );
const svgContainer = d3.select(e).append( "svg" )
.attr( 'width', svgWidth + padding * 2 )
.attr( 'height', svgHeight + padding * 2 )
.append( "g" )
.attr( 'transform', 'translate(' + 0 + ',' + padding + ')' );
svgContainer.append( "g" )
.attr( 'transform', 'translate(' + 0 + ',' + 5 + ')' )
.call( xAxis );
//create visualization of DNA-Elements
const lineGenerator = d3.line();
svgContainer.selectAll('.arrow')
.data( collectDNARegionData( e ) )
.enter()
.append( 'path' )
.attr( 'class', 'arrow' )
.attr( 'data-toggle', 'tooltip' )
.attr( 'data-placement', 'bottom' )
.attr('d', d => { return lineGenerator( returnRegionAreaPoints( d, xScale ) ) } )
.style( 'fill', d => { return returnSectionColor( d.type ) } )
.style( 'opacity', 0.6 )
.on( "mouseover", function(d) {
this.style.opacity = 1;
div.style( "opacity", .9 )
.style( "width", "220px")
.style( "left", ( this.getBoundingClientRect().x + ( this.getBoundingClientRect().width / 2 ) - 110 ) + "px" )
.style( "top", ( this.getBoundingClientRect().bottom + 10 ) + "px" );
div.html( d => returnStringForPopup( this.__data__ ) )
})
.on( "mouseout", function(d) {
this.style.opacity = 0.6;
div.style( "opacity", 0 );
});
} );
} )(d3);
function returnStringForPopup( regionElement ){
var text = "";
//build table
text = text.concat( "<table><tbody><tr><td style=\"vertical-align:top\"><b>Name</b>:</td><td>" + regionElement.name + "</td></tr>" )
text = text.concat( "<tr><td style=\"vertical-align:top\"><b>Desc</b>:</td><td>" + regionElement.desc + "</td></tr>" )
text = text.concat( "<tr><td style=\"vertical-align:top\"><b>Start</b>:</td><td>" + regionElement.start + "</td></tr>" )
text = text.concat( "<tr><td style=\"vertical-align:top\"><b>End</b>:</td><td>" + regionElement.end + "</td></tr>" )
text = text.concat( "<tr><td style=\"vertical-align:top\"><b>Type</b>:</td><td>" + regionElement.type + "</td></tr>" )
Array.from( Object.keys( regionElement ) ).forEach( key => {
if( key.match( "data-optional-" ) ){
text = text.concat( "<tr><td style=\"vertical-align:top\"><b>" + key.replace( "data-optional-", "" ) + "</b>:</td><td> " + regionElement[ key ] + "</td></tr>" )
}
} )
text = text.concat( "</tbody></table>" )
return text;
}
function returnSectionColor( type ) {
switch ( type ) {
case 'region': return '#bdbdbd' // greyLighten
case 'gene': return '#757575' // greyDarken
case 'cds': return '#000000' // black
case 'rRNA': return '#795548' // brown
case 'tRNA': return '#4caf50' // green
case 'ncRNA': return '#ff9800' // orange
default: return -1
}
}
function collectDNARegionData( clusterElement ) {
var data = [];
Array.from( clusterElement.getElementsByClassName( "region-to-display" ) ).forEach( (e) => {
var regionData = {
"name": e.getAttribute( "data-region-name" ),
"desc": e.getAttribute( "data-region-description" ),
"start": e.getAttribute( "data-region-start" ),
"end": e.getAttribute( "data-region-end" ),
"strand": e.getAttribute( "data-region-strand" ),
"type": e.getAttribute( "data-region-type" )
};
Array.from( e.attributes ).forEach( (attr) => {
if( attr.name.match( "data-optional-" ) ){
regionData[ attr.name ] = attr.value
console.log( regionData[ attr.name ] )
}
} );
data.push( regionData );
} );
return data;
}
function returnRegionAreaPoints( data, xScale ) {
const peakWidth = 10;
const height = -40;
const mid = height / 2;
let points = [];
//check for correct data type and strand
if( returnSectionColor( data.type ) !== -1 && ( data.strand === "+" || data.strand === "-" ) ){
//return drawing points
if( data.type === 'region' ) {
points = [
[ xScale( data.start ), 0 ],
[ xScale( data.end ), 0 ],
[ xScale( data.end ), height ],
[ xScale( data.start ), height ]
];
} else if ( xScale( data.end ) - xScale( data.start ) <= peakWidth ) {
//draw short arrows (without shaft)
if ( data.strand === "+" ) {
points = [
[ xScale( data.start ), 0 ],
[ xScale( data.end ), mid ],
[ xScale( data.start ), height ]
]
} else if ( data.strand === "-" ) {
points = [
[ xScale( data.end ), 0 ],
[ xScale( data.start ), mid ],
[ xScale( data.end ), height ]
]
}
} else {
//draw longer arrows (with shaft)
if ( data.strand === "+" ) {
points = [
[ xScale( data.start ), 0 ],
[ xScale( data.end ) - peakWidth, 0 ],
[ xScale( data.end ), mid ],
[ xScale( data.end ) - peakWidth, height ],
[ xScale( data.start ), height ]
]
} else if ( data.strand === "-" ) {
points = [
[ xScale( data.start ), mid],
[ xScale( data.start ) + peakWidth, 0 ],
[ xScale( data.end ), 0 ],
[ xScale( data.end ), height ],
[ xScale( data.start ) + peakWidth, height ]
]
}
}
} else {
console.log( `Unknown type: "` + data.type + `" or unknown strand: "` + data.strand + `"` );
}
return points;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment