{% extends 'base.html' %}

{% block content %}

{% load staticfiles %}

<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"/>
<link rel="stylesheet" href="{% static 'css/main.css' %}" type="text/css" xmlns="http://www.w3.org/1999/html"/>
<script type="text/javascript" src="{% static 'js/d3.js' %}"></script>
<script type="text/javascript" src="{% static 'js/d3-tip.js' %}"></script>
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>

<nav class="navbar navbar-nav navbar-fixed-top">
    <div class="container-fluid">
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a class="navbar-brand" href="/AraQTL" id="home_button">AraQTL</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" title="Select an experiment">Experiment
                        <span class="caret"></span></a>
                    <ul class="dropdown-menu dropdown-menu-left">
                        {% for experiment in experiments %}
                        <li><a href="/AraQTL/cistrans/?experiment_name={{ experiment.experiment_name }}">{{ experiment.experiment_name }}</a></li>
                        {% endfor %}
                    </ul>
                </li>
                <li><a href="/AraQTL/?mode=correlation" title="Search for correlating profiles">Correlation</a></li>
                <li><a href="/AraQTL/?mode=coregulation" title="Search per locus">Locus</a></li>
                <form class="navbar-form navbar-left" action="/AraQTL/cistrans/" id="top_form" method="get">
                    <input title="Search for AGI identifiers in the cis-trans plot" id="query" name="query" type="text" class="form-control"
                           placeholder="Search the plot...">
                    <select title="Select an experiment" class="form-control" id="experiment_selector" name="experiment_name">
                        {% for experiment in experiments %}
                        <option value="{{ experiment.experiment_name }}" {% if experiment.experiment_name == experiment_name %} selected {% endif %}>
                            {{ experiment.experiment_name }}
                        </option>
                        {% endfor %}
                    </select>
                    LOD:<input title="LOD score threshold (numeric, one decimal)" id="thld"
                           pattern="[0-9]+([.][0-9])?"
                           name="thld" type="text"
                           size="3" class="form-control"
                           value="{% if thld %}{{ thld|floatformat:-1}}{% else %}{{ lodthld|floatformat:-1 }}{% endif %}">
                </form>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Help
                        <span class="caret"></span></a>
                    <ul class="dropdown-menu dropdown-menu-left">
                        <li><a href="/AraQTL/?mode=about">About</a></li>
                        <li><a href="/AraQTL/?mode=manual">Manual</a></li>
                        <li><a href="/AraQTL/?mode=FAQ">FAQ</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

{% if experiment_name %}
<div class="top"></div>
    <div id="explaintext">
    <a href="#explain" class="explainlink">?</a>
        <div id="explain" class="helptext">
            A cis-trans plot shows eQTLs with a certain LOD score on the X-axis for genes on the Y-axis.
            <br><br>
            Blue dots indicate peaks with a positive LOD score, red dots indicate peaks with a negative LOD score.
            <br><br>
            By clicking on an eQTL, the eQTL profile of the corresponding gene is shown in the panel on the right.
            <br><br>
            On the diagonal are the so called &quot;<i>cis</i> eQTLs&quot; that map to the gene&apos;s own location.
            <br><br>
            Below the cis-trans plot is a histogram of the number of eQTL peaks per marker.
            Clicking on a bar brings up the eQTL profiles for all genes with an eQTL at that location.
            <br><br>
            You can use the search box at the top to search for a specific AGI ID in the plot.
        </div>
    </div>
