Mercurial > repos > immport-devteam > cs_overview
view 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 source
<!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>