{% extends sitebase.html %} {% block head %}
<link
    rel="stylesheet"
    href="{% raw qiita_config.portal_dir %}/static/vendor/css/select2.min.css"
    type="text/css"
/>
<script
    type="text/javascript"
    src="{% raw qiita_config.portal_dir %}/static/vendor/js/select2.min.js"
></script>
<script
    type="text/javascript"
    src="{% raw qiita_config.portal_dir %}/static/js/sharing.js"
></script>

<script type="text/javascript">
    /*
     * update_analysis_reservation will update the analysis resevation
     *
     * @param analysis_id: The id of the analysis to update
     * @param reservation: The reservation
     *
     */

    function update_analysis_reservation(analysis_id, reservation) {
      $.ajax({
        url: '{% raw qiita_config.portal_dir %}/analysis/description/{{analysis_id}}/',
        type: 'PATCH',
        data: {'op': 'replace', 'path': 'reservation', 'value': reservation},
        success: function(data) {
          $('#analysis-reservation-modal-view').modal('hide');
          if(data.status == 'error') {
            bootstrapAlert(data.message, "danger");
          } else {
            $('#reservation').val(reservation);
            $('#analysis-reservation-modal-data').text("Reservation: " + reservation);
          }
        }
      });

    }

    $(document).ready(function(){
      // Create the processing network view object
      newProcessingNetworkVue("#analysis-graph-vue");

      // Show the alert message, if any
      {% if alert_msg %}
        bootstrapAlert("{{alert_msg}}", "{{alert_type}}");
      {% end %}

      // starting share
      init_sharing("{% raw qiita_config.portal_dir %}");
      update_share();

      $('#studies-artifacts-table').dataTable();

    });
</script>
<style>
    .graph {
        width: 80%;
        height: 400px;
        border: 1px solid #ccc;
    }
</style>
{% end %} {% block content %}