<div id="loading"></div>
<div id = "container">
	<div id ="cistrans"></div>
	<script type="text/javascript">

	(function() {

		var draw;
		draw = function(data) {
		var Zscale, allgenes, altpink, axislabels, bigRad, bottom, c, checkerboard, checkerboard2, chrGap, chrLowXScale, chrXScale, chrYScale, chrindex, ci, cj, cur, curXPixel, curYPixel, darkGray, darkblue, darkgreen, darkred, draw_probe, efftip, eqtltip, fasttime, g, gene, h, i, indtip, j, jitter, jitterAmount, labelcolor, left, lightGray, m, maincolor, martip, maxlod, newg, nodig, onedig, origGeneName, p, pad, peakRad, peaks, pink, probe, probesByGene, purple, right, slowtime, svg, tickHeight, titlecolor, top, totalChrLength, totalh, totalw, twodig, w, xloc, yloc, _i, _j, _k, _l, _len, _len1, _len10, _len2, _len3, _len4, _len5, _len6, _len7, _len8, _len9, _m, _n, _o, _p, _q, _r, _ref, _ref1, _ref10, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref11, _s;
		d3.select("div#loading").remove();

	      var markerSums = {};
	      var maxMarkerSum = 0;
	 
		
		totalw = 1100;
		totalh = 1100;
		chrGap = 8;
		peakRad = 2;
		bigRad = 5;
		slowtime = 1000;
	    fasttime = 250;
		
		pad = {
	      left: 60,
	      top: 40,
	      right: 40,
	      bottom: 40,
	      inner: 10
	    };
		
		left = [60,650, 60, 650];
		right = [560,1100, 560, 1099];
		top = [41,41,570, 300];
		bottom = [540,241,670, 470];
		h = [499,200,100,200];
		w = [500,450,500,449];
		
		//NUMBER FORMATING////////////////// 
	    nodig = d3.format(".0f");
	    onedig = d3.format(".1f");
	    twodig = d3.format(".2f");
		//END///////////////////////////////
		
		//SET DEFAULT COLOR/////////////////
	    lightGray = d3.rgb(230, 230, 230);
	    darkGray = d3.rgb(200, 200, 200);
	    darkblue = "darkslateblue";
	    darkgreen = "darkslateblue";
	    pink = "hotpink";
	    altpink = "#E9CFEC";
	    purple = "#8C4374";
	    darkred = "crimson";
	    labelcolor = "black";
	    titlecolor = "blue";
	    maincolor = "darkblue";
		//END///////////////////////////////
		
		svg = d3.select("div#cistrans").append("svg").attr("width", totalw).attr("height", totalh);
		for (j in left){
		    if (j == 3) {
		        svg.append("rect").
		        attr("x", left[j]).
		        attr("y", top[j]).
		        attr("rx",20).
		        attr("ry",20).
		        attr("height", h[j]).
		        attr("width", w[j]).
		        attr("class", "innerBox").
		        style("stroke","#73AD21").
		        style("stroke-width",2);
		    } else {
			    svg.append("rect").attr("x", left[j]).attr("y", top[j]).attr("height", h[j]).attr("width", w[j]).attr("class", "innerBox");
			}
		}

		//#######################end 1###################################################
		
		//###########################2.define chessboard layout##########################
		
		checkerboard = svg.append("g").attr("id", "checkerboard");// define left plot as checkerboard
		checkerboard2 = svg.append("g").attr("id", "checkerboard2"); // define right plot as checkerboard2
		markerhist = svg.append("g").attr("id", "markerhist"); // define information box
		experimentinfo = svg.append("g").attr("id", "experimentinfo"); // define experiment information box

		//##########  Calculate total chromosome length (in bp) SUM	#########
	    totalChrLength = 0;
	    _ref = data.chrnames; //{"chr" : {"1": {"start": 3631,"end": 30425192}...}
	    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
	      c = _ref[_i];
		  //chromosome length in cM
	      data.chr[c].length_bp = data.chr[c].end - data.chr[c].start;
	      totalChrLength += data.chr[c].length_bp;
	    }
		//#################################end###############################
		
		//################################Upper left plot chess board box property############################
		
		chrXScale = {};
	    chrYScale = {};
	    curXPixel = left[0] + peakRad; // curXPixel = 62;   left[0]=60, peakRad = 2;
	    curYPixel = bottom[0] - peakRad; // curYPixel = 542;   bottom[0]=540 peakRad = 2;
	    _ref1 = data.chrnames;
	    for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
	      c = _ref1[_j]; //c = chrname;
		  //define the width of chr will be presented in the whole chrmosome (x-axis).
	      data.chr[c].length_pixel = Math.round((w[0] - peakRad * 2) * data.chr[c].length_bp / totalChrLength); // 	data.chr[c].length_pixel = (500-2*2)* data.chr.total_length_bp/totalChrLength
	      data.chr[c].start_Xpixel = curXPixel; //62
	      data.chr[c].end_Xpixel = curXPixel + data.chr[c].length_pixel - 1; //61+ chr_width
	      data.chr[c].start_Ypixel = curYPixel; //542
	      data.chr[c].end_Ypixel = curYPixel - (data.chr[c].length_pixel - 1); //543-chr_width
		  //map from an input domain to an output range.
	      chrXScale[c] = d3.scale.linear().domain([data.chr[c].start, data.chr[c].end]).range([data.chr[c].start_Xpixel, data.chr[c].end_Xpixel]).clamp(true); //clamp(): enable or disable clamping of the output range
	      chrYScale[c] = d3.scale.linear().domain([data.chr[c].start, data.chr[c].end]).range([data.chr[c].start_Ypixel, data.chr[c].end_Ypixel]).clamp(true);
	      curXPixel += data.chr[c].length_pixel; // move the cursor to the next chr from left to right.
	      curYPixel -= data.chr[c].length_pixel; // move to cursor to the next chr from up to down
	    }
		//############compensatation#################
		data.chr["1"].start_Xpixel = left[0]; //60
	    data.chr["1"].start_Ypixel = bottom[0]; //540
	    data.chr["mt"].end_Xpixel = right[0]; //560
	    data.chr["mt"].end_Ypixel = top[0]; // 41
	    //#####################################end#######################################


		
		//###################draw chess board layout for upper left plot#################
		_ref2 = data.chrnames;
	    for (i = _n = 0, _len2 = _ref2.length; _n < _len2; i = ++_n) {
	      ci = _ref2[i];
	      _ref3 = data.chrnames; //chrnames_list
	      for (j = _o = 0, _len3 = _ref3.length; _o < _len3; j = ++_o) {
		cj = _ref3[j];
		if ((i + j) % 2 === 0) { // if i+j is even number
			  //draw chess board with dark gray color
		  checkerboard.append("rect").attr("x", data.chr[ci].start_Xpixel).attr("width", data.chr[ci].end_Xpixel - data.chr[ci].start_Xpixel).attr("y", data.chr[cj].end_Ypixel).attr("height", data.chr[cj].start_Ypixel - data.chr[cj].end_Ypixel).attr("stroke", "none").attr("fill", darkGray).style("pointer-events", "none");
		}
	      }
	    }
		//###################################end#########################################
	   
		//################################lower plot chess board box property############################
		chrLowXScale = {};  
		cur = Math.round(left[1] + chrGap / 2); // (60+8/2)
		_ref4 = data.chrnames;
	    for (_k = 0, _len4 = _ref4.length; _k < _len4; _k++) {
	      c = _ref4[_k];
	      data.chr[c].start_lowerXpixel = cur; // 64
		  // 64 + round(900-8*nr_chr/total_chr_length*chr_cM)
	      data.chr[c].end_lowerXpixel = cur + Math.round((w[1] - chrGap * data.chrnames.length) / totalChrLength * data.chr[c].length_bp);
	      chrLowXScale[c] = d3.scale.linear().domain([data.chr[c].start, data.chr[c].end]).range([data.chr[c].start_lowerXpixel, data.chr[c].end_lowerXpixel]);
	      cur = data.chr[c].end_lowerXpixel + chrGap; // each loop cursor move to the end position +2
	    }
	    //#####################################end#######################################
		
		//###################draw chess board layout for lower plot#################
		_ref5 = data.chrnames;
	    for (i = _p = 0, _len5 = _ref5.length; _p < _len5; i = ++_p) {
	      ci = _ref5[i];
	      if (i % 2 === 0) {
		checkerboard2.append("rect").
                  attr("x", data.chr[ci].start_lowerXpixel - chrGap / 2).
                  attr("width", data.chr[ci].end_lowerXpixel - data.chr[ci].start_lowerXpixel + chrGap).
                  attr("y", top[1]).
                  attr("height", h[1]).
                  attr("stroke", "none").
                  attr("fill", darkGray).style("pointer-events", "none");
	      }
	    }
		//###################################end#########################################
		
		//#########################draw axis of upper left and lower plot###########################
		
		//################################### X axis #######################################

	    axislabels = svg.append("g").attr("id", "axislabels").style("pointer-events", "none");
		//################# x axis text of upper left plot################
	    axislabels.append("g").attr("id", "topleftX").selectAll("empty").data(data.chrnames).enter().append("text").text(function(d) {
	      return d;
	    }).attr("x", function(d) {
	      return (data.chr[d].start_Xpixel + data.chr[d].end_Xpixel) / 2;
	    }).attr("y", bottom[0] + pad.bottom * 0.3).attr("fill", labelcolor);
		
		//################################### END #######################################
		
		//################################### Y axis #######################################
		
		//################# y axis text of upper left plot################
	    axislabels.append("g").attr("id", "topleftY").selectAll("empty").data(data.chrnames).enter().append("text").text(function(d) {
	      return d;
	    }).attr("x", left[0] - pad.left * 0.15).attr("y", function(d) {
	      return (data.chr[d].start_Ypixel + data.chr[d].end_Ypixel) / 2;
	    }).style("text-anchor", "end").attr("fill", labelcolor);
	    //################# x axis text of lower plot################
		axislabels.append("g").attr("id", "bottomX").selectAll("empty").data(data.chrnames).enter().append("text").text(function(d) {
	      return d;
	    }).attr("x", function(d) {
	      return (data.chr[d].start_lowerXpixel + data.chr[d].end_lowerXpixel) / 2;
	    }).attr("y", bottom[1] + pad.bottom * 0.3).attr("fill", labelcolor);
		
		//################################### END #######################################
		axislabels.append("text").text("Cis-trans plot")
		.attr("x", (left[0] + right[0]) / 2)
		.attr("y", top[1] - pad.bottom * 0.75)
		.attr("fill", titlecolor)
		.attr("text-anchor", "middle")
		.attr("font-weight","bold");

        axislabels.append("text").text("click on a dot to see the corresponding eQTL pattern")
        .attr("x", (left[0] + right[0]) / 2).attr("y", top[1] - pad.bottom * 0.25)
        .attr("fill", titlecolor)
        .attr("text-anchor", "middle")
        .attr("font-style", "italic");

		//################################### X axis label text #######################################
		//############################### add x-axis name upper left ##################################
		axislabels.append("text").text("Marker position").attr("x", (left[0] + right[0]) / 2).attr("y", bottom[2] + pad.bottom * 0.75).attr("fill", titlecolor).attr("text-anchor", "middle");
		//############################### add x-axis name lower #######################################
	    axislabels.append("text").text("Marker position").attr("x", (left[1] + right[1]) / 2).attr("y", bottom[1] + pad.bottom * 0.75).attr("fill", titlecolor).attr("text-anchor", "middle");
		
		//################################### Y axis label text #######################################
		//############################### add Y-axis name upper left ##################################
	    xloc = left[0] - pad.left * 0.65; // xloc and yloc together locate the title lable in the middle of y axis.
	    yloc = (top[0] + bottom[0]) / 2;
	    axislabels.append("text").text("Gene position (bp)").attr("x", xloc).attr("y", yloc).attr("transform", "rotate(270," + xloc + "," + yloc + ")").style("text-anchor", "middle").attr("fill", titlecolor);
		//############################### add Y-axis name lower #######################################
	    xloc = left[1] - pad.left * 0.65;
	    yloc = (top[1] + bottom[1]) / 2;
	    axislabels.append("text").text("LOD score").attr("x", xloc).attr("y", yloc).attr("transform", "rotate(270," + xloc + "," + yloc + ")").style("text-anchor", "middle").attr("fill", titlecolor);
		//################################### END #######################################
		
		//sort the peaks by peaks.lod in the ascending order
		//selection.sort(comparator)
		//The comparator function is passed two data elements a and b to compare. If negative, then a should be before b; if positive, then a should be after b; otherwise, a and b are considered equal and the order is arbitrary. 
	    data.peaks = data.peaks.sort(function(a, b) {
	      if (a.lod < b.lod) {
		return -1;
	      } else {
		return +1;
	      }
	    });
		
		//###opacity###
	    Zscale = d3.scale.linear().domain([-100, 100]).range([0, 1]);
		
		//Marker-Probe (eQTL) tooltip/////////
	    eqtltip = d3.tip().attr("class", "d3-tip")
         	.offset([-10, 0])
         	.html(function(z) {return "Gene: " + z.transcript +"<br>Marker: "+ z.marker + "<br>LOD: " + (onedig(z.lod));});
		//end/////////////////////////////////
		
		//MarkerCount tooltip/////////
	    markercounttip = d3.tip().attr("class", "d3-tip")
         	.offset([-10, 0])
         	.html(function(z) { return " Marker: "+ z + "<br>Peaks: " + markerSums[z]; });
		//end/////////////////////////////////
		
		//marker tooltip//////////////////////
	    martip = d3.tip().attr("class", "d3-tip")
         	.offset([-10, 0])
         	.html(function(d) {return "Marker: " + d[0] + "<br>LOD score: " + onedig(d[1]);})
		//end/////////////////////////////////
		
		cur = 0;
	    _ref8 = data.chrnames;
	    for (_q = 0, _len8 = _ref8.length; _q < _len8; _q++) {
	      c = _ref8[_q];
	      _ref9 = data.pmarknames[c];
	      for (_r = 0, _len9 = _ref9.length; _r < _len9; _r++) {
		p = _ref9[_r];
		data.pmark[p].index = cur;
		cur++
	      }
	    }
		
		//######################draw dot plot#########################
		draw_plot = function(probe_data) {
		  
	      var chr, curves, ensembl, lastMarker, lod, lodcurve, lodcurve_yScale, markerClick, minlod,minlod_marker,maxlod_marker, meanmarks, mgi, pos, probeaxes, ticks, title, titletxt, xlink, yaxis, _len10, _len11, _len12, _ref10, _ref11, _ref12,_ref13, _s, _t, _u;
		svg.selectAll(".probe_data").remove();
		  maxlod = -1;

	      maxlod_marker = null;
	      _ref10 = data.markers;
	      for (_s = 0, _len10 = _ref10.length; _s < _len10; _s++) {
		m = _ref10[_s];
		lod = probe_data.lod[data.pmark[m].index];
		if (maxlod < lod) {
		  maxlod = lod;
		  maxlod_marker = m;
		}
	      }
		  //############################map y axis range to the width of the lower plot#############################
		  
	      lodcurve_yScale = d3.scale.linear().domain([0, maxlod * 1.05]).range([bottom[1], top[1]]);//540,620
		  //add a container to group objects, in this case add y axis of lower plot
	      yaxis = svg.append("g").attr("class", "probe_data").attr("id", "loweryaxis");
		  ticks = lodcurve_yScale.ticks(6);
	      yaxis.selectAll("empty").data(ticks).enter().append("line").attr("y1", function(d) {
		return lodcurve_yScale(d);
	      }).attr("y2", function(d) {
		return lodcurve_yScale(d);
	      }).attr("x1", left[1]).attr("x2", right[1]).attr("stroke", "white").attr("stroke-width", "1");
	      yaxis.selectAll("empty").data(ticks).enter().append("text").text(function(d) {
		if (maxlod > 10) { // for the sacle of y axis of lower plot
		  return nodig(d);
		} else {
		  return onedig(d); // if maxlod<10: rescale y axis with one digit numbers
		}
	      }).attr("y", function(d) {
		return lodcurve_yScale(d);
	      }).attr("x", left[1] - pad.left * 0.1).style("text-anchor", "end").attr("fill", labelcolor);

	      lodcurve = function(c) {
		return d3.svg.line().x(function(p) {
		  return chrLowXScale[c](data.pmark[p].start);
		}).y(function(p) {
		  return lodcurve_yScale(probe_data.lod[data.pmark[p].index]); 							
		});
	      };
	      
		  //#######################################end#################################################
		  
		  
		  
		  curves = svg.append("g").attr("id", "curves").attr("class", "probe_data");
	      _ref11 = data.chrnames;
	      for (_t = 0, _len11 = _ref11.length; _t < _len11; _t++) {
		c = _ref11[_t];
		curves.append("path").datum(data.pmarknames[c]).attr("d", lodcurve(c)).attr("class", "thickline").attr("stroke", darkblue).style("pointer-events", "none").attr("fill", "none");
	      }
	      titletxt = probe_data.probe.toUpperCase();
	      
	      probeaxes = svg.append("g").attr("id", "probe_data_axes").attr("class", "probe_data");
	      trans = data.spot[probe_data.probe.toUpperCase()].transcript;
	      var link_pre;
	      link_pre = "/AraQTL/multiplot/?query=";
	      var hyper_link = link_pre+ trans;
	      if (trans !== null) {
		titletxt += " (" + trans + ")";
		//open window in a new tab <a href="#" target="_blank">Link</a>
		xlink = probeaxes.append("a").attr("target","_blank").attr("xlink:href", hyper_link);
		xlink.append("text").text(titletxt).attr("x", (left[1] + right[1]) / 2).attr("y", top[1] - pad.top / 2).attr("fill", maincolor).style("font-size", "18px");
	      } else {
		probeaxes.append("text").text(titletxt).attr("x", (left[1] + right[1]) / 2).attr("y", top[1] - pad.top / 2).attr("fill", maincolor).style("font-size", "18px");
	      }
	      svg.append("rect").
		attr("class", "probe_data").
		attr("x", left[1]).
		attr("y", top[1]).
		attr("height", h[1]).
		attr("width", w[1]).
		attr("class", "outerBox");
	      svg.append("circle").
		attr("class", "probe_data").
		attr("id", "probe_circle").
		attr("cx", chrLowXScale[data.spot[probe_data.probe.toUpperCase()].chr](data.spot[probe_data.probe.toUpperCase()].start)).
		attr("cy", top[1]).
		attr("r", bigRad).
		attr("fill", pink).
		attr("stroke", darkblue).
		attr("stroke-width", 1).
		attr("opacity", 1);
	  
		  //############# Calculate the number of markers and save to markerClick with default value of 0 ###################
		  markerClick = {};
		  
	      _ref12 = data.markers;
	      for (_u = 0, _len12 = _ref12.length; _u < _len12; _u++) {
		m = _ref12[_u];
		markerClick[m] = 0;
	      }
		  //########################## end ############################
		  
	      lastMarker = "";

	    svg.call(martip);
	    svg.append("g").
		attr("id", "markerCircle").
		attr("class", "probe_data").
		selectAll("empty").
		data(data.markers).enter().
		append("circle").
		attr("class", "probe_data").
		attr("id", function(td) {
		return "marker_" + td;
	      }).attr("cx", function(td) {
		return chrLowXScale[data.pmark[td].chr](data.pmark[td].start);
	      }).attr("cy", function(td) {
			
		return lodcurve_yScale(probe_data.lod[data.pmark[td].index]);
	      }).attr("r", bigRad).attr("fill", purple).attr("stroke", "none").attr("stroke-width", "2").attr("opacity", 0).on("mouseover", function(td) {
		if (!markerClick[td]) {
		  d3.select(this).attr("opacity", 1);
		}
		return martip.show([td, probe_data.lod[data.pmark[td].index]]);
	      }).on("mouseout", function(td) {
		d3.select(this).attr("opacity", markerClick[td]);
		return martip.hide();
	      });
			//end draw lower plot
		};
		  //############################## upper left dot eQTL plot ##############################
		  chrindex = {};
	      _ref10 = data.chrnames;
	      for (i = _s = 0, _len10 = _ref10.length; _s < _len10; i = ++_s) {
		c = _ref10[i];
		chrindex[c] = i;
	      }
		
 	      _ref11 = data.peaks;
              for (_s = 0, _len11 = _ref11.length; _s < _len11; _s++) {
                m = _ref11[_s];
		if (!(m.marker in markerSums)) {
			markerSums[m.marker] = 0;
		}
		markerSums[m.marker]++;
              }

 	      _ref11 = data.markers;
              for (_s = 0, _len11 = _ref11.length; _s < _len11; _s++) {
                m = _ref11[_s];
		if (markerSums[m] > maxMarkerSum) {
			maxMarkerSum = markerSums[m];
		}
	      }

        // #### marker count histogram below the cistrans plot ####
        histylabels = svg.append("g").attr("id", "histylabels").style("pointer-events", "none");
        histylabels.append("text").text(maxMarkerSum).attr("x", left[2])
            .attr("y", top[2])
            .style("text-anchor", "end")
            .attr("fill", labelcolor);

        histylabels.append("text").text("0").attr("x", left[2])
            .attr("y", bottom[2])
            .style("text-anchor", "end")
            .attr("fill", labelcolor);

        xloc = left[2] - pad.left * 0.65;
        yloc = (top[2] + bottom[2]) / 2;
	    histylabels.append("text").text("#eQTLs").attr("x", xloc).attr("y", yloc).attr("transform", "rotate(270," + xloc + "," + yloc + ")").style("text-anchor", "middle").attr("fill", titlecolor);


		svg.call(markercounttip);
	      markers = svg.append("g").attr("id", "peaks").selectAll("empty").data(data.markers).enter().append("line").attr("class", function(d) {
		return "marker_" + d;
	      }).attr("x1", function(d) {
                    return chrXScale[data.pmark[d].chr](data.pmark[d].start);
	      }).attr("x2", function(d) {
                    return chrXScale[data.pmark[d].chr](data.pmark[d].start);
              }).attr("y1", function(d) {
		if (d in markerSums) {
			return 665 - 90 * (markerSums[d]/maxMarkerSum);
		} else {
			return 665;
		}
              }).attr("y2", function(d) {
                return 665;
              }).attr("stroke-width", 3)
		.attr("stroke", darkblue).on("mouseover", function(d) {
			return markercounttip.show(d);
		}).on("mouseout", function(d) {
			return markercounttip.hide();
		}).on("click", function(d) {
			location.href="/AraQTL/coregulation/?experiment_name={{ experiment_name }}&query="+d+"&thld={{ lodthld }}";
		});

        experimentinfo = svg.append("g").attr("id", "experimentinfo").style("pointer-events", "none");

        iLine = 1
        experimentinfo.append("text").text("Experiment: {{ current_experiment.experiment_name }}").attr("x", left[3]+10)
            .attr("y", top[3] + 10 + 30*iLine)
            .style("text-anchor", "start")
            .attr("fill", titlecolor);
        iLine++;

        experimentinfo.append("text").text("Cross: {{ current_experiment.parental_strain }}").attr("x", left[3]+10)
            .attr("y", top[3] + 10 + 30*iLine)
            .style("text-anchor", "start")
            .attr("fill", titlecolor);
        iLine++;

        experimentinfo.append("text").text("Plant parts: {{ current_experiment.plant_parts }}").attr("x", left[3]+10)
            .attr("y", top[3] + 10 + 30*iLine)
            .style("text-anchor", "start")
            .attr("fill", titlecolor);
        iLine++;

        experimentinfo.append("text").text("Publication: {{ current_experiment.reference }}").attr("x", left[3]+10)
            .attr("y", top[3] + 10 + 30*iLine)
            .style("text-anchor", "start")
            .attr("fill", titlecolor);
        iLine++;

        experimentinfo.append("text").text("LOD score threshold: {{ current_experiment.lodthld }}").attr("x", left[3]+10)
            .attr("y", top[3] + 10 + 30*iLine)
            .style("text-anchor", "start")
            .attr("fill", titlecolor);
        iLine++;

		svg.call(eqtltip);
	      peaks = svg.append("g").attr("id", "peaks").selectAll("empty").data(data.peaks).enter().append("circle").attr("class", function(d) {
		return "probe_" + d.spot; //d--->data(data.peaks) iteration of all object in peaks.
	      }).attr("cx", function(d) {
		    return chrXScale[data.pmark[d.marker].chr](data.pmark[d.marker].start);
	      }).attr("cy", function(d) {
		return chrYScale[data.spot[d.spot].chr](data.spot[d.spot].start);
	      }).attr("r", peakRad).attr("stroke", "none").attr("fill", function(d) {  
		  if (d.lod > 0) {
		      return darkblue;
		    } else {
		      return darkred;
		    } 
	      }).attr("opacity", function(d) {
		return Zscale(d.lod);
	      }).on("mouseover", function(d) {
		d3.selectAll("circle.probe_" + d.spot).attr("r", bigRad).attr("fill", pink).attr("stroke", darkblue).attr("stroke-width", 1).attr("opacity", 1);
        return eqtltip.show(d);
      }).on("mouseout", function(d) {
        d3.selectAll("circle.probe_" + d.spot).attr("r", peakRad).attr("fill", function(d) {
        	if (d.lod > 0) {
                return darkblue;
              } else {
                return darkred;
              } 
        }).attr("stroke", "none").attr("opacity", function(d) {
          return Zscale(d.lod);
        });
        return eqtltip.hide();
      }).on("click", function(d) {
          d3.json("../media/data/{{ experiment_name }}/probe/" + d.spot + ".json", draw_plot);
           
        });
    };
    var thld_ ='';
    {% if thld %} thld_ = '{{ thld }}';
    {% endif %}
    d3.json("../media/data/{{ experiment_name }}/lod"+thld_+".json", draw);
}).call(this);
  

