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       BrAPI("/brapi/v1")
 103         .phenotypes_search({
 104             "studyDbIds" : ids,
 105             "observationLevel" : $('#unit_select').val(),
 106             "pageSize" : 10000000})
 107         .all(createSComp);
 108       $('#unit_select').change(call_change);
 109     },1);
 110   }
 111
 112   function createSComp(data){
 113       $("#trials-loading-spinner").hide();
 114       $('#trait_select').attr("disabled",false);
 115       var scomp = StudyComparison().links(function(dbId){
 116           return "/stock/"+dbId+"/view";
 117       });
 118       var sharedVars = scomp.loadData(data);
 119
 120       console.log("vars",sharedVars)
 121
 122       var varOpts = d3.select("#trait_select")
 123               .selectAll("option:not([disabled])")
 124               .data(sharedVars);
 125       varOpts.exit().remove();
 126       varOpts.enter().append("option").merge(varOpts)
 127               .attr("value",function(d){return d})
 128               .text(function(d){return d})
 129               .raise();
 130
 131
 132       $("#trait_select").change(function(){
 133         $("#tc-grid").show();
 134         $("#tc-histogram").show();
 135         scomp.setVariable($("#trait_select").val());
 136         scomp.graphGrid("#tc-grid");
 137         scomp.multiHist("#tc-histogram");
 138         return false;
 139       });
 140   }
 141 }());
 142
 143 </script>