mason/tools/image_analysis.mas

   1
   2 <%args>
   3
   4 </%args>
   5
   6 <& /util/import_javascript.mas, classes => ['jquery', 'thickbox', 'CXGN.BreedersToolbox.HTMLSelect'] &>
   7
   8 <& /page/page_title.mas, title=>"Image Analysis" &>
   9 <hr>
  10
  11 <div class="well well-sm">
  12     <center>
  13     <h4>The Necrosis Image Analysis is explained in the paper here: <a href="https://csce.ucmss.com/cr/books/2018/LFS/CSREA2018/IPC3638.pdf">Necrosis Image Analysis</a>.</h4>
  14     </center>
  15 </div>
  16
  17 <div class="well well-sm">
  18     <center>
  19     <button class="btn btn-primary" id="upload_spreadsheet_phenotypes_link">Upload New Phenotypes and Associated Images</button>
  20     </center>
  21 </div>
  22 <& /breeders_toolbox/upload_phenotype_spreadsheet.mas &>
  23 <& /breeders_toolbox/trial/create_spreadsheet_dialog.mas &>
  24
  25 <&| /page/info_section.mas, title=>"Image Search Criteria",  collapsible => 1, collapsed=>0, subtitle => "All images may not have names, descriptions, or tags associated with them."&>
  26
  27     <div id="necrosis_image_search_form" class="well well-sm">
  28         <div class="form-horizontal" >
  29             <div class="form-group">
  30                 <label class="col-sm-3 control-label">Select a Field Trial: </label>
  31                 <div class="col-sm-9" >
  32                     <div id ="necrosis_image_analysis_trial_select">
  33                     </div>
  34                 </div>
  35             </div>
  36             <div class="form-group">
  37                 <label class="col-sm-6 control-label">Image descriptors (name, description, or filename): </label>
  38                 <div class="col-sm-6" >
  39                     <input class="form-control" type="text" id="image_description_filename_composite" name="image_description_filename_composite" placeholder="e.g. MyImageName" />
  40                 </div>
  41             </div>
  42             <div class="form-group">
  43                 <label class="col-sm-6 control-label">Submitter: </label>
  44                 <div class="col-sm-6" >
  45                     <input class="form-control" type="text" id="image_submitter" name="image_submitter" placeholder="e.g. JaneDoe" />
  46                 </div>
  47             </div>
  48             <div class="form-group">
  49                 <label class="col-sm-6 control-label">Image tag: </label>
  50                 <div class="col-sm-6" >
  51                     <input class="form-control" type="text" id="image_tag" name="image_tag" placeholder="e.g. ImageTagName" />
  52                 </div>
  53             </div>
  54             <div class="form-group">
  55                 <label class="col-sm-6 control-label">Associated stock: </label>
  56                 <div class="col-sm-6" >
  57                     <input class="form-control" type="text" id="image_stock_uniquename" name="image_stock_uniquename" placeholder="e.g. FieldPlot100" />
  58                 </div>
  59             </div>
  60         </div>
  61
  62         <center>
  63         <button class="btn btn-primary" id="necrosis_image_search_submit" >Search</button>
  64         </center>
  65     </div>
  66 </&>
  67
  68 <&| /page/info_section.mas, title=>"Image Search Results",  collapsible => 1, collapsed=>0 &>
  69     <div class="well well-sm">
  70         <div class="panel panel-default">
  71             <div class="panel-body">
  72                 <table id="necrosis_image_analysis_image_search_results" class="table table-hover table-striped">
  73                 <thead>
  74                   <tr>
  75                     <th>Select</th>
  76                     <th>Image Thumbnail</th>
  77                     <th>Filename</th>
  78                     <th>Description</th>
  79                     <th>Submitter</th>
  80                     <th>Associations</th>
  81                     <th>Tags</th>
  82                 </tr>
  83                 </thead>
  84                 </table>
  85             </div>
  86         </div>
  87     </div>
  88 </&>
  89
  90 <&| /page/info_section.mas, title=>"Image Analysis", collapsible => 1, collapsed=>0 &>
  91     <div class="well well-sm">
  92         <div class="panel panel-default">
  93             <div class="panel-body">
  94                 <div class="form-group">
  95                     <label class="col-sm-6 control-label">Image Analysis Service: </label>
  96                     <div class="col-sm-6" >
  97                         <select class="form-control" id="necrosis_image_analysis_service_select" name="necrosis_image_analysis_service_select">
  98                             <option value="necrosis">Necrosis(Makerere AIR Lab)</option>
  99                             <option value="largest_contour_percent">Necrosis Largest Contour Mask Percent</option>
 100                             <option value="count_contours">Count Contours</option>
 101                             <option value="count_sift">SIFT Feature Count</option>
 102                             <option value="whitefly_count">Whitefly Count (Makerere AIR Lab)</option>
 103                         </select>
 104                     </div>
 105                 </div>
 106                 <br/>
 107
 108                 <hr>
 109                 <center>
 110                 <button class="btn btn-primary" id="necrosis_image_analysis_submit">Submit</button>
 111                 </center>
 112                 <hr>
 113                 <div id="necrosis_image_analysis_result">
 114                 </div>
 115             </div>
 116         </div>
 117     </div>
 118 </&>
 119
 120 <script>
 121
 122 jQuery(document).ready(function(){
 123     get_select_box('trials', 'necrosis_image_analysis_trial_select', { 'name' : 'html_necrosis_image_analysis_trial_select', 'id' : 'html_necrosis_image_analysis_trial_select', 'multiple':0, 'size':10, 'trial_name_values':1 });
 124
 125     _load_necrosis_image_search_results();
 126
 127     jQuery('#necrosis_image_search_submit').click(function(){
 128         if (jQuery('#html_necrosis_image_analysis_trial_select').val() == '') {
 129             alert("Please select a Field Trial first!");
 130             return false;
 131         }
 132         _load_necrosis_image_search_results();
 133     });
 134
 135     jQuery("#image_submitter").autocomplete({
 136         source: '/ajax/people/autocomplete'
 137     });
 138
 139     jQuery('#necrosis_image_search_form').keypress( function( e ) {
 140         var code = e.keyCode || e.which;
 141         if( code == 13 ) {
 142             jQuery('#necrosis_image_search_submit').click();
 143         }
 144     });
 145
 146     jQuery('#necrosis_image_analysis_image_search_results').on( 'draw.dt', function () {
 147         jQuery('a.image_search_group').colorbox();
 148     });
 149
 150     jQuery('#necrosis_image_analysis_submit').click(function(){
 151         var selected_image_ids = [];
 152         jQuery('input[name="necrosis_image_analysis_select"]').each(function() {
 153             if (this.checked){
 154                 selected_image_ids.push(this.value);
 155             }
 156         });
 157
 158         if (selected_image_ids.length < 1) {
 159             alert('Please select atleast one image first!');
 160             return false;
 161         }
 162
 163         jQuery.ajax({
 164             url: '/ajax/image_analysis/submit',
 165             method: 'POST',
 166             data: {
 167                 'selected_image_ids': JSON.stringify(selected_image_ids),
 168                 'service': jQuery('#necrosis_image_analysis_service_select').val()
 169             },
 170             dataType:'json',
 171             beforeSend: function() {
 172                 jQuery('#working_modal').modal('show');
 173             },
 174             success: function(response) {
 175                 console.log(response);
 176                 jQuery('#working_msg').html('');
 177                 jQuery('#working_modal').modal('hide');
 178
 179                 var html = '<table class="table table-hover"><thead><tr><th>Original Image</th><th>Analyzed Image</th><th>Analysis</th><th>Previously Saved Image-Associated Phenotype(s)</th><th>Observation Unit</th></tr></thead><tbody>';
 180                 for (var i=0; i<response.results.length; i++) {
 181                     html = html + '<tr><td><img src="'+response.results[i].result.original_image+'"></td><td><img src="'+response.results[i].result.image_link+'"></td><td>'+response.results[i].result.trait_name+': '+response.results[i].result.trait_value+'</td><td>';
 182                     for (var j=0; j<response.results[i].observations_array.length; j++) {
 183                         html = html + response.results[i].observations_array[j].observationvariable_name + ": " + response.results[i].observations_array[j].value;
 184                     }
 185                     html = html + "</td>";
 186                     html = html + "<td><a href='/stock/"+response.results[i].stock_id+"/view'>"+response.results[i].stock_uniquename+"</a></td>";
 187                     html = html + '</tr>';
 188                 }
 189                 html = html + '</tbody></table>';
 190                 html = html + '<hr><button class="btn btn-primary" id="necrosis_image_analysis_image_search_results_save">Store New Analysis Phenotypes and Images</button>';
 191                 jQuery('#necrosis_image_analysis_result').html(html);
 192             },
 193             error: function(response) {
 194                 jQuery('#working_msg').html('');
 195                 jQuery('#working_modal').modal('hide');
 196                 alert("An error occurred submitting necrosis image analysis");
 197             }
 198         });
 199     });
 200
 201     jQuery(document).on("click", "#necrosis_image_analysis_image_search_results_save", function() {
 202         alert("Need to implement!");
 203     });
 204
 205 });
 206
 207 function _load_necrosis_image_search_results() {
 208     images_table = jQuery('#necrosis_image_analysis_image_search_results').DataTable({
 209         'destroy' : true,
 210         'searching' : false,
 211         'ordering'  : false,
 212         'processing': true,
 213         'serverSide': true,
 214         'scrollX': true,
 215         'lengthMenu': [10,20,50,100,1000,5000],
 216         'ajax': { 'url':  '/ajax/search/images',
 217             'data': function(d) {
 218               d.html_select_box = "necrosis_image_analysis_select";
 219               d.image_description_filename_composite = jQuery('#image_description_filename_composite').val();
 220               d.image_person = jQuery('#image_submitter').val();
 221               d.image_tag = jQuery('#image_tag').val();
 222               d.image_stock_uniquename = jQuery('#image_stock_uniquename').val();
 223               d.image_project_name = jQuery('#html_necrosis_image_analysis_trial_select').val();
 224             }
 225         }
 226     });
 227 }
 228
 229 </script>