Mercurial > repos > immport-devteam > flow_overview
diff templates/genOverview.template @ 1:b5453d07f740 draft default tip
"planemo upload for repository https://github.com/ImmPortDB/immport-galaxy-tools/tree/master/flowtools/flow_overview commit 65373effef15809f3db0e5f9603ef808f4110aa3"
| author | azomics |
|---|---|
| date | Wed, 29 Jul 2020 17:03:53 -0400 |
| parents | |
| children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/templates/genOverview.template Wed Jul 29 17:03:53 2020 -0400 @@ -0,0 +1,280 @@ +<html> +<head> +<title>Flow Overview</title> +<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/> +<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css"/> +<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/pdfmake-0.1.18/dt-1.10.12/b-1.2.1/b-colvis-1.2.1/b-html5-1.2.1/cr-1.3.2/fc-3.2.2/fh-3.1.2/r-2.1.0/rr-1.1.2/sc-1.4.2/se-1.2.0/datatables.min.css"/> +<link rel="stylesheet" type="text/css" href="js/Editor-1.5.6/css/editor.dataTables.css"> +<link rel="stylesheet" href="css/parallelCoordinates.css"/> + +<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> +<script type="text/javascript" src="https://cdn.datatables.net/v/dt/pdfmake-0.1.18/dt-1.10.12/b-1.2.1/b-colvis-1.2.1/b-html5-1.2.1/cr-1.3.2/fc-3.2.2/fh-3.1.2/r-2.1.0/rr-1.1.2/sc-1.4.2/se-1.2.0/datatables.min.js"></script> +<script src="js/Editor-1.5.6/js/dataTables.editor.js" type="text/javascript"></script> +<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script> +<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js" type="text/javascript"></script> +<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" type="text/javascript"></script> +<script src="https://cdn.plot.ly/plotly-1.0.0.min.js" type="text/javascript"></script> +<script src="js/color_palette.js" type="text/javascript"></script> +<script src="js/overview.js" type="text/javascript"></script> +<script src="js/scatter2D.js" type="text/javascript"></script> +<script src="js/scatter3D.js" type="text/javascript"></script> +<script src="js/scatterMFI.js" type="text/javascript"></script> +<script src="js/parallelCoordinates.js" type="text/javascript"></script> +<script src="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"/> Display values<br> + <input type="checkbox" unchecked id="displayMFI"/> 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">×</span></button> + Only 5 markers can be displayed at most. + </div> + </div> + <div id="outlierWarning" 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">×</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>