</script>
{% endif %}
<script>
       $('select#experiment_selector').change(function() {
            loadingDIV = document.createElement('div');
            loadingDIV.id = "loading";
            document.body.appendChild(loadingDIV);
            $('form#top_form').submit();
       });


        $('input#thld').keypress(function(e) {
            if(e.which == 13) {
                loadingDIV = document.createElement('div');
                loadingDIV.id = "loading";
                document.body.appendChild(loadingDIV);
                $('form#top_form').submit();
            }
        });
        selectedProbe = "";
        attrR = 0
        attrFill = "";
        attrStroke = "";
        attrStroke_width = 0;
        attrOpacity = 0;

        $('input#query').keyup(function(e) {
            spot = $('input#query').val().toUpperCase().trim();
            probe = "circle.probe_" + spot;
            if (selectedProbe.length > 0) {
                d3.selectAll(selectedProbe).attr("r", attrR).attr("fill", attrFill).attr("stroke", attrStroke).attr("stroke-width", attrStroke_width).attr("opacity", attrOpacity);
                selectedProbe = "";
            }

            if(!d3.select(probe).empty()) {
                $('input#query').css("color","#000");
                selectedProbe = probe;
                d3Probe = d3.selectAll(probe);
                attrR = d3Probe.attr("r");
                attrFill = d3Probe.attr("fill");
                attrStroke = d3Probe.attr("stroke");
                attrStroke_width = d3Probe.attr("stroke-width");
                attrOpacity = d3Probe.attr("opacity");
                d3Probe.attr("r", 5).attr("fill", "hotpink").attr("stroke", "darkslateblue").attr("stroke-width", 1).attr("opacity", 1);
                d3.json("../media/data/{{ experiment_name }}/probe/" + spot + ".json", draw_plot);
            } else {
                $('input#query').css("color","#F00");
            }

        });
        $(document).ready(function(e) {
            $("a.explainlink").click(function(e) {
            e.preventDefault();
                var ab = $(this).attr("href");
                if($(ab).is(':visible')) {
                    $(ab).hide();
                } else {
                    $(ab).show();
                }
            });
        });
</script>
{% endblock %}