<div class="row">
    <div class="col">
        <form
            action="{% raw qiita_config.portal_dir %}/analysis/description/{{analysis_id}}/"
            method="post"
            id="make-public"
        >
            <input name="analysis_id" value="{{analysis_id}}" type="hidden" />
        </form>
        <h2>
            {{analysis_name}} - ID {{analysis_id}}
            <small>
                ({{analysis_description}}) - {% if analysis_is_public %}
                <b>Public</b>
                {% else %}
                <b>Private</b>
                {% end %} {% if analysis_mapping_id is not None %}
                <a
                    class="btn btn-default"
                    href="{% raw qiita_config.portal_dir %}/download/{{analysis_mapping_id}}"
                    ><span class="glyphicon glyphicon-download-alt"></span>
                    Mapping file</a
                >
                {% end %} {% if not analysis_is_public %}
                <a
                    class="btn btn-default"
                    onclick="if (confirm('Are you sure you want to make this analysis public? Note that this will not allow you to delete your analysis later.')) { $('#make-public').submit(); }"
                    ><span class="glyphicon glyphicon-globe"></span> Make
                    analysis public</a
                >
                {% end %}
                <a
                    class="btn btn-default"
                    data-toggle="modal"
                    data-target="#analysis-reservation-modal-view"
                    ><span
                        class="glyphicon glyphicon-pencil"
                        name="analysis-reservation-modal-data"
                        id="analysis-reservation-modal-data"
                    >
                        Reservation: {% raw analysis_reservation %}</span
                    ></a
                >
            </small>
        </h2>
        Owner:
        <a href="mailto:{{analysis_owner}}">{{analysis_owner}}</a>
        <br />
        <a
            class="btn btn-info"
            data-toggle="modal"
            data-target="#share-analysis-modal-view"
            onclick="modify_sharing({{analysis_id}});"
            ><span class="glyphicon glyphicon-share"></span
        ></a>
        Shared with: <span id="shared_html_{{analysis_id}}"></span>
        <div class="row">
            <div class="col-md-12">
                <b>Studies and artifacts used in this analysis:</b>
                <button
                    class="btn btn-default"
                    data-toggle="collapse"
                    data-target="#studies-artifacts-div"
                >
                    <span class="glyphicon glyphicon-eye-open"></span>
                    Show/Hide
                </button>
                <div
                    id="studies-artifacts-div"
                    class="collapse"
                    style="
                        padding: 10px 10px 10px 10px;
                        border-radius: 10px;
                        background: #eee;
                    "
                >
                    <table
                        id="studies-artifacts-table"
                        class="display table-bordered table-hover"
                        style="width: 100%"
                    >
                        <thead>
                            <tr>
                                <th>Artifact ID</th>
                                <th>Study IDs</th>
                                <th>Prep IDs</th>
                                <th>Study Title</th>
                                <th>Parent Processing</th>
                                <th>Merging Scheme</th>
                                <th>Total Samples Selected</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for aid, data in artifacts.items() %}
                            <tr>
                                <td>{{aid}}</td>
                                <td>{{data[0]}}</td>
                                <td>{{', '.join(data[4])}}</td>
                                <td>
                                    <a
                                        href="{% raw qiita_config.portal_dir %}/study/description/{{data[0]}}"
                                        target="_blank"
                                        >{{data[1]}}</a
                                    >
                                </td>
                                <td>{{data[2][1]}}</td>
                                <td>{{data[2][0]}}</td>
                                <td>{{ len(data[3]) }}</td>
                            </tr>
                            {% end %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <hr />
</div>
<div id="analysis-graph-vue" style="margin-left: 15px">
    <processing-graph
        v-bind:is-analysis-pipeline="true"
        ref="procGraph"
        portal="{% raw qiita_config.portal_dir %}"
        graph-endpoint="/analysis/description/{{analysis_id}}/graph/"
        jobs-endpoint="/analysis/description/{{analysis_id}}/jobs/"
        element-id="{{analysis_id}}"
    ></processing-graph>
</div>
<div class="row" id="processing-content-div"></div>

<!-- Modal used to share the analysis -->
<div
    class="modal fade"
    id="share-analysis-modal-view"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myModalLabel"
    aria-hidden="true"
>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button
                    type="button"
                    class="close"
                    data-dismiss="modal"
                    aria-hidden="true"
                >
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Modify Sharing Settings
                </h4>
            </div>
            <div class="modal-body">
                <div>
                    <div class="form-group">
                        <label for="shares-select">Add/Remove Users</label>
                        <select
                            multiple
                            class="analysis"
                            id="shares-select"
                            data-share-url="{% raw qiita_config.portal_dir %}/analysis/sharing/"
                            data-current-id="{{analysis_id}}"
                            style="width: 50%"
                        ></select>
                        <br />
                        <br />
                        Adding or removing email addresses automatically updates
                        who the analysis is shared with. Once you click the `X`
                        or give mouse focus to the analysis page you'll see your
                        new sharing settings.
                    </div>
                </div>
            </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

<!-- Modal used to change reservation -->
<div
    class="modal fade"
    id="analysis-reservation-modal-view"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myModalLabel"
    aria-hidden="true"
>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button
                    type="button"
                    class="close"
                    data-dismiss="modal"
                    aria-hidden="true"
                >
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Modify Reservation Setting
                </h4>
            </div>
            <div class="modal-body">
                <div>
                    <div class="form-group">
                        <label for="shares-select"
                            >Reservation (optional)</label
                        >
                        <input
                            type="text"
                            class="form-control"
                            id="reservation"
                            name="reservation"
                            value="{{ analysis_reservation }}"
                            placeholder="Reservation (optional)"
                        />
                        <button
                            id="update-reservation-btn"
                            class="btn btn-default"
                            onclick="update_analysis_reservation({{analysis_id}}, $('#reservation').val());"
                        >
                            Update
                        </button>
                    </div>
                </div>
            </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

{% end %}