sequence_edit.html

{% extends "base.html" %}
{% block pagetitle %} Edit Sequence - {{ sequence_name }}{% endblock %}

{% block content %}
    {% include 'sequence_popup.html' %}
    {{ super() }}
{% endblock %}

{% block c_body %}

<form action="{{ url_for('edit_sequence', id=id) }}" method="POST" name="form" class="form-horizontal" enctype="multipart/form-data">
    <div>
        <ul class="nav nav-tabs" role="tablist" id="myTab">
            <li role="presentation" class="active"><a href="#det" aria-controls="det" role="tab" data-toggle="tab" id="tab-det">Details</a></li>
            <li role="presentation"><a href="#inf" aria-controls="inf" role="tab" data-toggle="tab" id="tab-inf">Evidence</a></li>
            <li role="presentation"><a href="#ack" aria-controls="ack" role="tab" data-toggle="tab" id="tab-ack">Acknowledgements</a></li>
            <li role="presentation"><a href="#note" aria-controls="notes" role="tab" data-toggle="tab" id="tab-notes">Notes</a></li>
            <li role="presentation"><a href="#history" aria-controls="history" role="tab" data-toggle="tab" id="tab-history">History</a></li>
        </ul>


        {{ form.hidden_tag() }}

        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="det">
                <div class="row">
                    <h3 class="col-sm-offset-1 col-sm-11">Details</h3>
                    {% include 'gene_description_form.html' %}
                </div>
            </div>

            <div role="tabpanel" class="tab-pane" id="inf">
                <div class="row">
                    <h3 class="col-sm-offset-1 col-sm-11">Inferences</h3>
                    <p class="col-sm-offset-1 col-sm-11">The table below lists the submissions, and the inferences within them, on which this published sequence should be based.
                    The list may be short when the sequence is first published, containing, for example, reference to just a single submission, but is expected to grow
                    over time as additional inferences are submitted. </p>
                    <p class="col-sm-offset-1 col-sm-11">'Sequence Match' indicates whether the inference exactly matches the sequence, and clicking on the
                    tick or cross will provide an alignment. Mismatches may indicate errors, but may be caused, for example, by the inclusion of leader sequences, or nucleotides in the inference
                    which do not in IARC's opinion have sufficient evidence for inclusion in the sequence.</p>
                    <div class="col-sm-10 col-sm-offset-1">
                        <div class="form-group">
                           {{ tables['inferred_sequence'] }}
                            <input type="submit" value="Add Inference" class="btn btn-default" id="add_inference_btn" name="add_inference_btn" data-action="add_inference">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <h3 class="col-sm-offset-1 col-sm-11">Supporting Observations</h3>
                    <p class="col-sm-offset-1 col-sm-11">Sequences in other submitted genotypes which are affirmed by IARC to support the inference: </p>
                    <div class="col-sm-10 col-sm-offset-1">
                        <div class="form-group">
                            {{ tables['supporting_observations'] }}
                        </div>
                    </div>
                </div>

                <div class="row">
                    <h3 class="col-sm-offset-1 col-sm-11">Observations in VDJbase</h3>
                    <p class="col-sm-offset-1 col-sm-11">Inferred sequences in VDJbase that match this sequence: </p>
                    <div class="col-sm-10 col-sm-offset-1">
                        <div class="form-group">
                            {{ tables['vdjbase_matches'] }}
                        </div>
                    </div>
                </div>

                <div class="row">
                    <h3 class="col-sm-offset-1 col-sm-11">Genomic Support</h3>
                    <p class="col-sm-offset-1 col-sm-11">Genomically-derived sequences that support the inference: </p>
                    <div class="col-sm-10 col-sm-offset-1">
                        <div class="form-group">
                            {{ tables['genomic_support'] }}
                            <input type="submit" value="Add Genomic" class="btn btn-default" id="add_genomic_btn" name="add_genomic_btn" data-action="add_genomic">
                        </div>
                    </div>
                </div>

                {% if  tables['matches'] %}
                    <div class="row">
                        <h3 class="col-sm-offset-1 col-sm-11">Published/Draft Sequences Matching Inferences in This Submission</h3>
                        <p class="col-sm-offset-1 col-sm-11">Matching or near-matching inferred sequences in submissions not currently referenced here:</p>
                        <div class="col-sm-10 col-sm-offset-1">
                            <div class="form-group">
                                {{ tables['matches'] }}
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>

            <div role="tabpanel" class="tab-pane" id="ack">
                <div class="row">
                    <h3 class="col-sm-offset-1 col-sm-11">Acknowledgements</h3>
                    <p class="col-sm-offset-1 col-sm-11">Please list those individuals who should be acknowledged as contributing to this sequence.</p>
                        <a name="ack"> </a>
                        <div class="col-sm-9 col-sm-offset-1">
                            {% include 'acknowledgement_form.html' %}
                        </div>
                </div>
            </div>

            <div role="tabpanel" class="tab-pane" id="note">
                <div class="row">
                    {% include 'gene_description_notes_form.html' %}
                </div>
            </div>

            <div role="tabpanel" class="tab-pane" id="history">
                <div class="row">
                    <h3 class="col-sm-offset-1 col-sm-11">History</h3>
                    <div class="col-sm-10 col-sm-offset-1">
                        {% for t in tables['history'] %}
                            {{ t }}
                        {% endfor %}
                    </div>
                </div>
                {% if tables['diffs'] %}
                    <div class="row">
                        <h3 class="col-sm-offset-1 col-sm-11">Changes from previous version</h3>
                        <div class="col-sm-10 col-sm-offset-1">
                            {{ tables['diffs'] }}
                        </div>
                    </div>
                {% endif %}
                <h3></h3>
            </div>
        </div>

        <div class="modal fade" id="messageModal" tabindex="-1" role="dialog" aria-labelledby="messageModalLabel">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="messageModallLabel">New message</h4>
              </div>
              <div class="modal-body">
                  <div class="modal-instructions">
                  </div>
                  <br>
                  {% include 'journal_entry_form.html' %}

                  {{ form.type(class="hidden") }}
                  {{ form.action(class="hidden") }}
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <input type="submit" value="Save" class="btn" name="history_btn" id="history_btn">
              </div>
            </div>
          </div>
        </div>

        <input type="submit" value="Save Draft" class="btn btn-primary col-sm-offset-1" id="save_draft_btn" name="save_draft_btn">
        <button type="button" class="btn btn-warning tablebutton" id="publish_btn" data-toggle="modal" data-target="#messageModal" data-type="history" data-action="published"
                data-header="Publish Affirmation" data-instr="Please provide brief notes on this version"
                data-title="Sequence {{ sequence_name }} Version {{ version }} - Published" id="published">Publish</button>
    </div>

    {% include 'dupe_gene_notes_modal.html' %}
