ai-research-survey

papers.ts (4597B)

---

 import { loadDashboard, loadPapersIndex, type PaperIndex } from '../data';
 import { navigate } from '../router';
 import { createFilters, updateFilterCount, type FilterState } from '../components/search-filter';
 import { renderSortableTable, type Column } from '../components/table';
 
 const DNA_CATS = [
   'artifacts', 'stat_method', 'eval_design',
   'claims', 'setup', 'limitations',
   'data_integrity', 'conflicts', 'contamination',
   'human', 'cost',
 ];
 
 const ENG_DIMS = [
   'practical', 'surprise', 'fear', 'drama', 'demo', 'brand',
 ];
 
 function scoreColor(s: number): string {
   if (s < 30) return 'var(--red)';
   if (s < 50) return 'var(--yellow)';
   if (s < 70) return 'var(--accent)';
   return 'var(--green)';
 }
 
 function dnaCellColor(v: number | null): string {
   if (v === null) return 'var(--border)';
   if (v < 25) return '#d03030';
   if (v < 50) return '#c08020';
   if (v < 75) return '#4070cc';
   return '#20a060';
 }
 
 function engCellColor(v: number | null): string {
   if (v === null) return 'var(--border)';
   if (v === 0) return '#555';
   if (v === 1) return '#7060a0';
   if (v === 2) return '#9070d0';
   return '#b080ff';
 }
 
 function renderDna(dna: (number | null)[] | null, engagement: (number | null)[] | null): string {
   if (!dna) return '';
   const methodCells = dna.map((v, i) =>
     `<span class="dna-cell" style="background:${dnaCellColor(v)}" title="${DNA_CATS[i]}: ${v !== null ? v + '%' : 'N/A'}"></span>`
   ).join('');
   const engCells = engagement ? engagement.map((v, i) =>
     `<span class="dna-cell" style="background:${engCellColor(v)}" title="${ENG_DIMS[i]}: ${v !== null ? v + '/3' : '?'}"></span>`
   ).join('') : '';
   return `<span class="dna-strip">${methodCells}</span>${engCells ? `<span class="dna-strip" style="margin-left:3px">${engCells}</span>` : ''}`;
 }
 
 export async function renderPapers(app: HTMLElement) {
   app.innerHTML = '<div class="spinner"></div>';
   const [papers, dashboard] = await Promise.all([loadPapersIndex(), loadDashboard()]);
 
   app.innerHTML = '';
   const archetypes = [...new Set(papers.map(p => p.archetype).filter((a): a is string => a != null))].sort();
   const tags = Object.keys(dashboard.tag_counts).sort();
 
   let filtered = [...papers];
 
   const filtersEl = createFilters(archetypes, tags, (state: FilterState) => {
     filtered = papers.filter(p => {
       if (state.search && !p.title.toLowerCase().includes(state.search)) return false;
       if (state.year && p.year !== parseInt(state.year)) return false;
       if (state.archetype && p.archetype !== state.archetype) return false;
       if (state.tag && !p.tags.includes(state.tag)) return false;
       if (p.score != null && (p.score < state.minScore || p.score > state.maxScore)) return false;
       if (p.score == null && state.minScore > 0) return false;
       return true;
     });
     updateFilterCount(filtersEl, filtered.length, papers.length);
     renderTable();
   });
 
   app.appendChild(filtersEl);
   updateFilterCount(filtersEl, papers.length, papers.length);
 
   const tableContainer = document.createElement('div');
   app.appendChild(tableContainer);
 
   const columns: Column<PaperIndex>[] = [
     { key: 'title', label: 'Title', render: p => p.title.length > 60 ? p.title.slice(0, 57) + '...' : p.title, sortValue: p => p.title },
     { key: 'year', label: 'Year', render: p => String(p.year || ''), sortValue: p => p.year || 0 },
     { key: 'score', label: 'Score', render: p => {
       if (p.score == null) return '<span style="color:var(--gray)">--</span>';
       if (p.paper_type === 'non-empirical') return `<span style="color:var(--gray)" title="Non-empirical paper — scored on limited criteria">${p.score}%*</span>`;
       return `<span style="color:${scoreColor(p.score)}">${p.score}%</span>`;
     }, sortValue: p => p.score ?? -1 },
     { key: 'dna', label: 'Profile', render: p => renderDna(p.dna, p.engagement), sortValue: p => p.score ?? -1 },
     { key: 'archetype', label: 'Type', render: p => {
       if (p.paper_type === 'non-empirical') return '<span class="archetype" style="background:rgba(139,143,163,0.15);color:var(--text-dim)">Non-empirical</span>';
       return p.archetype ? `<span class="archetype ${p.archetype}">${p.archetype}</span>` : '<span style="color:var(--gray)">--</span>';
     }, sortValue: p => p.paper_type === 'non-empirical' ? 'ZZ' : (p.archetype || '') },
   ];
 
   function renderTable() {
     tableContainer.innerHTML = '';
     const el = renderSortableTable(filtered, columns, p => {
       if (p.score != null) navigate(`/paper/${p.id}`);
     });
     tableContainer.appendChild(el);
   }
 
   renderTable();
 }