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