{% extends "base.html" %}
{% block head %}
    <script src="{{ url_for("static", filename="js/echarts.min.js") }}"></script>
    <script src="{{ url_for("static", filename="js/shine.js") }}"></script>
{% endblock %}
{% block main_body %}
    <main role="main" class="" style="margin-left:20%;margin-right:20%;">
        <div class="my-3 p-3 bg-white rounded shadow-sm" style="">
            <h6 class="border-bottom border-gray pb-2 mb-0">Transcriptome Profile Search Panel</h6>
            <form style="margin:4%;font-size:15px;" method="post">
                <div class="form-group">
                    <p>GENE SET INPUT</p>
                    <select class="form-control" name="spe" style="width:300px;margin-bottom:20px;">
                        <option>Bursaphelenchus xylophilus</option>
                        <option>Bursaphelenchus mucronatus</option>
                    </select>
                    <p>GENE SET INPUT</p>
                    <textarea id="gene-list" name="gene-list" class="form-control" rows="5" style="width:400px;margin-bottom:20px;"></textarea>
                    <div style="margin-top:10px;">
                        <input type="button" value="Example" class="btn btn-success btn-rounded"
                               style="margin-left:5%;margin-right:6%;"
                               onclick="$('#gene-list').val('Bxy013866\nBxy007505\nBxy015996\nBxy001947\nBxy011104\nBxy006470');">
                        <input type="submit" value="Submit Query" class="btn btn-primary btn-rounded"
                               style="margin-left:20px;">
                    </div>
                </div>
            </form>
            <small class="d-block text-right mt-3">
                <a href="#">All updates</a>
            </small>
        </div>
        {% if gene_list %}
            <div class="my-3 p-3 bg-white rounded shadow-sm" style="">
                <h6 class="border-bottom border-gray pb-2 mb-0">Transcriptome Profile Heatmap(log transfer)</h6>
                <div id="test" style="width: 1000px;height:1000px;"></div>
                <script type="text/javascript">
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('test'));
                    var gene_list = {{ gene_list|tojson }};
                    var header = {{ header|tojson }};
                    var data_matrix = {{ data_matrix|tojson }}
                        option = {
                            toolbox: {
                                feature: {
                                    saveAsImage: {
                                        name: "heatmap",
                                        title: "save as png",
                                    },
                                }
                            },
                            dataZoom: [
                                {
                                    type: 'slider',
                                    xAxisIndex: 0,
                                    start: 10,
                                    end: 60
                                },
                                {
                                    type: 'inside',
                                    xAxisIndex: 0,
                                    start: 10,
                                    end: 60
                                },
                                {
                                    type: 'slider',
                                    yAxisIndex: 0,
                                    start: 30,
                                    end: 80
                                },
                                {
                                    type: 'inside',
                                    yAxisIndex: 0,
                                    start: 30,
                                    end: 80
                                }
                            ],
                            tooltip: {
                                position: 'top'
                            },
                            animation: false,
                            grid: {
                                left: '10%',
                                height: '55%',
                                top: '10%'
                            },
                            xAxis: {
                                type: 'category',
                                data: header,
                                splitArea: {
                                    show: true
                                }
                            },
                            yAxis: {
                                type: 'category',
                                data: gene_list,
                                splitArea: {
                                    show: true
                                }
                            },
                            visualMap: {
                                min: 0,
                                max: 10,
                                calculable: true,
                                orient: 'horizontal',
                                left: 'center',
                                bottom: '15%'
                            },
                            series: [{
                                name: 'Punch Card',
                                type: 'heatmap',
                                data: data_matrix,
                                label: {
                                    show: true
                                },
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }]
                        };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                </script>
            </div>
            <div class="my-3 p-3 bg-white rounded shadow-sm" style="">
                <h6 class="border-bottom border-gray pb-2 mb-0">Transcriptome Profile Matrix</h6>
                <table class="table table-bordered" style="font-size:9pt;width:100%;word-break:break-all;">
                    {% for i in fpkm_matrix %}
                        <tr>
                        {% for j in i %}
                            <td>{{ j }}</td>>
                        {% endfor %}
                        </tr>
                    {% endfor %}

                </table>
            </div>
     {% endif %}
    </main>
{% endblock %}