4f451cd79d08aa40353d077a2d014f9821581901
jcasper
  Thu Mar 26 16:16:28 2026 -0700
Adding selected track count to the top of the table for faceted composites, refs #36320

diff --git src/hg/js/facetedComposite.js src/hg/js/facetedComposite.js
index e66abf81d23..b974724bbc5 100644
--- src/hg/js/facetedComposite.js
+++ src/hg/js/facetedComposite.js
@@ -199,34 +199,44 @@
 
         // Create "show only selected" toggle in the toolbar
         const lengthDiv = document.querySelector(
             "#theMetaDataTable_wrapper .dt-length");
         const toggleWrapper = document.createElement("div");
         toggleWrapper.id = "selected-filter";
         const toggleLabel = document.createElement("label");
         toggleLabel.classList.add("toggle-switch");
         const toggleCheckbox = document.createElement("input");
         toggleCheckbox.type = "checkbox";
         toggleCheckbox.dataset.selectFilter = "true";
         toggleLabel.appendChild(toggleCheckbox);
         toggleLabel.appendChild(Object.assign(
             document.createElement("span"), {className: "toggle-slider"}));
         toggleWrapper.appendChild(toggleLabel);
-        toggleWrapper.appendChild(Object.assign(
-            document.createElement("span"), {textContent: "Show only selected rows"}));
+        const toggleText = Object.assign(
+            document.createElement("span"), {id: "selected-filter-text"});
+        toggleWrapper.appendChild(toggleText);
         lengthDiv.appendChild(toggleWrapper);
 
+        function updateSelectedText() {
+            const selCount = table.rows({selected: true}).count();
+            const totalCount = table.rows().count();
+            toggleText.textContent =
+                `Show only selected rows (${selCount} of ${totalCount} selected)`;
+        }
+        updateSelectedText();
+        table.on("select deselect", updateSelectedText);
+
         // Create active-filters chip bar (hidden when empty)
         const activeFiltersDiv = document.createElement("div");
         activeFiltersDiv.id = "active-filters";
         activeFiltersDiv.style.display = "none";
         const wrapper = document.getElementById("theMetaDataTable_wrapper");
         wrapper.insertBefore(activeFiltersDiv, lengthDiv.nextSibling);
 
         // define inputs for search functionality for each column in the table
         const row = document.querySelector("#theMetaDataTable thead").insertRow();
         columns.forEach((col) => {
             const cell = row.insertCell();
             if (col.data === null) {
                 // left empty; toggle is now in the toolbar
             } else if (col.data && col.data.startsWith("_")) {
                 // no search box for hidden-facet columns