From: Peter Amstutz <peter.amstutz@curii.com>
Date: Tue, 1 Feb 2022 18:14:24 +0000 (-0500)
Subject: Fix tabs, improve setup documentation to be explicit about vscode
X-Git-Url: https://git.arvados.org/rnaseq-cwl-training.git/commitdiff_plain/1b65f91214e61a755671475db8e0de708d7ed27b

Fix tabs, improve setup documentation to be explicit about vscode

Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz@curii.com>
---

diff --git a/_episodes/03-running.md b/_episodes/03-running.md
index e9f740a..9229172 100644
--- a/_episodes/03-running.md
+++ b/_episodes/03-running.md
@@ -31,8 +31,7 @@ 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 %}
+{% capture generic_input_tab_content %}
 main-input.yaml
 ```
 fq:
@@ -63,7 +62,7 @@ gtf:
 {: .challenge }
 {% endcapture %}
 
-{% capture arvados_tab_content %}
+{% capture arvados_input_tab_content %}
 main-input.yaml
 ```
 fq:
@@ -89,13 +88,12 @@ gtf:
 
 <div class="tabbed">
   <ul class="tab">
-    {% for tab in tabs %}
-      <li><a href="#section-{{ tab }}">{{ tab }}</a></li>
-    {% endfor %}
+      <li><a href="#section-generic-input">generic</a></li>
+      <li><a href="#section-arvados-input">arvados</a></li>
   </ul>
 
-  <section id="section-generic">{{ generic_tab_content | markdownify}}</section>
-  <section id="section-arvados">{{ arvados_tab_content | markdownify}}</section>
+  <section id="section-generic-input">{{ generic_input_tab_content | markdownify}}</section>
+  <section id="section-arvados-input">{{ arvados_input_tab_content | markdownify}}</section>
 </div>
 
 # Debugging the workflow
@@ -171,10 +169,8 @@ Resource requirements you can set include:
 
 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 %}
+{% capture generic_output_tab_content %}
 
-{% tab output generic %}
 ```
 {
     "bam_sorted_indexed": {
@@ -200,9 +196,9 @@ The CWL runner will print a results JSON object to standard output.  It will loo
 }
 ```
 {: .language-yaml }
-{% endtab %}
+{% endcapture %}
 
-{% tab output arvados %}
+{% capture arvados_output_tab_content %}
 ```
 {
     "bam_sorted_indexed": {
@@ -227,11 +223,18 @@ The CWL runner will print a results JSON object to standard output.  It will loo
 }
 ```
 {: .language-yaml }
-{% endtab %}
-{% endtabs %}
+{% endcapture %}
+
+<div class="tabbed">
+  <ul class="tab">
+      <li><a href="#section-generic-output">generic</a></li>
+      <li><a href="#section-arvados-output">arvados</a></li>
+  </ul>
+
+  <section id="section-generic-output">{{ generic_output_tab_content | markdownify}}</section>
+  <section id="section-arvados-output">{{ arvados_output_tab_content | markdownify}}</section>
 </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.
-
diff --git a/assets/css/lesson.scss b/assets/css/lesson.scss
index 9334e37..d19fa2b 100644
--- a/assets/css/lesson.scss
+++ b/assets/css/lesson.scss
@@ -227,6 +227,12 @@ article img {
     max-width: 100%;
 }
 
