mason/tools/in_silico_pcr/in_silico_pcr.mas

   1 <%args>
   2   $preselected_database => ''
   3   $preselected_category => ''
   4   $dataset_groups => []
   5   $databases => {}
   6   @input_options => ()
   7   $preload_id => ''
   8   $preload_type => ''
   9 </%args>
  10
  11 <%perl>
  12   use JSON::Any;
  13
  14   my $menus = {};
  15   foreach my $d (keys(%$databases)) {
  16      $menus->{$d} = $m->scomp('/page/html_select.mas', name=>"database", params=>"class\=\"form-control input-sm blast_select_box\"", id=>"database", choices => [ @{$databases->{$d}} ], selected=> $preselected_database );
  17   }
  18
  19   my $preload = "";
  20   if ($preload_id && $preload_type) {
  21     $preload = $preload_id;
  22   }
  23
  24 </%perl>
  25
  26
  27 <& /page/page_title.mas, title=>"In Silico PCR" &>
  28
  29 <form id="PCRform" method="post" action="/tools/pcr_results/" enctype="multipart/form-data">
  30 <&| /page/info_section.mas, id=>"pcr_parameter_section", title=>"PCR Primers", collapsible=>1, collapsed=>0, subtitle=>'<button type="button" class="btn btn-link pull-right" data-toggle="modal" data-target="#pcr_help" style="padding:0px">Help <span class="glyphicon glyphicon-question-sign"></span></button>' &>
  31   <table>
  32         <tr>
  33                 <td>
  34       <label class="blast_select_label" for="fprimer">Forward Primer </label>
  35         </td>
  36         <td>
  37                 <input id="fprimer" class="form-control" size="65" value="CCAGCAATCCTCTTCAAAGC" name="fprimer" />
  38           <p id="fprimer_alert" class="text-danger"></p>
  39         </td>
  40       </tr>
  41         <tr>
  42                 <td></td>
  43       <td>
  44                         <input id="frevcom" type="checkbox" name="frevcom"/> <label class="blast_select_label" for="frevcom">Reverse Complement </label>
  45       </td>
  46     </tr>
  47         <tr>
  48                 <td>
  49         <label class="blast_select_label" for="rprimer">Reverse Primer </label>
  50         </td>
  51         <td>
  52                 <input id="rprimer" class="form-control" size="65" value="TGATCCACTGCAAAGTACGC" name="rprimer" />
  53         <p id="rprimer_alert" class="text-danger"></p>
  54         </td>
  55     </tr>
  56         <tr>
  57                 <td>
  58       </td>
  59       <td>
  60                         <input id="rrevcom" type="checkbox" name="rrevcom" /> <label class="blast_select_label" for="rrevcom">Reverse Complement </label>
  61       </td>
  62     </tr>
  63     <tr>
  64       <td>
  65         <label class="blast_select_label" for="productLength">Product Maximum Length </label>
  66       </td>
  67       <td>
  68         <input id="product_length" class="blast_select_box form-control" size="5" value="5000" name="productLength" />
  69         <p id="product_length_alert" class="text-danger"></p>
  70       </td>
  71     </tr>
  72     <tr>
  73       <td>
  74         <label class="blast_select_label" for="allowedMismatches">Allowed Mismatches</label>
  75       </td>
  76       <td>
  77         <input id="allowed_mm" class="blast_select_box form-control" size="5" value="0" name="allowedMismatches" />
  78         <p id="allowed_mm_alert" class="text-danger"></p>
  79       </td>
  80     </tr>
  81   </table>
  82 </&>
  83
  84
  85 <&| /page/info_section.mas, id=>"blast_parameter_section", title=>"BLAST parameters", collapsible=>1, collapsed=>0, subtitle=>'<button type="button" class="btn btn-link pull-right" data-toggle="modal" data-target="#blast_help" style="padding:0px">Help <span class="glyphicon glyphicon-question-sign"></span></button>' &>
  86   <input type="hidden" name="outformat" value="0" />
  87
  88   <div class="form-group form-inline">
  89     <table>
  90       <tr style="display:none">
  91         <td>
  92         </td>
  93         <td>
  94           <& /page/html_select.mas, name=>'Datasets', choices=> $dataset_groups, id=>"dataset_select", name=>"dataset_select", params=>"class\=\"form-control input-sm blast_select_box\"", selected=>"$preselected_category" &>
  95           <br>
  96         </td>
  97       </tr>
  98       <tr>
  99         <td>
 100           <label class="blast_select_label" for="database_select">Database </label>
 101         </td>
 102         <td>
 103           <span id='database_select' ></span>
 104           <br>
 105         </td>
 106       </tr>
 107       <tr>
 108         <td>
 109           <label class="blast_select_label" for="matrix">Substitution Matrix</label>
 110         </td>
 111           <td >
 112               <select name="matrix" class="form-control input-sm blast_select_box">
 113               <option value="BLOSUM62">BLOSUM62 (default)</option>
 114               <option value="BLOSUM80">BLOSUM80 (recent divergence)</option>
 115               <option value="BLOSUM45">BLOSUM45 (ancient divergence)</option>
 116               <option value="PAM30">PAM30</option>
 117               <option value="PAM70">PAM70</option>
 118               </select>
 119           </td>
 120       </tr>
 121       <tr>
 122         <td>
 123         <label class="blast_select_label" for="evalue">e value</label>
 124         </td>
 125           <td >
 126                 <input class="blast_select_box form-control" type="text" size="10" value="10" name="evalue" />
 127           </td>
 128       </tr>
 129       <tr>
 130         <td>
 131           <label class="blast_select_label" for="filterq">Filter low complexity</label>
 132
 133         </td>
 134           <td><input type="checkbox" checked="checked" name="filterq" /></td>
 135       </tr>
 136     </table>
 137   </div>
 138
 139 </&>
 140 </form>
 141     <center>
 142       <button id="run_blast" class="btn btn-primary">Run</button>
 143       <!-- <button id="run_blast" class="btn btn-primary" type="submit" form="PCRform" formaction="/tools/pcr_results" formmethod="post" formenctype="multipart/form-data">Run</button> -->
 144     </center>
 145
 146
 147
 148 <div class="modal fade" id="pcr_help" role="dialog">
 149   <div class="modal-dialog">
 150
 151     <!-- Modal content-->
 152   <div class="modal-content">
 153     <div class="modal-header">
 154       <button type="button" class="close" data-dismiss="modal">&times;</button>
 155       <h4 class="modal-title">PCR Parameters Help</h4>
 156     </div>
 157
 158     <div class="modal-body">
 159       <p>Paste your primers, the maximum distance between them and the number of missmatches</p>
 160     </div>
 161
 162     <div class="modal-footer">
 163       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 164     </div>
 165   </div>
 166
 167   </div>
 168 </div>
 169
 170 <div class="modal fade" id="blast_help" role="dialog">
 171   <div class="modal-dialog">
 172
 173     <!-- Modal content-->
 174   <div class="modal-content">
 175     <div class="modal-header">
 176       <button type="button" class="close" data-dismiss="modal">&times;</button>
 177       <h4 class="modal-title">BLAST Parameters Help</h4>
 178     </div>
 179
 180     <div class="modal-body">
 181       <p>Select a genomic database and the other BLAST parameters</p>
 182     </div>
 183
 184     <div class="modal-footer">
 185       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 186     </div>
 187   </div>
 188
 189   </div>
 190 </div>
 191
 192
 193
 194 <script>
 195
 196   jQuery(document).ready(function() {
 197     swap_menu(jQuery('#dataset_select').find(':selected').attr('value'));
 198
 199     $("#run_blast").click(function(){
 200       // validate_form();
 201       $('#PCRform').submit();
 202     });
 203
 204     $("#fprimer").focusout(function(){
 205       validate_primer($("#fprimer"));
 206     });
 207
 208     $("#rprimer").focusout(function(){
 209       validate_primer($("#rprimer"));
 210     });
 211
 212     $("#product_length").focusout(function(){
 213       validate_input_integer($("#product_length"),"Max Product Length should be a positive digit.");
 214     });
 215
 216     $("#allowed_mm").focusout(function(){
 217       validate_input_integer($("#allowed_mm"),"Allowed mismatches should be a positive digit.");
 218     });
 219
 220     function swap_menu(group_id) {
 221       var menu_html = eval( <% JSON::Any->encode($menus) %>);
 222       jQuery('#database_select').html(menu_html[group_id]);
 223     }
 224
 225     function validate_primer(primer) {
 226
 227       $(primer).removeClass("alert-danger");
 228       $(primer).parent().find("p:first").html("");
 229
 230       if ($(primer).val().length < 10) {
 231         $(primer).addClass("alert-danger");
 232         $(primer).parent().find("p:first").html("Primer must be 10 nt long at least. ");
 233       }
 234
 235       if ($(primer).val().search(/[^ACGT]+/i) > 0) {
 236         $(primer).addClass("alert-danger");
 237           $(primer).parent().find("p:first").append("Primer can only contain valid nt. ");
 238       }
 239
 240     }
 241
 242     function validate_input_integer(input,msg) {
 243
 244       $(input).removeClass("alert-danger");
 245       $(input).parent().find("p:first").html("");
 246
 247       if (($(input).val().length < 0) || ($(input).val().search(/[\D]+/) > 0)) {
 248         $(input).addClass("alert-danger");
 249         $(input).parent().find("p:first").html(msg);
 250       }
 251     }
 252
 253     // function validate_form() {
 254     //
 255     //   validate_primer($("#fprimer"));
 256     //   validate_primer($("#rprimer"));
 257     //   validate_input_integer($("#product_length"),"Max Product Length should be a positive digit.");
 258     //   validate_input_integer($("#allowed_mm"),"Allowed mismatches should be a positive digit.");
 259     //
 260     // }
 261
 262   });
 263
 264 </script>
 265
 266 <style>
 267
 268 .blast_select_box {
 269   width:200px;
 270   margin-right:10px;
 271 }
 272
 273 .blast_select_label {
 274   width:200px;
 275   margin-right:10px;
 276   line-height: 32px;
 277 }
 278 </style>