109 lines
3.6 KiB
JavaScript
109 lines
3.6 KiB
JavaScript
/* ui.js - UI Renderer for Frozen Runs Visualization */
|
|
|
|
/**
|
|
* Zeichnet Bootstrap-Verteilungen und CI-Diagramme für die gegebenen Metrikdaten.
|
|
* @param {Array<Object>} metricsData - Array der Metrikobjekte mit Namen, Run-ID, pinned_flag, Effektgröße und CI.
|
|
*/
|
|
export function renderCharts(metricsData = []) {
|
|
const chartContainer = document.querySelector('#chartsContainer');
|
|
if (!chartContainer) return;
|
|
chartContainer.innerHTML = '';
|
|
|
|
metricsData.forEach(metric => {
|
|
const { metricName, effectSize, ci_lower, ci_upper } = metric;
|
|
const chartEl = document.createElement('div');
|
|
chartEl.className = 'chart-item';
|
|
|
|
const title = document.createElement('h3');
|
|
title.textContent = metricName;
|
|
|
|
const canvas = document.createElement('canvas');
|
|
canvas.setAttribute('role', 'img');
|
|
canvas.setAttribute('aria-label', `Bootstrap-Verteilung für ${metricName}`);
|
|
|
|
chartEl.appendChild(title);
|
|
chartEl.appendChild(canvas);
|
|
chartContainer.appendChild(chartEl);
|
|
|
|
// Example mock rendering logic (replace with chart lib rendering)
|
|
const ctx = canvas.getContext('2d');
|
|
if (ctx) {
|
|
ctx.fillStyle = '#cce5ff';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
ctx.fillStyle = '#004085';
|
|
ctx.fillText(`Effektgröße: ${effectSize}`, 10, 20);
|
|
ctx.fillText(`CI: [${ci_lower}, ${ci_upper}]`, 10, 40);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Erstellt die Tabellenansicht der Metriken mit Effektgrößen und CI.
|
|
* @param {Array<Object>} metricsData - Array strukturierter Metrikdaten.
|
|
*/
|
|
export function renderMetricsTable(metricsData = []) {
|
|
const tableContainer = document.querySelector('#metricsTable');
|
|
if (!tableContainer) return;
|
|
tableContainer.innerHTML = '';
|
|
|
|
const table = document.createElement('table');
|
|
table.className = 'table table-striped';
|
|
|
|
const thead = document.createElement('thead');
|
|
const headerRow = document.createElement('tr');
|
|
['Metrik', 'Run-ID', 'Pinned', 'Effektgröße', 'CI Lower', 'CI Upper'].forEach(label => {
|
|
const th = document.createElement('th');
|
|
th.textContent = label;
|
|
headerRow.appendChild(th);
|
|
});
|
|
thead.appendChild(headerRow);
|
|
table.appendChild(thead);
|
|
|
|
const tbody = document.createElement('tbody');
|
|
metricsData.forEach(row => {
|
|
const tr = document.createElement('tr');
|
|
|
|
const tdName = document.createElement('td');
|
|
tdName.textContent = row.metricName;
|
|
|
|
const tdRun = document.createElement('td');
|
|
tdRun.textContent = row.run_id ?? '-';
|
|
|
|
const tdPinned = document.createElement('td');
|
|
tdPinned.textContent = row.pinned_flag ? 'pinned' : 'unpinned';
|
|
|
|
const tdEffect = document.createElement('td');
|
|
tdEffect.textContent = row.effectSize;
|
|
|
|
const tdCiLow = document.createElement('td');
|
|
tdCiLow.textContent = row.ci_lower;
|
|
|
|
const tdCiHigh = document.createElement('td');
|
|
tdCiHigh.textContent = row.ci_upper;
|
|
|
|
[tdName, tdRun, tdPinned, tdEffect, tdCiLow, tdCiHigh].forEach(td => tr.appendChild(td));
|
|
tbody.appendChild(tr);
|
|
});
|
|
|
|
table.appendChild(tbody);
|
|
tableContainer.appendChild(table);
|
|
}
|
|
|
|
/**
|
|
* Aktualisiert Diagramme und Tabellen basierend auf der Filterauswahl.
|
|
* @param {string} filter - 'pinned' oder 'unpinned'.
|
|
* @param {Array<Object>} allMetrics - gesamte Metrikdaten.
|
|
*/
|
|
export function updateUIOnFilter(filter, allMetrics = []) {
|
|
const filtered = allMetrics.filter(m => {
|
|
if (filter === 'pinned') return m.pinned_flag;
|
|
if (filter === 'unpinned') return !m.pinned_flag;
|
|
return true;
|
|
});
|
|
|
|
renderCharts(filtered);
|
|
renderMetricsTable(filtered);
|
|
|
|
const statusEl = document.querySelector('#filterStatus');
|
|
if (statusEl) statusEl.textContent = `Aktueller Filter: ${filter}`;
|
|
}
|