258a0a679ddb8d39698b72e63e0907b3a1baab35 chmalee Wed Dec 20 15:45:33 2023 -0800 Add a search bar to the home page, refs #25146 diff --git src/hg/htdocs/index.html src/hg/htdocs/index.html index 3117aa8..64e4e30 100755 --- src/hg/htdocs/index.html +++ src/hg/htdocs/index.html @@ -1,101 +1,163 @@ <!DOCTYPE html> <!--#set var="TITLE" value="UCSC Genome Browser Home" --> <!--#set var="ROOT" value="." --> <head> <meta name="description" content="UCSC Genome Browser"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="genome, genome browser, human genome, genome assembly, Blat, UCSC, bioinformatics, gene prediction, SNP, SNPs, EST, mRNA, mouse genome, rat genome, chicken genome, chimp genome, dog genome, fruitfly genome, zebrafish genome, xenopus, frog genome, rhesus, opossum, danio rerio genome, drosophila, fugu, yeast, ciona, comparative genomics, human variation, hapMap"> <link rel="stylesheet" href="../style/jWest.css"> </head> <!-- Banner --> <div id="banner" class="jwBanner"> <a class="jwAnchor" href="http://www.ucsc.edu/"> <div class="jwUcscLogoWrapper"> <img src="../images/GIlogo.png" class="jwUcscLogoWrapper"> </div> </a> <img src="../images/ucscHelixLogo.png" class="jwBannerHelixLogo"> <div class="jwBannerTitle"> Genome Browser </div> </div> <!--#include virtual="$ROOT/inc/gbPageStart.html"--> <!--#include virtual="$ROOT/redmineWidget.html" --> <div class="row" style="background:#275172;"> <div class="col-md-12"> <p class="text-center"> <a href="cgi-bin/hgTracks"><img class='text-center' src="images/genomeBrowserBanner.jpg" width="100%" height="100%" style="margin-left:0; margin-top:0;" alt="Welcome to the UCSC Genome Browser."></a> <br> <br> </p> </div> </div> <!-- hgwdev warning (if applicable) --> <!--#if expr='("$SERVER_NAME" = /hgwdev.*.ucsc.edu/ || "$SERVER_NAME" = /genome-test.*.ucsc.edu/) && "$SERVER_NAME" != /hgwdev-demo6/'--> <div id="devWarningRow" class="jwRow"> <div id="devWarningBox" class="jwWarningBox jwWarningBoxStatic" style="width: auto;"> WARNING: This is the UCSC Genome Browser development site. This website is used for testing purposes only and is not intended for general public use. Data and tools on this site are under development, have not been reviewed for quality, and are subject to change at any time. The high-quality, reviewed public site of the UCSC Genome Browser is available for use at <a href="http://genome.ucsc.edu/">http://genome.ucsc.edu/</a>. </div> </div> <!--#endif --> <!-- genome-preview warning (if applicable) --> <!--#if expr='"$SERVER_NAME" = /genome-preview.*.ucsc.edu/' --> <div id="previewWarningRow" class="jwRow"> <div id="previewWarningBox" class="jwWarningBox jwWarningBoxStatic" style="width: auto;"> WARNING: This is the UCSC Genome Browser preview site. This website is a weekly mirror of our internal development server for public access. Data and tools on this site are under development, have not been reviewed for quality, and are subject to change at any time. We provide this site for early access, with the warning that it is less available and stable than our public site. The high-quality, reviewed public site of the UCSC Genome Browser is available for use at <a href="http://genome.ucsc.edu/">http://genome.ucsc.edu/</a>. </div> <!-- previewWarningBox --> </div> <!-- previewWarningRow --> <!--#endif --> <!-- warning for mirrors (if applicable) --> <!--#if expr='"$SERVER_NAME" != /.*.ucsc.edu/ && "$SERVER_NAME" != /.*.sdsc.edu/ && "$SERVER_NAME" != /browser/'--> <!-- 'browser' = GBiB --> <p style="text-align: center;"> <strong>This website <em><!--#echo var="HTTP_HOST" --></em> is a "mirror" not run by UCSC.</strong> If you have questions, please try to contact the person who manages this mirror. <br><br> <strong>If you write the UCSC mailing list, please include this mirror's address <em>http://<!--#echo var="HTTP_HOST" --></em> with any questions.</strong></p> <!--#endif --> + <p style="text-align: center;"> + <input size=50 name="searchString" id="searchBarSearchString" type="text" + placeholder="Search genes, data, help docs and more..."></input> + <input name="searchButton" id="searchBarSearchButton" type="submit" value="Search"></input> + <script> + function searchBarClick() { + searchStr = document.getElementById('searchBarSearchString').value; + if (searchStr.length > 0) { + // helper functions for checking whether a plain chrom name was searched for + term = encodeURIComponent(searchStr.replace(/^[\s]*/,'').replace(/[\s]*$/,'')); + function onSuccess(jqXHR, textStatus) { + if (jqXHR.chromName !== null) { + window.location.assign("../cgi-bin/hgTracks?position=" + term ); + } else { + window.location.assign("../cgi-bin/hgSearch?search=" + term); + } + } + function onFail(jqXHR, textStatus) { + window.location.assign("../cgi-bin/hgSearch?search=" + term); + } + + // redirect to search disambiguation page if it looks like we didn't enter a regular position: + var canonMatch = searchStr.match(canonicalRangeExp) + var gbrowserMatch = searchStr.match(gbrowserRangeExp); + var lengthMatch = searchStr.match(lengthRangeExp); + var bedMatch = searchStr.match(bedRangeExp); + var sqlMatch = searchStr.match(sqlRangeExp); + var singleMatch = searchStr.match(singleBaseExp); + var positionMatch = canonMatch || gbrowserMatch || lengthMatch || bedMatch || sqlMatch || singleMatch; + + // the following encodes the cartJson cmd as a query string, skipping reliance + // on hgTracks.js:cart:varsToUrlData() + const url = new URL(window.location.href); + const params = new URLSearchParams(url.search); + params.append("cjCmd", '{"getChromName": {"searchTerm": "' + term + '"}}'); + if (positionMatch === null) { + // user may have entered a full chromosome name, check for that asynchronosly: + $.ajax({ + type: "GET", + url: "../cgi-bin/hgSearch", + data: params.toString(), + dataType: "json", + trueSuccess: onSuccess, + success: onSuccess, + error: onFail, + cache: true + }); + return false; + } + + } + } + document.getElementById('searchBarSearchButton').addEventListener('click', searchBarClick); + $('#searchBarSearchString').bind('keypress', function(e) { // binds listener to url field + if (e.which === 13) { // listens for return key + e.preventDefault(); // prevents return from also submitting whole form + searchBarClick(); + } + }); + </script> + </p> + <div class="row"> <!-- Tools --> <!--#include virtual="ourTools.html"--> <!-- Latest Releases --> <!--#include virtual="indexReleases.html"--> </div> <!-- Meetings and Workshops --> <!--#include virtual="indexMeetings.html"--> <div class="row"> <!-- Sharing --> <!--#include virtual="indexSharing.html"--> <!-- Training --> <!--#include virtual="indexTraining.html"--> </div> <!--#include virtual="$ROOT/inc/gbPageEnd.html"-->