mason/breeders_toolbox/breeder_search_page.mas

   1
   2 <%args>
   3 $dataset_id => undef
   4 </%args>
   5
   6 <& /util/import_javascript.mas, entries => ["wizard"] &>
   7 <& /util/import_css.mas, paths => ['wizard.css'] &>
   8
   9 <& /page/page_title.mas, title=>"Search Wizard" &>
  10
  11 <div class="row">
  12   <div class="col-md-12" style="margin-bottom:1em; text-align:right;">
  13     Don't see your data? <button id="update_wizard_lists" class="btn btn-default">Refresh Lists</button>
  14     <button id="update_wizard_show" class="btn btn-default">Update Wizard</button>
  15   </div>
  16 </div>
  17
  18 <div id="wizard" class="row">
  19   <span class="wizard-main">
  20     <span class="wizard-columns"></span>
  21     <div class="templates" style="display: none !important;">
  22
  23       <div class="wizard-unselected">
  24         <div class="btn-group wizard-list-item">
  25           <button type="button" class="btn btn-xs btn-success wizard-list-add">&#x2b;</button>
  26           <a target="_blank" class="btn btn-xs btn-default wizard-list-name"></a>
  27         </div>
  28       </div>
  29
  30       <div class="wizard-selected">
  31         <div class="btn-group wizard-list-item">
  32           <button type="button" class="btn btn-xs btn-danger wizard-list-rem">&#10005;</button>
  33           <a target="_blank" class="btn btn-xs btn-default wizard-list-name"></a>
  34         </div>
  35       </div>
  36
  37       <div class="wizard-column">
  38         <div class="wizard-panel panel panel-default">
  39
  40           <span class="wizard-loader glyphicon glyphicon-refresh" aria-hidden="true"></span>
  41
  42           <div class="panel-heading">
  43             <select class="wizard-type-select form-control input-sm form-inline">
  44               <option value="" disabled selected>Select Column Type</option>
  45               <optgroup class="wizard-types-group" label="--------------------"></optgroup>
  46               <optgroup class="wizard-lists-group" label="Load Selection from List:"></optgroup>
  47             </select>
  48           </div>
  49
  50           <div class="panel-heading">
  51             <input type="text" class="wizard-search form-control input-sm" placeholder="Search">
  52           </div>
  53
  54           <div class="panel-body">
  55
  56             <div class="wizard-btn-center">
  57               <div class="btn-group">
  58                 <button class="wizard-select-all btn btn-default btn-xs">Select All</button
  59                 ><button class="wizard-btn-tag btn btn-primary btn-xs">
  60                   <span class="wizard-count-selected">0</span>/<span class="wizard-count-all">0</span>
  61                 </button
  62                 ><button class="wizard-select-clear btn btn-default btn-xs">Clear</button>
  63               </div>
  64             </div>
  65
  66             <ul class="wizard-list-unselected wizard-list well"></ul>
  67             <ul class="wizard-list-selected wizard-list well"></ul>
  68
  69             <div class="wizard-btn-center wizard-union-toggle">
  70               <div class="btn-group">
  71                 <button class="wizard-btn-tag btn btn-xs btn-default disabled">Match</button
  72                 ><button class="btn btn-xs btn-primary active">ANY</button
  73                 ><button class="btn btn-default btn-xs">ALL</button>
  74               </div>
  75             </div>
  76
  77           </div>
  78
  79           <table class="wizard-save-to-list table panel-footer">
  80             <&| /util/user.mas:logged_in &>
  81               <tr>
  82                 <td>
  83                   <select class="wizard-add-to-list-id form-control input-sm">
  84                     <option selected value="" disabled>Add to List...</option>
  85                     <optgroup class="wizard-lists-group" label="--------------------"></optgroup>
  86                   </select>
  87                 </td>
  88                 <td>
  89                   <button class="wizard-add-to-list btn btn-sm btn-primary btn-block">Add</button>
  90                 </td>
  91               </tr>
  92               <tr>
  93                 <td>
  94                   <input class="wizard-create-list-name form-control input-sm" type="text" placeholder="Create New List..."></input>
  95                 </td>
  96                 <td>
  97                   <button class="wizard-create-list btn btn-primary btn-sm btn-block">Create</button>
  98                 </td>
  99               </tr>
 100             </&>
 101             <&| /util/user.mas:logged_out &>
 102               <tr>
 103                 <td><button class="btn btn-xs btn-primary" name="site_login_button">Log In</button> to save lists.</td>
 104               </tr>
 105             </&>
 106           </table>
 107
 108         </div>
 109       </div>
 110
 111     </div>
 112   </span>
 113
 114   <div class="clearfix col-xs-12"></div>
 115
 116   <div class="wizard-datasets panel-group col-sm-12 col-md-6">
 117     <div class="panel panel-default wizard-panel">
 118       <div class="panel-heading">
 119         <&| /util/user.mas:logged_out &><button class="btn btn-xs btn-primary" name="site_login_button">Log In</button> to</&>
 120         Load/Create Datasets using <button class="btn btn-xs btn-default disabled wizard-btn-tag">Match</button> Columns
 121       </div>
 122       <&| /util/user.mas:logged_in &>
 123         <div class="panel-body">
 124           <div class="input-group">
 125             <select class="form-control input-sm wizard-dataset-select">
 126               <option selected value="" disabled>Load Dataset</option>
 127               <optgroup class="wizard-dataset-group" label="--------------------"></optgroup>
 128             </select>
 129             <span class="input-group-btn">
 130               <span><button style="width:5em;margin-left:4px;" class="btn btn-sm btn-primary wizard-dataset-load">Load</button></span>
 131             </span>
 132           </div>
 133         </div>
 134         <div class="panel-body" style="margin-top:-1px;">
 135           <div class="input-group">
 136             <input type="text" placeholder="Create New Dataset" class="form-control input-sm wizard-dataset-name" />
 137             <span class="input-group-btn">
 138               <span><button style="width:5em;margin-left:4px;" class="btn btn-sm btn-primary wizard-dataset-create">Create</button></span>
 139             </span>
 140           </div>
 141         </div>
 142       </&>
 143     </div>
 144   </div>
 145
 146   <div class="wizard-downloads panel-group col-sm-12 col-md-6" id="wiz-down-group" role="tablist" aria-multiselectable="true">
 147     <&| /util/user.mas:logged_out &>
 148       <div class="panel panel-default">
 149         <div class="panel-heading">
 150           <button class="btn btn-xs btn-primary" name="site_login_button">Log In</button> to download related data.
 151         </div>
 152       </div>
 153     </&>
 154     <&| /util/user.mas:logged_in &>
 155       <div class="panel panel-default">
 156         <div class="panel-heading" role="button" data-toggle="collapse" data-parent="#wiz-down-group" href="#wiz-down-1-c" aria-controls="wiz-down-1-c">
 157           <span class="btnn btn-link">Related Genotype Data</span>
 158         </div>
 159         <div id="wiz-down-1-c" class="panel-collapse collapse" role="tabpanel">
 160           <table class="table">
 161             <tr>
 162               <td colspan="3">
 163                 <p>To download related genotype data, select <strong>1 or more Accessions</strong> and <strong>no more than 1 Genotyping Protocol</strong>
 164                 in the wizard.  Optionally, select a Chromosome and enter a position range below.  If no genotyping protocol is selected, the
 165                 database default protocol will be used.</p>
 166                 <input class="wizard-download-genotypes-info form-control input-sm" type="text" disabled></input>
 167               </td>
 168             </tr>
 169             <tr>
 170               <td>
 171                 <span>Chromosome</span>
 172                 <select class="wizard-download-genotypes-chromosome-number form-control"></select>
 173               </td>
 174               <td>
 175                 <span>Start Position</span>
 176                 <input placeholder="" type="number" class="wizard-download-genotypes-start-position form-control">
 177               </td>
 178               <td>
 179                 <span>End Position</span>
 180                 <input placeholder="" type="number" class="wizard-download-genotypes-end-position form-control">
 181               </td>
 182             </tr>
 183             <tr>
 184               <td colspan="3">
 185                 <select class="wizard-download-genotypes-format form-control" >
 186                     <option value="DosageMatrix">Dosage Matrix</option>
 187                     <option value="VCF">VCF</option>
 188                 </select>
 189               </td>
 190             </tr>
 191           </table>
 192           <div class="panel-footer" style="border-top: 1px solid #ddd;">
 193             <button class="wizard-download-genotypes btn btn-sm btn-primary">
 194                 <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
 195                 Download Genotypes
 196             </button>
 197           </div>
 198           <div class="panel-footer" style="border-top: 1px solid #ddd;">
 199             <button class="wizard-download-genetic-relationship-matrix btn btn-sm btn-primary">
 200                 <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
 201                 Download Genetic Relationship Matrix (GRM)
 202             </button>
 203           </div>
 204         </div>
 205       </div>
 206
 207       <div class="panel panel-default">
 208         <div class="panel-heading" role="button" data-toggle="collapse" data-parent="#wiz-down-group" href="#wiz-down-2-c" aria-controls="wiz-down-2-c">
 209           <span class="btnn btn-link">Related Trial Metadata</span>
 210         </div>
 211         <div id="wiz-down-2-c" class="panel-collapse collapse" role="tabpanel">
 212           <table class="table">
 213             <tr>
 214               <td>
 215                 <input class="wizard-download-tmetadata-info form-control input-sm" type="text" disabled value="No Trials Selected"></input>
 216               </td>
 217               <td>
 218                 <select class="wizard-download-tmetadata-format form-control input-sm">
 219                   <option value="" disabled>Format</option>
 220                   <option selected value="csv">CSV</option>
 221                   <option value="xls">XLS</option>
 222                 </select>
 223               </td>
 224             </tr>
 225           </table>
 226           <div class="panel-footer" style="border-top: 1px solid #ddd;">
 227             <button class="wizard-download-tmetadata btn btn-sm btn-primary">
 228                 <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
 229                 Metadata
 230             </button>
 231           </div>
 232         </div>
 233       </div>
 234
 235       <div class="panel panel-default">
 236         <div class="panel-heading" role="button" data-toggle="collapse" data-parent="#wiz-down-group" href="#wiz-down-3-c" aria-controls="wiz-down-3-c">
 237           <span class="btnn btn-link">Related Trial Phenotypes</span>
 238         </div>
 239         <div id="wiz-down-3-c" class="panel-collapse collapse" role="tabpanel">
 240           <table class="table">
 241             <tr>
 242               <td colspan="3">
 243                 <input class="wizard-download-phenotypes-info form-control input-sm" type="text" disabled></input>
 244               </td>
 245             </tr>
 246             <tr>
 247               <td colspan="2">
 248                 <select class="wizard-download-phenotypes-format form-control input-sm">
 249                   <option value="" disabled>Format</option>
 250                   <option selected value="csv">CSV</option>
 251                   <option value="xls">XLS</option>
 252                 </select>
 253               </td>
 254               <td>
 255                 <select class="wizard-download-phenotypes-level form-control input-sm">
 256                   <option value="" disabled>Data Level</option>
 257                   <option value="all">All</option>
 258                   <option selected value="plot">Plots</option>
 259                   <option value="plant">Plants</option>
 260                 </select>
 261               </td>
 262             </tr>
 263             <tr>
 264               <td>
 265                 <div class="checkbox">
 266                   <label>
 267                     <input class="wizard-download-phenotypes-timestamp" type="checkbox">
 268                     Include timestamps
 269                   </label>
 270                 </div>
 271               </td>
 272               <td colspan="2">
 273                 <div class="checkbox">
 274                   <label>
 275                     <input class="wizard-download-phenotypes-outliers" type="checkbox">
 276                     Supress user defined phenotype outliers
 277                   </label>
 278                 </div>
 279               </td>
 280             </tr>
 281             <tr>
 282               <td>
 283                 <span>Trait Name Contains</span>
 284                 <input placeholder="" type="text" class="wizard-download-phenotypes-name form-control">
 285               </td>
 286               <td>
 287                 <span>Min Value</span>
 288                 <input placeholder="-&#8734;" type="text" class="wizard-download-phenotypes-min form-control">
 289               </td>
 290               <td>
 291                 <span>Max Value</span>
 292                 <input placeholder="&#8734;" type="text" class="wizard-download-phenotypes-max form-control">
 293               </td>
 294             </tr>
 295           </table>
 296           <div class="panel-footer" style="border-top: 1px solid #ddd;">
 297             <button class="wizard-download-phenotypes btn btn-sm btn-primary">
 298                 <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
 299                 Phenotypes
 300             </button>
 301           </div>
 302         </div>
 303       </div>
 304     </&>
 305   </div>
 306
 307 </div>
 308
 309 <script type="text/javascript">
 310   window.sWizard = jsMod['wizard'].WizardSetup("#wizard");
 311 </script>
 312
 313 <div class="modal fade" id="update_wizard_dialog" name="update_wizard_dialog" tabindex="-1" role="dialog" aria-labelledby="updateWizardDialog">
 314   <div class="modal-dialog" role="document">
 315     <div class="modal-content">
 316       <div class="modal-header">
 317         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 318         <h3 class="modal-title" id="updateWizardDialog">Update Search Wizard</h3>
 319       </div>
 320       <div class="modal-body">
 321         <div class="container-fluid">
 322              <h4>How the wizard works</h4>
 323                      <p>For the search wizard to be fast and flexible, it avoids querying the database directly. Instead, it stores a copy of the data from the database in a temporary format that is optimized for the types of queries the wizard makes.</p><p>For this to be practical, the copy must be updated regularly. Updates usually start every time new data is uploaded, however users with submitter status or higher can also initiate them manually.</p><p>If an update isn't already in progress, you can initiate one below. It will run independently on the server without any additional input required from the user. Depending on the size of the database, it will take from a few minutes to a few hours to complete.</p>
 324         <div><h4>Current status:</h4><p id="wizard_status"></p></div>
 325         </div>
 326       </div>
 327       <div class="modal-footer">
 328         <div class="well well-sm" id="update_wizard_error" style="display:none;"></div>
 329         <button type="button" class="btn btn-primary wiz-update" name="update_wizard" data-loading-text="Working..." id="update_wizard">Update search wizard</button>
 330         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 331       </div>
 332     </div>
 333   </div>
 334 </div>
 335
 336 <script type="text/javascript">
 337   d3.select('#update_wizard_show').on('click', function () {
 338     $('#update_wizard_dialog').modal("show");
 339     jsMod['wizard'].updateStatus("#wizard_status")
 340       .then(function(isLoading){
 341         if(isLoading) {
 342           d3.select("#update_wizard")
 343           .attr("title","A search wizard update is already in progress...")
 344           .attr("disabled",true);
 345         }
 346         else {
 347           d3.select("#update_wizard")
 348           .attr("title","Refresh the search wizard to include newly uploaded data")
 349           .attr("disabled",null)
 350         }
 351       });
 352   });
 353
 354   d3.select("#update_wizard").on('click',function(){
 355     jsMod['wizard'].refreshMatviews("fullview",this);
 356   });
 357
 358   d3.select("#update_wizard_lists").on('click',function(){
 359     window.sWizard.reload_lists();
 360   });
 361
 362
 363   // Wizard Callback: get chromosome names for a single selected genotyping protocol
 364   var SELECTED_GENOTYPING_PROTOCOL = undefined;
 365   window.sWizard.wizard.on_change(function(categories, selections, operations) {
 366     var selected_genotyping_protocols = selections.hasOwnProperty('genotyping_protocols') ? selections.genotyping_protocols : [];
 367     if ( selected_genotyping_protocols.length <= 1 ) {
 368       var selected_genotyping_protocol = selected_genotyping_protocols.length === 1 ? selected_genotyping_protocols[0].id : "";
 369       if ( selected_genotyping_protocol !== SELECTED_GENOTYPING_PROTOCOL ) {
 370         SELECTED_GENOTYPING_PROTOCOL = selected_genotyping_protocol;
 371         jQuery.ajax({
 372           url: '/ajax/breeder/search/genotyping_protocol_chromosomes',
 373           method: "GET",
 374           data: { 'genotyping_protocol': SELECTED_GENOTYPING_PROTOCOL },
 375           error: function(response) {
 376             console.log("ERROR: Could not get chromosome names for genotyping protocol #" + SELECTED_GENOTYPING_PROTOCOL);
 377             console.log(response);
 378             updateChromosomeNames();
 379           },
 380           success: function(response) {
 381             if (response.error) {
 382               console.log("ERROR: Server returned an error trying to get the chromosome names for genotyping protocol #" + SELECTED_GENOTYPING_PROTOCOL);
 383               console.log(repsonse.error);
 384               updateChromosomeNames();
 385             }
 386             else {
 387               updateChromosomeNames(response.chromosome_names);
 388             }
 389           }
 390         });
 391       }
 392     }
 393     else {
 394       SELECTED_GENOTYPING_PROTOCOL = "";
 395       updateChromosomeNames();
 396     }
 397   });
 398   updateChromosomeNames();
 399
 400   // Set the chromosome names for the select dropdown menu
 401   function updateChromosomeNames(names) {
 402     var html = "";
 403     if ( names )  {
 404       html += "<option value=''>All</option>";
 405       for ( var i = 0; i < names.length; i++ ) {
 406         html += "<option value='" + names[i] + "'>" + names[i] + "</option>";
 407       }
 408     }
 409     $(".wizard-download-genotypes-chromosome-number").html(html);
 410   }
 411
 412 </script>