</form>

{% endblock %}

{% block scripts %}
    {{ super() }}
    <script src="/static/script/helpers.js"></script>


    <script>

    $('.add_inf_button').on('click', function(event) {
        var id = $(this).data('id');
        var inf = $(this).data('inf');
        $.ajax({
            type: "POST",
            url: '/add_inferred_sequence',
            data: {
                'id': id,
                'inf': inf
            },
            success: function() {
                window.location.reload(true);
            },
            error: function() {
                console.log("failure");
            }
        })
    });

    $('.del_inf_button').on('click', function(event) {
        var id = $(this).data('id');
        var inf = $(this).data('inf');
        $.ajax({
            type: "POST",
            url: '/delete_inferred_sequence',
            data: {
                'id': id,
                'inf': inf
            },
            success: function() {
                window.location.reload(true);
            },
            error: function() {
                console.log("failure");
            }
        })
    });

    $('.del_obs_button').on('click', function(event) {
        var id = $(this).data('id');
        var gid = $(this).data('gid');
        $.ajax({
            type: "POST",
            url: '/delete_supporting_observation',
            data: {
                'id': id,
                'gid': gid
            },
            success: function() {
                window.location.reload(true);
            },
            error: function() {
                console.log("failure");
            }
        })
    });

    $('.add_obs_button').on('click', function(event) {
        var id = $(this).data('id');
        var gid = $(this).data('gid');
        $.ajax({
            type: "POST",
            url: '/add_supporting_observation',
            data: {
                'id': id,
                'gid': gid
            },
            success: function() {
                window.location.reload(true);
            },
            error: function() {
                console.log("failure");
            }
        })
    });

    $('.del_genomic_button').on('click', function(event) {
        var id = $(this).data('id');
        var gen = $(this).data('gen');
        $.ajax({
            type: "POST",
            url: '/delete_genomic_support',
            data: {
                'id': id,
                'gen': gen
            },
            success: function() {
                window.location.reload(true);
            },
            error: function() {
                console.log("failure");
            }
        })
    });

    function utr_display() {
        if($("#inference_type").val() != 'Rearranged Only') {
            if($("#sequence_type").val() == 'V') {
                $("label[for='utr_5_prime_start']").parent().show();
                $("label[for='utr_5_prime_end']").parent().show();
                $("label[for='leader_1_start']").parent().show();
                $("label[for='leader_1_end']").parent().show();
                $("label[for='leader_2_start']").parent().show();
                $("label[for='leader_2_end']").parent().show();
                $("label[for='v_rs_start']").parent().show();
                $("label[for='v_rs_end']").parent().show();
            } else {
                $("label[for='utr_5_prime_start']").parent().hide();
                $("label[for='utr_5_prime_end']").parent().hide();
                $("label[for='leader_1_start']").parent().hide();
                $("label[for='leader_1_end']").parent().hide();
                $("label[for='leader_2_start']").parent().hide();
                $("label[for='leader_2_end']").parent().hide();
                $("label[for='v_rs_start']").parent().hide();
                $("label[for='v_rs_end']").parent().hide();
            }
            if($("#sequence_type").val() == 'D') {
                $("label[for='d_rs_3_prime_start']").parent().show();
                $("label[for='d_rs_3_prime_end']").parent().show();
                $("label[for='d_rs_5_prime_start']").parent().show();
                $("label[for='d_rs_5_prime_end']").parent().show();
            } else {
                $("label[for='d_rs_3_prime_start']").parent().hide();
                $("label[for='d_rs_3_prime_end']").parent().hide();
                $("label[for='d_rs_5_prime_start']").parent().hide();
                $("label[for='d_rs_5_prime_end']").parent().hide();
            }
            if($("#sequence_type").val() == 'J') {
                $("label[for='j_rs_start']").parent().show();
                $("label[for='j_rs_end']").parent().show();
            } else {
                $("label[for='j_rs_start']").parent().hide();
                $("label[for='j_rs_end']").parent().hide();
            }
        } else {
            if($("#sequence_type").val() == 'V') {
                $("label[for='leader_1_start']").parent().show();
                $("label[for='leader_1_end']").parent().show();
                $("label[for='leader_2_start']").parent().show();
                $("label[for='leader_2_end']").parent().show();
                $("label[for='utr_5_prime_start']").parent().show();
                $("label[for='utr_5_prime_end']").parent().show();
            } else {
                $("label[for='leader_1_start']").parent().hide();
                $("label[for='leader_1_end']").parent().hide();
                $("label[for='leader_2_start']").parent().hide();
                $("label[for='leader_2_end']").parent().hide();
                $("label[for='utr_5_prime_start']").parent().hide();
                $("label[for='utr_5_prime_end']").parent().hide();
            }
            $("label[for='v_rs_start']").parent().hide();
            $("label[for='v_rs_end']").parent().hide();
            $("label[for='d_rs_3_prime_start']").parent().hide();
            $("label[for='d_rs_3_prime_end']").parent().hide();
            $("label[for='d_rs_5_prime_start']").parent().hide();
            $("label[for='d_rs_5_prime_end']").parent().hide();
            $("label[for='j_rs_start']").parent().hide();
            $("label[for='j_rs_end']").parent().hide();
        }
    }

    function j_display() {
        if($("#sequence_type").val() == 'J') {
            $("label[for='j_cdr3_end']").parent().show();
            $("label[for='codon_frame']").parent().show();
        } else {
            $("label[for='j_cdr3_end']").parent().hide();
            $("label[for='codon_frame']").parent().hide();
        }
    }

    function ext_display() {
        if($("#inferred_extension:checked").val()) {
            $("label[for='ext_3prime']").parent().show();
            $("label[for='start_3prime_ext']").parent().show();
            $("label[for='end_3prime_ext']").parent().show();
            $("label[for='ext_5prime']").parent().show();
            $("label[for='start_5prime_ext']").parent().show();
            $("label[for='end_5prime_ext']").parent().show();
        } else {
            $("label[for='ext_3prime']").parent().hide();
            $("label[for='start_3prime_ext']").parent().hide();
            $("label[for='end_3prime_ext']").parent().hide();
            $("label[for='ext_5prime']").parent().hide();
            $("label[for='start_5prime_ext']").parent().hide();
            $("label[for='end_5prime_ext']").parent().hide();
        }
    }

    $("#inferred_extension").change( function()
    {
        ext_display()
    });

    $(document).ready(function ()
    {
        utr_display();
        j_display();
        ext_display()

        {% if form.title.errors or form.body.errors %}
           $('#publish_btn').trigger('click');
        {% endif %}
    });


    $("#inference_type").change( function()
    {
        utr_display();
        j_display()
    });

    $("#sequence_type").change( function()
    {
        utr_display();
        j_display()
    });

    // Change hash for page-reload
    $('.nav-tabs a').on('shown.bs.tab', function (e) {
        window.location.hash = e.target.hash;
    });

    // Javascript to enable link to tab
    var url = document.location.toString();
    var jump = '';

    skip_to_anchor = function(anchor) {
        $('.nav-tabs a[href="#' + anchor + '"]').tab('show');
    };

    {% if jump %}
        skip_to_anchor("{{ jump }}");
    {% else %}
        if (url.match('#')) {
            anchor = url.split('#')[1];
            skip_to_anchor(anchor)
        }
    {% endif %}

    $(document).ready(function ()
    {
        if(jump != '') {
            window.location.hash = "";
            window.location.hash = "#" + jump
        }
    });

    $('#messageModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget); // Button that triggered the modal
        var type = button.data('type');
        var action = button.data('action');
        var header = button.data('header');
        var title = button.data('title');
        var instructions = button.data('instr');
        var modal = $(this);
        modal.find('#type').val(type);
        modal.find('#action').val(action);
        modal.find('#title').val(title);
        modal.find('.modal-title').text(header);
        modal.find('.modal-instructions').text(instructions);

        if(type == 'note' && action != 'note') {
            modal.find('#title').hide();
            modal.find('#title').val('Title');
            modal.find('[for=title]').hide()
        }

        diag_class = '';
        if(button.hasClass("btn-warning")) {
            modal.addClass("bootstrap-dialog type-warning");
            modal.find('#save_btn').addClass("btn-warning")
        } else if(button.hasClass("btn-danger")) {
            modal.addClass("bootstrap-dialog type-danger");
            modal.find('#save_btn').addClass("btn-danger")
        } else {
            modal.find('#save_btn').addClass("btn-primary")
        }
    });

    function delete_warn(route, message) {
        foo = BootstrapDialog.confirm({
            title: 'Delete Submission?',
            message: message,
            type: BootstrapDialog.TYPE_DANGER, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
            btnOKLabel: 'Delete',
            btnOKClass: 'btn-danger',
              callback: function(result) {
                if(result) {
                    $.ajax({
                        type: "POST",
                        url: route,
                        success: function(data) {
                            window.location.reload(true);
                        }
                    })
                }
            }
        });
    }

    </script>

    {% include 'dupe_gene_notes_script.html' %}
    {% include 'sequence_popup_script.html' %}

{% endblock %}