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="model_bg" >
 115       <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>
 116       <!--  button id="store_model_formula" class="btn btn-default btn-sm">Save model</button -->
 117     </div>
 118
 119
 120
 121     <hr />
 122     <div class="container">
 123       <div class="row">
 124         <div id="left-margin" class="col-md-2"></div>
 125         <div class="col-md-4">
 126           <div class="panel panel-default" style="border-width:0px">
 127             <div class="panel panel-header" style="border-width:0px">Available Factors</div>
 128             <hr />
 129             <div id="factors" class="panel panel-body" style="border-style:dotted;border-width:0px;">
 130               [ Choose dataset and dependent variable first ]
 131             </div>
 132           </div>
 133         </div>
 134         <div class="col-md-4">
 135           <div  id="fixed_factors_panel" style="border-width:0;" class="panel panel-default">
 136             <div class="panel-header">Fixed factors</div>
 137             <div id="fixed_factors" class="panel-body factor_panel">
 138
 139               <!-- style="background-color:lightyellow;min-height:100px;height:auto;border-style:dotted;border-width:5px;color:grey" --></div>
 140
 141           </div>
 142           <div id="interaction_factor_collection_panel" class="panel panel-default factor_interaction_panel">
 143             <!-- style="border-style:dotted;border-width:0px;margin-top:20px;height:auto;z-index:1" -->
 144             <div class="panel-header">
 145               Fixed factors with interaction<br />
 146               <button  id="add_interaction_factor_button">add new interaction</button>
 147             </div>
 148             <div id="interaction_factors_collection" name="interaction_factors_collection" class="panel-body">
 149             </div>
 150           </div>
 151           <div id="variable_slope_intersect_collection_panel" class="panel panel-default factor_interaction_panel">
 152
 153             <!--    style="border-style:dotted;border-width:0px;margin-top:20px;height:auto;z-index:1" -->
 154
 155             <div class="panel-header">
 156               Fixed factors with variable slope/intersects<br />
 157               <button  id="add_variable_slope_intersect_button">add new variable slope/intersect</button>
 158             </div>
 159             <div id="variable_slope_intersect_collection" class="panel-body">
 160
 161             </div>
 162           </div>
 163
 164           <div style="height:30">&nbsp;</div>
 165           <div id="random_factors_panel" class="panel panel-default" style="border-width:0px">
 166             <div class="panel-header">Random factors</div>
 167             <div id="random_factors" class="panel-body factor_panel">
 168
 169               <!-- style="background-color:lightyellow;min-height:100px;height:auto;border-style:dotted;border-width:5px;color:grey" -->
 170             </div>
 171           </div>
 172         </div>
 173       </div>
 174     </div>
 175
 176     <br />
 177     <div id="tempfile" style="display:none" >
 178     </div>
 179
 180     <div>
 181       <div style="float:right">
 182         <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>
 183       </div>
 184     </div>
 185     <hr />
 186
 187 </&>
 188
 189 <&| /util/workflow.mas:step, title=> "Results" &>
 190
 191 <& /page/page_title.mas, title=>"Analysis Results" &>
 192
 193   <div>
 194     <ul class="nav nav-tabs">
 195       <li class="active"><a data-toggle="tab" id="adjusted_blups_tab_link" href="#adjusted_blups_tab">Adjusted means (BLUPs)</a></li>
 196       <li><a data-toggle="tab" id="blups_tab_link" href="#blups_tab">BLUPs</a></li>
 197       <li><a data-toggle="tab" id="adjusted_blues_tab_link" href="#adjusted_blues_tab">Adjusted means (BLUEs)</a></li>
 198       <li><a data-toggle="tab" id="blues_tab_link" href="#blues_tab">BLUEs</a></li>
 199     </ul>
 200     <div class="tab-content">
 201       <div id="adjusted_blups_tab" class="tab-pane fade in active">
 202         <br />
 203           <button id="open_store_adjusted_blups_dialog_button" class="btn btn-primary" data-toggle="modal" data-analysis_type="adjusted_means">Save adjusted means</button>
 204
 205           <!-- button class="btn btn-primary">Download</button -->
 206           <br />
 207           <div id="mixed_models_adjusted_blups_results_div">[loading...]</div>
 208       </div>
 209
 210       <div id="blups_tab" class="tab-pane fade">
 211         <br />
 212         <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>
 213         <div id="mixed_models_blups_results_div">[not available]</div>
 214       </div>
 215
 216       <div id="adjusted_blues_tab" class="tab-pane fade">
 217         <br />
 218         <button id="open_store_adjusted_blues_dialog_button" class="btn btn-primary" data-toggle="modal" data-analysis_type="blues">Save adjusted BLUEs</button>
 219
 220         <div id="mixed_models_adjusted_blues_results_div">[loading...]</div>
 221       </div>
 222
 223       <div id="blues_tab" class="tab-pane fade">
 224         <br />
 225         <button id="open_store_blues_dialog_button" class="btn btn-primary" data-toggle="modal" data-analysis_type="blues">Save BLUEs</button>
 226
 227         <div id="mixed_models_blues_results_div">[loading...]</div>
 228       </div>
 229     </div> <!-- results_tab div -->
 230   </div>
 231
 232 </&>
 233
 234 </&>
 235
 236 <script>
 237
 238 $(document).ready( function() {
 239 var mixedmodels = window.jsMod['mixedmodels'].init("mixedmodels");
 240 });
 241
 242 </script>
 243
 244
 245
 246