diff 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 diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/templates/genOverviewCL.template	Wed Jul 29 17:03:53 2020 -0400
@@ -0,0 +1,298 @@
+<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"/>&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" 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>
+                                  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%;">
+                            &nbsp;&nbsp<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>