Merge pull request #4543 from galaxyproject/workflows

Update workflow listing page

_config.yml

@@ -55,6 +55,7 @@ javascript_bundles:
       - assets/js/bootstrap-toc.min.js
       - assets/js/clipboard.min.js
       - assets/js/list.min.js
+      - assets/js/[email protected]
       - assets/js/main.js
 
 # Conversion

_layouts/workflow-list.html

@@ -9,57 +9,50 @@ <h1 data-toc-skip>Workflows</h1>
     <p>These workflows are associated with <a href="../tutorial.html">{{ material.title }}</a></p>
     <p>To use these workflows in Galaxy you can either click the links to download the workflows, or you can right-click and copy the link to the workflow which can be used in the Galaxy form to import workflows.</p>
 
-    <table class="table table-striped">
-    <thead>
-        <tr>
-            <th>Workflow</th>
-            <th>Updated</th>
-            <th>Import</th>
-            <th>Has Tests</th>
-            <th>Tested</th>
-            <th>License</th>
-            <th>Creators</th>
-        </tr>
-    </thead>
-    <tbody>
+
+    <div class="row">
     {% for workflow in material.workflows %}
-        <tr>
-            <td><a href="{{ site.url }}{{ site.baseurl }}/{{ workflow.path }}">{{ workflow.workflow }}</a></td>
-            <td>{{ workflow.path | gtn_mod_date | date: "%b %-d, %Y" }}</td>
-            <td>
-                <span tabindex="0" role="button" class="workflow show-when-galaxy-proxy-active" data-workflow="{{ workflow.trs_endpoint }}">Launch in Tutorial Mode</span>
-		<abbr class="hide-when-galaxy-proxy-active" title="This feature only available when the GTN is accessed through Galaxy">What is tutorial mode?</abbr>
-                <br/>
-                <a href="https://usegalaxy.eu/workflows/trs_import?run_form=true&trs_url={{ workflow.trs_endpoint }}" class="btn btn-primary hide-when-galaxy-proxy-active">Import to UseGalaxy.eu</a>
-		<br/>
-                <a href="https://usegalaxy.org/workflows/trs_import?run_form=true&trs_url={{ workflow.trs_endpoint }}" class="btn btn-primary hide-when-galaxy-proxy-active">Import to UseGalaxy.org</a>
-		<br/>
-                <a href="https://usegalaxy.org.au/workflows/trs_import?run_form=true&trs_url={{ workflow.trs_endpoint }}" class="btn btn-primary hide-when-galaxy-proxy-active">Import to UseGalaxy.org.au</a>
-		<br/>
-                <a href="https://my.galaxy.training/?path=/workflows/trs_import%3Frun_form=true%26trs_url={{ workflow.trs_endpoint }}"
-		   class="btn btn-secondary hide-when-galaxy-proxy-active">Import to another server (≥23.0+ only!)</a>
-            </td>
-            <td>{% if workflow.tests %}✅{% else %}❌{% endif %}</td>
-            <td>
-		    {% if workflow.test_results != nil %}✅ View Results{% else %}❌{% endif %}
-	    </td>
-            <td>
-                {% if workflow.license %}
-                <a href="https://spdx.org/licenses/{{ workflow.license }}">{{ workflow.license }}</a>
-                {% else %}
-                None Specified, defaults to
-                <a href="https://spdx.org/licenses/CC-BY-4.0">CC-BY-4.0</a>
-                {% endif %}
-            </td>
-            <td>
-                {% for entity in workflow.creators %}
-                <span class="contributor-badge">{{ entity.name }}</span>
-                {% endfor %}
-            </td>
-        </tr>
-    {% endfor %}
-    </tbody>
-    </table>
+	<div class="card col-md-6">
+		<div class="card-body">
+			<h5 class="card-title">{{ workflow.title }}</h5>
+			<h6 class="card-subtitle mb-2 text-muted">
+				{% for entity in workflow.creators %}
+				{{ entity.name }}{% if forloop.last == false %}, {% endif %}
+				{% endfor %}
+			</h6>
+
+			<p class="card-text">
+				<small class="text-muted">Last updated {{ workflow.path | gtn_mod_date | date: "%b %-d, %Y" }}</small>
+			</p>
+			<p class="card-text">
+			<span tabindex="0" role="button" class="workflow show-when-galaxy-proxy-active" data-workflow="{{ workflow.trs_endpoint }}">Launch in Tutorial Mode</span><br/>
+
+			License: 
+				{% if workflow.license %}
+				<a href="https://spdx.org/licenses/{{ workflow.license }}">{{ workflow.license }}</a>
+				{% else %}
+				None Specified, defaults to
+				<a href="https://spdx.org/licenses/CC-BY-4.0">CC-BY-4.0</a>
+				{% endif %}
+				<br/>
+			Tests: {% if workflow.tests %}✅{% else %}❌{% endif %}
+			Results: {% if workflow.test_results == nil %}Not yet automated{% endif %}
+			</p>
+
+			<a href="{{ site.url }}{{ site.baseurl }}/{{ workflow.path }}" class="btn btn-primary">Download Galaxy Workflow.ga</a>
+			<a href="https://usegalaxy.eu/workflows/trs_import?run_form=true&trs_url={{ workflow.trs_endpoint }}" class="btn btn-secondary hide-when-galaxy-proxy-active">EU</a>
+			<a href="https://usegalaxy.org/workflows/trs_import?run_form=true&trs_url={{ workflow.trs_endpoint }}" class="btn btn-secondary hide-when-galaxy-proxy-active">US</a>
+			<a href="https://usegalaxy.org.au/workflows/trs_import?run_form=true&trs_url={{ workflow.trs_endpoint }}" class="btn btn-secondary hide-when-galaxy-proxy-active">AU</a>
+			<a href="https://my.galaxy.training/?path=/workflows/trs_import%3Frun_form=true%26trs_url={{ workflow.trs_endpoint }}"
+			   class="btn btn-secondary hide-when-galaxy-proxy-active">Import to another server (≥23.0+ only!)</a>
+
+	</div>
+	<pre class="mermaid">{{ workflow.mermaid }}
+	</pre>
+</div>
+{% endfor %}
+
+</div>
 
    <h1 style="margin-top:2em">Importing into Galaxy</h1>
    Below are the instructions for importing these workflows directly into your Galaxy server of choice to start using them!

