--- a
+++ b/qiita_pet/templates/workflows.html
@@ -0,0 +1,174 @@
+{% extends sitebase.html %}
+{% block head %}
+{% from qiita_core.qiita_settings import qiita_config %}
+
+<script type="text/javascript">
+var layout = {
+  name: 'dagre',
+  rankDir: 'LR',
+  directed: true,
+  grid: true,
+  nodeDimensionsIncludeLabels: true,
+};
+var style = [{
+  selector: 'node',
+  style: {
+    'content': 'data(label)',
+    'background-color': 'data(color)',
+    'text-opacity': 0.7,
+    'text-wrap': "wrap",
+    'border-color': '#333',
+    'border-width': '3px'
+  }}, {
+  selector: 'edge',
+  style: {
+    'curve-style': 'bezier',
+    'target-arrow-shape': 'triangle'
+  }},
+];
+var panzoom_options =	{
+  zoomOnly: true,
+  sliderHandleIcon: 'fa fa-minus',
+  zoomInIcon: 'fa fa-plus',
+  zoomOutIcon: 'fa fa-minus',
+  resetIcon: 'fa fa-expand'
+};
+
+var colorScheme =  {
+  'command': {border: '#00cc00', background: '#7FE57F', highlight: {border: '#00cc00', background: '#a5eda5'}, 'color': '#333333'},
+  'artifact': {border: '#BBBBBB', background: '#FFFFFF', highlight: {border: '#999999', background: '#FFFFFF'}, 'color': '#333333'}
+}
+
+function format_title(name, params) {
+  var title = '<b>Name: ' + name + '</b></br>';
+  for (var key in params) {
+    title += '<b>' + key + '</b>: ' + params[key] + '</br>';
+  }
+  return title;
+}
+
+function makePopper(node) {
+  node.tippy = tippy(node.popperRef(), {
+    content: () => {
+      let content = document.createElement('div');
+      content.innerHTML = node.data('tooltip');
+      return content;
+    }
+  });
+}
+
+</script>
+
+{% end %}
+
+{% block content %}
+  {% if workflows %}
+    <h3>Recommended Default Workflows</h3>
+    <div class="row">
+      <div class="col-sm-10">
+        In this page you will find our recommendations on how to processes each data type available in Qiita and the minimum processing requirements to make your data public.
+        <br/><br/>
+        For convenience, there is an "Add Default Workflow" button for each preparation that will add the recommended workflow steps for your raw data which then you can process.
+        It is important to note however that some steps in this default workflow will not work with all raw data; for example, for target gene the workflow is based on the
+        default Earth Microbiome Project protocol and so assumes the uploaded data are multiplexed sequences with the reversed barcodes in your mapping file and index sequence
+        file (<a href="https://earthmicrobiome.org/protocols-and-standards/" target="_blank">see here</a> for more details). Thus, if the protocol does not apply to your data
+        you can still use the Default Workflow, however, you should first manually process your data using the appropriate steps until you have a defined step; in our example,
+        demultiplex your reads. After demultiplexing, the Default Workflow is safe to use with any protocol.
+        <br/><br/>
+        If you have already manually performed one of the processing steps in the Default Workflow pipeline, the "Add Default Workflow" button will not re-select those steps but
+        instead will only select any remaining steps that have not been completed. You can also add additional workflows on top of the recommended Default Workflow at any time.
+        <br/><br/>
+        Note that this is not a full inclusive list of data types accepted by Qiita but only those that have a defined workflow.
+      </div>
+    </div>
+    <h5>Hover on the spheres to get more information</h5>
+
+      {% for i, w in enumerate(workflows) %}
+        <div class="row">
+          <div class="col-sm-7" style="background-color: #DCDCDC; height: 650px" id="workflow_{{i}}"></div>
+          <div class="col-sm-5">
+            {% if not w['active'] %}
+              <h3 style="color:red">
+                ~~ NOT ACTIVE ~~
+              </h3>
+            {% end %}
+            <h4>
+              Application: {{', '.join(w['data_types'])}} ->
+              {% if w['parameters_sample'] or w['parameters_prep'] %}
+                  parameter restrictions:
+                  <br/>
+                  <ul>
+                  {% if w['parameters_sample'] %}
+                    <li>Sample Information</li>
+                    <ul>
+                    {% for k, v in w['parameters_sample'].items() %}
+                      <li>{{k}}: {{v}}</li>
+                    {% end %}
+                    </ul>
+                  {% end %}
+                  {% if w['parameters_prep'] %}
+                    <li>Prep Information</li>
+                    <ul>
+                    {% for k, v in w['parameters_prep'].items() %}
+                      <li>{{k}}: {{v}}</li>
+                    {% end %}
+                    </ul>
+                  {% end %}
+                  </ul>
+              {% else %}
+                NO parameters restrictions
+              {% end %}
+              <hr/>
+              {{w['name']}}
+            </h4>
+            <br/>
+            <div id="workflow_text_{{i}}">
+              {% raw w['description'] %}
+            </div>
+          </div>
+          <script type="text/javascript">
+            var cy_network_{{i}} = cytoscape({
+              container: document.getElementById('workflow_{{i}}'),
+              wheelSensitivity: .3,
+              layout: layout, style: style,
+              elements: {
+                nodes: [
+                  {% for node in w['nodes'] %}
+                    {% if node[0].startswith('params') %}
+                      {data: {id: "{{node[0]}}", shape: "dot", color: colorScheme['command']['background'], label: "{% raw node[2].replace(' | ', '\\n') %}", tooltip: format_title("{{node[3]}}", {% raw node[4] %})}},
+                    {% else %}
+                      {data: {id: "{{node[0]}}", shape: "dot", color: colorScheme['artifact']['background'], label: "{% raw node[2].replace(' | ', '\\n') %}", tooltip: "Artifact: {{node[2]}}"}},
+                    {% end %}
+                  {% end %}
+                ],
+                edges: [
+                  {% for f, t in w['edges'] %}
+                    {data: { source: "{{f}}", target: "{{t}}"}},
+                  {% end %}
+                ]
+              }
+            });
+            cy_network_{{i}}.panzoom(panzoom_options);
+            cy_network_{{i}}.nodes().lock();
+
+            cy_network_{{i}}.ready(function() {
+              cy_network_{{i}}.nodes().forEach(function(node) {
+                makePopper(node);
+              });
+            });
+
+            cy_network_{{i}}.nodes().unbind('mouseover');
+            cy_network_{{i}}.nodes().bind('mouseover', (event) => event.target.tippy.show());
+
+            cy_network_{{i}}.nodes().unbind('mouseout');
+            cy_network_{{i}}.nodes().bind('mouseout', (event) => event.target.tippy.hide());
+          </script>
+        </div>
+        <hr/>
+      {% end %}
+  {% else %}
+      <div id="jumbotron" class="jumbotron">
+          <h1><span class="glyphicon glyphicon-thumbs-down"></span> There are no workflows in this system. </h1>
+      </div>
+  {% end %}
+{% end %}