Mercurial > repos > immport-devteam > cs_overview
diff templates/csOverview.template @ 2:a64ece32a01a draft default tip
"planemo upload for repository https://github.com/ImmPortDB/immport-galaxy-tools/tree/master/flowtools/cs_overview commit a46097db0b6056e1125237393eb6974cfd51eb41"
| author | azomics |
|---|---|
| date | Tue, 28 Jul 2020 08:32:36 -0400 |
| parents | |
| children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/templates/csOverview.template Tue Jul 28 08:32:36 2020 -0400 @@ -0,0 +1,287 @@ +<!DOCTYPE html> +<html> +<head lang="en"> +<title>CrossSample Overview</title> +<meta charset="UTF-8"> +<meta HTTP-EQUIV="Pragma" CONTENT="no-cache"> +<meta name="viewport" content="width=device-width, initial-scale=1.0"> +<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/csOverview.js" type="text/javascript"></script> +<script src="js/crossSamplePlots.js" type="text/javascript"></script> +<script src="js/pCoordMFIstats.js" type="text/javascript"></script> +<script src="js/pCoordCSstats.js" type="text/javascript"></script> +<script src="js/color_palette.js" type="text/javascript"></script> +<script src="js/boxplots.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="prop"><a href="#prop" data-toggle="tab">Population Distribution</a></li> + <li class="homeTab" data-value="stackedA"><a href="#stackedA" data-toggle="tab">Stacked Plot</a></li> + <li class="homeTab" data-value="pcoord"><a href="#pcoord" data-toggle="tab">Parallel Coordinates Population Summary</a></li> + <li class="homeTab" data-value="pcoordMFI"><a href="#pcoordMFI" data-toggle="tab">Parallel Coordinates MFI Summary</a></li> + <li class="homeTab" data-value="csstats"><a href="#boxplot" data-toggle="tab">Summary Statistics Boxplots</a></li> + </ul> + + <div class="tab-content"> + <div class="tab-pane active" id="prop" style="min-height:500px;"> + <div class="row"> + <div id="propDiv">Population Distribution</div> + </div> + <div class="row"> + Edit population names below: + <div id="popnamesDiv"></div> + </div> + </div> + + <div class="tab-pane" id="stackedA" style="min-height:500px;"> + <div class="col-md-12 chartDiv"> + <div id="plotDivA" class="col-md-10" style="height:100%;"></div> + + <div id="popDivA" class="col-md-2" style="height:100%;"> + <div class="row"> + <div class="col-sm-6 optionButtons"> + <button id="updateDisplayA" class="igbtn">Reset Display</button> + </div> + <div class="col-sm-6 optionButtons"> + <button id="togglePlot" class="igbtn"><img id="toggleButtonImg" src="images/barssm.png"></button> + </div> + </div> + <table id="popTableA" class="table table-condensed table-bordered igtable"> + <thead> + <tr> + <th><input type="checkbox" checked id="popSelectAllA"/></th> + <th>Pop. Names</th> + <th>Color</th> + </tr> + </thead> + <tbody> + </tbody> + </table> + </div> + </div> + </div> + + <div class="tab-pane" id="pcoord" style="min-height:500px;"> + <div id="chartDivPC" class="col-md-12 chartDiv"> + <div class="row"> + <div class="col-md-10" style="height:100%;"> + <div id="plotDivPC" style="height:50%;"></div> + <div id="tableDivPC" style="height:50%;"></div> + </div> + <div id="popDivPC" 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="pc_opacity">80%</span> + </div> + <button id="resetPCDisplay" class="igbtn">Reset Display</button> + <table id="popTablePC" class="table table-condensed table-bordered igtable"> + <thead> + <tr> + <th><input type="checkbox" checked id="popSelectAllPC"/></th> + <th>Sample Name</th> + <th>Color</th> + </tr> + </thead> + <tbody> + </tbody> + </table> + </div> + </div> + </div> + </div> + + <div class="tab-pane" id="pcoordMFI" style="min-height:500px;"> + <div id="chartDivPCm" class="col-md-12 chartDiv"> + <div class="row"> + <div id="smpDivPCm" class="col-md-1" style="height:100%;min-width:5%;"> + <table id="smpTablePCm" class="table table-condensed table-bordered igtable"> + <thead> + <tr> + <th>Sample Name</th> + <th><input type="checkbox" checked id="smpSelectAllPCm"/></th> + </tr> + </thead> + <tbody> + </tbody> + </table> + </div> + <div class="col-md-9" style="height:100%"> + <div id="plotDivPCm" style="height:50%"></div> + <div id="tableDivPCm" style="height:50%"></div> + </div> + + <div id="popDivPCm" class="col-md-2" style="margin-top:5px;"> + <div class="widget"> + <input type="range" min="0" max="1" value="0.8" step="0.01" id="PCmline_opacity" > + </input> + Opacity: <span id="pcm_opacity">80%</span> + </div> + <button id="resetDisplayMFIpop" class="igbtn">Reset Display</button> + <table id="popTablePCm" class="table table-condensed table-bordered igtable"> + <thead> + <tr> + <th><input type="checkbox" checked id="popSelectAllPCm"/></th> + <th>Population</th> + <th>Color</th> + </tr> + </thead> + <tbody> + </tbody> + </table> + </div> + </div> + </div> + </div> + + <div class="tab-pane" id="boxplot" style="min-height:500px;"> + <div class="col-md-12 chartDiv"> + <div id="mrkrDivC" class="col-md-2" style="height:100%;min-width:5%;"> + <table id="mrkrTableC" class="table table-condensed table-bordered igtable"> + <thead> + <tr> + <th>Shade</th> + <th>Marker Names</th> + <th><input type="checkbox" checked id="mrkrSelectAllC"/></th> + </tr> + </thead> + <tbody> + </tbody> + </table> + <input type="checkbox" unchecked id="displayLabelsC"/> Display values<br> + <input type="checkbox" unchecked id="displayMFIC"/> Display MFI<br><br> + <button id="changeDisplayC" 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="plotDivC" class="col-md-8" style="height:100%;"></div> + + <div id="popDivC" class="col-md-2" style="height:100%;"> + <button id="updateDisplayC" class="igbtn">Reset Display</button> + <table id="popTableC" class="table table-condensed table-bordered igtable"> + <thead> + <tr> + <th><input type="checkbox" checked id="popSelectAllC"/></th> + <th>Pop. Names</th> + <th>Color</th> + </tr> + </thead> + <tbody> + </tbody> + </table> + </div> + </div> + </div> + + </div> + </div> + </div> +</div> + + +</div> +</div> +<script> + +var poppropLoaded = false; +var stackedALoaded = false; +var pCoordLoaded = false; +var pCoordMFILoaded = false; +var boxplotLoaded = false; + +$().ready(function() { + $(document).on('shown.bs.tab','a[data-toggle="tab"]', function(e) { + var tab = e.target.getAttribute("href"); + if (tab == '#prop') { + if (poppropLoaded) { + return true; + } + poppropLoaded = true; + displayProp(); + } + if (tab == '#stackedA') { + if (stackedALoaded) { + displayPopulationLegend(configAreaplot); + updatePlot(configAreaplot); + return true; + } + stackedALoaded = true; + displayStackedAreaPlot(); + } + if (tab == '#pcoord') { + if (pCoordLoaded) { + displaySmpTable(); + displayTableGrid(); + return true; + } + pCoordLoaded = true; + displayParallelCoordinates(); + } + if (tab == '#pcoordMFI') { + if (pCoordMFILoaded) { + displayPopTablem(); + displaySmpTablem(); + displayTableGridm(); + return true; + } + pCoordMFILoaded = true; + displayParallelCoordinatesMFI(); + } + if (tab == '#boxplot') { + if (boxplotLoaded) { + displayPopulationLegend(configBoxplot); + displayMarkerTable(configBoxplot); + updateBoxplot(configBoxplot); + return true; + } + boxplotLoaded = true; + displayBoxplot(); + } + }); + + poppropLoaded = true; + displayProp(); +}); +</script> +</body> +</html>