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>
  60   </div>
  61 </div>
  62
  63 <div class="row">
  64   <div class="col-sm-12">
  65     <div class="brapp-wrapper" style="border:solid 1px #ccc;border-radius:4px; overflow:hidden;">
  66       <div class="brapp-body" style="background-color:#fff;border-top-left-radius:4px;border-top-right-radius:4px;">
  67         <div id="boxplotResults" style="max-width: 100%; overflow-x:scroll; position: relative; margin:0.5em;"></div>
  68         <div style="clear:both"></div>
  69       </div>
  70       <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;">
  71         <div style="min-height:14px;text-align:right;">
  72           <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>
  73         </div>
  74       </div>
  75     </div>
  76     <br>
  77     <div>
  78       <a id="downloadBxpltBtn" download="" class="btn btn-default">Download Boxplot SVG</a>
  79     </div>
  80   </div>
  81 </div>
  82
  83 <script>
  84   var boxplotter = window.jsMod['boxplotter'].init("boxplotResults");
  85
  86   $("#datasetSelect, #obsunitSelect").change(function(){
  87     var ds = $("#datasetSelect option:selected").val();
  88     var ou = $("#obsunitSelect option:selected").val();
  89     if(ds=="") return;
  90     boxplotter.loadDatasetObsUnits(ds,ou);
  91   });
  92
  93   $("#downloadBxpltBtn").on("mousedown",function(){
  94     var svg = d3.select("#boxplotResults").select("svg.boxplots").node();
  95     var serializer = new XMLSerializer();
  96     var source = serializer.serializeToString(svg);
  97     if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
  98       source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
  99     }
 100     if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
 101       source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
 102     }
 103     source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
 104     var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);
 105     this.href = url;
 106   });
 107 </script>