Add hoverable/expandable About panels to data-type checkboxes

- Remove sub-labels (Power, MW) and ⓘ info icon from checkbox rows
- Add ▶ About toggle button next to each checkbox label; hover shows
a compact tooltip, click expands an inline column-definition panel
- Stack same-section result panels flush (card-group, no gap) while
keeping clear spacing between top-level sections (Select Data,
SCADA results, Energy results, About this app)

https://claude.ai/code/session_01TrCrzZmWbQscJiAQaW7Rg8

app/static/css/style.css

@@ -118,10 +118,22 @@ select:disabled, input:disabled {
 .data-type-group {
   display: flex;
   flex-direction: column;
-  gap: 0.45rem;
+  gap: 0.55rem;
   padding-top: 0.2rem;
 }
 
+.check-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.check-row-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .check-label {
   display: flex;
   align-items: center;
@@ -147,12 +159,69 @@ select:disabled, input:disabled {
   cursor: not-allowed;
 }
 
-.check-sub {
-  font-size: 0.78rem;
+/* ▶ About toggle button */
+.about-toggle {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 0.72rem;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  padding: 0 0.15rem;
+  position: relative;
+  white-space: nowrap;
+  transition: color 0.15s;
+}
+
+.about-toggle:hover { color: var(--accent); }
+
+/* Tooltip on the About button */
+.about-toggle::after {
+  content: attr(data-tip);
+  position: absolute;
+  top: calc(100% + 7px);
+  left: 0;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.5rem 0.7rem;
+  font-size: 0.75rem;
   font-weight: 400;
+  color: var(--text);
+  white-space: normal;
+  width: 260px;
+  z-index: 200;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s;
+  line-height: 1.5;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
+  text-align: left;
+}
+
+.about-toggle:hover::after { opacity: 1; }
+
+/* Expandable about panel */
+.check-about {
+  margin-top: 0.55rem;
+  padding: 0.7rem 0.85rem;
+  background: rgba(255,255,255,0.025);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-size: 0.78rem;
   color: var(--text-muted);
+  line-height: 1.6;
 }
 
+.about-source {
+  font-size: 0.75rem;
+  margin-bottom: 0.6rem;
+  color: var(--text-muted);
+}
+
+.about-source strong { color: var(--text); }
+
 /* ── Buttons ── */
 .btn {
   display: inline-flex;
@@ -415,12 +484,32 @@ select:disabled, input:disabled {
   gap: 3rem;
 }
 
-/* Space between the individual panels within each section */
+/* Panels within each section are stacked flush — no gap */
 #scada-results,
 #energy-results {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 0;
+}
+
+/* Card-group: square off inner edges, collapse duplicate borders */
+#scada-results .panel,
+#energy-results .panel {
+  border-radius: 0;
+}
+#scada-results .panel:first-child,
+#energy-results .panel:first-child {
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
+}
+#scada-results .panel:last-child,
+#energy-results .panel:last-child {
+  border-bottom-left-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
+}
+#scada-results .panel + .panel,
+#energy-results .panel + .panel {
+  border-top: none;
 }
 
 /* ── Charts ── */

app/static/index.html

@@ -48,15 +48,65 @@
       <div class="form-group">
         <label>Data Types</label>
         <div class="data-type-group">
