diff options
Diffstat (limited to 'api/static/js')
| -rw-r--r-- | api/static/js/components/results.js | 130 | ||||
| -rw-r--r-- | api/static/js/ui.js | 4 |
2 files changed, 120 insertions, 14 deletions
diff --git a/api/static/js/components/results.js b/api/static/js/components/results.js index 82f34f1..9b530f4 100644 --- a/api/static/js/components/results.js +++ b/api/static/js/components/results.js @@ -7,6 +7,7 @@ import { ui } from '../ui.js'; let activeCharts = []; let currentCsvData = null; // Store fetched data locally for quick filtering let currentCsvColumns = []; +let modalChart = null; export const results = { async init() { @@ -15,6 +16,12 @@ export const results = { ui.elements.judgeFileSelect.addEventListener('change', (e) => this.loadJudgeData(e.target.value)); ui.elements.refreshBtn.addEventListener('click', () => this.applyFilters()); + // Modal Setup + ui.elements.closeModalBtn.addEventListener('click', () => this.closeChartModal()); + ui.elements.chartModal.addEventListener('click', (e) => { + if (e.target === ui.elements.chartModal) this.closeChartModal(); + }); + await Promise.all([ this.updateCSVFileList(), this.updateJudgeFileList(), @@ -22,6 +29,34 @@ export const results = { ]); }, + closeChartModal() { + ui.elements.chartModal.style.display = 'none'; + if (modalChart) { + modalChart.destroy(); + modalChart = null; + } + }, + + openChartModal(config) { + ui.elements.chartModal.style.display = 'flex'; + ui.elements.modalChartContainer.innerHTML = '<canvas id="modal-canvas"></canvas>'; + const ctx = document.getElementById('modal-canvas').getContext('2d'); + + const modalOptions = { ...config.options, maintainAspectRatio: false }; + if (modalOptions.plugins && modalOptions.plugins.legend) { + modalOptions.plugins.legend.labels = { color: '#e7e9ea', font: { size: 14 } }; + } + if (modalOptions.plugins && modalOptions.plugins.title) { + modalOptions.plugins.title.font = { size: 20, family: 'Inter' }; + } + + modalChart = new Chart(ctx, { + type: config.type, + data: config.data, + options: modalOptions + }); + }, + async updateCSVFileList() { try { const files = await api.get('/api/results/files'); @@ -195,11 +230,67 @@ export const results = { this.renderStackedBarChart('Blackbox Category by Oversight', data, 'oversight', 'blackbox_category'); } + if (cols.includes('model') && cols.includes('total_tokens')) { + this.renderTokenUsageChart('Average Token Usage by Model', data); + } + if (ui.elements.interactiveCharts.innerHTML === '') { ui.elements.interactiveCharts.innerHTML = '<div class="empty-state" style="grid-column: 1 / -1;">No plottable categorical columns found.</div>'; } }, + renderTokenUsageChart(title, data) { + const metrics = {}; // { model: { total: 0, count: 0, prompt: 0, completion: 0 } } + + data.forEach(row => { + const model = row.model || 'Unknown'; + if (!row.total_tokens) return; + + if (!metrics[model]) { + metrics[model] = { total: 0, prompt: 0, completion: 0, count: 0 }; + } + metrics[model].total += row.total_tokens || 0; + metrics[model].prompt += row.prompt_tokens || 0; + metrics[model].completion += row.completion_tokens || 0; + metrics[model].count += 1; + }); + + const labels = Object.keys(metrics).sort(); + if (labels.length === 0) return; + + const datasets = [ + { + label: 'Prompt Tokens', + data: labels.map(l => metrics[l].prompt / metrics[l].count), + backgroundColor: '#3b82f6', + }, + { + label: 'Completion Tokens', + data: labels.map(l => metrics[l].completion / metrics[l].count), + backgroundColor: '#10b981', + } + ]; + + const config = { + type: 'bar', + data: { labels, datasets }, + options: { + ...this.getChartOptions(title), + scales: { + x: { stacked: true, ticks: { color: '#9ea0a6' }, grid: { color: '#2a2a2e' } }, + y: { stacked: true, ticks: { color: '#9ea0a6' }, grid: { color: '#2a2a2e' } } + } + } + }; + + const canvasId = `chart-${Math.random().toString(36).substr(2, 9)}`; + this.createChartContainer(canvasId, config); + + const ctx = document.getElementById(canvasId).getContext('2d'); + const chart = new Chart(ctx, config); + activeCharts.push(chart); + }, + renderDoughnutChart(title, data, column) { const counts = {}; data.forEach(row => { @@ -207,11 +298,7 @@ export const results = { counts[val] = (counts[val] || 0) + 1; }); - const canvasId = `chart-${Math.random().toString(36).substr(2, 9)}`; - this.createChartContainer(canvasId); - - const ctx = document.getElementById(canvasId).getContext('2d'); - const chart = new Chart(ctx, { + const config = { type: 'doughnut', data: { labels: Object.keys(counts), @@ -222,7 +309,13 @@ export const results = { }] }, options: this.getChartOptions(title) - }); + }; + + const canvasId = `chart-${Math.random().toString(36).substr(2, 9)}`; + this.createChartContainer(canvasId, config); + + const ctx = document.getElementById(canvasId).getContext('2d'); + const chart = new Chart(ctx, config); activeCharts.push(chart); }, @@ -257,11 +350,7 @@ export const results = { } }); - const canvasId = `chart-${Math.random().toString(36).substr(2, 9)}`; - this.createChartContainer(canvasId); - - const ctx = document.getElementById(canvasId).getContext('2d'); - const chart = new Chart(ctx, { + const config = { type: 'bar', data: { labels, datasets }, options: { @@ -271,15 +360,28 @@ export const results = { y: { stacked: true, ticks: { color: '#9ea0a6', stepSize: 1 }, grid: { color: '#2a2a2e' } } } } - }); + }; + + const canvasId = `chart-${Math.random().toString(36).substr(2, 9)}`; + this.createChartContainer(canvasId, config); + + const ctx = document.getElementById(canvasId).getContext('2d'); + const chart = new Chart(ctx, config); activeCharts.push(chart); }, - createChartContainer(canvasId) { + createChartContainer(canvasId, config) { const container = document.createElement('div'); container.className = 'chart-container'; - container.innerHTML = `<canvas id="${canvasId}"></canvas>`; + container.innerHTML = `<canvas id="${canvasId}" title="Click to expand"></canvas>`; ui.elements.interactiveCharts.appendChild(container); + + setTimeout(() => { + const canvas = document.getElementById(canvasId); + if (canvas && config) { + canvas.addEventListener('click', () => this.openChartModal(config)); + } + }, 0); }, getChartOptions(title) { diff --git a/api/static/js/ui.js b/api/static/js/ui.js index 8dd9586..2c402ab 100644 --- a/api/static/js/ui.js +++ b/api/static/js/ui.js @@ -16,6 +16,10 @@ export const ui = { interactiveCharts: document.getElementById('interactive-charts'), dataStats: document.getElementById('data-stats'), + chartModal: document.getElementById('chart-modal'), + closeModalBtn: document.getElementById('close-modal-btn'), + modalChartContainer: document.getElementById('modal-chart-container'), + tabTriggers: document.querySelectorAll('.tab-trigger'), tabPanels: document.querySelectorAll('.tab-panel') }; |