AWS megatests outputs page

includes/header.php

@@ -76,6 +76,13 @@
     <script src="/assets/js/showdown.min.js"></script>
     <script src="/assets/js/nf-core-schema-launcher.js?c=<?php echo $git_sha; ?>"></script>
     <?php endif;
+    if(isset($aws) && $aws): ?>
+    <link rel="stylesheet" href="/assets/css/dataTables.bootstrap4.min.css">
+    <script src="/assets/js/aws-sdk-2.765.0.min.js"></script>
+    <script src="/assets/js/jquery.dataTables.min.js"></script>
+    <script src="/assets/js/dataTables.bootstrap4.min.js"></script>
+    <script src="/assets/js/aws-s3-explorer.js?c=<?php echo $git_sha; ?>"></script>
+    <?php endif;
     if(isset($import_schema_builder) && $import_schema_builder): ?>
     <link href="/assets/css/jquery-ui.min.css" rel="stylesheet">
     <script src="/assets/js/jquery-ui.min.js"></script>

includes/pipeline_page/_index.php

@@ -44,10 +44,12 @@
 # Set defaults (Readme tab)
 $pagetab = ''; # empty string is home / readme
 $release = 'dev';
+$release_hash = null;
 $latest_release = 'dev';
 if(count($pipeline->releases) > 0){
   $release = $latest_release = $pipeline->releases[0]->tag_name;
   $release_url = $pipeline->releases[0]->html_url;
+  $release_hash = $pipeline->releases[0]->tag_sha;
 }
 
 # Find release from URL if set
@@ -56,14 +58,15 @@
     if($path_parts[1] == $r->tag_name){
       $release = $r->tag_name;
       $release_url = $releases->html_url;
+      $release_hash = $r->tag_sha;
     }
   }
   if($path_parts[1] == 'dev'){
     $release = 'dev';
     $release_url = null;
+    $release_hash = null;
   }
 }
-
 ########
 ## Load and cache the pipeline JSON schema if we have one
 ########
@@ -121,6 +124,11 @@
   $filename = 'docs/output.md';
   $md_trim_before = '# Introduction';
 }
