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