#!/usr/bin/env python2
import os
os.environ[ 'HOME' ] = '/tmp/'

import cgi, cgitb
cgitb.enable()

import pandas as pd
import numpy as np
import cgi, cgitb, urllib, jinja2, json
#--- variation --------------
#SID='LOC_Os01g02860.1'
httpfrom = cgi.FieldStorage()
SID = httpfrom.getvalue('sID')
if SID == None :
	SID='LOC_Os01g02860.1'
variatyurl='http://sinin.kps.ku.ac.th/mutant/Varietyty.py?sID='
df=pd.read_csv('msu_call2018_imp_rename.tsv', sep="\t", header=0)
chk_pheno=[x for x in open('phenonamelist.txt', 'r').read().split('\n')[:-1]]
chk_gene=sorted(df.gene_id.unique().tolist())

vari=''
haplo=''
chro=''
gstert=''
gend=''
gsnpid=''
if SID in chk_gene:
	vari=df[df.gene_id == SID]['varity'].tolist()
	haplo=df[df.gene_id == SID]['haplotype'].tolist()
	chro=df[df.gene_id == SID]['chr'].tolist()[0]
	gstert=df[df.gene_id == SID]['gene_start'].tolist()[0]
	gend=df[df.gene_id == SID]['gene_end'].tolist()[0]
	gsnpid=df[df.gene_id == SID]['snpid'].tolist()[0]


#----------------------------

def name2link(names, urllink, chk_list):
	outpu=names+', '
	#pp='<a href="'+urllink+names+'" target="_blank">'
	if names in chk_list:
		outpu='<a href="'+urllink+names+'" target="_blank">'+names+'</a>, '
	return outpu



#----------------------------
valink=[]
for x in vari:
	x=sorted(set(x.split(',')))
	tmplink=[name2link(x,variatyurl, chk_pheno) for x in x]
	valink.append(tmplink)



tza=zip(haplo,valink)

#--------------------------------------------
print """
		<!DOCTYPE html>
		<html lang="en">
		    <head>
		        <meta charset="utf-8">
		        <title>Haplotype in gene</title>
		        <link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.12.6.min.css" type="text/css" />
		        <script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-0.12.6.min.js"></script>
		        <link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
		        <script type="text/javascript" src="DataTables/datatables.min.js"></script>
		        <link href="css/bootstrap.min.css" rel="stylesheet">
		        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
				<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    			<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
		        <link href="EasyAutocomplete-1.3.5/node_modules/easy-autocomplete//dist/easy-autocomplete.min.css" rel="stylesheet" type="text/css">
				<script src="EasyAutocomplete-1.3.5/node_modules/easy-autocomplete//dist/jquery.easy-autocomplete.min.js" type="text/javascript" ></script>
	  """
print "</head> \n <body> "

set1="""	<script type='text/javascript'>
				  $(document).ready(function() {
				    $('#data_table').DataTable({dom: 'lBfrtip', "scrollX": true, buttons: ['excel','csv',],
				            initComplete: function () {
				            this.api().columns().every( function () {
				                var column = this;
				                var select = $('<select><option value=""></option></select>')
				                    .appendTo( $(column.footer()).empty() )
				                    .on( 'change', function () {
				                        var val = $.fn.dataTable.util.escapeRegex(
				                            $(this).val()
				                        );
				 
				                        column
				                            .search( val ? '^'+val+'$' : '', true, false )
				                            .draw();
				                    } );
				 
				                column.data().unique().sort().each( function ( d, j ) {
				                    select.append( '<option value="'+d+'">'+d+'</option>' )
				                } );
				            } );
				        }
				    });
				} );
	    		</script>
	      """
set2="""
	<table id="data_table" class="display" style="width:100%">
	        <thead>
	            <tr>
	                <th>Haplotype</th>
	                <th>Variaty</th>
	            </tr>
	        </thead>
	        <tbody>
	"""
set3="""
	        </tbody>
	        <tfoot>
	            <tr>
	                <th>Haplotype</th>
	                <th>Variaty</th>
	            </tr>
	      </tfoot>
	</table>
	"""
