403ab7c9c2b204f487bb2f86260ffdab355e9517
jcasper
  Wed Aug 19 05:49:25 2026 -0700
Faceted composites should apply the active sort order to the tracks being
displayed; changing the sort changes the display order.  We also preserve that order when
returning to the page.  refs #36320

diff --git src/hg/htdocs/style/facetedComposite.css src/hg/htdocs/style/facetedComposite.css
index de4f4222cb7..7bdf0cc2a1e 100644
--- src/hg/htdocs/style/facetedComposite.css
+++ src/hg/htdocs/style/facetedComposite.css
@@ -1,236 +1,250 @@
 /* SPDX-License-Identifier: MIT; (c) 2025 Andrew D Smith (author) */
 /* Loading indicator shown while metadata is fetched and the table is built */
 #faceted-loading {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 0.75em;
     padding: 3em 0;
     color: #555;
 }
 #faceted-loading .faceted-spinner {
     width: 36px;
     height: 36px;
     border: 4px solid #d3eaff;     /* matches the table's light-blue accents */
     border-top-color: #2b6cb0;
     border-radius: 50%;
     animation: faceted-spin 0.8s linear infinite;
 }
 @keyframes faceted-spin {
     to { transform: rotate(360deg); }
 }
 #container {
     display: flex;
     width: 100%;
     gap: 1em;
     align-items: flex-start;
     box-sizing: border-box;
 }
 #filters {
     display: flex;
     flex-direction: column;
     gap: 1em;
     width: 300px;
     flex-shrink: 0;
     /* ADS: the lines below are for vertical scrolling if needed */
     /* max-height: 80vh; */
     /* overflow-y: auto; */
     align-self: stretch;
     box-sizing: border-box;
     padding-right: 0.5em;
 }
 #filters > div {
     display: flex;
     flex-direction: column;
     gap: 0.3em;
 }
 #filters label {
     display: flex;
     align-items: center;
     gap: 0.3em;
     cursor: pointer;
     user-select: none;
 }
 #theMetaDataTable_wrapper {
     flex: 1 1 auto;
     min-width: 0;
     box-sizing: border-box;
 }
 /*  Horizontal-scroll box around metadata tables: a too-wide table scrolls
     internally in this instead of spilling off-screen. The toolbar (Show N, paging)
     sits outside this box, so it stays visible at the wrapper's width.
 
     The genome browser page wraps this content in an old-school
     <table width="100%"> that sizes to its content. The "width: 0; min-width: 100%"
     pair stops the metadata table from reporting the (very large) content width,
     the outer table sticks to the page width, the metadata table's min-width:100% makes
     it expand to fill that, and then then metadata's overflow results in a scroll bar.
 */
 .table-xscroll {
     width: 0;
     min-width: 100%;
     overflow-x: auto;
 }
 #theMetaDataTable {
     width: 100% !important;
     box-sizing: border-box;
     box-shadow: 0 0 0 1px #ddd;
 }
 /* Light blue background for the table header (column titles + search row) */
 #theMetaDataTable thead th,
 #theMetaDataTable thead td {
     background-color: lightblue;
 }
 #theMetaDataTable td:nth-child(n+2),
 #theMetaDataTable th:nth-child(n+2) {
     vertical-align: top;
     /* white-space: nowrap; */
     /* overflow: hidden;          /* hide overflow */
     min-width: 100px; /* Adjust width as needed */
 }
 /* Override Select 3.0's custom checkbox styling to use native appearance */
 table.dataTable input.dt-select-checkbox {
     appearance: auto;
     width: auto;
     height: auto;
 }
 table.dataTable input.dt-select-checkbox:checked::after,
 table.dataTable input.dt-select-checkbox:indeterminate::after {
     display: none;
 }
 #theMetaDataTable input.row-select {
     /* additional checkbox styling */
 }
 table.dataTable {
     width: 100%;
     border-collapse: collapse;
     table-layout: auto;
 }
 table.dataTable tbody tr:nth-child(odd) {
     background-color: #f0f0f0;
 }
 table.dataTable tbody tr:nth-child(even) {
     background-color: #ffffff;
 }
 table.dataTable tbody tr:hover {
     background-color: #d3eaff; /* Light blue on hover */
 }
 .color-box {
     display: inline-block;
     width: 1em;
     height: 1em;
     vertical-align: middle;
     /* background-color set dynamically in JS */
 }
 
 .facet-heading {
     cursor: pointer;
     user-select: none;
 }
 .facet-heading::after {
     content: "  ❯";
     margin-left: 0.3em;
     display: inline-block;
     transition: transform 0.2s;
     transform: rotate(90deg);   /* points down = expanded */
 }
 .facet-heading.collapsed::after {
     transform: rotate(0deg);    /* points right = collapsed */
 }
 .facet-body {
     display: flex;
     flex-direction: column;
     gap: 0.3em;
 }
 .facet-body.collapsed {
     display: none;
 }
 
 /* "All / Selected" segmented tabs in the toolbar */
 #selected-filter {
     display: inline-flex;
     align-items: stretch;
     order: -1;       /* sit at the left edge, ahead of the page-length dropdown */
 }
 /* Top toolbar: both the page-length dropdown and the "show only selected"
    toggle live inside .dt-length (the toggle is appended there in
    facetedComposite.js). Stretch the cell full width and push the two
    children apart: toggle on the left (via order: -1 above), dropdown right. */
 #theMetaDataTable_wrapper .dt-layout-start:has(.dt-length) {
     flex: 1 1 auto;
 }
 .dt-length {
     display: flex !important;
     width: 100%;
     align-items: center;
     justify-content: space-between;
 }
 
 /* Tab-like blocks for the "All / Selected" selection filter */
 .filter-tab {
     border: 1px solid #aaa;
     background-color: #f0f0f0;
     color: #333;
     padding: 0.3em 0.9em;
     font-size: 0.9em;
     cursor: pointer;
     user-select: none;
     transition: background-color 0.15s;
 }
 .filter-tab:first-of-type {
     border-radius: 4px 0 0 4px;
     border-right: none;   /* avoid a doubled border between the two tabs */
 }
 .filter-tab:last-of-type {
     border-radius: 0 4px 4px 0;
 }
 .filter-tab:hover {
     background-color: #e3e3e3;
 }
 .filter-tab.active {
     background-color: lightblue;   /* matches the table header band */
     color: #000;
     font-weight: bold;
 }
 
 /* Active filter chips bar */
 #active-filters {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: flex-start;
     text-align: left;
     gap: 0.4em;
     padding: 0.5em 0;
     border-top: 1px solid #ddd;
     margin-top: 0.75em;
     width: 100%;
 }
 .filter-chip-group-label {
     font-weight: bold;
     font-size: 0.85em;
     margin-left: 0.3em;
 }
 .filter-chip {
     display: inline-flex;
     align-items: center;
     background-color: #e8f0fe;
     border: 1px solid #c2d6f2;
     border-radius: 12px;
     padding: 0.15em 0.5em;
     font-size: 0.85em;
     white-space: nowrap;
 }
 .filter-chip .remove-chip {
     background: none;
     border: none;
     cursor: pointer;
     font-size: 1em;
     line-height: 1;
     padding: 0 0 0 0.25em;
     color: #666;
 }
 .filter-chip .remove-chip:hover {
     color: #c00;
 }
+
+/* One-line hint above the facets and table: the table's row order sets the order
+   the tracks are drawn in the browser image.  Kept to a single muted line so the
+   page stays uncluttered - the details are in the info icon's hover text.
+   Font size comes from the .smallText class in HGStyle.css. */
+#sortNote {
+    color: #555;            /* same muted grey as the loading indicator */
+    padding-bottom: 0.6em;
+    /* The table below is picked out by its header band and the All/Selected tabs,
+       but the facet names are only bold text, so without a rule here the note runs
+       straight into them.  Matches the #active-filters separator above. */
+    border-bottom: 1px solid #ddd;
+    margin-bottom: 0.75em;
+}