+# Example output
+else if(endswith($_GET['path'], '/example_output')){
+  $pagetab = 'example_output';
+  require_once('example_output.php');
+}
 # Releases + Stats
 else if(endswith($_GET['path'], '/releases_stats')){
   $pagetab = 'releases_stats';
@@ -213,17 +221,22 @@
     <a class="nav-link<?php if($pagetab=='usage'){ echo ' active'; } ?>" href="<?php echo $url_base; ?>/usage">Usage</a>
   </li>
   <?php if(file_exists($gh_pipeline_schema_fn)): ?>
-  <li class="nav-item">
-    <a class="nav-link<?php if($pagetab=='parameters'){ echo ' active'; } ?>" href="<?php echo $url_base; ?>/parameters">Parameters</a>
-  </li>
+    <li class="nav-item">
+      <a class="nav-link<?php if($pagetab=='parameters'){ echo ' active'; } ?>" href="<?php echo $url_base; ?>/parameters">Parameters</a>
+    </li>
   <?php endif; ?>
   <li class="nav-item">
     <a class="nav-link<?php if($pagetab=='output'){ echo ' active'; } ?>" href="<?php echo $url_base; ?>/output">Output</a>
   </li>
+  <?php if(isset($release_hash) && $release_hash): ?>
+  <li class="nav-item">
+    <a class="nav-link<?php if($pagetab=='example_output'){ echo ' active'; } ?>" href="/<?php echo $pipeline->name; ?>/example_output">Example<span class="d-none d-sm-inline"> output</span></a>
+  </li>
+  <?php endif; ?>
   <li class="nav-item">
     <a class="nav-link<?php if($pagetab=='releases_stats'){ echo ' active'; } ?>" href="/<?php echo $pipeline->name; ?>/releases_stats">Releases & Stat<span class="d-none d-sm-inline">istic</span>s</a>
   </li>
-  <?php if($pagetab == '' || $pagetab == 'output' || $pagetab == 'usage'): ?>
+  <?php if($pagetab == '' || $pagetab == 'output' || $pagetab == 'usage' || $pagetab == 'example_output'): ?>
   <li class="pt-1 pl-3">
     <div class="input-group input-group-sm">
       <div class="input-group-prepend">
@@ -233,10 +246,10 @@
         <?php
         $releases = [];
         foreach($pipeline->releases as $r){
-          array_push($releases, $r->tag_name);
+          $releases[$r->tag_name] = $r->tag_sha;
         }
-        array_push($releases, "dev");
-        foreach($releases as $r){
+        $releases["dev"] = "";
+        foreach($releases as $r => $h){
           $selected = $r == $release ? 'selected="selected"' : '';
           echo '<option value="/'.$pipeline->name.'/'.$r.'/'.$pagetab.'" '.$selected.'>'.$r.'</option>';
         }
@@ -245,6 +258,7 @@
     </div>
   </li>
   <?php endif; ?>
+
 </ul>
 
 <?php
@@ -262,17 +276,18 @@
 } else {
   $content .= $schema_content;
 }
+
 echo '<div class="rendered-markdown pipeline-page-content">'.$content.'</div>';
 
 echo '</div>'; # end of the content div
 echo '<div class="col-12 col-lg-3 pl-2"><div class="side-sub-subnav sticky-top">';
 
 # Pipeline homepage & releases - key stats
-if(in_array($pagetab, ['', 'releases_stats'])){
+if(in_array($pagetab, ['', 'releases_stats','example_output'])){
   require_once('sidebar.php');
 }
 # Documentation - ToC
-else {
+else if(in_array($pagetab, ['usage', 'output'])){
   $toc = '<nav class="toc">';
   $toc .= generate_toc($content);
   # Add on the action buttons for the parameters docs

includes/pipeline_page/example_output.php

@@ -0,0 +1,95 @@
+<?php
+// Build the HTML for a pipeline documentation page.
+// Imported by public_html/pipeline.php - pulls a markdown file from GitHub and renders.
+$mainpage_container = false;
+$aws=true;
+ob_start();
+?>
+<div id="page-wrapper">
+    <div class="row">
+        <div class="col-lg-12">
+            <div class="row ">
+                <!-- Panel including title, breadcrumbs, and controls -->
+                <div class="col">
+                    <!-- Title and breadcrumbs -->
+                    <div class="d-flex align-items-center title-bar">
+                        <!-- App title -->
+                        <div class="title ">
+                            <i class="fab fa-aws fa-lg mr-3 mb-3"></i>
+                        </div>
+                        <!-- Bucket breadcrumbs -->
+                        <ul id="breadcrumb" class="breadcrumb">
+                            <li class="breadcrumb-item active">
+                                <a href="#"><i class="fas fa-circle-notch fa-spin"></i></a>
+                            </li>
+                        </ul>
+                        <button type="button" class="btn btn-outline-secondary copy-url ml-auto" data-target="">Copy Bucket S3 URL</button>
+                    </div>
+                    <!-- Controls -->
+                    <div id="navbuttons" class="">
+                        <div>
+                            <!-- Dual purpose: progress spinner and refresh button, plus object count -->
+                            <div class="btn-group" id="refresh">
+                                <span id="bucket-loader" class="btn fa fa-refresh fa-2x " title="Refresh"></span>
+                                <!-- <span id="badgecount" class="badge pull-right" title="Object count">42</span> -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Panel including S3 object table -->
+            <div class="panel-body">
+                <table class="table table-bordered table-hover responsive" id="tb-s3objects">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Folder</th>
+                            <th class="text-left">Last Modified</th>
+                            <th class="text-left">Size</th>
+                        </tr>
+                    </thead>
+                    <tbody id="tbody-s3objects"></tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+<div id="file-preview" class="card">
+</div>
+
+<div class="toast" id="url-copied" data-delay="5000" role="alert" aria-live="assertive" aria-atomic="true">
+  <div class="toast-header">
+    <img src="/assets/img/logo/nf-core-logo-square.png" class="rounded mr-2" alt="">
+    <strong class="mr-auto">URL copied to clipboard!</strong>
+    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <!-- <div class="toast-body">
+    Paste this command into your terminal to run the pipeline with a small test dataset.
+  </div> -->
+</div>
+
+<script type="text/javascript">
+    var HIDE_INDEX = true;
+    var prefix = window.location.hash.length>0 ? window.location.hash.substr(1) : '<?php echo $pipeline->name?>/results-<?php echo $release_hash ?>/'
+    var s3exp_config = {
+        Region: 'eu-west-1',
+        Bucket: 'nf-core-awsmegatests',
+        Prefix: prefix,
+        Delimiter: '/'
+    };
+    var s3exp_lister = null;
+    var s3exp_columns = {
+        key: 1,
+        folder: 2,
+        date: 3,
+        size: 4
+};
+
+</script>
+
+<?php
+$content = ob_get_contents();
+ob_end_clean();
+?>

public_html/assets/css/nf-core-dark.css

@@ -105,6 +105,11 @@ blockquote a {
   background-color: #616161;
   border-color: #616161;
 }
+.alert-warning{
+  color: #926d02;
+  background-color: #ffe79c;
+  border-color: #ffe79c;
+}
 .badge-light {
   color: #e5e6e7;
   background-color: #343434;
@@ -498,3 +503,20 @@ hr {
   color: #999;
   background-color: #181a1b;
 }
+.breadcrumb {
+  background-color: #616161;
+  /* border-color: #616161; */
+  /* color: #ededed; */
+}
+.breadcrumb{
+  color: rgba(255,255,255,.6);
+}
+.breadcrumb-item.active{
+  color: #ededed;
+}
+.breadcrumb-item+.breadcrumb-item::before{
+  color: rgba(255,255,255,.6);
+}
+#file-preview iframe{
+  background-color: #e5e6e7;
+}

public_html/assets/css/nf-core.css

@@ -434,8 +434,6 @@ h4:hover .header-link, h4:active .header-link, h4:focus .header-link,
   opacity: 1;
 }
 
-
-
 /*
  * Homepage
  */
@@ -1175,6 +1173,19 @@ Based on https://codepen.io/wintr/pen/beBJBb */
 .btn-show-hidden-params .collapsing {
   display: none;
 }
+
+.breadcrumb-item.active{
+  text-decoration: underline;
+}
+#tb-s3objects_wrapper tr i {
+  color: #159957;
+}
+#file-preview .card-body {
+  max-height: 60rem;
+  overflow-y: auto;
+}
+
 .text-small{
   font-size: 0.85rem;
 }
+