47ea57080b515e5dad5f658c58feb8944a7e7d61
chmalee
  Thu Jan 29 15:30:26 2026 -0800
Replace clade/assembly dropdowns with a search bar on most CGIs. Add a recents list to hgGateway and to the species bar and to the 'Genomes' dropdown menu. Track recently selected species in localStorage. Add toGenome and fromGenome arguemnts to hubApi/liftOver in order to find appropriate liftover assemblies, refs #36232

diff --git src/hg/htdocs/inc/hgSearch.html src/hg/htdocs/inc/hgSearch.html
index 00d5de1e9e1..8670e212c50 100644
--- src/hg/htdocs/inc/hgSearch.html
+++ src/hg/htdocs/inc/hgSearch.html
@@ -50,59 +50,120 @@
     padding-top: 5px;
 }
 
 .ulNoStyle {
     padding-left: 0;
 }
 
 .selectSpecies {
     max-width: 100%;
 }
 
 .selectDb {
     max-width: 100%;
 }
 
+.genomeSearch {
+    box-sizing: border-box;
+}
+
+.searchStep {
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background-color: #fafafa;
+}
+
+.stepLabel {
+    font-weight: bold;
+    margin-bottom: 8px;
+    color: #333;
+}
+
+.currentGenomeLabel {
+    margin-top: 8px;
+    font-size: 14px;
+    color: #555;
+}
+
+.currentGenomeLabel::before {
+    content: "Currently selected: ";
+    font-weight: bold;
+}
+
+/* for autocompleteCat (autocomplete with optional category labels) */
+.ui-autocomplete-category {
+    font-weight: bold;
+    line-height: 1.5;
+    background: lightgray;
+}
+
+.ui-menu-item {
+    /* This is necessary if a background color is specified in .ui-autocomplete-category above;
+     * the category labels actually extend upwards, behind the preceding items! */
+    background: white;
+}
+
 #grid {
     width: 100%;
     display: grid;
     grid-template-columns: minmax(150px,400px) 1fr;
     gap: 25px;
     padding-left: 15px;
 }
 
 .selectWrap {
     min-width: 0;
+    display: flex;
+    width: 90%;
+    position: relative;
+}
+
+.selectWrap input[type="text"] {
+    flex: 1;
+}
+
+#spinner {
+    position: absolute;
+    right: -25px;
+    top: 2px;
 }
 </style>
 
 <div id="grid">
     <div>
         <div class='gbSectionBanner searchTitle'>Search across the Genome Browser site</div>
         <div class="headerSpacer"> </div>
-        Search<br>
+        <div class="searchStep">
+            <div class="stepLabel">Step 1: Select a Genome</div>
             <div class="selectWrap">
-            <select name="speciesSelect" id="speciesSelect" class="selectSpecies"></select>
+                <input type="text" id="genomeSearchInput" class="genomeSearch" placeholder="Search for species or assembly..." />
+                <input type="submit" id="genomeSearchButton" value="Change Genome" />
+            </div>
+            <div id="currentGenome" class="currentGenomeLabel">
+                <!-- Shows currently selected genome, populated by JS -->
             </div>
+        </div>
+        <div class="searchStep">
+            <div class="stepLabel">Step 2: Search for a Term</div>
             <div class="selectWrap">
-            <select name="dbSelect" id="dbSelect" class="selectDb"></select>
+                <input name="searchString" id="searchBarSearchString" type="text" placeholder="TP53" />
+                <input name="searchButton" id="searchBarSearchButton" type="submit" value="Search" />
             </div>
-        for
-        <div class="rowSpacer"></div>
-        <input name="searchString" id="searchBarSearchString" type="text" placeholder="TP53"></input>
-        <input name="searchButton" id="searchBarSearchButton" type="submit" value="Search"></input>
             <a href="../../goldenPath/help/query.html">Examples</a>
+        </div>
         <p>Use the tree to hide/show results from only these categories. Hover your mouse over each category for an explanation:</p>
         <div id="searchCategories"> <!-- this will get populated by the javascript later -->
         </div>
     </div>
     <div>
         <div id="searchResultsBar" class="gbSectionBanner">Search Results
             <span id="dbPlaceholder"></span>
         </div>
         <div id="searchResults" class="headerSpacer">
         </div>
     </div>
 </div> <!-- grid -->
 <div class="container-fluid">
 <div class="help-text gbsPage">
   <div class="row"></div>