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 Accessions results as List', collapsible=>1, collapsed=>1 &>
  59     <div style="text-align:right" id="graphical_filter_results_to_list_menu"></div>
  60     <div id="graphical_filter_result_names" style="display: none;"></div>
  61
  62   </&>
  63 </div>
  64
  65 <script>
  66
  67 (function() {
  68   'use strict';
  69   var currentGFilter = null;
  70   var list = new CXGN.List();
  71   var auth_token;
  72   var require_login = "<%  $c->get_conf('brapi_require_login') %>";
  73   if (require_login === '1'){
  74       auth_token = "<%  CXGN::Login->new($c->dbc->dbh)->get_login_cookie() %>";
  75       if (!auth_token){ alert("Login required to display graphical filtering"); }
  76   }
  77
  78   $('#accession_group').change(function(){$('#type_list_select').trigger("change");})
  79
  80   $('#type_list_select').change(function(){
  81     var list_id = $("#filter_list_select").val(),
  82         unit = $("#type_list_select").val(),
  83         group = $('#accession_group').is(":checked"),
  84         brapi = BrAPI("/brapi/v2","v2.0",auth_token);
  85     if (!unit) return;
  86     var list_contents = list.transform2Ids(list_id),
  87         list_type = list.getListType(list_id);
  88     switch (list_type) {
  89       case 'plots':
  90       case 'plants':
  91         alert("not yet implimented");
  92         break;
  93       case 'trials':
  94         updateGFilter(group,
  95           brapi.search_observationunits({
  96             "studyDbIds": list_contents,
  97             "observationLevels": [{'levelName': unit }],
  98             "includeObservations" : "true",
  99             "pageSize": 100000
 100           })
 101         );
 102         break;
 103     }
 104   });
 105
 106   function updateGFilter(group,brapi_node){
 107     if (currentGFilter!=null){
 108       $("#filtered_results").DataTable().destroy();
 109       $("#filtered_results").html("");
 110     }
 111     $('#filtered_results_wrap').hide();
 112     $('#filter_div').hide();
 113     $('#results-loading-spinner').show();
 114     brapi_node.all(function(){
 115       $('#filtered_results_wrap').show();
 116       $('#filter_div').show();
 117       $('#results-loading-spinner').hide();
 118     })
 119     currentGFilter = GraphicalFilter(
 120         brapi_node,
 121         obsTraits,
 122         group? groupCols : obsCols,
 123         group? ["Accession"] : ["Study","Unit","Accession"],
 124         group? groupByAccession : undefined
 125       );
 126     currentGFilter.draw("#filter_div","#filtered_results");
 127   }
 128
 129   $(document).ready(function(){
 130
 131     // set up and show the list select div.
 132     $('#select_div').show();
 133
 134     // set up list
 135     var filter_list_select_html = list.listSelect('filter', ['trials'/*,'plots','plants'*/], 'Choose a List:', undefined, undefined);
 136     $('#filter_list_select_container').html(filter_list_select_html);
 137     $('#filter_list_select>option:first-of-type').prop('disabled', true);
 138
 139     $('#filter_list_select').change(function(){
 140       $(this).prop('disabled', true);
 141       var list_id = $(this).val();
 142       var list_type = list.getListType(list_id);
 143       $(this).prop('disabled', false);
 144       $('#type_list_select').prop('disabled', false);
 145       switch (list_type) {
 146         case 'trials':
 147           $('#type_list_select').prop('val', "");
 148           break;
 149         case 'plots':
 150           $('#type_list_select').val("plot").trigger("change");
 151           $('#type_list_select').prop('disabled', true);
 152           break;
 153         case 'plants':
 154           $('#type_list_select').val("plant").trigger("change");
 155           $('#type_list_select').prop('disabled', true);
 156           break;
 157       }
 158     });
 159   });
 160
 161   function obsTraits(d) { // traits/values
 162     var traits = {}
 163     d.observations.forEach(function(obs){
 164       traits[obs.observationVariableName] = obs.value;
 165     });
 166     return traits;
 167   }
 168   function obsCols(d){ // header columns accessor
 169     return {
 170       'Study':d.studyName,
 171       'Unit':d.observationUnitName,
 172       'Accession':d.germplasmName,
 173     }
 174   }
 175   function groupCols(d) {
 176     return {
 177       'Accession':d.germplasmName
 178     }
 179   }
 180   function groupByAccession(d) {
 181     return d.germplasmDbId
 182   }
 183
 184   // set up the form for saving results as a list
 185   $('#new-list-form').submit(function () {
 186     if (!window.gfiltering.data){
 187       alert("Can't create a list from nothing.")
 188       return false;
 189     }
 190     try {
 191       var form = d3.map($(this).serializeArray(),function(d){return d.name;});
 192       var list = new CXGN.List();
 193       var newListID = list.newList(form.get("name").value);
 194       if (!newListID) throw "List creation failed.";
 195       list.setListType(newListID,"plots");
 196       var data = currentGFilter.data.filter(currentGFilter.root.getFilter());
 197       var count = list.addBulk(newListID,data.map(function(d){return d.observationUnitName}));
 198       if (!count) throw "Added nothing to list or addition failed.";
 199       alert("List \""+form.get("name").value+"\" created with "+count+" entries.")
 200     }
 201     catch(err) {
 202       setTimeout(function(){throw err;});
 203     }
 204     finally {
 205       return false;
 206     }
 207   });
 208
 209   $('#filtered_results').on( 'draw.dt', function () {
 210
 211         var names = [];
 212         var data = $("#filtered_results").DataTable().context[0].aoData;
 213         var displayed_rows = $("#filtered_results").DataTable().context[0].aiDisplay;
 214         var names = [];
 215         for (var i =0; i< displayed_rows.length; i++){
 216             var displayed_index = displayed_rows[i];
 217             names.push(data[displayed_index]._aFilterData[2]+'\n');
 218         }
 219         $('#graphical_filter_result_names').html(names);
 220         addToListMenu('graphical_filter_results_to_list_menu', 'graphical_filter_result_names', {
 221             listType: 'accessions'
 222         });
 223     });
 224
 225 }());
 226
 227 </script>