` + `Open in browser` + `Open in new tab

` + - `

` + + `

` + `

Alignment

` + - `

` + + `` + `View alignment

`; if (typeof convertTitleTagsToMouseovers === 'function') { convertTitleTagsToMouseovers(); } } function blatSet(id, prop, val) { var e = document.getElementById(id); if (!e) { return; } if (prop === 'text') { e.textContent = val; } - else if (prop === 'html') { e.innerHTML = val; } else if (prop === 'href') { e.setAttribute('href', val); } else if (prop === 'color') { e.style.color = val; } } function blatRenderDetail(hit) { if (!hit || !document.getElementById('blatDetail')) { return; } if (!document.getElementById('dvScore')) { blatDetailSkeleton(); } var idc = blatIdColor(hit.identity); - var locus = hit.locusText ? htmlEncode(hit.locusText) + ' · ' : ''; - var q = hgBlatData.config.multiQuery ? htmlEncode(hit.qName) + ' · ' : ''; - blatSet('dvLoc', 'html', - `#${hit.rank} · ${q}${locus}${htmlEncode(hit.chrom)}:${blatFmt(hit.tStart)}-${blatFmt(hit.tEnd)}`); + // Location line is plain text, so set it via textContent (blatSet 'text') - no HTML, nothing to + // escape. q and locus stay raw here for that reason. + var locus = hit.locusText ? hit.locusText + ' · ' : ''; + var q = hgBlatData.config.multiQuery ? hit.qName + ' · ' : ''; + blatSet('dvLoc', 'text', + `#${hit.rank} · ${q}${locus}${hit.chrom}:${blatFmt(hit.tStart)}-${blatFmt(hit.tEnd)}`); blatSet('dvScore', 'text', blatFmt(hit.score)); blatSet('dvIdentity', 'text', hit.identity.toFixed(1) + '%'); blatSet('dvIdentity', 'color', idc); blatSet('dvMatches', 'text', blatFmt(hit.matches)); blatSet('dvMismatch', 'text', blatFmt(hit.misMatch)); blatSet('dvGaps', 'text', blatFmt(hit.gaps)); blatSet('dvBlocks', 'text', blatFmt(hit.blocks)); blatSet('dvStrand', 'text', hit.strand); blatSet('dvQspan', 'text', blatFmt(hit.qStart) + '–' + blatFmt(hit.qEnd)); blatSet('dvBrowser', 'href', hit.browserUrl); blatSet('dvNewTab', 'href', hit.newTabUrl); // Show the Alignment box whenever a base-by-base alignment page is available (htcUserAli on a // fresh search, htcBlatAlign on a shared-link reopen); hide it only if detailsUrl is missing. var alignBox = document.getElementById('dvAlignBox'); if (alignBox) { alignBox.style.display = hit.detailsUrl ? '' : 'none'; } @@ -411,31 +264,31 @@ } // ---- share a link -------------------------------------------------------- function blatShareLink() { // No session, no AJAX: the results page already has a stable, shareable URL (hgBlat.c emits it as // cfg.shareUrl and blatBuild() pins it into the address bar with history.replaceState), so this // just shows/copies window.location. The link reopens straight from the trash .pslx/.fa, so it // works until those trash files are cleaned - hence the retention note. var box = document.getElementById('blatShareBox'); if (!box) { return; } if (box.style.display === 'flex') { box.style.display = 'none'; return; } // toggle off var url = window.location.href; box.style.display = 'flex'; box.innerHTML = - 'Shareable link — anyone with it can reopen ' + + 'Shareable link — anyone with it can reopen ' + 'these results. The results are stored temporarily, so the link works for at least 48 hours ' + 'after they were last viewed.' + '' + ''; var inp = document.getElementById('blatShareInput'); inp.value = url; inp.focus(); inp.select(); $('#blatShareCopy').on('click', function() { inp.select(); if (navigator.clipboard) { navigator.clipboard.writeText(url); } else { document.execCommand('copy'); } this.textContent = 'Copied'; }); } @@ -554,31 +407,30 @@ box.style.display = 'none'; }); } function blatShowQuerySeq() { var box = document.getElementById('blatSeqBox'); if (box.style.display === 'flex') { box.style.display = 'none'; return; } // toggle off blatShowFasta(box, hgBlatData.config.querySeqs, 'blatQuery.fa'); } // ---- build --------------------------------------------------------------- function blatBuild() { var cfg = hgBlatData.config; var hits = hgBlatData.hits; - blatInjectStyle(); // Pin a stable, shareable URL into the address bar (no server redirect) so refresh, bookmark and // "Share a link" all use the trash-backed reopen link instead of the transient POST/search URL. if (cfg.shareUrl) { try { history.replaceState(null, '', cfg.shareUrl); } catch (e) { /* older browsers: ignore */ } } var back = cfg.backUrl ? `Back to Genome Browser` : ''; // The page actions live in the gold main-header bar (framework #sectTtl), next to the title - // so there is no separate toolbar (.blatHead is gone). Injected into #sectTtl below. var headActions = `${back}New BLAT search`; @@ -602,31 +454,31 @@ th.push('Show'); th.push('Query coverage'); if (cfg.hasLocus) { th.push('Locus'); } th.push('Score'); th.push('Identity'); th.push('Strand'); th.push('Span'); // detail dock sits above the table: with long hit lists a bottom dock scrolls out of view document.getElementById('blatResults').innerHTML = bannerHtml + `

