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 dataset 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 %                   if ($c->user()) {
  86                     <tr><td>Description
  87                     <td><input type="text" id="description" value=" <% $dataset_description %>"></input>
  88                     <button style="width:9em;bargin-left:4px;" class="btn btn-sm btn-primary" onclick="datasetUpdate(<% $dataset_id %>)">Update</button>
  89 %                   } else {
  90                     <tr><td>Description<td><% $dataset_description %>
  91 %                   }
  92                     <tr><td>Contents<td><% $dataset_contents %>
  93 %                   if ($c->user()) {
  94                         <tr><td>Edit<td>
  95                         <span class="input-group-btn">
  96                         <span><button style="width:9em;margin-left:4px;" class="btn btn-sm btn-primary" onclick="datasetPublic(<% $dataset_id %>)">Make Public</button></span>
  97                         <span><button style="width:9em;margin-left:4px;" class="btn btn-sm btn-primary" onclick="datasetPrivate(<% $dataset_id %>)">Make Private</button></span>
  98                         <span><button style="width:5em;margin-left:4px;" class="btn btn-sm btn-danger" onclick="datasetDelete(<% $dataset_id %>)">Delete</button></span>
  99                         </span>
 100 %                   }
 101                     <tr><td>Select Dataset in Wizard<td><% $wizard_link %>
 102             </table>
 103         </div>
 104     </div>
 105
 106     <div class="row">
 107         <div class="top-row col-md-12">
 108             <div id="trait_selections" class="col-md-6">
 109                 <label for="trait_selection">Select a Trait: </label>
 110                 <select id="trait_selection" class="form-control" name="trait_selection">
 111                     <option value="default">Select Trait</option>
 112                 </select>
 113             </div>
 114
 115         </div>
 116         <div class="col-md-12 well" style="margin-top: 10px;">
 117
 118             <div class="col-md-8">
 119                 <div id="outliers_range">
 120                     <div id="custom-handle" class="ui-slider-handle"></div>
 121                 </div>
 122             </div>
 123             <script>
 124                 $(function() {
 125                     $("#outliers_range").slider({
 126                         orientation: "horizontal",
 127                         range: "min",
 128                         max: 12,
 129                         min: 0,
 130                         value: 3,
 131                         step: 0.1,
 132                     });
 133                     var handle = $( "#custom-handle" );
 134                     $("#outliers_range").slider({
 135                         create: function(event, ui) {
 136                             handle.text(ui.value);
 137                         },
 138                         slide: function(event, ui) {
 139                             handle.text(ui.value);
 140                         }
 141                     });
 142                 });
 143             </script>
 144             <style>
 145                 #outliers_range .ui-slider-range { background: #5cb85c; }
 146                 #outliers_range .ui-slider-handle { border-color: #d9534f; }
 147                 #outliers_range { background: #d9534f; margin-top: 0.7em;}
 148                 #custom-handle {
 149                     width: 3em;
 150                     height: 1.6em;
 151                     top: 50%;
 152                     margin-top: -.8em;
 153                     text-align: center;
 154                     line-height: 1.6em;
 155                 }
 156             </style>
 157
 158
 159             <div class="col-md-3">
 160                 <div class="input-group">
 161                     <span class="input-group-addon">
 162                         <input type="radio" aria-label="median" id="median" value="median" name="dataset_metric" checked="true">
 163                     </span>
 164                     <label for="median" class="form-control" aria-label="median">Median</label>
 165                     <span class="input-group-addon">
 166                         <input type="radio" aria-label="mean" id="mean" value="mean" name="dataset_metric" >
 167                     </span>
 168                     <label for="mean" class="form-control" aria-label="mean">Mean</label>
 169                     <span class="input-group-addon">
 170                         <input type="radio" aria-label="IQR" id="iqr" value="iqr" name="dataset_metric" >
 171                     </span>
 172                     <label for="iqr" class="form-control" aria-label="iqr">IQR</label>
 173                 </div>
 174             </div>
 175         </div>
 176
 177     </div>
 178
 179     <div class="row">
 180         <div class="col-md-12">
 181             <div id="trait_graph"></div>
 182         </div>
 183         <div class="col-md-12">
 184             <div class="input-group-btn col-md-11 col-md-offset-1">
 185                 <span>
 186                     <button class="btn btn-sm btn-success btn-dataset" id="store_outliers">Add selection to outliers</button>
 187                 </span>
 188                 <span>
 189                         <button class="btn btn-sm btn-danger btn-dataset" id="reset_trait">Reset outliers for current trait</button>
 190                 </span>
 191                 <span>
 192                         <button class="btn btn-sm btn-danger btn-dataset" id="reset_outliers">Reset all outliers</button>
 193                 </span>
 194                 <span>
 195                     <button class="btn btn-sm btn-primary btn-dataset" id="outliers_phenotype_download">Download Phenotype Table without outliers</button>
 196                 </span>
 197                 <span>
 198                     <button class="btn btn-sm btn-primary btn-dataset" id="rosner_test">Make Rosner outlier test</button>
 199                     <img id="loading-spinner" src="/img/wheel.gif" alt="loading" style="visibility: hidden;">
 200                 </span>
 201             </div>
 202         </div>
 203     </div>
 204     <div class="row well" style="margin: 5px 10px;">
 205       Rosner's test is calculated by the R function rosnerTest{EnvStats} from package EnvStats.<br>
 206         <a href="https://cran.r-project.org/web/packages/EnvStats/index.html">https://cran.r-project.org/web/packages/EnvStats/index.html</a>
 207     </div>
 208
 209     <div id="statistic_tests">
 210         <!--
 211         <table id="rosner_table">
 212         </table>
 213         -->
 214     </div>
 215
 216     <script>
 217
 218     jQuery(document).ready( function() {
 219
 220         // console.log('dataset id', '<% $dataset_id %>');
 221         var DataSet = window.jsMod['dataset_scatterplot'].init(<% $dataset_id %>);
 222         DataSet.render();
 223
 224         jQuery('#info_table').click(function() {
 225             $.ajax({
 226                 url: '/ajax/dataset/by_user/<% $dataset_id %>',
 227                 success: function(response) {
 228                     alert(response.options);
 229                 },
 230                 error: function(response) {
 231                     alert("An error occurred");
 232                 }
 233             });
 234         })
 235
 236         jQuery('#outliers_phenotype_download').click(function() {
 237
 238             var speed = 'MaterializedViewTable';
 239             var format = '.csv';
 240             var level = 'all';
 241             var timestamp = 0;
 242
 243             var url = document.location.origin+
 244                 `/breeders/download_action?trait_ids_list=${DataSet.traitsIds}`+
 245                 `&format=${format}`+
 246                 `&phenotype_datalevel=${level}`+
 247                 `&timestamp_included=${timestamp}`+
 248                 `&dataset_id=<% $dataset_id %>`
 249
 250             window.open(url,'_blank');
 251         })
 252     });
 253
 254     </script>
 255 </body>