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
@@ -1,271 +1,283 @@
     <!-- For determining width of scrollbar (if there is one) -->
     <div id="sbTestContainer">
       <div id="sbTestContainerDPlain"></div>
       <div id="sbTestContainerDScroll" style="overflow: scroll;">
         <div id="sbTestContainerDInsideScroll"></div>
       </div>
     </div>
 
     <div id="pageContent">
 
       <div id="selectSpeciesSection" class="jwColumn" style="width: 450px;">
         <div class="jwSectionTitle">
           Browse/Select Species
         </div>
         <div class="jwSectionContents">
 
           <div id="popSpeciesTitle" class="jwSubsectionTitle">
             Popular Species
           </div>
           <div class="jwSubsectionContents">
             <div class="jwIconWrapper">
               <div class="jwIconSprite jwIconSpriteHuman"></div>
               <div class="jwIconSpriteLabel">Human</div>
             </div>
             <div class="jwIconWrapper">
               <div class="jwIconSprite jwIconSpriteMouse"></div>
               <div class="jwIconSpriteLabel">Mouse</div>
             </div>
             <div class="jwIconWrapper">
               <div class="jwIconSprite jwIconSpriteRat"></div>
               <div class="jwIconSpriteLabel">Rat</div>
             </div>
             <div class="jwIconWrapper">
               <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>
                     <clipPath id="clipFly">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipWorm">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipYeast">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipMonkey">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipHedgehog">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipPig">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipCow">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipOrca">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipHorse">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipDog">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipWalrus">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipBat">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipElephant">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipManatee">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipArmadillo">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipKangaroo">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipBird">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipLizard">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipFrog">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipFish">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipEbola">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                   </defs>
                   <style>
                   text {
                       stroke:none;
                       fill: black;
                       font-size: 12px;
                       text-anchor: end;
                       letter-spacing: 0.025em;
                       cursor: pointer;
                   }
                   text:hover, text.selected {
                       fill: #31469A; /* rainbow dark blue: */
                       font-weight: bold;
                   }
                   text.trackHubsLink {
                       text-anchor: start;
                   }
                   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>
 
             <div class="jwInputLabel">
               Position/Search Term
               <span style="font-size: smaller">
                 (<a href="../../goldenPath/help/query.html">Examples</a>)
               </span>
             </div>
             <input id="positionInput" value="" size="40">
             <div class="jwCurrentPos">
               Current position:
               <span id="positionDisplay" class="jwPosDisplay"></span>
               <i id="copyPosition" class="fa fa-copy jwTextBlue"
                  title="Copy the current position into the input above"></i>
             </div>
           </div>
 
           <div class="jwGoButtonContainer"
                title="Go to the Genome Browser">
             <div class="jwGoButton">
               GO
             </div>
             <i class="jwGoIcon fa fa-play fa-2x"></i>
           </div>
 
           <div id="surveyContainer" class="jwSurveyContainer"></div>
 
           <div class="vertSpacerBelowPosition jwClearBoth"></div>
 
           <div id="descriptionTitle" class="jwDescriptionTitle">
             <div class="jwFloatLeft">
               <b><span id="descriptionGenome"></span> Genome Browser</b> -
               <span id="descriptionDb"></span> assembly
             </div>
             <div class="jwFloatRight" style="margin-left: 5px;">
               <a id="chromInfoLink" class="jwAnchor" href="hgTracks?chromInfoPage=&hgsid=$hgsid">
                 <div class="jwWhiteButton">
                   View sequences
                 </div>
               </a>
             </div>
             <div class="jwClearBoth"></div>
           </div>
           <div id="descriptionText" class="jwDescriptionText">
           </div>
 
         </div>
       </div>
 
     </div>
 
     <div style="clear: both;"></div>