add js file for genome viewer

js/viz-linear-sequence.js

+(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;
+}