fcb6dc8dfa166136193177c895ca181200850e4d
max
  Mon Jan 19 06:02:31 2026 -0800
changing superTrack TrackUi quite a bit. Removing dropdowns and
replacing them with buttons. Also adding buttons for setting all tracks
or all visible tracks to a visibility. While at it, making a change
to the js-query-library function (inversed the order of arguments) which was requested months ago by
Brian, but I forgot to make the change after code review. Also
shortening the "source data version" label to just "version". refs #36917.

I changed the library function
hTvDropDownClassVisOnlyAndExtra() rather than copying the code. This was
because I was hesitant to copy/paste all this code into a second
function, which would have been the only alternative, as the function
cannot be reused as-is. So I modified the function to return the list of
visibilities. It's never clear whether it's better to modify
functions or copy/paste code.
here, not breaking the function into smaller parts, so copy/pasting it, would risk
requiring more future copy/pasted code. But the risk is to break existing
tracks.

diff --git src/hg/hgTrackUi/hgTrackUi.c src/hg/hgTrackUi/hgTrackUi.c
index 620d8a43375..a3c4af87669 100644
--- src/hg/hgTrackUi/hgTrackUi.c
+++ src/hg/hgTrackUi/hgTrackUi.c
@@ -2727,91 +2727,145 @@
 static boolean isInTrackList(struct trackDb *tdbList, struct trackDb *target)
 /* Return TRUE if target is in tdbList. */
 {
 struct trackDb *tdb;
 for (tdb = tdbList; tdb != NULL; tdb = tdb->next)
     if (tdb == target)
         return TRUE;
 return FALSE;
 }
 #endif /* UNUSED */
 
 void superTrackUi(struct trackDb *superTdb, struct trackDb *tdbList)
 /* List tracks in this collection, with visibility controls and UI links */
 {
 jsIncludeFile("hui.js",NULL);
-printf("\n<P><TABLE CELLPADDING=2>");
+printf("<p style='margin-top:3px; margin-bottom:3px'>")
+printf("Tracks that are part of this container are listed below. Use the buttons below to set their visibilities.</p>");
+printf("\n<TABLE id='superTrackTable' CELLPADDING=2>");
 tdbRefSortPrioritiesFromCart(cart, &superTdb->children);
 struct slRef *childRef;
 char javascript[1024];
 for (childRef = superTdb->children; childRef != NULL; childRef = childRef->next)
     {
     struct trackDb *tdb = childRef->val;
     if (childRef == superTdb->children) // first time through
         {
-        printf("\n<TR><TD NOWRAP colspan=2>");
-	printf("<IMG height=18 width=18 id='btn_plus_all' src='../images/add_sm.gif'>");
-	jsOnEventById("click", "btn_plus_all", "superT.plusMinus(true);");
-	printf("<IMG height=18 width=18 id='btn_minus_all' src='../images/remove_sm.gif'>");
-	jsOnEventById("click", "btn_minus_all", "superT.plusMinus(false);");
-        printf("&nbsp;<B>All</B><BR>");
+        printf("<TR style='border-bottom: none'><TD style='margin-bottom:10px' NOWRAP colspan=2>\n");
+
+        printf("<b>Apply visibility: </b>\n");
+        printf("<select id='superSubViz' class='normalText'>\n");
+        printf("<option value='hide'>Hide</option>");
+        printf("<option value='dense'>Dense</option>");
+        printf("<option value='squish'>Squish</option>");
+        printf("<option value='pack' selected='selected'>Pack</option>");
+        printf("<option value='full'>Full</option>\n");
+        printf("</select>\n");
+
+        printInfoIcon("The 'Apply to all' button sets all tracks below to the visibility selected on this dropdown. The 'Apply to all visible' button sets this visibility on all tracks below that are not hidden.");
+
+        printf("<button type='button' style='margin-left: 10px' id='superVizApplyAllButton'>Apply to all</button>&nbsp;\n");
+        // set all selectors to the current value of the top select
+	jsOnEventById("click", "superVizApplyAllButton", "let newVal = $('#superSubViz').val(); $('#superTrackTable select').val(newVal).trigger('change').removeClass('hiddenText').addClass('normalText');");
+        
+        // set all selectors that are not on 'hide' to the current value of the top select 
+        printf("<button type='button' id='superVizApplyButton'>Apply to all visible tracks</button>\n");
+	jsOnEventById("click", "superVizApplyButton", "let newVal = $('#superSubViz').val(); $('#superTrackTable select').filter(function() { return $(this).val() !== 'hide'; }).val(newVal).trigger('change').removeClass('hiddenText').addClass('normalText'); ");
         printf("</TD></TR>\n");
         }
     printf("<TR><TD NOWRAP>");
     if (!tdbIsDownloadsOnly(tdb))
         {
 	char id[256];
         enum trackVisibility tv =
                 hTvFromString(cartUsualString(cart, tdb->track,hStringFromTv(tdb->visibility)));
-        // Don't use cheapCgi code... no name and no boolshad... just js
 	safef(id, sizeof id, "%s_check", tdb->track);
-        printf("<INPUT TYPE=CHECKBOX id='%s'%s>",
+        printf("<INPUT style='display:none' class='subtrackCheckbox' TYPE=CHECKBOX id='%s'%s>",
                id, (tv != tvHide?" CHECKED":""));
-	jsOnEventById("change", id, "superT.childChecked(this);");
-
         safef(javascript, sizeof(javascript), "superT.selChanged(this)");
         struct slPair *event = slPairNew("change", cloneString(javascript));
+
+        char *onlyVis = trackDbSetting(tdb, "onlyVisibility");
         hTvDropDownClassVisOnlyAndExtra(tdb->track, tv, tdb->canPack,
                                         (tv == tvHide ? "hiddenText":"normalText"),
-                                        trackDbSetting(tdb, "onlyVisibility"),
+                                        onlyVis,
                                         event);
 
+        // print a group of buttons that act like radiobuttons (see javascript lines below)
+        printf("<div data-trackname='%s' class='seg-btn-group' style='margin-right:12px'>", tdb->track);
+        char *trackVizStr = hStringFromTv(tv);
+
+        // vizList is e.g.  {"Hide", "Dense", "Squish", "Pack", "Full"}, but can be shorter, e.g. when canPack=false
+        char **vizList = hTvGetVizArr(tv, tdb->canPack, onlyVis);
+        int vizListLen = arrNullLen(vizList);
+        for (int i = 0; i < vizListLen; i++) {
+            char *buttonViz = vizList[i];
+            // the currently active viz mode is an 'active' button = pressed
+            if (strcasecmp(buttonViz, trackVizStr) == 0)
+                printf("<button class='seg-active'>");
+            else
+                printf("<button>");
+            printf("%s</button>",buttonViz);
+        }
+        puts("</div");
+        
         printf("</TD>\n<TD>");
         hPrintPennantIcon(tdb);
 	safef(id, sizeof id, "%s_link", tdb->track);
+        // the <select> tag is only needed to send arguments to the hgTracks CGI. It will be hidden, see below.
         printf("<A HREF='%s?%s=%s&c=%s&g=%s' id='%s'>%s</A>&nbsp;", 
                     tdbIsDownloadsOnly(tdb) ? hgFileUiName(): hTrackUiForTrack(tdb->track),
                     cartSessionVarName(), cartSessionId(cart), chromosome, cgiEncode(tdb->track), 
                     id, tdb->shortLabel);
 	jsOnEventById("click", id, "superT.submitAndLink(this);");
         }
     else
         {
         printf("<A HREF='%s?%s=%s&g=%s'>Downloads</A>",
                hgFileUiName(),cartSessionVarName(), cartSessionId(cart), cgiEncode(tdb->track));
         printf("</TD>\n<TD>");
         printf("%s&nbsp;",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');");
+// * 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
+jsInline("$('.seg-btn-group').on('click', 'button', function() {"
+  "$(this).addClass('seg-active').siblings().removeClass('seg-active');"
+  "});");
+// * Changing the dropdown updates the buttons
+jsInline("$('.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
+jsInline("$('#superTrackTable .vizSelect').hide();");
 }
 
 #ifdef USE_HAL
 static void cfgHalSnake(struct trackDb *tdb, char *name)
 {
 boolean parentLevel = isNameAtParentLevel(tdb, name);
 if (parentLevel)
     return;
 char *fileName = trackDbSetting(tdb, "bigDataUrl");
 if (fileName == NULL)
      return;
 char *errString;
 int handle = halOpenLOD(fileName, &errString);
 if (handle < 0)
     errAbort("can't open HAL file: %s", fileName);
@@ -3534,32 +3588,35 @@
 else if (sameString(tdb->type, "halSnake"))
     tdb->canPack = TRUE;
 else if (!startsWith("bigWig", tdb->type) && startsWith("big", tdb->type))
     tdb->canPack = TRUE;
 else if (sameString(tdb->type, "bigNarrowPeak"))
     tdb->canPack = TRUE;
 else if (sameString(tdb->type, "hic"))
     tdb->canPack = TRUE;
 
 // Don't bother with vis controls for downloadsOnly
 if (!tdbIsDownloadsOnly(tdb))
     {
     /* Display visibility menu */
     if (tdbIsComposite(tdb) && multViewCount(tdb) > 0)
         printf("<B>Maximum&nbsp;display&nbsp;mode:&nbsp;</B>");
+    else if (tdbIsSuper(tdb))
+        printf("<B>Show or hide this container and all tracks:&nbsp;</B>");
     else
         printf("<B>Display&nbsp;mode:&nbsp;</B>");
+
     if (tdbIsSuper(tdb))
         {
         superTrackDropDown(cart, tdb, 1);
         }
     else
         {
         /* normal visibility control dropdown */
         enum trackVisibility vis = tdb->visibility;
         boolean canPack = rTdbTreeCanPack(tdb);
         if (ajax)
             {
             // ajax popups should show currently inherited visability
             vis = tdbVisLimitedByAncestry(cart, tdb, TRUE);
             // composite children may inherit squish/pack vis so allow it.
             if (canPack == FALSE && tdbIsCompositeChild(tdb))