668110379c7c18bc75dd2db8747821b387fb28d6
chmalee
  Fri Jan 27 10:22:57 2023 -0800
Redraw barChart svgs on the client so the column widths can be wide enough for labels, refs #28439

diff --git src/hg/js/hgc.js src/hg/js/hgc.js
index 64df3d1..3c7f630 100644
--- src/hg/js/hgc.js
+++ src/hg/js/hgc.js
@@ -131,31 +131,81 @@
     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 ;
 }
 
 // on page load initialize VEP, Population Frequency and Haplotype Tables
 // for gnomAD v3.1.1 track
 $(document).ready(function() {
-    if (_jsonHgcLabels !== null) {
+    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;
+            }
+        });
+
+        // determine the size taken up by the 'N' counts
+        var maxStatsWidth = 0.0;
+        $(".statsLabel").each(function(s) {
+            if ((statWidth = this.getComputedTextLength()) >= maxStatsWidth) {
+                maxStatsWidth = statWidth;
+            }
+        });
+
+        // the stat is right aligned so take into account it's width as well
+        statsRightOffset = swatchWidth + maxSampleWidth + (2 * columnSpacer) + maxStatsWidth;
+
+        // The white band that separates every other row needs to be resized
+        $(".sampleBand").each(function(s) {
+            this.setAttribute("width", statsRightOffset - swatchWidth);
+        });
+
+        // now move the stat number
+        $(".statsLabel").each(function(s) {
+            this.setAttribute("x", statsRightOffset);
+        });
+
+        // now shift the actual bars (plus value) over if necessary
+        $(".valueLabel").each(function(s) {
+            barName = "#bar" + s;
+            var barWidth = 0;
+            var newX = statsRightOffset + (2 * columnSpacer);
+            if ($(barName).length > 0) {
+                barWidth = parseInt($(barName)[0].getAttribute("width"));
+                $(barName)[0].setAttribute("x", newX);
+                this.setAttribute("x", newX + barWidth + 2 * columnSpacer);
+            } else { // the header label only
+                this.setAttribute("x", newX + barWidth);
+            }
+        });
+    }
+    if (typeof _jsonHgcLabels !== "undefined") {
         var obj, o;
         for (obj in _jsonHgcLabels) {
             // build up the new table:
             var newTable = document.createElement("table");
             var newRow = newTable.insertRow();
             var newCell = newRow.insertCell();
             var label = _jsonHgcLabels[obj].label;
             var data = _jsonHgcLabels[obj].data;
             var newText = document.createTextNode(label);
             newCell.appendChild(newText);
             newCell = newRow.insertCell();
             newCell.appendChild(dataToTable(label, data));
             // find the last details table and add a new table on:
             var currTbl = $(".bedExtraTbl");
             l = currTbl.length;