vdjbase_review.html

{% extends "base_wide.html" %}
{% block pagetitle %} Review VDJbase Inferences {% endblock %}

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

{% block c_body %}

<form action="{{ url_for('vdjbase_review') }}" method="POST" name="form" class="form-horizontal" enctype="multipart/form-data">

    {{ form.hidden_tag() }}
    <div class="row">
        <div class="form-inline">
                <div class="col-sm-offset-1 col-sm-3">
                    {{ form.species.label(class="") }}
                    {{ form.species(class="form-control")|safe }}
                </div>

                <div class="col-sm-3">
                    {{ form.locus.label() }}
                    {{ form.locus(class="form-control")|safe }}
                </div>

                <div class="col-sm-2">
                    <input type="submit" value="View" class="btn btn-primary" id="view_btn" name="view_btn">
                </div>
        </div>
    </div>

    {% if table %}
        <div class="row">
            <h4 class="col-sm-offset-1 col-sm-11 edit">Sequences observed in full-length repertoires</h4>
            <div class="col-sm-10 col-sm-offset-1">
                <div class="form-group">
                   {{ table }}
                </div>
            </div>
        </div>
    {% endif %}

</form>


{% endblock %}

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


    <script>


    $(document).ready(function ()
    {
        {% if table %}
            init_datatable();
        {% endif %}

        const selected = $(this).find("option:selected").val();

        if (selected == 'Select') {
            $("#view_btn").prop('disabled', true);
        }
    });

    $("#species").change(function(e) {
        console.log('changed');
        $("#locus").empty();
        const choices = JSON.parse('{{ locus_choices | safe }}');
        const selected = $(this).find("option:selected").val();
        const opts = Reflect.get(choices, selected);

        if (opts) {
            for (let opt of opts) {
                $("#locus").append('<option value="' + opt + '">' + opt + '</option>');
            }
        }

        $("#view_btn").prop('disabled', (selected == 'Select'));
    });

    // Note that the table MUST have a style of width: 100% or DataTables will not resize it properly

    function init_datatable() {
        if(!$.fn.DataTable.isDataTable($("#seq_table"))) {
            $("#seq_table").DataTable({
                dom: 'Blfrtip',
                "paging":   true,
                "searching": true,
                "select": false,
                "info":     false,
                "lengthMenu": [ 25, 100, 500, 5000 ],
                "colReorder": true,
                "columnDefs": [
                    {"visible": false, "targets": [0, -1]},
                    {"width": "0px", "targets": [0, -1]},
                ],
                "buttons": [
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: [1,2,3,4,5,6,7,8,9,11]
                        }
                    },
                    {
                        extend: 'csv',
                        exportOptions: {
                            columns: [1,2,3,4,5,6,7,8,9,11]
                        }
                    }
                ]
            });
        }

        const table = $('#seq_table').DataTable();
        const statusOptions = {
            'not reviewed':'not reviewed',
            'in review':'in review',
            'rejected':'rejected',
            'holding':'holding',
            'submitted':'submitted',
            'not current':'not current',
            'modified':'modified',
        }

        {% if editor %}
        $( table.column(6).nodes() ).editable( '/vdjbase_status', {
            type: 'select',
            data   : JSON.stringify(statusOptions),
            submit: 'OK',
            callback: function( value, y ) {
                table.cell( this ).data( value ).draw();
            },
            submitdata: function ( value, settings ) {
                return {
                    'id': table.row( this ).data()[0],
                    'current': table.row( this ).data()[6],
                };
            }
        } );
        {% endif %}

    }

    function sequence_warn(seq_id, root_url, message) {
        foo = BootstrapDialog.confirm({
            title: 'Create entry?',
            message: message,
            type: BootstrapDialog.TYPE_WARNING, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
            btnOKLabel: ' Create ',
            btnOKClass: 'btn-warning',
              callback: function(result) {
                if(result) {
                    console.log(seq_id);
                    window.location.assign(root_url + seq_id);
                }
            }
        });
    }

    </script>
    {% include 'sequence_popup_script.html' %}

{% endblock %}