{% extends "base_analyze.html" %}
{% set active_page = 'cluster' %}

{% block head %}
<script type="text/javascript" src="{{ url_for('static', filename='js/scripts_dendrogram.js') }}?ver={{version}}"></script>
<script type="text/javascript">
	var pdfPageNumber = {{ pdfPageNumber|default(0) }}

	var inconsistentMax = {{ inconsistentMax|default(0)}};
	var maxclustMax = {{ maxclustMax|default(0) }};
	var distanceMax = {{ distanceMax|default(0) }};
	var distanceMin = {{ distanceMin|default(0) }};
	var monocritMax = {{ monocritMax|default(0) }};
	var monocritMin = {{ monocritMin|default(0) }};
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
{% endblock %}

{% block title %}analyzer{% endblock %}


{% block options %}
<input type="hidden" id="num_active_files" value="{{ labels|len }}" />

<fieldset>
	<legend>Dendrogram Options</legend>
	<div class="dendrogram-options cf" id="dendrocreateoptions">

		<label for="metric">Distance Metric:
			<select name="metric" id="metric">
				<option value="euclidean" {{ 'selected' if session['hierarchyoption']['metric'] == 'euclidean' }}>Euclidean</option>
				<option value="minkowski" {{ 'selected' if session['hierarchyoption']['metric'] == 'minkowski' }}>Minkowski</option>
				<option value="cityblock" {{ 'selected' if session['hierarchyoption']['metric'] == 'cityblock' }}>Manhattan</option>
				<option value="seuclidean" {{ 'selected' if session['hierarchyoption']['metric'] == 'seuclidean' }}>Standardized Euclidean</option>
				<option value="sqeuclidean" {{ 'selected' if session['hierarchyoption']['metric'] == 'sqeuclidean' }}>Squared Euclidean</option>
				<option value="cosine" {{ 'selected' if session['hierarchyoption']['metric'] == 'cosine' }}>Cosine</option>
				<option value="correlation" {{ 'selected' if session['hierarchyoption']['metric'] == 'correlation' }}>Correlation</option>
				<option value="hamming" {{ 'selected' if session['hierarchyoption']['metric'] == 'hamming' }}>Hamming</option>
				<option value="chebyshev" {{ 'selected' if session['hierarchyoption']['metric'] == 'chebyshev' }}>Chebyshev</option>
				<option value="jaccard" {{ 'selected' if session['hierarchyoption']['metric'] == 'jaccard' }}>Jaccard</option>
				<option value="canberra" {{ 'selected' if session['hierarchyoption']['metric'] == 'canberra' }}>Canberra</option>
				<option value="braycurtis" {{ 'selected' if session['hierarchyoption']['metric'] == 'braycurtis' }}>Braycurtis</option>
			</select>
		</label>

		<label for="linkage">Linkage Method:
			<select name="linkage" id="linkage">
				<option value="average" {{ 'selected' if session['hierarchyoption']['linkage'] == 'average' }}>Average</option>
				<option value="single" {{ 'selected' if session['hierarchyoption']['linkage'] == 'single' }}>Single</option>
				<option value="complete" {{ 'selected' if session['hierarchyoption']['linkage'] == 'complete' }}>Complete</option>
				<!--<option value="ward" {{ 'selected' if session['hierarchyoption']['linkage'] == 'ward' }}>Ward</option>-->
				<option value="weighted" {{ 'selected' if session['hierarchyoption']['linkage'] == 'weighted' }}>Weighted</option>
			</select>
		</label>
		
		<label for="title">Dendrogram Title:
			<input type="text" name="title" id="title" value="{{ session['hierarchyoption']['title'] }}" />
		</label>

		<label for="orientation">Dendrogram Orientation:
			<select name="orientation" id="orientation">
				<option value="top" {{ 'selected' if session['hierarchyoption']['orientation'] == 'top' }}>Vertical</option>
				<option value="left" {{ 'selected' if session['hierarchyoption']['orientation'] == 'left' }}>Horizontal</option>
			</select>
		</label>
		
		<label for="pruning">Number of Leaves:
			<input type="text" name="pruning" id="pruning" placeholder="Default is # of chunks" value="{{ session['hierarchyoption']['pruning'] }}" />
		</label>

		<label> Show Branch Height in Dendrogram
			<i class="fa fa-question-circle hasTooltip" style="margin-right:8px;cursor:pointer;color:#A8A8A8;font-size: 14px;"></i><span class="hidden">Turn it off to hide the branch height in dendrogram.</span>
			<input type="checkbox" name="augmented" {{ 'checked' if session['hierarchyoption']['augmented'] }}/>
		</label>

		<label style="margin-top:-15px"> Show Legends in Dendrogram
			<input type="checkbox" name="dendroLegends" {{ 'checked' if session['hierarchyoption']['dendroLegends'] }} />
		</label>

	</div>
</fieldset>

