mason/tools/sequence_metadata/protocols_sequence_metadata.mas

   1
   2 <& /util/import_javascript.mas, classes => [ 'jquery', 'jquery.dataTables' ],  &>
   3
   4 <p>View sequence metadata protocols associated with each sequence metadata data type.  Click the name of the sequence
   5 metadata protocol to query data from that protocol.</p>
   6
   7 <div id="sequence_metadata_protocol_types"></div>
   8
   9
  10 <script type="text/javascript">
  11
  12 var data_types = [];            // List of available sequence metadata data types fetched from the database
  13
  14
  15 jQuery(document).ready(function() {
  16
  17     // Get the data types and then display the protocols
  18     get_types(function() {
  19         get_protocols();
  20     });
  21
  22 });
  23
  24
  25 /**
  26  * Get the types associated with stored sequence metadata
  27  * - build the sections for each data typ
  28  */
  29 function get_types(callback) {
  30     jQuery.ajax({
  31         type: 'GET',
  32         dataType: 'json',
  33         url: '/ajax/sequence_metadata/types',
  34         success: function(data) {
  35             if ( data && data.types ) {
  36                 data_types = data.types;
  37
  38                 // Add Type Sections
  39                 let html = "";
  40                 for ( let i = 0; i < data.types.length; i++ ) {
  41                     html += "<div class='sequence_metadata_protocol_type sequence_metadata_protocol_type_" + i + "' data-type='" + data.types[i].type_name + "'>";
  42                     html += "<div class='sequence_metadata_protocol_type_header'>";
  43                     html += "<h4 class='sequence_metdata_protocol_type_name'>" + data.types[i].type_name.replaceAll(' ', '&nbsp;') + "</h4>";
  44                     html += "<p class='sequence_metadata_protocol_type_definition'>" + data.types[i].type_definition + "</p>";
  45                     html += "</div>";
  46                     html += "<div id='sequence_metadata_protocols_" + i + "'></div>";
  47                     html += "</div>";
  48                 }
  49                 jQuery('#sequence_metadata_protocol_types').html(html);
  50
  51                 if ( callback ) return callback();
  52             }
  53             else {
  54                 alert("ERROR: Could not load types!");
  55             }
  56         },
  57         error: function() {
  58             alert("ERROR: Could not load types");
  59         }
  60     });
  61 }
  62
  63 /**
  64  * Get and display the Protocol Tables for each data type
  65  */
  66 function get_protocols() {
  67     for ( let i = 0; i < data_types.length; i++ ) {
  68         get_select_box('sequence_metadata_protocols', 'sequence_metadata_protocols_' + i,  {
  69             'sequence_metadata_data_type_id': data_types[i].type_id,
  70             'include_query_link': 1
  71         });
  72     }
  73 }
  74
  75
  76 </script>
  77
  78
  79
  80 <style>
  81     .sequence_metadata_protocol_type_header {
  82         display: flex;
  83         margin: 50px 0 15px 0;
  84         border-bottom: 1px solid #ccc;
  85         align-items: center;
  86     }
  87     .sequence_metdata_protocol_type_name {
  88         margin: 0;
  89     }
  90     .sequence_metadata_protocol_type_definition {
  91         flex-grow: 1;
  92         text-align: right;
  93         margin: 0 0 0 10px;
  94         font-size: 90%;
  95         color: #333;
  96     }
  97 </style>