ai-research-survey

commit bdd13e9d815e0e04aaa193ea80a794d756b99f8f
parent 96a3826ca9778e25930fd3677f6e78f06b21e146
Author: Brian Graham <brian@buildingbetterteams.de>
Date:   Mon, 23 Mar 2026 15:41:38 +0100

Show engagement factors on paper detail pages

V3 papers now display a section with 6 horizontal bars showing
engagement scores (0-3) with justification text for each dimension.
Only shown when engagement_factors exist in the paper data.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Diffstat:
M
explorer/src/views/paper-detail.ts
 | 
35
+++++++++++++++++++++++++++++++++++

1 file changed, 35 insertions(+), 0 deletions(-)
diff --git a/explorer/src/views/paper-detail.ts b/explorer/src/views/paper-detail.ts
@@ -104,6 +104,8 @@ export async function renderPaperDetail(app: HTMLElement, slug: string) {
 
     ${paper.games.length ? `<div class="section"><h2>Named Games</h2>${paper.games.map(g => `<span class="tag" style="background:rgba(240,101,101,0.15);color:var(--red);margin-right:0.5rem">${g}</span>`).join('')}</div>` : ''}
 
+    ${renderEngagementFactors(paper)}
+
     <div class="detail-grid">
       <div class="section">
         <h2>Checklist</h2>
@@ -160,3 +162,36 @@ export async function renderPaperDetail(app: HTMLElement, slug: string) {
     </div>
   `;
 }
+
+const EF_LABELS: Record<string, string> = {
+  practical_relevance: 'Practical Relevance',
+  surprise_contrarian: 'Surprise / Contrarian',
+  fear_safety: 'Fear / Safety',
+  drama_conflict: 'Drama / Conflict',
+  demo_ability: 'Demo-ability',
+  brand_recognition: 'Brand Recognition',
+};
+
+const EF_ORDER = ['practical_relevance', 'surprise_contrarian', 'fear_safety',
+                  'drama_conflict', 'demo_ability', 'brand_recognition'];
+
+function renderEngagementFactors(paper: any): string {
+  const ef = paper.engagement_factors;
+  if (!ef) return '';
+
+  return `<div class="section">
+    <h2>Engagement Factors (v3)</h2>
+    <p style="font-size:0.8rem;color:var(--text-dim);margin-bottom:0.75rem">What drives social/media attention for this paper (0-3 scale).</p>
+    ${EF_ORDER.map(dim => {
+      const d = ef[dim];
+      if (!d) return '';
+      const pct = d.score / 3 * 100;
+      const color = d.score === 0 ? 'var(--gray)' : d.score === 1 ? 'var(--yellow)' : d.score === 2 ? 'var(--accent)' : 'var(--green)';
+      return `<div class="hbar">
+        <div class="hbar-label"><span>${EF_LABELS[dim] || dim} <span style="color:var(--text-dim);font-size:0.75rem">${d.score}/3</span></span></div>
+        <div class="hbar-track"><div class="hbar-fill" style="width:${pct}%;background:${color}"></div></div>
+        <div style="font-size:0.78rem;color:var(--text-dim);margin-top:1px">${d.justification}</div>
+      </div>`;
+    }).join('')}
+  </div>`;
+}