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

                >

                    ×

                </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"

                >

                    ×

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