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/hgGateway/hgGateway.html src/hg/hgGateway/hgGateway.html
index ac22d588f5a..dd5461fa89a 100644
--- src/hg/hgGateway/hgGateway.html
+++ src/hg/hgGateway/hgGateway.html
@@ -34,74 +34,86 @@
               <div class="jwIconSprite jwIconSpriteZebrafish"></div>
               <div class="jwIconSpriteLabel">Zebrafish</div>
             </div>
             <div class="jwIconWrapper">
               <div class="jwIconSprite jwIconSpriteFly"></div>
               <div class="jwIconSpriteLabel">Fruitfly</div>
             </div>
             <div class="jwIconWrapper">
               <div class="jwIconSprite jwIconSpriteWorm"></div>
               <div class="jwIconSpriteLabel">Worm</div>
             </div>
             <div class="jwIconWrapper">
               <div class="jwIconSprite jwIconSpriteYeast"></div>
               <div class="jwIconSpriteLabel">Yeast</div>
             </div>
-            <br>Search through thousands of genome browsers
+            <br>Search through thousands of genome assemblies
             <div>
               <input id="speciesSearch" value="" size=42>
             </div>
             <a href="/assemblySearch.html" id="assemblySearchLink" style="text-decoration: none;">
                 <div style="padding: 0px; display: flex; align-items: center; margin-top: 12px;">
                     <p style="margin: 0; padding-right: 0px; color: blue; text-decoration: underline;"
                        title="Not finding your assembly on the Gateway page? Visit the Genome assembly search and request page to request it. Ensure you have a GCA_ or GCF_ identifier from NCBI.">Unable to find a genome? Send us a request.</p>
                     <img src="/images/magnify.png"
                          style="height: 16px; width: 16px; margin-top: 0px; margin-left: 5px;"
                          title="Not finding your assembly on the Gateway page? Visit the Genome assembly search and request page to request it. Ensure you have a GCA_ or GCF_ identifier from NCBI.">
                 </div>
             </a>
           </div>
 
-          <!-- This subsection is hidden unless hgGateway.js has a tree to draw. -->
+          <!-- Recent Genomes Panel (replaces species tree) -->
+          <div id="recentGenomesTitle" class="jwSubsectionTitle" style="display: none;">
+            Recent Genomes
+          </div>
+          <div id="recentGenomesSection" class="jwSubsectionContents" style="display: none;">
+            <div id="recentGenomesPanel">
+              <div id="recentGenomesList">
+                <!-- Recent genomes will be populated by JavaScript -->
+              </div>
+            </div>
+          </div>
+
+          <!-- Species tree underneath the recent genomes section -->
           <div id="representedSpeciesTitle" class="jwSubsectionTitle" style="display: none;">
             Commonly used assemblies
           </div>
           <div id="speciesGraphic" class="jwSubsectionContents" style="display: none;">
             <div id="sliderWidgetContainer" class="jwSliderWidget">
               <div id="sliderSvgContainer" class="jwSliderIcon">
                 <svg id="sliderSvg"
                      xmlns:svg="http://www.w3.org/2000/svg"
                      xmlns="http://www.w3.org/2000/svg"
                      version="1.1"
                      height="53"
                      width="30">
                   <rect id="sliderRectangle"
                         ry="3"
                         y="1.5"
                         x="1.5"
                         height="50"
                         width="24"
                         style="fill: none; stroke: #222222; stroke-width: 3;"></rect>
                   <path id="sliderTriangle"
                         d="m 2.5,24 0,6 4,-3 z"
                         style="fill: #222222; stroke: #222222; stroke-width: 3"></path>
                 </svg>
               </div> <!-- sliderSvgContainer -->
               <div class="jwRainbowSlider" id="rainbowSlider">
                 <!-- JS will populate this -->
               </div>
-            </div>
+            </div> <!-- sliderWidgetContainer -->
             <div class="jwSpeciesPicker" id="speciesPicker">
               <div id="speciesTreeContainer" class="jwColumn" style="overflow: visible;">
                 <svg id="speciesTree"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink">
                   <defs>
                     <!-- The y coordinates of these will be overwritten by JS. -->
                     <!-- I tried creating them in JS, but then the image style
                          url('#clipWhatever') didn't work. -->
                     <clipPath id="clipHuman">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipMouse">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
@@ -188,34 +200,34 @@
                   line {
                       stroke: #4b759d;
                       stroke-width: 1;
                   }
                   line:hover {
                       stroke-width: 2;
                   }
                   </style>
 
                   <!-- Tree inserted here by JS -->
 
                 </svg>
               </div> <!-- speciesTreeContainer -->
             </div> <!-- speciesPicker -->
 
-          </div> <!-- subsection contents -->
+          </div> <!-- speciesGraphic -->
 
-        </div>
-      </div>
+        </div> <!-- jwSectionContents -->
+      </div> <!-- selectSpeciesSection -->
 
       <div id="findPositionSection" class ="jwColumn">
         <div id="findPositionTitle" class="jwSectionTitle">
           Find Position
         </div>
         <div id="findPositionContents" class="jwSectionContents"
              style="display: none;"> <!-- To avoid empty containers jumping around, hide first. -->
 
           <div id="findPosInputContainer" style="display: inline-block;">
             <div id="selectAssemblyLabel" class="jwInputLabel">Assembly</div>
             <select id="selectAssembly">
             </select>
 
             <div class="vertSpacerAbovePosition"></div>