js/source/entries/boxplotter.js

   1 import BrAPIBoxPlotter from 'BrAPI-BoxPlotter';
   2 import '../legacy/d3/d3v4Min.js';
   3 import '../legacy/jquery.js';
   4 import '../legacy/brapi/BrAPI.js';
   5
   6 export function init(main_div){
   7   if (!(main_div instanceof HTMLElement)){
   8     main_div = document.getElementById(main_div.startsWith("#") ? main_div.slice(1) : main_div);
   9   }
  10
  11   main_div.innerHTML = `
  12   <div class="container-fluid">
  13     <div class="row">
  14       <div class="form col-sm-12 form-group boxplotter-variable-select-div" style="display:none;">
  15         <label for="sort" class="control-label">Variable</label>
  16         <select class="form-control boxplotter-variable-select"></select>
  17       </div>
  18     </div>
  19
  20     <div class="row boxplotter-group-list" style="display:none;">
  21       <div class="form col-sm-12 form-group">
  22         <label for="sort" class="control-label"> Group By </label>
  23         <div class="groupBy-div">
  24           <select class="form-control groupBy" style="width:auto; display:inline;">
  25             <option value="" selected></option>
  26           </select>
  27           <a class="btn btn-default groupBy-add" style="margin-top:-1px;">+</a>
  28           <a class="btn btn-default groupBy-remove" style="margin-top:-1px;">-</a>
  29         </div>
  30       </div>
  31     </div>
  32
  33     <div class="row">
  34       <div class="col-sm-12 boxplotter-result" style="display:none;">
  35       </div>
  36     </div>
  37   </div>`;
  38
  39   var bp = $(main_div);
  40   var boxplot = BrAPIBoxPlotter(bp.find(".boxplotter-result").get(0));
  41
  42
  43   function loadDatasetObsUnits(ds,ou){
  44     var d = {
  45       'dataset':ds
  46     };
  47     console.log(d);
  48     bp.find(".boxplotter-variable-select-div, .boxplotter-group-list, .boxplotter-result").hide();
  49     $.ajax({
  50       url : document.location.origin+'/ajax/tools/boxplotter/get_constraints',
  51       type : 'GET',
  52       data : d,
  53       dataType:'json',
  54       success : function(data) {
  55         console.log(data);
  56         var obsUnits = BrAPI(document.location.origin+"/brapi/v1").phenotypes_search({
  57           "germplasmDbIds" : data["categories"]["accessions"],
  58           "observationVariableDbIds" : data["categories"]["traits"],
  59           "studyDbIds" : data["categories"]["trials"],
  60           "locationDbIds" : data["categories"]["locations"],
  61           "programDbIds" : data["categories"]["breeding_programs"],
  62           "observationLevel" : ou,
  63           "pageSize" : 1000
  64         })
  65         boxplot.setData(obsUnits);
  66         obsUnits.all(function(d){
  67           console.log(d);
  68         });
  69         drawVariableSelect();
  70         drawGroupBys();
  71         boxplot.getVariables().then(vs=>{
  72           if(vs.length<1){
  73             bp.find('.boxplotter-result').html('<strong class="not-enough-data">Not Enough Data with the Given Constraints</strong>');
  74             bp.find(".boxplots").hide();
  75           }
  76           else{
  77             readGrouping();
  78             bp.find('.boxplotter-result .not-enough-data').remove();
  79             bp.find(".boxplotter-variable-select-div, .boxplotter-group-list, .brapp-wrapper, .boxplots").show();
  80           }
  81           bp.find(".boxplotter-result").show();
  82         })
  83       }
  84     });
  85   }
  86   function drawVariableSelect(){
  87     boxplot.getVariables().then(vs=>{
  88       var vars = d3.select(main_div).select(".boxplotter-variable-select").selectAll("option").data(vs);
  89       vars.exit().remove();
  90       var allVars = vars.enter().append("option")
  91         .merge(vars)
  92         .attr("value",d=>d.key)
  93         .attr("selected",d=>d.key==boxplot.variable?"":null)
  94         .text(d=>d.value);
  95     });
  96     d3.select(main_div).select(".boxplotter-variable-select").on("change",function(){
  97       boxplot.setVariable(this.value);
  98     })
  99   }
 100
 101   function drawGroupBys(){
 102     boxplot.getGroupings().then(grps=>{
 103       console.log("grps",grps);
 104       var optSelects = d3.select(main_div).select(".boxplotter-group-list")
 105         .selectAll(".groupBy")
 106         .on("change",function(){
 107           readGrouping();
 108         })
 109         .selectAll('option:not([value=""])')
 110         .data(d=>grps);
 111       optSelects.enter().append("option")
 112         .merge(optSelects)
 113         .attr("value",d=>d.key)
 114         .text(d=>d.value.name);
 115       d3.selectAll(".groupBy-add").on("click",function(){
 116         $(this.parentNode).clone(true).appendTo(this.parentNode.parentNode);
 117         drawGroupBys();
 118         readGrouping();
 119       });
 120       d3.selectAll(".groupBy-remove").on("click",function(){
 121         d3.select(this.parentNode).remove();
 122         readGrouping();
 123       });
 124     });
 125   }
 126   function readGrouping(){
 127     var grouping = [];
 128     d3.selectAll(".groupBy")
 129       .each(function(){grouping.push(this.value)})
 130     boxplot.setGroupings(grouping)
 131   }
 132
 133   return {
 134     'loadDatasetObsUnits':loadDatasetObsUnits,
 135     'boxplot':boxplot,
 136     'element':main_div
 137   }
 138 }