mason/tools/trial_comparison/index.mas

   1
   2 <%doc>
   3
   4
   5 </%doc>
   6
   7 <%args>
   8
   9 </%args>
  10
  11 <& '/page/page_title.mas', title => "Compare trials" &>
  12
  13 <& /util/import_css.mas, paths => ['tools/trial_comparison.css'] &>
  14
  15 <& '/util/import_javascript.mas', classes => [ 'jquery', 'jqueryui', 'popup', 'CXGN.List', 'CXGN.Login', 'd3.d3v4Min','brapi.BrAPI','brapi.StudyComparison'] &>
  16
  17 <style>
  18 #tc-grid, #tc-histogram{
  19   position: relative;
  20 }
  21 #tc-grid svg, #tc-histogram svg{
  22   width:100%;
  23   height: auto;
  24 }
  25 </style>
  26
  27 <div class="row">
  28   <center class = "col-md-offset-2 col-md-8">
  29     <form class="tc-form">
  30       <div class="form-group">
  31         <label for="trials_list_select">Choose a list of trials:</label>
  32         <div id="trials_list_select_container">
  33           <select disabled class="form-control input-sm" id="trials_list_select">
  34             <option selected="selected">Loading...</option>
  35           </select>
  36         </div>
  37         <img hidden id="trials-loading-spinner" src="/img/wheel.gif" alt="loading">
  38       </div>
  39       <div class="form-group">
  40         <label>Choose Observation Level</label>
  41         <select class="form-control input-sm" id="unit_select">
  42           <option selected value="plot">Plot</option>
  43           <option value="plant">Plant</option>
  44         </select>
  45       </div>
  46       <div class="form-group">
  47         <label>Choose a trait to compare:</label>
  48         <select disabled class="form-control input-sm" id="trait_select">
  49           <option selected="selected" value=""> </option>
  50         </select>
  51       </div>
  52       <img hidden id="results-loading-spinner" src="/img/wheel.gif" alt="loading">
  53     </form>
  54   </center>
  55 </div>
  56
  57 <div id="result_div" class="row">
  58   <div class="tc-main">
  59     <div hidden="true" id="tc-grid" class="col-lg-6 col-md-6 col-sm-12"></div>
  60     <div hidden="true" id="tc-histogram" class="col-lg-6 col-md-6 col-sm-12"></div>
  61   </div>
  62 </div>
  63
  64 <script>
  65
  66 (function() {
  67   'use strict';
  68   var list;
  69
  70   $(document).ready(function(){
  71     if (isLoggedIn()) {
  72       list = new CXGN.List();
  73       var select_html = list.listSelect('trials', ['trials'], ' ', undefined, undefined);
  74       $('#trials_list_select_container').html(select_html);
  75       if (d3.select('#trials_list_select').selectAll("option").size()<2){
  76         d3.select('#trials_list_select').html("<option>No trial lists! (Create one using the wizard.)</option>");
  77       }
  78       $('#trials_list_select').change(call_change);
  79     }
  80     else {
  81       $('#trials_list_select').html('<option selected="selected">You must be logged in to use lists.</option>');
  82     }
  83   })
  84
  85   function call_change(){
  86     $("#trials-loading-spinner").show();
  87     $("#tc-grid").hide();
  88     $("#tc-histogram").hide();
  89     $('#trait_select').attr("disabled",true).html('<option selected="selected" disabled value=""> </option>');
  90     var trial_list_id = $('#trials_list_select').val();
  91     if (trial_list_id === "") {
  92       $("#trials-loading-spinner").hide();
  93       return;
  94     }
  95     setTimeout(function(){ //use setTimeout to pull sync call list.getListData out of event listener thread.
  96       var item_data = list.getListData(trial_list_id);
  97       // var items = item_data.elements;
  98       // console.log("items: ",items);
  99       var ids = list.transform2Ids(trial_list_id, item_data);
 100       console.log("ids: ",ids);
 101
 102       var auth_token;
 103       var require_login = "<%  $c->get_conf('brapi_require_login') %>";
 104       if (require_login === '1'){
 105           auth_token = "<%  CXGN::Login->new($c->dbc->dbh)->get_login_cookie() %>";
 106           if (!auth_token){ alert("Login required to display graphical filtering"); }
 107       }
 108       BrAPI("/brapi/v2",'v2.0',auth_token)
 109         .search_observationunits({
 110             "studyDbIds" : ids,
 111             "observationLevels": [{'levelName': $('#unit_select').val() }],
 112             "includeObservations" : "true",
 113             "pageSize" : 10000000})
 114         .all(createSComp);
 115       $('#unit_select').change(call_change);
 116     },1);
 117   }
 118
 119   function createSComp(data){
 120       $("#trials-loading-spinner").hide();
 121       $('#trait_select').attr("disabled",false);
 122       var scomp = StudyComparison().links(function(dbId){
 123           return "/stock/"+dbId+"/view";
 124       });
 125       var sharedVars = scomp.loadData(data);
 126       console.log("vars",sharedVars);
 127
 128       var varOpts = d3.select("#trait_select")
 129               .selectAll("option:not([disabled])")
 130               .data(sharedVars);
 131       varOpts.exit().remove();
 132       varOpts.enter().append("option").merge(varOpts)
 133               .attr("value",function(d){return d})
 134               .text(function(d){return d})
 135               .raise();
 136
 137
 138       $("#trait_select").change(function(){
 139         $("#tc-grid").show();
 140         $("#tc-histogram").show();
 141         scomp.setVariable($("#trait_select").val());
 142         scomp.graphGrid("#tc-grid");
 143         scomp.multiHist("#tc-histogram");
 144         return false;
 145       });
 146   }
 147 }());
 148
 149 </script>