${blatSummaryStrip(cfg, queryCount)}` + `` + `` + `

` + - `${th.join('')}

` + + `${th.join('')}

` + (cfg.canRename ? blatRenameModalHtml(cfg) : ''); // Put the page actions in the gold main-header bar, to the right of the title (framework #sectTtl). var sectTtl = document.getElementById('sectTtl'); if (sectTtl) { var acts = document.createElement('span'); acts.className = 'blatHeadActions'; acts.innerHTML = headActions; sectTtl.appendChild(acts); } $('#blatShareBtn').on('click', blatShareLink); $('#blatSeqBtn').on('click', blatShowQuerySeq); blatWireRename(); @@ -674,20 +526,374 @@ // every draw, as it re-scans the whole document and adds global listeners on each call. dt.on('draw', function() { if (blatSelectedRank !== null) { blatSelect(dt, blatSelectedRank); } }); // No hit is pre-selected: several hits are often tied on score/identity, so picking one for the // user is misleading. The detail panel shows a prompt until a row is clicked. document.getElementById('blatDetail').innerHTML = `

Click a hit below to see its alignment details. ` + `If you are missing matches that you think should be there, ` + `read our BLAT FAQ or ` + `contact us.

`; blatApplyTooltips(); } +// ==== search form (the input page) ======================================== +// hgBlat.c emits var hgBlatFormData = {...} together with a real

that +// contains an empty

and the C-generated genome search bar. We build the +// controls as real form fields *inside that form*, so the browser serializes them natively - +// including the file input - and Submit / I'm feeling lucky / Clear stay plain submit buttons +// handled by the existing C code. There is no shadow form and no copying of values on submit. +// Styling comes from hgBlat.css (loaded by webIncludeResourceFile in hgBlat.c), shared with the results page. + +// The Genome Browser's standard info icon, copied from printInfoIconSvg() in hg/lib/hui.c so the +// form's icons are pixel-identical to the C-rendered ones elsewhere in the browser. +var BLAT_INFO_SVG = + ""; + +// The assembly-search syntax help. setupGenomeSelector hides the info icon that +// printGenomeSearchBar (hg/lib/web.c) normally puts next to the box, so the new form loses that +// explanation of +word/-word/word*/"phrase"; we re-attach it to an icon after the label instead. +// Kept word-for-word in sync with searchHelpText in web.c so both pickers explain the box the same +// way. This is HTML (a bullet list), rendered as such by the mouseover, so it is NOT htmlEncode'd - +// like the C printInfoIcon, it relies on the string containing no double quotes to sit in a title=. +var BLAT_GENOME_SEARCH_HELP = + "All genome searches are case-insensitive. Single-word searches default to prefix " + + "matching if an exact match is not found. " + + "

Force inclusion: Use a + sign before +word to ensure it appears in result.
Exclude words: Use a - sign before -word to exclude it from the search result.
Wildcard search: Add an * (asterisk) at end of word* to search for all terms starting with that prefix.
Phrase search: Enclose 'words in quotes' to search for the exact phrase.

"; + +// Cross-session memory of the "Keep results" checkbox. A plain '1'/'0' string under one key; +// wrapped in try/catch because localStorage throws in private-mode / disabled-storage browsers, in +// which case we simply fall back to the cart-supplied default and skip persistence. +var BLAT_KEEP_RESULTS_KEY = 'blatKeepResults'; + +function blatGetKeepResultsPref() { + // Returns true/false for a stored preference, or null if the user has never set one here. + try { + var v = localStorage.getItem(BLAT_KEEP_RESULTS_KEY); + return v === null ? null : (v === '1'); + } catch (e) { return null; } +} + +function blatSetKeepResultsPref(on) { + try { localStorage.setItem(BLAT_KEEP_RESULTS_KEY, on ? '1' : '0'); } catch (e) { /* ignore */ } +} + +function blatOpts(list, cur) { + return list.map(function(v) { + return ``; + }).join(''); +} + +function blatFormCount() { + // Live character count under the textarea. Only these two nodes are touched on input - the + // textarea itself is never re-rendered, so the caret stays where the user put it. + var ta = document.getElementById('blatUserSeq'); + var out = document.getElementById('blatCountText'); + if (!ta || !out) { return; } + var n = ta.value.replace(/[^A-Za-z*]/g, '').length; + out.textContent = blatFmt(n) + ' of 25,000 characters'; + $('#blatLimitLink').toggleClass('over', n > 25000); +} + +function blatFormTab(showUpload) { + $('#blatTabPaste').toggleClass('on', !showUpload); + $('#blatTabUpload').toggleClass('on', showUpload); + $('#blatPanePaste').toggle(!showUpload); + $('#blatPaneUpload').toggle(showUpload); +} + +function blatFormLimitsModal() { + var row = (k, v) => `

