bfeae54a099bf1a9e2f29252b0ee581d2862ebf7
chmalee
  Wed Nov 29 12:07:15 2023 -0800
Make tooltip text size a configurable option in hgTracks config page, refs #32688

diff --git src/hg/hgTracks/config.c src/hg/hgTracks/config.c
index f7e9c5c..c0a30f2 100644
--- src/hg/hgTracks/config.c
+++ src/hg/hgTracks/config.c
@@ -619,30 +619,77 @@
 hPrintf("</TR>");
 
 if (freeTypeOn())
     {
     hPrintf("<TR><TD>font:");
     hPrintf("<TD style=\"text-align: right\">");
     textFontDropDown();
     hPrintf("</TD></TR>");
     hPrintf("<TR><TD id='textStyleName'>style:");
     hPrintf("<TD style=\"text-align: right\" id='textStyleDrop' >");
     textStyleDropDown();
     hPrintf("</TR>");
     hPrintf("</TR>");
     }
 
+if (cfgOptionBooleanDefault("showMouseovers", FALSE))
+    {
+    /* I predict most people will want the browser text size as the tooltip text size
+     * but just in case, users can change the value and it will remain independent
+     * of the font size by saving to localStorage. */
+    hPrintf("<tr><td>tooltip text size:</td>");
+    hPrintf("<td style=\"text-align: right\">");
+    static char *sizes[] = {"6", "8", "10", "12", "14", "18", "24", "34"};
+    int i;
+    hPrintf("<select name='tooltipTextSize'>");
+    for (i = 0; i < ArraySize(sizes); i++)
+        {
+        hPrintf("<option ");
+        if (sameString(tl.textSize,sizes[i])) {hPrintf("selected");}
+        hPrintf(">%s</option>", sizes[i]);
+        }
+    hPrintf("</select>");
+    hPrintf("</td>");
+    hPrintf("</tr>");
+    jsInlineF(""
+        "function updateSelectedTooltipSize(newSize) {\n"
+        "    let options = document.getElementsByName('tooltipTextSize')[0];\n"
+        "    let i = 0;\n"
+        "    for (i; i < options.length; i++) {\n"
+        "        if (options[i].value === newSize) {\n"
+        "            options[i].selected = true;\n"
+        "            localStorage.setItem('tooltipTextSize', options[i].value);\n"
+        "        } else {\n"
+        "            options[i].selected = false;\n"
+        "        }\n"
+        "    }\n"
+        "}\n"
+        "\n"
+        "// set the tooltip text size based on localStorage values\n"
+        "let currTooltipSize = localStorage.getItem('tooltipTextSize');\n"
+        "let browserTextSize = document.getElementsByName('textSize')[0];\n"
+        "if (currTooltipSize === null) {\n"
+        "    localStorage.setItem('tooltipTextSize', browserTextSize.value);\n"
+        "} else {\n"
+        "    updateSelectedTooltipSize(currTooltipSize);\n"
+        "}"
+        "document.getElementsByName('tooltipTextSize')[0].addEventListener('change', function(e) {\n"
+        "    updateSelectedTooltipSize(document.getElementsByName('tooltipTextSize')[0].selectedOptions[0].value);\n"
+        "});\n"
+        );
+    }
+
 themeDropDown(cart);
 
 hTableStart();
 if (ideoTrack != NULL)
     {
     hPrintf("<TR><TD>");
     hCheckBox("ideogram", cartUsualBoolean(cart, "ideogram", TRUE));
     hPrintf("</TD><TD>");
     hPrintf("Display chromosome ideogram above main graphic");
     hPrintf("</TD></TR>\n");
     }
 hPrintf("<TR><TD>");
 hCheckBox("guidelines", cartUsualBoolean(cart, "guidelines", TRUE));
 hPrintf("</TD><TD>");
 hPrintf("Show light blue vertical guidelines, or light red vertical  window separators in multi-region view");