mason/dataset/index.mas

   1
   2 <%args>
   3 $dataset_id
   4 $dataset_name => ''
   5 $dataset_description => ''
   6 $dataset_contents => ''
   7
   8 </%args>
   9
  10 <& /page/page_title.mas, title => "Dataset $dataset_name" &>
  11 <& /util/import_javascript.mas, entries => [qw|dataset_scatterplot dataset|], classes => [ qw|jqueryui.js jquery.js d3.d3v4Min jstree.dist.jstree thickbox CXGN.Page.FormattingHelpers jquery.dataTables| ] &>
  12 <& /util/import_css.mas, paths => ['wizard.css'] &>
  13
  14 <style>
  15     .top-row {
  16         # display: flex;
  17         # justify-content: center;
  18         margin-top: 20px;
  19     }
  20
  21     ::-webkit-slider-runnable-track {
  22         background: #f7756c;
  23     }
  24
  25     #pagefooter {
  26         min-height: 150px !important;
  27     }
  28
  29     #trait_selection {
  30         font-size: 15px;
  31     }
  32
  33     #trait_graph {
  34         width: 65%;
  35         font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  36     }
  37
  38     table, th, td {
  39         padding: 15px;
  40     }
  41
  42     .sd-line-top {
  43         stroke-dasharray: 5,5;
  44     }
  45
  46     .sd-line-bottom {
  47         stroke-dasharray: 5,5;
  48     }
  49
  50     .mean-line {
  51         stroke-dasharray: 5,5;
  52     }
  53
  54     .btn-dataset {
  55         margin-left: 4px;
  56     }
  57
  58     #rosner_table_wrapper {
  59         margin-top: 10px;
  60         margin-bottom: 10px;
  61     }
  62
  63     #rosner_table {
  64         padding: 0px;
  65     }
  66
  67 </style>
  68
  69 <head>
  70   <meta charset="UTF-8">
  71   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  72   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  73   <title>Dataset Details</title>
  74 </head>
  75
  76 <%perl>
  77  my $wizard_link = '<a href=\'/breeders/search?dataset_id=' . $dataset_id . '\'>' . $dataset_name . '</a>';
  78 </%perl>
  79
  80 <body>
  81     <div id="wizard" class="row">
  82         <div class="wizard-datasets">
  83             <table id="dataset_results"; border="1">
  84                     <tr><td>Name<td><% $dataset_name %>
  85                     <tr><td>Description<td><% $dataset_description %>
  86                     <tr><td>Contents<td><% $dataset_contents %>
  87 %                   if ($c->user()) {
  88                         <tr><td>Edit<td>
  89                         <span class="input-group-btn">
  90                         <span><button style="width:9em;margin-left:4px;" class="btn btn-sm btn-primary" id="wizard-dataset-public">Make Public</button></span>
  91                         <span><button style="width:9em;margin-left:4px;" class="btn btn-sm btn-primary" id="wizard-dataset-private">Make Private</button></span>
  92                         <span><button style="width:5em;margin-left:4px;" class="btn btn-sm btn-danger" id="wizard-dataset-delete">Delete</button></span>
  93                         </span>
  94 %                   }
  95                     <tr><td>Select Dataset in Wizard<td><% $wizard_link %>
  96             </table>
  97         </div>
  98     </div>
  99
 100     <div class="row">
 101         <div class="top-row col-md-12">
 102             <div id="trait_selections" class="col-md-6">
 103                 <label for="trait_selection">Select a Trait: </label>
 104                 <select id="trait_selection" class="form-control" name="trait_selection">
 105                     <option value="default">Select Trait</option>
 106                 </select>
 107             </div>
 108
 109         </div>
 110         <div class="col-md-12 well" style="margin-top: 10px;">
 111
 112             <div class="col-md-8">
 113                 <div id="outliers_range">
 114                     <div id="custom-handle" class="ui-slider-handle"></div>
 115                 </div>
 116             </div>
 117             <script>
 118                 $(function() {
 119                     $("#outliers_range").slider({
 120                         orientation: "horizontal",
 121                         range: "min",
 122                         max: 12,
 123                         min: 0,
 124                         value: 3,
 125                         step: 0.1,
 126                     });
 127                     var handle = $( "#custom-handle" );
 128                     $("#outliers_range").slider({
 129                         create: function(event, ui) {
 130                             handle.text(ui.value);
 131                         },
 132                         slide: function(event, ui) {
 133                             handle.text(ui.value);
 134                         }
 135                     });
 136                 });
 137             </script>
 138             <style>
 139                 #outliers_range .ui-slider-range { background: #5cb85c; }
 140                 #outliers_range .ui-slider-handle { border-color: #d9534f; }
 141                 #outliers_range { background: #d9534f; margin-top: 0.7em;}
 142                 #custom-handle {
 143                     width: 3em;
 144                     height: 1.6em;
 145                     top: 50%;
 146                     margin-top: -.8em;
 147                     text-align: center;
 148                     line-height: 1.6em;
 149                 }
 150             </style>
 151
 152
 153             <div class="col-md-3">
 154                 <div class="input-group">
 155                     <span class="input-group-addon">
 156                         <input type="radio" aria-label="median" id="median" value="median" name="dataset_metric" checked="true">
 157                     </span>
 158                     <label for="median" class="form-control" aria-label="median">Median</label>
 159                     <span class="input-group-addon">
 160                         <input type="radio" aria-label="mean" id="mean" value="mean" name="dataset_metric" >
 161                     </span>
 162                     <label for="mean" class="form-control" aria-label="mean">Mean</label>
 163                     <span class="input-group-addon">
 164                         <input type="radio" aria-label="IQR" id="iqr" value="iqr" name="dataset_metric" >
 165                     </span>
 166                     <label for="iqr" class="form-control" aria-label="iqr">IQR</label>
 167                 </div>
 168             </div>
 169         </div>
 170
 171     </div>
 172
 173     <div class="row">
 174         <div class="col-md-12">
 175             <div id="trait_graph"></div>
 176         </div>
 177         <div class="col-md-12">
 178             <div class="input-group-btn col-md-11 col-md-offset-1">
 179                 <span>
 180                     <button class="btn btn-sm btn-success btn-dataset" id="store_outliers">Add selection to outliers</button>
 181                 </span>
 182                 <span>
 183                         <button class="btn btn-sm btn-danger btn-dataset" id="reset_trait">Reset outliers for current trait</button>
 184                 </span>
 185                 <span>
 186                         <button class="btn btn-sm btn-danger btn-dataset" id="reset_outliers">Reset all outliers</button>
 187                 </span>
 188                 <span>
 189                     <button class="btn btn-sm btn-primary btn-dataset" id="outliers_phenotype_download">Download Phenotype Table without outliers</button>
 190                 </span>
 191                 <span>
 192                     <button class="btn btn-sm btn-primary btn-dataset" id="rosner_test">Make Rosner outlier test</button>
 193                     <img id="loading-spinner" src="/img/wheel.gif" alt="loading" style="visibility: hidden;">
 194                 </span>
 195             </div>
 196         </div>
 197     </div>
 198     <div class="row well" style="margin: 5px 10px;">
 199       Rosner's test is calculated by the R function rosnerTest{EnvStats} from package EnvStats.<br>
 200         <a href="https://cran.r-project.org/web/packages/EnvStats/index.html">https://cran.r-project.org/web/packages/EnvStats/index.html</a>
 201     </div>
 202
 203     <div id="statistic_tests">
 204         <!--
 205         <table id="rosner_table">
 206         </table>
 207         -->
 208     </div>
 209
 210     <script>
 211
 212     jQuery(document).ready( function() {
 213
 214         // console.log('dataset id', '<% $dataset_id %>');
 215         var DataSet = window.jsMod['dataset_scatterplot'].init(<% $dataset_id %>);
 216         DataSet.render();
 217
 218         jQuery('#info_table').click(function() {
 219             $.ajax({
 220                 url: '/ajax/dataset/by_user/<% $dataset_id %>',
 221                 success: function(response) {
 222                     alert(response.options);
 223                 },
 224                 error: function(response) {
 225                     alert("An error occurred");
 226                 }
 227             });
 228         })
 229
 230         jQuery('#outliers_phenotype_download').click(function() {
 231
 232             var speed = 'MaterializedViewTable';
 233             var format = '.csv';
 234             var level = 'all';
 235             var timestamp = 0;
 236
 237             var url = document.location.origin+
 238                 `/breeders/download_action?trait_ids_list=${DataSet.traitsIds}`+
 239                 `&format=${format}`+
 240                 `&phenotype_datalevel=${level}`+
 241                 `&timestamp_included=${timestamp}`+
 242                 `&dataset_id=<% $dataset_id %>`
 243
 244             window.open(url,'_blank');
 245         })
 246     });
 247
 248     </script>
 249 </body>