-          <label class="check-label">
-            <input type="checkbox" id="chk-scada" checked />
-            4-second SCADA <span class="check-sub">(Power, MW)</span>
-          </label>
-          <label class="check-label">
-            <input type="checkbox" id="chk-energy" checked />
-            5-minute Dispatch <span class="check-sub">(Energy, MWh)</span>
-            <span class="info-icon tip-below" data-tip="INITIALMW, INITIAL_ENERGY_STORAGE and ENERGY_STORAGE from AEMO's DISPATCH_UNIT_SOLUTION table. Available from 11 Feb 2025.">ⓘ</span>
-          </label>
+
+          <div class="check-row">
+            <div class="check-row-header">
+              <label class="check-label">
+                <input type="checkbox" id="chk-scada" checked />
+                4-second SCADA
+              </label>
+              <button class="about-toggle" data-tip="4-sec power output &amp; quality flags from AEMO FPP Daily (PUBLIC_NEXT_DAY_FPPMW). Available from 28 Feb 2025." aria-expanded="false" aria-controls="about-scada">▶ About</button>
+            </div>
+            <div class="check-about hidden" id="about-scada">
+              <p class="about-source">Source: <strong>PUBLIC_NEXT_DAY_FPPMW</strong> (FPP Daily) &nbsp;·&nbsp; Available from <strong>28 Feb 2025</strong></p>
+              <div class="col-defs">
+                <div class="col-def">
+                  <span class="col-name">INTERVAL_DATETIME</span>
+                  <span class="col-desc">Target 4-second grid slot (YYYY/MM/DD HH:MM:SS). Each measurement is snapped to the nearest standard interval.</span>
+                </div>
+                <div class="col-def">
+                  <span class="col-name">MEASUREMENT_DATETIME</span>
+                  <span class="col-desc">Actual timestamp the SCADA reading was recorded. May differ slightly from <code>INTERVAL_DATETIME</code> due to communication latency.</span>
+                </div>
+                <div class="col-def">
+                  <span class="col-name">MEASURED_MW</span>
+                  <span class="col-desc">Instantaneous power (MW). Positive = discharging (generation), negative = charging (load).</span>
+                </div>
+                <div class="col-def">
+                  <span class="col-name">MW_QUALITY_FLAG</span>
+                  <span class="col-desc">Data health code — <strong style="color:var(--good)">0</strong> Good · <strong style="color:var(--suspect)">1</strong> Substituted · <strong style="color:var(--bad)">2</strong> Bad · <strong style="color:var(--na)">3</strong> Manual Override.</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="check-row">
+            <div class="check-row-header">
+              <label class="check-label">
+                <input type="checkbox" id="chk-energy" checked />
+                5-minute Dispatch
+              </label>
+              <button class="about-toggle" data-tip="5-min dispatch energy storage &amp; MW from AEMO DISPATCH_UNIT_SOLUTION. Available from 11 Feb 2025." aria-expanded="false" aria-controls="about-energy">▶ About</button>
+            </div>
+            <div class="check-about hidden" id="about-energy">
+              <p class="about-source">Source: <strong>DISPATCH_UNIT_SOLUTION</strong> via Next_Day_Dispatch &nbsp;·&nbsp; Available from <strong>11 Feb 2025</strong></p>
+              <div class="col-defs">
+                <div class="col-def">
+                  <span class="col-name">INITIALMW</span>
+                  <span class="col-desc">Actual power output (MW) at the exact start of the 5-minute dispatch interval. Used as the baseline for the next dispatch instruction.</span>
+                </div>
+                <div class="col-def">
+                  <span class="col-name">INITIAL_ENERGY_STORAGE</span>
+                  <span class="col-desc">State of Energy (SoE) at interval start (MWh) — energy physically available in the battery before dispatch began.</span>
+                </div>
+                <div class="col-def">
+                  <span class="col-name">ENERGY_STORAGE</span>
+                  <span class="col-desc">Target energy level at interval end (MWh) — accounts for scheduled charging or discharging during the 5-minute block.</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
         </div>
       </div>
 

app/static/js/app.js

@@ -85,6 +85,17 @@ async function init() {
   chkScada.addEventListener('change', onCheckboxChange);
   chkEnergy.addEventListener('change', onCheckboxChange);
   btnLoad.addEventListener('click', onLoad);
+
+  // ▶ About toggles
+  document.querySelectorAll('.about-toggle').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const panel    = document.getElementById(btn.getAttribute('aria-controls'));
+      const expanded = btn.getAttribute('aria-expanded') === 'true';
+      btn.setAttribute('aria-expanded', String(!expanded));
+      panel.classList.toggle('hidden', expanded);
+      btn.textContent = expanded ? '▶ About' : '▼ About';
+    });
+  });
 }
 
 function onStateChange() {