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/htdocs/style/HGStyle.css src/hg/htdocs/style/HGStyle.css
index e63ac948c72..c7a27fef8c4 100644
--- src/hg/htdocs/style/HGStyle.css
+++ src/hg/htdocs/style/HGStyle.css
@@ -484,30 +484,88 @@
 
 div.trackUiHicHiddenAttributes
 {
     font-size: 0.9em;
     display: none;
     max-height: 10em;
     max-width: 60em;
     overflow: scroll;
     background-color: white;
     margin-top: 0.5em;
     margin-bottom: 0.5em;
     border: solid;
     border-width: thin;
 }
 
+#superTrackTable {
+    border-collapse: collapse;
+}
+
+#superTrackTable tr {
+    border-bottom: 1px solid #DDD;
+}
+
+#superTrackTable td {
+    vertical-align: top;
+}
+
+.seg-btn-group {
+    display: inline-flex;
+  }
+
+/* the buttons in the middle */
+.seg-btn-group button {
+    border-radius: 0px;
+    color: #777;
+    padding: 2px 3px;
+    font-size: 11px;
+    font-weight: 500;
+    border: 1px solid #ccc;
+    background: #fff;
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s;
+    margin: 0;
+    outline: none;
+    margin-left: -1px;
+  }
+
+/* the first button is round on the left */
+  .seg-btn-group button:first-child {
+    margin-left: 0;
+    border-radius: 3px 0 0 3px;
+  }
+
+/* the last button is round on the right */
+  .seg-btn-group button:last-child {
+    border-radius: 0 3px 3px 0;
+  }
+
+  .seg-btn-group button:hover:not(.seg-active) {
+    background: #f5f5f5;
+  }
+
+  /* the active button is the 'pressed' button, dark with bright text */
+  .seg-btn-group button.seg-active {
+    background: #888888;
+    color: #fff;
+    border-color: #AAAAAA;
+    z-index: 1;
+    position: relative;
+  }
+
+/* -------------- */
+
 /* hgTracks config page groups list */
 TABLE.groupLists { background-color: #FFFEE8; width: 50em; }
 TABLE.groupLists TR:not(.blueToggleBar):not(.noData) TD { border: 1px solid; }
 
 /* for displaying a basic table - need to condense these to all just the .stdTbl class */
 table.chainTbl, .descTbl, .stdTbl {border-collapse: collapse;}
 table.chainTbl td, .descTbl td, .descTbl th, .stdTbl td, .stdTbl th {border: 1px solid #666; padding: 5px;}
 table.descTbl td.number { text-align: right; }
 
 /* --------------- Newer UI 2.0 styles --------------- */
 .ghost { background-color: #EEEEEE; }
 .pale  { background-color: #F8F8F8; }
 .bgLevel1  { background-color: #FFFEE8; }
 .bgLevel2  { background-color: #FFF9D2; }
 .bgLevel3  { background-color: #FCECC0; }