mason/tools/graphicalfiltering/index.mas

   1 <%doc>
   2
   3
   4 </%doc>
   5
   6 <%args>
   7
   8 $ajaxRequestString => ""
   9
  10 </%args>
  11
  12 <& /util/import_css.mas, paths => ['tools/GraphicalFiltering.css'] &>
  13
  14 <& '/page/page_title.mas', title => "Graphical Filtering" &>
  15
  16 <& '/util/import_javascript.mas', classes => [ 'jquery', 'jqueryui', 'CXGN.List', 'd3.d3v4Min', 'brapi.BrAPI', 'brapi.GraphicalFilter' ] &>
  17
  18 <div id="select_div" class="row" hidden="true">
  19   <!-- form for selecting a list -->
  20   <p>Choose a list of <!--plant, plots, or -->trials to filter.</p>
  21   <form class="tc-form">
  22     <div class="form-group">
  23         <!-- list select -->
  24         <div id="filter_list_select_container" class="select_container col-md-6">
  25           <select disabled class="form-control input-sm" id="filter_list_select">
  26             <option selected="selected">Loading...</option>
  27           </select>
  28         </div>
  29         <div id="type_list_select_container" class="select_container col-md-3">
  30           <select disabled class="form-control input-sm" id="type_list_select">
  31             <option selected disabled value="">Select Type</option>
  32             <option value="plot">Plots</option>
  33             <option value="plant">Plants</option>
  34           </select>
  35         </div>
  36         <div class="checkbox col-md-3">
  37           <label>
  38             <input type="checkbox" id="accession_group"> Group By Accession
  39           </label>
  40         </div>
  41     </div>
  42   </form>
  43 </div>
  44 <!-- spinner to show during ajax call -->
  45 <div class="row">
  46   <center>
  47     <img hidden="true" id="results-loading-spinner" src="/img/wheel.gif" alt="loading">
  48   </center>
  49 </div>
  50 <br>
  51 <!-- div in which to draw filters -->
  52 <div id="filter_div" class="row"></div>
  53 <!-- div with table of filtered results and an option to save the output as a list -->
  54 <div id="filtered_results_wrap" hidden="true" class="row dataTables_wrapper">
  55   <&| /page/info_section.mas, title => 'Filtered Results', collapsible=>0, collapsed=>0 &>
  56     <table id="filtered_results" width="100%" class="table table-hover table-striped dataTable no-footer" role="grid" style="width: 100%;"></table>
  57   </&>
  58   <&| /page/info_section.mas, title => 'Save Results as List', collapsible=>1, collapsed=>1 &>
  59     <form id="new-list-form">
  60       <label>List Name: </label> <input name="name" class="form-control" type="text">
  61       <button type="submit" class="btn btn-primary">Create</button>
  62     </form>
  63   </&>
  64 </div>
  65
  66 <script>
  67
  68 (function() {
  69   'use strict';
  70   var currentGFilter = null;
  71   var list = new CXGN.List();
  72
  73   $('#accession_group').change(function(){$('#type_list_select').trigger("change");})
  74
  75   $('#type_list_select').change(function(){
  76     var list_id = $("#filter_list_select").val(),
  77         unit = $("#type_list_select").val(),
  78         group = $('#accession_group').is(":checked"),
  79         brapi = BrAPI("/brapi/v1");
  80     if (!unit) return;
  81     var list_contents = list.transform2Ids(list_id),
  82         list_type = list.getListType(list_id);
  83     switch (list_type) {
  84       case 'plots':
  85       case 'plants':
  86         alert("not yet implimented");
  87         break;
  88       case 'trials':
  89         updateGFilter(group,
  90           brapi.phenotypes_search({
  91             "studyDbIds": list_contents,
  92             "observationLevel": unit,
  93             "pageSize": 100000
  94           })
  95         );
  96         break;
  97     }
  98   });
  99
 100   function updateGFilter(group,brapi_node){
 101     if (currentGFilter!=null){
 102       $("#filtered_results").DataTable().destroy();
 103       $("#filtered_results").html("");
 104     }
 105     $('#filtered_results_wrap').hide();
 106     $('#filter_div').hide();
 107     $('#results-loading-spinner').show();
 108     brapi_node.all(function(){
 109       $('#filtered_results_wrap').show();
 110       $('#filter_div').show();
 111       $('#results-loading-spinner').hide();
 112     })
 113     currentGFilter = GraphicalFilter(
 114         brapi_node,
 115         obsTraits,
 116         group? groupCols : obsCols,
 117         group? ["Accession"] : ["Study","Unit","Accession"],
 118         group? groupByAccession : undefined
 119       );
 120     currentGFilter.draw("#filter_div","#filtered_results");
 121   }
 122
 123   $(document).ready(function(){
 124
 125     // set up and show the list select div.
 126     $('#select_div').show();
 127
 128     // set up list
 129     var filter_list_select_html = list.listSelect('filter', ['trials'/*,'plots','plants'*/], 'Choose a List:');
 130     $('#filter_list_select_container').html(filter_list_select_html);
 131     $('#filter_list_select>option:first-of-type').prop('disabled', true);
 132
 133     $('#filter_list_select').change(function(){
 134       $(this).prop('disabled', true);
 135       var list_id = $(this).val();
 136       var list_type = list.getListType(list_id);
 137       $(this).prop('disabled', false);
 138       $('#type_list_select').prop('disabled', false);
 139       switch (list_type) {
 140         case 'trials':
 141           $('#type_list_select').prop('val', "");
 142           break;
 143         case 'plots':
 144           $('#type_list_select').val("plot").trigger("change");
 145           $('#type_list_select').prop('disabled', true);
 146           break;
 147         case 'plants':
 148           $('#type_list_select').val("plant").trigger("change");
 149           $('#type_list_select').prop('disabled', true);
 150           break;
 151       }
 152     });
 153   });
 154
 155   function obsTraits(d) { // traits/values
 156     var traits = {}
 157     d.observations.forEach(function(obs){
 158       traits[obs.observationVariableName] = obs.value;
 159     });
 160     return traits;
 161   }
 162   function obsCols(d){ // header columns accessor
 163     return {
 164       'Study':d.studyName,
 165       'Unit':d.observationUnitName,
 166       'Accession':d.germplasmName,
 167     }
 168   }
 169   function groupCols(d) {
 170     return {
 171       'Accession':d.germplasmName
 172     }
 173   }
 174   function groupByAccession(d) {
 175     return d.germplasmDbId
 176   }
 177
 178   // set up the form for saving results as a list
 179   $('#new-list-form').submit(function () {
 180     if (!window.gfiltering.data){
 181       alert("Can't create a list from nothing.")
 182       return false;
 183     }
 184     try {
 185       var form = d3.map($(this).serializeArray(),function(d){return d.name;});
 186       var list = new CXGN.List();
 187       var newListID = list.newList(form.get("name").value);
 188       if (!newListID) throw "List creation failed.";
 189       list.setListType(newListID,"plots");
 190       var data = currentGFilter.data.filter(currentGFilter.root.getFilter());
 191       var count = list.addBulk(newListID,data.map(function(d){return d.observationUnitName}));
 192       if (!count) throw "Added nothing to list or addition failed.";
 193       alert("List \""+form.get("name").value+"\" created with "+count+" entries.")
 194     }
 195     catch(err) {
 196       setTimeout(function(){throw err;});
 197     }
 198     finally {
 199       return false;
 200     }
 201   });
 202
 203 }());
 204
 205 </script>