feat: add sortable indicators to model detail table headers

index.html

@@ -472,8 +472,10 @@
             let allRows = []; // Store all fetched rows globally
             let currentFilteredRows = []; // Store currently filtered rows
             let uniqueModels = [];
-            let currentSortKey = null; // Track current sort column
-            let currentSortDirection = 'asc'; // Track current sort direction ('asc' or 'desc')
+            let currentSortKey = null; // Track current sort column for requestTable
+            let currentSortDirection = 'asc'; // Track current sort direction for requestTable
+            let modelDetailSortKey = 'medianLatency'; // Default sort for detail table
+            let modelDetailSortDirection = 'asc'; // Default direction for detail table
             const rowsPerFetch = 100; // How many rows to fetch per API call
 
             // Plotly layout defaults (same as before)
@@ -604,6 +606,26 @@
                  sortTable(currentSortKey, currentSortDirection);
              });
 
+             // Sorting listener for Model Detail Table Header
+             document.querySelector('#modelDetailTable thead').addEventListener('click', (event) => {
+                 const header = event.target.closest('th.sortable-header');
+                 if (!header) return;
+
+                 const sortKey = header.dataset.sortKey;
+
+                 if (sortKey === modelDetailSortKey) {
+                     modelDetailSortDirection = modelDetailSortDirection === 'asc' ? 'desc' : 'asc';
+                 } else {
+                     modelDetailSortKey = sortKey;
+                     modelDetailSortDirection = 'asc';
+                 }
+
+                 // Re-render the table which includes sorting
+                 const selectedModel = modelSelector.value;
+                 const rowsForTable = selectedModel === 'all' ? allRows : allRows.filter(row => row.model_id === selectedModel);
+                 createModelDetailTable(rowsForTable, selectedModel);
+             });
+
 
             // --- Fetching Logic ---
             function fetchAllRows(offset = 0) {
@@ -892,7 +914,8 @@
                 document.getElementById('table-title').textContent = `Detailed Comparison for ${selectedModelId.split('/').pop()}`;
                 const tableHead = document.querySelector('#modelDetailTable thead');
                 const tableBody = document.querySelector('#modelDetailTable tbody');
-                tableHead.innerHTML = ''; tableBody.innerHTML = ''; // Clear
+                // Clear only the body, keep the header for event listeners
+                tableBody.innerHTML = '';
 
                 const providerStats = {};
 
@@ -905,9 +928,27 @@
                     if (row.duration_ms !== null && row.duration_ms >= 0) providerStats[provider].latencies.push(row.duration_ms);
                 });
 
-                const headerRow = tableHead.insertRow();
-                const headers = ['Provider', 'Median Latency (ms)', 'Success Rate (%)', 'Error Count', 'Total Requests'];
-                headers.forEach(text => { headerRow.insertCell().textContent = text; });
+                // Create Header (only if it doesn't exist)
+                if (tableHead.rows.length === 0) {
+                    const headerRow = tableHead.insertRow();
+                    const headers = [
+                        { text: 'Provider', key: 'provider', sortable: true },
+                        { text: 'Median Latency (ms)', key: 'medianLatency', sortable: true },
+                        { text: 'Success Rate (%)', key: 'successRate', sortable: true },
+                        { text: 'Error Count', key: 'errors', sortable: true },
+                        { text: 'Total Requests', key: 'total', sortable: true }
+                    ];
+                    headers.forEach(header => {
+                        const th = document.createElement('th');
+                        th.textContent = header.text;
+                        if (header.sortable) {
+                            th.classList.add('sortable-header');
+                            th.dataset.sortKey = header.key;
+                        }
+                        headerRow.appendChild(th);
+                    });
+                }
+
 
                 const providerDataArray = [];
                 for (const provider in providerStats) {
@@ -919,8 +960,33 @@
                         errors: stats.errors, total: stats.total
                     });
                 }
-                providerDataArray.sort((a, b) => (a.medianLatency ?? Infinity) - (b.medianLatency ?? Infinity)); // Sort by latency
 
+                // Sort the data based on current state
+                providerDataArray.sort((a, b) => {
+                    let valA = a[modelDetailSortKey];
+                    let valB = b[modelDetailSortKey];
+
+                    // Handle null/undefined for numeric sorts (e.g., medianLatency)
+                    const nullVal = modelDetailSortDirection === 'asc' ? Infinity : -Infinity;
+                    if (typeof valA === 'number' || valA === null || valA === undefined) {
+                        valA = (valA === null || valA === undefined) ? nullVal : valA;
+                    }
+                     if (typeof valB === 'number' || valB === null || valB === undefined) {
+                        valB = (valB === null || valB === undefined) ? nullVal : valB;
+                    }
+
+                    // Comparison logic
+                    if (typeof valA === 'string' && typeof valB === 'string') {
+                        return modelDetailSortDirection === 'asc' ? valA.localeCompare(valB) : valB.localeCompare(valA);
+                    } else {
+                        return modelDetailSortDirection === 'asc' ? valA - valB : valB - valA;
+                    }
+                });
+
+                // Update visual indicators *after* sorting
+                updateModelDetailSortIndicators();
+
+                // Render rows
                 providerDataArray.forEach(data => {
                     const row = tableBody.insertRow();
                     row.insertCell().textContent = data.provider;
@@ -937,7 +1003,16 @@
                 });
             }
 
-            // --- Sorting Function ---
+            function updateModelDetailSortIndicators() {
+                document.querySelectorAll('#modelDetailTable th.sortable-header').forEach(th => {
+                    th.classList.remove('sort-asc', 'sort-desc');
+                    if (th.dataset.sortKey === modelDetailSortKey) {
+                        th.classList.add(modelDetailSortDirection === 'asc' ? 'sort-asc' : 'sort-desc');
+                    }
+                });
+            }
+
+            // --- Sorting Function for Request Inspector ---
             function sortTable(key, direction) {
                 currentFilteredRows.sort((a, b) => {
                     let valA = a[key];