mason/breeders_toolbox/db_stats.mas

   1
   2 <%args>
   3 $breeding_programs
   4 </%args>
   5
   6 % use JSON;
   7
   8 <& /util/import_javascript.mas, classes => [ 'd3.d3v4Min.js', 'd3pie_min.js', 'moment_min',  'd3.graphers.stackedObservationPhenotypeHistogram' ] &>
   9
  10   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
  11   <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
  12
  13 <& /page/page_title.mas, title => 'Database Stats' &>
  14
  15 <&| /page/info_section.mas, title => "Date Range" &>
  16
  17 Filter by date of addition to database<br /><br />
  18 <table><tr><td>
  19
  20 Start Date: <input type="text" id="dbstats_start_date" title="dbstats_start_date"  />
  21 <td>&nbsp;</td></td><td>
  22
  23 End Date: <input type="text" id="dbstats_end_date" title="dbstats_end_date"  />
  24 </td><td>
  25 &nbsp;
  26 </td><td>
  27 <input type="checkbox" id="include_dateless_items"> include items without a date</input>
  28 </td><td>
  29 &nbsp;
  30 </td><td>
  31 <button id="update_dbstats_by_date">Update</button>
  32
  33 </td>
  34 </tr></table>
  35 </&>
  36
  37 <script>
  38
  39 var dbstats_start_date_element = jQuery("#dbstats_start_date");
  40 //set_daterangepicker_default(dbstats_start_date_element);
  41
  42 jQuery('input[title="dbstats_start_date"]').daterangepicker(
  43    {
  44        "singleDatePicker": true,
  45        "showDropdowns": true,
  46        "autoUpdateInput": true,
  47        "startDate": "1970-01-01",
  48        "yearSelect" : true,
  49        "minDate": "1970-01-01",
  50        "maxDate": "2030-12-31",
  51        locale: {
  52         format: 'YYYY-MM-DD'
  53       }
  54    },
  55
  56 );
  57
  58 var dbstats_end_date_element = jQuery("#dbstats_end_date");
  59
  60 jQuery('input[title="dbstats_end_date"]').daterangepicker(
  61     {
  62        "singleDatePicker": true,
  63        "autoUpdateInput": true,
  64        "minDate": "1970-01-01",
  65        "maxDate" : "2030-12-31",
  66        "yearSelect" : true,
  67        locale: {
  68            format: 'YYYY-MM-DD'
  69        },
  70        "showDropdowns": true,
  71     },
  72
  73 );
  74
  75 </script>
  76
  77 <&| /page/info_section.mas, title => "Data categories" &>
  78
  79 <table><tr><td>
  80
  81 <span id="trial_types_div"></span>
  82
  83 </td><td>
  84
  85 <span id="trials_by_breeding_programs_div"></span>
  86
  87 </td></tr>
  88 <tr><td>
  89
  90 <span id="traits_div"></span>
  91
  92 </td><td>
  93
  94 <span id="stocks_div"></span>
  95
  96 </td></tr>
  97 </table>
  98
  99 </&>
 100
 101 %# <&| /page/info_section.mas, title => "Activity - past 52 weeks" &>
 102
 103 %#   <svg class="bargraph" width="800" height="200"></svg>
 104
 105 %# </&>
 106
 107 %# <&| /page/info_section.mas, title => "Breeding Program Summaries", collapsible=>1 &>
 108
 109 %# <div id="program_stats">[loading program stats...]</div>
 110
 111 %# </&>
 112
 113 %# <&| /page/info_section.mas, title => "Breeding Program Summaries", collapsible=>1 &>
 114
 115 %#  %  foreach (@$breeding_programs){
 116
 117 %#    <div class="well">
 118
 119 %#        <h3>Breeding Program: <% $_->[1] %></h3>
 120
 121 %#        <&| /page/info_section.mas, title => "Trials" , collapsible=>1 &>
 122 %#            <& /breeders_toolbox/program/trials.mas, program_id => $_->[0] &>
 123 %#        </&>
 124
 125 %#        <&| /page/info_section.mas, title => "Traits" , collapsible=>1 &>
 126 %#            <& /breeders_toolbox/program/traits.mas, program_id => $_->[0], collapse_phenotypes_section => 0  &>
 127 %#        </&>
 128
 129 %#    </div>
 130
 131 %  }
 132
 133 %#</&>
 134
 135 <script>
 136
 137 % my $breeding_program_json = encode_json($breeding_programs);
 138
 139
 140 jQuery(document).ready( function() {
 141
 142     var start_date = jQuery('#dbstats_start_date').val();
 143     var end_date   = jQuery('#dbstats_end_date').val();
 144     var include_dateless_items = jQuery('#include_dateless_items').val();
 145
 146     jQuery('#update_dbstats_by_date').click( function() {
 147         draw_overview_charts(start_date, end_date, include_dateless_items);
 148         //        alert('start_date: '+ jQuery('#dbstats_start_date').val() );
 149     });
 150
 151     draw_overview_charts(start_date, end_date, include_dateless_items);
 152
 153     var breeding_programs = JSON.parse('<% $breeding_program_json %>');
 154
 155     //   alert(JSON.stringify(breeding_programs));
 156
 157 //   var html = "";
 158
 159 //    for(let i=0; i<breeding_programs.length; i++) {
 160 // //      alert('table loop '+i + ' for '+breeding_programs[i][1]);
 161 //       html += "<h3>Breeding Program: "+ breeding_programs[i][1] + "</h3>";
 162
 163 //       html += trial_table(html, breeding_programs[i][0]);
 164 //       html += trait_table(html, breeding_programs[i][0]);
 165 //    }
 166
 167 //    jQuery('#program_stats').html(html);
 168
 169 // //   alert(JSON.stringify(breeding_programs));
 170
 171 //    for(let n=0; n<breeding_programs.length; n++) {
 172 // //       alert('ajax loop '+ n + ' for '+breeding_programs[n][1]);
 173 //        trial_queries(breeding_programs[n][0], start_date, end_date, include_dateless_items);
 174 //        trait_queries(breeding_programs[n][0], start_date, end_date, include_dateless_items);
 175 //    }
 176
 177
 178 });
 179
 180 function draw_overview_charts(start_date, end_date, include_dateless_items) {
 181
 182      // remove old graphs if present
 183        jQuery('#trial_types_div').html("");
 184        jQuery('#trials_by_breeding_programs_div').html("");
 185        jQuery('#traits_div').html("");
 186        jQuery('#stocks_div').html("");
 187
 188         jQuery.ajax({
 189         url: '/ajax/dbstats/trials_by_breeding_program_chart',
 190         data: { 'start_date' : start_date, 'end_date' : end_date, 'include_dateless_items' : include_dateless_items },
 191         error: function(response) { alert('An error occurred' + JSON.stringify(response));  },
 192         success: function(response)  {
 193             //alert('success' + JSON.stringify(response));
 194             var types_pie = new d3pie('trials_by_breeding_programs_div', response);
 195         }
 196     });
 197
 198     jQuery.ajax({
 199         url: '/ajax/dbstats/traits_chart',
 200         data: { 'start_date' : start_date, 'end_date' : end_date, 'include_dateless_items' : include_dateless_items },
 201         error: function(response) { alert('An error occurred' + JSON.stringify(response));  },
 202         success: function(response)  {
 203            //alert('success' + JSON.stringify(response));
 204            var types_pie = new d3pie('traits_div', response);
 205         }
 206     });
 207
 208     jQuery.ajax({
 209         url: '/ajax/dbstats/stocks_chart',
 210         data: { 'start_date' : start_date, 'end_date' : end_date, 'include_dateless_items' : include_dateless_items },
 211         error: function(response) { alert('An error occurred' + JSON.stringify(response));  },
 212         success: function(response)  {
 213             var types_pie = new d3pie('stocks_div', response);
 214         }
 215     });
 216
 217     jQuery.ajax({
 218         url: '/ajax/dbstats/trial_types_chart',
 219         data: { 'start_date' : start_date, 'end_date' : end_date, 'include_dateless_items' : include_dateless_items },
 220         error: function(response) { alert('An error occurred' + JSON.stringify(response));  },
 221         success: function(response)  {
 222             //alert('success' + JSON.stringify(response));
 223             var types_pie = new d3pie('trial_types_div', response);
 224         }
 225     });
 226
 227     jQuery.ajax( {
 228         url : '/ajax/dbstats/activity',
 229         error: function(r) { alert('An error occurred.'); },
 230         success:  function(d) {
 231             d.frequency = +d.frequency;
 232             bargraph(d);
 233         }
 234     });
 235 }
 236
 237
 238 function bargraph(data) {
 239     var svg = d3.select(".bargraph"),
 240     margin = {top: 20, right: 20, bottom: 30, left: 40},
 241     width = +svg.attr("width") - margin.left - margin.right,
 242     height = +svg.attr("height") - margin.top - margin.bottom;
 243
 244     var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
 245         y = d3.scaleLinear().rangeRound([height, 0]);
 246
 247     var g = svg.append("g")
 248       .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 249
 250     x.domain(data.map(function(d) { return d.letter; }));
 251
 252     y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
 253
 254     g.append("g")
 255       .attr("class", "axis axis--x")
 256       .attr("transform", "translate(0," + height + ")")
 257       .call(d3.axisBottom(x));
 258
 259     g.append("g")
 260       .attr("class", "axis axis--y")
 261       .call(d3.axisLeft(y).ticks(10, ""))
 262       .append("text")
 263       .attr("transform", "rotate(-90)")
 264       .attr("y", 6)
 265       .attr("dy", "0.71em")
 266       .attr("text-anchor", "end")
 267       .text("Frequency");
 268
 269   g.selectAll(".bar")
 270     .data(data)
 271     .enter().append("rect")
 272       .attr("class", "bar")
 273       .attr("x", function(d) { return x(d.letter); })
 274       .attr("y", function(d) { return y(d.frequency); })
 275       .attr("width", x.bandwidth())
 276       .attr("height", function(d) { return height - y(d.frequency); })
 277       .attr("fill", "#AAAAEE");
 278   }
 279
 280
 281
 282 function trial_table(html, bp_id) {
 283
 284 html += `
 285 <table id="trial_summary_data_`+bp_id+`" class="display">
 286     <thead>
 287         <tr>
 288             <th>Trial name</th>
 289             <th>Description</th>
 290         </tr>
 291     </thead>
 292 </table>
 293 `;
 294
 295 //    alert(html);
 296
 297     return html;
 298 }
 299
 300 function trait_table(html, bp_id) {
 301
 302 html = `
 303 <div class="well well-sm table-responsive">
 304   <center><h4>Raw Data Statistics</h4></center>
 305   <br/>
 306
 307
 308   <div id="pheno_summary_table_`+bp_id+`_div">
 309
 310     <table id="phenotype_summary_data_`+bp_id+`" class="display">
 311       <thead>
 312         <tr>
 313           <th>Trait</th>
 314           <th>Mean</th>
 315           <th>Min</th>
 316           <th>Max</th>
 317           <th>Std Dev</th>
 318           <th>CV</th>
 319           <th>Count</th>
 320           <th>Histogram</th>
 321         </tr>
 322       </thead>
 323       <tbody>
 324       </tbody>
 325     </table>
 326   </div>
 327 </div>
 328 <div class="well well-sm" id="raw_data_histogram_well_`+bp_id+`">
 329   <center><h4>Raw Data Histogram</h4></center><hr>
 330   <div id="program_summary_hist_`+bp_id+`_div">
 331     <div class="row">
 332       <div class="col-sm-8">
 333         <form class="form-horizontal">
 334           <div class="form-group form-group-sm">
 335             <label for="program_summary_hist_dropdown_`+bp_id+`" class="col-sm-2 control-label">Select:</label>
 336             <div class="col-sm-10">
 337               <div id="traits_assayed_dropdown_`+bp_id+`">
 338               </div>
 339             </div>
 340           </div>
 341       </div>
 342       <div class="col-sm-4" id="traits_assayed_histogram_cvterm_link_`+bp_id+`">
 343       </div>
 344     </div>
 345
 346     <div id="program_summary_hist_`+bp_id+`">
 347     </div>
 348
 349   </div>
 350 </div>
 351
 352
 353 `;
 354
 355 //   alert(html);
 356
 357    return html;
 358 }
 359
 360 function trial_queries(bp_id, start_date, end_date, include_dateless_items) {
 361 //    alert('AJAX call for '+bp_id +' start_date = '+start_date);
 362     jQuery('#trial_summary_data_'+bp_id).DataTable( {
 363         'autoWidth': false,
 364         'ajax': '/ajax/breeders/program/'+ bp_id + '/field_trials?start_date='+start_date+'&end_date='+end_date+'&include_dateless_items='+include_dateless_items,
 365     });
 366 }
 367
 368 function trait_queries(bp_id, start_date, end_date, include_dateless_items) {
 369 //    alert('getting trait data...');
 370     jQuery("#phenotype_summary_data_"+bp_id).DataTable( {
 371         'ajax': '/ajax/breeders/program/'+ bp_id + '/phenotypes?start_date='+start_date+'&end_date='+end_date+'&include_dateless_items='+include_dateless_items,
 372     });
 373
 374     trait_summary_hist_display_change(bp_id, start_date, end_date, include_dateless_items);
 375
 376     ///clicking on the histogram glyph from the dataTable
 377     /// scrolls down to the histogram div
 378     ///
 379     jQuery('#phenotype_summary_data_'+bp_id).on('click', 'a[href^="#"]', function(event) {
 380         var offset = jQuery(window).height() - jQuery('#raw_data_histogram_well_'+bp_id).height() - 40;
 381         var target = jQuery(this.getAttribute('href'));
 382         if( target.length ) {
 383             event.preventDefault();
 384             jQuery('html, body').stop().animate({
 385                 scrollTop: target.offset().top - offset
 386             }, 1500);
 387         }
 388     });
 389 }
 390
 391 function trait_summary_hist_display_change(program_id, start_date, end_date, include_dateless_items) {
 392
 393     var d3 = d3v4;
 394     var draw_histogram = stackedObservationPhenotypeHistogram.draw;
 395
 396 //    alert('trait_summary_hist_display_change!');
 397
 398     jQuery.ajax ( {
 399         url : '/ajax/breeders/program/'+ program_id + '/traits_assayed?start_date='+start_date+'&end_date='+end_date+'&include_dateless_items='+include_dateless_items,
 400         beforeSend: function() {
 401         //            jQuery("#working_modal").modal("show");
 402         },
 403         success: function(response){
 404             //console.log(response);
 405             if (response.traits_assayed[0][0]) {
 406                 var traits_assayed_html = "<select class='form-control' id='program_summary_hist_dropdown_"+program_id+"'>";
 407 //              alert('select: '+traits_assayed_html);
 408                 for (i=0; i<response.traits_assayed[0].length; i++) {
 409                     traits_assayed_html = traits_assayed_html + "<option value="+ response.traits_assayed[0][i][0] + " >" + response.traits_assayed[0][i][1] + "</option>";
 410                 }
 411                 traits_assayed_html = traits_assayed_html +"</select>";
 412
 413 //              alert(traits_assayed_html);
 414                 jQuery("#traits_assayed_dropdown_"+program_id).html(traits_assayed_html);
 415 //              alert('done with dropdown!');
 416                 jQuery("#traits_assayed_dropdown_"+program_id).change(function(){
 417                     var new_trait_id = jQuery('#traits_assayed_dropdown_'+program_id).find(":selected").val();
 418 //                    alert("NEW TRAIT ID: "+new_trait_id);
 419                     trait_summary_hist_change(program_id, new_trait_id);
 420                 });
 421
 422                 jQuery('#traits_assayed_histogram_cvterm_link_'+program_id).html("<a href='/cvterm/"+response.traits_assayed[0][0][0]+"/view'>Definition</a>");
 423
 424                 var trait_id = jQuery("#program_summary_hist_dropdown_"+program_id).val();
 425 //              alert('TRAIT_ID: '+trait_id);
 426                 jQuery.ajax( {
 427                     url : '/ajax/breeders/program/'+ program_id +'/trait_phenotypes/?trait='+trait_id,
 428                     type: 'POST',
 429                     success: function(response){
 430                         jQuery("#working_modal").modal("hide");
 431                         var draw_histogram = stackedObservationPhenotypeHistogram.draw;
 432                         if (response.error) {
 433                             alert(response.error);
 434                         }
 435                         else if (response.status!="success"){
 436                             alert("Problem loading plant/plot data: "+response.status);
 437                         }
 438                         else {
 439                             draw_histogram(response.data, d3.select("#program_summary_hist_"+program_id).node());
 440                         }
 441                     },
 442                     error: function(response) {
 443                         jQuery("#working_modal").modal("hide");
 444                         alert('An error occured retrieving trait histogram data.');
 445                     }
 446                 });
 447             } else {
 448                 jQuery("#working_modal").modal("hide");
 449                 jQuery("#program_summary_hist_"+program_id).html("<center><h4>There is no data to plot.</h4></center>");
 450             }
 451
 452         },
 453         error: function(response){
 454             alert('Error retrieving traits assayed in this breeding program');
 455         }
 456
 457     });
 458 }
 459
 460 function trait_summary_hist_change(program_id, value) {
 461
 462     jQuery('#traits_assayed_histogram_cvterm_link_'+program_id).html("<a href='/cvterm/"+value+"/view'>Definition</a>");
 463     jQuery("#program_summary_hist_dropdown_"+program_id).val(value);
 464     jQuery.ajax( {
 465         url : '/ajax/breeders/program/'+ program_id +'/trait_phenotypes/?trait='+value+'',
 466         type: 'POST',
 467         beforeSend: function() {
 468             jQuery("#working_modal").modal("show");
 469         },
 470         success: function(response){
 471             jQuery("#working_modal").modal("hide");
 472             var draw_histogram = stackedObservationPhenotypeHistogram.draw;
 473             if (response.error) {
 474                 alert(response.error);
 475             }
 476             else if (response.status!="success"){
 477                 alert("Problem loading plant/plot data: "+response.status);
 478             }
 479             else {
 480                 draw_histogram(response.data, d3.select("#program_summary_hist_"+program_id).node());
 481             }
 482         },
 483         error: function(response) {
 484             jQuery("#working_modal").modal("hide");
 485             alert('An error occured retrieving trait histogram data.');
 486         }
 487     });
 488 }
 489
 490 </script>