Mercurial > repos > immport-devteam > flow_overview

<html>
<head>
<title>Flow Overview</title>
<link rel="stylesheet" href="/static/flowtools/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/static/flowtools/select2/select2.min.css"/>
<link rel="stylesheet" href="/static/flowtools/css/parallelCoordinates.css"/>
<link rel="stylesheet" href="/static/flowtools/datatables/datatables.min.css"/>
<link rel="stylesheet" href="/static/flowtools/datatables/Buttons-1.1.2/css/buttons.dataTables.min.css"/>
<link rel="stylesheet" href="/static/flowtools/datatables/Select-1.1.2/css/select.dataTables.min.css"/>
<link rel="stylesheet" href="/static/flowtools/datatables/Editor-1.5.6/css/editor.dataTables.min.css"/>
<script src="/static/flowtools/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="/static/flowtools/bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="/static/flowtools/select2/select2.full.min.js" type="text/javascript"></script>
<script src="/static/flowtools/d3/d3.min.js" type="text/javascript"></script>
<script src="/static/flowtools/plotly-latest.min.js" type="text/javascript"></script>
<script src="/static/flowtools/datatables/datatables.min.js" type="text/javascript"></script>
<script src="/static/flowtools/datatables/Editor-1.5.6/js/dataTables.editor.min.js" type="text/javascript"></script>
<script src="/static/flowtools/js/color_palette.js" type="text/javascript"></script>
<script src="/static/flowtools/js/overview.js" type="text/javascript"></script>
<script src="/static/flowtools/js/scatter2D.js" type="text/javascript"></script>
<script src="/static/flowtools/js/scatter3D.js" type="text/javascript"></script>
<script src="/static/flowtools/js/scatterMFI.js" type="text/javascript"></script>
<script src="/static/flowtools/js/parallelCoordinates.js" type="text/javascript"></script>
<script src="/static/flowtools/js/boxplotsFlow.js" type="text/javascript"></script>

