mason/breeders_toolbox/cross/upload_crosses_dialogs.mas

   1 <%args>
   2 $trial_id => undef
   3 $trial_name => undef
   4 </%args>
   5
   6 % my $cross_additional_info_string = $c->config->{cross_additional_info};
   7 % my @cross_additional_info = split ',',$cross_additional_info_string;
   8 % my $additional_info;
   9
  10 <div class="modal fade" id="upload_crosses_dialog" name="upload_crosses_dialog" tabindex="-1" role="dialog" aria-labelledby="uploadCrossesDialog">
  11     <div class="modal-dialog modal-xl" role="document">
  12         <div class="modal-content">
  13             <div class="modal-header">
  14                 <button type="reset" class="close" id="upload_crosses_dismiss_button_2" name="upload_crosses_dismiss_button" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  15                 <h4 class="modal-title" id="uploadCrossesDialog">Upload Crosses</h4>
  16             </div>
  17             <div class="modal-body">
  18                 <div class="container-fluid">
  19
  20                     <&| /util/workflow.mas, id=> "crosses_upload_workflow" &>
  21                         <&| /util/workflow.mas:step, title=> "Intro" &>
  22                             <& /page/page_title.mas, title=>"Introduction" &>
  23                             <ul>
  24                                 <li>Crosses can be of different types (biparental, self, open, backcross, sib, polycross, bulk, bulk_open, bulk_self, doubled_haploid, or dihaploid_induction)</li>
  25                                     <ul class="a">
  26                                         <li>cross type descriptions:</li>
  27                                         <ul class="b">
  28                                             <li><b>biparental:</b> An individual plant pollinated by another individual plant.</li>
  29                                             <li><b>self:</b> A self pollinated individual plant.</li>
  30                                             <li><b>open:</b> An individual plant pollinated by a group of plants or open pollinated (pollen may be from a group with known or unknown members).</li>
  31                                             <li><b>backcross:</b> An individual plant pollinated by one of its parents. Cross Unique ID can be used as one of the parents.</li>
  32                                             <li><b>sib:</b> Mating between individuals that have at least one parent in common. Generally between two individuals within the same plot.</li>
  33                                             <li><b>polycross:</b> Mating between individual female parent from a population and the corresponding male population.</li>
  34                                             <li><b>bulk:</b> A group of plants (usually a related family) pollinated by an individual plant (between a female population and a male accession).</li>
  35                                             <li><b>bulk_open:</b> A group of plants (usually a related family) that are pollinated by another group of plants or open pollinated (between a female population and a male population or unknown male parent).</li>
  36                                             <li><b>bulk_self:</b> A group of plants (usually a related family) that are self pollinated (each individual selfed, not combined pollen).</li>
  37                                             <li><b>doubled_haploid:</b> Plants derived from doubling the chromosome number of haploid tissue.</li>
  38                                             <li><b>dihaploid_induction</b>: Plants derived from reducing the chromosome set from tetraploid to diploid.</li>
  39                                         </ul>
  40                                     </ul>
  41                                 </li>
  42                                 <li>An individual cross can be linked to a female plot or plant, as well as a male plot or plant.</li>
  43                                 <li>A cross can have a number of properties associated to it, such as number of flowers, pollination date, etc.</li>
  44                                 <li>A cross can produce seed, which goes into a seedlot.</li>
  45                                 <li>A cross can ultimately produce progeny, which then become named accessions in the database.</li>
  46                             </ul>
  47
  48                             <br/><br/>
  49                             <center>
  50                                 <button id="next_step_intro_button" class="btn btn-primary" onclick="Workflow.complete(this);">Go to Next Step</button>
  51                             </center>
  52                         </&>
  53
  54                         <&| /util/workflow.mas:step, title=> "Crossing experiment" &>
  55                             <& /page/page_title.mas, title=>"Select a crossing experiment for your crosses" &>
  56                             <center><label style="color:DarkOliveGreen" class="col-sm-12 control-label">If you are uploading an Intercross file and using auto-generated cross unique IDs, please use manage Intercross section</label></center>
  57                             <br>
  58                             <br>
  59                             <div id="manage_page_section_1" style="display:none">
  60                                 <p>Crossing experiments are for grouping crosses together. The grouping is most often done for crosses derived from the same field trial, the same year, or for crosses that have the same breeding objective.</p>
  61                                 <center>
  62                                     <button class="btn btn-info" name="create_crossingtrial_link">If you need to create a new crossing experiment, click here</button><br/><br/>
  63                                     <button id="next_step_crossing_trial_button" class="btn btn-primary" onclick="Workflow.complete(this);">If you already have a crossing experiment, go to Next Step</button>
  64                                 </center>
  65                             </div>
  66
  67                             <div id="crossing_experiment_page_section_1" style="display:none">
  68                                 <center>
  69                                     <div class="form-group">
  70                                         <label class="col-sm-5 control-label">You are uploading crosses for crossing experiment: </label>
  71                                         <div class="col-sm-6" >
  72                                             <input class="form-control" name="experiment_name_1" id="experiment_name_1" disabled value="<% $trial_name %>">
  73                                         </div>
  74                                     </div>
  75                                     <br/><br/><br/><br/>
  76                                     <button class="btn btn-primary" onclick="Workflow.complete(this);">Go to Next Step</button>
  77                                 </center>
  78                             </div>
  79                         </&>
  80                         <&| /util/workflow.mas:step, title=> "Upload your crosses" &>
  81                             <& /page/page_title.mas, title=>"Enter basic information about the crosses and upload your file" &>
  82
  83                             <br/>
  84                             <form class="form-horizontal" role="form" method="post" enctype="multipart/form-data" encoding="multipart/form-data" id="upload_crosses_form" name="upload_crosses_form">
  85                                 <div id="manage_page_section_2" style="display:none">
  86                                     <div class="form-group">
  87                                         <label class="col-sm-3 control-label">Breeding Program: </label>
  88                                         <div class="col-sm-9" >
  89                                             <div id="upload_crosses_breeding_program_select_div">
  90                                             </div>
  91                                         </div>
  92                                     </div>
  93                                     <div id="manage_page_crossing_experiment" style="display:none">
  94                                         <div class="form-group">
  95                                             <label class="col-sm-3 control-label">Crossing Experiment: </label>
  96                                             <div class="col-sm-9">
  97                                                 <div id="upload_crosses_crossing_experiment_select_div" name="upload_crosses_crossing_experiment_select_div" >
  98                                                 </div>
  99                                             </div>
 100                                         </div>
 101                                     </div>
 102                                 </div>
 103                                 <div id="crossing_experiment_page_section_2" style="display:none">
 104                                     <div class="form-group">
 105                                         <label class="col-sm-3 control-label">Crossing Experiment: </label>
 106                                         <div class="col-sm-9" >
 107                                             <input class="form-control" name="experiment_name" id="experiment_name" disabled value="<% $trial_name %>">
 108                                             <input name="experiment_id" id="experiment_id" type="hidden" value="<% $trial_id %>">
 109                                         </div>
 110                                     </div>
 111                                 </div>
 112                                 <div class="form-group">
 113                                     <label class="col-sm-3 control-label">File Format: </label>
 114                                     <div class="col-sm-9">
 115                                         <select class="form-control" id="cross_file_format_option">
 116                                             <option value="">Select a file format that you want to upload</option>
 117                                             <option value="xls_cross_accession">Excel (.xls or .xlsx) file with only accession/population names for parents</option>
 118                                             <option value="xls_cross_plot">Excel (.xls or .xlsx) file with accession and plot names for parents</option>
 119                                             <option value="xls_cross_plant">Excel (.xls or .xlsx) file with accession and plant names for parents</option>
 120                                             <option value="xls_cross_simplified">Excel (.xls or .xlsx) file with simplified information for parents</option>
 121                                         </select>
 122                                     </div>
 123                                 </div>
 124                                 <div id="xls_cross_accession_section" style="display:none">
 125                                     <h3>You want to upload crosses in an Excel file with accession or population names for parents</h3>
 126                                     <div class="well well-sm">
 127                                         <div class="row">
 128                                             <div class="col-sm-4">
 129                                                 <&| /page/explanation.mas, title=>'Template information' &>
 130                                                     <p>
 131                                                         <b>File format information</b>
 132                                                         <br>
 133                                                         <a id="cross_accession_info_format">Spreadsheet format</a>
 134                                                     </p>
 135                                                 </&>
 136                                             </div>
 137                                             <div class="col-sm-8">
 138                                                 <br/>
 139                                                 <div class="panel panel-default">
 140                                                     <div class="panel-body">
 141                                                         <div class="form-group">
 142                                                             <label class="col-sm-6 control-label">Select an .xls or .xlsx File: </label>
 143                                                             <div class="col-sm-6">
 144                                                                 <input type="file" name="xls_crosses_simple_file" id="xls_crosses_simple_file" encoding="multipart/form-data" />
 145                                                             </div>
 146                                                         </div>
 147                                                     </div>
 148                                                 </div>
 149                                             </div>
 150                                         </div>
 151                                     </div>
 152                                 </div>
 153                                 <div id="xls_cross_plot_section" style="display:none">
 154                                     <h3>You want to upload crosses in an Excel file with accession and plot names for parents</h3>
 155                                     <div class="well well-sm">
 156                                         <div class="row">
 157                                             <div class="col-sm-4">
 158                                                 <&| /page/explanation.mas, title=>'Template information' &>
 159                                                     <p>
 160                                                         <b>File format information</b>
 161                                                         <br>
 162                                                         <a id="cross_plot_info_format">Spreadsheet format</a>
 163                                                     </p>
 164                                                 </&>
 165                                             </div>
 166                                             <div class="col-sm-8">
 167                                                 <br/>
 168                                                 <div class="panel panel-default">
 169                                                     <div class="panel-body">
 170                                                         <div class="form-group">
 171                                                             <label class="col-sm-6 control-label">Select an .xls or .xlsx File: </label>
 172                                                             <div class="col-sm-6">
 173                                                                 <input type="file" name="xls_crosses_plots_file" id="xls_crosses_plots_file" encoding="multipart/form-data" />
 174                                                             </div>
 175                                                         </div>
 176                                                     </div>
 177                                                 </div>
 178                                             </div>
 179                                         </div>
 180                                     </div>
 181                                 </div>
 182                                 <div id="xls_cross_plant_section" style="display:none">
 183                                     <h3>You want to upload crosses in an Excel file with accession and plant names for parents</h3>
 184                                     <div class="well well-sm">
 185                                         <div class="row">
 186                                             <div class="col-sm-4">
 187                                                 <&| /page/explanation.mas, title=>'Template information' &>
 188                                                     <p>
 189                                                         <b>File format information</b>
 190                                                         <br>
 191                                                         <a id="cross_plant_info_format">Spreadsheet format</a>
 192                                                     </p>
 193                                                 </&>
 194                                             </div>
 195                                             <div class="col-sm-8">
 196                                                 <br/>
 197                                                 <div class="panel panel-default">
 198                                                     <div class="panel-body">
 199                                                         <div class="form-group">
 200                                                             <label class="col-sm-6 control-label">Select an .xls or .xlsx File: </label>
 201                                                             <div class="col-sm-6">
 202                                                                 <input type="file" name="xls_crosses_plants_file" id="xls_crosses_plants_file" encoding="multipart/form-data" />
 203                                                             </div>
 204                                                         </div>
 205                                                     </div>
 206                                                 </div>
 207                                             </div>
 208                                         </div>
 209                                     </div>
 210                                 </div>
 211                                 <div id="xls_cross_simplified_section" style="display:none">
 212                                     <h3>You want to upload crosses in an Excel file with simplified information for parents</h3>
 213                                     <div class="well well-sm">
 214                                         <div class="row">
 215                                             <div class="col-sm-4">
 216                                                 <&| /page/explanation.mas, title=>'Template information' &>
 217                                                     <p>
 218                                                         <b>File format information</b>
 219                                                         <br>
 220                                                         <a id="cross_simplified_parent_info_format">Spreadsheet format</a>
 221                                                     </p>
 222                                                 </&>
 223                                             </div>
 224                                             <div class="col-sm-8">
 225                                                 <br/>
 226                                                 <div class="panel panel-default">
 227                                                     <div class="panel-body">
 228                                                         <div class="form-group">
 229                                                             <label class="col-sm-6 control-label">Select an .xls or .xlsx File: </label>
 230                                                             <div class="col-sm-6">
 231                                                                 <input type="file" name="xls_crosses_simplified_parents_file" id="xls_crosses_simplified_parents_file" encoding="multipart/form-data" />
 232                                                             </div>
 233                                                         </div>
 234                                                     </div>
 235                                                 </div>
 236                                             </div>
 237                                         </div>
 238                                     </div>
 239                                 </div>
 240
 241                                 <!--
 242                                 <hr>
 243                                 <h3>Additional options:</h3>
 244
 245                                 <p>Progeny naming: <i>If generating progeny, use cross name and:</i></p>
 246                                 <div class="form-group">
 247                                     <label class="col-sm-2 control-label">Prefix: </label>
 248                                     <div class="col-sm-10">
 249                                         <input class="form-control" id="upload_prefix" name="upload_prefix" value="P" />
 250                                     </div>
 251                                 </div>
 252                                 <div class="form-group">
 253                                     <label class="col-sm-2 control-label">Suffix: </label>
 254                                     <div class="col-sm-10">
 255                                         <input class="form-control" id="upload_suffix" name="upload_suffix" />
 256                                     </div>
 257                                 </div>
 258                                 -->
 259                             </form>
 260                             <div id="submit_button_section" style="display:none">
 261                                 <center>
 262                                     <button type="button" onclick="Workflow.complete(this, false);" class="btn btn-primary" name="upload_crosses_submit" id="upload_crosses_submit">Upload File</button>
 263                                 </center>
 264                             </div>
 265
 266                         </&>
 267                         <&| /util/workflow.mas:complete, title=> "Complete" &>
 268                             <& /page/page_title.mas, title=>"Finished! Your crosses are now in the database" &>
 269                             <p>
 270                                 <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
 271                                 The crosses file was uploaded successfully
 272                             </p>
 273
 274                             <ul>
 275                                 <li>You may want to proceed to the cross detail page(s) for the cross(es) you just created.</li>
 276                                 <li>You can print barcodes for the crosses.</li>
 277                                 <li>You can add crossing information as it becomes available (e.g. number of seeds, progeny, etc).</li>
 278                             </ul>
 279                             <br/>
 280                             <center>
 281                             <button  class="btn btn-primary" name="upload_crosses_success_complete_button">The crosses were saved to the database with no errors! Congrats Click Here</button><br/><br/>
 282                             </center>
 283                         </&>
 284
 285                     </&><!-- End of workflow -->
 286
 287                 </div>
 288             </div>
 289             <div class="modal-footer">
 290                 <button id="upload_crosses_dismiss_button_1" name="upload_crosses_dismiss_button" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 291             </div>
 292         </div>
 293     </div>
 294 </div>
 295
 296 <div class="modal fade" id="upload_cross_error_display" name="upload_cross_error_display" tabindex="-1" role="dialog" aria-labelledby="uploadCrossesErrorDialog">
 297     <div class="modal-dialog modal-lg" role="document">
 298         <div class="modal-content">
 299             <div class="modal-header">
 300                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 301                 <h4 class="modal-title" id="uploadCrossesErrorDialog">Upload Crosses File Error</h4>
 302             </div>
 303             <div class="modal-body">
 304                 <div class="container-fluid">
 305                     <table>
 306                         <tbody></tbody>
 307                     </table>
 308                 </div>
 309             </div>
 310             <div class="modal-footer">
 311                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 312             </div>
 313         </div>
 314     </div>
 315 </div>
 316
 317 <div class="modal fade" id="cross_spreadsheet_info_dialog" name="cross_spreadsheet_info_dialog" tabindex="-1" role="dialog" aria-labelledby="crossSpreadsheetInfoDialog">
 318     <div class="modal-dialog modal-xl" role="document">
 319         <div class="modal-content">
 320             <div class="modal-header">
 321                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 322                 <h4 class="modal-title" id="crossSpreadsheetInfoDialog">Template Information</h4>
 323             </div>
 324             <div class="modal-body">
 325                 <div class="container-fluid">
 326                     <b>Crosses may be uploaded in an Excel file (.xls or .xlsx)</b>
 327                     <br>
 328                     <b>Header:</b>
 329                     <br>
 330                     To set up crosses in the database, please provide required information. The first row (header) must contain the following:
 331                     <br>
 332
 333                     <table class="table table-bordered table-hover" id = "cross_parents_header" style="display:none">
 334                         <tbody>
 335                             <tr>
 336                                 <td>cross_unique_id</td>
 337                                 <td>cross_combination</td>
 338                                 <td>cross_type</td>
 339                                 <td>female_parent</td>
 340                                 <td>male_parent</td>
 341                             </tr>
 342                         </tbody>
 343                     </table>
 344                     <table class="table table-bordered table-hover" id = "cross_plot_parents_header" style="display:none">
 345                         <tbody>
 346                             <tr>
 347                                 <td>cross_unique_id</td>
 348                                 <td>cross_combination</td>
 349                                 <td>cross_type</td>
 350                                 <td>female_parent</td>
 351                                 <td>male_parent</td>
 352                                 <td>female_plot</td>
 353                                 <td>male_plot</td>
 354                         </tr>
 355                         </tbody>
 356                     </table>
 357
 358                     <table class="table table-bordered table-hover" id = "cross_plant_parents_header" style="display:none">
 359                         <tbody>
 360                             <tr>
 361                                 <td>cross_unique_id</td>
 362                                 <td>cross_combination</td>
 363                                 <td>cross_type</td>
 364                                 <td>female_parent</td>
 365                                 <td>male_parent</td>
 366                                 <td>female_plant</td>
 367                                 <td>male_plant</td>
 368                             </tr>
 369                         </tbody>
 370                     </table>
 371
 372                     <style>
 373                         ul.a {text-indent};
 374                         ul.b {text-indent};
 375                     </style>
 376                     <b>Required columns:</b>
 377                     <ul>
 378                         <li><b>cross_unique_id</b> (must NOT exist in the database)</li>
 379                         <li><b>cross_combination</b> (required in the header, but value for cross combination (e.g. female accession/male accession) may be left blank)</li>
 380                         <li><b>cross_type</b> (must be one of the following: biparental, self, open, sib, polycross, backcross, bulk, bulk_open, bulk_self, doubled_haploid, dihaploid_induction)
 381                             <ul class="a">
 382                                 <li><b>cross type descriptions:</b></li>
 383                                 <ul class="b">
 384                                     <li><b>biparental:</b> An individual plant pollinated by another individual plant.</li>
 385                                     <li><b>self:</b> A self pollinated individual plant.</li>
 386                                     <li><b>open:</b> An individual plant pollinated by a group of plants or open pollinated (pollen may be from a group with known or unknown members).</li>
 387                                     <li><b>backcross:</b> An individual plant pollinated by one of its parents.</li>
 388                                     <li><b>sib:</b> Mating between individuals that have at least one parent in common. Generally between two individuals within the same plot.</li>
 389                                     <li><b>polycross:</b> Mating between individual female parent from a population and the corresponding male population.</li>
 390                                     <li><b>bulk:</b> A group of plants (usually a related family) pollinated by an individual plant (between a female population and a male accession).</li>
 391                                     <li><b>bulk_open:</b> A group of plants (usually a related family) that are pollinated by another group of plants or open pollinated (between a female population and a male population or unknown male parent).</li>
 392                                     <li><b>bulk_self:</b> A group of plants (usually a related family) that are self pollinated (each individual selfed, not combined pollen).</li>
 393                                     <li><b>doubled_haploid:</b> Plants derived from doubling the chromosome number of haploid tissue.</li>
 394                                     <li><b>dihaploid_induction</b>: Plants derived from reducing the chromosome set from 4 to 2.</li>
 395                                 </ul>
 396                             </ul>
 397                         <div id = "accession_parent_info" style="display:none">
 398                             <li><b>female_parent:</b> Accession names (for biparental, self, open, sib, polycross, doubled_haploid cross types) or population names (for bulk, bulk_self and bulk_open cross types) or cross unique ids (for backcross cross type) must exist as <b>uniquenames</b> in the database.</li>
 399                             <li><b>male_parent:</b> Required in the header, but value may be left blank for open cross type. Must be specified for biparental, sib, polycross, bulk, backcross, doubled_haploid and dihaploid_induction cross types. When specified, accession names or population names must exist as <b>uniquenames</b> in the database.</li>
 400                         </div>
 401                         <div id = "plot_parent_info" style="display:none">
 402                             <li><b>female_parent:</b> Accession names must exist as <b>uniquenames</b> in the database.</li>
 403                             <li><b>male_parent:</b> Required in the header, but value may be left blank for most cross types. Must be specified for biparental, sib, polycross and bulk cross types. When specified, accession or population names must exist as <b>uniquenames</b> in the database.</li>
 404                             <li><b>female_plot:</b> Plot names must exist in the database.</li>
 405                             <li><b>male_plot:</b> Plot names must exist in the database.</li>
 406                         </div>
 407                         <div id = "plant_parent_info" style="display:none">
 408                             <li><b>female_parent:</b> Accession names must exist as <b>uniquenames</b> in the database.</li>
 409                             <li><b>male_parent:</b> Required in the header, but value may be left blank for most cross types. Must be specified for biparental, sib, polycross and bulk cross types. When specified, accession or population names must exist as <b>uniquenames</b> in the database.</li>
 410                             <li><b>female_plant:</b> Plant names must exist in the database.</li>
 411                             <li><b>male_plant:</b> Plant names must exist in the database.</li>
 412                         </div>
 413                         <div id = "any_parent_info" style="display:none">
 414                             <li><b>female_parent:</b> Female parent names must exist as <b>uniquenames</b> in the database, can be accession, plot, plant or population stock type.</li>
 415                             <li><b>male_parent:</b> Required in the header, but value may be left blank for most cross types. Must be specified for biparental, sib, polycross and bulk cross types. When specified, male parent names must exist as <b>uniquenames</b> in the database, can be accession, plot, plant or population stock type.</li>
 416                         </div>
 417                     </ul>
 418                     <b>Optional columns (additional parent info):</b> You can add additional parent info after male_plant column by using one or more of these column headers.
 419                     <ul>
 420 % foreach $additional_info(@cross_additional_info){
 421                         <li><%$additional_info%></li>
 422 %}
 423                     </ul>
 424                     <b>Additional cross information:</b>
 425                     <ul>
 426                         <li>After cross unique ids are stored in the database, you can add field crossing data (e.g. pollination date, total number of flowers pollinated, total number of fruits set) or progenies to each cross unique id.</li>
 427                         <li>Field crossing data and progenies can be uploaded via links in crossing experiment detail page or can be added directly in each cross detail page.</li>
 428                     </ul>
 429                 </div>
 430             </div>
 431             <div class="modal-footer">
 432                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 433             </div>
 434         </div>
 435     </div>
 436 </div>
 437
 438 <script>
 439
 440 jQuery(document).ready(function(){
 441
 442     jQuery('#upload_new_crosses_link').click(function(){
 443         jQuery('#upload_crosses_dialog').modal("show");
 444
 445         var trial_id = "<% $trial_id %>";
 446         var trial_name = "<% $trial_name %>";
 447         if (trial_id) {
 448             jQuery('#crossing_experiment_page_section_1').modal("show");
 449             jQuery('#manage_page_section_1').modal("hide");
 450
 451             jQuery('#crossing_experiment_page_section_2').modal("show");
 452             jQuery('#manage_page_section_2').modal("hide");
 453
 454         }
 455     });
 456
 457     jQuery("[name='upload_crosses_dismiss_button']").click(function() {
 458         jQuery('#upload_crosses_dialog').modal('hide');
 459         jQuery('#upload_crosses_breeding_program_select_div').val('');
 460         jQuery('#upload_crosses_crossing_experiment_select_div').val('');
 461         jQuery('#cross_file_format_option').val('');
 462         jQuery('#xls_crosses_simple_file').val('');
 463         jQuery('#xls_crosses_plots_file').val('');
 464         jQuery('#xls_crosses_plants_file').val('');
 465         jQuery('#xls_crosses_simplified_parents_file').val('');
 466         location.reload();
 467     });
 468
 469
 470 });
 471
 472 </script>