<fieldset>
	<legend class="has-expansion">Silhouette Score Options <span class="icon-arrow-right {{ 'showing' if session['hierarchyoption']['criterion'] != 'maxclust' or session['hierarchyoption']['threshold'] != ''}}"></span></legend>
	
	<div class="silhouette-options expansion" id="silhouetteOptions" style="display: {{ 'block' if session['hierarchyoption']['criterion'] != 'maxclust' or session['hierarchyoption']['threshold'] != ''}}">

		<label for="criterion">Criterion:
			<select name="criterion" id="criterion">
				<option value="maxclust" {{ 'selected' if session['hierarchyoption']['criterion'] == 'maxclust' }}>Maxclust</option>
				<option value="inconsistent" {{ 'selected' if session['hierarchyoption']['criterion'] == 'inconsistent' }}>Inconsistent</option>
				<option value="distance" {{ 'selected' if session['hierarchyoption']['criterion'] == 'distance' }}>Distance</option>	
				<option value="monocrit" {{ 'selected' if session['hierarchyoption']['criterion'] == 'monocrit' }}>Monocrit</option>
			</select>
		</label>
		
		<label for="threshold">Threshold (t):
			<input type="number" name="threshold" placeholder="{{thresholdOps[session['hierarchyoption']['criterion']]}}" id="threshold" value="{{ session['hierarchyoption']['threshold'] }}" step="any" />
		</label>
		<br>
	</div>
</fieldset>

    <div style="margin:20px auto;">
<input class="bttn bttn-action" id="getdendro" name="getdendro" type="submit" value="Get Dendrogram"/><br><br>
{% if session['dengenerated'] %}
    <abbr id="download"> Download: </abbr>
    <input id="dendrodownload" class="bttn bttn-exit bttndownload"  type="submit" name="dendroPDF_download" value="PDF" style="margin-left:5px;display:none;"/>
    <input id="dendroPNGdownload" class="bttn bttn-exit bttndownload" type="submit" name="dendroPNG_download" value="PNG" style="margin-left:5px;display:none;"/>
    <input id="dendroSVGdownload" class="bttn bttn-exit bttndownload" type="submit" name="dendroSVG_download" value="SVG" style="margin-left:5px;"/>
    <input id="dendroNewickdownload" class="bttn bttn-exit bttndownload" type="submit" name="dendroNewick_download" value="Newick" style="margin-left:5px;"/>

    <!--<div class="btn-group dropup" style="display:inline-block;margin-left:10px;">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Download <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#" id="download-pdf" class="download">PDF</a></li>
    <li><a href="#" id="download-png" class="download">PNG</a></li>
    <li><a href="#" id="download-svg" class="download">SVG</a></li>
    <li><a href="#" id="download-newick" class="download">Newick</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#" id="get-info" onclick="alert('This content needs to be added to ITM');">About these formats</a></li>
  </ul>
</div>-->

{% endif %}
</div>

{% endblock %}


{% block results %}
<script>
$(document).ready( function () {
	$('#getdendro').click(function() {
		{% if (labels|len) != 0 %}
			$("#status-analyze").css({"visibility":"visible", "z-index": "400000"});	
		{% endif %}
	});
});
</script>
    <!-- For the template file -->

{% if session['dengenerated'] %}
    <div class="silhouettescoreresults">
	    <legend>Silhouette Score:&nbsp;&nbsp;{{score}}&nbsp;&nbsp;&nbsp;(Criterion:&nbsp;&nbsp;{{session['hierarchyoption']['criterion']}}&nbsp;&nbsp;|&nbsp;&nbsp;Threshold:&nbsp;&nbsp;{{threshold}})</legend>
	    <p>A silhouette score is a measure of fit for your clusters. It gives a general indication of how well individual objects lie within their cluster. A score of 1 indicates tight, distinct clusters. Values near 0 indicate overlapping clusters. Negative values generally indicate that a sample has been assigned to the wrong cluster, as a different cluster is more similar.</p>
    </div>
    <div class="dendroImage">
        <img src={{url_for('dendrogramimage')}}?{{ range(10000)|random }} class="dendroPNG" id='pdf' style="border: 0px solid black;">
    </div>
{% endif %}



{% endblock %}



{% block submit %}

<input class="bttn bttn-action" id="getdendro" name="getdendro" type="submit" value="Get Dendrogram"/>
<input class="bttn bttn-action" type="submit" id="getete" name="getete" value="Generate Newick" />
{% if session['dengenerated'] %}
<input id="dendrodownload" class="bttn bttn-exit bttndownload" style="margin-left:5px;" type="submit" name="dendroPDF_download" value="Download PDF"/>
<input id="dendroSVGdownload" class="bttn bttn-exit bttndownload" type="submit" name="dendroSVG_download" value="Download SVG"/>
{% endif %}
<span class="submiterrors " id="densubmiterrormessage1">A dendrogram requires at least 2 active documents to be created.</span>
<span class="submiterrors" id="densubmiterrormessage2">Invalid Threshold.</span>
<span class="submiterrors" id="densubmiterrormessage3">Invalid number of leaves.</span>

{% endblock %}