{% 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-3 mb-md-0">
                            <form action="{{ url_for('mip.dna_picard' , year=year_of_interest) }}" method="POST">
                                <label class="form-text text-muted" for="X_axis">Select X axis metric:</label>
                                <select id="X_axis" name="X_axis" class="form-control form-control-sm"
                                    placeholder=".form-control-sm" required onchange="this.form.submit()">
                                    {% for group in DNA_PICARD %}
                                        <optgroup label="{{group}}" >
                                        {% for metric in DNA_PICARD[group] %}
                                            <option value="{{group}} {{metric}}" {{ 'selected' if metric == X_axis }}>
                                                {{ metric.lower().capitalize().replace('_', ' ')}}
                                            </option>
                                        {% endfor %}
                                    {% endfor %}
                                </select>
                        </div>
                        <div class="btn mb-3 mb-md-0">
                            <label class="form-text text-muted" for="Y_axis">Select Y axis metric:</label>
                            <select id="Y_axis" name="Y_axis" class="form-control form-control-sm"
                                placeholder=".form-control-sm" required onchange="this.form.submit()">
                                {% for group in DNA_PICARD %}
                                        <optgroup label="{{group}}" >
                                        {% for metric in DNA_PICARD[group] %}
                                            <option value="{{group}} {{metric}}" {{ 'selected' if metric == Y_axis }}>
                                                {{ metric.lower().capitalize().replace('_', ' ')}}
                                            </option>
                                        {% endfor %}
                                {% endfor %}
                            </select>
                            </form>
                        </div>
                    </div>
                    <hr>
                    A subset of the picard qc metricses that are being procued by workflows are visualized here. Write a request <a href="https://github.com/Clinical-Genomics/vogue/issues/new/choose">here</a>. if you want to add more data to this plot. <br><br>
                    This plot shows data from: <br>
                    {% for group in groups%}
                        <b>{{group.lower().capitalize().replace('_', ' ')}}</b>:  {{help_urls[group]['text']}}. Definitions of each specific metric can be found <a href="{{help_urls[group]['url']}}">here</a>. <br>
                    {% endfor %}
                    <br><br>
                    
                    <div class="row">
                        <div class="col-lg-12">
                            <div id="picard_plot"></div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    </main>
</div>

<script>
    var data = []
    {% for sample in mip_dna_results.final_data %}
    data.push({ 'x': {{ sample[X_axis]}}, 'y': {{ sample[Y_axis]}}, 'name': {{ sample['_id']| tojson }}})
    {% endfor %}

    Highcharts.chart('picard_plot', {
        chart: { type: 'scatter' },
        title: { text: 'Picard QC' },
        xAxis: { title: { text: "{{X_axis.lower().capitalize().replace('_', ' ')}}" } },
        yAxis: { title: { text: "{{Y_axis.lower().capitalize().replace('_', ' ')}}" } },
        legend: { enabled: false },
        tooltip: {
            formatter: function () {
                var output = ''
                if (this.point.name) {
                    output = output + 'Sample ID: <b>' + this.point.name + '</b> <br>'
                }
                output = output + "{{Y_axis}}" + ': <b>' + this.y + '</b> <br> ' + "{{X_axis}}" + '<b>' + this.x + '</b>'
                return output;
            }
        },
        plotOptions: {
            series: { connectNulls: true },
            spline: {
                marker: {
                    radius: 4,
                    lineColor: '#666666',
                    lineWidth: 1
                }
            }
        },
        series: [{
            data: data,
            marker: { symbol: 'circle' }
        }]
    });
</script>

{% endblock %}