${k}${v}

`; + return ''; +} + +function blatFormSetDb(db) { + // Called by hgBlat.c's setupGenomeSearchBar onSelect. Picking a genome does not reload the + // page, so everything on it that depends on db is updated here instead: the hidden field that + // the search is submitted with, and the sidebar links that carry a db= parameter. The current + // assembly label is updated by setupGenomeSearchBar itself. + document.mainForm.db.value = db; + $('#blatFormBox a[data-urltpl]').each(function() { + this.href = this.getAttribute('data-urltpl').replace('$DB$', encodeURIComponent(db)); + }); +} + +function blatFormSidebar(cfg) { + // Same links the classic page offered. hgBlat.c supplies them as templates holding $DB$ (see + // blatFormSetDb); the template is kept in data-urltpl so the link can be retargeted later. + var tools = ''; + var tplLink = (tpl, label) => { + var href = tpl.replace('$DB$', encodeURIComponent(hgBlatFormData.db)); + return `${label}`; + }; + if (cfg.pcrUrlTpl) { + tools += `

${tplLink(cfg.pcrUrlTpl, 'In-Silico PCR')} — better than BLAT for ` + + 'locating PCR primers.

'; + } + if (cfg.oligoMatchUrlTpl) { + tools += `

${tplLink(cfg.oligoMatchUrlTpl, 'Short Sequence Match')} — for ` + + 'sequences under 20 bp, within the region shown in the Genome Browser.

'; + } + tools += '

' + + 'findMotifs — command-line search across a whole genome.

'; + return '

' + + (tools ? `

Similar tools

${tools}

