mason/tools/boxplotter.mas

   1
   2 <%doc>
   3
   4
   5 </%doc>
   6
   7 <%args>
   8 $datasets
   9 </%args>
  10
  11 <& '/page/page_title.mas', title => "Create Boxplots" &>
  12
  13 <& '/util/import_javascript.mas',
  14   classes => ['jquery','d3.d3v4Min'],
  15   entries => ['boxplotter']
  16 &>
  17
  18
  19 <style media="screen">
  20   .groupBy-div:only-of-type .groupBy-remove{
  21     display: none;
  22   }
  23   .boxplot .infotext{
  24     opacity: 0;
  25   }
  26   .boxplot:hover .infotext{
  27     opacity: 1;
  28   }
  29   #bxplt_result::-webkit-scrollbar {
  30     -webkit-appearance: none;
  31     width: 7px;
  32   }
  33   #bxplt_result::-webkit-scrollbar-thumb {
  34       border-radius: 4px;
  35       background-color: rgba(0,0,0,.5);
  36       -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
  37   }
  38   #mainform>div>*, .groupBy-div:not(:first-of-type){
  39     margin-top: 1em;
  40     margin-bottom: 0;
  41   }
  42 </style>
  43
  44 <div class="row">
  45   <div id="mainform" class="form col-sm-12 form-group">
  46     <label for="sort" class="control-label">Dataset</label>
  47     <div>
  48       <select id="datasetSelect" class="form-control">
  49         <option value="" disabled selected>Select a Dataset</option>
  50 % foreach my $dataset (@{$datasets}) {
  51       <option value="<% @{$dataset}[0] %>"><% @{$dataset}[1] %><% (defined @{$dataset}[2])&&@{$dataset}[2]!="undefined"?" - ".@{$dataset}[2]:"" %></option>
  52 % }
  53       </select>
  54       <select id="obsunitSelect" class="form-control">
  55         <option selected value="plot">Plots</option>
  56         <option value="plant">Plants</option>
  57       </select>
  58       <div class="well well-sm"> Note: Constraints other than accessions, traits, trials, locations, and program will be ignored </div>
  59     </div><br>
  60     <center><button id="createBtn" class="btn btn-default btn-sm btn-primary">Create</button></center>
  61   </div>
  62 </div>
  63
  64 <div class="row">
  65   <div class="col-sm-12">
  66     <div class="brapp-wrapper" style="border:solid 1px #ccc;border-radius:4px; overflow:hidden;">
  67       <div class="brapp-body" style="background-color:#fff;border-top-left-radius:4px;border-top-right-radius:4px;">
  68         <div id="boxplotResults" style="max-width: 100%; overflow-x:scroll; position: relative; margin:0.5em;"></div>
  69         <div style="clear:both"></div>
  70       </div>
  71       <div>
  72       <a id="downloadBxpltBtn" download="" class="btn btn-default">Download Boxplot SVG</a>
  73     </div>
  74       <div class="brapp-footer" style="background-color:#ddd;border-top:solid 1px #ccc;font-family:Arial;color:#555;font-size:11px;padding:0.3em;border-bottom-left-radius:4px;border-bottom-right-radius:4px;">
  75         <div style="min-height:14px;text-align:right;">
  76           <a href="https://github.com/solgenomics/BrAPI-BoxPlotter" style="color:inherit;white-space:nowrap;text-decoration:underline;">Phenotype BoxPlotter</a> developed at the <a href="https://btiscience.org/" style="color:inherit;white-space:nowrap;text-decoration:underline;">Boyce Thompson Institute</a>
  77         </div>
  78       </div>
  79     </div>
  80     <br>
  81   </div>
  82 </div>
  83
  84 <script>
  85   var boxplotter = window.jsMod['boxplotter'].init("boxplotResults");
  86
  87   var auth_token;
  88   var require_login = "<%  $c->get_conf('brapi_require_login') %>";
  89   if (require_login === '1'){
  90       auth_token = "<%  CXGN::Login->new($c->dbc->dbh)->get_login_cookie() %>";
  91       if (!auth_token){ alert("Login required to display boxplots"); }
  92   }
  93   $("#downloadBxpltBtn").hide();
  94   $("#createBtn").click(function(){
  95     var ds = $("#datasetSelect option:selected").val();
  96     var ou = $("#obsunitSelect option:selected").val();
  97     if(ds=="") { alert("Choose a dataset!"); return; }
  98     boxplotter.loadDatasetObsUnits(ds,ou,auth_token);
  99     $("#downloadBxpltBtn").show();
 100   });
 101
 102   $("#downloadBxpltBtn").on("mousedown",function(){
 103     var svg = d3.select("#boxplotResults").select("svg.boxplots").node();
 104     var serializer = new XMLSerializer();
 105     var source = serializer.serializeToString(svg);
 106     if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
 107       source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
 108     }
 109     if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
 110       source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
 111     }
 112     source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
 113     var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);
 114     this.href = url;
 115   });
 116 </script>