<html>
<head>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>IGV Variant Inspector </title>

    <!-- igv -->
    <script src="https://cdn.jsdelivr.net/npm/igv@2.8.6/dist/igv.min.js"></script>


    <style type="text/css">
        body {
            font-size: 80%;
            font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
        }
    </style>

    <!-- selector table style -->
    <style>

        tr {
            cursor: default;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        tr:hover {
            background-color: lightblue;
        }

        th {
            background-color: lightskyblue;
            color: white;
            cursor: pointer;
        }

        .selected {
            background-color: lightblue !important;
            outline: solid thin darkblue !important;
        }
    </style>

    <!-- accordian style,  ref: https://alligator.io/css/collapsible/ -->
    <style type="text/css">
        .wrap-collabsible {
            margin-bottom: 1.2rem;
        }

        input[type='checkbox'] {
            display: none;
        }

        .lbl-toggle {
            display: block;

            font-weight: bold;
            font-family: monospace;
            font-size: 1.2rem;
            text-transform: uppercase;
            text-align: left;

            padding: 1rem;

            color: black;
            background: #dddddd;

            cursor: pointer;

            border-radius: 7px;
            transition: all 0.25s ease-out;
        }

        .lbl-toggle:hover {
            color: blue;
        }

        .lbl-toggle::before {
            content: ' ';
            display: inline-block;

            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 5px solid currentColor;
            vertical-align: middle;
            margin-right: .7rem;
            transform: translateY(-2px);

            transition: transform .2s ease-out;
        }

        .toggle:checked + .lbl-toggle::before {
            transform: rotate(90deg) translateX(-3px);
        }

        .collapsible-content {
            max-height: 0px;
            overflow: auto;
            transition: max-height .25s ease-in-out;
        }

        .toggle:checked + .lbl-toggle + .collapsible-content {
            max-height: 350px;
        }

        .toggle:checked + .lbl-toggle {
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .collapsible-content .content-inner {
            background: rgba(250, 224, 66, .2);
            border-bottom: 1px solid rgba(250, 224, 66, .45);
            border-bottom-left-radius: 7px;
            border-bottom-right-radius: 7px;
            padding: .5rem 1rem;
        }
    </style>

</head>

<body>


<div id="tableContainer" class="wrap-collabsible">
    <input id="collapsible" class="toggle" type="checkbox" checked>
    <label for="collapsible" class="lbl-toggle">Variants</label>
    <div class="collapsible-content">
        <div id="tableSelectorDiv"></div>
    </div>
</div>

<div id="igvContainer">
    <div id="igvDiv"></div>
</div>


<script type="text/javascript">

    //import igv from "http://localhost:63342/igv.js/js/index.js";

    var tableJson = "@TABLE_JSON@"
    var igvBrowser;
    var sessionDictionary = "@SESSION_DICTIONARY@"

    document.addEventListener("DOMContentLoaded", function () {
        initIGV();
    });


    function initIGV() {

        var igvDiv;

        igvDiv = document.getElementById("igvDiv");
        var options =
            {
                sessionURL: sessionDictionary["0"],
                showChromosomeWidget: false,
                showCenterGuide: true,
                search: false     // disable webservice search
            };

        igv.createBrowser(igvDiv, options)
            .then(function (b) {
                igvBrowser = b;
                initTable();
            })
    }

    function initTable() {

        const table = document.createElement("table");
        table.id = "variant_table"
        table.style.width = "100%";

        document.getElementById("tableSelectorDiv").appendChild(table);

        const thead = document.createElement('thead');
        table.appendChild(thead);
        const headerRow = thead.insertRow(0);

        const headers = tableJson.headers;
        for (let j = 1; j < headers.length; j++) {
            var cell = document.createElement("th");
            headerRow.appendChild(cell);
            cell.innerHTML = headers[j];
        }

        const tbody = document.createElement('tbody');
        table.appendChild(tbody);
        const tableRows = tableJson.rows;
        for (let i = 0; i < tableRows.length; i++) {

            const json = tableRows[i];
            const unique_id = json[0]
            const row = document.createElement("tr");
            row.id = "row_" + unique_id;
            tbody.appendChild(row);

            // First row selected by default
            if (i === 0) row.classList.add("selected")

            row.onclick = function (event) {
                const list = document.getElementById("variant_table").getElementsByTagName("tr")
                for (let i = 0; i < list.length; i++) {
                    list[i].classList.remove("selected")
                }
                const rowID = event.target.parentElement.id;
                const row = document.getElementById(rowID)
                row.classList.add("selected")
                const uniqueId = rowID.substring(4);
                const session = sessionDictionary[uniqueId]
                igvBrowser.loadSession({
                    url: session
                })
            }

            for (let j = 1; j < headers.length; j++) {

                var value = json[j];
                cell = document.createElement("td");
                cell.rowID = i;
                row.appendChild(cell);
                cell.innerHTML = value;
            }
        }

        // Add sorting.  Adapted from https://stackoverflow.com/questions/14267781/sorting-html-table-with-javascript/49041392
        Array.prototype.slice.call(document.querySelectorAll('th')).forEach(function (th) {
            th.addEventListener('click', function () {
                //var table = th.parentNode
                //while (table.tagName.toUpperCase() != 'TABLE') table = table.parentNode;
                Array.prototype.slice.call(table.querySelectorAll('tr:nth-child(n+1)'), 1)
                    .sort(comparer(Array.prototype.slice.call(th.parentNode.children).indexOf(th), this.asc = !this.asc))
                    .forEach(function (tr) {
                        table.appendChild(tr)
                    });
            })
        });


        function getCellValue(tr, idx) {
            return tr.children[idx].innerText || tr.children[idx].textContent;
        }

        function comparer(idx, asc) {
            return function (a, b) {
                return function (v1, v2) {
                    // Special case for chromosome coloumn
                    if (idx === 0 && v1.startsWith('chr') && v2.startsWith('chr')) {
                        v1 = v1.substr(3);
                        v2 = v2.substr(3);
                    }
                    var isNumber = v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2)
                    return isNumber ? v1 - v2 : v1.toString().localeCompare(v2);
                }(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
            }
        }

    }


</script>


</body>