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="word_size">word_size</label>
 132         </td>
 133           <td >
 134                 <input class="blast_select_box form-control" type="text" size="10" value="7" name="word_size" />
 135           </td>
 136       </tr>
 137
 138       <tr>
 139         <td>
 140           <label class="blast_select_label" for="filterq">Filter low complexity</label>
 141
 142         </td>
 143           <td><input type="checkbox" checked="checked" name="filterq" /></td>
 144       </tr>
 145     </table>
 146   </div>
 147
 148 </&>
 149 </form>
 150     <center>
 151       <button id="run_blast" class="btn btn-primary">Run</button>
 152       <!-- <button id="run_blast" class="btn btn-primary" type="submit" form="PCRform" formaction="/tools/pcr_results" formmethod="post" formenctype="multipart/form-data">Run</button> -->
 153     </center>
 154
 155
 156
 157 <div class="modal fade" id="pcr_help" role="dialog">
 158   <div class="modal-dialog">
 159
 160     <!-- Modal content-->
 161   <div class="modal-content">
 162     <div class="modal-header">
 163       <button type="button" class="close" data-dismiss="modal">&times;</button>
 164       <h4 class="modal-title">PCR Parameters Help</h4>
 165     </div>
 166
 167     <div class="modal-body">
 168       <p>Paste your primers, the maximum distance between them and the number of missmatches</p>
 169     </div>
 170
 171     <div class="modal-footer">
 172       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 173     </div>
 174   </div>
 175
 176   </div>
 177 </div>
 178
 179 <div class="modal fade" id="blast_help" role="dialog">
 180   <div class="modal-dialog">
 181
 182     <!-- Modal content-->
 183   <div class="modal-content">
 184     <div class="modal-header">
 185       <button type="button" class="close" data-dismiss="modal">&times;</button>
 186       <h4 class="modal-title">BLAST Parameters Help</h4>
 187     </div>
 188
 189     <div class="modal-body">
 190       <p>Select a genomic database and the other BLAST parameters</p>
 191     </div>
 192
 193     <div class="modal-footer">
 194       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 195     </div>
 196   </div>
 197
 198   </div>
 199 </div>
 200
 201
 202
 203 <script>
 204
 205   jQuery(document).ready(function() {
 206     swap_menu(jQuery('#dataset_select').find(':selected').attr('value'));
 207
 208     $("#run_blast").click(function(){
 209       // validate_form();
 210       $('#PCRform').submit();
 211     });
 212
 213     $("#fprimer").focusout(function(){
 214       validate_primer($("#fprimer"));
 215     });
 216
 217     $("#rprimer").focusout(function(){
 218       validate_primer($("#rprimer"));
 219     });
 220
 221     $("#product_length").focusout(function(){
 222       validate_input_integer($("#product_length"),"Max Product Length should be a positive digit.");
 223     });
 224
 225     $("#allowed_mm").focusout(function(){
 226       validate_input_integer($("#allowed_mm"),"Allowed mismatches should be a positive digit.");
 227     });
 228
 229     function swap_menu(group_id) {
 230       var menu_html = eval( <% JSON::Any->encode($menus) %>);
 231       jQuery('#database_select').html(menu_html[group_id]);
 232     }
 233
 234     function validate_primer(primer) {
 235
 236       $(primer).removeClass("alert-danger");
 237       $(primer).parent().find("p:first").html("");
 238
 239       if ($(primer).val().length < 10) {
 240         $(primer).addClass("alert-danger");
 241         $(primer).parent().find("p:first").html("Primer must be 10 nt long at least. ");
 242       }
 243
 244       if ($(primer).val().search(/[^ACGT]+/i) > 0) {
 245         $(primer).addClass("alert-danger");
 246           $(primer).parent().find("p:first").append("Primer can only contain valid nt. ");
 247       }
 248
 249     }
 250
 251     function validate_input_integer(input,msg) {
 252
 253       $(input).removeClass("alert-danger");
 254       $(input).parent().find("p:first").html("");
 255
 256       if (($(input).val().length < 0) || ($(input).val().search(/[\D]+/) > 0)) {
 257         $(input).addClass("alert-danger");
 258         $(input).parent().find("p:first").html(msg);
 259       }
 260     }
 261
 262     // function validate_form() {
 263     //
 264     //   validate_primer($("#fprimer"));
 265     //   validate_primer($("#rprimer"));
 266     //   validate_input_integer($("#product_length"),"Max Product Length should be a positive digit.");
 267     //   validate_input_integer($("#allowed_mm"),"Allowed mismatches should be a positive digit.");
 268     //
 269     // }
 270
 271   });
 272
 273 </script>
 274
 275 <style>
 276
 277 .blast_select_box {
 278   width:200px;
 279   margin-right:10px;
 280 }
 281
 282 .blast_select_label {
 283   width:200px;
 284   margin-right:10px;
 285   line-height: 32px;
 286 }
 287 </style>