index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IGV-JB</title>

    <!-- Bootstrap 4 CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- DataTables CSS -->
    <!--    <link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"/>-->
    <link rel="stylesheet" type="text/css"
          href="https://cdn.datatables.net/v/dt/dt-1.10.20/sl-1.3.1/datatables.min.css"/>

    <!-- Bootstrap 4 and Dependancies -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <!-- Datatables JS -->
    <!--    <script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>-->
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.20/sl-1.3.1/datatables.min.js"></script>

    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

    <!-- Juicebox CSS-->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/juicebox.js@2.2.2/dist/css/juicebox.css">

</head>
<body>

<h2>Demonstration of Juicebox <-> IGV interaction</h2>


<ul>
    <li>Navigation is synched</li>
    <li>Cross hairs in JB => vertical bars in IGV (hold shift key down and move mouse over JB for crosshairs)</li>
    <li>Click "Update Contacts" to send juicebox contact records with significant counts to IGV, represented as arcs.
    </li>
</ul>


<main id="hic-main" class="container-fluid">

    <nav class="navbar navbar-expand-lg navbar-light bg-light ">

        <!-- Contact Map -->
        <div class="dropdown">

            <button id="hic-contact-map-dropdown" class="btn btn-outline-dark btn-sm ml-2 dropdown-toggle" type="button"
                    data-toggle="dropdown">
                Load Map
            </button>

            <div id="hic-contact-map-dropdown-menu" class="dropdown-menu">

                <!-- Select -->
                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#hic-contact-map-modal">
                    Juicebox Archive ...</a>

                <!-- ENCODE hosted maps -->
                <button id="hic-encode-hosted-contact-map-presentation-button" class="dropdown-item"
                        type="button" data-toggle="modal" data-target="#hic-encode-hosted-contact-map-modal">ENCODE ...
                </button>

                <!-- Local Map File -->
                <label class="dropdown-item btn btn-default btn-file">
                    <div class="igv-app-dropdown-item-cloud-storage">
                        <div>
                            Local File ...
                        </div>
                        <div>
                            <input id="contact-map-local" name="contact-map" type="file" style="display: none;">
                        </div>
                    </div>
                </label>

                <!-- URL -->
                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#hic-load-url-modal">URL ...</a>
            </div>

        </div>

        <!-- Track -->
        <div class="dropdown">

            <button id="hic-track-dropdown-button" class="btn btn-outline-dark btn-sm ml-2 dropdown-toggle"
                    type="button"
                    data-toggle="dropdown">
                Load Tracks
            </button>

            <div id="hic-track-dropdown-menu" class="dropdown-menu">

                <button id="encode-signal-tracks-button" class="dropdown-item"
                        type="button" data-toggle="modal" data-target="#encode-signal-tracks-modal">ENCODE Signals ...
                </button>

                <button id="encode-other-tracks-button" class="dropdown-item"
                        type="button" data-toggle="modal" data-target="#encode-other-tracks-modal">ENCODE Other ...
                </button>


                <!-- Local File -->
                <label class="dropdown-item btn btn-default btn-file">
                    <div class="igv-app-dropdown-item-cloud-storage">
                        <div>
                            Local File ...
                        </div>
                        <div>
                            <input id="track-file-input" name="local-track-file" type="file"
                                   style="display: none;">
                        </div>
                    </div>
                </label>

                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#track-load-url-modal">URL ...</a>

            </div>

        </div>

        <!-- Share -->
        <div title="Share">
            <button id="share-button" class="btn btn-outline-dark btn-sm ml-2" type="button" data-toggle="modal"
                    data-target="#app-share-modal">
                Share
            </button>
        </div>

        <button id="projectButton" class="btn btn-outline-dark btn-sm ml-5">Update Contacts</button>


    </nav>

    <!-- App container -->
    <div class="row">
        <div class="col-md-12">

            <!-- app + caption container-->
            <div id="app-caption" class="juicebox-app-caption-container">

                <div style="display:flex">
                    <div id="jbDiv"></div>
                    <div id="igvDiv" style="flex-grow:0;flex-shrink:0;flex-basis: 950px"></div>
                </div>

                <!-- caption -->
                <div id="hic-caption" class="hic-caption-container" contenteditable="true">

                </div>

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

    <!-- Other dialogs -->
    <div id="hic-load-url-modal" class="modal fade">
        <div class="modal-dialog  modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">Load URL</div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Enter URL">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="track-load-url-modal" class="modal fade">
        <div class="modal-dialog  modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">Load URL</div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Enter URL">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Share URL Modal -->
    <div id="app-share-modal" class="modal fade">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header">
                    <div id="app-share-input-modal-close-button" class="modal-title">Share</div>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>

                </div>

                <div class="modal-body">
                    <div class="container-fluid">

                        <!-- copy url -->
                        <div class="row">
                            <div class="col-sm-8">
                                <div class="form-group">
                                    <input id="app-share-input" type="text" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <button id="app-copy-link-button" type="button" class="btn btn-sm btn-default">
                                    COPY
                                </button>
                            </div>
                        </div>

                    </div>
                </div>

            </div>

        </div>

    </div>

    <div style="width:600px;margin-top: 10px;margin-bottom: 10px">
        <h3>Contact Parameters</h3>
        <div class="form-group">
            <label for="binThresholdInput">Off diagonal bin threshold</label>
            <input type="text" class="form-control" id="binThresholdInput" aria-describedby="binThresholdHelp" placeholder="10" value="10">
            <small id="binThresholdHelp" class="form-text text-muted">Contacts close to diagonal (abs(binX-binY) < threshold) are filtered.  </small>
        </div>
        <div class="form-group">
            <label for="percentileThresholdInput">Percentile threshold</label>
            <input type="text" class="form-control" id="percentileThresholdInput" aria-describedby="percentileThresholdHelp" placeholder="2" value="2">
            <small id="percentileThresholdHelp" class="form-text text-muted">Contacts with counts in top "percentile thresold" are kept.  Value range 0-100.  </small>
        </div>
        <div class="form-group">
            <label for="alphaModifierInput">Alpha modifier</label>
            <input type="text" class="form-control" id="alphaModifierInput" aria-describedby="alphaModifierHelp" placeholder="0.5" value="0.5">
            <small id="alphaModifierHelp" class="form-text text-muted">Use to adjust color intensity of IGV arcs.  Value range 0-1  Default = 0.5  </small>
        </div>

        <button type="button" class="btn btn-outline-dark btn-sm ml-2" id="contactParametersButton">Update Contacts</button>
    </div>

</main>

<script type="module">

    //import {init} from "./js/init.js"
    import {init} from "./dist/igv-juicebox.js"
    init({
        jbContainer: document.getElementById("jbDiv"),
        igvContainer: document.getElementById("igvDiv"),
        projectContactsButton: document.getElementById("projectButton"),
        contactsParametersButton: document.getElementById("contactParametersButton")
    })


</script>

</body>
</html>