mason/tools/mixedmodels.mas

   1
   2 <%args>
   3
   4 </%args>
   5
   6 <& /util/import_javascript.mas, classes => ['jquery', 'CXGN.BreedersToolbox.HTMLSelect'], entries => ['mixedmodels' ] &>
   7
   8 <script src="https://cdn.jsdelivr.net/npm/vega@3"></script>
   9 <script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script>
  10 <script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
  11
  12
  13 <& /page/page_title.mas, title=>"Mixed Model Analysis" &>
  14
  15 <& /analyses/store_new_analysis_values_and_model.mas &>
  16
  17 <div id="mixedmodel_tool">
  18 </div>
  19
  20
  21 <style>
  22   .factor {
  23   z-index:4;
  24   border-style:solid;
  25   border-radius:8px;
  26   width:200px;
  27   height:100;
  28   border-color:#337ab7;
  29   background-color:#337ab7;
  30   color:white;
  31   margin:4px
  32   }
  33   .factor_panel {
  34   min-height:100px;
  35   height:auto;
  36   margin-top:0px;
  37   border-style:dotted;
  38   border-width:5px;
  39   color:grey;
  40   background-color:lightyellow;
  41   }
  42   .factor_interaction_panel {
  43   border-style:dotted;
  44   border-width:0px;
  45   margin-top:20px;
  46   height:auto;
  47   z-index:1;
  48   }
  49   .model_bg {
  50   margin-left:30px;
  51   margin-right:30px;
  52   background-color:#DDEEEE;
  53   min-height:80px;
  54   padding-top:10px;
  55   padding-left:10px;
  56   padding-bottom:10px;
  57   border-radius:8px;
  58   }
  59 </style>
  60
  61 <div class="container">
  62   <div class="row">
  63
  64     <!-- div style="margin:20px;margin-left:auto;margin-right:auto;padding:10px;border:1px;border-style:dotted;width:60%;text-align:center">
  65       Note: The Mixed Model Tool is in testing. Please provide feedback but do not use in production setting.
  66     </div -->
  67
  68     <div class="col-md-12">
  69
  70
  71       <div class="container-fluid">
  72
  73         <&| /util/workflow.mas, id=> "mixed_model_analysis_workflow" &>
  74           <&| /util/workflow.mas:step, title=> "Choose Dataset" &>
  75             <& /page/page_title.mas, title=>"Choose the dataset for your analysis" &>
  76
  77
  78               1. Choose a dataset
  79
  80               <span style="width:240px" id="mixed_model_dataset_select">
  81               </span>
  82               <div>
  83                 <div style="float:right">
  84                   <button class="btn btn-main" id="mixed_model_analysis_prepare_button"         onclick="Workflow.complete(this);">Choose Dataset and continue</button>
  85                 </div>
  86               </div>
  87               <br />
  88               <br />
  89
  90 </&>
  91
  92 <&| /util/workflow.mas:step, title=> "Choose Dependent Variable" &>
  93   <& /page/page_title.mas, title=>"Choose the dependent variable for your analysis" &>
  94
  95
  96     <div id="dependent_variable" style="margin-bottom:50px">
  97     </div>
  98
  99     <div id="trait_histogram">
 100       [Histogram]
 101     </div>
 102
 103     <div>
 104       <div style="float:right">
 105         <button class="btn btn-main" id="mixed_model_analysis_fishished_choose_variable"        onclick="Workflow.complete(this);">Next step</button>
 106       </div>
 107     </div>
 108 </&>
 109
 110
 111 <&| /util/workflow.mas:step, title=> "Build Model" &>
 112   <& /page/page_title.mas, title=>"Build mixed model" &>
 113
 114     <div class="container form-check form-switch">
 115       <h4>Choose engine</h4>
 116       <input class="form-check-input" type="radio" id="select_engine_lme4" name="select_engine" value="lme4" checked="1" > lme4</input> |
 117       <input class="form-check-input" type="radio" id="select_engine_sommer" name="select_engine" value="sommer"> sommer</input>
 118         <br /><br />
 119     </div>
 120
 121     <div class="model_bg" >
 122       <div id="model_string" style="margin-top:10px;margin-bottom:10px;text-align:center;font-weight:bold">[model will appear here in lme4 format]</div>
 123       <!--  button id="store_model_formula" class="btn btn-default btn-sm">Save model</button -->
 124     </div>
 125
 126
 127
 128     <hr />
 129     <div class="container">
 130       <div class="row">
 131         <div id="left-margin" class="col-md-2"></div>
 132         <div class="col-md-4">
 133           <div class="panel panel-default" style="border-width:0px">
 134             <div class="panel panel-header" style="border-width:0px">Available Factors</div>
 135             <hr />
 136             <div id="factors" class="panel panel-body" style="border-style:dotted;border-width:0px;">
 137               [ Choose dataset and dependent variable first ]
 138             </div>
 139           </div>
 140         </div>
 141         <div class="col-md-4">
 142           <div  id="fixed_factors_panel" style="border-width:0;" class="panel panel-default">
 143             <div class="panel-header">Fixed factors</div>
 144             <div id="fixed_factors" class="panel-body factor_panel">
 145
 146               <!-- style="background-color:lightyellow;min-height:100px;height:auto;border-style:dotted;border-width:5px;color:grey" --></div>
 147
 148           </div>
 149           <div id="interaction_factor_collection_panel" class="panel panel-default factor_interaction_panel">
 150             <!-- style="border-style:dotted;border-width:0px;margin-top:20px;height:auto;z-index:1" -->
 151             <div class="panel-header">
 152               Random factors with interaction<br />
 153               <button  id="add_interaction_factor_button">add new interaction</button>
 154             </div>
 155             <div id="interaction_factors_collection" name="interaction_factors_collection" class="panel-body">
 156             </div>
 157           </div>
 158           <div id="variable_slope_intersect_collection_panel" class="panel panel-default factor_interaction_panel">
 159
 160             <!--    style="border-style:dotted;border-width:0px;margin-top:20px;height:auto;z-index:1" -->
 161
 162             <div class="panel-header">
 163               Fixed factors with variable slope/intersects<br />
 164               <button  id="add_variable_slope_intersect_button">add new variable slope/intersect</button>
 165             </div>
 166             <div id="variable_slope_intersect_collection" class="panel-body">
 167
 168             </div>
 169           </div>
 170
 171           <div style="height:30">&nbsp;</div>
 172           <div id="random_factors_panel" class="panel panel-default" style="border-width:0px">
 173             <div class="panel-header">Random factors</div>
 174             <div id="random_factors" class="panel-body factor_panel">
 175
 176               <!-- style="background-color:lightyellow;min-height:100px;height:auto;border-style:dotted;border-width:5px;color:grey" -->
 177             </div>
 178           </div>
 179         </div>
 180       </div>
 181     </div>
 182
 183     <br />
 184     <div id="tempfile" style="display:none" >
 185     </div>
 186
 187     <div>
 188       <div style="float:right">
 189         <button style="position:relative;" id="run_mixed_model_button" class="btn btn-main"     onclick="Workflow.complete(this)" >Run analysis and go to next step</button>
 190       </div>
 191     </div>
 192     <hr />
 193
 194 </&>
 195
 196 <&| /util/workflow.mas:step, title=> "Results" &>
 197
 198 <& /page/page_title.mas, title=>"Analysis Results" &>
 199
 200   <div>
 201     <ul class="nav nav-tabs">
 202       <li class="active"><a data-toggle="tab" id="adjusted_blups_tab_link" href="#adjusted_blups_tab">Adjusted means (BLUPs)</a></li>
 203       <li><a data-toggle="tab" id="blups_tab_link" href="#blups_tab">BLUPs</a></li>
 204       <li><a data-toggle="tab" id="adjusted_blues_tab_link" href="#adjusted_blues_tab">Adjusted means (BLUEs)</a></li>
 205       <li><a data-toggle="tab" id="blues_tab_link" href="#blues_tab">BLUEs</a></li>
 206     </ul>
 207     <div class="tab-content">
 208       <div id="adjusted_blups_tab" class="tab-pane fade in active">
 209         <br />
 210           <button id="open_store_adjusted_blups_dialog_button" class="btn btn-primary" data-toggle="modal" data-analysis_type="adjusted_means">Save adjusted means</button>
 211
 212           <!-- button class="btn btn-primary">Download</button -->
 213           <br />
 214           <div id="mixed_models_adjusted_blups_results_div">[loading...]</div>
 215       </div>
 216
 217       <div id="blups_tab" class="tab-pane fade">
 218         <br />
 219         <button id="open_store_blups_dialog_button" class="btn btn-primary" data-toggle="modal" data-analysis_type="blup" data-target="#generic_save_analysis_dialog">Save BLUPs</button>
 220         <div id="mixed_models_blups_results_div">[not available]</div>
 221       </div>
 222
 223       <div id="adjusted_blues_tab" class="tab-pane fade">
 224         <br />
 225         <button id="open_store_adjusted_blues_dialog_button" class="btn btn-primary" data-toggle="modal" data-analysis_type="blues">Save adjusted BLUEs</button>
 226
 227         <div id="mixed_models_adjusted_blues_results_div">[loading...]</div>
 228       </div>
 229
 230       <div id="blues_tab" class="tab-pane fade">
 231         <br />
 232         <button id="open_store_blues_dialog_button" class="btn btn-primary" data-toggle="modal" data-analysis_type="blues">Save BLUEs</button>
 233
 234         <div id="mixed_models_blues_results_div">[loading...]</div>
 235       </div>
 236     </div> <!-- results_tab div -->
 237   </div>
 238
 239 </&>
 240
 241 </&>
 242
 243 <script>
 244
 245 $(document).ready( function() {
 246 var mixedmodels = window.jsMod['mixedmodels'].init("mixedmodels");
 247 });
 248
 249 </script>