From 2cbd0ed1c4998a143a60f09e967772c49344ec6b Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Thu, 19 Mar 2026 02:56:40 +0000
Subject: [PATCH] Add jump nav buttons for chain lengths in Route Patterns

---
 public/analytics.js | 24 ++++++++++++++++++++----
 public/style.css    |  6 ++++++
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/public/analytics.js b/public/analytics.js
index aaa8165f..cdec50b7 100644
--- a/public/analytics.js
+++ b/public/analytics.js
@@ -807,10 +807,17 @@
             <label style="display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;cursor:pointer;font-size:0.9em">
               <input type="checkbox" id="hideCollisions" ${localStorage.getItem('subpath-hide-collisions') === '1' ? 'checked' : ''}> Hide likely prefix collisions (self-loops)
             </label>
-            ${renderTable(d2, 'Pairs (2-hop links)')}
-            ${renderTable(d3, 'Triples (3-hop chains)')}
-            ${renderTable(d4, 'Quads (4-hop chains)')}
-            ${renderTable(d5, 'Long chains (5+ hops)')}
+            <div class="subpath-jump-nav">
+              <span>Jump to:</span>
+              <a href="#sp-pairs">Pairs</a>
+              <a href="#sp-triples">Triples</a>
+              <a href="#sp-quads">Quads</a>
+              <a href="#sp-long">5+ hops</a>
+            </div>
+            <div id="sp-pairs">${renderTable(d2, 'Pairs (2-hop links)')}</div>
+            <div id="sp-triples">${renderTable(d3, 'Triples (3-hop chains)')}</div>
+            <div id="sp-quads">${renderTable(d4, 'Quads (4-hop chains)')}</div>
+            <div id="sp-long">${renderTable(d5, 'Long chains (5+ hops)')}</div>
           </div>
           <div class="subpath-detail" id="subpathDetail">
             <div class="text-muted" style="padding:40px;text-align:center">Select a route to view details</div>
@@ -826,6 +833,15 @@
         loadSubpathDetail(tr.dataset.hops);
       });
 
+      // Jump nav — scroll within list panel
+      el.querySelectorAll('.subpath-jump-nav a').forEach(a => {
+        a.addEventListener('click', e => {
+          e.preventDefault();
+          const target = document.getElementById(a.getAttribute('href').slice(1));
+          if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        });
+      });
+
       // Collision toggle
       const toggle = document.getElementById('hideCollisions');
       function applyCollisionFilter() {
diff --git a/public/style.css b/public/style.css
index a400cf4a..a5575519 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1178,3 +1178,9 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
   .subpath-layout { flex-direction: column; height: auto; }
   .subpath-detail { width: 100%; border-left: none; border-top: 1px solid var(--border, #e5e7eb); }
 }
+
+/* Subpath jump nav */
+.subpath-jump-nav { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; font-size: 0.9em; flex-wrap: wrap; }
+.subpath-jump-nav span { color: #9ca3af; }
+.subpath-jump-nav a { padding: 4px 12px; border-radius: 4px; background: var(--accent, #3b82f6); color: #fff; text-decoration: none; font-size: 0.85em; }
+.subpath-jump-nav a:hover { opacity: 0.8; }