{% 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 %}