Idea quality pipeline, web UI features, academic paper
- Tighten idea extraction prompts (1-4 ideas, no sub-features) reducing 1,907 ideas to 468 across 434 drafts (78% reduction) - Add embedding-based dedup (ietf dedup-ideas) for same-draft similarity - Add novelty scoring (ietf ideas score) and filtering (ietf ideas filter) using Claude to rate ideas 1-5, removing 49 generic building blocks - Final count: 419 high-quality ideas (avg 1.1/draft) - Web UI: gap explorer with live draft generation and pre-generated demos - Web UI: D3.js author collaboration network (498 nodes, 1142 edges, 68 clusters, org filtering, interactive zoom/pan) - Academic paper: 15-page LaTeX workshop paper analyzing the 434-draft AI agent standards landscape - Save improvement ideas backlog to data/reports/improvement-ideas.md Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
241
src/webui/templates/timeline.html
Normal file
241
src/webui/templates/timeline.html
Normal file
@@ -0,0 +1,241 @@
|
||||
{% extends "base.html" %}
|
||||
{% set active_page = "timeline" %}
|
||||
|
||||
{% block title %}Timeline — IETF Draft Analyzer{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl font-bold text-white">Timeline Animation</h1>
|
||||
<p class="text-slate-400 text-sm mt-1">Watch the AI/agent draft landscape evolve month by month</p>
|
||||
</div>
|
||||
|
||||
<!-- Stats summary -->
|
||||
<div class="grid grid-cols-3 gap-4 mb-6" id="statCards">
|
||||
</div>
|
||||
|
||||
<!-- Animated t-SNE map -->
|
||||
<div class="bg-slate-900 rounded-xl border border-slate-800 p-5 mb-6" id="tsneSection">
|
||||
<h2 class="text-sm font-semibold text-slate-300 mb-1">Animated Embedding Landscape</h2>
|
||||
<p class="text-xs text-slate-500 mb-3">t-SNE projection with cumulative drafts per month. Color = category, size = composite score. Press Play to animate.</p>
|
||||
<div id="monthBadge" class="text-center mb-2">
|
||||
<span class="inline-block bg-slate-800 border border-slate-700 rounded-lg px-4 py-1.5 text-sm font-mono text-blue-400"></span>
|
||||
</div>
|
||||
<div id="tsneAnim" style="height: 560px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Stacked area chart -->
|
||||
<div class="bg-slate-900 rounded-xl border border-slate-800 p-5 mb-6">
|
||||
<h2 class="text-sm font-semibold text-slate-300 mb-1">Category Submissions Over Time</h2>
|
||||
<p class="text-xs text-slate-500 mb-3">Stacked area chart showing draft submissions by category per month.</p>
|
||||
<div id="stackedArea" style="height: 400px;"></div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script>
|
||||
const PLOTLY_LAYOUT = {
|
||||
paper_bgcolor: 'transparent', plot_bgcolor: 'rgba(15,23,42,0.5)',
|
||||
font: { color: '#94a3b8', family: 'Inter, system-ui, sans-serif', size: 12 },
|
||||
margin: { t: 20, r: 20, b: 50, l: 50 },
|
||||
xaxis: { gridcolor: '#1e293b', zerolinecolor: '#334155' },
|
||||
yaxis: { gridcolor: '#1e293b', zerolinecolor: '#334155' },
|
||||
};
|
||||
const CFG = { responsive: true, displayModeBar: false };
|
||||
|
||||
const PALETTE = [
|
||||
'#3b82f6', '#ef4444', '#22c55e', '#a855f7', '#f59e0b',
|
||||
'#06b6d4', '#ec4899', '#84cc16', '#f97316', '#8b5cf6',
|
||||
'#14b8a6', '#e11d48', '#64748b', '#eab308', '#6366f1',
|
||||
];
|
||||
|
||||
const animData = {{ animation | tojson }};
|
||||
const points = animData.points;
|
||||
const months = animData.months;
|
||||
const catMonthly = animData.category_monthly;
|
||||
|
||||
if (points.length > 0 && months.length > 0) {
|
||||
|
||||
// --- Stat cards ---
|
||||
const firstMonth = months[0];
|
||||
const lastMonth = months[months.length - 1];
|
||||
const allCats = [...new Set(points.map(p => p.category))];
|
||||
document.getElementById('statCards').innerHTML = `
|
||||
<div class="stat-card rounded-xl border border-slate-800 p-5 relative overflow-hidden">
|
||||
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-blue-400"></div>
|
||||
<div class="text-3xl font-bold text-blue-400">${months.length}</div>
|
||||
<div class="text-xs text-slate-400 mt-1 uppercase tracking-wider">Months Span</div>
|
||||
<div class="text-xs text-slate-500 mt-0.5">${firstMonth} to ${lastMonth}</div>
|
||||
</div>
|
||||
<div class="stat-card rounded-xl border border-slate-800 p-5 relative overflow-hidden">
|
||||
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-emerald-500 to-emerald-400"></div>
|
||||
<div class="text-3xl font-bold text-emerald-400">${points.length}</div>
|
||||
<div class="text-xs text-slate-400 mt-1 uppercase tracking-wider">Total Drafts</div>
|
||||
</div>
|
||||
<div class="stat-card rounded-xl border border-slate-800 p-5 relative overflow-hidden">
|
||||
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 to-purple-400"></div>
|
||||
<div class="text-3xl font-bold text-purple-400">${allCats.length}</div>
|
||||
<div class="text-xs text-slate-400 mt-1 uppercase tracking-wider">Categories</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// --- Build category list sorted by frequency ---
|
||||
const catCounts = {};
|
||||
points.forEach(p => { catCounts[p.category] = (catCounts[p.category] || 0) + 1; });
|
||||
const catList = Object.keys(catCounts).sort((a, b) => catCounts[b] - catCounts[a]);
|
||||
const catColor = {};
|
||||
catList.forEach((c, i) => { catColor[c] = PALETTE[i % PALETTE.length]; });
|
||||
|
||||
// --- Helper: build traces for points up to a given month ---
|
||||
function buildTraces(upToMonth) {
|
||||
const filtered = points.filter(p => p.month <= upToMonth);
|
||||
const groups = {};
|
||||
filtered.forEach(p => {
|
||||
if (!groups[p.category]) groups[p.category] = { x: [], y: [], size: [], text: [], names: [] };
|
||||
groups[p.category].x.push(p.x);
|
||||
groups[p.category].y.push(p.y);
|
||||
groups[p.category].size.push(Math.max(p.score * 4, 6));
|
||||
groups[p.category].text.push(p.title);
|
||||
groups[p.category].names.push(p.name);
|
||||
});
|
||||
return catList.map(cat => {
|
||||
const g = groups[cat] || { x: [], y: [], size: [], text: [], names: [] };
|
||||
return {
|
||||
x: g.x, y: g.y, text: g.text, name: cat,
|
||||
customdata: g.names,
|
||||
mode: 'markers', type: 'scatter',
|
||||
marker: {
|
||||
size: g.size,
|
||||
color: catColor[cat],
|
||||
opacity: 0.8,
|
||||
line: { width: 0.5, color: 'rgba(255,255,255,0.15)' },
|
||||
},
|
||||
hovertemplate: '<b>%{text}</b><extra>' + cat + '</extra>',
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// --- Build frames ---
|
||||
const frames = months.map(month => {
|
||||
const cumCount = points.filter(p => p.month <= month).length;
|
||||
return {
|
||||
name: month,
|
||||
data: buildTraces(month),
|
||||
};
|
||||
});
|
||||
|
||||
// --- Initial plot (first month) ---
|
||||
const firstTraces = buildTraces(months[0]);
|
||||
const firstCount = points.filter(p => p.month <= months[0]).length;
|
||||
|
||||
// Slider steps
|
||||
const sliderSteps = months.map(month => ({
|
||||
method: 'animate',
|
||||
label: month,
|
||||
args: [[month], { frame: { duration: 500, redraw: true }, transition: { duration: 300 }, mode: 'immediate' }],
|
||||
}));
|
||||
|
||||
const layout = {
|
||||
...PLOTLY_LAYOUT,
|
||||
xaxis: { visible: false, showgrid: false, zeroline: false },
|
||||
yaxis: { visible: false, showgrid: false, zeroline: false },
|
||||
legend: { font: { size: 10, color: '#94a3b8' }, bgcolor: 'transparent' },
|
||||
hovermode: 'closest',
|
||||
margin: { t: 40, r: 20, b: 60, l: 20 },
|
||||
updatemenus: [{
|
||||
type: 'buttons', showactive: false, x: 0.05, y: 1.08,
|
||||
buttons: [
|
||||
{
|
||||
label: '▶ Play',
|
||||
method: 'animate',
|
||||
args: [null, { frame: { duration: 500, redraw: true }, transition: { duration: 300 }, fromcurrent: true }]
|
||||
},
|
||||
{
|
||||
label: '◼ Pause',
|
||||
method: 'animate',
|
||||
args: [[null], { frame: { duration: 0, redraw: true }, mode: 'immediate' }]
|
||||
}
|
||||
]
|
||||
}],
|
||||
sliders: [{
|
||||
active: 0,
|
||||
steps: sliderSteps,
|
||||
x: 0.05, len: 0.9,
|
||||
xanchor: 'left',
|
||||
y: -0.02,
|
||||
yanchor: 'top',
|
||||
pad: { t: 30, b: 10 },
|
||||
currentvalue: { visible: false },
|
||||
transition: { duration: 300 },
|
||||
font: { size: 9, color: '#64748b' },
|
||||
bgcolor: '#1e293b',
|
||||
activebgcolor: '#3b82f6',
|
||||
bordercolor: '#334155',
|
||||
borderwidth: 1,
|
||||
ticklen: 4,
|
||||
tickcolor: '#475569',
|
||||
}],
|
||||
};
|
||||
|
||||
Plotly.newPlot('tsneAnim', firstTraces, layout, CFG).then(() => {
|
||||
Plotly.addFrames('tsneAnim', frames);
|
||||
});
|
||||
|
||||
// Update badge on animation frame
|
||||
const badge = document.querySelector('#monthBadge span');
|
||||
badge.textContent = `Month: ${months[0]} (${firstCount} drafts)`;
|
||||
|
||||
document.getElementById('tsneAnim').on('plotly_animatingframe', function(ev) {
|
||||
const month = ev.name;
|
||||
const cumCount = points.filter(p => p.month <= month).length;
|
||||
badge.textContent = `Month: ${month} (${cumCount} drafts)`;
|
||||
});
|
||||
|
||||
// Click to navigate
|
||||
document.getElementById('tsneAnim').on('plotly_click', function(data) {
|
||||
const pt = data.points[0];
|
||||
if (pt.customdata) {
|
||||
window.location.href = '/drafts/' + pt.customdata;
|
||||
}
|
||||
});
|
||||
|
||||
// --- Stacked area chart ---
|
||||
// Collect all categories across all months
|
||||
const areaCats = {};
|
||||
Object.values(catMonthly).forEach(mc => {
|
||||
Object.keys(mc).forEach(c => { areaCats[c] = true; });
|
||||
});
|
||||
// Sort by total count
|
||||
const areaCatList = Object.keys(areaCats).sort((a, b) => {
|
||||
const totalA = months.reduce((s, m) => s + ((catMonthly[m] || {})[a] || 0), 0);
|
||||
const totalB = months.reduce((s, m) => s + ((catMonthly[m] || {})[b] || 0), 0);
|
||||
return totalB - totalA;
|
||||
});
|
||||
|
||||
const areaTraces = areaCatList.map((cat, i) => ({
|
||||
x: months,
|
||||
y: months.map(m => (catMonthly[m] || {})[cat] || 0),
|
||||
name: cat,
|
||||
type: 'scatter',
|
||||
mode: 'lines',
|
||||
stackgroup: 'one',
|
||||
line: { width: 0.5, color: catColor[cat] || PALETTE[i % PALETTE.length] },
|
||||
fillcolor: (catColor[cat] || PALETTE[i % PALETTE.length]) + '80',
|
||||
hovertemplate: '%{x}<br>' + cat + ': %{y}<extra></extra>',
|
||||
}));
|
||||
|
||||
Plotly.newPlot('stackedArea', areaTraces, {
|
||||
...PLOTLY_LAYOUT,
|
||||
xaxis: { ...PLOTLY_LAYOUT.xaxis, title: { text: 'Month', font: { size: 11 } } },
|
||||
yaxis: { ...PLOTLY_LAYOUT.yaxis, title: { text: 'Drafts', font: { size: 11 } } },
|
||||
legend: { font: { size: 10, color: '#94a3b8' }, orientation: 'h', y: -0.25, x: 0.5, xanchor: 'center' },
|
||||
hovermode: 'x unified',
|
||||
margin: { t: 20, r: 20, b: 80, l: 50 },
|
||||
}, CFG);
|
||||
|
||||
} else {
|
||||
document.getElementById('tsneSection').innerHTML = '<p class="text-slate-500 text-sm text-center py-20">No timeline animation data available. Run the analysis pipeline first.</p>';
|
||||
document.getElementById('stackedArea').innerHTML = '<p class="text-slate-500 text-sm text-center py-20">No data available.</p>';
|
||||
document.getElementById('statCards').style.display = 'none';
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user