c7fcdde6db52ba01fbabfa695b49205bf7261a33 max Tue Aug 4 07:40:32 2026 -0700 hgBlat/hgc: QA fixes for the new BLAT table view and alignment page Address Gerardo's QA findings on the new BLAT UI: - Table view: label each hit with its own query (new Query column + "Queries" count in the summary) when the search has multiple queries, reading cfg.multiQuery / hit.qName from the payload. - Table view: strip the "hub_NNN_" prefix from the Assembly field so hub assemblies no longer show a doubled prefix. - Alignment page: strip the same prefix from the organism in the page title for non-GenArk assembly hubs (blatAsmLabel fallback path). - Table view: do not pre-select hit #1; show a prompt until the user clicks a row, since top hits are often tied. - Table view: add a divider between the Browser / New tab / Alignment links. - Alignment page: sidebar link now reads "Side by Side Alignment" to match the section heading. - Alignment page: comma-format coordinates and base counts in the summary, matching the table view and the rest of the browser. refs #37893 diff --git src/hg/js/hgBlat.js src/hg/js/hgBlat.js index 19eebb0ed1a..6a0d49d2320 100644 --- src/hg/js/hgBlat.js +++ src/hg/js/hgBlat.js @@ -72,31 +72,32 @@ .blatShareMsg { font-size:14px; color:var(--muted); } .blatShareInput { flex:1; min-width:260px; font-size:13px; padding:5px 8px; border:1px solid var(--btnLine); border-radius:3px; background:#fff; } #blatTable { font-size:13px; width:100%; border-collapse:collapse; } #blatTable thead th { background:var(--headrow); border-bottom:1px solid var(--headrowLine); font-size:12px; color:var(--navy); font-weight:700; padding:8px 12px; white-space:nowrap; } #blatTable tbody td { padding:8px 12px; border-bottom:1px solid var(--lineSoft); white-space:nowrap; vertical-align:middle; } #blatTable tbody tr { cursor:pointer; } #blatTable tbody tr:nth-child(even) { background:var(--stripe); } #blatTable tbody tr:hover { background:var(--hover); } #blatTable tbody tr.blatSel { background:var(--sel); box-shadow:inset 3px 0 0 var(--navy); } #blatTable td.num, #blatTable th.num { text-align:right; font-variant-numeric:tabular-nums; } #blatTable td.rankCol { color:var(--faint); } #blatTable td.strandCol { text-align:center; color:var(--muted); } - #blatTable td.actionsCol a { color:var(--accent); font-weight:700; margin-right:12px; } + #blatTable td.actionsCol a { color:var(--accent); font-weight:700; } + #blatTable td.actionsCol .blatActSep { color:var(--line); margin:0 10px; } #blatTable a { color:var(--accent); text-decoration:none; } #blatTable a:hover { color:var(--accentHover); text-decoration:underline; } .blatRowHint { padding:11px 18px 2px; font-size:13px; color:var(--muted); } .blatLocus { max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .chrNote { color:var(--faint); cursor:help; margin-left:4px; } .blatIdWrap { display:flex; align-items:center; gap:9px; justify-content:flex-end; } .blatIdBar { flex:0 0 54px; height:8px; background:#dce4ee; border:1px solid var(--headrowLine); overflow:hidden; } .blatIdBar > i { display:block; height:100%; } .blatIdPct { font-size:13px; font-weight:700; width:48px; text-align:right; font-variant-numeric:tabular-nums; } .blatCov { position:relative; display:block; width:150px; height:10px; background:#dce4ee; border:1px solid var(--headrowLine); } .blatCov > i { position:absolute; top:0; bottom:0; background:var(--accent); } #blatTable_filter { float:left; margin:0 0 10px; } #blatTable_filter input { width:300px; max-width:55vw; border:1px solid var(--btnLine); border-radius:3px; padding:5px 9px; font-size:14px; } #blatTable_wrapper { padding:6px 18px 4px; } @@ -117,33 +118,35 @@ document.head.appendChild(st); } // ---- cell renderers ------------------------------------------------------ function blatPositionCell(hit) { var note = hit.chromNote ? ` ⓘ` : ''; return `${blatEsc(hit.chrom)}:` + `${blatFmt(hit.tStart)}-${blatFmt(hit.tEnd)}${note}`; } function blatActionsCell(hit) { // detailsUrl is the base-by-base alignment page (htcUserAli on a fresh search, htcBlatAlign on a // shared-link reopen); it is always present now, but guard in case a future caller omits it. - var align = hit.detailsUrl ? `Alignment` : ''; - return `Browser` + - `New tab` + align; + var parts = [`Browser`, + `New tab`]; + if (hit.detailsUrl) { parts.push(`Alignment`); } + // a thin divider between the links makes the grouping clearer + return parts.join('|'); } function blatLocusCell(hit, cfg) { if (!hit.locusText) { return ''; } var inner; if (hit.locusType && hit.locusGenes && hit.locusGenes.length) { var links = hit.locusGenes.map(function(g) { return `${blatEsc(g)}`; }).join('-'); inner = `${blatEsc(hit.locusType)} ${links}`; } else { inner = blatEsc(hit.locusText); } return `