mason/ontology/compose_trait.mas

   1
   2 <%args>
   3 $object_select => undef
   4 $attribute_select => undef
   5 $method_select => undef
   6 $unit_select => undef
   7 $trait_select => undef
   8 $composable_cvs => undef
   9 $composable_cvs_allowed_combinations => undef
  10 $composable_tod_root_cvterm => undef
  11 $composable_toy_root_cvterm => undef
  12 $composable_gen_root_cvterm => undef
  13 $composable_evt_root_cvterm => undef
  14 </%args>
  15
  16 <& /util/import_javascript.mas, classes => ['CXGN.BreederSearch', 'CXGN.ComposeTrait'] &>
  17
  18 <& /page/page_title.mas, title=>"Compose a new trait" &>
  19 </br>
  20
  21 <div class="panel panel-default">
  22     <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse0">
  23         <div class="panel-title"><a href="#form" class="accordion-toggle">Trait Combinations</a><span class="pull-right clickable" onmouseover="" style="cursor: pointer;"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
  24     </div>
  25     <div id="collapse0" class="panel-collapse collapse in">
  26         <div class="panel-body form-horizontal container-fluid" style="overflow:hidden">
  27             <div class="col-sm-12 col-md-12 col-lg-12">
  28                 <div id="cv_combination_allowed_select_div">
  29                 </div>
  30             </div>
  31         </div>
  32     </div>
  33 </div>
  34
  35 <div class="panel panel-default">
  36   <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
  37     <div class="panel-title"><a href="#form" class="accordion-toggle">Base Trait</a><span class="pull-right clickable" onmouseover="" style="cursor: pointer;"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
  38   </div>
  39   <div id="collapse1" class="panel-collapse collapse in">
  40     <div class="panel-body form-horizontal container-fluid" style="overflow:hidden">
  41         <div class="col-sm-12 col-md-12 col-lg-12">
  42         <div id="object_div" class="col-md-6" style="display: none;">
  43             <label for="object_select_div" class="control-label">Object</label>
  44             <p class="help-block"><small>Pick the object on which the new trait is measured</small></p>
  45             <div id="object_select_div"></div><br>
  46             <button class="btn btn-default btn-sm" id="object_select_all" name="object_select_all"/>Select All</button>
  47             <button class="btn btn-default btn-sm" id="object_select_clear" name="object_select_clear"/>Clear</button>
  48         </div>
  49         <div id="attribute_div" class="col-md-6" style="display: none;">
  50             <label for="attribute_select_div" class="control-label">Attribute</label>
  51             <p class="help-block"><small>Pick the attribute the new trait measures</small></p>
  52             <div id="attribute_select_div"></div><br>
  53             <button class="btn btn-default btn-sm" id="attribute_select_all" name="attribute_select_all"/>Select All</button>
  54             <button class="btn btn-default btn-sm" id="attribute_select_clear" name="attribute_select_clear"/>Clear</button>
  55         </div>
  56
  57         <div id="method_div" class="col-md-6" style="display: none;">
  58             <label for="method_select_div" class="control-label">Method</label>
  59             <p class="help-block"><small>Pick the method by which the new trait is measured</small></p>
  60             <div id="method_select_div"></div><br>
  61             <button class="btn btn-default btn-sm" id="method_select_all" name="method_select_all"/>Select All</button>
  62             <button class="btn btn-default btn-sm" id="method_select_clear" name="method_select_clear"/>Clear</button>
  63         </div>
  64         <div id="unit_div" class="col-md-6" style="display: none;">
  65             <label for="unit_select_div" class="control-label">Unit</label>
  66             <p class="help-block"><small>Pick the units in which the new trait is measured</small></p>
  67             <div id="unit_select_div"></div><br>
  68             <button class="btn btn-default btn-sm" id="unit_select_all" name="unit_select_all"/>Select All</button>
  69             <button class="btn btn-default btn-sm" id="unit_select_clear" name="unit_select_clear"/>Clear</button>
  70         </div>
  71
  72         <div id="trait_div" class="col-md-6" style="display: none;">
  73             <label for="trait_select_div" class="control-label">Trait</label>
  74             <p class="help-block"><small>Pick an existing trait</small></p>
  75             <div id="trait_select_div"></div><br>
  76             <button class="btn btn-default btn-sm" id="trait_select_all" name="trait_select_all"/>Select All</button>
  77             <button class="btn btn-default btn-sm" id="trait_select_clear" name="trait_select_clear"/>Clear</button>
  78         </div>
  79         </div>
  80 </div>
  81 </div>
  82 </div>
  83
  84 <div class="panel panel-default">
  85   <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
  86     <div class="panel-title"><a href="#form" class="accordion-toggle">Time Terms</a><span class="pull-right clickable" onmouseover="" style="cursor: pointer;"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
  87   </div>
  88   <div id="collapse2" class="panel-collapse collapse in">
  89     <div class="panel-body form-horizontal container-fluid" style="overflow:hidden">
  90     <div class="col-sm-12 col-md-12 col-lg-12">
  91     <div id="tod_div" class="col-md-6" style="display: none;">
  92       <label for="tod_select_div" class="control-label">Time of Day</label>
  93       <p class="help-block"><small><i>Optional</i> Pick the time of day at which the new trait is measured</small></p>
  94       <div id="tod_select_div"></div><br>
  95       <button class="btn btn-default btn-sm" id="tod_select_all" name="tod_select_all"/>Select All</button>
  96       <button class="btn btn-default btn-sm" id="tod_select_clear" name="tod_select_clear"/>Clear</button>
  97     </div>
  98     <div id="toy_div" class="col-md-6" style="display: none;">
  99       <label for="toy_select_div" class="control-label">Time of Year</label>
 100       <p class="help-block"><small><i>Optional</i> Pick the week or month in which the new trait is measured</small></p>
 101       <div id="toy_select_div"></div><br>
 102       <button class="btn btn-default btn-sm" id="toy_select_all" name="toy_select_all"/>Select All</button>
 103       <button class="btn btn-default btn-sm" id="toy_select_clear" name="toy_select_clear"/>Clear</button>
 104     </div>
 105     <div id="gen_div" class="col-md-6" style="display: none;">
 106       <label for="gen_select_div" class="control-label">Generation</label>
 107       <p class="help-block"><small><i>Optional</i> Pick the generation on which the new trait is measured</small></p>
 108       <div id="gen_select_div"></div><br>
 109       <button class="btn btn-default btn-sm" id="gen_select_all" name="gen_select_all"/>Select All</button>
 110       <button class="btn btn-default btn-sm" id="gen_select_clear" name="gen_select_clear"/>Clear</button>
 111     </div>
 112     <div id="evt_div" class="col-md-6" style="display: none;">
 113       <label for="evt_select_div" class="control-label">Event</label>
 114       <p class="help-block"><small><i>Optional</i> Pick the breeding event to which you selected time term relates.</small></p>
 115       <div id="evt_select_div"></div><br>
 116       <button class="btn btn-default btn-sm" id="evt_select_all" name="evt_select_all"/>Select All</button>
 117       <button class="btn btn-default btn-sm" id="evt_select_clear" name="evt_select_clear"/>Clear</button>
 118     </div>
 119     </div>
 120   </div>
 121   </div>
 122   </div>
 123
 124
 125   <div class="panel panel-default">
 126     <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse3">
 127       <div class="panel-title"><a href="#form" class="accordion-toggle">Combinations</a><span class="pull-right clickable" onmouseover="" style="cursor: pointer;"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
 128     </div>
 129     <div id="collapse3" class="panel-collapse collapse in">
 130       <div class="panel-body form-horizontal container-fluid" style="overflow:hidden">
 131 <div class="col-sm-12 col-md-12 col-lg-12">
 132 <div class="col-md-6">
 133   <center><label class="control-label">Existing Traits</label></center>
 134   <center><p class="help-block"><small>Existing traits that match the current selections</small></p></center>
 135   <select multiple class="form-control" id="existing_traits"></select>
 136   </br>
 137   <div id="existing_traits_to_list"></div>
 138 </div>
 139 <div class="col-md-6">
 140   <center><label class="control-label">New Traits</label></center>
 141   <center><p class="help-block"><small>New traits that can be made from the current selections</small></p></center>
 142   <select multiple class="form-control" id="new_traits"></select></br>
 143   <center><button id="compose_trait" title="Select at least one new trait to create before submitting" class="btn btn-primary">Submit</button></center>
 144 </div>
 145 </div>
 146
 147
 148
 149   </div>
 150   </div>
 151 </div>
 152
 153 <div class="modal fade" id="traits_saved_dialog" tabindex="-1" role="dialog" aria-labelledby="traitsSavedDialog">
 154     <div class="modal-dialog" role="document">
 155         <div class="modal-content ui-front">
 156             <div class="modal-header text-center">
 157                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 158                 <h4 class="modal-title" id="traitsSavedDialog">Results</h4>
 159             </div>
 160             <div id="traits_saved_body" class="container-fluid">
 161             </div>
 162             <div class="modal-footer">
 163                 <button id="traits_saved_close_button" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 164             </div>
 165         </div>
 166     </div>
 167 </div>
 168
 169 <%perl>
 170 use JSON;
 171 my $encoder = JSON->new();
 172
 173 my $object_json = $encoder->allow_nonref->encode($object_select);
 174 my $attribute_json = $encoder->allow_nonref->encode($attribute_select);
 175 my $method_json = $encoder->allow_nonref->encode($method_select);
 176 my $unit_json = $encoder->allow_nonref->encode($unit_select);
 177 my $trait_json = $encoder->allow_nonref->encode($trait_select);
 178
 179 </%perl>
 180
 181 <script>
 182 // retrieve composable cvtypes an only load them as multiselects
 183
 184 var object_html = <% $object_json %>;
 185 if (object_html) {
 186     jQuery("#object_select_div").html(object_html);
 187     jQuery("#object_div").show();
 188 }
 189 var attribute_html = <% $attribute_json %>;
 190 if (attribute_html) {
 191     jQuery("#attribute_select_div").html(attribute_html);
 192     jQuery("#attribute_div").show();
 193 }
 194 var method_html = <% $method_json %>;
 195 if (method_html) {
 196     jQuery("#method_select_div").html(method_html);
 197     jQuery("#method_div").show();
 198 }
 199 var unit_html = <% $unit_json %>;
 200 if (unit_html) {
 201     jQuery("#unit_select_div").html(unit_html);
 202     jQuery("#unit_div").show();
 203 }
 204 var trait_html = <% $trait_json %>;
 205 if (trait_html) {
 206     jQuery("#trait_select_div").html(trait_html);
 207     jQuery("#trait_div").show();
 208 }
 209
 210 addToListMenu('existing_traits_to_list', 'existing_traits', {
 211   selectText: true,
 212   listType: 'traits'
 213 });
 214
 215 jQuery(document).on('change','#object_root_select, #attribute_root_select, #method_root_select, #unit_root_select, #trait_root_select', function() { // retrieve multi select once specific onto is picked
 216 var cv_id = jQuery(this).val();
 217 var name = jQuery(this).attr('name');
 218 name = name.replace('_root_select', '');
 219 get_select_box('trait_components', name +'_select_div', { 'id' : name +'_select', 'name': name +'_select', 'multiple': 'true', 'cv_id': cv_id, 'size':'10' });
 220 });
 221
 222 jQuery(document).on('change','#object_select, #attribute_select, #method_select, #unit_select, #trait_select, #tod_select, #toy_select, #gen_select, #evt_select', function() { // retrieve matching traits each time component selection changes
 223   if (jQuery(this).attr('name') == 'trait_select') {
 224     //console.log("trait select changed");
 225     //clearAllOptions(document.getElementById('object_select'));
 226     //clearAllOptions(document.getElementById('attribute_select'));
 227     //clearAllOptions(document.getElementById('method_select'));
 228     //clearAllOptions(document.getElementById('unit_select'));
 229   }
 230   else if ((jQuery(this).attr('name') == 'object_select') || (jQuery(this).attr('name') == 'attribute_select') || (jQuery(this).attr('name') == 'method_select') || (jQuery(this).attr('name') == 'unit_select')) {
 231     //console.log("component select changed");
 232     //clearAllOptions(document.getElementById('trait_select'));
 233   }
 234   display_matching_traits();
 235 });
 236
 237 jQuery('#object_select_all, #attribute_select_all, #method_select_all, #unit_select_all, #trait_select_all, #tod_select_all, #toy_select_all, #gen_select_all, #evt_select_all').click( // select all data in a panel
 238   function() {
 239   var name = jQuery(this).attr('name');
 240   var select_id = name.substring(0, name.length - 4);
 241   selectAllOptions(document.getElementById(select_id));
 242   display_matching_traits();
 243 });
 244
 245 jQuery('#object_select_clear, #attribute_select_clear, #method_select_clear, #unit_select_clear, #trait_select_clear, #gen_select_clear, #tod_select_clear, #toy_select_clear, #evt_select_clear').click( // clear all selections in a panel
 246   function() {
 247   var name = jQuery(this).attr('name');
 248   var select_id = name.substring(0, name.length - 6);
 249   clearAllOptions(document.getElementById(select_id));
 250   display_matching_traits();
 251 });
 252
 253 jQuery('#existing_traits').dblclick(function() { // open trait detail page in new window on double-click
 254     window.open("../../cvterm/"+this.value+"/view");
 255 });
 256
 257 jQuery("#new_traits").change(function() {
 258 var selected = jQuery("#new_traits").val();
 259 if (selected && selected.length > 0) {
 260     jQuery('#compose_trait').prop('disabled', false);
 261 }
 262 else {
 263     jQuery('#compose_trait').prop('disabled', true);
 264 }
 265 });
 266
 267 jQuery('#compose_trait').on('click', function () {
 268
 269     //console.log("just disabled ui");
 270     var new_traits = jQuery("#new_traits").val();
 271     var new_trait_names = {};
 272     jQuery("#new_traits option:selected").each(function () {
 273         if (jQuery(this).length) {
 274             new_trait_names[jQuery.trim(jQuery(this).text())] = jQuery(this).val();
 275         }
 276     });
 277     //console.log(new_trait_names);
 278
 279     jQuery.ajax( {
 280         url: '/ajax/onto/store_composed_term',
 281         timeout: 60000,
 282         method: 'POST',
 283         beforeSend : function() {
 284             disable_ui();
 285         },
 286         data: {'new_trait_names': JSON.stringify(new_trait_names)},
 287         success: function(response) {
 288             //console.log(response);
 289             var results_html = '';
 290             var names = [];
 291             enable_ui();
 292             if (response.success) {
 293                 results_html += '<div class="modal-body col-sm-12" id="traits_saved"><label id="success_label" class="control-label">Traits saved</label><ul class="list-group" id="traits_saved_message"><li class="list-group-item list-group-item-success">'+response.success+'</li></ul></div><label id="list_label" class="control-label">Copy new traits to a list</label><div class="modal-body col-sm-12" id="results_to_list_menu"></div><div id="new_trait_names" style="display: none;"></div>';
 294                 for(var i=0; i<response.names.length; i++){
 295                     names.push(response.names[i]+"\n");
 296                 }
 297             }
 298             if (response.error){
 299                 results_html += '<div class="modal-body col-sm-12" id="traits_error"><label id="error_label" class="control-label">Traits Not Saved</label><ul class="list-group" id="traits_error_message"><li class="list-group-item list-group-item-danger">'+response.error+'</li></ul></div>';
 300             }
 301
 302             document.getElementById('traits_saved_body').innerHTML = results_html;
 303             jQuery('#new_trait_names').html(names);
 304             addToListMenu('results_to_list_menu', 'new_trait_names', {
 305                 listType: 'traits'
 306             });
 307
 308             jQuery('#traits_saved_dialog').modal("show");
 309             refresh_matviews('fullview');
 310
 311         },
 312         error: function(request, status, err) {
 313             enable_ui();
 314             var results_html = '<div class="modal-body col-sm-12" id="traits_error"><label id="error_label" class="control-label">Traits Not Saved</label><ul class="list-group" id="traits_error_message"><li class="list-group-item list-group-item-danger">There was an error storing the composed terms. None were saved.</li></ul></div>';
 315             document.getElementById('traits_saved_body').innerHTML = results_html;
 316       }
 317     });
 318
 319 });
 320
 321 function create_multi_selects(allowed_names) {
 322     jQuery('#compose_trait').prop('disabled', true);
 323     jQuery('#tod_div').hide();
 324     jQuery('#toy_div').hide();
 325     jQuery('#gen_div').hide();
 326     jQuery('#evt_div').hide();
 327     jQuery('#object_div').hide();
 328     jQuery('#trait_div').hide();
 329     jQuery('#attribute_div').hide();
 330     jQuery('#unit_div').hide();
 331     jQuery('#method_div').hide();
 332     jQuery('#tod_select').val([]);
 333     jQuery('#toy_select').val([]);
 334     jQuery('#gen_select').val([]);
 335     jQuery('#evt_select').val([]);
 336     jQuery('#object_select').val([]);
 337     jQuery('#trait_select').val([]);
 338     jQuery('#attribute_select').val([]);
 339     jQuery('#unit_select').val([]);
 340     jQuery('#method_select').val([]);
 341     console.log(allowed_names);
 342     for(i = 0; i < allowed_names.length; i++){
 343         var cv_name = allowed_names[i];
 344         var name = cv_name.trim();
 345
 346         switch (name) {
 347             case "object":
 348                 jQuery('#object_div').show();
 349                 break;
 350             case "trait":
 351                 jQuery('#trait_div').show();
 352                 break;
 353             case "attribute":
 354                 jQuery('#attribute_div').show();
 355                 break;
 356             case "unit":
 357                 jQuery('#unit_div').show();
 358                 break;
 359             case "method":
 360                 jQuery('#method_div').show();
 361                 break;
 362             case "time":
 363                 jQuery("#tod_div,#toy_div,#gen_div","evt_div").show();
 364                 get_select_box('ontology_children', 'tod_select_div', { 'selectbox_id' : 'tod_select', 'selectbox_name': 'tod_select', 'multiple': 'true', 'parent_node_cvterm': '<% $composable_tod_root_cvterm %>', 'rel_cvterm': 'is_a', 'rel_cv': 'relationship' });
 365                 get_select_box('ontology_children', 'toy_select_div', { 'selectbox_id' : 'toy_select', 'selectbox_name': 'toy_select', 'multiple': 'true', 'parent_node_cvterm': '<% $composable_toy_root_cvterm %>', 'rel_cvterm': 'is_a', 'rel_cv': 'relationship' });
 366                 get_select_box('ontology_children', 'gen_select_div', { 'selectbox_id' : 'gen_select', 'selectbox_name': 'gen_select', 'multiple': 'true', 'parent_node_cvterm': '<% $composable_gen_root_cvterm %>', 'rel_cvterm': 'is_a', 'rel_cv': 'relationship' });
 367                 get_select_box('ontology_children', 'evt_select_div', { 'selectbox_id' : 'evt_select', 'selectbox_name': 'evt_select', 'multiple': 'true', 'parent_node_cvterm': '<% $composable_evt_root_cvterm %>', 'rel_cvterm': 'is_a', 'rel_cv': 'relationship' });
 368                 break;
 369             case "tod":
 370                 jQuery("#tod_div").show();
 371                 get_select_box('ontology_children', 'tod_select_div', { 'selectbox_id' : 'tod_select', 'selectbox_name': 'tod_select', 'multiple': 'true', 'parent_node_cvterm': '<% $composable_tod_root_cvterm %>', 'rel_cvterm': 'is_a', 'rel_cv': 'relationship' });
 372                 break;
 373             case "toy":
 374                 jQuery("#toy_div").show();
 375                 get_select_box('ontology_children', 'toy_select_div', { 'selectbox_id' : 'toy_select', 'selectbox_name': 'toy_select', 'multiple': 'true', 'parent_node_cvterm': '<% $composable_toy_root_cvterm %>', 'rel_cvterm': 'is_a', 'rel_cv': 'relationship' });
 376                 break;
 377             case "gen":
 378                 jQuery("#gen_div").show();
 379                 get_select_box('ontology_children', 'gen_select_div', { 'selectbox_id' : 'gen_select', 'selectbox_name': 'gen_select', 'multiple': 'true', 'parent_node_cvterm': '<% $composable_gen_root_cvterm %>', 'rel_cvterm': 'is_a', 'rel_cv': 'relationship' });
 380                 break;
 381             case "evt":
 382                 jQuery("#evt_div").show();
 383                 get_select_box('ontology_children', 'evt_select_div', { 'selectbox_id' : 'evt_select', 'selectbox_name': 'evt_select', 'multiple': 'true', 'parent_node_cvterm': '<% $composable_evt_root_cvterm %>', 'rel_cvterm': 'is_a', 'rel_cv': 'relationship' });
 384                 break;
 385             default:
 386                 if (window.console) console.log("Did not recognize "+name+" category");
 387         }
 388     }
 389 }
 390
 391 jQuery(document).ready(function() {
 392     get_select_box('composable_cvs_allowed_combinations', 'cv_combination_allowed_select_div', { 'id' : 'cv_combination_allowed_select', 'name' : 'cv_combination_allowed_select' });
 393     jQuery(document).on('change', '#cv_combination_allowed_select', function(){
 394         var names = jQuery('#cv_combination_allowed_select').val();
 395         var allowed_names = names.split('+');
 396         create_multi_selects(allowed_names);
 397     });
 398     var allowed_combinations = '<% $composable_cvs_allowed_combinations %>';
 399     var allowed_combo = allowed_combinations.split(',');
 400     var allowed_combo_first = allowed_combo[0].split('|');
 401     create_multi_selects(allowed_combo_first[1].split('+'));
 402 });
 403
 404 </script>