Add drift_matrix_visualization/js/ui.js

drift_matrix_visualization/js/ui.js

@@ -0,0 +1,89 @@
+'use strict';
+
+/**
+ * Rendert die Drift-Matrix basierend auf matrix_data.
+ * @param {Array<{ quadrant: string, warn_reasons: string[], counts: number }>} matrix_data
+ */
+export function renderMatrix(matrix_data = []) {
+  const container = document.getElementById('matrix-container');
+  if (!container) return;
+
+  container.innerHTML = '';
+
+  const grid = document.createElement('div');
+  grid.className = 'drift-matrix__grid';
+
+  matrix_data.forEach((cellData) => {
+    const cell = document.createElement('div');
+    cell.className = 'drift-matrix__cell';
+    cell.setAttribute('data-quadrant', cellData.quadrant);
+    cell.setAttribute('tabindex', '0');
+    cell.setAttribute('role', 'button');
+    cell.setAttribute('aria-label', `Quadrant ${cellData.quadrant}, Warnanzahl ${cellData.counts}`);
+
+    const intensity = Math.min(cellData.counts / 100, 1);
+    cell.style.backgroundColor = `rgba(255, 0, 0, ${intensity})`;
+
+    const label = document.createElement('span');
+    label.className = 'drift-matrix__label';
+    label.textContent = cellData.quadrant;
+    cell.appendChild(label);
+
+    cell.addEventListener('click', () => updateDetailPanel(cellData));
+
+    // Tooltip-Info
+    cell.title = `${cellData.warn_reasons.join(', ')}\nAnzahl: ${cellData.counts}`;
+
+    grid.appendChild(cell);
+  });
+
+  container.appendChild(grid);
+}
+
+/**
+ * Zeigt Details zu einem ausgewählten Quadranten an.
+ * @param {{ quadrant: string, warn_reasons: string[], counts: number }} quadrantData
+ */
+export function updateDetailPanel(quadrantData) {
+  const panel = document.getElementById('detail-panel');
+  if (!panel) return;
+
+  panel.innerHTML = '';
+
+  const title = document.createElement('h3');
+  title.textContent = `Quadrant ${quadrantData.quadrant}`;
+
+  const countInfo = document.createElement('p');
+  countInfo.textContent = `Warnungen insgesamt: ${quadrantData.counts}`;
+
+  const listTitle = document.createElement('h4');
+  listTitle.textContent = 'Warnursachen:';
+
+  const list = document.createElement('ul');
+  quadrantData.warn_reasons.forEach((reason) => {
+    const li = document.createElement('li');
+    li.textContent = reason;
+    list.appendChild(li);
+  });
+
+  panel.appendChild(title);
+  panel.appendChild(countInfo);
+  panel.appendChild(listTitle);
+  panel.appendChild(list);
+}
+
+/**
+ * Initialisiert das UI.
+ * @param {Array} initialData
+ */
+export function initApp(initialData) {
+  renderMatrix(initialData);
+}
+
+/**
+ * Wird aufgerufen, wenn ein neuer Run ausgewählt wurde.
+ * @param {Array} newData
+ */
+export function handleRunChange(newData) {
+  renderMatrix(newData);
+}