{% extends "index_page.html" %}
{% block title %}WCGNA analysis{% endblock %}
{% block content %}
<!-- Start of body -->
<style type="text/css">

#terminal {
    margin-top: 10px;
}

</style>

<link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='xterm/xterm.min.css') }}" />

<div class="container">
    <div class="col-md-5">
        <h1 class="mx-3 my-2 "> WGCNA analysis parameters</h1>
        {% if request.form['trait_list'].split(",")|length < 4 %} <div class="alert alert-danger" role="alert">
            <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
            <span class="sr-only">Error:</span>
            <h2>Too few phenotypes as input</h2>
            Please make sure you select enough phenotypes / genes to perform WGCNA. Your collection needs to contain at least 4 different phenotypes. You provided {{request.form['trait_list'].split(',')|length}} phenotypes as input.
    </div>
    {% else %}
    <form class="col-md-12" action="/wgcna_results" method="post" class="form-horizontal" id="wgcna_form">
        <input type="hidden" name="trait_list" id="trait_list" value="{{request.form['trait_list']}}">
        <div class="form-group row ">
            <label for="SoftThresholds" class="col-md-3 col-form-label col-form-label-sm">Soft threshhold</label>
            <div class="col-md-9">
                <input type="text" class="form-control form-control-md" value="1,2,3,4,5,6,7,8,9" id="SoftThresholds" name="SoftThresholds">
            </div>
        </div>
        <div class="form-group row ">
            <label for="MinModuleSize" class="col-md-3 col-form-label col-form-label-sm">Minimum module size:</label>
            <div class="col-md-9">
                <input type="text" class="form-control form-control-md" id="MinModuleSize" value="30" name="MinModuleSize">
            </div>
        </div>

        <div class="form-group row">
          <label for="TOMtype" class="col-md-3 col-form-label col-form-label-sm">TOMtype:</label>
          <div class="col-md-9">
            <select class="form-control" id="TOMtype" name="TOMtype">
            <option value="unsigned">unsigned</option>
            <option value="signed">signed</option>
          </select>
          </div>

        </div>
        <div class="form-group row ">
            <label for="mergeCutHeight" class="col-md-3 col-form-label col-form-label-sm">mergeCutHeight:</label>
            <div class="col-md-9">
                <input type="text" class="form-control form-control-md" id="mergeCutHeight" value="0.25" name="mergeCutHeight">
            </div>
        </div>

        <div class="form-group row">
          <label for="corType" class="col-md-3 col-form-label col-form-label-sm">corType:</label>
          <div class="col-md-9">
            <select class="form-control  col-md-9" id="corType" name="corType">
            <option value="pearson">pearson</option>
            <option value="bicor">bicor</option>
          </select>
          </div>

        </div>
        <div class="form-group">
            <div class="text-center">
                <input type="submit" class="btn btn-primary" value="Run WGCNA using these settings" />
            </div>
        </div>



    </form>
    {% endif %}
</div>
<div class="col-md-7">
        <div id="terminal" class="mt-2">
        </div>
</div>
</div>

<script src="{{ url_for('js', filename='xterm/xterm.min.js') }}" type="text/javascript"></script>
<script src="{{ url_for('js', filename='jquery/jquery.min.js') }}" type="text/javascript"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
let term = new Terminal({
    cursorBlink: true,
    lineHeight: 1.3,
    scrollback: true,
    macOptionIsMeta: true
});

let termDebugs = {
    general: "Computation process to be displayed here....",
    success: "Computation in process ......",
    fail: "Too few phenotypes as input must be >=4"
}

const fitAddon = new FitAddon.FitAddon()
term.loadAddon(fitAddon)

term.open(document.getElementById('terminal'));
term.setOption('theme', {
    background: '#300a24'
});
term.writeln(termDebugs.general)

wgcnaForm = document.querySelector("#wgcna_form")

fitAddon.fit()
term.onData((data) => {
    term.write(data)
})


if (wgcnaForm) {
} else {
    term.writeln(termDebugs.fail)
}

$(document).on('submit', '#wgcna_form', function(e) {
    term.writeln(termDebugs.success)

    e.preventDefault();
    var form = $(this);
    $.ajax({
        type: 'POST',
        url: '/wgcna_results',
        data: form.serialize(),
        success: function(data) {
            document.write(data)
        }
    })
})
})

</script>
{% endblock %}