--- a +++ b/qiita_pet/templates/redbiom.html @@ -0,0 +1,224 @@ +{% from qiita_core.qiita_settings import qiita_config %} +{% extends sitebase.html %} + +{%block head%} +<script type="text/javascript" src="{% raw qiita_config.portal_dir %}/static/js/sharing.js"></script> +<script type="text/javascript"> + $(document).ready(function() { + + $("#search").keyup(function() { + var new_value = $(this).val().replace('`', "'") + .replace('~', "'") + .replace('´', "'"); + $(this).val(new_value); + }); + + qiita_websocket.init(window.location.host + '{% raw qiita_config.portal_dir %}/study/list/socket/', error, error); + qiita_websocket.add_callback('sel', show_alert); + $("#redbiom-table").dataTable({ + "dom": '<"ps">lfr<t><"footer">ip', + 'footerCallback': function ( row, data, start, end, display ) { + var api = this.api(), artifacts = 0, samples = 0; + + api.column(0).nodes().each(function (cell, i) { + var elements = $(cell).children().children().children(); + var idx = elements.length - 1; + var text = $(elements[idx]).text(); + elements = text.split(" | "); + artifacts += parseInt(elements[0].split(": ")[1]); + samples += parseInt(elements[1].split(": ")[1]); + }); + + $('.footer').addClass("col-md-12 text-right"); + if (artifacts == 0) { + text = ''; + } else { + text = 'Found ' + artifacts + ' artifacts with ' + samples + ' samples.'; + } + $('.footer').html(text) + }, + "columns": [ + { "orderable": false, "width": "20%", "data": "artifact_biom_ids"}, + { "data": "study_title", "width": "70%" }, + { "data": "study_abstract", "width": "0%" }, + { "data": "study_id", "width": "10%" }, + { "data": "study_alias", "width": "0%" }], + columnDefs: [ + // {type:'natural', targets:[2,6,7]}, + {"targets": [ 2, 4 ], "visible": false}, + // render zero + {"render": function ( data, type, row, meta ) { + if (data !== null && data !== undefined){ + var artifacts = 0, unique_samples = {}; + for (var d in data) { + if (data.hasOwnProperty(d)) { + // to get only unique sample names we will create a dict + // and then just get the keys; by creating a dict we are + // avoiding to check if an element is already in the list + var samples = data[d]; + for (var i = 0; i < samples.length; i++) { + if (! unique_samples[samples[i]] ) { + unique_samples[samples[i]] = true; + } + } + artifacts++; + } + } + unique_samples = Object.keys(unique_samples); + if (artifacts != 0) { + return '<div class="container" style="max-width: 15em;">'+ + '<div class="row justify-content-md-center">' + + {% if current_user is not None %} + '<div class="col-md-12 text-center details-control"> </div>' + + {% end %} + '<div class="col-md-12 text-center">' + + 'Artifacts: ' + artifacts + ' | ' + + 'Samples: ' + unique_samples.length + + '</div>' + + '</div>' + + '</div>'; + } + } + return 'No BIOMs'; + }, targets: [0]}, + // render the title cell + {"render": function ( data, type, row, meta ) { + {% if current_user is not None %} + result = "<a target='_blank' href='{% raw qiita_config.portal_dir %}/study/description/" + row.study_id + + "' id='study"+ meta.row +"-title'>"+ data +"</a>"; + {% else %} + result = data + {% end %} + return result + }, targets: [1]}, + ], + "language": { + "search": "Filter results by column data:", + "loadingRecords": "Please wait - loading information ...", + "zeroRecords": " " + }, + }); + + // Add event listener for opening and closing details + $('#redbiom-table tbody').on('click', 'div.details-control', function () { + var table = $('#redbiom-table').DataTable(); + var tr = $(this).closest('tr'); + var row = table.row( tr ); + + if ( row.child.isShown() ) { + // This row is already open - close it + row.child.hide(); + tr.removeClass('shown'); + } else { + // Open this row + // modified from: https://jsfiddle.net/8rejaL88/2/ + tr.addClass('shown'); + row.child('<p><center><img src="{% raw qiita_config.portal_dir %}/static/img/waiting.gif" style="display:block;margin-left: auto;margin-right: auto"/></center></p>', 'no-padding' ).show(); + + var artifact_biom_ids = row.data().artifact_biom_ids; + var artifact_biom_ids_keys = [] + $.each(artifact_biom_ids, function(e){ artifact_biom_ids_keys.push(e) }); + $.post('/artifact/info/', {ids: artifact_biom_ids_keys }) + .done(function ( data ) { + if (data['status']=='success') { + $('td', row.child()).html(format_biom_rows(data.data, row.index(), true, samples=artifact_biom_ids)).show(); + } else { + bootstrapAlert('ERROR: ' + data['msg'], "danger", 10000); + } + }); + } + }); + + $("#submitForm").submit(function(event){ + event.preventDefault(); + + show_loading("redbiom-info", true); + + var search = $("#search").val(); + var search_on = $("#search_on").val(); + var redbiom_info = $('#redbiom-info'); + + $.post("/redbiom/", {'search': search, 'search_on': search_on}) + .done(function ( data ){ + var redbiom_table = $('#redbiom-table').DataTable(); + // the next 4 lines reset the column filtering + var placer = $(".ps"); + redbiom_table.column(3).search("").draw(); + redbiom_table.clear().draw(); + placer.empty(); + if(data.status == "error") { + bootstrapAlert(data.message.replace("\n", "<br/>"), "danger"); + } else { + if(data.message != ''){ + redbiom_info.html( + `<div class="alert alert-warning alert-dismissible" role="alert"> + <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> + <strong>Warning!</strong> ` + data.message + `</div><br/>`) + } else if(data.data){ + redbiom_table.rows.add(data.data).draw(); + redbiom_info.html(''); + } + } + }) + .fail(function(response, status, error) { + var text = 'The query response is larger than is currently allowed, please try another. <a href="https://github.com/biocore/qiita/issues/2312" target="_blank">Track progress on this issue.</a>'; + if (response.status != 504) { + text = 'Status code: "' + response.status + '" - ' + error + '.<br/>Please send a screenshot to <a href="mailto:{% raw qiita_config.portal_dir %}">{% raw qiita_config.portal_dir %}</a>.'; + } + redbiom_info.html( + `<div class="alert alert-danger alert-dismissible" role="alert"> + <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> + <strong>Error!</strong> ` + text + `</div><br/>`) + }) + }); + }); +</script> + +{%end%} + +{%block content%} + <small> + <!-- Date to be fixed once we fix: https://github.com/biocore/qiita/issues/2773 --> + Redbiom only searches on public data. Last update: <i>{{latest_release}}</i>. Note that you will only be able to expand and add artifacts to analyses if you are signed into Qiita. + <br/><br/> + <a href="{% raw qiita_config.portal_dir %}/static/doc/html/redbiom.html" class="btn btn-info btn-sm" target="_blank">Help and examples?</a> + <br/> + </small> + <br/> + <form data-toggle="validator" role="form" id="submitForm"> + <div class="form-group row"> + <div class="col-xs-8"> + <input type="text" class="form-control" name="search" id="search" placeholder="Search" required> + </div> + <div class="col-xs-2"> + <select class="selectpicker form-control col-xs-2" name="search_on" id="search_on"> + <option value="metadata">Metadata</option> + <option checked value="feature">Feature</option> + <option checked value="taxon">Taxon</option> + </select> + </div> + <div class="col-xs-1"> + <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button> + </div> + </div> + </form> + <hr> + + <div class="row"> + <div class="col-md-12" id="redbiom-info"></div> + </div> + <div class="row"> + <table id="redbiom-table" class="table table-bordered gray-msg"> + <thead> + <tr> + <th>Expand for analysis (artifact count)</th> + <th>Title</th> + <th>Abstract</th> + <th>Study ID</th> + <th>Study Alias</th> + </tr> + </thead> + </table> + </div> + +{% end %}