af3a143571e5aa064eab75c34f9444b35413b562
chmalee
  Tue Nov 30 15:28:15 2021 -0800
Add snippet support to trix searching. Required changing the
wordPos from the first highest matching wordIndex to the
wordIndex of the actual span. Have trixContextIndex create a
second level index for fast retrieval of line offsets in
original text file used by ixIxx. Create a simple UI for navigating
hgFind search results.

diff --git src/hg/htdocs/inc/searchExample.html src/hg/htdocs/inc/searchExample.html
new file mode 100644
index 0000000..ac7c997
--- /dev/null
+++ src/hg/htdocs/inc/searchExample.html
@@ -0,0 +1,76 @@
+<style>
+.modal {
+    display:    none;
+    position:   fixed;
+    z-index:    10000;
+    top:        0;
+    left:       0;
+    height:     100%;
+    width:      100%;
+    background: rgba( 255, 255, 255, 0.5 ) 
+                50% 50% 
+                no-repeat;
+}
+
+/* When the body has the loading class, we turn
+   the scrollbar off with overflow:hidden */
+body.loading {
+    overflow: hidden;   
+}
+
+/* Anytime the body has the loading class, our
+   modal element will be visible */
+body.loading .modal {
+    display: block;
+}
+
+.jstree-anchor {
+    height: auto !important;
+    white-space: normal !important;
+}
+
+.liNoStyle {
+    list-style-type: none;
+}
+
+.showMoreDiv {
+    display: inline;
+}
+
+.headerSpacer {
+    padding-top: 15px;
+}
+
+.ulNoStyle {
+    padding-left: 0;
+}
+</style>
+
+<div class='container-fluid'>
+    <div class="row"> <!-- for some reason this empty row div is necessary to get two columns? -->
+    </div>
+    <div class="row">
+        <div class="col-lg-4">
+            <div class='gbSectionBanner searchTitle'>Search across the Genome Browser site
+            </div>
+            <div class='headerSpacer'>
+                <input size=50 name='searchString' id='searchBarSearchString' type='text' placeholder='bigWig'></input>
+                <input name='searchButton' id='searchBarSearchButton' type='submit' value='Search'></input>
+            </div>
+            <p>Limit search results to only these categories, hover your mouse over each category for an explanation:</p>
+            <div id='searchCategories' style='overflow-y:auto'> <!-- this will get populated by the javascript later -->
+            </div>
+            <div class='gbSectionBanner searchTitle'>Filter results
+            </div>
+            <p class='headerSpacer'>Filter results based on subcategories. Deselect a checkbox to hide results from that group.</p>
+            <div id='searchFilters' style='overflow-y:auto'> <!-- this will get populated by the javascript later -->
+            </div>
+        </div>
+        <div class="col-lg-8">
+            <div class='row gbSectionBanner'>Search Results
+            </div>
+            <div id='searchResults' class='row headerSpacer' style='overflow-y:auto'>
+            </div>
+        </div>
+    </div> <!-- row -->
+</div> <!-- gbPage -->