mason/tools/vigs/input.mas

   1
   2 <%args>
   3
   4 @databases
   5 $sequence => undef
   6 $default_db => undef
   7 $f_size => 0
   8
   9 </%args>
  10
  11 <!-- import javascript libraries-->
  12 <& /util/import_javascript.mas, classes => ['Text.Markup', 'sprintf', 'jquery', 'jqueryui', 'jquery.iframe-post-form', 'CXGN.List', 'tools/vigs'] &>
  13
  14 <& /page/page_title.mas, title=>"VIGS Tool" &>
  15
  16
  17
  18 <&| /page/info_section.mas, id=>"vigs_input" , title=>"Run VIGS Tool", collapsible => 1, collapsed => 0  &>
  19 <center>
  20 <div id="input_view">
  21
  22 Sequence:
  23
  24 <script>
  25         var seq = ">Solyc10g047140.1.1 Receptor like kinase, RLK\nATGGATCAGTCGGTGTTGGCGATCTGGGTATTTCTCTGCTTAATTGGTCTGCTTTTCAATTTGTCACCCGTCGCCGGTAACGCTGAAGGTGATGCCTTGAATGCTCTGAAGACAAATTTGGCTGATCCTAATAGTGTTCTACAGAGTTGGGATGCAACCCTTGTTAATCCTTGTACTTGGTTCCATGTGACATGCAACAATGAAAATAGTGTGACTAGAGTTGATCTAGGAAATGCAAATCTATCAGGTCAACTGGTACCACAGCTTGGCCAACTCCAGAAATTGCAGTACTTGGAACTTTATAGTAATAACATAAGCGGAAGAATTCCAAATGAACTGGGAAACTTGACAGAGTTGGTTAGTTTGGATCTTTACCTGAACAACTTAAATGGTCCTATTCCTCCCTCATTGGGCAGGCTTCAGAAGCTACGCTTCCTGAGGCTCAATAATAACAGTTTGAATGAAGGTATTCCCATGTCTCTAACCACCATTGTTGCACTTCAAGTACTTGATCTCTCAAACAACCATTTGACAGGACTAGTTCCAGTCAACGGTTCCTTTTCACTTTTTACTCCTATAAGTTTTGCTAATAATCAGTTGGAAGTTCCTCCAGTTTCTCCACCTCCTCCTCTTCCTCCTACACCCTCATCGTCATCTTCAGTGGGCAACAGCGCAACTGGAGCTATCGCTGGAGGAGTTGCTGCAGGCGCTGCTCTTCTATTTGCAGCTCCTGCAATTTTTCTTGCTTGGTGGCGTCGGAGGAAACCACAAGACCACTTCTTTGATGTTCCTGCTGAGGAGGATCCAGAAGTTCATCTGGGACAACTCAAAAGGTTTTCCTTGCGTGAACTACAAGTTGCGTCGGATAATTTTAGCAACAGAAATATACTCGGTAGAGGTGGATTTGGTAAGGTTTATAAGGGCCGGTTAGCTGATGGCTCTTTAGTTGCAGTGAAAAGACTAAAAGAGGAACGTACTCAAGGTGGAGAGTTACAGTTCCAGACAGAAGTAGAAATGATCAGCATGGCTGTACACCGAAACCTACTTCGTTTACGGGGCTTTTGCATGACACCCACTGAGCGCGTGCTTGTTTATCCTTACATGGAGAATGGAAGTGTTGCATCACGTTTAAGAGAGAGGCCTGAATCAGAGCCCCCACTTGACTGGCCAAAAAGGAAGCGTATTGCACTTGGATCTGCAAGAGGCCTTGCTTACTTGCATGATCATTGTGATCCTAAAATTATTCATCGTGACGTCAAAGCCGCAAATATCTTGTTGGATGAGGAGTTTGAAGCAGTTGTTGGGGATTTTGGGTTAGCTAAACTCATGGACTACAAGGATACTCATGTTACCACTGCTGTACGTGGTACAATTGGGCATATTGCCCCTGAATATTTATCTACTGGTAAATCTTCTGAGAAAACTGATGTCTTTGGCTATGGGGTTATGCTTCTAGAGCTCATAACTGGGCAAAGGGCTTTTGATCTTGCTCGACTTGCGAATGATGATGATGTCATGCTGCTAGATTGGGTGAAGGGACTCCTGAAGGACAAGAAATATGAAACATTAGTTGATGCAGATCTTCAAGGTAATTACAATGAAGAAGAGGTGGAACAACTTATTCAGGTAGCTCTACTTTGCACGCAGAGTACGCCTACGGAACGTCCAAAGATGTCAGAAGTTGTAAGAATGCTTGAAGGTGATGGCCTTGCTGAGAGGTGGGAGGAATGGCAAAAGGAGGAGATGTTCCGGCAAGATTACAACCATGTACACCACCCCCATACTGATTGGATAATAGCTGACTCCACGTCAAATATCCGACCGGATGAGTTGTCAGGGCCAAGATGA\n";
  26
  27         document.write("(<a href=\"javascript:example()\" title=\"Paste an example sequence\" >example sequence</a>)");
  28
  29         function example() {
  30             document.getElementById("sequence").value=seq;
  31         }
  32
  33
  34         //use JQueryIu to define tooltip style
  35     $(function() {
  36            $( document ).tooltip({
  37                    position: {
  38                            my: "center bottom-20",
  39                            at: "center top",
  40                            using: function( position, feedback ) {
  41                                    $( this ).css( position );
  42                                    $( "<div>" )
  43                                    .addClass( "arrow" )
  44                                    .addClass( feedback.vertical )
  45                                    .addClass( feedback.horizontal )
  46                                    .appendTo( this );
  47                            }
  48                    }
  49            });
  50    });
  51
  52 </script>
  53 <div id="status_wheel" style="display:none"><img src="/static/documents/img/wheel.gif" /></div>
  54 <br />
  55
  56
  57 <textarea class="input" id="sequence" name="sequence" cols=62" rows="8"></textarea>
  58 <br />
  59 <br />
  60
  61 <span title="siRNA selected size">n-mer size</span>
  62 <input class="input" id="si_rna" type="input" value="21" name="fragment_size" size="2" />&nbsp; &nbsp; &nbsp;
  63
  64 <span title="Desired VIGS construct length">Fragment length</span>
  65 <input class="input" id="f_length" type="input" value="300" name="seq_fragment" size="3" />&nbsp; &nbsp; &nbsp;
  66
  67 <span title="Number of mismatches allowed in Bowtie alignment">mismatches</span>
  68 <input class="input" id="mm" type="input" value="0" name="mismatch" size="1" />
  69 <br />
  70 <br />
  71 Database <select class="input" id='bt2_db' name="database" title="Select plant species to host VIGS experiment">
  72 <br />
  73
  74 <%perl>
  75
  76 foreach my $d (@databases) {
  77         my $db_name = $d;
  78         $db_name =~ s/_/ /g;
  79
  80         if ($default_db) {
  81                 if ($d eq $default_db) {
  82                         print "<option value=\"".$d."\" selected='selected'>".$db_name."</option><br />";
  83                 } else {
  84                         print "<option value=\"".$d."\">".$db_name."</option><br />";
  85                 }
  86         } else {
  87                 print "<option value=\"".$d."\">".$db_name."</option><br />";
  88         }
  89 }
  90 </%perl>
  91 </select>
  92 <br />
  93 <br />
  94
  95
  96 <form method="post" enctype="multipart/form-data" encoding="multipart/form-data" id="upload_expression_form" name="upload_expression_form" action="/ajax/upload_expression_file">
  97     Upload Expression file: <input type="file" name="expression_file" id="expression_file" encoding="multipart/form-data" title="Insert a expression file in a tab-delimited format"/>
  98 </form>
  99
 100
 101 <br />
 102 <!-- <button class="input" id="clear_form" value="clear">Clear</button>&nbsp; &nbsp; &nbsp; -->
 103 <button class="input" id="upload_expression_file" value="Run VIGS Analysis">Run VIGS Analysis</button>
 104
 105 <br />
 106 <br />
 107 <div id="coverage_val" val="0"></div>
 108 <div id="seq_length" val="0"></div>
 109 <div id="best_start" val="0"></div>
 110 <div id="best_end" val="0"></div>
 111 <div id="best_score" val="0"></div>
 112 <div id="db_name" val="0"></div>
 113 <div id="help_fsize" val="0"></div>
 114 <div id="help_nmer" val="0"></div>
 115 <div id="help_mm" val="0"></div>
 116
 117 </div>
 118 </center>
 119
 120
 121 <&| /page/info_section.mas, id=>"vigs_usage" , title=>"VIGS Usage", collapsible => 1, collapsed => 1, is_subsection=>"1"  &>
 122   <div id="usage_view">
 123     <p>
 124         <b>Usage:</b><br />
 125         1. Paste a <b>sequence</b> like in one of the examples:<br />
 126         <span style="background-color:#DCDCDC;">&nbsp;&nbsp;>gene_ID<br />&nbsp;&nbsp;ATGGATCAGTCGGTGTTGGCGATCT&nbsp;&nbsp;<br />&nbsp;&nbsp;ACAGCTTGGCCAACTCCAGAAATTG&nbsp;&nbsp;</span><br />
 127         &nbsp;&nbsp;or<br />
 128         <span style="background-color:#DCDCDC;">&nbsp;&nbsp;ATGGATCAGTCGGTGTTGGCGATCT&nbsp;&nbsp;</span><br />
 129         &nbsp;&nbsp;Or paste the <b>gene ID</b>:<br />
 130         <span style="background-color:#DCDCDC;">&nbsp;&nbsp;Solyc10g047140.1.1&nbsp;&nbsp;</span><br />
 131
 132         2. Choose <b>n-mer size</b>, nucleotide stretch size in bp, used to identify targeted regions (18-24, Default=21)<br />
 133         3. Choose <b>Fragment length</b>, desired VIGS fragment length in bp (100-Sequence length, Default=300)<br />
 134         4. Choose <b>mismatches</b>, number of mismatches allowed in the alignment (0-2, Default=0)<br />
 135         <!-- 4. Choose <b>mismatches</b>, number of mismatches allowed in the alignment (0-1, Default=0)<br /> -->
 136         5. Choose <b>database</b><br />
 137         6. Upload a <b>expression values file</b> (optional), It must be a tab delimited text file, with gene identifiers in the first column and a header in the first row:
 138         </p>
 139         <table style="background-color:#DCDCDC;" cellspacing="5">
 140                 <tr>
 141                         <td>gene_id</td>
 142                         <td>expr_val</td>
 143                         <td>p_val ...</td>
 144                 </tr>
 145                 <tr>
 146                         <td>Solyc10g047140.1.1</td>
 147                         <td>4.56</td>
 148                         <td>0.0001 ...</td>
 149                 </tr>
 150                 <tr>
 151                         <td>Solyc01g000020.1.1</td>
 152                         <td>3.64</td>
 153                         <td>0.0032 ...</td>
 154                 </tr>
 155                 <tr>
 156                         <td>...</td>
 157                 </tr>
 158      </table>
 159   </div>
 160 </&>
 161
 162 </&>
 163
 164
 165 <!-- ##################################################################################### -->
 166 <!-- OUTPUT VIEW -->
 167 <!-- ##################################################################################### -->
 168
 169
 170 <&| /page/info_section.mas, title=>"Results", collapsible => 1, collapsed => 0  &>
 171
 172 <div id="img_height" style="display:none;" value="601"></div>
 173
 174 <div id="hide1" style="display:none;">
 175 <&| /page/info_section.mas, title=>"Modify parameters", collapsible => 1, collapsed => 0, subtitle=>'[<a id="help_dialog_1" class="help_dialog">Help</a>]', is_subsection=>"1"  &>
 176 <table>
 177   <tr>
 178     <td id="score_p" style="text-align:'right';"></td>
 179   </tr>
 180 </table>
 181
 182 <table>
 183   <tr>
 184     <td>Region Start: </td><td><input type="text" id="cbr_start" size="3"></td>
 185     <td>Region End: </td><td><input type="text" id="cbr_end" size="3"> &nbsp;</td>
 186     <td><button type="button" id="set_custom" value="set custom best region">Set Custom Region</button><br /></td>
 187   </tr>
 188   <tr>
 189     <td>Target genes: </td><td><input id="t_num" size="1" name="targets" min="1" /></td>
 190     <td>Fragment size:</td><td><input id="f_size" size="3" name="seq_fragment" /></td>
 191     <td>
 192       n-mer: <input id="n_mer" size="2" name="si_rna" />
 193       Mismatches: <input id="align_mm" size="1" name="align_mm" />
 194     </td>
 195     <td><button id="change_par" type="button" value="recalculate">Change</button></td>
 196   </tr>
 197 </table>
 198 </&>
 199
 200 <span id="no_results" style="color:red;"></span>
 201 <p style="color:red" id="cbr_p"></p>
 202 </div>
 203
 204 <div id="hide2" style="display:none;">
 205 <&| /page/info_section.mas, title=>"Distribution of n-mers", collapsible => 1, collapsed => 0, subtitle=>'[<a id="help_dialog_2" class="help_dialog">Help</a>]', is_subsection=>"1"  &>
 206     <div class="seq_map" id="seq_map">
 207          <div class="region_square" id="region_square"></div>
 208          <canvas id="myCanvas" width="700" height="600">
 209              Your browser does not support the HTML5 canvas
 210          </canvas>
 211     </div>
 212     <br />
 213     <button id="collapse" value="1">Expand Graph</button>
 214     <button id="zoom" value="0">Zoom In</button>
 215     <button id="params_dialog">Parameters Used</button>
 216
 217 </&>
 218 </div>
 219
 220 <div id="help_fsize"></div>
 221 <div id="help_nmer"></div>
 222 <div id="help_mm"></div>
 223 <div id="help_db"></div>
 224
 225
 226 <div id="hide3" style="display:none;">
 227
 228 <&| /page/info_section.mas, title=>"Best region", collapsible => 1, collapsed => 0, subtitle=>'[<a id="help_dialog_3" class="help_dialog">Help</a>]', is_subsection=>"1" &>
 229     <div id="br_seq">
 230          <p id="best_seq" style="font-family:courier;font-size:16px;"></p>
 231     </div>
 232 </&>
 233
 234
 235 <&| /page/info_section.mas, title=>"Sequence overview", collapsible => 1, collapsed => 0, subtitle=>'[<a id="help_dialog_4" class="help_dialog">Help</a>]', is_subsection=>"1" &>
 236     <span id="query" style="display:none"></span>
 237     <div id="markup" style="align:left;"></div>
 238 </&>
 239
 240
 241 <&| /page/info_section.mas, title=>"Description of genes with matches of n-mers", collapsible => 1, collapsed => 0, subtitle=>'[<a id="open_descriptions_dialog">View</a>]&nbsp;&nbsp;[<a id="help_dialog_5" class="help_dialog">Help</a>]', is_subsection=>"1" &>
 242     <table id="target_info"></table>
 243 </&>
 244
 245 </div>
 246
 247
 248 <div id="desc_dialog">
 249     <table id="dialog_info"></table>
 250 </div>
 251
 252 <div id="params" style="display:none;"></div>
 253 <div id="help_dialog_tmp" style="display:none;"></div>
 254
 255
 256 </&>
 257
 258
 259 <!-- STYLE -->
 260
 261 <style>
 262 .seq_map {
 263     color: #777777;
 264     width: 700px;
 265     position:relative;
 266     overflow: auto;
 267     align: left;
 268 }
 269
 270 .ui-dialog {
 271     position:relative;
 272 }
 273
 274 #region_square {
 275     position:absolute;
 276     vertical-align:middle;
 277 }
 278
 279 .help_dialog {
 280      color:blue;
 281 }
 282
 283 #open_descriptions_dialog {
 284     color:blue;
 285 }
 286
 287 #desc_dialog {
 288      overflow: auto;
 289      position: relative;
 290 }
 291
 292
 293
 294
 295 .ui-tooltip, .arrow:after {
 296         background: #000000;
 297         border: 2px solid white;
 298 }
 299 .ui-tooltip {
 300         padding: 5px 10px;
 301         color: white;
 302         border-radius: 10px;
 303         font: bold 12px "Helvetica Neue", Sans-Serif;
 304         box-shadow: 0 0 7px black;
 305 }
 306 .arrow {
 307         width: 70px;
 308         height: 16px;
 309         overflow: hidden;
 310         position: absolute;
 311         left: 50%;
 312         margin-left: -35px;
 313         bottom: -16px;
 314 }
 315 .arrow.top {
 316         top: -16px;
 317         bottom: auto;
 318 }
 319 .arrow.left {
 320         left: 20%;
 321 }
 322 .arrow:after {
 323         content: "";
 324         position: absolute;
 325         left: 20px;
 326         top: -20px;
 327         width: 25px;
 328         height: 25px;
 329         box-shadow: 6px 5px 9px -9px black;
 330         -webkit-transform: rotate(45deg);
 331         -moz-transform: rotate(45deg);
 332         -ms-transform: rotate(45deg);
 333         -o-transform: rotate(45deg);
 334         tranform: rotate(45deg);
 335 }
 336 .arrow.top:after {
 337         bottom: -20px;
 338         top: auto;
 339 }
 340
 341
 342 #sequence {
 343         background-color:#EEEEFE;
 344         border-color:#000;
 345         border-width:2px;
 346         border-style:solid;
 347         border-radius:5px;
 348         width: 700px;
 349         min-height: 80px;
 350         max-height: 300px;
 351         min-width: 700px;
 352         max-width: 700px;
 353 }
 354
 355
 356 #upload_expression_file {
 357 background-color:#555555;
 358 /*background-color:#4387FD;*/
 359 border:0px;
 360 border-radius:2px;
 361 /*color:#fff;*/
 362 color:#EEEEEE;
 363 box-shadow: 1px 1px 0px 0px #C6C6C6;
 364 font-family:Arial;
 365 font-size:12px;
 366 height:20px;
 367 line-height:18px;
 368 vertical-align: top;
 369 }
 370 #upload_expression_file:hover {
 371 background-color:#444444;
 372 /*background-color:#5EA1FF;*/
 373 /*color:#acf;*/
 374 color:#fff;
 375 }
 376 #upload_expression_file:active {
 377 position:relative;
 378 top:1px;
 379 left:1px;
 380 box-shadow: 0px 0px 0px 0px #fff;
 381 }
 382
 383 </style>
 384
 385