{% extends 'layout.html' %}
{% block body %}
{% include 'header.html' %}
<div class="container-fluid">
    <div class="row">
        {% include 'navigation.html' %}
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
            {% include 'header_section.html' %}
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="btn mb-2 mb-md-0">
                            <form action="{{ url_for('genotype.genotype_plate') }}" method="POST">
                                <select name="plate_id" class="form-control form-control-sm"
                                    placeholder=".form-control-sm" required onchange="this.form.submit()">
                                    {% for plate in plates %}
                                    <option value={{plate}} {{ 'selected' if plate == plate_id }}> Plate: {{plate}}
                                    </option>
                                    {% endfor %}
                                </select>
                            </form>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div id="plate" style="min-height: 500px; height: {{(y_labels|length)*21}}px; min-width: 400px; max-width: 1000px; margin: 0 auto">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>


<script>
    var data=[]
    {% for x, y, value, name in plate_data %}
    data.push({ 'x': {{x}}, 'y': {{y}}, 'value': {{ value}}, 'name': {{name|tojson}} })
    {% endfor %}

    Highcharts.chart('plate', {
        chart: { type: 'heatmap' },
        title: { text: 'Plate: {{plate_id}}' },
        subtitle: {text: 'Genotypes obtained from external SNP analysis, are compared with the sequence data generated at SciLifeLab. A red square in the heat map means the external and internal analyses mismatch, which could indicate a sample mixup or a failed assay. The 52 SNPs are selected to give a unique profile for identification of samples. Read more about the genotype workflow in AM document 1477.'},
        xAxis: {
            categories: {{ x_labels| tojson}},
            title: { text: 'snps' },
            labels: {rotation: 90}},
        yAxis: {
            categories: {{ y_labels| tojson}},
            title: { text: 'Samples' }},
        
        colorAxis: {
                min: 0,
                max: 1,
                minColor: '#E74C3C',
                maxColor: '#2ECC71'
                },
        legend: {enabled: false},
        tooltip: {
                formatter: function () {return 'Sample  <b>' + this.series.yAxis.categories[this.point.y] + '</b> <br> snp: <b>' + this.series.xAxis.categories[this.point.x] + '</b> <br> Comparison ext vs int: <b>' + this.point.name + '</b>';}
                },

        series: [{
            turboThreshold: 100000,
            name: '',
            data:data,
    
    }],


});
</script>
{% endblock %}