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="8">
 163                 <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>
 164                 <span>Download Genotype Data</span>
 165                 <input class="wizard-download-genotypes-info form-control input-sm" type="text" disabled></input>
 166               </td>
 167               <td colspan="4">
 168                   <span>Compute From Parents</span><br/>
 169                   <input type="checkbox" class="wizard-download-genotypes-parents-compute">
 170               </td>
 171             </tr>
 172           </table>
 173           <div class="panel-footer" style="border-top: 1px solid #ddd;">
 174             <table class="table">
 175                 <tr>
 176                   <td colspan="4">
 177                     <span>Chromosome</span>
 178                     <select class="wizard-download-genotypes-chromosome-number form-control input-sm"></select>
 179                   </td>
 180                   <td colspan="4">
 181                     <span>Start Position</span>
 182                     <input placeholder="" type="number" class="wizard-download-genotypes-start-position form-control input-sm">
 183                   </td>
 184                   <td colspan="4">
 185                     <span>End Position</span>
 186                     <input placeholder="" type="number" class="wizard-download-genotypes-end-position form-control input-sm">
 187                   </td>
 188                 </tr>
 189                 <tr>
 190                   <td colspan="6">
 191                     <span>Genotypes Download Format</span>
 192                     <select class="wizard-download-genotypes-format form-control input-sm" >
 193                         <option value="VCF">VCF File Format</option>
 194                         <option value="DosageMatrix">Dosage Matrix File Format (.tsv)</option>
 195                     </select>
 196                   </td>
 197                   <td colspan="6">
 198                     <span>Marker Set Filter</span>
 199                     <select class="wizard-download-genotypes-marker-set-list-id form-control input-sm" id="wizard-download-genotypes-marker-set-list-id"></select>
 200                   </td>
 201                 </tr>
 202                 <tr>
 203                     <td colspan="6">
 204                         <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, and marker set options. 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>
 205                         <span>Download Genotypes</span><br/>
 206                         <button class="wizard-download-genotypes btn btn-sm btn-primary">
 207                             <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
 208                             Download Genotypes
 209                         </button>
 210                     </td>
 211                     <td colspan="6">
 212                         <span>Marker Set Filter</span><br/>
 213                         <button class="btn btn-sm btn-default" onClick="window.open('/breeders/markers', '_blank');">
 214                             Manage Marker Sets
 215                         </button>
 216                     </td>
 217                 </tr>
 218             </table>
 219           </div>
 220           <div class="panel-footer" style="border-top: 1px solid #ddd;">
 221             <table class="table">
 222                 <tr>
 223                     <td colspan="6">
 224                       <span>Minor Allele Frequency</span>
 225                       <input placeholder="0.05" value="0.05" type="number" class="wizard-download-genotypes-grm-maf form-control input-sm">
 226                     </td>
 227                     <td colspan="3">
 228                       <span>Marker Filter</span>
 229                       <input placeholder="0.60" value="0.60" type="number" class="wizard-download-genotypes-grm-marker-filter form-control input-sm">
 230                     </td>
 231                     <td colspan="3">
 232                       <span>Individuals Filter</span>
 233                       <input placeholder="0.80" value="0.80" type="number" class="wizard-download-genotypes-grm-individuals-filter form-control input-sm">
 234                     </td>
 235                 </tr>
 236               <tr>
 237                 <td colspan="12">
 238                   <span>Genomic Relationship Matrix (GRM) Download Format</span>
 239                   <select class="wizard-download-genotypes-grm-format form-control input-sm" >
 240                       <!--option value="heatmap">Heatmap (.pdf)</option-->
 241                       <option value="matrix">Matrix (.tsv)</option>
 242                       <option value="three_column">3-Column Format (.tsv)</option>
 243                   </select>
 244                   <br/>
 245                     <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>
 246                     <span>Download GRM</span><br/>
 247                     <button class="wizard-download-genetic-relationship-matrix btn btn-sm btn-primary">
 248                         <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
 249                         Download GRM
 250                     </button>
 251                 </td>
 252               </tr>
 253               <tr>
 254                   <td colspan="12">
 255                     <span>Genome Wide Association Study (GWAS) Download Format</span>
 256                     <select class="wizard-download-genotypes-gwas-format form-control input-sm" >
 257                         <option value="manhattan_qq_plots">Manhattan + QQ Plots (.pdf)</option>
 258                         <option value="results_tsv">GWAS Results (.tsv)</option>
 259                     </select>
 260                     <br/>
 261                     <span>Selected Traits Are All Repeated Measurements</span>
 262                     <select class="wizard-download-genotypes-gwas-repeated-measurements form-control input-sm" >
 263                         <option value="no">No</option>
 264                         <option value="yes">Yes</option>
 265                     </select>
 266                     <br/>
 267                         <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>
 268                         <span>Run GWAS</span><br/>
 269                       <button class="wizard-download-gwas btn btn-sm btn-primary">
 270                           <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
 271                           Download GWAS
 272                       </button>
 273                   </td>
 274               </tr>
 275             </table>
 276
 277           </div>
 278         </div>
 279       </div>
 280
 281       <div class="panel panel-default">
 282         <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">
 283           <span class="btnn btn-link">Related Trial Metadata</span>
 284         </div>
 285         <div id="wiz-down-2-c" class="panel-collapse collapse" role="tabpanel">
 286           <table class="table">
 287             <tr>
 288               <td>
 289                 <input class="wizard-download-tmetadata-info form-control input-sm" type="text" disabled value="No Trials Selected"></input>
 290               </td>
 291               <td>
 292                 <select class="wizard-download-tmetadata-format form-control input-sm">
 293                   <option value="" disabled>Format</option>
 294                   <option selected value="csv">CSV</option>
 295                   <option value="xls">XLS</option>
 296                 </select>
 297               </td>
 298             </tr>
 299           </table>
 300           <div class="panel-footer" style="border-top: 1px solid #ddd;">
 301             <button class="wizard-download-tmetadata btn btn-sm btn-primary">
 302                 <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
 303                 Metadata
 304             </button>
 305           </div>
 306         </div>
 307       </div>
 308
 309       <div class="panel panel-default">
 310         <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">
 311           <span class="btnn btn-link">Related Trial Phenotypes</span>
 312         </div>
 313         <div id="wiz-down-3-c" class="panel-collapse collapse" role="tabpanel">
 314           <table class="table">
 315             <tr>
 316               <td colspan="3">
 317                 <input class="wizard-download-phenotypes-info form-control input-sm" type="text" disabled></input>
 318               </td>
 319             </tr>
 320             <tr>
 321               <td colspan="2">
 322                 <select class="wizard-download-phenotypes-format form-control input-sm">
 323                   <option value="" disabled>Format</option>
 324                   <option selected value="csv">CSV</option>
 325                   <option value="xls">XLS</option>
 326                 </select>
 327               </td>
 328               <td>
 329                 <select class="wizard-download-phenotypes-level form-control input-sm">
 330                   <option value="" disabled>Data Level</option>
 331                   <option selected value="all">All</option>
 332                   <option value="plot">Plots</option>
 333                   <option value="plant">Plants</option>
 334                 </select>
 335               </td>
 336             </tr>
 337             <tr>
 338               <td>
 339                 <div class="checkbox">
 340                   <label>
 341                     <input class="wizard-download-phenotypes-timestamp" type="checkbox">
 342                     Include timestamps
 343                   </label>
 344                 </div>
 345               </td>
 346               <td colspan="2">
 347                 <div class="checkbox">
 348                   <label>
 349                     <input class="wizard-download-phenotypes-outliers" type="checkbox">
 350                     Supress user defined phenotype outliers
 351                   </label>
 352                 </div>
 353               </td>
 354             </tr>
 355             <tr>
 356               <td>
 357                 <span>Trait Name Contains</span>
 358                 <input placeholder="" type="text" class="wizard-download-phenotypes-name form-control">
 359               </td>
 360               <td>
 361                 <span>Min Value</span>
 362                 <input placeholder="-&#8734;" type="text" class="wizard-download-phenotypes-min form-control">
 363               </td>
 364               <td>
 365                 <span>Max Value</span>
 366                 <input placeholder="&#8734;" type="text" class="wizard-download-phenotypes-max form-control">
 367               </td>
 368             </tr>
 369           </table>
 370           <div class="panel-footer" style="border-top: 1px solid #ddd;">
 371             <button class="wizard-download-phenotypes btn btn-sm btn-primary">
 372                 <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
 373                 Download Phenotypes
 374             </button>
 375           </div>
 376         </div>
 377       </div>
 378     </&>
 379   </div>
 380
 381 </div>
 382
 383 <script type="text/javascript">
 384   window.sWizard = jsMod['wizard'].WizardSetup("#wizard");
 385 </script>
 386
 387 <div class="modal fade" id="update_wizard_dialog" name="update_wizard_dialog" tabindex="-1" role="dialog" aria-labelledby="updateWizardDialog">
 388   <div class="modal-dialog" role="document">
 389     <div class="modal-content">
 390       <div class="modal-header">
 391         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 392         <h3 class="modal-title" id="updateWizardDialog">Update Search Wizard</h3>
 393       </div>
 394       <div class="modal-body">
 395         <div class="container-fluid">
 396              <h4>How the wizard works</h4>
 397                      <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>
 398         <div><h4>Current status:</h4><p id="wizard_status"></p></div>
 399         </div>
 400       </div>
 401       <div class="modal-footer">
 402         <div class="well well-sm" id="update_wizard_error" style="display:none;"></div>
 403         <button type="button" class="btn btn-primary wiz-update" name="update_wizard" data-loading-text="Working..." id="update_wizard">Update search wizard</button>
 404         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 405       </div>
 406     </div>
 407   </div>
 408 </div>
 409
 410 <script type="text/javascript">
 411   d3.select('#update_wizard_show').on('click', function () {
 412     $('#update_wizard_dialog').modal("show");
 413     jsMod['wizard'].updateStatus("#wizard_status")
 414       .then(function(isLoading){
 415         if(isLoading) {
 416           d3.select("#update_wizard")
 417           .attr("title","A search wizard update is already in progress...")
 418           .attr("disabled",true);
 419         }
 420         else {
 421           d3.select("#update_wizard")
 422           .attr("title","Refresh the search wizard to include newly uploaded data")
 423           .attr("disabled",null)
 424         }
 425       });
 426   });
 427
 428   d3.select("#update_wizard").on('click',function(){
 429     jsMod['wizard'].refreshMatviews("fullview",this);
 430   });
 431
 432   d3.select("#update_wizard_lists").on('click',function(){
 433     window.sWizard.reload_lists();
 434   });
 435
 436
 437   // Wizard Callback: get chromosome names for a single selected genotyping protocol
 438   var SELECTED_GENOTYPING_PROTOCOL = undefined;
 439   window.sWizard.wizard.on_change(function(categories, selections, operations) {
 440     var selected_genotyping_protocols = selections.hasOwnProperty('genotyping_protocols') ? selections.genotyping_protocols : [];
 441     if ( selected_genotyping_protocols.length <= 1 ) {
 442       var selected_genotyping_protocol = selected_genotyping_protocols.length === 1 ? selected_genotyping_protocols[0].id : "";
 443       if ( selected_genotyping_protocol !== SELECTED_GENOTYPING_PROTOCOL ) {
 444         SELECTED_GENOTYPING_PROTOCOL = selected_genotyping_protocol;
 445         jQuery.ajax({
 446           url: '/ajax/breeder/search/genotyping_protocol_chromosomes',
 447           method: "GET",
 448           data: { 'genotyping_protocol': SELECTED_GENOTYPING_PROTOCOL },
 449           error: function(response) {
 450             console.log("ERROR: Could not get chromosome names for genotyping protocol #" + SELECTED_GENOTYPING_PROTOCOL);
 451             console.log(response);
 452             updateChromosomeNames();
 453           },
 454           success: function(response) {
 455             if (response.error) {
 456               console.log("ERROR: Server returned an error trying to get the chromosome names for genotyping protocol #" + SELECTED_GENOTYPING_PROTOCOL);
 457               console.log(repsonse.error);
 458               updateChromosomeNames();
 459             }
 460             else {
 461               updateChromosomeNames(response.chromosome_names);
 462             }
 463           }
 464         });
 465       }
 466     }
 467     else {
 468       SELECTED_GENOTYPING_PROTOCOL = "";
 469       updateChromosomeNames();
 470     }
 471   });
 472   updateChromosomeNames();
 473
 474   // Set the chromosome names for the select dropdown menu
 475   function updateChromosomeNames(names) {
 476     var html = "";
 477     if ( names )  {
 478       html += "<option value=''>All</option>";
 479       for ( var i = 0; i < names.length; i++ ) {
 480         html += "<option value='" + names[i] + "'>" + names[i] + "</option>";
 481       }
 482     }
 483     $(".wizard-download-genotypes-chromosome-number").html(html);
 484   }
 485
 486 </script>