` : '') + + '

Help

' + + '

BLAT FAQ

' + + '

BLAT documentation

' + + // No "Search all genomes FAQ" here: that link now lives in the "Search many genomes" + // tooltip, next to the checkbox it actually explains. + '

Programmatic / batch BLAT

' + + '

About BLAT

' + + '

DNA BLAT quickly finds sequences of 95% and greater similarity that are at least 25 bases ' + + 'long; it finds perfect matches down to 20 bases, and may miss shorter or more divergent ' + + 'alignments. Protein BLAT finds sequences of 80% and greater similarity at least 20 amino acids ' + + 'long.

' + + '

Kent WJ. ' + + 'BLAT — the BLAST-like alignment tool. Genome Res. 2002 Apr;12(4):656-64.

' + + '

'; +} + +function blatFormBuild() { + var cfg = hgBlatFormData; + + var banner = ''; + if (cfg.classicUrl) { + banner = '

We are testing a new BLAT search page. You can go back to ' + + `the original page anytime. If you have feedback ` + + 'on this new page, do not hesitate to let us know via ' + + 'genome@soe.ucsc.edu.

'; + } + + // Checkbox plus the browser's standard info icon. Same SVG and same title + + // convertTitleTagsToMouseovers mechanism as printInfoIcon()/printInfoIconSvg() in hg/lib/hui.c, + // so these read identically to the info icons on every other Genome Browser page. + var check = (name, on, label, tip) => + `${label}` + + `${BLAT_INFO_SVG}`; + + // "Keep results" starting state. The cart (cfg.keepResults) only remembers the choice within a + // session; localStorage carries it across sessions so a user who wants their BLAT results to + // accumulate does not have to re-tick the box on every visit. localStorage wins when set (it is + // the more durable record of the user's own preference); the cart is the fallback for a browser + // that has never stored one. Only consulted where the box is actually shown (blatOldTracks= + // delete); elsewhere the choice has no effect, so there is nothing worth persisting. + var keepResultsInit = cfg.keepResults; + if (cfg.showKeepResults) { + var storedKeep = blatGetKeepResultsPref(); + if (storedKeep !== null) { keepResultsInit = storedKeep; } + } + + document.getElementById('blatFormBox').innerHTML = + banner + + '

' + + + '

Search – type keywords to find the target assembly

' + + '

Genome or assembly ' + + `${BLAT_INFO_SVG}` + + '' + + '

' + + `Query type` + + // Sort and output are submitted but not offered: sorting by anything other than score + // is rarely useful, and this page always wants the hyperlink (results table) output. + // Kept as hidden fields so the request hgBlat receives is unchanged. + `` + + `` + + '

' + + + '

' + + // The mouseover popup keeps itself open while the pointer is inside it (see the + // mouseoverContainer mouseenter handler in utils.js), and renders its text as HTML, so + // a link in the tip is genuinely clickable. htmlEncode keeps the title attribute + // well-formed; the browser decodes it back to markup before it is injected. + check('allGenomes', cfg.allGenomes, 'Search many genomes', + 'Runs the same query against every default assembly and attached hub that has a ' + + 'dedicated BLAT server. Dynamic BLAT servers are skipped and listed as such in the ' + + "output. See our BLAT All FAQ " + + 'for more information.') + + check('allResults', cfg.allResults, 'No min. score', + 'Turns off minimum-match filtering so every alignment is returned. A human DNA search ' + + 'normally requires 20 matching bases, based on the genome size, to filter out ' + + 'lower-quality results; useful for short queries and the tiny genomes of ' + + 'microorganisms.') + + check('autoRearr', cfg.autoRearr, 'Show rearrangements', + 'Shows duplications of the query sequence using multiple lines with connecting lines ' + + 'between fragments, and displays inversions better (the "snakes" display). Can also ' + + 'be switched on or off from the BLAT track configuration page.') + + // Only offered where hg.conf blatOldTracks=delete, i.e. where there is something to opt + // out of. Unlike the three above (which keep the classic form's plain-checkbox + // behaviour), this one is submitted through an explicit hidden field: a checkbox sends + // nothing when unticked, so cartUsualBoolean would never see it go back to false and + // "Keep results" could not be switched off again once used. + (cfg.showKeepResults ? + '' + + `` + + `` + + 'Keep results' + + `` + + `${BLAT_INFO_SVG}` : '') + + '

' + + + '

Query sequence

' + + '

' + + '' + + '' + + '

' + + + '

' + + '

Separate multiple sequences with a >name line. ' + + 'Up to 25 sequences.' + + `${htmlEncode(cfg.exampleLabel)}

