Add visualization_tool/js/ui.js

visualization_tool/js/ui.js

@@ -0,0 +1,72 @@
+/* UI Updater for Results Table */
+
+/**
+ * Erstellt bzw. aktualisiert die Tabelle im DOM anhand der Analyseergebnisse.
+ * @param {Array<{ run_id: string, category: string, delta_t: number, timestamp: string, status: string }>} results
+ */
+export function renderResultsTable(results = []) {
+  const section = document.querySelector('#results-section');
+  if (!section) return;
+
+  section.innerHTML = '';
+
+  const table = document.createElement('table');
+  table.classList.add('viztool__table');
+
+  const thead = document.createElement('thead');
+  const headerRow = document.createElement('tr');
+  const headers = ['Run ID', 'Category', 'Δt', 'Timestamp', 'Status'];
+  headers.forEach(text => {
+    const th = document.createElement('th');
+    th.textContent = text;
+    headerRow.appendChild(th);
+  });
+  thead.appendChild(headerRow);
+  table.appendChild(thead);
+
+  const tbody = document.createElement('tbody');
+  results.forEach(item => {
+    const tr = document.createElement('tr');
+
+    const tdRun = document.createElement('td');
+    tdRun.textContent = item.run_id ?? '';
+
+    const tdCategory = document.createElement('td');
+    tdCategory.textContent = item.category ?? '';
+
+    const tdDeltaT = document.createElement('td');
+    tdDeltaT.textContent = item.delta_t?.toFixed(3) ?? '';
+
+    const tdTime = document.createElement('td');
+    tdTime.textContent = item.timestamp ?? '';
+
+    const tdStatus = document.createElement('td');
+    tdStatus.textContent = item.status ?? '';
+
+    tr.append(tdRun, tdCategory, tdDeltaT, tdTime, tdStatus);
+    tbody.appendChild(tr);
+  });
+
+  table.appendChild(tbody);
+  section.appendChild(table);
+
+  highlightNegativeDeltaT(table);
+}
+
+/**
+ * Hebt Tabellenzeilen hervor, deren Δt < 0 ist.
+ * @param {HTMLTableElement} table
+ */
+export function highlightNegativeDeltaT(table) {
+  if (!(table instanceof HTMLTableElement)) return;
+
+  const rows = table.querySelectorAll('tbody tr');
+  rows.forEach(row => {
+    const deltaCell = row.cells[2];
+    const value = parseFloat(deltaCell?.textContent || 0);
+    if (!isNaN(value) && value < 0) {
+      row.classList.add('viztool__row--negative');
+      deltaCell.setAttribute('aria-label', 'negative delta observed');
+    }
+  });
+}