<style>
#input{font-family:Calibri,Arial}
table.dataTable tbody td.dt-body-right {
    text-align: right;
}
#div{padding:5px;width:150px;height:100px;text-align:center}
table{width:100%;border:0px solid;border-collapse:collapse;text-align:center;}
th{background-color:#3e6db0;color:#fff;padding:5px}

</style>
</head>

<body>
<div class="container-fluid">
<div class="row" style="padding-bottom:10px;min-height:500px;">
    <div  class="col-md-12">
            <ul class="nav nav-tabs tabs-main">
                <li class="homeTab active" data-value="mfi"><a href="#mfi" data-toggle="tab">MFI/Pop</a></li>
                <li class="homeTab" data-value="overviewPlot"><a href="#overviewPlot" data-toggle="tab">Overview Plot</a></li>
                <li class="homeTab" data-value="scatter2D"><a href="#scatter2D" data-toggle="tab">Scatter 2D</a></li>
                <li class="homeTab" data-value="scatter3D"><a href="#scatter3D" data-toggle="tab">Scatter 3D</a></li>
                <li class="homeTab" data-value="parallelCoordinates"><a href="#parallelCoordinates" data-toggle="tab">Parallel Coordinates</a></li>
                <li class="homeTab" data-value="stats"><a href="#boxplots" data-toggle="tab">Summary Statistics Boxplots</a></li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active" id="mfi" style="min-height:500px;">
                    <div id="mfiDiv"></div>
                </div>

                <div class="tab-pane" id="overviewPlot" style="min-height:500px;">
                    <div id="overviewPlotDiv">Overview</div>
                </div>

                <div class="tab-pane" id="scatter2D" style="min-height:500px;">
                    <div id="toolbarDiv2D" class="col-md-12 chartDiv">
                    X Axis: <select id="xAxisMarker2D" style="width:150px;">
                            </select>
                    Y Axis: <select id="yAxisMarker2D" style="width:150px;">
                            </select>
                    View: <select id="view2D" style="width:150px;">
                            <option value="1">Points + Centroids</option>
                            <option value="2">Points</option>
                            <option value="3">Centroids</option>
                            </select>
                    </div>
                    <div class="col-md-12 chartDiv">
                    <div id="scatterPlotDiv2D" class="col-md-10" style="height:100%;"></div>
                    <div id="populationDiv2D" class="col-md-2" style="height:100%;">
                    <button id="updateDisplay2D" class="igbtn">Reset Display</button>
                    <table id="populationTable2D" class="table table-condensed table-bordered igtable" border="0" width="100%">
                        <thead>
                            <tr>
                              <th align="center"><input type="checkbox" checked id="selectall2D"/></th>
                              <th>Pop. Name</th>
                              <th>Color</th>
                              <th>%</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    </div>
                    </div>
                </div>

                <div class="tab-pane" id="scatter3D" style="min-height:500px;">
                    <div id="toolbarDiv3D" class="col-md-12 chartDiv">
                    X Axis: <select id="xAxisMarker3D" style="width:150px;">
                            </select>
                    Y Axis: <select id="yAxisMarker3D" style="width:150px;">
                            </select>
                    Z Axis: <select id="zAxisMarker3D" style="width:150px;">
                            </select>
                    View: <select id="view3D" style="width:150px;">
                            <option value="1">Points + Centroids</option>
                            <option value="2">Points</option>
                            <option value="3">Centroids</option>
                            </select>
                    </div>

                    <div class="col-md-12 chartDiv">
                    <div id="scatterPlotDiv3D" class="col-md-10" style="height:100%;"></div>
                    <div id="populationDiv3D" class="col-md-2" style="height:100%;">
                    <button id="updateDisplay3D" class="igbtn">Reset Display</button>
                    <table id="populationTable3D" class="table table-condensed table-bordered igtable" border="0" width="100%">
                        <thead>
                            <tr>
                              <th align="center"><input type="checkbox" checked id="selectall3D"/></th>
                              <th>Pop. Name</th>
                              <th>Color</th>
                              <th>%</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    </div>
                    </div>
                </div>
                <div class="tab-pane" id="parallelCoordinates" style="min-height:500px;">
                    <div id="chartDiv">
                        <div class="row">
                            <div class="col-md-10" style="height:100%;">
                                <div id="plotDiv" style="height:50%"></div>
                                <div id="tableDiv" style="height:50%"></div>
                            </div>
                            <div id="popDiv" class="col-md-2" style="height:100%;">
                            <div class="widget">
                                  <input type="range" min="0" max="1" value="0.8" step="0.01" id="pcline_opacity" >
                                  </input>
                                  Opacity: <span id="pcopacity">80%</span>
                            </div>
                            <button id="resetPCoordDisplay" class="igbtn">Reset Display</button>
                            <table id="popTable" class="table table-condensed table-bordered igtable">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" checked id="popSelectAll"/></th>
                                        <th>Pop. Name</th>
                                        <th>Color</th>
                                        <th>%</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                  </div>
                </div>

                <div class="tab-pane" id="boxplots" style="min-height:500px;">
                    <div class="col-md-12 chartDiv">
                        <div id="mrkrDiv" class="col-md-2" style="height:100%;min-width:5%;">
                          <table id="mrkrTable" class="table table-condensed table-bordered igtable">
                            <thead>
                              <tr>
                                <th>Shade</th>
                                <th>Marker Names</th>
                                <th><input type="checkbox" checked id="mrkrSelectAll"/></th>
                              </tr>
                            </thead>
                            <tbody>
                            </tbody>
                          </table>
                          <input type="checkbox" unchecked id="displayLabels"/>&nbsp;Display values<br>
                          <input type="checkbox" unchecked id="displayMFI"/>&nbsp;Display MFI<br><br>
                          <button id="changeDisplay" class="igbtn">View per marker</button><br><br>
                          <div id="markerWarning" style="display:none;">
                            <div class="alert alert-info alert-dismissible fade in" role="alert">
                              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                                  Only 5 markers can be displayed at most.
                            </div>
                          </div>
                          <div id="outlierWarning">
                            <div class="alert alert-info alert-dismissible fade in" role="alert">
                              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                                  The number of outliers is too large to display. Representation shows randomly downsampled outliers.
                            </div>
                          </div>
                        </div>

                        <div id="plotDivbp" class="col-md-8" style="height:100%;"></div>

                        <div id="popDivbp" class="col-md-2" style="height:100%;">
                            <button id="updateDisplaybp" class="igbtn">Reset Display</button>
                            <table id="popTablebp" class="table table-condensed table-bordered igtable">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" checked id="popSelectAllbp"/></th>
                                        <th>Pop. Names</th>
                                        <th>Color</th>
                                     </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
var mfiLoaded = false;
var populationLoaded = false;
var overviewPlotLoaded = false;
var scatter2DLoaded = false;
var scatter3DLoaded = false;
var parallelCoordinatesLoaded = false;
var bpLoaded = false;

$().ready(function() {
    $(document).on('shown.bs.tab','a[data-toggle="tab"]', function(e) {
      var tab = e.target.getAttribute("href");
      if (tab == '#mfi') {
        if (mfiLoaded) {
            return true;
        }
        mfiLoaded = true;
        displayMFI();
      }
      if (tab == '#overviewPlot') {
        if (overviewPlotLoaded) {
            return true;
        }
        overviewPlotLoaded = true;
        displayOverviewPlot();
      }
      if (tab == '#scatter2D') {
        if (scatter2DLoaded) {
            displayScatterPopulation2D();
            return true;
        }
        scatter2DLoaded = true;
        displayScatter2D();
      }
      if (tab == '#scatter3D') {
        if (scatter3DLoaded) {
            displayScatterPopulation3D();
            return true;
        }
        scatter3DLoaded = true;
        displayScatter3D();
      }
      if (tab == '#parallelCoordinates') {
        if (parallelCoordinatesLoaded) {
            displayPopTable();
            displayTableGrid();
            return true;
        }
        parallelCoordinatesLoaded = true;
        displayParallelCoordinates();
      }
      if (tab == '#boxplots') {
        if (bpLoaded) {
            displayPopulationLegend(configbp);
            displayMarkerTable(configbp);
            updateBoxplot(configbp);
            return true;
        }
        bpLoaded = true;
        displayMFIBoxplot();
      }
    });

    mfiLoaded = true;
    displayMFI();
});
</script>
</body>
</html>
author	immport-devteam
date	Mon, 27 Feb 2017 12:54:37 -0500
parents
children