mason/util/styleguide.mas

   1 <h3>Importing CSS</h3>
   2
   3 <p>
   4   To import CSS one should use the <code>/util/import_css.mas</code>
   5   mason component instead of a <code>&lt;link&gt;</code> element. This will
   6   ensure that a link is added to the <code>&lt;head&gt;</code>
   7   instead of being part of the <code>&lt;body&gt;</code>. One provides this
   8   mason componant with a list of strings which are one of the following:
   9   <ul>
  10     <li>The relative path to the CSS file from the /static/css folder.</li>
  11     <li>The absolute site path to the CSS file.</li>
  12     <li>A URL starting with the scheme name (i.e. 'http://...').</li>
  13   </ul>
  14     <pre><%text><& /util/import_css.mas, paths => [
  15     'bootstrap/v1.css',
  16     '/css/jquery.css',
  17     'http://foo.bar/buzz.css'
  18 ] &></%text></pre>
  19 </p>
  20
  21 <hr>
  22
  23 <h3>Importing JavaScript</h3>
  24
  25 <p>
  26   To import JavaScript one should use the <code>/util/import_javascript.mas</code>
  27   mason component. This will ensure that the script is loaded in the
  28   <code>&lt;head&gt;</code> instead of being part of the
  29   <code>&lt;body&gt;</code>. One provides this mason componant with a list of
  30   strings which are the path to the JavaScript file with slashes replaced by
  31   periods (e.g. <code>s/\/\./g</code>) and the file extension removed.
  32   <pre><%text><& /util/import_javascript.mas, classes => [qw[ CXGN.Effects CXGN.Phenome.Locus MochiKit.DOM ]] &></%text></pre>
  33 </p>
  34
  35 <hr>
  36
  37 <h3>Info Sections</h3>
  38 <p>Source:</p>
  39 <pre><%text>
  40 &lt;&| /page/info_section.mas, id=&gt;'Example_Info_Section',
  41     title =&gt; 'Example Info Section', subtitle =&gt; 'This is a subtitle',
  42     collapsible=&gt;1, collapsed=&gt;0 &&gt;
  43
  44   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  45
  46 &lt;/&&gt;
  47 </%text></pre>
  48
  49 <p>Creates:</p>
  50 <&| /page/info_section.mas, id=>'Example_Info_Section',
  51     title => 'Example Info Section', subtitle => 'This is a subtitle',
  52     collapsible=>1, collapsed=>0 &>
  53
  54   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  55
  56 </&>
  57
  58 <hr>
  59
  60 <h3>List Select Menus</h3>
  61 <p>Source:</p>
  62 <pre>
  63   &lt;& /util/import_javascript.mas, classes => ['CXGN.List'] &&gt;
  64   &lt;div id="select_div_id"&gt;&lt;/div&gt;
  65   &lt;script type="text/javascript"&gt;
  66     var list_obj = new CXGN.List();
  67     var listhtml = list_obj.listSelect('select_div_id', ['accessions'], "Select an Accession List", undefined, undefined);
  68     jQuery('#select_div_id').html(listhtml);
  69   &lt;/script&gt;
  70 </pre>
  71
  72 <p>Creates:</p>
  73 <div id="select_div_id"></div>
  74 <script type="text/javascript">
  75   var lo = new CXGN.List();
  76   var listhtml = lo.listSelect('select_div_id', ['accessions'], "Select an Accession List", undefined, undefined);
  77   jQuery('#select_div_id').html(listhtml);
  78 </script>
  79 <hr>
  80
  81 <h3>HTML Selects (get_select_box)</h3>
  82 <p>Source:</p>
  83 <pre>
  84 &lt;& /util/import_javascript.mas, classes => ['CXGN.BreedersToolbox.HTMLSelect'] &&gt;
  85 &lt;div id="htmlselectexample"&gt;&lt;/div&gt;
  86 &lt;script type="text/javascript"&gt;
  87     get_select_box("trials", "htmlselectexample")
  88 &lt;/script&gt;
  89 </pre>
  90
  91 <p>Creates:</p>
  92 <div id="htmlselectexample"></div>
  93 <script type="text/javascript">
  94     get_select_box("trials", "htmlselectexample")
  95 </script>
  96
  97 <hr>
  98
  99 <h3>HTML Muliple Selects (get_select_box has many options e.g. search for trials in breeding_program_name)</h3>
 100 <p>Source:</p>
 101 <pre>
 102 &lt;& /util/import_javascript.mas, classes => ['CXGN.BreedersToolbox.HTMLSelect'] &&gt;
 103 &lt;div id="htmlselectmultipleexample"&gt;&lt;/div&gt;
 104 &lt;script type="text/javascript"&gt;
 105     get_select_box("trials", "htmlselectmultipleexample", {'multiple':1, 'size':10, 'breeding_program_name':'test'})
 106 &lt;/script&gt;
 107 </pre>
 108
 109 <p>Creates:</p>
 110 <div id="htmlselectmultipleexample"></div>
 111 <script type="text/javascript">
 112     get_select_box("trials", "htmlselectmultipleexample", {'multiple':1, 'size':10, 'breeding_program_name':'test'})
 113 </script>
 114
 115 <hr>
 116
 117 <h3>Add to List Menu</h3>
 118 <p>Source:</p>
 119 <pre>
 120 &lt;div id="styleguide_add_to_list_menu"&gt;&lt;/div&gt;
 121 &lt;div id="styleguide_add_to_list_items" style="display:none"&gt;item1
 122     item2
 123     item3
 124 &lt;/div&gt;
 125 &lt;script type="text/javascript"&gt;
 126     addToListMenu("styleguide_add_to_list_menu", "styleguide_add_to_list_items", {
 127         listType:'accessions'
 128     });
 129 &lt;/script&gt;
 130 </pre>
 131
 132 <p>Creates:</p>
 133 <div id="styleguide_add_to_list_menu"></div>
 134 <div id="styleguide_add_to_list_items" style="display:none">item1
 135     item2
 136     item3
 137 </div>
 138 <script type="text/javascript">
 139     addToListMenu("styleguide_add_to_list_menu", "styleguide_add_to_list_items", {
 140         listType:'accessions'
 141     });
 142 </script>
 143
 144 <hr>
 145
 146 <h3>jQueryUI autocomplete</h3>
 147 <p>Source:</p>
 148 <pre>
 149 &lt;input type="text" class="form-control" id="popname" value="" placeholder="Populations autocomplete..."&gt;
 150 &lt;script type="text/javascript"&gt;
 151     jQuery('#popname').autocomplete({
 152         source: '/ajax/stock/population_autocomplete',
 153     });
 154 &lt;/script&gt;
 155 </pre>
 156
 157 <p>Creates:</p>
 158 <input type="text" class="form-control" id="popname" value="" placeholder="Populations autocomplete...">
 159 <script type="text/javascript">
 160   jQuery('#popname').autocomplete({
 161     source: '/ajax/stock/population_autocomplete',
 162   });
 163 </script>
 164
 165 <hr>
 166
 167 <h3>2 Column Detail Page Section</h3>
 168 <p>This section is used from trial detail page and stock detail page, but ideally it would be used on all detail pages. The info_section_id specifies what to show in the main section. Buttons can be passed into the buttons_html.</p>
 169 <p>Source:</p>
 170 <pre>
 171 &lt;& /page/detail_page_2_col_section.mas,
 172 info_section_title =&gt; "&lt;h4 style='display:inline'&gt;My Info Section&lt;/h4&gt;",
 173 info_section_subtitle =&gt; 'View my info.',
 174 icon_class =&gt; "glyphicon glyphicon-equalizer",
 175 info_section_id =&gt; "",
 176 buttons_html =&gt; "&lt;button class='btn btn-sm btn-primary' style='margin:3px' id='my_example_button'&gt;Example Button&lt;/button&gt;"
 177 &&gt;
 178 </pre>
 179
 180 <p>Creates:</p>
 181 <& /page/detail_page_2_col_section.mas, info_section_title => "<h4 style='display:inline'>My Info Section</h4>", info_section_subtitle => 'View my info.', icon_class => "glyphicon glyphicon-equalizer", info_section_id => "", buttons_html => "<button class='btn btn-sm btn-primary' style='margin:3px' id='my_example_button'>Example Button</button>" &>
 182
 183 <hr>
 184
 185 <h3>3 Column Detail Page Section</h3>
 186 <p>Source:</p>
 187 <pre>
 188 &lt;& /page/detail_page_3_col_section.mas,
 189 icon_class =&gt; "glyphicon glyphicon-qrcode",
 190 title =&gt; "Example title.",
 191 button_id =&gt; "example_button_link"
 192 &&gt;
 193 </pre>
 194
 195 <p>Creates:</p>
 196 <& /page/detail_page_3_col_section.mas, icon_class => "glyphicon glyphicon-qrcode", title => "Example title.", button_id => "example_button_link" &>
 197
 198 <hr>
 199
 200 <h3>An Example Workflow Explaining Workflows</h3>
 201
 202 <&| /util/workflow.mas , id=> "my_workflow"&>
 203
 204   <&| /util/workflow.mas:step, title=>"workflow.mas" &>
 205     <p>Add a workflow using the <code>/util/workflow.mas</code> mason component</p>
 206     <p><pre><%text>&lt;&amp;| /util/workflow.mas, id=> "my_workflow" &amp;&gt;...&lt;/&amp;&gt;</%text></pre></p>
 207     <button type="button" class="btn btn-default" onclick="Workflow.complete(this);">Next</button>
 208   </&>
 209
 210   <&| /util/workflow.mas:step, title=>"Adding Steps" &>
 211     <p>Add steps to the workflow using the <code>/util/workflow.mas:step</code> mason method.</p>
 212     <p>
 213 <pre><%text>&lt;&amp;| /util/workflow.mas, id=&gt; "my_workflow" &amp;&gt;
 214     &lt;&amp;| /util/workflow.mas:step, title=&gt; "Step A" &amp;&gt;...&lt;/&amp;&gt;
 215     &lt;&amp;| /util/workflow.mas:step, title=&gt; "Another Step" &amp;&gt;...&lt;/&amp;&gt;
 216     ...
 217 &lt;/&amp;&gt;</%text></pre>
 218     </p>
 219     <button type="button" class="btn btn-default" onclick="Workflow.complete(this);">Next</button>
 220   </&>
 221
 222   <&| /util/workflow.mas:step, title=>"Completing Steps" &>
 223   <p>
 224     Use the <code>Workflow.complete(Element)</code> JavaScript function to
 225     complete a step. <code>Element</code> should be any DOM element within the
 226     step you would like to complete.
 227   </p>
 228   <p>
 229 <pre><%text>&lt;&amp;| /util/workflow.mas, id=&gt; "my_workflow"&amp;&gt;
 230   &lt;&amp;| /util/workflow.mas:step, title=&gt;"workflow.mas" &amp;&gt;
 231     ...
 232     &lt;button type="button" onclick="Workflow.complete(this);"&gt;Next&lt;/button&gt;
 233   &lt;/&amp;&gt;
 234   ...
 235 &lt;/&amp;&gt;</%text></pre>
 236   </p>
 237   <button type="button" class="btn btn-default" onclick="Workflow.complete(this);">Next</button>
 238   </&>
 239
 240   <&| /util/workflow.mas:step, title=>"Skipping Steps" &>
 241   <p>
 242     Skipping works like completing but marks the step as incomplete. Use
 243     <code>Workflow.skip(Element)</code> just like you would
 244     <code>Workflow.complete(Element)</code>.
 245   </p>
 246   <p>
 247 <pre><%text>&lt;&amp;| /util/workflow.mas, id=&gt; "my_workflow"&amp;&gt;
 248   &lt;&amp;| /util/workflow.mas:step, title=&gt;"workflow.mas" &amp;&gt;
 249     ...
 250     &lt;button type="button" onclick="Workflow.skip(this);"&gt;Skip&lt;/button&gt;
 251   &lt;/&amp;&gt;
 252   ...
 253 &lt;/&amp;&gt;</%text></pre>
 254   </p>
 255   <button type="button" class="btn btn-default" onclick="Workflow.skip(this);">Skip this Step</button>
 256   </&>
 257
 258   <&| /util/workflow.mas:step, title=>"Pending Steps" &>
 259   <p>
 260     Sometimes a step needs time to complete, such as uploads. You can mark a
 261     step as pending using <code>Workflow.pending(Element)</code>. You can later
 262     fully complete the step using <code>Workflow.complete(Element)</code>.
 263   </p>
 264   <p>
 265 <pre><%text>&lt;&amp;| /util/workflow.mas, id=&gt; "my_workflow"&amp;&gt;
 266   &lt;&amp;| /util/workflow.mas:step, title=&gt;"workflow.mas" &amp;&gt;
 267     ...
 268     &lt;button type="button" onclick="Workflow.pending(this);"&gt;Wait&lt;/button&gt;
 269     &lt;button type="button" onclick="Workflow.complete(this,false);"&gt;Complete&lt;/button&gt;
 270   &lt;/&amp;&gt;
 271   ...
 272 &lt;/&amp;&gt;</%text></pre>
 273   </p>
 274   <button id="to_complete" type="button" class="btn btn-primary" onclick="Workflow.pending(this);">Wait and Continue</button>
 275   </&>
 276
 277   <&| /util/workflow.mas:step, title=>"Endscreens" &>
 278   <p>
 279     After the final step is completed, an endscreen will be shown. To set the
 280     content of the endscreen, use the <code>/util/workflow.mas:complete</code>
 281     mason method. You can also optionally set a special endscreen which is shown
 282     instead while there are pending steps using
 283     <code>/util/workflow.mas:pending</code>.
 284   </p>
 285   <p>
 286 <pre><%text>&lt;&amp;| /util/workflow.mas, id=&gt; "my_workflow"&amp;&gt;
 287   ...
 288   &lt;&amp;| /util/workflow.mas:complete &amp;&gt; ... &lt;/&amp;&gt;
 289   &lt;&amp;| /util/workflow.mas:pending &amp;&gt; ... &lt;/&amp;&gt;
 290 &lt;/&amp;&gt;</%text></pre>
 291   </p>
 292   <button type="button" class="btn btn-default" onclick="Workflow.complete(this);">Go to endscreen</button>
 293   </&>
 294
 295   <&| /util/workflow.mas:pending &>
 296     <h2>There is still a pending step. Complete it to see the final endscreen.</h2>
 297     <button type="button" class="btn btn-default" onclick="Workflow.complete(document.querySelector('#to_complete'),false);">Complete Pending Step</button>
 298   </&>
 299   <&| /util/workflow.mas:complete &>
 300     <h1>Congratulations, you've made it through the workflow!</h1>
 301     <h4>Here are some other tips and tricks:</h4>
 302     <p>To set the currently visible step of the workflow use</p>
 303     <pre>var wf = document.querySelector("#my_workflow");
 304 Workflow.focus(wf,step_index);</pre>
 305     <p>
 306       By default, <code>Workflow.complete(...)</code>,
 307       <code>Workflow.skip(...)</code>, and <code>Workflow.pending(...)</code>
 308       also change the focus to the next step. Sometimes, you need to set a step
 309       to complete without changing the focus. To do this, pass
 310       <code>false</code> as the second argument.
 311     </p>
 312     <pre>Workflow.complete(Element,false);
 313 Workflow.skip(Element,false);
 314 Workflow.pending(Element,false);</pre>
 315   </&>
 316 </&>
 317
 318 <hr>
 319
 320 <h3>Vega(-lite) Graphs</h3>
 321
 322 <p>
 323     Using <a href="https://vega.github.io/vega-lite/">vega-lite</a> is an easy and quick way to make graphs in the db. Simply include vega-lite:
 324     <pre><%text><& /util/import_javascript.mas, classes => [qw[ vega.vega3 vega.vega-lite2 vega.vega-embed3 vega.vega-defaults ]] &></%text></pre>
 325     set up a div:
 326 <pre><%text>&lt;div id="vis"&gt;&lt;/div&gt;</%text></pre>
 327     and then run vega-lite (you can also use a <a href="https://vega.github.io/vega/">vega</a> graph spec):
 328 <pre><%text>&lt;script type="text/javascript"&gt;
 329     var yourVlSpec = {
 330       "$schema": "https://vega.github.io/schema/vega-lite/v2.0.json",
 331       "description": "A simple bar chart with embedded data.",
 332       "data": {
 333         "values": [
 334           {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
 335           {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
 336           {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
 337         ]
 338       },
 339       "mark": "bar",
 340       "encoding": {
 341         "x": {"field": "a", "type": "ordinal"},
 342         "y": {"field": "b", "type": "quantitative"}
 343       }
 344     }
 345     vegaEmbed("#vis", yourVlSpec, window.VEGA_DEFAULTS);
 346   &lt;/script&gt;</%text></pre>
 347 </p>
 348 to create:
 349 <& /util/import_javascript.mas, classes => [qw[ vega.vega3 vega.vega-lite2 vega.vega-embed3 vega.vega-defaults ]] &>
 350 <div>
 351   <div id="vis"></div>
 352 </div>
 353 <script type="text/javascript">
 354     var yourVlSpec = {
 355       "$schema": "https://vega.github.io/schema/vega-lite/v2.0.json",
 356       "description": "A simple bar chart with embedded data.",
 357       "data": {
 358         "values": [
 359           {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
 360           {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
 361           {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
 362         ]
 363       },
 364       "mark": "bar",
 365       "encoding": {
 366         "x": {"field": "a", "type": "ordinal"},
 367         "y": {"field": "b", "type": "quantitative"}
 368       }
 369     }
 370     vegaEmbed("#vis", yourVlSpec, window.VEGA_DEFAULTS);
 371 </script>
 372
 373 <hr>
 374
 375 <h3>Field Trials Search Datatable</h3>
 376 <p>Source:</p>
 377 <pre>
 378     &lt;div class="well"&gt;
 379     &lt;table id="trial_search_results" width="100%" class="table table-hover table-striped"&gt;
 380     &lt;thead&gt;
 381       &lt;tr&gt;
 382         &lt;th&gt;Trial name&lt;/th&gt;
 383         &lt;th&gt;Description&lt;/th&gt;
 384         &lt;th&gt;Breeding program&lt;/th&gt;
 385         &lt;th&gt;Folder&lt;/th&gt;
 386         &lt;th&gt;Year&lt;/th&gt;
 387         &lt;th&gt;Location&lt;/th&gt;
 388         &lt;th&gt;Trial type&lt;/th&gt;
 389         &lt;th&gt;Design&lt;/th&gt;
 390         &lt;th&gt;Planting Date&lt;/th&gt;
 391         &lt;th&gt;Harvest Date&lt;/th&gt;
 392         &lt;th&gt;Download&lt;/th&gt;
 393     &lt;/tr&gt;
 394     &lt;/thead&gt;
 395     &lt;/table&gt;
 396     &lt;/div&gt;
 397     &lt;script type="text/javascript"&gt;
 398     var trial_table = jQuery('#trial_search_results').DataTable( {
 399         'ajax': {
 400             'url':'/ajax/search/trials',
 401             'data': function(d) {
 402                 d.select_checkbox_name = 'create_tissue_sample_select_trial';
 403             }
 404         }
 405     });
 406     &lt;/script&gt;
 407 </pre>
 408
 409 <p>Creates:</p>
 410 <div class="well">
 411 <table id="styleguide_trial_search_results" width="100%" class="table table-hover table-striped">
 412 <thead>
 413   <tr>
 414     <th>Select</th>
 415     <th>Trial name</th>
 416     <th>Description</th>
 417     <th>Breeding program</th>
 418     <th>Folder</th>
 419     <th>Year</th>
 420     <th>Location</th>
 421     <th>Trial type</th>
 422     <th>Design</th>
 423     <th>Planting Date</th>
 424     <th>Harvest Date</th>
 425     <th>Download</th>
 426 </tr>
 427 </thead>
 428 </table>
 429 </div>
 430 <script type="text/javascript">
 431 var styleguide_trial_table = jQuery('#styleguide_trial_search_results').DataTable( {
 432     'ajax': {
 433         'url':'/ajax/search/trials',
 434         'data': function(d) {
 435             d.select_checkbox_name = 'styleguide_select_trial';
 436         }
 437     }
 438 });
 439 </script>
 440
 441 <hr>
 442
 443 <h3>Use of Symbols</h3>
 444
 445 <p>
 446   Below is a table with current usages of symbols in the database.
 447   Please add to this tale when you choose to use a new symbol.
 448 </p>
 449 <style media="screen">
 450   .symbol-table>tbody>tr>td{
 451     vertical-align: middle;
 452   }
 453   .symbol-table>tbody>tr>td:first-of-type>*{
 454     font-size:2.5em;
 455   }
 456 </style>
 457 <table class="table symbol-table">
 458   <tr>
 459     <th>Symbol</th>
 460     <th>Usages and contexts</th>
 461   </tr>
 462   <tr>
 463     <td><span class="glyphicon glyphicon-dashboard"></span></td>
 464     <td>
 465       <ul>
 466         <li>Trial Details Top Section[Trial Detail]</li>
 467       </ul>
 468     </td>
 469   </tr>
 470   <tr>
 471     <td><span class="glyphicon glyphicon-align-left"></span></td>
 472     <td>
 473       <ul>
 474         <li>JBrowse[Trial Detail]</li>
 475         <li>JBrowse[Stock Detail]</li>
 476       </ul>
 477     </td>
 478   </tr>
 479   <tr>
 480     <td><span class="glyphicon glyphicon-book"></span></td>
 481     <td>
 482       <ul>
 483         <li>Literature Annotation[Stock Detail]</li>
 484         <li>Upload Phenotype Data[Homepage Help]</li>
 485       </ul>
 486     </td>
 487   </tr>
 488   <tr>
 489     <td><span class="glyphicon glyphicon-briefcase"></span></td>
 490     <td>
 491       <ul>
 492         <li>Breeding Program Symbol[Manage Trials]</li>
 493         <li>Breeding Program Symbol[Manage Crosses]</li>
 494         <li>Breeding Program Symbol[Manage Genotyping Plates]</li>
 495         <li>Breeding Program Symbol[Folder Detail]</li>
 496       </ul>
 497     </td>
 498   </tr>
 499   <tr>
 500     <td><span class="glyphicon glyphicon-folder-open"></span></td>
 501     <td>
 502       <ul>
 503         <li>Folder Symbol[Manage Trials]</li>
 504         <li>Folder Symbol[Manage Crosses]</li>
 505         <li>Folder Symbol[Manage Genotyping Plates]</li>
 506         <li>Folder Symbol[Folder Detail]</li>
 507       </ul>
 508     </td>
 509   </tr>
 510   <tr>
 511     <td><span class="glyphicon glyphicon-camera"></span></td>
 512     <td>
 513       <ul>
 514         <li>Images[Stock Detail]</li>
 515       </ul>
 516     </td>
 517   </tr>
 518   <tr>
 519     <td><span class="glyphicon glyphicon-transfer"></span></td>
 520     <td>
 521       <ul>
 522         <li>Data Transfer[Manage ODK]</li>
 523       </ul>
 524     </td>
 525   </tr>
 526   <tr>
 527     <td><span class="glyphicon glyphicon-cloud"></span></td>
 528     <td>
 529       <ul>
 530         <li>Weather Data[Trial Detail]</li>
 531       </ul>
 532     </td>
 533   </tr>
 534   <tr>
 535     <td><span class="glyphicon glyphicon-equalizer"></span></td>
 536     <td>
 537       <ul>
 538         <li>Phenotypes Summary Statistics[Trial Detail]</li>
 539         <li>Traits assayed[Stock Detail]</li>
 540       </ul>
 541     </td>
 542   </tr>
 543   <tr>
 544     <td><span class="glyphicon glyphicon-inbox"></span></td>
 545     <td>
 546       <ul>
 547         <li>Data Agreement[Trial Detail]</li>
 548       </ul>
 549     </td>
 550   </tr>
 551   <tr>
 552     <td><span class="glyphicon glyphicon-info-sign"></span></td>
 553     <td>
 554       <ul>
 555         <li>Additional Information[Stock Detail]</li>
 556       </ul>
 557     </td>
 558   </tr>
 559   <tr>
 560     <td><span class="glyphicon glyphicon-leaf"></span></td>
 561     <td>
 562       <ul>
 563         <li>Experiment Usage[Stock Detail]</li>
 564         <li>Trial Symbol[Manage Trials]</li>
 565         <li>Trial Symbol[Folder Detail]</li>
 566         <li>Field Trial Section[Manage Tissue Samples]</li>
 567       </ul>
 568     </td>
 569   </tr>
 570   <tr>
 571     <td><span class="glyphicon glyphicon-link"></span></td>
 572     <td>
 573       <ul>
 574         <li>Experiment Linkage[Trial Detail]</li>
 575       </ul>
 576     </td>
 577   </tr>
 578   <tr>
 579     <td><span class="glyphicon glyphicon-list-alt"></span></td>
 580     <td>
 581       <ul>
 582         <li>Experiment Design[Trial Detail]</li>
 583         <li>Catalog Seed Inventory[Homepage Help]</li>
 584       </ul>
 585     </td>
 586   </tr>
 587   <tr>
 588     <td><span class="glyphicon glyphicon-flash"></span></td>
 589     <td>
 590       <ul>
 591         <li>Design New Trial[Homepage Help]</li>
 592       </ul>
 593     </td>
 594   </tr>
 595   <tr>
 596     <td><span class="glyphicon glyphicon-cloud-upload"></span></td>
 597     <td>
 598       <ul>
 599         <li>Upload Data Files[Trial Detail]</li>
 600         <li>Upload Trial[Homepage Help]</li>
 601       </ul>
 602     </td>
 603   </tr>
 604   <tr>
 605     <td><span class="glyphicon glyphicon-floppy-save"></span></td>
 606     <td>
 607       <ul>
 608         <li>Compute New Phenotypes[Trial Detail]</li>
 609       </ul>
 610     </td>
 611   </tr>
 612   <tr>
 613     <td><span class="glyphicon glyphicon-pencil"></span></td>
 614     <td>
 615       <ul>
 616         <li>Record Phenotypes[Trial Detail]</li>
 617         <li>Comments[Stock Detail]</li>
 618       </ul>
 619     </td>
 620   </tr>
 621   <tr>
 622     <td><span class="glyphicon glyphicon-qrcode"></span></td>
 623     <td>
 624       <ul>
 625         <li>Barcode[Trial Detail]</li>
 626       </ul>
 627     </td>
 628   </tr>
 629   <tr>
 630     <td><span class="glyphicon glyphicon-random"></span></td>
 631     <td>
 632       <ul>
 633         <li>Pedigree[Stock Detail]</li>
 634         <li>Upload Crosses[Homepage Help]</li>
 635       </ul>
 636     </td>
 637   </tr>
 638   <tr>
 639     <td><span class="glyphicon glyphicon-flag"></span></td>
 640     <td>
 641       <ul>
 642         <li>Plan Tissue Sampling[Homepage Help]</li>
 643       </ul>
 644     </td>
 645   </tr>
 646   <tr>
 647     <td><span class="glyphicon glyphicon-tags"></span></td>
 648     <td>
 649       <ul>
 650         <li>Print Barcode Labels[Homepage Help]</li>
 651       </ul>
 652     </td>
 653   </tr>
 654   <tr>
 655     <td><span class="glyphicon glyphicon-map-marker"></span></td>
 656     <td>
 657       <ul>
 658         <li>Genotype Marker Data[Stock Detail]</li>
 659         <li>Upload VCF Genotype Data[Homepage Help]</li>
 660       </ul>
 661     </td>
 662   </tr>
 663   <tr>
 664     <td><span class="glyphicon glyphicon-retweet"></span></td>
 665     <td>
 666       <ul>
 667         <li>Related Stocks[Stock Detail]</li>
 668       </ul>
 669     </td>
 670   </tr>
 671   <tr>
 672     <td><span class="glyphicon glyphicon-grain"></span></td>
 673     <td>
 674       <ul>
 675         <li>Crosses Symbol[Manage Crosses]</li>
 676         <li>Crosses Symbol[Folder Detail]</li>
 677       </ul>
 678     </td>
 679   </tr>
 680   <tr>
 681     <td><span class="glyphicon glyphicon-signal"></span></td>
 682     <td>
 683       <ul>
 684         <li>Analysis[Trial Detail]</li>
 685       </ul>
 686     </td>
 687   </tr>
 688   <tr>
 689     <td><span class="glyphicon glyphicon-th"></span></td>
 690     <td>
 691       <ul>
 692         <li>Field Layout and Heatmap[Trial Detail]</li>
 693         <li>Add Genotyping Plate (96 or 384 well plate)[Homepage Help]</li>
 694         <li>Genotyping Plate Symbol(96 or 384 well plate)[Manage Genotyping Plates]</li>
 695         <li>Genotyping Plate Symbol(96 or 384 well plate)[Folder Detail]</li>
 696         <li>Genotyping Plates Section[Manage Tissue Samples]</li>
 697       </ul>
 698     </td>
 699   </tr>
 700   <tr>
 701     <td><span class="glyphicon glyphicon-blackboard"></span></td>
 702     <td>
 703       <ul>
 704         <li>Analyze Phenotypes[Homepage Help]</li>
 705       </ul>
 706     </td>
 707   </tr>
 708   <tr>
 709     <td><span class="glyphicon glyphicon-trash"></span></td>
 710     <td>
 711       <ul>
 712         <li>Deletion[Trial Detail]</li>
 713       </ul>
 714     </td>
 715   </tr>
 716 </table>