// Walkthrough — 3 stages, tree-centric canvas with on-diagram annotations. // // Stage 1: PDF drops in. Tree empty. // Stage 2: Tree builds — root, then RQ row, then experiment leaves (timed). // Stage 3: Output file cards emerge from the leaves; diff callout appears. const WSTAGES = [ { n: 1, label: 'Drop the paper', desc: 'Pass a local PDF, or let paper2bench search arXiv by title. One LLM read decomposes the paper.', }, { n: 2, label: 'Decompose the science', desc: 'A 3-level problem tree: root question → research questions → concrete experiments with dataset, model, metric, and a back-reference to the figure or table.', }, { n: 3, label: 'Render the briefs', desc: 'instruction.txt is what the agent literally reads. instruction_gt.txt appends a 9-task ground-truth plan for the evaluator. Same prefix, +75 lines, claim-scored later by paper2bench verify.', }, ]; // ---------- Layout coordinates (viewBox 1400 × 760) ---------- const VB = { w: 1400, h: 760 }; const PDF = { x: 580, y: 24, w: 240, h: 72 }; const ROOT = { x: 580, y: 140, w: 240, h: 64 }; const RQ_Y = 290; const RQ_W = 220, RQ_H = 64; const LEAF_Y = 458; const LEAF_W = 160, LEAF_H = 76; const FILE_W = 280, FILE_H = 100; const FILES_Y = 624; // Layout the tree based on the *current* paper's RQ + leaf counts. Returns // concrete x/y positions in viewBox space. function layoutTree(paperTree) { const rqCount = paperTree.rqs.length; // Evenly space RQs across the canvas with consistent margins. const margin = 110; const usable = VB.w - 2 * margin - RQ_W; const rqs = paperTree.rqs.map((rq, i) => ({ ...rq, x: rqCount === 1 ? VB.w / 2 - RQ_W / 2 : margin + (usable / (rqCount - 1)) * i, })); const leaves = []; rqs.forEach((rq, ri) => { const parentCx = rq.x + RQ_W / 2; const lc = rq.leaves.length; rq.leaves.forEach((leaf, li) => { let cx; if (lc === 1) cx = parentCx; else if (lc === 2) cx = parentCx + (li === 0 ? -95 : 95); else cx = parentCx + (li - (lc - 1) / 2) * 110; leaves.push({ ...leaf, x: cx - LEAF_W / 2, parentIdx: ri }); }); }); // Files always emerge from the first leaf. const firstLeaf = leaves[0]; const firstLeafCx = firstLeaf ? firstLeaf.x + LEAF_W / 2 : VB.w / 2; const fileGap = 220; const files = [ { id: 'instr', x: Math.max(140, firstLeafCx - fileGap - FILE_W), y: FILES_Y, name: 'instruction.txt', sub: 'agent input', featured: false }, { id: 'instr_gt', x: Math.max(140, firstLeafCx - fileGap - FILE_W) + FILE_W + fileGap, y: FILES_Y, name: 'instruction_gt.txt', sub: '+ evaluator addendum', featured: true }, ]; return { rqs, leaves, files }; } // HTML version of the PDF icon — used inside the overlay card so we can // scale + translate it via CSS transitions (SVG group transforms don't // animate smoothly across browsers). const PdfIconHtml = ({ size = 44 }) => ( ); // A reusable PDF document icon. Renders an SVG at a translated origin // that's `size` pixels tall. The page has a folded top-right corner and a // red "PDF" wordmark at the bottom. const PdfIcon = ({ x = 0, y = 0, size = 100 }) => { // Base canvas 80×100 — scale to requested height. const s = size / 100; return ( PDF ); }; // Centerline helpers const centerOf = (b) => ({ x: b.x + b.w / 2, y: b.y + b.h / 2 }); const botMid = (b) => ({ x: b.x + b.w / 2, y: b.y + b.h }); const topMid = (b) => ({ x: b.x + b.w / 2, y: b.y }); // Curved S-path between two y-different points const sPath = (a, b) => { const my = (a.y + b.y) / 2; return `M ${a.x} ${a.y} C ${a.x} ${my}, ${b.x} ${my}, ${b.x} ${b.y}`; }; // ---------- The canvas ---------- function CanvasViz({ stage, tier, paper }) { const { rqs: RQS, leaves: LEAVES, files: FILES } = React.useMemo( () => layoutTree(paper.tree), [paper] ); const PDF_NAME = `${paper.id}.pdf`; const PDF_META = `arXiv · ${paper.year}`; const showPdf = true; const pdfBig = stage === 1; const showRoot = stage >= 2 && tier >= 1; const showRqs = stage >= 2 && tier >= 2; const showLeaves = stage >= 2 && tier >= 3; const showFiles = stage >= 3; const showAnnot1 = stage === 1; const showAnnotTree = stage === 2 && tier >= 3; // PDF position shifts: huge & centered at stage 1, smaller at top at stage 2+ const pdfBox = pdfBig ? { x: VB.w / 2 - 200, y: VB.h / 2 - 100, w: 400, h: 200 } : PDF; const fadeStyle = (visible, delay = 0) => ({ opacity: visible ? 1 : 0, transition: `opacity .8s ease ${delay}s`, }); const dashStyle = (visible, delay = 0) => ({ strokeDasharray: 200, strokeDashoffset: visible ? 0 : 200, transition: `stroke-dashoffset .9s cubic-bezier(.2,.7,.3,1) ${delay}s, opacity .6s ease ${delay}s`, opacity: visible ? 1 : 0, }); return ( ); } // ---------- Walkthrough section orchestrator ---------- function Walkthrough({ paper: paperProp }) { const paper = paperProp || (window.P2B_DATA && window.P2B_DATA.current); const [step, setStep] = React.useState(0); // 0 / 1 / 2 const [stage, setStage] = React.useState(1); const [tier, setTier] = React.useState(0); const scrollerRef = React.useRef(null); const stepRef = React.useRef(0); React.useEffect(() => { stepRef.current = step; }, [step]); // Step → (stage, tier). When entering step 1 freshly, animate the tree // build (root → +rqs → +leaves). When returning to step 1 from step 2, // jump straight to the full tree (user has already seen the build). const lastStepRef = React.useRef(0); React.useEffect(() => { const prev = lastStepRef.current; lastStepRef.current = step; if (step === 0) { setStage(1); setTier(0); } else if (step === 2) { setStage(3); setTier(3); } else { setStage(2); if (prev <= 0) { setTier(0); const t1 = setTimeout(() => setTier(1), 80); const t2 = setTimeout(() => setTier(2), 650); const t3 = setTimeout(() => setTier(3), 1250); return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); }; } setTier(3); } }, [step]); // Discrete scroll-hijack with gesture detection. One trackpad swipe (or // one wheel click) = exactly one step. Trackpad inertia is suppressed: // a gesture is considered "active" while wheel events keep firing; only // a gap of > GESTURE_GAP_MS counts as the start of a new gesture. React.useEffect(() => { const el = scrollerRef.current; if (!el) return; const GESTURE_GAP_MS = 180; // no-wheel gap that ends a gesture const COOLDOWN_MS = 250; // minimum time between fires (safety floor) const EXIT_GUARD_MS = 1100; // grace period after we smooth-scroll out let lastWheelAt = 0; let lastFireAt = 0; let exitedAt = 0; let gestureLive = false; // true between gesture start and gap-end let gestureFired = false; // we've already advanced for this gesture let gapTimer = null; let touchStartY = 0; let touchFired = false; const isLocked = () => { const r = el.getBoundingClientRect(); const vh = window.innerHeight || 800; return r.top <= 0 && r.bottom >= vh - 4; }; const advance = (delta) => { const now = Date.now(); if (now - lastFireAt < COOLDOWN_MS) return false; lastFireAt = now; setStep((s) => Math.max(0, Math.min(2, s + delta))); return true; }; const exit = (downward) => { const r = el.getBoundingClientRect(); const top = window.scrollY + r.top; const target = downward ? top + el.offsetHeight + 10 : top - 10; window.scrollTo({ top: target, behavior: 'smooth' }); exitedAt = Date.now(); }; const armGapTimer = () => { clearTimeout(gapTimer); gapTimer = setTimeout(() => { gestureLive = false; gestureFired = false; }, GESTURE_GAP_MS); }; const onWheel = (e) => { // Guard period after a programmatic exit so the page's residual // inertia doesn't immediately re-hijack scroll on the way out. if (Date.now() - exitedAt < EXIT_GUARD_MS) { if (isLocked()) e.preventDefault(); return; } if (!isLocked()) return; if (Math.abs(e.deltaY) < 4) return; e.preventDefault(); lastWheelAt = Date.now(); gestureLive = true; armGapTimer(); if (gestureFired) return; // ignore inertia after the first fire gestureFired = true; const down = e.deltaY > 0; if (down && stepRef.current === 2) { exit(true); return; } if (!down && stepRef.current === 0) { exit(false); return; } advance(down ? 1 : -1); }; const onTouchStart = (e) => { if (!e.touches[0]) return; touchStartY = e.touches[0].clientY; touchFired = false; }; const onTouchMove = (e) => { if (Date.now() - exitedAt < EXIT_GUARD_MS) { if (isLocked()) e.preventDefault(); return; } if (!isLocked() || !e.touches[0]) return; const dy = touchStartY - e.touches[0].clientY; if (Math.abs(dy) < 28) { e.preventDefault(); return; } e.preventDefault(); if (touchFired) return; touchFired = true; const down = dy > 0; if (down && stepRef.current === 2) { exit(true); return; } if (!down && stepRef.current === 0) { exit(false); return; } advance(down ? 1 : -1); }; const onKey = (e) => { if (!isLocked()) return; const fwd = e.key === 'ArrowDown' || e.key === 'PageDown' || e.key === ' '; const back = e.key === 'ArrowUp' || e.key === 'PageUp'; if (!fwd && !back) return; e.preventDefault(); const now = Date.now(); if (now - lastFireAt < COOLDOWN_MS) return; const down = fwd; if (down && stepRef.current === 2) { exit(true); return; } if (!down && stepRef.current === 0) { exit(false); return; } advance(down ? 1 : -1); }; window.addEventListener('wheel', onWheel, { passive: false }); window.addEventListener('touchstart', onTouchStart, { passive: true }); window.addEventListener('touchmove', onTouchMove, { passive: false }); window.addEventListener('keydown', onKey); return () => { window.removeEventListener('wheel', onWheel); window.removeEventListener('touchstart', onTouchStart); window.removeEventListener('touchmove', onTouchMove); window.removeEventListener('keydown', onKey); clearTimeout(gapTimer); }; }, []); const current = WSTAGES[stage - 1]; return (

{/* Stage indicator pill — click to jump to a step */}

{WSTAGES.map((s, i) => (

setStep(i)} role="button" className={`walk-stage-dot ${step === i ? 'active' : ''} ${step > i ? 'past' : ''}`} > {String(s.n).padStart(2, '0')} {s.label}

))}

{/* Big tree canvas */}

{paper.id}.pdf

{paper.authors} · {paper.year}

↘ STEP 1

Pass a paper.

Local PDF or arXiv title. paper2bench reads it once.

{/* Stage description card */}

Stage {current.n} / 3 · {current.label}

{current.desc}

); } window.Walkthrough = Walkthrough;