<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <script type="text/javascript"></script>
    <title>CoEx Browser</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <!-- Load JS and CSS dynamically based on URL -->
    <script type="text/javascript">
      // Find the root URL we are at
      var SCRIPT_ROOT = window.location.href.replace(/\/?$/, '/');

      // Load the favicon
      var favicon = document.createElement('link');
      favicon.rel = 'shortcut icon';
      favicon.href = SCRIPT_ROOT + 'static/favicon.ico';
      document.head.appendChild(favicon);

      // Load the stylesheets
      var css = document.createElement('link');
      css.rel = 'stylesheet';
      css.href = SCRIPT_ROOT + 'static/css/bundle.css';
      css.crossorigin = 'anonymous';
      document.head.appendChild(css);

      // Load the javascript
      var script = document.createElement('script');
      script.src = SCRIPT_ROOT + 'static/js/bundle.js';
      script.type = 'text/javascript';
      script.crossorigin = 'anonymous';
      document.head.appendChild(script);
    </script>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
  </head>

  <!-- Actual Body -->
  <body>
    <!-- Cytoscape Wait Modal -->
    <style></style>
    <div
      class="modal fade"
      id="cyWait"
      tabindex="-1"
      role="dialog"
      data-backdrop="static"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title"><b>The graph is being built!</b></h4>
          </div>
          <div class="modal-body" id="geneStatus">
            <p>
              We are now getting the data (if needed) and running the layout
              algorithm.
            </p>
            <p>
              For bigger networks this can take upwards of 60 seconds so please
              be patient, this page goes unresponsive while processing the
              layout.
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- Selection Column -->
    <div class="container-fluid">
      <div id="theRow" class="row">
        <div id="cob" class="col-md-4">
          <div id="cobHead" class="container">CoExpression Browser</div>

          <div>
            <!-- Tab List -->
            <ul class="nav nav-tabs" role="tablist" id="navTabs">
              <li role="presentation" class="active">
                <a
                  aria-controls="NetworkTab"
                  href="#NetworkTab"
                  role="tab"
                  data-toggle="tab"
                  >Network</a
                >
              </li>
              <li role="presentation">
                <a
                  aria-controls="opts"
                  href="#OptsTab"
                  role="tab"
                  data-toggle="tab"
                  >Options</a
                >
              </li>
              <li role="presentation">
                <a
                  aria-controls="GeneTab"
                  href="#GeneTab"
                  role="tab"
                  data-toggle="tab"
                  >Genes</a
                >
              </li>
              <li role="presentation">
                <a
                  aria-controls="SubnetTab"
                  href="#SubnetTab"
                  role="tab"
                  data-toggle="tab"
                  >Subnetwork</a
                >
              </li>
              <li role="presentation">
                <a
                  aria-controls="EnrichmentTab"
                  href="#EnrichmentTab"
                  role="tab"
                  data-toggle="tab"
                  >Enrichment</a
                >
              </li>
              <li role="presentation">
                <a
                  aria-controls="AboutTab"
                  href="#AboutTab"
                  role="tab"
                  data-toggle="tab"
                  >About</a
                >
              </li>
            </ul>

            <!-- Section for all of the Tab Content -->
            <div class="tab-content">
              <!-- Network Selection Tab -->
              <div role="tabpanel" class="tab-pane active" id="NetworkTab">
                <!-- Section For Network Selection -->
                <br />
                <h5 id="NetworkTableWait">
                  We are gathering the networks, please wait.
                </h5>
                <div class="hidden" id="Network">
                  <table class="table table-hover" id="NetworkTable">
                    <tbody></tbody>
                  </table>
                </div>

                <!-- Section For Term Selection -->
                <br />
                <h5 id="GeneSelectWait">
                  Please select a network above to continue.
                </h5>
                <div class="hidden" id="GeneSelect">
                  <ul class="nav nav-tabs" role="tablist" id="GeneSelectTabs">
                    <li role="presentation" class="active">
                      <a
                        aria-controls="TermTableTab"
                        href="#TermTableTab"
                        role="tab"
                        data-toggle="tab"
                        >Predefined Terms</a
                      >
                    </li>
                    <li role="presentation">
                      <a
                        aria-controls="TermGenesTab"
                        href="#TermGenesTab"
                        role="tab"
                        data-toggle="tab"
                        >Custom Gene List</a
                      >
                    </li>
                  </ul>
                  <div class="tab-content">
                    <div
                      role="tabpanel"
                      class="tab-pane active"
                      id="TermTableTab"
                    >
                      <br />
                      <table class="table table-hover" id="OntologyTable">
                        <tbody></tbody>
                      </table>
                      <br />
                      <h5 id="TermTableWait" class="">
                        Please select an ontology above to continue.
                      </h5>
                      <table class="table table-hover" id="TermTable">
                        <tbody></tbody>
                      </table>
                    </div>

                    <div role="tabpanel" class="tab-pane" id="TermGenesTab">
                      <br />
                      <div id="TermGenes">
                        <label for="geneList">Enter query genes:</label>
                        <textarea
                          type="text"
                          class="form-control"
                          rows="20"
                          id="geneList"
                          placeholder="GRMZM2G159456,GRMZM2G152135,GRMZM2G010044,rad51a"
                        ></textarea>
                      </div>
                      <br />
                      <table class="build-btn-table">
                        <tr>
                          <td style="width:50%">
                            <input
                              type="button"
                              class="btn btn-primary build-btn"
                              id="wNeighborsButton"
                              value="Build with Neighbors"
                            />
                          </td>
                          <td style="width:50%">
                            <input
                              type="button"
                              class="btn btn-primary build-btn"
                              id="woNeighborsButton"
                              value="Build without Neighbors"
                            />
                          </td>
                        </tr>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Network Selection Tab -->

              <!-- Option Adjustment Tab -->
              <div role="tabpanel" class="tab-pane" id="OptsTab">
                <form id="opts" class="">
                  <table style="width:100%">
                    <tr>
                      <td colspan="2"><h3>Network Options</h3></td>
                    </tr>
                    <tr class="form-group">
                      <td><label class="opt-label">Min Node Degree</label></td>
                      <td class="has-feedback">
                        <input
                          type="text"
                          class="form-control"
                          id="nodeCutoff"
                        />
                        <i
                          id="nodeCutoffInfo"
                          title="How many connections a gene must have within the network to be included."
                          class="opt-glyph glyphicon glyphicon-info-sign form-control-feedback"
                        ></i>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="2">
                        <div
                          class="alert alert-danger hidden"
                          id="nodeCutoffError"
                          role="alert"
                        ></div>
                      </td>
                    </tr>

                    <tr class="form-group">
                      <td><label class="opt-label">Min Edge Score</label></td>
                      <td class="has-feedback">
                        <input
                          type="text"
                          class="form-control"
                          id="edgeCutoff"
                        />
                        <i
                          id="edgeCutoffInfo"
                          title="The minimum signifigance score necessary for an edge to be included."
                          class="opt-glyph glyphicon glyphicon-info-sign form-control-feedback"
                        ></i>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="2">
                        <div
                          class="alert alert-danger hidden"
                          id="edgeCutoffError"
                          role="alert"
                        ></div>
                      </td>
                    </tr>

                    <tr id="fdrRow" class="form-group">
                      <td>
                        <button
                          id="fdrButton"
                          type="button"
                          class="opt-label btn btn-default active"
                          data-toggle="button"
                        >
                          <b>FDR Filter (Term)</b>
                        </button>
                      </td>
                      <td class="has-feedback">
                        <input
                          type="text"
                          class="form-control fdr-toggle"
                          id="fdrCutoff"
                        />
                        <i
                          id="fdrCutoffInfo"
                          title="The maximum FDR required for a gene to be visible in the network initially."
                          class="opt-glyph glyphicon glyphicon-info-sign form-control-feedback"
                        ></i>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="2">
                        <div
                          class="alert alert-danger hidden"
                          id="fdrCutoffError"
                          role="alert"
                        ></div>
                      </td>
                    </tr>
                    <tr class="form-group">
                      <td><label class="opt-label">Overlap Method</label></td>
                      <td class="">
                        <fieldset
                          id="overlapMethod"
                          class="fdr-toggle btn-group btn-group-justified"
                          data-toggle="buttons"
                        >
                          <label class="btn btn-default">
                            <input
                              type="radio"
                              name="overlap"
                              id="density"
                              autocomplete="off"
                            /><b>Density</b>
                            <i
                              id="densityInfo"
                              title="Style of overlap analysis to use. If disabled, this option is not availible for FDR analysis."
                              class="opt-glyph glyphicon glyphicon-info-sign button-glyph"
                            ></i>
                          </label>
                          <label class="btn btn-default">
                            <input
                              type="radio"
                              name="overlap"
                              id="locality"
                              autocomplete="off"
                            /><b>Locality</b>
                            <i
                              id="localityInfo"
                              title="Style of overlap analysis to use. If disabled, this option is not availible for FDR analysis."
                              class="opt-glyph glyphicon glyphicon-info-sign button-glyph"
                            ></i>
                          </label>
                        </fieldset>
                      </td>
                    </tr>
                    <tr class="form-group">
                      <td><b>Graph Options</b></td>
                      <td class="form-inline graphOptsRow">
                        <div
                          id="logSpacing"
                          type="button"
                          class="btn btn-default active"
                          data-toggle="button"
                          aria-pressed="true"
                        >
                          <b>Log Spacing </b>
                          <i
                            id="logSpacingInfo"
                            title="Show the genes spread out across the chromosomes, maintaining their topographic order, but taking the log of the distance between them."
                            class="opt-glyph glyphicon glyphicon-info-sign button-glyph"
                          ></i>
                        </div>
                        <div id="nodeSizeGroup" class="input-group">
                          <div class="input-group-addon"><b>Node Size</b></div>
                          <input
                            type="text"
                            class="form-control"
                            id="nodeSize"
                          />
                          <i
                            id="nodeSizeInfo"
                            title="How large the genes and SNPs appear on the graph."
                            class="opt-glyph glyphicon glyphicon-info-sign form-control-feedback"
                          ></i>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="2">
                        <div
                          class="alert alert-danger hidden"
                          id="nodeSizeError"
                          role="alert"
                        ></div>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="2"><h3>SNP2Gene Mapping Options</h3></td>
                    </tr>
                    <tr class="form-group" colspan="2">
                      <td><label class="opt-label">Overlapping SNPs</label></td>
                      <td
                        id="overlapSNPs"
                        class="btn-group  btn-group-justified"
                        data-toggle="buttons"
                      >
                        <label class="btn btn-default">
                          <input
                            type="radio"
                            id="strongest"
                            autocomplete="off"
                          /><b>Strongest SNP</b>
                          <i
                            id="strongestInfo"
                            title="Selects SNP-to-gene mapping resolution, green indicates FDR availibility for this option, yellow indicates that FDR analysis is unavailable."
                            class="opt-glyph glyphicon glyphicon-info-sign button-glyph"
                          ></i>
                        </label>
                        <label class="btn btn-default active">
                          <input
                            type="radio"
                            name="overlapSNPs"
                            id="effective"
                            autocomplete="off"
                            checked
                          /><b>Effective SNP</b>
                          <i
                            id="effectiveInfo"
                            title="Selects SNP-to-gene mapping resolution, green indicates FDR availibility for this option, yellow indicates that FDR analysis is unavailable."
                            class="opt-glyph glyphicon glyphicon-info-sign button-glyph"
                          ></i>
                        </label>
                      </td>
                    </tr>

                    <tr class="form-group">
                      <td>
                        <label class="opt-label">Window Size (Term)</label>
                      </td>
                      <td class="input-group">
                        <div class="input-group-btn">
                          <button
                            id="hpo"
                            class="btn btn-default hpoButton"
                            type="button"
                            data-toggle="button"
                            aria-pressed="false"
                          >
                            HPO
                          </button>
                        </div>
                        <div class="has-feedback">
                          <input
                            type="text"
                            class="form-control hpo-toggle"
                            id="windowSize"
                          />
                          <i
                            id="windowSizeInfo"
                            title="The window size is the number of base pairs up/down stream of a SNP used in SNP2Gene mapping. If HPO is specified, genes that exhibit significant co-expression across 2+ SNP2Gene mappings during overlap analysis are automatically included."
                            class="opt-glyph glyphicon glyphicon-info-sign form-control-feedback"
                          ></i>
                        </div>
                        <div id="windowSizeSel" class="input-group-btn">
                          <button
                            id="windowSizeOpts"
                            class="btn btn-default dropdown-toggle fdr-toggle"
                            data-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false"
                          >
                            FDR Opts <span class="caret"></span>
                          </button>
                          <ul
                            id="windowSizeList"
                            class="dropdown-menu dropdown-menu-right"
                          ></ul>
                        </div>
                      </td>
                    </tr>

                    <tr>
                      <td colspan="2">
                        <div
                          class="alert alert-danger hidden"
                          id="windowSizeError"
                          role="alert"
                        ></div>
                      </td>
                    </tr>
                    <tr class="form-group">
                      <td>
                        <label class="opt-label">Flank Limit (Term)</label>
                      </td>
                      <td class="input-group">
                        <div class="input-group-btn">
                          <button
                            id="hpo1"
                            class="btn btn-default hpoButton"
                            type="button"
                            data-toggle="button"
                            aria-pressed="false"
                          >
                            HPO
                          </button>
                        </div>
                        <div class="has-feedback">
                          <input
                            type="text"
                            class="form-control hpo-toggle"
                            id="flankLimit"
                          />
                          <i
                            id="flankLimitInfo"
                            title="The flank limit that is used in determining what genes are included in a term."
                            class="opt-glyph glyphicon glyphicon-info-sign form-control-feedback"
                          ></i>
                        </div>
                        <div id="flankLimitSel" class="input-group-btn">
                          <button
                            id="flankLimitOpts"
                            class="btn btn-default dropdown-toggle fdr-toggle"
                            data-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false"
                          >
                            FDR Opts <span class="caret"></span>
                          </button>
                          <ul
                            id="flankLimitList"
                            class="dropdown-menu dropdown-menu-right"
                          ></ul>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="2">
                        <div
                          class="alert alert-danger hidden"
                          id="flankLimitError"
                          role="alert"
                        ></div>
                      </td>
                    </tr>
                    <tr class="form-group">
                      <td>
                        <label class="opt-label">Vis Neighbors (Custom)</label>
                      </td>
                      <td>
                        <input
                          type="text"
                          class="form-control"
                          id="visNeighbors"
                        />
                        <i
                          id="visNeighborsInfo"
                          title="The maximum number of neighbors to show initially when declaring a custom gene list."
                          class="opt-glyph glyphicon glyphicon-info-sign form-control-feedback"
                        ></i>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="2">
                        <div
                          class="alert alert-danger hidden"
                          id="visNeighborsError"
                          role="alert"
                        ></div>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="2"><h3>Enrichment Options</h3></td>
                    </tr>
                    <tr class="form-group">
                      <td>
                        <label class="opt-label">Probability Cutoff</label>
                      </td>
                      <td>
                        <input type="text" class="form-control" id="pCutoff" />
                        <i
                          id="pCutoffInfo"
                          title="The P value used to determine what enrichment results are significant."
                          class="opt-glyph glyphicon glyphicon-info-sign form-control-feedback"
                        ></i>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="2">
                        <div
                          class="alert alert-danger hidden"
                          id="pCutoffError"
                          role="alert"
                        ></div>
                      </td>
                    </tr>
                    <tr class="form-group">
                      <td><label class="opt-label">Min Genes (GO)</label></td>
                      <td>
                        <input type="text" class="form-control" id="minTerm" />
                        <i
                          id="minTermInfo"
                          title="How many genes a GO term must contain before being considered in the analysis."
                          class="opt-glyph glyphicon glyphicon-info-sign form-control-feedback"
                        ></i>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="2">
                        <div
                          class="alert alert-danger hidden"
                          id="minTermError"
                          role="alert"
                        ></div>
                      </td>
                    </tr>
                    <tr class="form-group">
                      <td><label class="opt-label">Max Genes (GO)</label></td>
                      <td>
                        <input type="text" class="form-control" id="maxTerm" />
                        <i
                          id="maxTermInfo"
                          title="How many genes a GO term may contain before being considered in the analysis."
                          class="opt-glyph glyphicon glyphicon-info-sign form-control-feedback"
                        ></i>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="2">
                        <div
                          class="alert alert-danger hidden"
                          id="maxTermError"
                          role="alert"
                        ></div>
                      </td>
                    </tr>
                    <tr class="form-group">
                      <td></td>
                      <td style="text-align:right">
                        <div
                          id="visEnrich"
                          type="button"
                          class="btn btn-default"
                          data-toggle="button"
                          aria-pressed="false"
                        >
                          <b>Visible Genes Only </b
                          ><i
                            id="visEnrichInfo"
                            title="When running an enrichment analysis, only include genes visible on the graph."
                            class="opt-glyph glyphicon glyphicon-info-sign button-glyph"
                          ></i>
                        </div>
                      </td>
                    </tr>
                  </table>

                  <br />
                  <table class="build-btn-table">
                    <tr>
                      <td style="width:33%">
                        <input
                          type="button"
                          class="btn btn-danger build-btn"
                          id="resetOptsButton"
                          value="Restore Defaults"
                        />
                      </td>
                      <td style="width:33%">
                        <input
                          type="button"
                          class="btn btn-primary build-btn"
                          id="reEnrichButton"
                          value="Refresh Enrichment"
                        />
                      </td>
                      <td style="width:33%">
                        <input
                          type="button"
                          class="btn btn-primary build-btn"
                          id="reGraphButton"
                          value="Refresh Graph"
                        />
                      </td>
                    </tr>
                  </table>
                </form>
              </div>
              <!-- End Parameter Adjustment Tab -->

              <!-- Gene Table Tab -->
              <div role="tabpanel" class="tab-pane" id="GeneTab">
                <br />
                <h5 id="GeneTableWait">
                  Please follow the instructions in the network tab to build a
                  network. Information on the genes in that network will appear
                  here.
                </h5>
                <table class="table table-hover" id="GeneTable">
                  <tbody></tbody>
                </table>
              </div>
              <!-- End Gene Table Tab -->

              <!-- Subnetwork Table Tab -->
              <div role="tabpanel" class="tab-pane" id="SubnetTab">
                <br />
                <h5 id="SubnetTableWait">
                  Please follow the instructions in the Network tab, then if you
                  select genes in the main gene table (in the Genes tab), you
                  will be able to see just those and their neighbors here.
                </h5>
                <table class="table table-hover" id="SubnetTable">
                  <tbody></tbody>
                </table>
              </div>
              <!-- End Subnetwork Table Tab -->

              <!-- Enrichment Table Tab -->
              <div role="tabpanel" class="tab-pane" id="EnrichmentTab">
                <br />
                <h5 id="EnrichmentTableWait">
                  Please follow the directions in the network tab, then at the
                  bottom of either the main Gene table or the Subnet table, you
                  can run either a GO Term or GeneWordSearch analysis on those
                  gene, whose results will appear here.
                </h5>
                <table class="table table-hover" id="EnrichmentTable">
                  <tbody></tbody>
                </table>
                <div class="hidden" id="EnrichmentTableProg">
                  The results of your enrichment query will appear here within
                  about 30 seconds.
                </div>
              </div>
              <!-- End Enrichment Table Tab -->

              <!-- About Tab -->
              <div role="tabpanel" class="tab-pane" id="AboutTab">
                <br />
                This website was built under the auspices of the
                <a href="http://csbio.cs.umn.edu/">Myers Lab</a>.<br /><br />
                More information and the source available on
                <a href="https://github.com/LinkageIO/cob">GitHub</a
                >. Issue tracking is also done here. <br /><br />
                Contact Rob Schaefer (rob@linkage.io) Joe Jeffers
                (monprin@gmail.com) with any questions/comments/concerns.<br /><br />

                <p>
                  Funding Details: J.J., R.S., and J.M. were partially supported by a Biomedical Informatics and Computational Biology (BICB) Fellowship. This work was supported by a grant from the National Science Foundation to N.M.S. (DBI-1237931) and by US Department of Agriculture Hatch funds to N.M.S. and C.L.M. R.S., R.B. and C.L.M. were partially supported by grants from the National Science Foundation (IOS 1126950 and DBI 0953881). C.L.M. is supported by the CIFAR Genetic Networks Program. The funders had no role in study design, data collection and analysis, decision to publish, or preparation of the manuscript.
                </p>
              </div>
              <!-- End About Tab -->
            </div>
          </div>
        </div>

        <!-- Box for Cytoscape Graph -->
        <div class="col-md-8">
          <hr id="colBreak" class="" />

          <!-- Back button for graph -->
          <button
            id="backButton"
            type="button"
            class="hidden btn btn-default"
            aria-label="Restore Graph"
          >
            <span
              class="glyphicon glyphicon-arrow-left"
              aria-hidden="true"
            ></span>
          </button>

          <!-- Box for cytoscape.js -->
          <div id="cy"></div>

          <!-- Box for title indicating current network -->
          <div id="cyTitle"></div>
          <div id="graphButtons">
            <input
              type="button"
              class="btn btn-primary"
              id="graphMLButton"
              value="GraphML"
            />
            <input
              type="button"
              class="btn btn-primary"
              id="pngButton"
              value="PNG"
            />
            <input
              type="button"
              class="btn btn-success"
              id="toggleLayoutButton"
              value="Toggle Layout"
            />
            <input
              type="button"
              class="btn btn-danger"
              id="clearSelectionButton"
              value="Clear Selection"
            />
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
