<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Traits overview (Scoary2)</title>
    <link rel="icon" type="image/x-icon" href="app/favicon.svg">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.2/papaparse.min.js"
            crossorigin="anonymous"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link href="app/overview.css" rel="stylesheet">

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
            crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.27.1/slimselect.min.js"></script>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.27.1/slimselect.min.css" rel="stylesheet">
</head>

<body>

<section style="height: 100vh">
    <div id="grid">
        <div class="left">
            <h1>Traits dendrogram</h1>
            <div id="svg-container" class="col"></div>
        </div>
        <div class="right container">
            <div>
                <div id="trait-select">
                    <select id="slim-select"></select>
                    <div class="d-flex justify-content-evenly">
                        <button id="copy-button" type="button" class="btn btn-primary">Copy selected traits</button>
                        <button id="goto-button" type="button" class="btn btn-success">Scroll to trait</button>
                        <button id="deselect-button" type="button" class="btn btn btn-warning">Deselect all</button>
                    </div>
                </div>

                <div id="trait-info"></div>

            </div>

            <div class="d-flex flex-column align-items-center" title="Click here to learn more about these values!">

                <div class="legend-title">
                    <h3>Legend</h3>
                    <a id="legend-link" href="https://github.com/MrTomRod/scoary-2/wiki/Understanding-the-p-values">
                        <button type="button" class="btn btn-info">?</button>
                    </a>
                </div>

                <p>The plot is log<sub>10</sub>-scaled.</p>

                <table id="legend">
                    <tr>
                        <th style="color:#2ca02c">f</th>
                        <th style="color:#9467bd">e</th>
                        <th style="color:#d62728">✱</th>
                    </tr>
                    <tr>
                        <td>Fisher's <i>q</i>-value</td>
                        <td>Empirical <i>p</i>-value</td>
                        <td><i>fq*ep</i> score</td>
                    </tr>
                </table>

            </div>
        </div>
    </div>

</section>

</body>

<script src="app/overview.js"></script>

</html>
