mason/tools/expression/input.mas

   1
   2 <!-- <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   3 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> -->
   4
   5 <!-- javascript-->
   6 <!-- <script src="/js/tools/vigs.js" type="text/javascript"></script> -->
   7 <!-- <script src="/js/jquery/iframe-post-form.js" type="text/javascript"></script> -->
   8
   9 <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
  10
  11 <script type="text/javascript" src="/js/jqplot/jquery.jqplot.js"></script>
  12 <script type="text/javascript" src="/js/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
  13 <script type="text/javascript" src="/js/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
  14 <script type="text/javascript" src="/js/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
  15 <script type="text/javascript" src="/js/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
  16 <script type="text/javascript" src="/js/jqplot/plugins/jqplot.barRenderer.js"></script>
  17 <script type="text/javascript" src="/js/jqplot/plugins/jqplot.pointLabels.min.js"></script>
  18 <script type="text/javascript" src="/js/jqplot/plugins/jqplot.highlighter.min.js"></script>
  19
  20 <& /util/import_css.mas, paths => ['/js/jqplot/jquery.jqplot.css','/js/jqplot/jquery.jqplot.min.css'] &>
  21
  22
  23 <& /util/import_javascript.mas, classes => ['Text.Markup', 'sprintf', 'jquery', 'jqueryui', 'CXGN.List'] &>
  24
  25 <& /page/page_title.mas, title=>"Expression Tool" &>
  26
  27
  28
  29 <&| /page/info_section.mas, id=>"expr_input" , title=>"Run Expression Tool", collapsible => 1, collapsed => 0  &>
  30 <center>
  31
  32 <div id="status_wheel" style="display:none"><img src="/static/documents/img/wheel.gif" /></div>
  33 <br />
  34
  35 <span title="query gene">Select a gene:</span>
  36 <input class="input" id="gene" type="input" value="Solyc04g014530.1" name="input_gene" size="15" />&nbsp; &nbsp; &nbsp;
  37
  38 <button class="input" id="run_tool" value="Run Expression Tool">Get Expression</button>
  39
  40 <br />
  41 <br />
  42
  43 </center>
  44
  45
  46 <&| /page/info_section.mas, id=>"expression_usage" , title=>"Usage", collapsible => 1, collapsed => 0, is_subsection=>"1"  &>
  47   <div id="usage_view">
  48     <p>
  49         1. Select a <b>Gene name</b> an push the 'Get Expression' button to see its expression in the different tissues of the plant<br />
  50      </p>
  51   </div>
  52 </&>
  53
  54 </&>
  55
  56
  57 <!-- ##################################################################################### -->
  58 <!-- OUTPUT VIEW -->
  59 <!-- ##################################################################################### -->
  60
  61
  62 <&| /page/info_section.mas, title=>"Results", collapsible => 1, collapsed => 0  &>
  63
  64 <div id="hide_results" style="display:none;">
  65
  66 <&| /page/info_section.mas, title=>"Experiment Info", collapsible => 1, collapsed => 0, is_subsection=>"1" &>
  67     <p id="exp_title"></p>
  68     <p id="exp_dbxref"></p>
  69     <p id="exp_pub"></p>
  70 </&>
  71
  72
  73 <&| /page/info_section.mas, title=>"Experiment Map", collapsible => 1, collapsed => 0, is_subsection=>"1" &>
  74 <div id="my_stage"></div>
  75 </&>
  76
  77 <&| /page/info_section.mas, title=>"Interactive Control Panel", collapsible => 1, collapsed => 0, is_subsection=>"1" &>
  78     Choose a experiment:&nbsp; &nbsp;
  79         <select id="exp_list">
  80                 <option>BTI Slyc RNA-Seq</option>
  81                 <option>Other experiment</option>
  82         </select>
  83     <br/>
  84 </&>
  85
  86
  87 <&| /page/info_section.mas, title=>"Bar Graph", collapsible => 1, collapsed => 0, is_subsection=>"1" &>
  88         <!-- <div id="chart_margins" style="width: 700px; height: 400px;">
  89                 <center> -->
  90                         <div id="bar_graph" style="width: 700px; height: 400px;"></div>
  91                 <!-- </center>
  92         </div> -->
  93 </&>
  94
  95
  96 <&| /page/info_section.mas, title=>"Experiment Expression Data", collapsible => 1, collapsed => 0, is_subsection=>"1" &>
  97     <table id="exp_table" cellpadding="2" cellspacing="2" width="100%"></table>
  98 </&>
  99
 100 <&| /page/info_section.mas, title=>"Experiment Sample Info", collapsible => 1, collapsed => 0, is_subsection=>"1" &>
 101         <table id="exp_info_table" cellpadding="2" cellspacing="2" width="100%"></table>
 102         <br/>
 103 </&>
 104
 105
 106 </div>
 107
 108 </&>
 109
 110
 111
 112 <style>
 113
 114 #my_stage {
 115 /*    border-style:dashed;
 116     border-width:1px;
 117 */    height:550px;
 118     width:700px;
 119 }
 120 .jqplot-title {
 121         color:#000000;
 122         font-size:16px;
 123         line-height:200%;
 124         font-family:'Arial';
 125 }
 126
 127 #bar_tooltip {
 128         background-color:rgb(200,200,200);
 129 }
 130
 131 </style>
 132
 133
 134 <script defer="defer">
 135
 136 jQuery(document).ready(function () {
 137
 138     var data_array_obj;
 139     //var expression_table_info;
 140     var error_var = 1;
 141     var perl_hash_obj = new Object();
 142
 143     jQuery('#run_tool').click(function () {
 144                 //alert("clicking");
 145                 disable_ui();
 146                 error_var = 1;
 147                 query_gene = jQuery('#gene').val();
 148
 149         jQuery.ajax({
 150             url: '/tools/expression/result/',
 151             async: false,
 152             method: 'POST',
 153             data: { 'gene': query_gene },
 154             success: function(response) {
 155                                 enable_ui();
 156
 157                 if (response.error) {
 158                     alert("ERROR: "+response.error);
 159                                 error_var = 1;
 160                 } else {
 161                                         error_var = 0;
 162                                         data_array_obj = response.all_exp_design;
 163
 164                                 // alert(dump(data_array_obj));
 165
 166                       //perl_hash_obj = response.hash;
 167
 168                       //alert("hash_name: "+perl_hash_obj["name"]);
 169                       //alert("hi: "+response.gene_name);
 170                 }
 171             },
 172             error: function(response) {
 173                                 alert("An error occurred. The service may not be available right now.");
 174                                 error_var = 1;
 175                                 enable_ui();
 176                         }
 177         });
 178
 179
 180
 181
 182                 if (!error_var) {
 183
 184         //          var designs_array = Object.keys(data_array_obj);
 185         //          for (var n=0; n<designs_array.length; n=n+1) {
 186         //                  jQuery('#exp_list').append('<option>'+designs_array[n]+'</option>')
 187         //          }
 188
 189         //          alert("design names: "+designs_array);
 190
 191
 192                     var data_array = data_array_obj[0]["data"];
 193                     var experiment_name = data_array_obj[0]["name"];
 194                     var experiment_desc = data_array_obj[0]["description"];
 195                     var experiment_pubs = data_array_obj[0]["pub"];
 196                     var experiment_dbxrefs = data_array_obj[0]["dbxref"];
 197
 198
 199                 jQuery('#exp_title').html("<b>Name:</b> "+experiment_name+"<br/><b>Description:</b> "+experiment_desc);
 200                 jQuery('#exp_dbxref').html("<b>External Links:</b> "+experiment_dbxrefs);
 201                 jQuery('#exp_pub').html("<b>Publications:</b> "+experiment_pubs);
 202
 203                         // alert(dump(data_array));
 204
 205                     hide_ui();
 206                     show_hiden_divs();
 207                     display_pictures();
 208                     print_bar_chart(data_array);
 209
 210                     var expression_table_info = "";
 211                     var experiment_info = "";
 212                     //alert("data: "+data_array.length);
 213                 expression_table_info += "<tr style='text-align:center;'><th>Experiment</th><th>Replicates</th><th>FPKM</th><th>FPKM_lo</th><th>FPKM_hi</th></tr>";
 214                 experiment_info += "<tr style='text-align:center;'><th>Sample</th><th>Description</th><th>External Link</th></tr>";
 215
 216                     for (var i=0; i<data_array.length; i=i+1) {
 217                         experiment_info += "<tr><td><a href='/gem/experiment.pl?id="+data_array[i]["id"]+"' target='_blank'>"+data_array[i]["name"]+"</a></td>";
 218                             experiment_info += "<td style='text-align:left;'>"+data_array[i]["exp_description"]+"</td>";
 219                             experiment_info += "<td style='text-align:center;'>"+data_array[i]["exp_links"]+"</td>";
 220
 221                         expression_table_info += "<tr><td>"+data_array[i]["name"]+"</td>";
 222                             expression_table_info += "<td style='text-align:center;'>"+data_array[i]["replicates"]+"</td>";
 223                             expression_table_info += "<td style='text-align:center;'>"+data_array[i]["fpkm"]+"</td>";
 224                             // expression_table_info += "<td style='text-align:center;'>"+data_array[i]["median"]+"</td>";
 225                             expression_table_info += "<td style='text-align:center;'>"+data_array[i]["fpkm_lo"]+"</td>";
 226                             expression_table_info += "<td style='text-align:center;'>"+data_array[i]["fpkm_hi"]+"</td>";
 227                                 expression_table_info += "</tr>";
 228                         }
 229                 jQuery('#exp_table').html(expression_table_info);
 230                 jQuery('#exp_info_table').html(experiment_info);
 231                 }
 232     });
 233
 234         function disable_ui() {
 235                 $('#working').dialog("open");
 236         }
 237
 238         function enable_ui() {
 239                 $('#working').dialog("close");
 240         }
 241
 242         function hide_ui() {
 243                 Effects.swapElements('expr_input_offswitch', 'expr_input_onswitch');
 244                 Effects.hideElement('expr_input_content');
 245         }
 246
 247         function show_hiden_divs() {
 248                 jQuery("#hide_results").css("display","inline");
 249         }
 250
 251
 252
 253
 254
 255
 256
 257     function print_bar_chart(data_a) {
 258                 jQuery("#bar_graph").empty();
 259
 260                 var exp_cond = [];
 261             var bar_data = [];
 262             var error_bar_obj = new Object(); //the error values must be the percentage of the expression 0.1=10%
 263             var error_bar_data = [];
 264                 var min_serie = [];
 265                 var max_serie = [];
 266
 267             for (var i=0; i<data_a.length; i=i+1) {
 268                         var one_exp = []
 269                         var one_mean = parseFloat(data_a[i]["fpkm"]);
 270
 271                         exp_cond.push(data_a[i]["name"]);
 272                         bar_data.push(one_mean);
 273
 274                         var one_sd =(parseFloat(data_a[i]["fpkm_lo"]));
 275                         var one_cv =(parseFloat(data_a[i]["fpkm_hi"]));
 276                         // var min_ser = (one_mean - one_sd).toFixed(2);
 277                         // var max_ser = (one_mean + one_sd).toFixed(2);
 278                         // min_serie.push(parseFloat(min_ser));
 279                         // max_serie.push(parseFloat(max_ser));
 280
 281                         var min_err = ((one_mean - one_sd)/one_mean).toFixed(2);
 282                         var max_err = ((one_cv - one_mean)/one_mean).toFixed(2);
 283
 284                         // var min_err = (one_sd/one_mean).toFixed(2);
 285                         // var max_err = (one_sd/one_mean).toFixed(2);
 286
 287                     error_bar_obj = new Object();
 288                         error_bar_obj.min=parseFloat(min_err);
 289                         error_bar_obj.max=parseFloat(max_err);
 290
 291                         error_bar_data.push(error_bar_obj);
 292                 }
 293
 294
 295                 // alert(dump(error_bar_data));
 296
 297
 298
 299
 300
 301             var plot1 = $.jqplot('bar_graph', [bar_data], {
 302                         title: 'Expression Data',
 303                         animate: true,
 304                 seriesDefaults:{
 305                     renderer:$.jqplot.BarRenderer,
 306                     rendererOptions: {
 307                                         fillToZero: true,
 308                                         errorBarWidth: 1,
 309                                         errorBarColor: "black",
 310                                         errorData: [error_bar_data],
 311                                         errorTextData: [""],
 312                                         barDirection: 'vertical',
 313                                         animation: {
 314                                                 speed: 1000
 315                                         },
 316                                 },
 317                 },
 318                         seriesColors: ['#C80000'],
 319                         // seriesColors: ['#20608E'],
 320                     axesDefaults: {
 321                            tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
 322                        },
 323                 axes: {
 324                     // Use a category axis on the x axis and use our custom ticks.
 325                     xaxis: {
 326                         renderer: $.jqplot.CategoryAxisRenderer,
 327                         ticks: exp_cond,
 328                                         tickOptions: {
 329                                                 angle: -45,
 330                                                 showGridline: false,
 331                                                 fontSize: '12pt',
 332                                                 textColor: 'black',
 333                                                 fontFamily: 'Arial'
 334                                         }
 335                     },
 336                     // Pad the y axis just a little so bars can get close to, but
 337                     // not touch, the grid boundaries.  1.2 is the default padding.
 338                                 yaxis: {
 339                                         // label:'Expression (units)',
 340                                         pad: 1.2,
 341                                         min: 0,
 342                             tickOptions: {
 343                                 angle: 0,
 344                                                 formatString: "%#.2f",
 345                                                 fontSize: '10pt',
 346                                                 textColor: 'black',
 347                                                 fontFamily: 'Arial'
 348                             },
 349                                         labelRenderer: $.jqplot.CanvasAxisLabelRenderer
 350                                 }
 351                 },
 352                         grid: {
 353                                 background: "white",
 354                                 borderColor: "black",
 355                         },
 356                     highlighter: {
 357                                 show: true,
 358                                 showMarker:false,
 359                                 tooltipAxes: 'y',
 360
 361
 362                                 formatString:'<div id="bar_tooltip" class="jqplot-highlighter"><table>\
 363                                 <tr><td>Expression val:</td><td>%s</td></tr> \
 364                                                                   </table></div>'
 365                     }
 366             });
 367
 368
 369     }
 370
 371
 372
 373
 374 function dump(arr,level) {
 375         var dumped_text = "";
 376         if(!level) level = 0;
 377
 378         //The padding given at the beginning of the line.
 379         var level_padding = "";
 380         for(var j=0;j<level+1;j++) level_padding += "    ";
 381
 382         if(typeof(arr) == 'object') { //Array/Hashes/Objects
 383                 for(var item in arr) {
 384                         var value = arr[item];
 385
 386                         if(typeof(value) == 'object') { //If it is an array,
 387                                 dumped_text += level_padding + "'" + item + "' ...\n";
 388                                 dumped_text += dump(value,level+1);
 389                         } else {
 390                                 dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
 391                         }
 392                 }
 393         } else { //Stings/Chars/Numbers etc.
 394                 dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
 395         }
 396         return dumped_text;
 397 }
 398
 399
 400
 401
 402
 403
 404         function display_pictures() {
 405                 var stage = new Kinetic.Stage({
 406                         container: "my_stage",
 407                         width: 700,
 408                         height: 550
 409                 });
 410                 var layer = new Kinetic.Layer();
 411                 var plantObj = new Image();
 412                 // var fruit_img = new Image();
 413                 plantObj.src = "/static/documents/img/expression_tool/tomato_template.png";
 414                 // fruit_img.src = "/static/documents/img/expression_tool/tomato_fruit_1.png";
 415
 416                 // tomato plant img
 417                 var tomato_plant = new Kinetic.Image({
 418                         image: plantObj,
 419                         x: 0,
 420                         y: 0,
 421                         width: 700,
 422                         height: 550,
 423                 });
 424
 425                 // // tomato fruit img
 426                 // var tomato_fruit = new Kinetic.Image({
 427                 //      image: fruit_img,
 428                 //      x: 40,
 429                 //      y: 410,
 430                 //      width: 130,
 431                 //      height: 120,
 432                 // });
 433
 434                 layer.add(tomato_plant);
 435                 // layer.add(tomato_fruit);
 436                 stage.add(layer);
 437         }
 438
 439 });
 440
 441 </script>