92ca35b40020f7b62a7dbd42a7bad7257a4c3eb2 angie Mon Jun 1 12:15:43 2026 -0700 Add font size select to recombinant display popup. diff --git src/hg/js/hgPhyloPlace.js src/hg/js/hgPhyloPlace.js index bffba7e02d6..853e421b210 100644 --- src/hg/js/hgPhyloPlace.js +++ src/hg/js/hgPhyloPlace.js @@ -470,34 +470,34 @@ // with a gene name label if the rectangle is large enough addRectFill(svg, x, y, width, height, '#EEEEEE'); const geneTextY = y + 5 * height / 8; for (let gene of genes) { let geneX = x + gene.start * genomeScale; let geneWidth = (gene.end - gene.start) * genomeScale; addRectFill(svg, geneX, y, geneWidth, height, gene.color, { title: gene.name }); let geneXMid = geneX + geneWidth / 2; if (estimateTextWidth(gene.name) < geneWidth) { addText(svg, gene.name, geneXMid, geneTextY, { fill: 'white', 'text-anchor': 'middle', title: gene.name }); } } } - function draw(recombAttrs, genomeSize, genes, showInformativeOnly) { + function draw(recombAttrs, genomeSize, genes, showInformativeOnly, fontSize=10) { // Return an SVG diagram showing the mutations in acceptor, recombinant and donor to visualize the evidence for // recombination. - configLayout(10); + configLayout(fontSize); let combinedMuts = makeCombinedMuts(recombAttrs.recombMuts, recombAttrs.donorMuts, recombAttrs.acceptorMuts); if (showInformativeOnly) { combinedMuts = filterMuts(combinedMuts); } let baseAreaWidth = combinedMuts.length * cfg.basePitch - cfg.interbaseWidth; if (baseAreaWidth < cfg.minBaseAreaWidth) { baseAreaWidth = cfg.minBaseAreaWidth; } let svgWidth = cfg.leftLabelAreaWidth + baseAreaWidth + 2 * cfg.baseWidth; let svgHeight = cfg.titleAreaHeight + cfg.posLabelAreaHeight + cfg.baseArrayHeight + cfg.connectorAreaHeight + cfg.genomeGraphHeight + cfg.genomeScaleHeight + cfg.geneGraphHeight; var svg = makeSvg(svgWidth, svgHeight); // Title/info area addTitle(svg, recombAttrs); @@ -571,89 +571,113 @@ // Add XML declaration and create a Blob const svgData = '<?xml version="1.0" standalone="no"?>\r\n' + source; const svgBlob = new Blob([svgData], {type: "image/svg+xml;charset=utf-8"}); const svgUrl = URL.createObjectURL(svgBlob); // Create a temporary download link, click it, remove it const downloadLink = document.createElement("a"); downloadLink.href = svgUrl; downloadLink.download = name; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); } - function display(recombinantData, recombinantIndex, showInformativeOnly) { + function display(recombinantData, recombinantIndex, showInformativeOnly, fontSize) { // Searching for some semblance of size suitability var popMaxHeight = (window.innerHeight * 0.85); // make 15% of the bottom of the screen still visible var popMaxWidth = (window.innerWidth * 0.9); // take up 90% of the window var recombAttrs = recombinantData.recombinants[recombinantIndex]; var genomeSize = recombinantData.genomeSize; var genes = recombinantData.genes; + fontSize = parseInt(fontSize, 10); $('#recombinantDialog').html("<div id='popContents' style='font-size:1.1em;'></div>"); var $div = $('#popContents'); $div.html("<p><button id='prevRecomb'>previous</button> " + "<input type='checkbox' id='hgpp_informativeOnly'> Show only informative mutations " + "<button id='saveSvg'>save image</button> " + + "Font size: <select name='Font size' id='hgpp_recombFontSize'>" + + " <option value='6'>6</option>" + + " <option value='7'>7</option>" + + " <option value='8'>8</option>" + + " <option value='9'>9</option>" + + " <option value='10'>10</option>" + + " <option value='11'>11</option>" + + " <option value='12'>12</option>" + + " <option value='13'>13</option>" + + " <option value='14'>14</option>" + + " <option value='15'>15</option>" + + " <option value='16'>16</option>" + + "</select> " + "<button id='nextRecomb'>next</button></p>\n"); - var svg = recombinantGraph.draw(recombAttrs, genomeSize, genes, showInformativeOnly); + var svg = recombinantGraph.draw(recombAttrs, genomeSize, genes, showInformativeOnly, fontSize); $div.append(svg); // Clicking on the checkbox toggles showInformativeOnly behavior let $cb = $('#hgpp_informativeOnly'); $cb.prop('checked', showInformativeOnly); $cb.on('click', function() { // Redraw image, update cart var and hidden input that tracks the checkbox across popups showInformativeOnly = $cb.prop('checked'); setCartVar('hgpp_informativeOnly', showInformativeOnly ? '1' : '0', null, true); $('#hidden_showInformative').val(showInformativeOnly ? '1' : '0'); $div.children("svg").remove(); - $div.append(recombinantGraph.draw(recombAttrs, genomeSize, genes, showInformativeOnly)); + $div.append(recombinantGraph.draw(recombAttrs, genomeSize, genes, showInformativeOnly, fontSize)); }); // Disable prev/next button if at beginning/end let $prevBtn = $('#prevRecomb'); let $nextBtn = $('#nextRecomb'); $prevBtn.prop('disabled', recombinantIndex < 1); $nextBtn.prop('disabled', recombinantIndex >= recombinantData.recombinants.length - 1); $prevBtn.on('click', function() { if (recombinantIndex > 0) { recombinantIndex--; $prevBtn.prop('disabled', recombinantIndex < 1); $nextBtn.prop('disabled', recombinantIndex >= recombinantData.recombinants.length - 1); recombAttrs = recombinantData.recombinants[recombinantIndex]; $div.children("svg").remove(); - $div.append(recombinantGraph.draw(recombAttrs, genomeSize, genes, showInformativeOnly)); + $div.append(recombinantGraph.draw(recombAttrs, genomeSize, genes, showInformativeOnly, fontSize)); } }); $nextBtn.on('click', function() { if (recombinantIndex < recombinantData.recombinants.length - 1) { recombinantIndex++; $prevBtn.prop('disabled', recombinantIndex < 1); $nextBtn.prop('disabled', recombinantIndex >= recombinantData.recombinants.length - 1); recombAttrs = recombinantData.recombinants[recombinantIndex]; $div.children("svg").remove(); - $div.append(recombinantGraph.draw(recombAttrs, genomeSize, genes, showInformativeOnly)); + $div.append(recombinantGraph.draw(recombAttrs, genomeSize, genes, showInformativeOnly, fontSize)); } }); // Save image button let $saveImgBtn = $('#saveSvg'); $saveImgBtn.on('click', function() { saveSvg($div.children("svg")[0], "recombinant.svg"); }); + // Font size + let $select = $('#hgpp_recombFontSize'); + $select.val(String(fontSize)); + $select.on('change', function() { + fontSize = parseInt($select.val(), 10); + setCartVar('hgpp_recombFontSize', fontSize, null, true); + $('#hidden_fontSize').val(fontSize); + $div.children("svg").remove(); + $div.append(recombinantGraph.draw(recombAttrs, genomeSize, genes, showInformativeOnly, fontSize)); + }); var uiDialogButtons = { Close: function() { $(this).dialog("close"); } }; $('#recombinantDialog').dialog({ resizable: false, height: popMaxHeight, width: popMaxWidth, minHeight: 200, minWidth: 400, modal: true, closeOnEscape: true, autoOpen: false, @@ -673,24 +697,24 @@ $('#recombinantDialog').dialog('open'); } // display return { cleanup: cleanup, display: display }; }()); ////////////////////// //// hgPhyloPlace //// ////////////////////// var hgPhyloPlace = (function() { "use strict"; - function onClickRecombinant(recombinantData, recombinantIndex, showInformativeOnly) { + function onClickRecombinant(recombinantData, recombinantIndex, showInformativeOnly, fontSize) { // When user clicks on "Show mutations" button for a potential recombinant, make a pop-up with a diagram showing // mutations in the recombinant and its parents, highlighting where they agree. - popUpRecombinant.display(recombinantData, recombinantIndex, showInformativeOnly); + popUpRecombinant.display(recombinantData, recombinantIndex, showInformativeOnly, fontSize); } return { onClickRecombinant: onClickRecombinant }; }()); // hgPhyloPlace