set4="""<div class="container-fluid" style='background-color: #4e6f7a'>
		<div class="container">
		<img src="http://sinin.kps.ku.ac.th/images/logo-1.png">
		<h1 style='color : #ffffff; font-weight: bold;'>Search for Haplotype Variation by Gene:</h1>
		<font size="3" color="#ffffff"> Input gene ID from MSU annotation (e.g., LOC_Os01g08570.1, LOC_Os02g17460.1) </font>
		</br>
			<form action="haplotype.py" method="get" target="_self" align="center" class="form-inline">
				<div class="form-group">
				<input type="text" name='sID' id="provider-json" class="form-control" value="" placeholder="Input one MSU Gene ID"/>  
				<script type='text/javascript'>
					var options = {
					url: "autofillgeneID.json",
					getValue: "name",

					list: {
						match: {
							enabled: true
							}
						}
					};

					$("#provider-json").easyAutocomplete(options);
				</script>
				</div>
				<input type="submit" class="btn btn-default" value="Submit" /> 
			</form>
		</br>
	</div></div>
"""
set5="""
<!-- menu -->
<div class="container-fluid navbar-nav-scroll" style='background-color: #1c424f'>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light">
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto bd-navbar-nav flex-row" >
                <li class="nav-item active">
                    <a class="nav-link" href="http://sinin.kps.ku.ac.th/mutant/" style="color: #ffffff ; font-weight: bold">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: #ffffff">
                    Search Tools
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <a class="dropdown-item" href="http://sinin.kps.ku.ac.th/mutant/plot_phenotype.py" target="_blank">Phenotype search</a>
                      <a class="dropdown-item" href="http://sinin.kps.ku.ac.th/mutant/variety.py" target="_blank">Variety search</a>
                      <a class="dropdown-item" href="http://sinin.kps.ku.ac.th/mutant/haplotype.py" target="_blank">Haplotype search</a>
                      <a class="dropdown-item" href="http://sinin.kps.ku.ac.th/mutant/genetable.py" target="_blank">Mutiple gene search</a>
                      <!-- <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Something else here</a> -->
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: #ffffff">
                    Genome Browser
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <a class="dropdown-item" href="http://sinin.kps.ku.ac.th/mbrowser/" target="_blank">Mbrowser</a>
                      <a class="dropdown-item" href="http://sinin.kps.ku.ac.th/varmu/tasuke_www/" target="_blank">TASUKE </a>
                    </div>
                </li>
            </ul>
            <div class="dropdown">
                  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Search Tools
                      <span class="caret"></span></button>
                      <ul class="dropdown-menu">
                        <li><a href="http://sinin.kps.ku.ac.th/mutant/plot_phenotype.py" target="_blank">Phenotype search</a></li>
                        <li class="divider">  </li>
                        <li><a href="http://sinin.kps.ku.ac.th/mutant/variety.py" target="_blank">Variety search</a></li>
                        <li class="divider"></li>
                        <li><a href="http://sinin.kps.ku.ac.th/mutant/haplotype.py" target="_blank">Haplotype search</a></li>
                      </ul>
            </div> 
        </div>
        </nav>
    </div>
</div>
<!-- end menu -->
"""
print set4
print set5
print '<div class="container">'
if SID in chk_gene:
	print "<h2 style='color : #1c363f' > Search Results: </h2>"
	print "<h3 style='color : #28747a' > Haplotype in gene " +SID+ "</h3>"
	print "</br>"
	print "<div class='table-responsive'>"
	print "<table class='table'>"
	print             "<tr><td>Gene ID</td><td>"+SID+"</td></tr>"
	print             "<tr><td>Charomosome</td><td>"+str(chro)+"</td></tr>"
	print             "<tr><td>Gene start</td><td>"+str(gstert)+"</td></tr>"
	print             "<tr><td>gene end</td><td>"+str(gend)+"</td></tr>"
	print             "<tr><td>Haplotype</td><td>"+','.join(haplo)+"</td></tr>"
	print             "<tr><td>SNP ID</td><td>"+gsnpid+"</td></tr>"
	print "</table>"
	print "</div>"
	print set1
	print "</br></br>"
	print "<h3 style='color : #28747a' > Table of variaty in haplotype on gene " +SID+ "</h3>"
	print "<div style='width:100%'>"
	print set2
	for x in tza:
		print "<tr><td>"+x[0]+'</td><td style="width:50%">'+''.join(x[1])+"</td></tr> "
	print set3
	print "</div>"
	print "</div>"
else : 
	print "<h1 style='color : #28747a' > No haplotype on gene " +SID+ " in this mutant population.</h1>"

print "</body> \n </html>"
