Remove Gaze Samples stat and Attention Timeline section from report

Trims the stat row to the 4 cards that matter for a glance (Session
Length, Elements Fixated, Most Attended, Mouse Events) and drops the
Attention Timeline chart along with its now-unused data plumbing
(compute_timeline(), TIMELINE/DURATION JS constants, legend blurb).

analysis.py

@@ -1,9 +1,9 @@
 """
 analysis.py
 Turns a raw InsightUX session (gaze_log.jsonl + dom_log.jsonl + screenshots/)
-into a self-contained HTML report: ranked attention (in plain language),
-a dwell timeline, and per-scroll-position heatmaps drawn directly on top
-of what the page actually looked like.
+into a self-contained HTML report: ranked attention (in plain language)
+and per-scroll-position heatmaps drawn directly on top of what the page
+actually looked like.
 
 Usage:
     from analysis import generate_report
@@ -201,25 +201,6 @@ def compute_dwell_ranking(attributed):
     return ranking
 
 
-def compute_timeline(attributed):
-    segments = []
-    if not attributed:
-        return segments
-    cur_raw = attributed[0][1]
-    seg_start = attributed[0][0]
-    last_t = attributed[0][0]
-    for t, label in attributed[1:]:
-        if label != cur_raw:
-            segments.append({"start": round(seg_start, 2), "end": round(last_t, 2),
-                              "label": friendly_label(cur_raw) if cur_raw else None})
-            cur_raw = label
-            seg_start = t
-        last_t = t
-    segments.append({"start": round(seg_start, 2), "end": round(last_t, 2),
-                      "label": friendly_label(cur_raw) if cur_raw else None})
-    return segments
-
-
 def session_summary(gaze, dom):
     if not gaze:
         return {"duration": 0.0, "url": None, "samples": 0}
@@ -402,7 +383,7 @@ __THEME_CSS__
   .topbar .actions { margin-left: auto; display: flex; gap: 8px; }
   .topbar .actions .iux-btn { padding: 8px 13px; font-size: 12px; }
 
-  .stat-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 22px; }
+  .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
   .stat {
     padding: 16px 18px; position: relative; overflow: hidden;
   }
@@ -550,7 +531,6 @@ __THEME_CSS__
   <div class="stat iux-card hoverable"><div class="icon-badge">__LAYERS_ICON__</div><div class="v">__NUM_ELEMENTS__</div><div class="l">Elements Fixated</div></div>
   <div class="stat iux-card hoverable"><div class="icon-badge">__TARGET_ICON__</div><div class="v" style="font-size:14px;">__TOP_LABEL__</div><div class="l">Most Attended</div></div>
   <div class="stat iux-card hoverable"><div class="icon-badge">__CURSOR_ICON__</div><div class="v">__CLICK_COUNT__</div><div class="l">Mouse Events</div></div>
-  <div class="stat iux-card hoverable"><div class="icon-badge">__TYPE_ICON__</div><div class="v">__SAMPLES__</div><div class="l">Gaze Samples</div></div>
 </div>
 
 <div class="grid">
@@ -575,8 +555,6 @@ __THEME_CSS__
       the page automatically whenever you scrolled far enough that the view
       changed meaningfully. Use the full-session export buttons to download
       one stitched image covering the entire page.</p>
-      <p><b>Timeline</b> — the same attention data laid out across time,
-      so you can see the order things were looked at, not just the totals.</p>
     </div>
   </div>
   <div class="panel iux-card full iux-fade-in">
@@ -613,10 +591,6 @@ __THEME_CSS__
     </div>
     <div class="elem-chart-hint" id="elemChartHint" style="display:none;">Scroll to see every element &rarr;</div>
   </div>
-  <div class="panel iux-card full iux-fade-in">
-    <h2>__CLOCK_ICON__ Attention Timeline</h2>
-    <canvas id="timeline" width="1240" height="320"></canvas>
-  </div>
   <div class="panel iux-card iux-fade-in">
     <h2>__CURSOR_ICON__ Mouse — Most Interacted Elements</h2>
     <div id="mouseInterests"></div>
@@ -665,9 +639,7 @@ document.getElementById('themeToggle').addEventListener('click', function(){
 });
 
 const RANKING  = __RANKING_JSON__;
-const TIMELINE = __TIMELINE_JSON__;
 const SEGMENTS = __SEGMENTS_JSON__;
-const DURATION = __DURATION_JSON__;
 const MOUSE_INTERESTS = __MOUSE_INTERESTS_JSON__;
 const MOUSE_CLICKS = __MOUSE_CLICKS_JSON__;
 const MOUSE_SEGMENTS = __MOUSE_SEGMENTS_JSON__;
@@ -1587,78 +1559,6 @@ function showToast(message, isError, onRetry){
   window.addEventListener('resize', function(){ layout(); paint(); });
 })();
 
-// ---------- Timeline ----------
-(function(){
-  const cv = document.getElementById('timeline');
-  const ctx = cv.getContext('2d');
-
-  function paintTimeline(){
-    const bg = getComputedStyle(document.documentElement).getPropertyValue('--iux-bg-alt').trim() || '#171923';
-    const dim = getComputedStyle(document.documentElement).getPropertyValue('--iux-text-dim').trim() || '#9a95b3';
-    ctx.clearRect(0, 0, cv.width, cv.height);
-    ctx.fillStyle = bg;
-    ctx.fillRect(0, 0, cv.width, cv.height);
-    if (!TIMELINE.length || DURATION <= 0) { return; }
-
-    const labels = [...new Set(TIMELINE.filter(s => s.label).map(s => s.label))];
-    const rowH = Math.min(28, (cv.height - 40) / Math.max(labels.length, 1));
-    const leftPad = 220, topPad = 10, plotW = cv.width - leftPad - 20;
-
-    ctx.font = '11px -apple-system, Arial';
-    ctx.fillStyle = dim;
-    labels.forEach((lab, i) => {
-      const y = topPad + i * rowH;
-      ctx.fillText(lab.length > 28 ? lab.slice(0,28)+'…' : lab, 4, y + rowH*0.65);
-    });
-
-    const colors = ['#6366F1', '#8B5CF6', '#C084FC', '#67E8F9', '#FBBF24', '#34D399'];
-    TIMELINE.forEach(seg => {
-      if (!seg.label) return;
-      const rowIdx = labels.indexOf(seg.label);
-      const x = leftPad + (seg.start / DURATION) * plotW;
-      const w = Math.max(2, ((seg.end - seg.start) / DURATION) * plotW);
-      const y = topPad + rowIdx * rowH + 3;
-      ctx.fillStyle = colors[rowIdx % colors.length];
-      const rr = Math.min(4, (rowH - 6) / 2, w / 2);
-      ctx.beginPath();
-      ctx.moveTo(x + rr, y);
-      ctx.arcTo(x + w, y, x + w, y + (rowH - 6), rr);
-      ctx.arcTo(x + w, y + (rowH - 6), x, y + (rowH - 6), rr);
-      ctx.arcTo(x, y + (rowH - 6), x, y, rr);
-      ctx.arcTo(x, y, x + w, y, rr);
-      ctx.closePath();
-      ctx.fill();
-    });
-
-    ctx.strokeStyle = '#302a3d55';
-    ctx.beginPath();
-    ctx.moveTo(leftPad, cv.height - 18);
-    ctx.lineTo(cv.width - 10, cv.height - 18);
-    ctx.stroke();
-    ctx.fillStyle = dim;
-    [0, 0.25, 0.5, 0.75, 1].forEach(f => {
-      const x = leftPad + f * plotW;
-      ctx.fillText((f * DURATION).toFixed(1) + 's', x, cv.height - 4);
-    });
-  }
-
-  paintTimeline();
-  window.insightuxRepaintCanvases.push(paintTimeline);
-
-  const leftPadForHit = 220, topPadForHit = 10;
-  cv.addEventListener('mousemove', function(e){
-    cv.title = '';
-    if (!TIMELINE.length || DURATION <= 0) return;
-    const rect = cv.getBoundingClientRect();
-    const scaleX = cv.width / rect.width;
-    const mx = (e.clientX - rect.left) * scaleX;
-    const plotW = cv.width - leftPadForHit - 20;
-    if (mx < leftPadForHit) return;
-    const t = ((mx - leftPadForHit) / plotW) * DURATION;
-    const hit = TIMELINE.find(s => s.label && t >= s.start && t <= s.end);
-    if (hit) cv.title = hit.label + ' — ' + hit.start.toFixed(1) + 's to ' + hit.end.toFixed(1) + 's';
-  });
-})();
 </script>
 </body>
 </html>
@@ -1670,7 +1570,6 @@ def generate_report(session_dir):
     attributed = attribute_gaze(gaze, dom)
 
     ranking = compute_dwell_ranking(attributed)
-    timeline = compute_timeline(attributed)
     segments = build_screenshot_segments(gaze, dom, session_dir)
     summary = session_summary(gaze, dom)
     mouse = summarize_mouse(session_dir)
@@ -1698,9 +1597,7 @@ def generate_report(session_dir):
     html = html.replace("__TOP_LABEL__", top_label)
     html = html.replace("__CLICK_COUNT__", str(mouse["click_count"]))
     html = html.replace("__RANKING_JSON__", json.dumps(ranking))
-    html = html.replace("__TIMELINE_JSON__", json.dumps(timeline))
     html = html.replace("__SEGMENTS_JSON__", json.dumps(segments))
-    html = html.replace("__DURATION_JSON__", json.dumps(summary["duration"]))
     html = html.replace("__MOUSE_INTERESTS_JSON__", json.dumps(mouse["interests"]))
     html = html.replace("__MOUSE_CLICKS_JSON__", json.dumps(mouse["clicks"]))
     html = html.replace("__MOUSE_SEGMENTS_JSON__", json.dumps(mouse_segments))