b3af5822d95c94932b6d7b7abd93d1078bf251ee braney Mon Oct 30 16:55:40 2023 -0700 changes in response to max review #32416 diff --git src/hg/js/hgc.js src/hg/js/hgc.js index 3c7f630..1848282 100644 --- src/hg/js/hgc.js +++ src/hg/js/hgc.js @@ -1,16 +1,17 @@ // "use strict"; +/* jshint esnext: true */ // insert a node after the reference node function insertAfter(newNode, referenceNode) { referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); } // a generic table with no headers or sortable rows: function makeGenericTable(data) { var table = document.createElement("table"); table.classList.add("jsonTable"); var val, i, j; var keys = Object.keys(data); for (i = 0; i < keys.length; i++) { key = keys[i]; val = data[key]; @@ -128,33 +129,166 @@ // turn a json object into an html table function dataToTable(label, data) { var subTable = document.createElement("table"); subTable.classList.add("jsonTable"); var subRow = subTable.insertRow(); var newTableNode; if (label === "Variant Effect Predictor") newTableNode = makeVepTable(data); else if (label === "Population Frequencies" || label === "Haplotype Frequencies") newTableNode = makePopTable(data); else newTableNode = makeGenericTable(data); return newTableNode ; } +function makeVisInput(parentEl, name, trackName="", defaultVis="Hide") { + ["Hide","Dense","Squish","Pack","Full"].forEach(function(vis) { + let label = document.createElement("label"); + //label.classList.add(name); + let ctrl = document.createElement("input"); + ctrl.classList.add(name); + ctrl.type = "radio"; + ctrl.name = name; + ctrl.value = vis; + if (defaultVis == vis) { + ctrl.checked = true; + } + ctrl.setAttribute("data-default", ctrl.checked); + if (trackName.length > 0) { + ctrl.setAttribute("data-trackName", trackName); + } + label.appendChild(ctrl); + label.append(vis); + parentEl.append(label); + }); +} + +function makeSetAllDiv(parentEl, text, classPre) { + let textDiv = document.createElement("div"); + textDiv.append(text); + textDiv.classList.add(classPre + "Text"); + textDiv.classList.add("gridItem"); + let ctrlDiv = document.createElement("div"); + makeVisInput(ctrlDiv, classPre + "Vis"); + ctrlDiv.classList.add(classPre + "Ctrl"); + ctrlDiv.classList.add("gridItem"); + parentEl.append(textDiv); + parentEl.append(ctrlDiv); +} + +// assume the first row, second column of the first bedExtraTbl is a list of assemblies +// with corresponding chain tracks +function makeHPRCTable() { + let tbl = $(".bedExtraTbl"); + if (tbl.length > 0) { + tbl = tbl[0]; + let td = tbl.firstChild.firstChild.children[1]; + + // get the list of assemblies + asms = td.innerText; + + // clear the old text + td.replaceChildren(); + + let newForm = document.createElement("form"); + td.append(newForm); + newForm.name = "chainBreak"; + newForm.action = "../cgi-bin/hgTracks"; + newForm.method = "POST"; + + // the hidden hgsid for hgTracks + let hgsidInput = document.createElement("input"); + hgsidInput.type = "hidden"; + hgsidInput.name = "hgsid"; + hgsidInput.value = common.hgsid; + newForm.append(hgsidInput); + + newForm.innerHTML += "View tracks"; + let submitBtn = document.createElement("input"); + submitBtn.type = "submit"; + newForm.append(submitBtn); + + let newTblDiv = document.createElement("div"); + newTblDiv.classList.add("chainBreak"); + newForm.append(newTblDiv); + setAllText = "Change display mode of all assembly chain tracks"; + makeSetAllDiv(newTblDiv, setAllText, "topSetAll"); + + // go through and make each link + asms.split(",").forEach(function(asm) { + asmSafe = asm.replaceAll(".","_"); + let trackTextDiv = document.createElement("div"); + trackTextDiv.append(asmSafe + " display mode:"); + newTblDiv.append(trackTextDiv); + let trackCtrlDiv = document.createElement("div"); + makeVisInput(trackCtrlDiv, asmSafe+"SetVis", trackName=asm); + newTblDiv.append(trackCtrlDiv); + trackTextDiv.classList.add("gridItem"); + trackCtrlDiv.classList.add("gridItem"); + // TODO: allow makeVisInput to take a default vis + $("."+asmSafe+"SetVis").each(function(i, clickedElem) { + clickedElem.addEventListener("click", function(e) { + $("[class$=SetAllVis]").each(function(i, radioElem) { + if (radioElem.checked) { + radioElem.checked = false; + } + }); + }); + }); + }); + if (asms.split(",").length > 25 ) { + makeSetAllDiv(newTblDiv, setAllText, "bottomSetAll"); + } + $("[class$=SetAllVis]").each(function(i, elem) { + elem.addEventListener("click", function(e) { + // change vis of each track + $("[class$=Vis][value="+e.target.value).each(function(i, e) { + e.checked = true; + }); + }); + }); + newForm.addEventListener("submit", function(e) { + inputs = e.target.elements; + for (let i = 0; i < inputs.length; i++) { + input = inputs[i]; + if (!input.checked) { + // pass hgsid and other variables on through + continue; + } + if (input.name.endsWith("SetAllVis") || (input.getAttribute("data-default") === input.checked.toString())) { + input.disabled = true; + } else { + // change the form name to a track name so the track can be on + trackName = "chainHprc" + input.getAttribute("data-trackName"); + input.name = trackName; + input.value = input.value.toLowerCase(); + } + } + }); + } +} + + + + // on page load initialize VEP, Population Frequency and Haplotype Tables // for gnomAD v3.1.1 track $(document).ready(function() { + if (doHPRCTable) { + makeHPRCTable(); + } if ($("#svgTable") !== null) { // redraw the svg with appropriate widths for all columns // swatchWidth and columnSpacer are taken from svgBarChart() in hgc/barChartClick.c // they should probably be dynamically determined var swatchWidth = 20.0; var columnSpacer = 4.0; var maxSampleWidth = 0.0; // determine the size taken up by the sample names $(".sampleLabel").each(function(s) { if ((sampleLength = this.getComputedTextLength()) >= maxSampleWidth) { maxSampleWidth = sampleLength; } });