a3244b1059b27424713c97be5694c716d1b90172
max
  Thu Mar 5 11:36:07 2026 -0800
fixing bug in supertrack UI that appears when the track name has a dot in it, refs #36917, also uppercasing the visibilities, refs #37200

diff --git src/hg/hgTrackUi/hgTrackUi.c src/hg/hgTrackUi/hgTrackUi.c
index 3ccbc803a49..504e03c57b3 100644
--- src/hg/hgTrackUi/hgTrackUi.c
+++ src/hg/hgTrackUi/hgTrackUi.c
@@ -2843,31 +2843,35 @@
         printf("%s ",tdb->shortLabel);
         }
     printf("</TD>\n");
     printf("<TD>%s", tdb->longLabel);
 
     printf("&nbsp;&nbsp;");
     printDataVersion(database, tdb);
     //printf("&nbsp;&nbsp;<EM style='color:#666666; font-size:smaller;'>%s</EM>", dataVersion);
     printf("</TD></TR>");
     }
 printf("</TABLE>");
 
 // Now configure the elements above with Javascript:
 
 // * Clicking a button sets the dropdown to the button's text
-jsOnEventBySelector("click", ".seg-btn-group > button", "let dropdown = $('#' + $(this).parent().data('trackname')); let buttonText=$(this).text().toLowerCase(); dropdown.val(buttonText).removeClass('hiddenText').addClass('normalText');");
+jsOnEventBySelector("click", ".seg-btn-group > button", 
+        "let dropdown = $('[name=\"' + $(this).parent().data('trackname')+'\"]'); " // cannot use #id, . has special meaning
+        "let buttonText=$(this).text().toLowerCase(); "
+        "dropdown.val(buttonText).removeClass('hiddenText').addClass('normalText');"
+    );
 // * Clicking buttons does not submit the form (default action of <button> is to submit, unless type=button)
 jsInline("$('.seg-btn-group button').attr('type', 'button');");
 // * Clicking buttons makes them pressed. Also, clicking any button shows the superTrack
 jsInline("$('.seg-btn-group').on('click', 'button', function() {"
   "$(this).addClass('seg-active').siblings().removeClass('seg-active');"
   "$('.superDropdown').val('show');"
   "});");
 // * Changing the dropdown updates the buttons
 jsInline("$('#superTrackTable .vizSelect').on('change', function() {"
   "$(this).next().children().removeClass('seg-active');"
   "let labelToFind = capitalizeFirstLetter($(this).val());"
   "$(this).next().find('button').filter(function() { return $(this).text().trim() === labelToFind; }).addClass('seg-active');"
   "});");
 // * Hide all subtrack dropdowns from the user. They are used so the CGI arguments
 // are sent to hgTracks, but are not necessary as UI elements anymore