From 0f32001b466def0cee753557ad6e296cf15e2504 Mon Sep 17 00:00:00 2001
From: Cliff Click <cliffc@acm.org>
Date: Wed, 23 Sep 2026 16:35:50 -0700
Subject: Keyboard shortcuts

Fast forward/reverse, pick-a-frame.
Shorter type names.
---
 graph/web/index.html | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

(limited to 'graph/web/index.html')

diff --git a/graph/web/index.html b/graph/web/index.html
index a568cbc6..909f7b1d 100644
--- a/graph/web/index.html
+++ b/graph/web/index.html
@@ -28,6 +28,12 @@
     .node.near .box { stroke:#c18221; stroke-width:2; }
     .node.focus .box { stroke:#9c4900; stroke-width:3; }
     .node.selected .box { stroke:#1569b9; stroke-width:3; }
+    .node.folded .box { stroke-width:4; }
+    .region-box { stroke:#9da9b8; stroke-width:1.5; }
+    .fold-btn { cursor:pointer; }
+    .fold-btn rect { fill:white; stroke:#596674; }
+    .fold-btn text { font-size:14px; fill:#152330; }
+    .fold-btn:focus rect { stroke:#1569b9; stroke-width:2; }
     .head { font-size:10px; fill:#596674; }
     .label { font-size:12px; fill:#152330; font-weight:600; }
     .type { font-size:11px; fill:#455768; }
@@ -38,13 +44,16 @@
     #detail { position:absolute; top:8px; right:8px; margin:0; padding:12px; max-width:320px;
       max-height:45%; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere;
       background:#fffffff2; border:1px solid #bac5d0; border-radius:4px; font-size:12px; }
-    .controls { display:flex; justify-content:center; align-items:center; gap:4px; padding:4px; }
+    .controls { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; padding:6px; }
     .button { color:white; background:black; font-size:20px; min-width:30px; }
     .button:disabled { background:grey; }
     .count { font-size:20px; min-width:35px; text-align:center; }
+    #N { width:6ch; }
+    #scrub { width:clamp(120px,35vw,600px); }
   </style>
   <script src="vendor/d3.v7.min.js"></script>
   <script src="vendor/elk-api.js"></script>
+  <script src="groups.js"></script>
   <script src="layout.js"></script>
   <script src="render.js"></script>
 </head>
@@ -58,6 +67,7 @@
       <div class="tools">
         <button id="fit" type="button" disabled>Fit</button>
         <button id="save" type="button" disabled>Save SVG</button>
+        <button id="unfold" type="button" disabled>Unfold all</button>
         <label><input id="assocs" type="checkbox"> Associations</label>
         <label><input id="near" type="checkbox" checked> Peep neighborhood</label>
         <span class="ctrl">Control</span><span class="data">Data</span><span class="mem">Memory</span>
@@ -67,11 +77,15 @@
     </div>
     <div id="graph"><div id="elk"></div><pre id="detail" hidden></pre></div>
     <div class="controls">
+      <button id="doFirst" type="button" onclick="doFirst()" class="button" aria-label="First frame" title="First frame">|&#11164;</button>
       <button id="doPrev" type="button" onclick="doPrev()" class="button" aria-label="Previous frame">&#11164;</button>
-      <span id="N" class="count">0</span>
+      <label for="N">Frame</label>
+      <input id="N" class="count" type="number" min="1" max="1" step="1" value="0" disabled title="Enter a frame number">
       <span>/</span>
       <span id="len" class="count">0</span>
       <button id="doNext" type="button" onclick="doNext()" class="button" aria-label="Next frame">&#11166;</button>
+      <button id="doLast" type="button" onclick="doLast()" class="button" aria-label="Last frame" title="Last available frame">&#11166;|</button>
+      <input id="scrub" type="range" min="1" max="1" step="1" value="1" disabled aria-label="Frame slider">
       <button id="doExit" type="button" onclick="doExit()" class="button">Exit</button>
     </div>
   </div>
-- 
cgit v1.2.3