1b93ecbcf4117e938f8c1050ed32ef1a0876156a
brianlee
  Wed Jun 29 06:58:58 2022 -0700
Rearranging info. sections about configuration options to match the order they appear, and adding image display for next/previous gray/white arrows, no RM

diff --git src/hg/htdocs/goldenPath/help/hgTracksHelp.html src/hg/htdocs/goldenPath/help/hgTracksHelp.html
index 77546fe..eab08cd4 100755
--- src/hg/htdocs/goldenPath/help/hgTracksHelp.html
+++ src/hg/htdocs/goldenPath/help/hgTracksHelp.html
@@ -660,63 +660,69 @@
 The item labels (or track label, when viewed in dense mode) are displayed to the left of the 
 annotation image. The width of this area is set to 17 characters by default. To change the width, 
 edit the value in the <em>label area width</em> text box on the Track Configuration page, then click
 <em>Submit</em>.</p>
 
 <h3>Changing the text size, font, in the annotation track image</h3>
 <p>
 The annotation track image may be adjusted to display text in a range of fonts from
 AvantGarde, Courier, and Times. To change the size of the text, select an option from
 the <em>text size</em> pull-down menu on the Browser Configuration page, which you can
 find under the top blue &quot;Genome Browser&quot; menu by clicking <a target="_blank"
 href="/cgi-bin/hgTracks?hgTracksConfigPage=configure"><em>Configure</em></a>.
 Once you have made your selection, which can also include <em>style</em> click <em>submit</em>.
 The text size is set to &quot;12&quot; and &quot;Helvetica&quot; by default.</p>
 
-<h3>Hiding the annotation track labels</h3>
-<p>
-The track and element labels displayed above and to the left of the tracks in the annotation tracks 
-image may be hidden from view by unchecking the <em>Display track descriptions above each track</em>
-and <em>Display labels to the left of items in tracks</em> boxes, respectively, on the Track 
-Configuration page.</p>
-
-<h3>Hiding the display grid on the annotation tracks image</h3>
-<p>
-The light blue vertical guidelines on the annotation tracks image may be removed by unchecking the 
-<em>Show light blue vertical guidelines</em> box on the Track Configuration page.</p>
-
 <h3>Hiding the chromosome ideogram</h3>
 <p>
 The chromosome ideogram, located just above the annotation tracks image, provides a graphical 
 overview of the features on the selected chromosome, including its bands, the position of the 
 centromere, and an indication of the region currently displayed in the annotation tracks image. To 
 hide the ideogram, uncheck the <em>Display chromosome ideogram above main graphic</em> box on the 
 Tracks Configuration page.</p>
 
-<h3>Enabling item and exon navigation</h3>
+<h3>Hiding the light blue vertical guidelines</h3>
+<p>
+The light blue vertical guidelines on the annotation tracks image may be removed by unchecking the
+<em>Show light blue vertical guidelines</em> box on the Track Configuration page.</p>
+
+<h3>Hiding the annotation track labels and description</h3>
+<p>
+The track and element labels displayed above and to the left of the tracks in the annotation tracks
+image may be hidden from view by unchecking the <em>Display track descriptions above each track</em>
+and <em>Display labels to the left of items in tracks</em> boxes, respectively, on the Track
+Configuration page.</p>
+
+<h3 id="nextItem">Enabling next/previous item and exon navigation</h3>
 <p>
 When the <em>Next/previous item navigation</em> configuration option is toggled on, on the Track 
 Configuration page,  gray double-headed arrows display in the Genome Browser tracks image on both 
 sides of the track labels of gene, mRNA and EST tracks (or any standard tracks based on BED, PSL or 
 genePred format). Clicking on the gray arrows shifts the image window toward that end of the 
 chromosome so that the next item in the track is displayed. Similarly, the <em>Next/previous exon 
 navigation</em> configuration option displays white double-headed arrows on the end of any item that
 extends off the edge of the current image. Clicking on one of the white arrows shifts the image 
 window to the next exon in the indicated direction, unless the image window interrupts an exon, in 
 which case the window shifts to the edge of the current exon. If the image window happens to be 
 within a 5' or 3' UTR, then clicking the arrows shifts the image window towards the start or end of 
 the next coding region, not the end of the exon.</p>
+<div class="text-center">
+  <a href ="/cgi-bin/hgTracks?db=hg38&position=chr10:67,881,992-67,890,592&hideTracks=1&knownGene=pack&omimAvSnp=pack&nextItemArrows=1">
+  <img src="../../images/nextItem.png" alt="Ex. white/gray arrows for next/previous exon/item" width="700"></a>
+  <p class="gbsCaption text-center">Gray arrows jump to the next item,
+  while white arrows advance to the next exon.</p>
+</div>
 
 <a name="RIGHT_CLICK_NAV"></a>
 <h3>Using the right-click navigation feature</h3>
 <p>
 Several of the common display and navigation operations offered on the Genome Browser tracks page 
 may be quickly accessed by right-clicking on a feature on the tracks image and selecting an option 
 from the displayed popup menu.</p>
 <div class="text-center">
   <a href ="/cgi-bin/hgTracks?db=hg38&position=chr21%3A31657975-31667213&hgt.reset=1&hgFind.matches=ENST00000270142.11&knownGene.show.noncoding=0&knownGene.show.spliceVariants=0">
   <img src="../../images/right_click_example.png" alt="Example right-click to highlight a gene" width="700">
   </a>
 </div>
 <p>
 Depending on context, the right-click feature allows the user
 to:</p>