<html>
<head>
    <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="">
    <link rel="shortcut icon" href="https://igv.org/web/img/favicon.ico">

    <title>IGV</title>

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

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/dataTables.bootstrap.min.css">

    <!-- jquery -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

    <!-- Bootstrap-->
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <!-- data tables -->
    <script type="text/javascript" src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/dataTables.bootstrap.min.js"></script>

</head>

<body>
<h2>Fusion Inspector</h2>

<div class="constainer-fluid" id="sampleHeader" style="background-color: #E7E7EF">
    <nav class="navbar navbar-default" style="background-color: #E7E7EF">
        <!--<div class="col-xs-3" id="sampleId"><p class="navbar-text"><b>Sample:</b></p></div>-->

        <!-- disabling for now... need callback to change from igv selector
        <div class="col-xs-3" id="FusionNameDetail"><p class="navbar-text"><b>Fusion Name:</b> Not Selected</p></div>
        <div class="col-xs-3" id="FusionJunctionDetail"><p class="navbar-text"><b>Junction Read Count:</b> Not Selected
        </p></div>
        <div class="col-xs-3" id="FusionSpanningDetail"><p class="navbar-text"><b>Spanning Read Count:</b> Not Selected
        </p></div>
         -->
    </nav>
</div>

<!-- End fusion details -->
<hr>

<!-- Start tabs -->
<!-- Start tabs header -->
<ul id="tabDescription" class="nav nav-tabs">
    <li role="presentation" id="tabBrowser_tab" class="active"><a href="#tabBrowser" data-toggle="tab">Browse All
        Fusions</a></li>
    <!-- <li role="presentation" id="igvTab"><a href="#igvBrowser" data-toggle="tab">IGV Detail</a></li> -->
</ul>
<!-- End tabs header -->

<!-- Start tabs content -->
<div class="tab-content" id="tabContent">
    <!-- Start Data Table Tab -->
    <div role="tabpanel" id="tabBrowser" class="tab-pane fade in active" data-toggle="tab">
        <!-- Start data table -->
        <div class="table-responsive">
            <table id="fusionTable" class="table table-striped table-bordered table-hover active" style="cursor:pointer"
                   cell spacing="0" width="100%"></table>
        </div>
        <!-- End data table -->
    </div>
</div>
<script type="text/javascript">

    "use strict;"

    const tableJson = "@TABLE_JSON@"
    const sessionDictionary = "@SESSION_DICTIONARY@"


    let igvBrowser

    document.addEventListener("DOMContentLoaded", async function () {
        initTable()
    })

    async function initIGV() {
        const igvDiv = document.getElementById("igvBrowser")
        const options =
            {
                sessionURL: sessionDictionary["0"],
                showChromosomeWidget: false,
                showNavigation: true,
                showKaryo: false,
                search: false     // disable webservice search
            }
        return igv.createBrowser(igvDiv, options)
    }


    function initTable() {

        const fusionTable = $('#fusionTable')

        // Make data table header and footer
        const headerKeys = tableJson.headers // ['Fusion', "# Long Reads", 'Junction Reads', 'Spanning Fragments', "Expr Level (FFPM)", 'Splice Type', 'Left Gene', 'Left Breakpoint', 'Right Breakpoint', "Annotations"];

        const fusionHeader = headerKeys.map(header => '<th>' + header + '</th>')
        fusionTable.append('<thead><tr>' + fusionHeader.join('') + '</tr></thead>')
        fusionTable.append('<tfoot><tr>' + fusionHeader.join('') + '</tr></tfoot>')

        // Add data table body (in order of forced fusion header)
        fusionTable.append('<tbody>')

        const tableRows = tableJson.rows
        for (let json of tableRows) {
            let bodyRow = '<tr>'
            for (let v of json) {
                bodyRow = bodyRow + '<td>' + v + '</td>'
            }
            fusionTable.append(bodyRow + '</tr>')
        }
        fusionTable.append('</tbody>')

        const dataTable = new DataTable('#fusionTable', {
            columnDefs: [{target: 0, visible: false}],    // Hide the unique_id column
            'scrollX': true

        })

        $('#fusionTable tbody').on('click', 'tr', function () {
            const unique_id = dataTable.row(this).data()[0]
            const session = sessionDictionary[unique_id]
            loadSession(session)
        })//#fusionTable

        // This hooks into the event fired off by tabs being selected.
        // It forces a redraw of the tab. Because the data table is originally
        // draw in a hidden (height = 0) div, the table is misdrawn. You have to
        // Trigger a redraw when the tab is visible so the height of the data table
        // can be correctly calculated.
        // Thanks to //stackoverflow.com/questions/20705905/bootstrap-3-jquery-event-for-active-tab-change
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            $('#fusionTable').DataTable().columns.adjust().draw()
        })
    }


    /**
     * Called on clicking row in fustion table *
     * @param sessionBlob
     * @param curJunctionReads
     * @param curSpanningReads
     */
    async function loadSession(sessionBlob) {

        if (!igvBrowser) {

            $('#tabDescription').append('<li role="presentation" id="igvTab"><a href="#igvBrowser" data-toggle="tab">IGV Detail</a></li>')
            $('#tabContent').append('<div role="tabpanel" id="igvBrowser" class="tab-panel fade"></div>')

            igvBrowser = await initIGV()

            // Add and show tab for IGV

        }
        $('.nav-tabs a[href="#igvBrowser"]').tab('show')
        igvBrowser.loadSession({url: sessionBlob})

    }


</script>
</body>
</html>