Replace jekyll-tabs plugin with custom code
[rnaseq-cwl-training.git] / _episodes / 03-running.md
index f3c9779dae1f1ce5c072d9ab97edf6f3e29aa52d..b7c6bb4b2f0dfceeb4367d7cef68900ef39bc691 100644 (file)
@@ -1,6 +1,6 @@
 ---
 title: "Running and Debugging a Workflow"
-teaching: 10
+teaching: 15
 exercises: 20
 questions:
 - "How do I provide input to run a workflow?"
@@ -31,8 +31,9 @@ plain strings that may or may not be file paths.
 
 Note: if you don't have example sequence data or the STAR index files, see [setup](/setup.html).
 
+{% assign tabs = "generic, arvados" | split: ", " %}
+{% capture generic_tab_content %}
 main-input.yaml
-
 ```
 fq:
   class: File
@@ -54,13 +55,48 @@ gtf:
 > ```
 > cwl-runner main.cwl main-input.yaml
 > ```
+> {: .language-bash }
 >
 > This may take a few minutes to run, and will print some amount of
 > logging.  The logging you see, how access other logs, and how to
 > track workflow progress will depend on your CWL runner platform.
+{: .challenge }
+{% endcapture %}
+
+{% capture arvados_tab_content %}
+main-input.yaml
+```
+fq:
+  class: File
+  location: keep:9178fe1b80a08a422dbe02adfd439764+925/raw_fastq/Mov10_oe_1.subset.fq
+  format: http://edamontology.org/format_1930
+genome:
+  class: Directory
+  location: keep:02a12ce9e2707610991bd29d38796b57+2912
+gtf:
+  class: File
+  location: keep:9178fe1b80a08a422dbe02adfd439764+925/reference_data/chr1-hg19_genes.gtf
+```
+{: .language-yaml }
+
+> ## Running the workflow
+>
+> If you are using VSCode with Arvados tasks, select `main.cwl` and
+> then use the `Run CWL Workflow on Arvados` task.
 >
-> {: .language-bash }
 {: .challenge }
+{% endcapture %}
+
+<div class="tabbed">
+  <ul class="tab">
+    {% for tab in tabs %}
+      <li><a href="#section-{{ tab }}">{{ tab }}</a></li>
+    {% endfor %}
+  </ul>
+
+  <section id="section-generic">{{ generic_tab_content | markdownify}}</section>
+  <section id="section-arvados">{{ arvados_tab_content | markdownify}}</section>
+</div>
 
 # Debugging the workflow
 
@@ -121,12 +157,24 @@ Resource requirements you can set include:
 * tmpdirMin: temporary directory available space
 * outdirMin: output directory available space
 
-After setting the RAM requirements, re-run the workflow.
+> ## Running the workflow
+>
+> Now that you've fixed the workflow, run it again.
+>
+{: .challenge }
+
+> ## Episode solution
+> * <a href="../assets/answers/ep3/main.cwl">main.cwl</a>
+{: .solution}
 
 # Workflow results
 
 The CWL runner will print a results JSON object to standard output.  It will look something like this (it may include additional fields).
 
+<div>
+{% tabs output %}
+
+{% tab output generic %}
 ```
 {
     "bam_sorted_indexed": {
@@ -152,7 +200,117 @@ The CWL runner will print a results JSON object to standard output.  It will loo
 }
 ```
 {: .language-yaml }
+{% endtab %}
+
+{% tab output arvados %}
+```
+{
+    "bam_sorted_indexed": {
+        "basename": "Aligned.sortedByCoord.out.bam",
+        "class": "File",
+        "location": "keep:2dbaaef5aefd558e37f14280e47091a9+327/Aligned.sortedByCoord.out.bam",
+        "secondaryFiles": [
+            {
+                "basename": "Aligned.sortedByCoord.out.bam.bai",
+                "class": "File",
+                "location": "keep:2dbaaef5aefd558e37f14280e47091a9+327/Aligned.sortedByCoord.out.bam.bai"
+            }
+        ],
+        "size": 25370695
+    },
+    "qc_html": {
+        "basename": "Mov10_oe_1.subset_fastqc.html",
+        "class": "File",
+        "location": "keep:2dbaaef5aefd558e37f14280e47091a9+327/Mov10_oe_1.subset_fastqc.html",
+        "size": 383589
+    }
+}
+```
+{: .language-yaml }
+{% endtab %}
+{% endtabs %}
+</div>
 
 This has a similar structure as `main-input.yaml`.  The each output
 parameter is listed, with the `location` field of each `File` object
 indicating where the output file can be found.
+
+<script>
+  (function() {
+    // Get relevant elements and collections
+    const tabbed = document.querySelector('.tabbed');
+    const tablist = tabbed.querySelector('ul');
+    const tabs = tablist.querySelectorAll('a');
+    const panels = tabbed.querySelectorAll('[id^="section"]');
+
+    // The tab switching function
+    const switchTab = (oldTab, newTab) => {
+      newTab.focus();
+      // Make the active tab focusable by the user (Tab key)
+      newTab.removeAttribute('tabindex');
+      // Set the selected state
+      newTab.setAttribute('aria-selected', 'true');
+      newTab.classList.add('active');
+      oldTab.removeAttribute('aria-selected');
+      oldTab.setAttribute('tabindex', '-1');
+      oldTab.classList.remove('active');
+      // Get the indices of the new and old tabs to find the correct
+      // tab panels to show and hide
+      let index = Array.prototype.indexOf.call(tabs, newTab);
+      let oldIndex = Array.prototype.indexOf.call(tabs, oldTab);
+      panels[oldIndex].hidden = true;
+      panels[index].hidden = false;
+    }
+
+    // Add the tablist role to the first <ul> in the .tabbed container
+    tablist.setAttribute('role', 'tablist');
+
+    // Add semantics are remove user focusability for each tab
+    Array.prototype.forEach.call(tabs, (tab, i) => {
+      tab.setAttribute('role', 'tab');
+      tab.setAttribute('id', 'tab' + (i + 1));
+      tab.setAttribute('tabindex', '-1');
+  //     tab.setAttribute('class', 'active');
+      tab.parentNode.setAttribute('role', 'presentation');
+
+      // Handle clicking of tabs for mouse users
+      tab.addEventListener('click', e => {
+        e.preventDefault();
+        let currentTab = tablist.querySelector('[aria-selected]');
+        if (e.currentTarget !== currentTab) {
+          switchTab(currentTab, e.currentTarget);
+        }
+      });
+
+      // Handle keydown events for keyboard users
+      tab.addEventListener('keydown', e => {
+        // Get the index of the current tab in the tabs node list
+        let index = Array.prototype.indexOf.call(tabs, e.currentTarget);
+        // Work out which key the user is pressing and
+        // Calculate the new tab's index where appropriate
+        let dir = e.which === 37 ? index - 1 : e.which === 39 ? index + 1 : e.which === 40 ? 'down' : null;
+        if (dir !== null) {
+          e.preventDefault();
+          // If the down key is pressed, move focus to the open panel,
+          // otherwise switch to the adjacent tab
+          dir === 'down' ? panels[i].focus() : tabs[dir] ? switchTab(e.currentTarget, tabs[dir]) : void 0;
+        }
+      });
+    });
+
+    // Add tab panel semantics and hide them all
+    Array.prototype.forEach.call(panels, (panel, i) => {
+      panel.setAttribute('role', 'tabpanel');
+      panel.setAttribute('tabindex', '-1');
+      let id = panel.getAttribute('id');
+      panel.setAttribute('aria-labelledby', tabs[i].id);
+      panel.hidden = true;
+    });
+
+    // Initially activate the first tab and reveal the first tab panel
+    tabs[0].removeAttribute('tabindex');
+    tabs[0].setAttribute('aria-selected', 'true');
+    tabs[0].setAttribute('class', 'active');
+    panels[0].hidden = false;
+  })();
+</script>