From 2bfd487106314b30b49936ab7675b3791ceb8159 Mon Sep 17 00:00:00 2001
From: ngxstat-bot <bot@ngxstat.local>
Date: Tue, 19 Aug 2025 00:28:42 -0500
Subject: [PATCH] UX: merge Distribution and Tables into a single Breakdown tab
 with clear option help\n\n- Replace separate Distribution/Tables tabs with
 one Breakdown tab\n- Breakdown shows categorical charts and data tables
 together\n- Add in-page help explaining Percent mode, Grouping, and Exclude
 '-'\n- Update filtering, containers, and tab logic to target new tab\n- Keep
 existing report JSON/HTML contracts; no server changes required

---
 templates/index.html | 43 ++++++++++++++++++++++---------------------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 7e16527..41307d7 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -14,8 +14,7 @@
       <ul>
         <li class="is-active" data-tab="recent"><a>Recent</a></li>
         <li data-tab="trends"><a>Trends</a></li>
-        <li data-tab="distribution"><a>Distribution</a></li>
-        <li data-tab="tables"><a>Tables</a></li>
+        <li data-tab="breakdown"><a>Breakdown</a></li>
         <li data-tab="analysis"><a>Analysis</a></li>
       </ul>
     </div>
@@ -64,17 +63,17 @@
         </label>
       </div>
       <div id="mode-percent-control" class="control is-hidden">
-        <label class="checkbox is-small">
+        <label class="checkbox is-small" title="Show values as a percentage of the total, instead of raw counts.">
           <input type="checkbox" id="percent-toggle"> Percent mode
         </label>
       </div>
       <div id="mode-group-control" class="control is-hidden">
-        <label class="checkbox is-small">
+        <label class="checkbox is-small" title="Combine small categories into an 'Other' slice to declutter charts.">
           <input type="checkbox" id="group-toggle" checked> Group small into Other
         </label>
       </div>
       <div id="exclude-uncached-control" class="control is-hidden">
-        <label class="checkbox is-small">
+        <label class="checkbox is-small" title="Hide uncached entries (cache status '-') from cache status distributions.">
           <input type="checkbox" id="exclude-uncached-toggle" checked> Exclude “-”
         </label>
       </div>
@@ -99,12 +98,17 @@
       <div id="reports-trends"></div>
     </div>
 
-    <div id="distribution-section" class="is-hidden">
-      <div id="reports-distribution"></div>
-    </div>
-
-    <div id="tables-section" class="is-hidden">
-      <div id="reports-tables"></div>
+    <div id="breakdown-section" class="is-hidden">
+      <div class="box mb-4">
+        <h2 class="subtitle">Breakdown</h2>
+        <p class="mb-2">Explore categorical distributions and detailed lists side-by-side. Use the options below to adjust how categories are shown.</p>
+        <ul style="margin-left: 1.2rem; list-style: disc;">
+          <li><strong>Percent mode</strong>: converts counts into percentages of the total for easier comparison.</li>
+          <li><strong>Group small into Other</strong>: combines tiny slices under a single “Other” category to declutter charts.</li>
+          <li><strong>Exclude “-”</strong>: hides uncached entries (cache status “-”) from cache status distributions.</li>
+        </ul>
+      </div>
+      <div id="reports-breakdown"></div>
     </div>
 
   <div id="analysis-section" class="is-hidden">
@@ -145,15 +149,13 @@
     const sections = {
       recent: document.getElementById('recent-section'),
       trends: document.getElementById('trends-section'),
-      distribution: document.getElementById('distribution-section'),
-      tables: document.getElementById('tables-section'),
+      breakdown: document.getElementById('breakdown-section'),
       analysis: document.getElementById('analysis-section')
     };
     const containers = {
       recent: document.getElementById('overview-reports'),
       trends: document.getElementById('reports-trends'),
-      distribution: document.getElementById('reports-distribution'),
-      tables: document.getElementById('reports-tables')
+      breakdown: document.getElementById('reports-breakdown')
     };
     const analysisElems = {
       missing: document.getElementById('analysis-missing'),
@@ -461,8 +463,7 @@
           const filtered = reports.filter(rep => {
             if (currentTab === 'recent') return true;
             if (currentTab === 'trends') return rep.chart !== 'table' && !isDistributionType(rep.chart);
-            if (currentTab === 'distribution') return isDistributionType(rep.chart);
-            if (currentTab === 'tables') return rep.chart === 'table';
+            if (currentTab === 'breakdown') return isDistributionType(rep.chart) || rep.chart === 'table';
             return true;
           });
           // If no explicit window was given (URL or saved state), honor first report's default
@@ -582,11 +583,11 @@
       intervalControl.classList.add('is-hidden');
       domainControl.classList.toggle('is-hidden', !showDomain);
       timeControl.classList.toggle('is-hidden', !showTime);
-      // Only show percent/group/exclude toggles on Distribution tab,
+      // Only show percent/group/exclude toggles on Breakdown tab,
       // and smoothing only on Trends tab
-      modePercentControl.classList.toggle('is-hidden', name !== 'distribution');
-      modeGroupControl.classList.toggle('is-hidden', name !== 'distribution');
-      excludeUncachedControl.classList.toggle('is-hidden', name !== 'distribution');
+      modePercentControl.classList.toggle('is-hidden', name !== 'breakdown');
+      modeGroupControl.classList.toggle('is-hidden', name !== 'breakdown');
+      excludeUncachedControl.classList.toggle('is-hidden', name !== 'breakdown');
       smoothControl.classList.toggle('is-hidden', name !== 'trends');
       updateURL();
       if (name === 'recent') {