Audio Wave: skip overlapping segment labels (readable when splits are close)

Labels crowded when splits are near each other. Now labels are shortened to S{n} and
skipped if within ~26px (canvas) / 30px (image) of the previous drawn label; notes gated
wider. Lines still drawn for every split.

nodes/audio_guide.py

@@ -167,14 +167,16 @@ def _render(rms_n, times, duration, beats, bounds, segs,
     for b in beats:                                    # beat ticks (faint, centre band)
         if t0 <= b <= t1:
             d.line([(X(b), mid - 4), (X(b), mid + 4)], fill=(150, 90, 60), width=1)
+    last_lx, last_nx = -999, -999                      # skip labels/notes that would overlap
     for s in segs:                                     # segment line + label top + note bottom
         if not (t0 <= s["start_s"] <= t1):
             continue
         x = X(s["start_s"])
         d.line([(x, 0), (x, H)], fill=(120, 190, 150), width=1)
-        d.text((x + 3, 3), f"S{s['segment']} {s['start_s']}s/{s['frames']}f", fill=(240, 240, 240))
-        if s.get("note"):
-            d.text((x + 3, H - 13), s["note"][:28], fill=(255, 210, 110))
+        if x - last_lx > 30:
+            d.text((x + 2, 3), f"S{s['segment']}", fill=(240, 240, 240)); last_lx = x
+        if s.get("note") and x - last_nx > 70:
+            d.text((x + 2, H - 13), s["note"][:22], fill=(255, 210, 110)); last_nx = x
     arr = np.asarray(img, dtype=np.float32) / 255.0
     return torch.from_numpy(arr)[None, ...]           # [1, H, W, 3]
 

web/audio_wave.js

@@ -145,13 +145,13 @@ function setupWave(node) {
     const { seg } = parseNotes(getW(node, "notes")?.value);
     ctx.font = "10px monospace";
     const nseg = nSegs();
+    let lastLabelX = -999, lastNoteX = -999;            // skip labels that would overlap
     pts.forEach((s, i) => {                              // split line; label seg i+1 (skip tail)
       const x = t2x(s);
       ctx.strokeStyle = "#7ec8a0"; ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke();
-      if (i < nseg) {
-        ctx.fillStyle = "#fff"; ctx.fillText(`S${i + 1} ${s.toFixed(1)}s`, x + 3, 11);
-        if (seg[i + 1]) { ctx.fillStyle = "#ffd27a"; ctx.fillText(seg[i + 1].slice(0, 22), x + 3, H - 4); }
-      }
+      if (i >= nseg) return;
+      if (x - lastLabelX > 26) { ctx.fillStyle = "#fff"; ctx.fillText(`S${i + 1}`, x + 2, 11); lastLabelX = x; }
+      if (seg[i + 1] && x - lastNoteX > 60) { ctx.fillStyle = "#ffd27a"; ctx.fillText(seg[i + 1].slice(0, 16), x + 2, H - 4); lastNoteX = x; }
     });
     ctx.strokeStyle = "#ff5a3c"; const px = t2x(st.audio.currentTime || 0);  // playhead
     ctx.beginPath(); ctx.moveTo(px, 0); ctx.lineTo(px, H); ctx.stroke();