{% extends "index_page.html" %}
{% block title %}WCGNA results{% endblock %}
{% block content %}
<!-- Start of body -->

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


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


<style type="text/css">


.container {
    min-height: 100vh;
    width: 100vw;
    padding: 20px;

}

.grid_container {


    width: 80vw;
    margin: auto;
    padding: 20px;


    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /*grid-gap: 5px;*/
    border: 1px solid black;
    grid-column-gap: 20px;

}

.control_sft_column {
    text-align: center;
}

.grid_container div:not(:last-child) {
    border-right: 1px solid #000;
}

.grid_container .control_sft_column h3 {
    font-weight: bold;
    font-size: 18px;
}

.control_net_colors {

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}


.control_mod_eigens {
    display: grid;
    grid-template-columns: repeat(2, 200px);
}

.control-image{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80vw;
}
</style>
<div class="container">
    {% if  error!='null' %}
     <h4 style="text-align: center;">{{error}}</h4>

    {% else %}
    <div>
        <div>
            <h2 style="text-align:center;">Parameters used</h2>

            <table id="summary" class="display"  width="40vw" ></table>

        </div>
        <div >
            <h2 style="text-align:center">Soft Thresholds </h2>
            <div class="grid_container">

            {% for key, value in results["data"]["output"]["soft_threshold"].items()%}
            <div class="control_sft_column">
                <h3>{{key}}</h3>
                {% for val in value %}
                <p>{{val|round(3)}}</p>
                {% endfor %}
            </div>
            {% endfor %}
            </div>
        </div>

        <div>
        
            {% if image["image_generated"] %}
            <div >
                <img class="control-image" src="data:image/jpeg;base64,{{ image['image_data']| safe }}">
            </div>

            {% endif %}
<!--                 <div >
                <img class="control-image" src="data:image/jpeg;base64,{{ results['data']['output']['image_data2']| safe }}">
            </div> -->
        </div>

        <div>
            <h2 style="text-align:center;"> Module eigen genes </h2>
            <table id="eigens" class="display" width="80vw"></table>
        </div>

        <div>
            <h2 style="text-align:center;">Phenotype modules </h2>

             <table id="phenos" class="display"  width="40vw" ></table>
        </div>
    </div>

{% endif %}

</div>

{% endblock %}

{% block js %}

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

<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.js') }}"></script>
<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.dataTables.min.js') }}"></script>
<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/scroller/js/dataTables.scroller.min.js') }}"></script>


<script type="text/javascript">


let phenoModules = {{results|safe}}["data"]["output"]["net_colors"]
let phenotypes = Object.keys(phenoModules)
let phenoMods = Object.values(phenoModules)

let {col_names,mod_dataset} = {{data|safe}}
const summary = {
  modules_found:phenoMods.length,
  ...{{parameters|safe}}
  
}

    $("#summary").DataTable( {

        data: Object.keys(summary).map((key)=>{
            return [key,summary[key]]
        }),
        columns: [ {
            title: "parameter",

        },

        {
            title:" param_values"
        }
        ]
    })


    $('#eigens').DataTable( {
        data: mod_dataset,
        columns: col_names.map((name)=>{
            return {
                title:name
            }
        })
    } );
    $('#phenos').DataTable( {
        data:phenotypes.map((phenoName,idx)=>{
            return [phenoName,phenoMods[idx]]
        }),
        columns: [{
            title:"Phenotypes"
        },
        {
        title: "Modules"
        }]
    } );


</script>
{% endblock %}