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 <& /breeders_toolbox/breeder_search_page_dataset_overlay.mas &>
  19
  20 <div id="wizard" class="row">
  21   <span class="wizard-main">
  22     <span class="wizard-columns"></span>
  23     <div class="templates" style="display: none !important;">
  24
  25       <div class="wizard-unselected">
  26         <div class="btn-group wizard-list-item">
  27           <button type="button" class="btn btn-xs btn-success wizard-list-add">&#x2b;</button>
  28           <a target="_blank" class="btn btn-xs btn-default wizard-list-name"></a>
  29         </div>
  30       </div>
  31
  32       <div class="wizard-selected">
  33         <div class="btn-group wizard-list-item">
  34           <button type="button" class="btn btn-xs btn-danger wizard-list-rem">&#10005;</button>
  35           <a target="_blank" class="btn btn-xs btn-default wizard-list-name"></a>
  36         </div>
  37       </div>
  38
  39       <div class="wizard-column">
  40         <div class="wizard-panel panel panel-default">
  41
  42           <span class="wizard-loader glyphicon glyphicon-refresh" aria-hidden="true"></span>
  43
  44           <div class="panel-heading">
  45             <select class="wizard-type-select form-control input-sm form-inline">
  46               <option value="" disabled selected>Select Column Type</option>
  47               <optgroup class="wizard-types-group" label="--------------------"></optgroup>
  48               <optgroup class="wizard-lists-group" label="Load Selection from List:"></optgroup>
  49             </select>
  50           </div>
  51
  52           <div class="panel-heading">
  53             <input type="text" class="wizard-search form-control input-sm" placeholder="Search">
  54           </div>
  55
  56           <div class="panel-body">
  57
  58             <div class="wizard-btn-center">
  59               <div class="btn-group">
  60                 <button class="wizard-select-all btn btn-default btn-xs">Select All</button
  61                 ><button class="wizard-btn-tag btn btn-primary btn-xs">
  62                   <span class="wizard-count-selected">0</span>/<span class="wizard-count-all">0</span>
  63                 </button
  64                 ><button class="wizard-select-clear btn btn-default btn-xs">Clear</button>
  65               </div>
  66             </div>
  67
  68             <ul class="wizard-list-unselected wizard-list well"></ul>
  69             <ul class="wizard-list-selected wizard-list well"></ul>
  70
  71             <div class="wizard-btn-center wizard-union-toggle">
  72               <div class="btn-group">
  73                 <button class="wizard-btn-tag btn btn-xs btn-default disabled">Match</button
  74                 ><button class="btn btn-xs btn-primary active">ANY</button
  75                 ><button class="btn btn-default btn-xs">ALL</button>
  76               </div>
  77             </div>
  78
  79           </div>
  80
  81           <table class="wizard-save-to-list table panel-footer">
  82             <&| /util/user.mas:logged_in &>
  83               <tr>
  84                 <td>
  85                   <select class="wizard-add-to-list-id form-control input-sm">
  86                     <option selected value="" disabled>Add to List...</option>
  87                     <optgroup class="wizard-lists-group" label="--------------------"></optgroup>
  88                   </select>
  89                 </td>
  90                 <td>
  91                   <button class="wizard-add-to-list btn btn-sm btn-primary btn-block">Add</button>
  92                 </td>
  93               </tr>
  94               <tr>
  95                 <td>
  96                   <input class="wizard-create-list-name form-control input-sm" type="text" placeholder="Create New List..."></input>
  97                 </td>
  98                 <td>
  99                   <button class="wizard-create-list btn btn-primary btn-sm btn-block">Create</button>
 100                 </td>
 101               </tr>
 102             </&>
 103             <&| /util/user.mas:logged_out &>
 104               <tr>
 105                 <td><button class="btn btn-xs btn-primary" name="site_login_button">Log In</button> to save lists.</td>
 106               </tr>
 107             </&>
 108           </table>
 109
 110         </div>
 111       </div>
 112
 113     </div>
 114   </span>
 115
 116   <div class="clearfix col-xs-12"></div>
 117
 118   <div class="wizard-datasets panel-group col-sm-12 col-md-6">
 119     <div class="panel panel-default wizard-panel">
 120       <div class="panel-heading">
 121         <&| /util/user.mas:logged_out &><button class="btn btn-xs btn-primary" name="site_login_button">Log In</button> to</&>
 122         Load/Create Datasets using <button class="btn btn-xs btn-default disabled wizard-btn-tag">Match</button> Columns
 123       </div>
 124       <&| /util/user.mas:logged_in &>
 125         <div class="panel-body">
 126           <div class="input-group">
 127             <select class="form-control input-sm wizard-dataset-select">
 128               <option selected value="" disabled>Load Dataset</option>
 129               <optgroup class="wizard-dataset-group" label="--------------------"></optgroup>
 130             </select>
 131             <span class="input-group-btn">
 132               <span><button style="width:5em;margin-left:4px;" class="btn btn-sm btn-primary wizard-dataset-load">Load</button></span>
 133               <span><button style="width:9em;margin-left:4px;" class="btn btn-sm btn-primary wizard-dataset-public">Make Public</button></span>
 134               <span><button style="width:5em;margin-left:4px;" class="btn btn-sm btn-danger wizard-dataset-delete">Delete</button></span>
 135             </span>
 136           </div>
 137         </div>
 138         <div class="panel-body" style="margin-top:-1px;">
 139           <div class="input-group">
 140             <input type="text" placeholder="Create New Dataset" class="form-control input-sm wizard-dataset-name" />
 141             <span class="input-group-btn">
 142               <span><button style="width:5em;margin-left:4px;" class="btn btn-sm btn-primary wizard-dataset-create">Create</button></span>
 143             </span>
 144           </div>
 145         </div>
 146       </&>
 147     </div>
 148   </div>
 149
 150   <div class="wizard-downloads panel-group col-sm-12 col-md-6" id="wiz-down-group" role="tablist" aria-multiselectable="true">
 151     <&| /util/user.mas:logged_out &>
 152       <div class="panel panel-default">
 153         <div class="panel-heading">
 154           <button class="btn btn-xs btn-primary" name="site_login_button">Log In</button> to download related data.
 155         </div>
 156       </div>
 157     </&>
 158     <&| /util/user.mas:logged_in &>
 159       <div class="panel panel-default">
 160         <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">
 161           <span class="btnn btn-link">Related Genotype Data</span>
 162         </div>
 163         <div id="wiz-down-1-c" class="panel-collapse collapse" role="tabpanel">
 164           <table class="table">
 165             <tr>
 166               <td colspan="4">
 167                 <span class="glyphicon glyphicon-info-sign" title="To download related genotype data, select 1 or more Accessions and optionally no more than 1 Genotyping Protocol in the wizard. If no genotyping protocol is selected, the database default protocol will be used. Click the checkbox here to compute genotypes for the selected accessions from genotypes of parents; this works for downloading genotypes, downloading the GRM, and performing GWAS."></span>
 168                 <span>Download Genotype Data</span>
 169                 <input class="wizard-download-genotypes-info form-control input-sm" type="text" disabled></input>
 170               </td>
 171               <td colspan="4">
 172                   <span>Compute From Parents</span><br/>
 173                   <input type="checkbox" class="wizard-download-genotypes-parents-compute">
 174               </td>
 175               <td colspan="4">
 176                   <span>Include Duplicate Genotypes</span><br/>
 177                   <input type="checkbox" class="wizard-download-genotypes-duplicates-include">
 178               </td>
 179             </tr>
 180           </table>
 181           <div class="panel-footer" style="border-top: 1px solid #ddd;">
 182             <table class="table">
 183                 <tr>
 184                     <td colspan="12">
 185                         <span class="glyphicon glyphicon-info-sign" title="You can use either chromosome or markers (markerset) to filter genotyping data. You cannot use both criteria at the same time."></span>
 186                         <span>Filter by Chromosome or Markerset</span>
 187                     </td>
 188                 </tr>
 189                 <tr>
 190                     <td colspan="4">
 191                         <span>Chromosome</span>
 192                         <select class="wizard-download-genotypes-chromosome-number form-control input-sm"></select>
 193                     </td>
 194                     <td colspan="4">
 195                         <span>Start Position</span>
 196                         <input placeholder="" type="number" class="wizard-download-genotypes-start-position form-control input-sm">
 197                     </td>
 198                     <td colspan="4">
 199                         <span>End Position</span>
 200                         <input placeholder="" type="number" class="wizard-download-genotypes-end-position form-control input-sm">
 201                     </td>
 202                 </tr>
 203                 <tr>
 204                     <td colspan="6">
 205                         <span>Markerset Filter</span>
 206                         <select class="wizard-download-genotypes-marker-set-list-id form-control input-sm" id="wizard-download-genotypes-marker-set-list-id"></select>
 207                     </td>
 208                     <td colspan="6">
 209                         <br/>
 210                         <button class="btn btn-sm btn-default" onClick="window.open('/breeders/markers', '_blank');">Manage Markersets</button>
 211                     </td>
 212                 </tr>
 213                 <tr>
 214                     <td colspan="6">
 215                         <span>Genotypes Download Format</span>
 216                         <select class="wizard-download-genotypes-format form-control input-sm" >
 217                             <option value="VCF">VCF File Format</option>
 218                             <option value="DosageMatrix">Dosage Matrix File Format (.tsv)</option>
 219                         </select>
 220                     </td>
 221                     <td colspan="6">
 222                     </td>
 223                 </tr>
 224                 <tr>
 225                     <td colspan="6">
 226                         <span class="glyphicon glyphicon-info-sign" title="Select accessions, and optionally a genotyping protocol. If no genotyping protocol is selected, the default genotyping protocol is used in your system. If you want to filter genotypes, use the chromosome, start position, end position, or markerset. Can compute genotypes from parents if the parents of the accessions you selected have genotypes by checking the checkbox. Genotypes can be downloaded in VCF and Dosage Matrix Formats."></span>
 227                         <span>Download Genotypes</span><br/>
 228                         <button class="wizard-download-genotypes btn btn-sm btn-primary">
 229                             <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
 230                             Download Genotypes
 231                         </button>
 232                     </td>
 233                     <td colspan="6">
 234                     </td>
 235                 </tr>
 236             </table>
 237           </div>
 238           <div class="panel-footer" style="border-top: 1px solid #ddd;">
 239             <table class="table">
 240                 <tr>
 241                     <td colspan="6">
 242                       <span>Minor Allele Frequency</span>
 243                       <input placeholder="0.05" value="0.05" type="number" class="wizard-download-genotypes-grm-maf form-control input-sm">
 244                     </td>
 245                     <td colspan="3">
 246                       <span>Marker Filter</span>
 247                       <input placeholder="0.60" value="0.60" type="number" class="wizard-download-genotypes-grm-marker-filter form-control input-sm">
 248                     </td>
 249                     <td colspan="3">
 250                       <span>Individuals Filter</span>
 251                       <input placeholder="0.80" value="0.80" type="number" class="wizard-download-genotypes-grm-individuals-filter form-control input-sm">
 252                     </td>
 253                 </tr>
 254               <tr>
 255                 <td colspan="12">
 256                   <span>Genomic Relationship Matrix (GRM) Download Format</span>
 257                   <select class="wizard-download-genotypes-grm-format form-control input-sm" >
 258                       <!--option value="heatmap">Heatmap (.pdf)</option-->
 259                       <option value="matrix">Matrix (.tsv)</option>
 260                       <option value="three_column">3-Column Format (.tsv)</option>
 261                   </select>
 262                   <br/>
 263                     <span class="glyphicon glyphicon-info-sign" title="Select accessions, and optionally a genotyping protocol. If no genotyping protocol is selected, the default genotyping protocol is used in your system. Specify minor allele frequency (MAF), marker filter, and individuals filter. Can compute genotypes from parents if the parents of the accessions you selected have genotypes by checking the checkbox. GRM can be downloaded in a matrix format (.tsv) and a three column format."></span>
 264                     <span>Download GRM</span><br/>
 265                     <button class="wizard-download-genetic-relationship-matrix btn btn-sm btn-primary">
 266                         <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
 267                         Download GRM
 268                     </button>
 269                 </td>
 270               </tr>
 271               <tr>
 272                   <td colspan="12">
 273                     <span>Genome Wide Association Study (GWAS) Download Format</span>
 274                     <select class="wizard-download-genotypes-gwas-format form-control input-sm" >
 275                         <option value="manhattan_qq_plots">Manhattan + QQ Plots (.pdf)</option>
 276                         <option value="results_tsv">GWAS Results (.tsv)</option>
 277                     </select>
 278                     <br/>
 279                     <span>Selected Traits Are All Repeated Measurements</span>
 280                     <select class="wizard-download-genotypes-gwas-repeated-measurements form-control input-sm" >
 281                         <option value="no">No</option>
 282                         <option value="yes">Yes</option>
 283                     </select>
 284                     <br/>
 285                         <span class="glyphicon glyphicon-info-sign" title="Select accessions, traits, and optionally a genotyping protocol. If no genotyping protocol is selected, the default genotyping protocol is used in your system. When many traits are selected and these traits are not treated as repeated measurements, the traits are treated separately and distinct results are returned e.g. several Manhattan plots are returned. If the selected traits are in fact repeated measurements, then select 'yes'; a single GWAS will be run against all of the phenotypes e.g. a single Manhattan plot is returned. Specify minor allele frequency (MAF), marker filter, and individuals filter. Can compute genotypes from parents if the parents of the accessions you selected have genotypes by checking the checkbox. GWAS uses a fixed effect for different field trials and a fixed effect for replicate. GWAS uses Kinship matrix calculated from the genotype data. MAF and missing data used to filter prior to GWAS and Kinship matrix calculation. Can select whether to return results in Manhattan and QQ Plot (.pdf) form or as the tabular results (.tsv)."></span>
 286                         <span>Run GWAS</span><br/>
 287                       <button class="wizard-download-gwas btn btn-sm btn-primary">
 288                           <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
 289                           Download GWAS
 290                       </button>
 291                   </td>
 292               </tr>
 293             </table>
 294
 295           </div>
 296         </div>
 297       </div>
 298
 299       <div class="panel panel-default">
 300         <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">
 301           <span class="btnn btn-link">Related Trial Metadata</span>
 302         </div>
 303         <div id="wiz-down-2-c" class="panel-collapse collapse" role="tabpanel">
 304           <table class="table">
 305             <tr>
 306               <td>
 307                 <input class="wizard-download-tmetadata-info form-control input-sm" type="text" disabled value="No Trials Selected"></input>
 308               </td>
 309               <td>
 310                 <select class="wizard-download-tmetadata-format form-control input-sm">
 311                   <option value="" disabled>Format</option>
 312                   <option selected value="csv">CSV</option>
 313                   <option value="xls">XLS</option>
 314                 </select>
 315               </td>
 316             </tr>
 317           </table>
 318           <div class="panel-footer" style="border-top: 1px solid #ddd;">
 319             <button class="wizard-download-tmetadata btn btn-sm btn-primary">
 320                 <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
 321                 Metadata
 322             </button>
 323           </div>
 324         </div>
 325       </div>
 326
 327       <div class="panel panel-default">
 328         <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">
 329           <span class="btnn btn-link">Related Trial Phenotypes</span>
 330         </div>
 331         <div id="wiz-down-3-c" class="panel-collapse collapse" role="tabpanel">
 332           <table class="table">
 333             <tr>
 334               <td colspan="3">
 335                 <input class="wizard-download-phenotypes-info form-control input-sm" type="text" disabled></input>
 336               </td>
 337             </tr>
 338             <tr>
 339             <td colspan="1">
 340               <select class="wizard-download-phenotypes-speed form-control input-sm">
 341                 <option value="" disabled>Download Type</option>
 342                 <option selected value="Native">Default</option>
 343                 <option value="MaterializedViewTable">Fast (Improves speed but may miss recent changes)</option>
 344               </select>
 345             </td>
 346               <td colspan="1">
 347                 <select class="wizard-download-phenotypes-format form-control input-sm">
 348                   <option value="" disabled>Download Format</option>
 349                   <option selected value="csv">CSV</option>
 350                   <option value="xls">XLS</option>
 351                 </select>
 352               </td>
 353               <td colspan="1">
 354                 <select class="wizard-download-phenotypes-level form-control input-sm">
 355                   <option value="" disabled>Data Level</option>
 356                   <option selected value="all">All</option>
 357                   <option value="plot">Plots</option>
 358                   <option value="plant">Plants</option>
 359                 </select>
 360               </td>
 361             </tr>
 362             <tr>
 363               <td>
 364                 <div class="checkbox">
 365                   <label>
 366                     <input class="wizard-download-phenotypes-timestamp" type="checkbox">
 367                     Include timestamps
 368                   </label>
 369                 </div>
 370               </td>
 371               <td colspan="2">
 372                 <div class="checkbox">
 373                   <label>
 374                     <input class="wizard-download-phenotypes-entry-numbers" type="checkbox">
 375                     Include accession entry numbers
 376                   </label>
 377                 </div>
 378               </td>
 379             </tr>
 380             <tr>
 381               <td colspan="3" style="border-top: none; padding-top: 0">
 382                 <div class="checkbox">
 383                   <label>
 384                     <input class="wizard-download-phenotypes-outliers" type="checkbox">
 385                     Supress user defined phenotype outliers
 386                   </label>
 387                 </div>
 388               </td>
 389             </tr>
 390             <tr>
 391               <td>
 392                 <span>Trait Name Contains</span>
 393                 <input placeholder="" type="text" class="wizard-download-phenotypes-name form-control">
 394               </td>
 395               <td>
 396                 <span>Min Value</span>
 397                 <input placeholder="-&#8734;" type="text" class="wizard-download-phenotypes-min form-control">
 398               </td>
 399               <td>
 400                 <span>Max Value</span>
 401                 <input placeholder="&#8734;" type="text" class="wizard-download-phenotypes-max form-control">
 402               </td>
 403             </tr>
 404           </table>
 405           <div class="panel-footer" style="border-top: 1px solid #ddd;">
 406             <button class="wizard-download-phenotypes btn btn-sm btn-primary">
 407                 <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
 408                 Download Phenotypes
 409             </button>
 410           </div>
 411         </div>
 412       </div>
 413     </&>
 414   </div>
 415
 416 </div>
 417
 418 <script>
 419   window.sWizard = jsMod['wizard'].WizardSetup("#wizard");
 420 </script>
 421
 422 <div class="modal fade" id="update_wizard_dialog" name="update_wizard_dialog" tabindex="-1" role="dialog" aria-labelledby="updateWizardDialog">
 423   <div class="modal-dialog" role="document">
 424     <div class="modal-content">
 425       <div class="modal-header">
 426         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 427         <h3 class="modal-title" id="updateWizardDialog">Update Search Wizard</h3>
 428       </div>
 429       <div class="modal-body">
 430         <div class="container-fluid">
 431              <h4>How the wizard works</h4>
 432                      <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>
 433         <div><h4>Current status:</h4><p id="wizard_status"></p></div>
 434         </div>
 435       </div>
 436       <div class="modal-footer">
 437         <div class="well well-sm" id="update_wizard_error" style="display:none;"></div>
 438         <button type="button" class="btn btn-primary wiz-update" name="update_wizard" data-loading-text="Working..." id="update_wizard">Update search wizard</button>
 439         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 440       </div>
 441     </div>
 442   </div>
 443 </div>
 444
 445 <script>
 446
 447   jQuery(document).ready(function (){
 448 %  if ($dataset_id){
 449       document.getElementsByClassName("wizard-dataset-select")[0].value = <% $dataset_id %>;
 450       document.getElementsByClassName("wizard-dataset-load")[0].click();
 451 %  }
 452   });
 453
 454   d3.select('#update_wizard_show').on('click', function () {
 455     $('#update_wizard_dialog').modal("show");
 456     jsMod['wizard'].updateStatus("#wizard_status")
 457       .then(function(isLoading){
 458         if(isLoading) {
 459           d3.select("#update_wizard")
 460           .attr("title","A search wizard update is already in progress...")
 461           .attr("disabled",true);
 462         }
 463         else {
 464           d3.select("#update_wizard")
 465           .attr("title","Refresh the search wizard to include newly uploaded data")
 466           .attr("disabled",null)
 467         }
 468       });
 469   });
 470
 471   d3.select("#update_wizard").on('click',function(){
 472     jsMod['wizard'].refreshMatviews("fullview",this);
 473   });
 474
 475   d3.select("#update_wizard_lists").on('click',function(){
 476     window.sWizard.reload_lists();
 477   });
 478
 479
 480   // Wizard Callback: get chromosome names for a single selected genotyping protocol
 481   var SELECTED_GENOTYPING_PROTOCOL = undefined;
 482   window.sWizard.wizard.on_change(function(categories, selections, operations) {
 483     var selected_genotyping_protocols = selections.hasOwnProperty('genotyping_protocols') ? selections.genotyping_protocols : [];
 484     if ( selected_genotyping_protocols.length <= 1 ) {
 485       var selected_genotyping_protocol = selected_genotyping_protocols.length === 1 ? selected_genotyping_protocols[0].id : "";
 486       if ( selected_genotyping_protocol !== SELECTED_GENOTYPING_PROTOCOL ) {
 487         SELECTED_GENOTYPING_PROTOCOL = selected_genotyping_protocol;
 488         jQuery.ajax({
 489           url: '/ajax/breeder/search/genotyping_protocol_chromosomes',
 490           method: "GET",
 491           data: { 'genotyping_protocol': SELECTED_GENOTYPING_PROTOCOL },
 492           error: function(response) {
 493             console.log("ERROR: Could not get chromosome names for genotyping protocol #" + SELECTED_GENOTYPING_PROTOCOL);
 494             console.log(response);
 495             updateChromosomeNames();
 496           },
 497           success: function(response) {
 498             if (response.error) {
 499               console.log("ERROR: Server returned an error trying to get the chromosome names for genotyping protocol #" + SELECTED_GENOTYPING_PROTOCOL);
 500               console.log(repsonse.error);
 501               updateChromosomeNames();
 502             }
 503             else {
 504               updateChromosomeNames(response.chromosome_names);
 505             }
 506           }
 507         });
 508       }
 509     }
 510     else {
 511       SELECTED_GENOTYPING_PROTOCOL = "";
 512       updateChromosomeNames();
 513     }
 514   });
 515   updateChromosomeNames();
 516
 517   // Set the chromosome names for the select dropdown menu
 518   function updateChromosomeNames(names) {
 519     var html = "";
 520     if ( names )  {
 521       html += "<option value=''>All</option>";
 522       for ( var i = 0; i < names.length; i++ ) {
 523         html += "<option value='" + names[i] + "'>" + names[i] + "</option>";
 524       }
 525     }
 526     $(".wizard-download-genotypes-chromosome-number").html(html);
 527   }
 528
 529 </script>