_plugins/jekyll-topic-filter.rb

@@ -363,6 +363,39 @@ def self.collate_materials(site, pages)
     interesting
   end
 
+  def self.mermaid(wf)
+    # We're converting it to Mermaid.js
+    # flowchart TD
+    #     A[Start] --> B{Is it?}
+    #     B -- Yes --> C[OK]
+    #     C --> D[Rethink]
+    #     D --> B
+    #     B -- No ----> E[End]
+
+    output = "flowchart TD\n"
+    wf['steps'].keys.each do |id|
+      step = wf['steps'][id]
+      output += "  #{id}[\"#{step['name']}\"];\n"
+    end
+
+    wf['steps'].keys.each do |id|
+      # Look at the 'input connections' to this step
+      step = wf['steps'][id]
+      step['input_connections'].each do |_, v|
+        # if v is a list
+        if v.is_a?(Array)
+          v.each do |v2|
+            output += "  #{v2['id']} -->|#{v2['output_name']}| #{id};\n"
+          end
+        else
+          output += "  #{v['id']} -->|#{v['output_name']}| #{id};\n"
+        end
+      end
+    end
+
+    output
+  end
+
   def self.resolve_material(site, material)
     # We've already
     # looked in every /topic/*/tutorials/* folder, and turn these disparate
@@ -466,6 +499,7 @@ def self.resolve_material(site, material)
         wf_json = JSON.parse(File.read(wf_path))
         license = wf_json['license']
         creators = wf_json['creator'] || []
+        wftitle = wf_json['name']
 
         # /galaxy-intro-101-workflow.eu.json
         workflow_test_results = Dir.glob(wf_path.gsub(/.ga$/, '.*.json'))
@@ -487,8 +521,10 @@ def self.resolve_material(site, material)
           'license' => license,
           'creators' => creators,
           'name' => wf_json['name'],
+          'title' => wftitle,
           'test_results' => workflow_test_outputs,
           'modified' => File.mtime(wf_path),
+          'mermaid' => mermaid(wf_json),
         }
       end
     end

assets/css/main.scss

@@ -691,10 +691,13 @@ blockquote {
 		border-bottom: 1px solid var(--border-light);
 		padding: 1.25rem;
 		color: var(--brand-color-contrast);
+		margin-left: -15px; // BS has a 15px margin on cards, this makes the card title fill the card.
+		margin-right: -15px;
 	}
 
 	.card-body {
 		padding: 0em;
+		flex: 0 1 auto; // Override BS for the workflow listing.
 	}
 }