Mercurial > repos > immport-devteam > flow_overview
view templates/genOverviewCL.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 source
<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> <script src="js/profileCLs.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> <li class="homeTab" data-value="clprofiles"><a href="#clprofiles" data-toggle="tab">Populations Cell Ontologies</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 class="tab-pane" id="clprofiles" style="min-height:500px;"> <div class="row"> <div id="clprof"/> </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 clprofilesLoaded = 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(); } if (tab == '#clprofiles') { if (clprofilesLoaded) { return true; } clprofilesLoaded = true; displayCLTable(); } }); mfiLoaded = true; displayMFI(); }); </script> </body> </html>