feat(dashboard): enhance raw-dataset view with column toggles, truncation, and row inspector

2 files changed, 214 insertions, 12 deletions

diff --git a/api/static/js/components/results.js b/api/static/js/components/results.js
index b143fa3..2ce177c 100644
--- a/api/static/js/components/results.js
+++ b/api/static/js/components/results.js
@@ -7,6 +7,8 @@ import { ui } from '../ui.js';
 let activeCharts = [];
 let currentCsvData = null; // Store fetched data locally for quick filtering
 let currentCsvColumns = [];
+let currentCsvDir = ""; // Directory of the active CSV
+let currentVisibleColumns = []; // Track which columns are shown in Table
 let modalChart = null;
 
 export const results = {
@@ -21,6 +23,25 @@ export const results = {
         ui.elements.chartModal.addEventListener('click', (e) => {
             if (e.target === ui.elements.chartModal) this.closeChartModal();
         });
+
+        // Inspector Modal
+        ui.elements.closeInspectorBtn.addEventListener('click', () => this.closeInspector());
+        ui.elements.inspectorModal.addEventListener('click', (e) => {
+            if (e.target === ui.elements.inspectorModal) this.closeInspector();
+        });
+
+        // Column Toggle
+        ui.elements.btnToggleColumns.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const isVisible = ui.elements.columnDropdown.style.display === 'block';
+            ui.elements.columnDropdown.style.display = isVisible ? 'none' : 'block';
+        });
+
+        document.addEventListener('click', (e) => {
+            if (!ui.elements.columnDropdown.contains(e.target) && e.target !== ui.elements.btnToggleColumns) {
+                ui.elements.columnDropdown.style.display = 'none';
+            }
+        });
         
         await Promise.all([
             this.updateCSVFileList(),
@@ -112,6 +133,18 @@ export const results = {
             currentCsvData = content.data;
             currentCsvColumns = content.columns;
             
+            // Store directory of CSV for relative log path resolution
+            if (filePath.includes('/')) {
+                currentCsvDir = filePath.substring(0, filePath.lastIndexOf('/')) + '/';
+            } else {
+                currentCsvDir = "";
+            }
+            
+            // Default visibility: Hide very long or redundant columns initially
+            const hideByDefault = ['BLACKBOX_JUSTIFICATION', 'GLASSBOX_JUSTIFICATION', 'log_path', 'full_log', 'messages'];
+            currentVisibleColumns = currentCsvColumns.filter(c => !hideByDefault.includes(c));
+
+            this.renderColumnSelector();
             this.populateFilters();
             this.applyFilters(); // This draws charts and tables
 
@@ -121,6 +154,48 @@ export const results = {
         }
     },
 
+    renderColumnSelector() {
+        ui.elements.columnList.innerHTML = `
+            <div style="display: flex; gap: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--color-bg-3); padding-bottom: 8px;">
+                <span class="filter-link" id="cols-all">All</span>
+                <span class="filter-link" id="cols-none">None</span>
+            </div>
+            <div class="column-grid">
+                ${currentCsvColumns.map(col => `
+                    <label class="checkbox-item">
+                        <input type="checkbox" value="${col}" ${currentVisibleColumns.includes(col) ? 'checked' : ''}>
+                        <span title="${col}">${col}</span>
+                    </label>
+                `).join('')}
+            </div>
+        `;
+
+        // Bind events
+        ui.elements.columnList.querySelectorAll('input').forEach(input => {
+            input.addEventListener('change', () => {
+                const col = input.value;
+                if (input.checked) {
+                    if (!currentVisibleColumns.includes(col)) currentVisibleColumns.push(col);
+                } else {
+                    currentVisibleColumns = currentVisibleColumns.filter(c => c !== col);
+                }
+                this.applyFilters();
+            });
+        });
+
+        document.getElementById('cols-all').addEventListener('click', () => {
+            currentVisibleColumns = [...currentCsvColumns];
+            this.renderColumnSelector();
+            this.applyFilters();
+        });
+
+        document.getElementById('cols-none').addEventListener('click', () => {
+            currentVisibleColumns = [];
+            this.renderColumnSelector();
+            this.applyFilters();
+        });
+    },
+
     populateFilters() {
         const models = new Set();
         const scenarios = new Set();
@@ -175,6 +250,9 @@ export const results = {
         });
 
         ui.elements.dataStats.textContent = `Showing ${filteredData.length} of ${currentCsvData.length} records`;
+        if (ui.elements.csvTableStats) {
+            ui.elements.csvTableStats.textContent = `Found ${filteredData.length} records`;
+        }
 
         this.renderTable(filteredData);
         this.renderCharts(filteredData);
@@ -186,20 +264,133 @@ export const results = {
             return;
         }
 
-        let html = `<div class="data-table-wrapper">
-            <div style="overflow-x: auto;">
-                <table class="data-table">
-                    <thead><tr>${currentCsvColumns.map(c => `<th>${c}</th>`).join('')}</tr></thead>
-                    <tbody>
-                        ${data.map(row => `
-                            <tr>${currentCsvColumns.map(col => `<td>${row[col] ?? ''}</td>`).join('')}</tr>
-                        `).join('')}
-                    </tbody>
-                </table>
-            </div>
+        const visibleCols = currentVisibleColumns;
+
+        let html = `<div class="data-table-wrapper" style="height: calc(100vh - 280px); overflow-y: auto;">
+            <table class="data-table">
+                <thead>
+                    <tr>
+                        <th class="cell-action"></th>
+                        ${visibleCols.map(c => `<th>${c}</th>`).join('')}
+                    </tr>
+                </thead>
+                <tbody>
+                    ${data.map((row, idx) => `
+                        <tr data-idx="${idx}">
+                            <td class="cell-action"><button class="btn-row-action" data-idx="${idx}">VIEW</button></td>
+                            ${visibleCols.map(col => {
+                                const val = row[col] ?? '';
+                                const isLong = col.toLowerCase().includes('justification') || col.toLowerCase().includes('id');
+                                return `<td class="${isLong ? 'cell-long' : ''}" title="${val}">${val}</td>`;
+                            }).join('')}
+                        </tr>
+                    `).join('')}
+                </tbody>
+            </table>
         </div>`;
         
         ui.elements.csvResults.innerHTML = html;
+
+        // Bind Row Click
+        ui.elements.csvResults.querySelectorAll('tr[data-idx]').forEach(tr => {
+            tr.addEventListener('click', (e) => {
+                const idx = tr.dataset.idx;
+                this.showRowInspector(data[idx]);
+            });
+        });
+        
+        // Bind View Button (redundant but explicit)
+        ui.elements.csvResults.querySelectorAll('.btn-row-action').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const idx = btn.dataset.idx;
+                this.showRowInspector(data[idx]);
+            });
+        });
+    },
+
+    closeInspector() {
+        ui.elements.inspectorModal.style.display = 'none';
+        ui.elements.inspectorContent.innerHTML = '<div class="empty-state">Loading details...</div>';
+    },
+
+    async showRowInspector(rowData) {
+        ui.elements.inspectorModal.style.display = 'flex';
+        
+        // Initial layout
+        ui.elements.inspectorContent.innerHTML = `
+            <div class="inspector-layout">
+                <aside class="inspector-sidebar">
+                    <h2 style="margin-bottom: var(--space-md); font-size: 1rem;">Record Details</h2>
+                    <div id="inspector-fields">
+                        ${Object.entries(rowData).map(([key, val]) => `
+                            <div class="field-entry">
+                                <div class="field-label">${key}</div>
+                                <div class="field-value">${val ?? '<span style="color: var(--color-text-muted)">null</span>'}</div>
+                            </div>
+                        `).join('')}
+                    </div>
+                </aside>
+                <main class="inspector-main">
+                    <div class="json-viewer-header">
+                        <h2 style="font-size: 1rem;">Raw Experiment Log</h2>
+                        <span id="log-status" style="font-size: 0.7rem; color: var(--color-text-secondary);">Checking for log file...</span>
+                    </div>
+                    <div id="log-viewer" class="json-viewer-container">
+                        <div class="empty-state">Searching for log file associated with this run...</div>
+                    </div>
+                </main>
+            </div>
+        `;
+
+        // Strategy to find the log:
+        // 1. rowData.log_path
+        // 2. rowData.RUN_ID
+        
+        let rawPath = rowData.log_path || rowData.RUN_ID || rowData.run_id;
+        if (!rawPath) {
+            document.getElementById('log-viewer').innerHTML = '<div class="empty-state">No log path metadata found in record.</div>';
+            document.getElementById('log-status').textContent = `Missing log metadata.`;
+            return;
+        }
+
+        // Normalize path: add .json if missing
+        let jsonPath = rawPath.endsWith('.json') ? rawPath : (rawPath + '.json');
+        
+        // Trial paths:
+        const trials = [
+            jsonPath,                         // Direct
+            currentCsvDir + jsonPath,         // Relative to CSV (e.g. logs/full_experiment/ + path)
+            'logs/' + jsonPath                // Absolute under logs/
+        ];
+
+        let loaded = false;
+        for (const trial of trials) {
+            if (loaded) break;
+            try {
+                document.getElementById('log-status').textContent = `Trying: ${trial}`;
+                const logData = await api.get(`/api/logs/browse?path=${encodeURIComponent(trial)}`);
+                document.getElementById('log-viewer').textContent = JSON.stringify(logData, null, 2);
+                document.getElementById('log-status').textContent = `Log loaded: ${trial}`;
+                document.getElementById('log-status').style.color = 'var(--color-success)';
+                loaded = true;
+            } catch (err) {
+                console.log(`Failed trial: ${trial}`);
+            }
+        }
+
+        if (!loaded) {
+            document.getElementById('log-viewer').innerHTML = `
+                <div class="empty-state" style="color: var(--color-danger)">
+                    Failed to load log file: API Error: 404<br>
+                    <div style="margin-top: 8px; color: var(--color-text-secondary); font-size: 0.7rem;">
+                        Paths tried:<br>
+                        ${trials.map(t => `- ${t}`).join('<br>')}
+                    </div>
+                </div>`;
+            document.getElementById('log-status').textContent = `Error loading log.`;
+            document.getElementById('log-status').style.color = 'var(--color-danger)';
+        }
     },
 
     renderCharts(data) {
diff --git a/api/static/js/ui.js b/api/static/js/ui.js
index 2c402ab..27b187e 100644
--- a/api/static/js/ui.js
+++ b/api/static/js/ui.js
@@ -21,7 +21,18 @@ export const ui = {
             modalChartContainer: document.getElementById('modal-chart-container'),
             
             tabTriggers: document.querySelectorAll('.tab-trigger'),
-            tabPanels: document.querySelectorAll('.tab-panel')
+            tabPanels: document.querySelectorAll('.tab-panel'),
+
+            // New CSV Table Elements
+            csvTableStats: document.getElementById('csv-table-stats'),
+            btnToggleColumns: document.getElementById('btn-toggle-columns'),
+            columnDropdown: document.getElementById('column-dropdown'),
+            columnList: document.getElementById('column-list'),
+
+            // Inspector Modal
+            inspectorModal: document.getElementById('inspector-modal'),
+            closeInspectorBtn: document.getElementById('close-inspector-btn'),
+            inspectorContent: document.getElementById('inspector-content')
         };
     },