b44df11903f0c8537dc9d716df324906bc89f92b
lrnassar
  Thu Jun 15 13:21:32 2023 -0700
Adding documentation supporting snakes rearrangement display, refs #31241

diff --git src/hg/htdocs/goldenPath/help/chain.html src/hg/htdocs/goldenPath/help/chain.html
index a8ce96e..cf1b183 100755
--- src/hg/htdocs/goldenPath/help/chain.html
+++ src/hg/htdocs/goldenPath/help/chain.html
@@ -74,16 +74,39 @@
 <pre>    <em>size</em> <em>dt</em> <em>dq</em></pre>
 <ul> 
   <li> 
   <strong><code>size</code></strong> -- the size of the ungapped alignment</li>
   <li> 
   <strong><code>dt</code></strong> -- the difference between the end of this block and the beginning of 
   the next block (reference/target sequence)</li>
   <li> 
   <strong><code>dq</code></strong> -- the difference between the end of this block and the beginning of 
   the next block (query sequence)</li>
 </ul> 
 <p> 
 NOTE: The last line of the alignment section contains only one number: the ungapped alignment size 
 of the last block.</p>
 
+<a name="rearrangement"></a> 
+<h3>&quot;Snake&quot; rearrangement display</h3>
+<p>
+Rearrangement display, sometimes called snakes display, is an alternative way to view pairwise alignemnts.
+It is available for PSL and chain format tracks.</p>
+<p>
+Rearrangement display is a representation of the path that the sequence follows in the &quot;other&quot; sequence. 
+You start in the upper left and move to the right, following the lines if you come to the end of a block. If a block 
+is red, which means it is a match on the negative strand, then you reverse your course and start going from right to left.
+The gray lines mean there are no bases in the other sequence between the blocks. Orange lines means there are some 
+bases in there that are not aligning.</p>
+<p>The display type can be enabled on the track configuration page of eligible tracks. Below are two examples for clarity.</p>
+<p>
+<div class="text-left">
+  <img src="../../images/rearrangementExample1.png" alt="Rearrangement display example 1" width='55%'>
+</div><br>
+This example shows a tandem duplication on CDH1 which duplicates 3 exons.</p>
+<p>
+<div class="text-left">
+  <img src="../../images/rearrangementExample2.png" alt="Rearrangement display example 2" width='55%'>
+</div><br>
+This example shows a polymorphic inversion, which can be identified by the red colored sequence.</p>
+
 <!--#include virtual="$ROOT/inc/gbPageEnd.html" -->