Fix full-session heatmap viewer not opening; switch chart to line chart

Root cause of the "buttons do nothing" report: embedded webviews can
treat a file:// screenshot drawn onto a canvas as tainted, so the later
canvas.toDataURL()/getImageData() throws a SecurityError that silently
kills the click handler before the viewer ever opens. Every screenshot
used for compositing (per-segment and full-session) now loads through
fetch() + a blob: URL instead of pointing <img> straight at the file://
path -- same bytes, non-tainting origin. Also added a lightweight toast
and try/catch around every export/compose path so a genuine failure is
visible instead of looking like nothing happened.

Replaced the Element Attention bar chart with a line chart: connected
points with smooth curve interpolation, circular markers, gradient fill,
hover tooltips, grid lines, and axis titles -- same category totals as
before, no new metric.

Still entirely confined to the report's own HTML/CSS/JS template; no
tracking, calibration, analytics, or data-collection code touched.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

analysis.py

@@ -711,10 +711,17 @@ const Viewer = (function(){
   }
 
   function open(opts){
+    const source = opts.source;
+    let dataUrl;
+    try {
+      dataUrl = (typeof source === 'string') ? source : source.toDataURL('image/png');
+    } catch (err) {
+      console.warn('[insightux-report] viewer could not read source canvas:', err);
+      return false;
+    }
     titleEl.textContent = opts.title || '';
     downloadName = opts.downloadName || 'insightux-image.png';
-    const source = opts.source;
-    img.src = (typeof source === 'string') ? source : source.toDataURL('image/png');
+    img.src = dataUrl;
     img.onload = function(){
       naturalW = img.naturalWidth; naturalH = img.naturalHeight;
       fitScreen();
@@ -722,6 +729,7 @@ const Viewer = (function(){
     el.classList.add('open');
     el.setAttribute('aria-hidden', 'false');
     document.addEventListener('keydown', onKeydown, true);
+    return true;
   }
   function close(){
     if (document.fullscreenElement) { document.exitFullscreen().catch(function(){}); }
@@ -935,13 +943,58 @@ function paintHeatLayer(ctx, w, h, points, intensity, stops, opacity, composite)
   ctx.globalCompositeOperation = prevOp;
 }
 
+// Loads a screenshot as a blob: URL rather than pointing <img> straight at
+// the file:// path. Some embedded webviews (this app's included) treat a
+// file:// image drawn onto a canvas as tainted, so a later toDataURL()/
+// getImageData() throws a SecurityError and the calling click handler dies
+// silently — the exact "button does nothing" symptom. Fetching the same
+// file and handing the canvas a blob: URL instead sidesteps that entirely;
+// the bytes on disk are identical, only how the browser tags their origin
+// changes. Every screenshot used for compositing/export goes through this.
 function loadImage(src){
-  return new Promise(function(resolve){
-    const im = new Image();
-    im.onload = function(){ resolve(im); };
-    im.onerror = function(){ resolve(null); };
-    im.src = src;
-  });
+  return fetch(src)
+    .then(function(resp){
+      if (!resp.ok) throw new Error('HTTP ' + resp.status);
+      return resp.blob();
+    })
+    .then(function(blob){
+      return new Promise(function(resolve, reject){
+        const url = URL.createObjectURL(blob);
+        const im = new Image();
+        im.onload = function(){ resolve(im); };
+        im.onerror = function(){ reject(new Error('image decode failed')); };
+        im.src = url;
+      });
+    })
+    .catch(function(err){
+      console.warn('[insightux-report] could not load screenshot:', src, err);
+      return null;
+    });
+}
+
+// Minimal toast so a failed export/viewer action is visible instead of
+// silently doing nothing — reuses the .iux-toast style already shared with
+// the toolbar/landing page design system.
+function showToast(message, isError){
+  let toast = document.getElementById('iuxReportToast');
+  if (!toast) {
+    toast = document.createElement('div');
+    toast.id = 'iuxReportToast';
+    toast.className = 'iux-toast';
+    toast.style.position = 'fixed';
+    toast.style.bottom = '24px';
+    toast.style.left = '50%';
+    toast.style.transform = 'translateX(-50%)';
+    toast.style.zIndex = '3000000';
+    toast.style.display = 'none';
+    document.body.appendChild(toast);
+  }
+  toast.textContent = message;
+  toast.style.borderColor = isError ? 'var(--iux-danger)' : 'var(--iux-border)';
+  toast.style.color = isError ? 'var(--iux-danger)' : 'var(--iux-text)';
+  toast.style.display = 'flex';
+  clearTimeout(toast._hideTimer);
+  toast._hideTimer = setTimeout(function(){ toast.style.display = 'none'; }, 3200);
 }
 
 // ---------- Screenshot-backed heatmaps: Eye / Mouse / Combined tabs, paginated ----------
@@ -1026,7 +1079,7 @@ function loadImage(src){
 
   document.getElementById('hmFullscreen').addEventListener('click', function(){
     const canvas = composeSegmentCanvas();
-    if (!canvas) return;
+    if (!canvas) { showToast('Still loading this screenshot — try again in a moment.', true); return; }
     Viewer.open({
       source: canvas,
       title: 'Scroll segment ' + (cur+1) + ' of ' + SEGMENTS.length + ' — ' + mode.charAt(0).toUpperCase() + mode.slice(1) + ' heatmap',
@@ -1035,18 +1088,23 @@ function loadImage(src){
   });
   document.getElementById('hmDownload').addEventListener('click', function(){
     const canvas = composeSegmentCanvas();
-    if (!canvas) return;
-    const a = document.createElement('a');
-    a.href = canvas.toDataURL('image/png');
-    a.download = 'insightux-' + mode + '-heatmap-segment-' + (cur+1) + '.png';
-    a.click();
+    if (!canvas) { showToast('Still loading this screenshot — try again in a moment.', true); return; }
+    try {
+      const a = document.createElement('a');
+      a.href = canvas.toDataURL('image/png');
+      a.download = 'insightux-' + mode + '-heatmap-segment-' + (cur+1) + '.png';
+      a.click();
+    } catch (err) {
+      console.warn('[insightux-report] segment download failed:', err);
+      showToast('Could not export this image.', true);
+    }
   });
 
-  function renderSegment(i){
+  async function renderSegment(i){
     const seg = SEGMENTS[i];
     area.innerHTML = `
       <div class="shot-wrap" id="shotWrap">
-        <img id="shotImg" src="${seg.screenshot}">
+        <img id="shotImg" alt="">
         <canvas id="shotCanvas"></canvas>
       </div>
       <div class="shot-nav">
@@ -1056,6 +1114,9 @@ function loadImage(src){
       </div>
     `;
 
+    document.getElementById('prevBtn').onclick = () => { if (cur>0){ cur--; renderSegment(cur); } };
+    document.getElementById('nextBtn').onclick = () => { if (cur<SEGMENTS.length-1){ cur++; renderSegment(cur); } };
+
     const img = document.getElementById('shotImg');
     const cv  = document.getElementById('shotCanvas');
     const ctx = cv.getContext('2d');
@@ -1066,10 +1127,13 @@ function loadImage(src){
       paintActive(ctx, cv.width, cv.height);
     }
 
+    // Loaded as a blob: URL (see loadImage()) so the <img> that ends up on
+    // screen is already non-tainting for the compose/download/fullscreen
+    // canvas operations above — same fix as the full-session export below.
+    const loaded = await loadImage(seg.screenshot);
+    if (!loaded || document.getElementById('shotImg') !== img) return;  // segment may have changed while awaiting
+    img.src = loaded.src;
     if (img.complete) paint(); else img.onload = paint;
-
-    document.getElementById('prevBtn').onclick = () => { if (cur>0){ cur--; renderSegment(cur); } };
-    document.getElementById('nextBtn').onclick = () => { if (cur<SEGMENTS.length-1){ cur++; renderSegment(cur); } };
   }
 
   renderSegment(cur);
@@ -1082,11 +1146,17 @@ function loadImage(src){
     try {
       const imgs = await Promise.all(SEGMENTS.map(s => loadImage(s.screenshot)));
       const valid = imgs.filter(Boolean);
-      if (!valid.length) return;
+      if (!valid.length) {
+        showToast('Could not load this session’s screenshots for a full-page export.', true);
+        return;
+      }
       const width = valid[0].naturalWidth;
       let height = 0;
       SEGMENTS.forEach((s, i) => { if (imgs[i]) height = Math.max(height, s.scrollY + imgs[i].naturalHeight); });
-      if (!height) return;
+      if (!height) {
+        showToast('Could not determine the page size for this export.', true);
+        return;
+      }
 
       const full = document.createElement('canvas');
       full.width = width; full.height = height;
@@ -1115,11 +1185,15 @@ function loadImage(src){
       // immediate download — the viewer's own Download button saves it
       // once the user has actually looked at it, same as a PDF/image
       // preview rather than a silent file-save.
-      Viewer.open({
+      const opened = Viewer.open({
         source: full,
         title: 'Full Session — ' + exportMode.charAt(0).toUpperCase() + exportMode.slice(1) + ' Heatmap',
         downloadName: 'insightux-full-session-' + exportMode + '-heatmap.png',
       });
+      if (!opened) showToast('Could not open the ' + exportMode + ' heatmap viewer.', true);
+    } catch (err) {
+      console.warn('[insightux-report] full-session export failed:', exportMode, err);
+      showToast('Could not build the full-session ' + exportMode + ' heatmap.', true);
     } finally {
       if (btn) { btn.innerHTML = original; btn.disabled = false; }
     }
@@ -1130,7 +1204,7 @@ function loadImage(src){
   document.getElementById('exportCombined').addEventListener('click', function(){ exportFullSession('combined'); });
 })();
 
-// ---------- Element Attention Analysis: vertical bar chart, client-side
+// ---------- Element Attention Analysis: line chart, client-side
 // re-aggregation of the already-computed RANKING array (compute_dwell_ranking()
 // output) — no new metric, just grouped by element type and charted. ----------
 (function(){
@@ -1160,18 +1234,17 @@ function loadImage(src){
   const totals = {};
   RANKING.forEach(r => { const c = categoryFor(r.label); totals[c] = (totals[c] || 0) + r.seconds; });
   const grand = Object.values(totals).reduce((a,b) => a+b, 0) || 1;
-  const bars = Object.keys(totals).map(key => ({
+  const points = Object.keys(totals).map(key => ({
     key, name: CATS[key].name,
     seconds: Math.round(totals[key] * 10) / 10,
     pct: Math.round(100 * totals[key] / grand),
   })).filter(r => r.seconds > 0).sort((a,b) => b.seconds - a.seconds);
 
-  if (!bars.length){
+  if (!points.length){
     wrap.innerHTML = '<div class="empty">No categorized attention data yet.</div>';
     return;
   }
 
-  const COLORS = ['#6366F1', '#8B5CF6', '#C084FC', '#67E8F9', '#FBBF24', '#34D399'];
   let animProgress = 0;
   let hoverIdx = -1;
   let raf = null;
@@ -1183,19 +1256,25 @@ function loadImage(src){
   }
 
   function geometry(){
-    const padLeft = 54, padRight = 20, padTop = 20, padBottom = 46;
+    const padLeft = 54, padRight = 30, padTop = 26, padBottom = 46;
     const plotW = cv.width - padLeft - padRight;
     const plotH = cv.height - padTop - padBottom;
-    const gap = plotW / bars.length;
-    const barW = Math.min(70, gap * 0.55);
-    const maxVal = bars[0].seconds || 1;
-    return { padLeft, padRight, padTop, padBottom, plotW, plotH, gap, barW, maxVal };
+    const maxVal = Math.max.apply(null, points.map(p => p.seconds)) || 1;
+    return { padLeft, padRight, padTop, padBottom, plotW, plotH, maxVal };
+  }
+
+  function pointXY(i, g){
+    const x = g.padLeft + (points.length === 1 ? g.plotW / 2 : (i / (points.length - 1)) * g.plotW);
+    const y = g.padTop + g.plotH - (points[i].seconds / g.maxVal) * g.plotH * animProgress;
+    return { x, y };
   }
 
   function paint(){
     const dim = getComputedStyle(document.documentElement).getPropertyValue('--iux-text-dim').trim() || '#9a95b3';
     const faint = getComputedStyle(document.documentElement).getPropertyValue('--iux-text-faint').trim() || '#6e6885';
     const border = getComputedStyle(document.documentElement).getPropertyValue('--iux-border').trim() || 'rgba(148,138,179,0.16)';
+    const surface = getComputedStyle(document.documentElement).getPropertyValue('--iux-surface').trim() || '#1E2030';
+    const strong = document.documentElement.getAttribute('data-theme') === 'light' ? '#211D33' : '#F1EEFA';
     const g = geometry();
     ctx.clearRect(0, 0, cv.width, cv.height);
 
@@ -1216,34 +1295,55 @@ function loadImage(src){
       ctx.fillText(v.toFixed(1) + 's', g.padLeft - 8, y + 3);
     }
 
-    // bars (rounded top only) + x-axis labels
-    bars.forEach((b, i) => {
-      const x = g.padLeft + i * g.gap + (g.gap - g.barW) / 2;
-      const targetH = (b.seconds / g.maxVal) * g.plotH;
-      const h = Math.max(0, targetH * animProgress);
-      const y = g.padTop + g.plotH - h;
-      const grad = ctx.createLinearGradient(0, y, 0, g.padTop + g.plotH);
-      const base = COLORS[i % COLORS.length];
-      grad.addColorStop(0, base);
-      grad.addColorStop(1, 'rgba(99,102,241,0.32)');
-      ctx.fillStyle = grad;
-      ctx.globalAlpha = (hoverIdx === -1 || hoverIdx === i) ? 1 : 0.55;
-      const rr = Math.min(8, g.barW / 2, Math.max(0, h));
+    const pts = points.map((p, i) => Object.assign({}, pointXY(i, g), { p }));
+
+    // gradient fill under the line
+    if (pts.length){
       ctx.beginPath();
-      ctx.moveTo(x, y + rr);
-      ctx.arcTo(x, y, x + rr, y, rr);
-      ctx.arcTo(x + g.barW, y, x + g.barW, y + rr, rr);
-      ctx.lineTo(x + g.barW, g.padTop + g.plotH);
-      ctx.lineTo(x, g.padTop + g.plotH);
+      ctx.moveTo(pts[0].x, g.padTop + g.plotH);
+      pts.forEach(pt => ctx.lineTo(pt.x, pt.y));
+      ctx.lineTo(pts[pts.length - 1].x, g.padTop + g.plotH);
       ctx.closePath();
+      const areaGrad = ctx.createLinearGradient(0, g.padTop, 0, g.padTop + g.plotH);
+      areaGrad.addColorStop(0, 'rgba(139,92,246,0.30)');
+      areaGrad.addColorStop(1, 'rgba(139,92,246,0)');
+      ctx.fillStyle = areaGrad;
+      ctx.fill();
+    }
+
+    // smooth connected line (quadratic curve through segment midpoints)
+    if (pts.length > 1){
+      ctx.beginPath();
+      ctx.moveTo(pts[0].x, pts[0].y);
+      for (let i = 0; i < pts.length - 1; i++){
+        const cur = pts[i], next = pts[i+1];
+        const midX = (cur.x + next.x) / 2, midY = (cur.y + next.y) / 2;
+        ctx.quadraticCurveTo(cur.x, cur.y, midX, midY);
+      }
+      ctx.lineTo(pts[pts.length-1].x, pts[pts.length-1].y);
+      ctx.strokeStyle = '#8B5CF6';
+      ctx.lineWidth = 2.5;
+      ctx.lineJoin = 'round';
+      ctx.lineCap = 'round';
+      ctx.stroke();
+    }
+
+    // markers + x-axis labels
+    pts.forEach((pt, i) => {
+      const isHover = i === hoverIdx;
+      ctx.beginPath();
+      ctx.arc(pt.x, pt.y, isHover ? 6.5 : 4.5, 0, 2 * Math.PI);
+      ctx.fillStyle = isHover ? '#C084FC' : '#8B5CF6';
       ctx.fill();
-      ctx.globalAlpha = 1;
+      ctx.lineWidth = 2;
+      ctx.strokeStyle = surface;
+      ctx.stroke();
 
-      ctx.fillStyle = i === hoverIdx ? (document.documentElement.getAttribute('data-theme') === 'light' ? '#211D33' : '#F1EEFA') : dim;
-      ctx.font = i === hoverIdx ? '600 11px -apple-system, Arial' : '11px -apple-system, Arial';
+      ctx.fillStyle = isHover ? strong : dim;
+      ctx.font = isHover ? '600 11px -apple-system, Arial' : '11px -apple-system, Arial';
       ctx.textAlign = 'center';
-      const label = b.name.length > 15 ? b.name.slice(0,14) + '…' : b.name;
-      ctx.fillText(label, x + g.barW/2, cv.height - g.padBottom + 18);
+      const label = pt.p.name.length > 15 ? pt.p.name.slice(0,14) + '…' : pt.p.name;
+      ctx.fillText(label, pt.x, cv.height - g.padBottom + 18);
     });
 
     // axis baseline
@@ -1252,6 +1352,17 @@ function loadImage(src){
     ctx.moveTo(g.padLeft, g.padTop + g.plotH);
     ctx.lineTo(cv.width - g.padRight, g.padTop + g.plotH);
     ctx.stroke();
+
+    // axis titles
+    ctx.fillStyle = faint;
+    ctx.font = '600 10px -apple-system, Arial';
+    ctx.textAlign = 'center';
+    ctx.fillText('WEBPAGE ELEMENT TYPE', g.padLeft + g.plotW / 2, cv.height - 6);
+    ctx.save();
+    ctx.translate(14, g.padTop + g.plotH / 2);
+    ctx.rotate(-Math.PI / 2);
+    ctx.fillText('GAZE ATTENTION (SECONDS)', 0, 0);
+    ctx.restore();
   }
 
   function animate(){
@@ -1268,18 +1379,21 @@ function loadImage(src){
     const scaleX = cv.width / rect.width;
     const mx = (e.clientX - rect.left) * scaleX;
     const g = geometry();
-    let idx = -1;
-    bars.forEach((b, i) => {
-      const x = g.padLeft + i * g.gap;
-      if (mx >= x && mx < x + g.gap) idx = i;
+    let idx = -1, best = Infinity;
+    points.forEach((p, i) => {
+      const { x } = pointXY(i, g);
+      const d = Math.abs(mx - x);
+      if (d < best) { best = d; idx = i; }
     });
+    if (best > g.plotW / Math.max(points.length, 1)) idx = -1;
     if (idx !== hoverIdx) { hoverIdx = idx; paint(); }
     if (idx >= 0) {
-      const b = bars[idx];
+      const p = points[idx];
+      const { x, y } = pointXY(idx, g);
       tooltip.style.display = 'block';
-      tooltip.style.left = Math.min(cv.clientWidth - 140, Math.max(0, e.clientX - rect.left + 12)) + 'px';
-      tooltip.style.top = (e.clientY - rect.top - 12) + 'px';
-      tooltip.innerHTML = '<b>' + b.name + '</b><br>' + b.seconds + 's &middot; ' + b.pct + '% of attention';
+      tooltip.style.left = Math.min(cv.clientWidth - 150, Math.max(0, x + 12)) + 'px';
+      tooltip.style.top = Math.max(0, y - 46) + 'px';
+      tooltip.innerHTML = '<b>' + p.name + '</b><br>' + p.seconds + 's &middot; ' + p.pct + '% of attention';
     } else {
       tooltip.style.display = 'none';
     }