Update index.html

index.html

@@ -94,6 +94,7 @@
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); /* Responsive grid */
             gap: 25px; /* Space between plots */
+            margin-bottom: 30px;
         }
         .plot-container, .table-container {
             background-color: var(--card-bg-color);
@@ -104,8 +105,9 @@
             min-height: 450px; /* Ensure plots have some height */
             display: flex; /* For centering loading/error inside */
             flex-direction: column; /* Allow title and content stacking */
-            justify-content: center;
+            justify-content: flex-start; /* Align content top */
             align-items: center;
+            overflow: hidden; /* Prevent content spillover */
         }
          .plot-container .plotly, .table-container table {
             width: 100%;
@@ -117,6 +119,7 @@
             margin-bottom: 15px;
             color: var(--text-color);
             align-self: flex-start; /* Align title left */
+            width: 100%; /* Ensure title takes full width */
         }
 
         #loading, #error {
@@ -135,41 +138,128 @@
         }
 
         /* Table Styles */
-        .table-container {
-            overflow-x: auto; /* Allow horizontal scrolling on small screens */
-             align-items: flex-start; /* Align table top */
+        .table-wrapper { /* Added wrapper for scrolling */
+             width: 100%;
+             overflow-x: auto;
+             flex-grow: 1;
         }
         table {
             border-collapse: collapse;
             font-size: 0.9rem;
+            width: 100%; /* Make table take full width of wrapper */
         }
         th, td {
             padding: 10px 12px;
             text-align: left;
             border-bottom: 1px solid var(--border-color);
+            white-space: nowrap; /* Prevent wrapping */
         }
         th {
             background-color: var(--bg-color);
             font-weight: 500;
-            cursor: pointer; /* Indicate sortable */
-            white-space: nowrap;
-        }
-        th:hover {
-            background-color: #e9ecef;
-        }
-        td {
-             white-space: nowrap; /* Prevent wrapping in cells */
+            position: sticky; /* Sticky header */
+            top: 0;
+            z-index: 1;
         }
         tbody tr:hover {
             background-color: #f1f1f1;
         }
-        .error-count {
+        .error-count, .status-error {
             color: var(--danger-color);
             font-weight: 500;
         }
+        .status-success {
+             color: var(--success-color);
+             font-weight: 500;
+        }
         .success-rate-high { color: var(--success-color); font-weight: 500; }
         .success-rate-medium { color: var(--warning-color); font-weight: 500; }
         .success-rate-low { color: var(--danger-color); font-weight: 500; }
+        .inspect-button {
+            padding: 4px 8px;
+            font-size: 0.8rem;
+            cursor: pointer;
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            border-radius: 4px;
+        }
+        .inspect-button:hover {
+            opacity: 0.85;
+        }
+
+        /* Inspector Modal Styles */
+        .modal-overlay {
+            display: none; /* Hidden by default */
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto; /* Enable scroll if needed */
+            background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
+        }
+        .modal-content {
+            background-color: var(--card-bg-color);
+            margin: 5% auto; /* 5% from the top and centered */
+            padding: 25px;
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            width: 85%; /* Could be more or less, depending on screen size */
+            max-width: 1000px;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+            position: relative;
+            max-height: 85vh; /* Limit height */
+            overflow-y: auto; /* Add scroll to modal content */
+        }
+        .modal-close {
+            color: #aaa;
+            position: absolute;
+            top: 10px;
+            right: 20px;
+            font-size: 28px;
+            font-weight: bold;
+            cursor: pointer;
+        }
+        .modal-close:hover,
+        .modal-close:focus {
+            color: var(--text-color);
+            text-decoration: none;
+        }
+        .modal-content h2 {
+            margin-top: 0;
+            font-weight: 500;
+            border-bottom: 1px solid var(--border-color);
+            padding-bottom: 10px;
+            margin-bottom: 20px;
+        }
+         .modal-content h3 {
+            font-size: 1.1rem;
+            font-weight: 500;
+            margin-top: 20px;
+            margin-bottom: 8px;
+            color: var(--primary-color);
+         }
+        .modal-content pre {
+            background-color: var(--bg-color);
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            padding: 15px;
+            font-size: 0.85rem;
+            white-space: pre-wrap; /* Allow wrapping */
+            word-wrap: break-word;
+            max-height: 300px; /* Limit height of code blocks */
+            overflow-y: auto; /* Add scroll to code blocks */
+        }
+         .modal-content p {
+             margin-bottom: 5px;
+         }
+         .modal-content strong {
+             color: var(--muted-text-color);
+             min-width: 120px;
+             display: inline-block;
+         }
 
 
         footer {
@@ -233,31 +323,79 @@
             <div id="plotErrorTypesProvider" class="plot-container"></div>
             <div id="modelDetailTableContainer" class="table-container" style="display: none;"> {/* Initially hidden */}
                  <h3 class="plot-title" id="table-title">Detailed Comparison</h3>
-                 <table id="modelDetailTable">
-                     <thead></thead>
-                     <tbody></tbody>
-                 </table>
+                 <div class="table-wrapper">
+                     <table id="modelDetailTable">
+                         <thead></thead>
+                         <tbody></tbody>
+                     </table>
+                 </div>
             </div>
             <div id="plotLatencyHeatmap" class="plot-container"></div> {/* Will be hidden when filtered */}
         </div>
 
+         <!-- Request Inspector Table -->
+         <div id="requestInspectorContainer" class="table-container" style="display: none; min-height: 300px;">
+             <h3 class="plot-title" id="request-table-title">Request Inspector</h3>
+             <div class="table-wrapper">
+                 <table id="requestTable">
+                     <thead></thead>
+                     <tbody></tbody>
+                 </table>
+             </div>
+         </div>
+
+
         <footer id="footer" style="display: none;">
             Data fetched from: <a id="data-source-url" href="#" target="_blank">Hugging Face Datasets</a><br>
-            Last updated: <span id="last-updated"></span>
+            Showing <span id="requests-count-footer">--</span> requests. Last updated: <span id="last-updated"></span>
         </footer>
     </div>
 
+     <!-- Inspector Modal -->
+    <div id="inspectorModal" class="modal-overlay">
+        <div class="modal-content">
+            <span class="modal-close" onclick="hideInspectorModal()">×</span>
+            <h2 id="modal-title">Request Details</h2>
+
+            <h3>Summary</h3>
+            <p><strong>Provider:</strong> <span id="modal-provider"></span></p>
+            <p><strong>Model:</strong> <span id="modal-model"></span></p>
+            <p><strong>Status:</strong> <span id="modal-status"></span></p>
+            <p><strong>Duration:</strong> <span id="modal-duration"></span> ms</p>
+            <p><strong>Error:</strong> <span id="modal-error"></span></p>
+            <p><strong>Timestamp (Start):</strong> <span id="modal-timestamp"></span></p>
+
+            <h3>Request Body</h3>
+            <pre><code id="modal-req-body"></code></pre>
+
+            <h3>Response Body</h3>
+            <pre><code id="modal-resp-body"></code></pre>
+
+            <h3>Request Headers (Sanitized)</h3>
+            <pre><code id="modal-req-headers"></code></pre>
+
+            <h3>Response Headers (Sanitized)</h3>
+            <pre><code id="modal-resp-headers"></code></pre>
+        </div>
+    </div>
+
+
     <script>
         document.addEventListener('DOMContentLoaded', function() {
-            const apiUrl = "https://datasets-server.huggingface.co/rows?dataset=victor%2Fproviders-metrics&config=default&split=train&offset=0&length=100"; // Fetch 1000 rows
+            const apiUrl = "https://datasets-server.huggingface.co/rows?dataset=victor%2Fproviders-metrics&config=default&split=train&offset=0&length=100"; // Fetch 100 rows
             const loadingDiv = document.getElementById('loading');
             const errorDiv = document.getElementById('error');
             const kpiContainer = document.querySelector('.kpi-container');
             const dashboardContainer = document.querySelector('.dashboard-container');
+            const requestInspectorContainer = document.getElementById('requestInspectorContainer');
             const footer = document.getElementById('footer');
             const dataSourceUrlElement = document.getElementById('data-source-url');
             const lastUpdatedElement = document.getElementById('last-updated');
+            const requestsCountFooter = document.getElementById('requests-count-footer');
             const modelSelector = document.getElementById('modelSelector');
+            const inspectorModal = document.getElementById('inspectorModal');
+            const requestTableBody = document.querySelector('#requestTable tbody');
+
 
             // Plot containers
             const plotLatencyProviderDiv = document.getElementById('plotLatencyProvider');
@@ -271,10 +409,11 @@
             dataSourceUrlElement.href = apiUrl; // Set link href
 
             let allRows = []; // Store all fetched rows globally
+            let currentFilteredRows = []; // Store currently filtered rows
             let uniqueModels = [];
 
-            // Plotly layout defaults
-            const baseLayout = {
+            // Plotly layout defaults (same as before)
+             const baseLayout = {
                 margin: { l: 60, r: 30, b: 100, t: 60, pad: 4 },
                 legend: { bgcolor: 'rgba(255,255,255,0.5)', bordercolor: '#ccc', borderwidth: 1 },
                 colorway: ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'],
@@ -306,7 +445,8 @@
 
             function calculateMedian(arr) {
                 if (!arr || arr.length === 0) return null;
-                const sortedArr = [...arr].sort((a, b) => a - b);
+                const sortedArr = [...arr].filter(n => n !== null && n >= 0).sort((a, b) => a - b); // Filter nulls/negatives before sort
+                if (sortedArr.length === 0) return null;
                 const mid = Math.floor(sortedArr.length / 2);
                 return sortedArr.length % 2 !== 0 ? sortedArr[mid] : (sortedArr[mid - 1] + sortedArr[mid]) / 2;
             }
@@ -322,40 +462,67 @@
             }
 
             function updateDashboard(selectedModelId) {
-                const filteredRows = selectedModelId === 'all'
+                currentFilteredRows = selectedModelId === 'all' // Update global filtered rows
                     ? allRows
                     : allRows.filter(row => row.model_id === selectedModelId);
 
-                console.log(`Updating dashboard for: ${selectedModelId}, Rows: ${filteredRows.length}`);
+                console.log(`Updating dashboard for: ${selectedModelId}, Rows: ${currentFilteredRows.length}`);
+                requestsCountFooter.textContent = currentFilteredRows.length; // Update footer count
 
                 // Update KPIs
-                calculateAndDisplayKPIs(filteredRows, selectedModelId);
+                calculateAndDisplayKPIs(currentFilteredRows, selectedModelId);
 
                 // Update Plots
-                createLatencyByProviderPlot(filteredRows, selectedModelId);
-                createReliabilityByProviderPlot(filteredRows, selectedModelId);
-                createErrorTypesByProviderPlot(filteredRows, selectedModelId);
+                createLatencyByProviderPlot(currentFilteredRows, selectedModelId);
+                createReliabilityByProviderPlot(currentFilteredRows, selectedModelId);
+                createErrorTypesByProviderPlot(currentFilteredRows, selectedModelId);
+
+                // Update Request Inspector Table
+                createRequestTable(currentFilteredRows);
+                requestInspectorContainer.style.display = 'flex'; // Show inspector table
 
                 // Show/Hide plots based on selection
                 if (selectedModelId === 'all') {
                     plotLatencyModelDiv.style.display = 'flex';
                     plotLatencyHeatmapDiv.style.display = 'flex';
                     modelDetailTableContainerDiv.style.display = 'none';
-                    createLatencyByModelPlot(filteredRows); // Only create these for 'all'
-                    createLatencyHeatmap(filteredRows);
+                    createLatencyByModelPlot(currentFilteredRows); // Only create these for 'all'
+                    createLatencyHeatmap(currentFilteredRows);
                 } else {
                     plotLatencyModelDiv.style.display = 'none';
                     plotLatencyHeatmapDiv.style.display = 'none';
                     modelDetailTableContainerDiv.style.display = 'flex'; // Show table
-                    createModelDetailTable(filteredRows, selectedModelId);
+                    createModelDetailTable(currentFilteredRows, selectedModelId);
                 }
             }
 
-             // --- Event Listener ---
+             // --- Event Listeners ---
              modelSelector.addEventListener('change', (event) => {
                  updateDashboard(event.target.value);
              });
 
+             // Event listener for inspect buttons (delegated)
+             requestTableBody.addEventListener('click', (event) => {
+                 if (event.target.classList.contains('inspect-button')) {
+                     const rowIndex = parseInt(event.target.getAttribute('data-row-index'), 10);
+                     // Find the original row index in allRows based on the filtered index
+                     const originalRowData = currentFilteredRows[rowIndex]; // Get data from the *filtered* array using the index from the table
+                     if (originalRowData) {
+                         showInspectorModal(originalRowData);
+                     } else {
+                         console.error("Could not find row data for index:", rowIndex);
+                     }
+                 }
+             });
+
+             // Close modal if overlay is clicked
+             inspectorModal.addEventListener('click', (event) => {
+                 if (event.target === inspectorModal) { // Check if the click was directly on the overlay
+                     hideInspectorModal();
+                 }
+             });
+
+
             // --- Initial Fetch ---
             fetch(apiUrl)
                 .then(response => {
@@ -363,7 +530,7 @@
                     return response.json();
                 })
                 .then(data => {
-                    allRows = data.rows.map(item => item.row); // Store globally
+                    allRows = data.rows.map((item, index) => ({ ...item.row, originalIndex: index })); // Store globally, add original index if needed later, though direct filtering is fine here
                     console.log(`Fetched ${allRows.length} rows.`);
                     lastUpdatedElement.textContent = new Date().toLocaleString();
 
@@ -384,7 +551,7 @@
                     errorDiv.style.display = 'block';
                 });
 
-            // --- KPI Calculation Function ---
+            // --- KPI Calculation Function (same as before) ---
             function calculateAndDisplayKPIs(rows, selectedModelId) {
                 const context = selectedModelId === 'all' ? 'Overall' : `(${selectedModelId.split('/').pop()})`; // Shorten model name for title
 
@@ -435,8 +602,8 @@
 
 
             // --- Plotting Functions (Modified to accept data and context) ---
-
-            function createLatencyByProviderPlot(rows, selectedModelId) {
+            // (Plotting functions: createLatencyByProviderPlot, createReliabilityByProviderPlot, createLatencyByModelPlot, createErrorTypesByProviderPlot, createLatencyHeatmap remain largely the same as previous version, just ensure they use Plotly.react for updates)
+             function createLatencyByProviderPlot(rows, selectedModelId) {
                 const titleContext = selectedModelId === 'all' ? '' : `for ${selectedModelId.split('/').pop()}`;
                 const dataByProvider = {};
                 rows.forEach(row => {
@@ -608,84 +775,124 @@
                  Plotly.react(plotLatencyHeatmapDiv, plotData, layout, {responsive: true});
             }
 
-            function createModelDetailTable(rows, selectedModelId) {
+            function createModelDetailTable(rows, selectedModelId) { // Only shown when filtered
                 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 = ''; // Clear previous header
-                tableBody.innerHTML = ''; // Clear previous body
+                tableHead.innerHTML = ''; tableBody.innerHTML = ''; // Clear
 
-                const providerStats = {}; // { provider: { total: 0, success: 0, errors: 0, latencies: [] } }
+                const providerStats = {};
 
                 rows.forEach(row => {
                     const provider = row.provider_name;
-                    if (!providerStats[provider]) {
-                        providerStats[provider] = { total: 0, success: 0, errors: 0, latencies: [] };
-                    }
+                    if (!providerStats[provider]) providerStats[provider] = { total: 0, success: 0, errors: 0, latencies: [] };
                     providerStats[provider].total++;
-                    if (row.response_status_code === 200) {
-                        providerStats[provider].success++;
-                    } else if (row.response_status_code !== null) {
-                        providerStats[provider].errors++;
-                    }
-                    if (row.duration_ms !== null && row.duration_ms >= 0) {
-                        providerStats[provider].latencies.push(row.duration_ms);
-                    }
+                    if (row.response_status_code === 200) providerStats[provider].success++;
+                    else if (row.response_status_code !== null) providerStats[provider].errors++;
+                    if (row.duration_ms !== null && row.duration_ms >= 0) providerStats[provider].latencies.push(row.duration_ms);
                 });
 
-                // Create Header
                 const headerRow = tableHead.insertRow();
                 const headers = ['Provider', 'Median Latency (ms)', 'Success Rate (%)', 'Error Count', 'Total Requests'];
-                headers.forEach(text => {
-                    const th = document.createElement('th');
-                    th.textContent = text;
-                    headerRow.appendChild(th);
-                });
+                headers.forEach(text => { headerRow.insertCell().textContent = text; });
 
-                // Create Body Rows
                 const providerDataArray = [];
                 for (const provider in providerStats) {
                     const stats = providerStats[provider];
-                    const medianLatency = calculateMedian(stats.latencies);
-                    const successRate = stats.total > 0 ? (stats.success / stats.total * 100) : 0;
                     providerDataArray.push({
                         provider: provider,
-                        medianLatency: medianLatency,
-                        successRate: successRate,
-                        errors: stats.errors,
-                        total: stats.total
+                        medianLatency: calculateMedian(stats.latencies),
+                        successRate: stats.total > 0 ? (stats.success / stats.total * 100) : 0,
+                        errors: stats.errors, total: stats.total
                     });
                 }
-
-                // Sort initially by median latency (ascending)
-                providerDataArray.sort((a, b) => {
-                    if (a.medianLatency === null) return 1; // Nulls last
-                    if (b.medianLatency === null) return -1;
-                    return a.medianLatency - b.medianLatency;
-                });
-
+                providerDataArray.sort((a, b) => (a.medianLatency ?? Infinity) - (b.medianLatency ?? Infinity)); // Sort by latency
 
                 providerDataArray.forEach(data => {
                     const row = tableBody.insertRow();
                     row.insertCell().textContent = data.provider;
                     row.insertCell().textContent = data.medianLatency !== null ? data.medianLatency.toFixed(0) : 'N/A';
-
                     const successCell = row.insertCell();
                     successCell.textContent = data.successRate.toFixed(1);
-                    // Add color coding for success rate
                     if (data.successRate >= 95) successCell.className = 'success-rate-high';
                     else if (data.successRate >= 80) successCell.className = 'success-rate-medium';
                     else successCell.className = 'success-rate-low';
-
-
                     const errorCell = row.insertCell();
                     errorCell.textContent = data.errors;
                     if (data.errors > 0) errorCell.classList.add('error-count');
-
                     row.insertCell().textContent = data.total;
                 });
             }
 
+            // --- Request Inspector Table ---
+            function createRequestTable(rows) {
+                 const tableHead = document.querySelector('#requestTable thead');
+                 const tableBody = document.querySelector('#requestTable tbody');
+                 tableHead.innerHTML = ''; tableBody.innerHTML = ''; // Clear
+
+                 document.getElementById('request-table-title').textContent = `Request Inspector (${rows.length} requests shown)`;
+
+                 // Create Header
+                 const headerRow = tableHead.insertRow();
+                 const headers = ['Provider', 'Model', 'Status', 'Duration (ms)', 'Error', 'Action'];
+                 headers.forEach(text => { headerRow.insertCell().textContent = text; });
+
+                 // Create Body Rows
+                 rows.forEach((row, index) => { // Use index within the *filtered* array
+                     const tableRow = tableBody.insertRow();
+                     tableRow.insertCell().textContent = row.provider_name;
+                     tableRow.insertCell().textContent = row.model_id.split('/').pop(); // Shorten model name
+                     const statusCell = tableRow.insertCell();
+                     statusCell.textContent = row.response_status_code ?? 'N/A';
+                     statusCell.classList.add(row.response_status_code === 200 ? 'status-success' : 'status-error');
+
+                     tableRow.insertCell().textContent = row.duration_ms ?? 'N/A';
+                     tableRow.insertCell().textContent = row.error_message ? 'Yes' : 'No';
+                     if (row.error_message) tableRow.cells[4].style.fontWeight = 'bold';
+
+                     const actionCell = tableRow.insertCell();
+                     const inspectButton = document.createElement('button');
+                     inspectButton.textContent = 'Inspect';
+                     inspectButton.className = 'inspect-button';
+                     inspectButton.setAttribute('data-row-index', index); // Store the index *within the filtered list*
+                     actionCell.appendChild(inspectButton);
+                 });
+            }
+
+            // --- Inspector Modal Functions ---
+            function formatJsonString(jsonString) {
+                if (!jsonString) return 'N/A';
+                try {
+                    const parsed = JSON.parse(jsonString);
+                    return JSON.stringify(parsed, null, 2); // Pretty print
+                } catch (e) {
+                    return jsonString; // Return original string if not valid JSON (e.g., HTML error)
+                }
+            }
+
+            window.showInspectorModal = function(rowData) { // Make it global for inline onclick
+                 if (!rowData) return;
+
+                 document.getElementById('modal-title').textContent = `Details for Request to ${rowData.provider_name}`;
+                 document.getElementById('modal-provider').textContent = rowData.provider_name ?? 'N/A';
+                 document.getElementById('modal-model').textContent = rowData.model_id ?? 'N/A';
+                 document.getElementById('modal-status').textContent = rowData.response_status_code ?? 'N/A';
+                 document.getElementById('modal-duration').textContent = rowData.duration_ms ?? 'N/A';
+                 document.getElementById('modal-error').textContent = rowData.error_message ?? 'None';
+                 document.getElementById('modal-timestamp').textContent = rowData.request_start_iso ? new Date(rowData.request_start_iso).toLocaleString() : 'N/A';
+
+                 document.getElementById('modal-req-body').textContent = formatJsonString(rowData.request_body);
+                 document.getElementById('modal-resp-body').textContent = formatJsonString(rowData.response_body_raw);
+                 document.getElementById('modal-req-headers').textContent = formatJsonString(rowData.request_headers_sanitized);
+                 document.getElementById('modal-resp-headers').textContent = formatJsonString(rowData.response_headers_sanitized);
+
+                 inspectorModal.style.display = 'block';
+            }
+
+            window.hideInspectorModal = function() { // Make it global for inline onclick
+                 inspectorModal.style.display = 'none';
+            }
+
         });
     </script>