` + + '' + + '

' + + 'Show input limits

' + + '

' + + + '' + + + '

' + + '` + + '` + + '` + + '

' + + + '

' + blatFormSidebar(cfg) + '

' + + blatFormLimitsModal(); + + // Move the C-generated genome search bar (real autocomplete over every assembly, already wired + // by setupGenomeSearchBar) into its slot, rather than reimplementing it with a hardcoded list. + var holder = document.getElementById('blatGenomeHolder'); + if (holder) { document.getElementById('blatGenomeSlot').appendChild(holder); } + + + // Show the current assembly in the search bar itself instead of in a separate "Current genome:" + // line - the bar is wide enough for the whole description. setupGenomeSearchBar writes the new + // one in on each pick, and focusing the bar selects all of it, so it reads as a filled-in search + // box rather than as a value the user has to clear by hand. + var genomeInput = document.getElementById('genomeSearch'); + if (genomeInput && cfg.dbLabel) { genomeInput.value = cfg.dbLabel; } + + // Restore the sequence from the cart without going through innerHTML (avoids re-escaping). + document.getElementById('blatUserSeq').value = cfg.userSeq || ''; + blatFormCount(); + + $('#blatUserSeq').on('input', blatFormCount); + // Mirror the "Keep results" checkbox into its hidden field so an unticked box submits an + // explicit 0 rather than nothing at all, and remember the choice in localStorage so it comes + // back pre-set on the user's next visit (see keepResultsInit above). + $('#blat_keepResults').on('change', function() { + document.getElementById('blatKeepResultsVal').value = this.checked ? '1' : '0'; + blatSetKeepResultsPref(this.checked); + }); + $('#blatTabPaste').on('click', function() { blatFormTab(false); }); + $('#blatTabUpload').on('click', function() { blatFormTab(true); }); + // The example sequence is a real ~14 kb query, fetched on demand so it is not carried in every + // page load. The link doubles as its own status indicator while the request is in flight. + $('#blatExample').on('click', function(ev) { + ev.preventDefault(); + var link = this; + var label = cfg.exampleLabel; + link.textContent = 'Loading example…'; + fetch(cfg.exampleUrl) + .then(function(resp) { + if (!resp.ok) { throw new Error('HTTP ' + resp.status); } + return resp.text(); + }) + .then(function(fa) { + var ta = document.getElementById('blatUserSeq'); + ta.value = fa.trim(); + blatFormCount(); + ta.focus(); + ta.setSelectionRange(0, 0); + ta.scrollTop = 0; + link.textContent = label; + blatFormTab(false); // in case the user was on the upload tab + }) + .catch(function(err) { + link.textContent = 'Could not load example'; + // Leave the message up briefly, then let the user try again. + setTimeout(function() { link.textContent = label; }, 4000); + console.error('hgBlat: example fetch failed:', err); + }); + }); + $('#blatLimitLink').on('click', function(ev) { + ev.preventDefault(); + $('#blatLimitsBg').css('display', 'flex'); + }); + $('#blatLimitsClose').on('click', function() { $('#blatLimitsBg').hide(); }); + $('#blatLimitsBg').on('click', function(ev) { if (ev.target === this) { $(this).hide(); } }); + $(document).on('keydown.blatLimits', function(ev) { + if (ev.key === 'Escape') { $('#blatLimitsBg').hide(); } + }); + + var fileInput = document.getElementById('blatSeqFile'); + var drop = document.getElementById('blatDrop'); + $(fileInput).on('change', function() { + document.getElementById('blatFileName').textContent = + this.files && this.files.length ? this.files[0].name : ''; + }); + ['dragenter', 'dragover'].forEach(function(e) { + drop.addEventListener(e, function(ev) { ev.preventDefault(); drop.classList.add('hot'); }); + }); + ['dragleave', 'drop'].forEach(function(e) { + drop.addEventListener(e, function(ev) { ev.preventDefault(); drop.classList.remove('hot'); }); + }); + drop.addEventListener('drop', function(ev) { + if (ev.dataTransfer.files.length) { + fileInput.files = ev.dataTransfer.files; + $(fileInput).trigger('change'); + } + }); + + if (typeof convertTitleTagsToMouseovers === 'function') { convertTitleTagsToMouseovers(); } +} + $(document).ready(function() { if (typeof hgBlatData !== 'undefined' && document.getElementById('blatResults')) { blatBuild(); } + if (typeof hgBlatFormData !== 'undefined' && document.getElementById('blatFormBox')) { + blatFormBuild(); + } });