mason/tools/vigs/input.mas

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