+li img {
+    display: inline;
+    margin: 3px auto;
+    max-width: 100%;
+}
+
 article h2 {
   margin: 48px 0 16px;
   border-bottom: solid 1px #eaecef;
diff --git a/assets/img/Explorer.png b/assets/img/Explorer.png
new file mode 100644
index 0000000..f91128b
Binary files /dev/null and b/assets/img/Explorer.png differ
diff --git a/assets/js/tabs.js b/assets/js/tabs.js
index 0e5b795..2a72abd 100644
--- a/assets/js/tabs.js
+++ b/assets/js/tabs.js
@@ -1,6 +1,9 @@
 window.addEventListener('load', function() {
   // Get relevant elements and collections
-  const tabbed = document.querySelector('.tabbed');
+    const allTabbed = document.querySelectorAll('.tabbed');
+
+    allTabbed.forEach((tabbed) => {
+
   const tablist = tabbed.querySelector('ul');
   const tabs = tablist.querySelectorAll('a');
   const panels = tabbed.querySelectorAll('[id^="section"]');
@@ -74,4 +77,6 @@ window.addEventListener('load', function() {
   tabs[0].setAttribute('aria-selected', 'true');
   tabs[0].setAttribute('class', 'active');
   panels[0].hidden = false;
-});
+    });
+}
+);
diff --git a/setup.md b/setup.md
index 4e144c2..8a30e91 100644
--- a/setup.md
+++ b/setup.md
@@ -2,9 +2,7 @@
 title: Setup
 ---
 
-<div>
-{% tabs setup %}
-{% tab setup generic %}
+{% capture generic_tab_content %}
 
 # Setting up a practice repository
 
@@ -75,24 +73,29 @@ cwl-runner bio-cwl-tools/STAR/STAR-Index.cwl chr1-star-index.yaml
 ```
 {: .language-bash }
 
+{% endcapture %}
 
-{% endtab %}
-
-{% tab setup arvados %}
+{% capture arvados_tab_content %}
 
 # Setting up a practice repository
 
 We will create a new git repository and import a library of existing
 tool definitions that will help us build our workflow.
 
-When using the recommended VSCode environment to develop on Arvados, start by forking this repository:
-```
-git clone https://github.com/arvados/arvados-vscode-cwl-template.git rnaseq-cwl-training-exercises
-```
-{: .language-bash }
+When using the recommended [VSCode environment to develop on Arvados](https://doc.arvados.org/v2.3/user/cwl/arvados-vscode-training.html),
+start by forking the
+[arvados-vscode-cwl-template](https://github.com/arvados/arvados-vscode-cwl-template)
+repository.
 
-Next, import bio-cwl-tools with this command:
+1. Vscode: On the left sidebar, choose `Explorer` ![](../assets/img/Explorer.png)
+1. Select `Clone Repository` and enter [https://github.com/arvados/arvados-vscode-cwl-template](https://github.com/arvados/arvados-vscode-cwl-template), then click `Open`
+1. If asked `Would you like to open the cloned repository?` choose `Open`
 
+Next, import the [bio-cwl-tools](https://github.com/common-workflow-library/bio-cwl-tools) repository:
+
+1. Vscode: In the top menu, select `Terminal` &rarr; `New Terminal`
+1. This will open a terminal window in the lower part of the screen
+1. Run this command:
 ```
 git submodule add https://github.com/common-workflow-library/bio-cwl-tools.git
 ```
@@ -110,7 +113,12 @@ git submodule add https://github.com/common-workflow-library/bio-cwl-tools.git
 > you do not need to perform this download step.
 {: .callout}
 
-Use `arv-copy` to copy the collection:
+1. Go to https://workbench2.jutro.arvadosapi.com and sign in, this will create an account
+2. Go to `Get an API token` under the user menu
+3. Log into the shell node of your Arvados cluster
+4. On the shell node, copy the host name and token for the 'jutro' cluster into the file `~/.config/arvados/jutro.conf` as described on the page for [arv-copy](https://doc.arvados.org/user/topics/arv-copy.html).
+
+Now, on shell node of your Arvados cluster, use `arv-copy` to copy the collection:
 
 ```
 arv-copy --src jutro 9178fe1b80a08a422dbe02adfd439764+925
@@ -163,13 +171,16 @@ arvados-cwl-runner bio-cwl-tools/STAR/STAR-Index.cwl chr1-star-index.yaml
 ```
 {: .language-bash }
 
-## Sneak peak
-If you want to jump ahead, here are links to some of the CWL concepts you just used
-  - [YAML array] (https://www.commonwl.org/user_guide/yaml/#arrays)
-  - [CWL array inputs] (https://www.commonwl.org/user_guide/09-array-inputs/index.html)
-  
-{% endtab %}
-{% endtabs %}
+{% endcapture %}
+
+<div class="tabbed">
+  <ul class="tab">
+      <li><a href="#section-generic">generic</a></li>
+      <li><a href="#section-arvados">arvados</a></li>
+  </ul>
+
+  <section id="section-generic">{{ generic_tab_content | markdownify}}</section>
+  <section id="section-arvados">{{ arvados_tab_content | markdownify}}</section>
 </div>
 
 {% include links.md %}