{% extends 'base.html' %}
{% load static %}
{% block title %} EXPath Tool 2.0{% endblock %}
{% block content %}
<main>
    <div class="container">
        <div style="border: 2px solid #6495ED; padding: 15px; border-radius: 8px; width: 100%;">
            <h4 style="color: #6495ED;">Your submittion :</h4>
            <p><strong>Correlation coefficient: </strong><span id="coefficient"></span></p>
            <p><strong>Cut-off Value: </strong><span id="cut-off"></span></p>
        </div><br>
        
        <div class="chart-container">
            <div id="controls">
                <h4 style="color: #2A52BE">Graph Operations</h4>
                <h6><strong>Click</strong> to select a node.</h6>
                <h6><strong>Click background</strong> to unselect all.</h6>
                <h6><strong>Press modifier key</strong> (shift, command, control) to select multiple nodes.</h6>
                <h6><strong>Press modifier key</strong> for box selection.</h6>
                <h6><strong>Grab</strong> and <strong>drag</strong> background to pan.</h6>
                <h6><strong>Mouse wheel</strong> to zoom.</h6>
                <button onclick="resetLayout()">Reset Layout</button>
                <button onclick="fullscreenBtn()">Toggle Fullscreen</button>
                <hr>

                <h4>Gene ID</h4>
                <input type="text" id="gene-search-box" placeholder="Input Gene ID"> 
                <button onclick="searchGene()">Search</button>
                <hr>
                
                <h4>Selected gene ID</h4>
                <textarea id="selectedGene" readonly style="width: 80%; height: 200px;"></textarea>
                <button onclick="copyGene()">Copy to clipboard</button>
                <hr>
                
                <h4>Do functional analysis:</h4>
                <button style="margin-bottom: 5px; width: 60%;" onclick="Enrichment('pathway')">Pathway enrichment</button><br>
                <button style="margin-bottom: 5px; width: 60%;" onclick="Enrichment('go')">GO enrichment</button><br>
                <button style="width: 60%;" onclick="ShowHeatmap()">Show Heatmap</button>
                <hr>
                
                <p><a href="#" onclick="downloadNetwork()"><strong> Download</strong> the network (tab format)</a></p>
                
                <hr>
                <strong><span class="legend-circle" style="background:#FF0000; width: 24px; height: 24px;"></span> Largest number of correlationship</strong><br>
                <strong><span class="legend-circle" style="background:#FF6666; width: 24px; height: 24px;"></span> Second largest number of correlationship</strong><br>
                <strong><span class="legend-circle" style="background:#FFAAAA; width: 24px; height: 24px;"></span> Third largest number of correlationship</strong><br>
                <strong><span class="legend-circle" style="background:#FFD700; width: 24px; height: 24px;"></span> Correlationship number > 5</strong><br>
                <strong><span class="legend-circle" style="background:#FFFACD; width: 24px; height: 24px;"></span> 0 < Correlationship number <= 5</strong><br>
                <strong><span class="legend-circle" style="background:#FFFFFF; width: 24px; height: 24px;"></span> No interaction with other gene</strong><br>
                <strong style="margin-top: 10px;"><span style="color:red; font-size: 24px;">━</span> Positive correlation</strong><br>
                <strong><span style="color:green; font-size: 24px;">━</span> Negative correlation</strong><br>
            </div>
            <div id="cy">
                <button id="exitFullscreenBtn" 
                        style="display: none; position: absolute; top: 20px; right: 40px; z-index: 10001; font-size: 30px; background: transparent; border: none; cursor: pointer;">
                    &times;
                </button>
                <div id="popup">
                    <a id="popup-link" href="#" target="_blank" style="color: green; text-decoration: none;">Gene Info.</a>
                </div>
            </div>
        </div>
        <div class="modal fade" id="Heatmap" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >
            <div class="modal-dialog modal-dialog-scrollable modal-custom">
                <div class="modal-content ">
                    <div class="modal-header">
                        <h2 class="modal-title">Heatmap</h2>
                        <h6>Microaray (Stress & Hormone)</h6>
                    </div>
                    <div class="modal-body">
                        <div id="heatmap-container"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- list -->
        <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >
            <div class="modal-dialog modal-dialog-scrollable modal-custom">
                <div class="modal-content ">
                    <div class="modal-header">
                        <h2 class="modal-title" id="staticBackdropLabel">Matched gene list</h2>
                    </div>
                    <div class="modal-body">
                        <div>
                            <button id="select-all-btn" class="btn btn-primary">Select All</button>
                            <button id="deselect-all-btn" class="btn btn-secondary">Deselect All</button>
                        </div><br>
                        <table id="expression-table" class="display table table-striped"  style="width: 100%;">
                            <thead></thead>
                            <tbody></tbody>
                        </table>
                        <div class="dataTables_info"></div>
                        <div id="no-annotation-section" class="no-annotation-section mt-4"></div>
                    </div>
                    <div class="modal-footer">
                        <button id="modal-submit" class="btn btn-primary">Submit</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<script src="{% static 'js/analysis/coexpression_network_result.js' %}"></script>
<style>
    .chart-container { 
        width: 100%; 
        height: 1200px;
        margin-bottom: 30px; 
    }
    #download {
        display: block;
        margin-bottom: 15px;
        text-align: left;
        background-color: #28a745;
        border: 2px solid #28a745;
        color: #ffffff ;
        border-radius: 25px;
        padding: 10px;
        font-weight: bold;
        text-decoration: none;
    }
    #cy {
        width: 75%;
        height: 1200px;
        float: right;
        border: 1px solid #ccc;
    }
    #controls {
        width: 25%;
        height: 1200px;
        float: left;
        padding: 10px;
        font-family: sans-serif;
        background-color: #c6c6c6b3;
        overflow-y: auto;
        box-sizing: border-box;
    }
    .legend-circle {
        display: inline-block;
        border-radius: 50%;
        margin-right: 5px;
        vertical-align: middle;
    }
    #popup {
        display: none;
        position: absolute;
        background: white;
        border: 1px solid #ccc;
        border-radius: 6px;
        padding: 4px 8px;
        font-size: 14px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        z-index: 10;
    }
    .modal-custom {
        max-width: 80%;
    }
    .fullscreen {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 9999 !important;
        background: white;
    }
</style>    
{% endblock %}