feat: Fetch all data, add spinner, display full results

index.html

@@ -292,7 +292,10 @@
              </select>
         </div>
 
-        <div id="loading">Loading data... Please wait.</div>
+        <div id="loading">
+            <div class="spinner"></div>
+            <div id="loading-message">Loading data... Please wait.</div>
+        </div>
         <div id="error" style="display: none;"></div>
 
         <!-- KPI Section -->
@@ -391,6 +394,7 @@
             const footer = document.getElementById('footer');
             const dataSourceUrlElement = document.getElementById('data-source-url');
             const lastUpdatedElement = document.getElementById('last-updated');
+            const loadingMessage = document.getElementById('loading-message'); // Get loading message element
             const requestsCountFooter = document.getElementById('requests-count-footer');
             const modelSelector = document.getElementById('modelSelector');
             const inspectorModal = document.getElementById('inspectorModal');
@@ -406,11 +410,14 @@
             const modelDetailTableContainerDiv = document.getElementById('modelDetailTableContainer');
 
 
-            dataSourceUrlElement.href = apiUrl; // Set link href
+            // Base URL without offset/length for display
+            const baseApiUrlDisplay = "https://datasets-server.huggingface.co/rows?dataset=victor%2Fproviders-metrics&config=default&split=train";
+            dataSourceUrlElement.href = baseApiUrlDisplay; // Set link href
 
             let allRows = []; // Store all fetched rows globally
             let currentFilteredRows = []; // Store currently filtered rows
             let uniqueModels = [];
+            const rowsPerFetch = 100; // How many rows to fetch per API call
 
             // Plotly layout defaults (same as before)
              const baseLayout = {
@@ -523,35 +530,65 @@
              });
 
 
-            // --- Initial Fetch ---
-            fetch(apiUrl)
-                .then(response => {
-                    if (!response.ok) throw new Error(`HTTP error! status: ${response.status} ${response.statusText}`);
-                    return response.json();
-                })
-                .then(data => {
-                    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();
-
-                    populateModelSelector(); // Populate dropdown
-
-                    loadingDiv.style.display = 'none';
-                    kpiContainer.style.display = 'grid';
-                    dashboardContainer.style.display = 'grid';
-                    footer.style.display = 'block';
-
-                    updateDashboard('all'); // Initial load with all models
-
-                })
-                .catch(error => {
-                    console.error('Error fetching or processing data:', error);
-                    loadingDiv.style.display = 'none';
-                    errorDiv.textContent = `Error loading data: ${error.message}. Please check the console. Is the dataset server reachable?`;
-                    errorDiv.style.display = 'block';
-                });
+            // --- Fetching Logic ---
+            function fetchAllRows(offset = 0) {
+                const apiUrl = `https://datasets-server.huggingface.co/rows?dataset=victor%2Fproviders-metrics&config=default&split=train&offset=${offset}&length=${rowsPerFetch}`;
+                loadingMessage.textContent = `Fetching rows ${offset + 1} - ${offset + rowsPerFetch}... (Total: ${allRows.length})`;
+
+                fetch(apiUrl)
+                    .then(response => {
+                        if (!response.ok) {
+                            // Handle specific errors if needed, e.g., 404 might mean end of data for some APIs
+                            throw new Error(`HTTP error! status: ${response.status} ${response.statusText}`);
+                        }
+                        return response.json();
+                    })
+                    .then(data => {
+                        const fetchedRows = data.rows.map((item, index) => ({ ...item.row, originalIndex: offset + index }));
+                        allRows = allRows.concat(fetchedRows); // Append new rows
+
+                        console.log(`Fetched ${fetchedRows.length} rows. Total rows: ${allRows.length}`);
+
+                        // Check if we got fewer rows than requested, or zero rows, indicating the end
+                        if (fetchedRows.length < rowsPerFetch || fetchedRows.length === 0) {
+                            console.log("Finished fetching all rows.");
+                            lastUpdatedElement.textContent = new Date().toLocaleString();
+                            loadingDiv.style.display = 'none'; // Hide loading indicator
+                            kpiContainer.style.display = 'grid';
+                            dashboardContainer.style.display = 'grid';
+                            footer.style.display = 'block';
+
+                            populateModelSelector(); // Populate dropdown *after* all data is fetched
+                            updateDashboard('all'); // Initial load with all models
+                        } else {
+                            // Fetch the next batch
+                            fetchAllRows(offset + rowsPerFetch);
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error fetching data:', error);
+                        loadingDiv.style.display = 'none'; // Hide loading on error
+                        errorDiv.textContent = `Error fetching data at offset ${offset}: ${error.message}. Displaying partial data (${allRows.length} rows). Please check console.`;
+                        errorDiv.style.display = 'block';
+
+                        // Optionally, display the dashboard with partial data
+                        if (allRows.length > 0) {
+                             console.log("Displaying dashboard with partial data.");
+                             lastUpdatedElement.textContent = new Date().toLocaleString() + " (Partial Data)";
+                             kpiContainer.style.display = 'grid';
+                             dashboardContainer.style.display = 'grid';
+                             footer.style.display = 'block';
+                             populateModelSelector();
+                             updateDashboard('all');
+                        }
+                    });
+            }
+
+            // --- Start the fetching process ---
+            fetchAllRows();
+
 
-            // --- KPI Calculation Function (same as before) ---
+            // --- KPI Calculation Function ---
             function calculateAndDisplayKPIs(rows, selectedModelId) {
                 const context = selectedModelId === 'all' ? 'Overall' : `(${selectedModelId.split('/').pop()})`; // Shorten model name for title
 
@@ -897,4 +934,4 @@
     </script>
 
 </body>
-</html>
+</html>

style.css

@@ -26,3 +26,37 @@ p {
 .card p:last-child {
 	margin-bottom: 0;
 }
+
+/* Spinner Styles */
+#loading {
+    display: flex;
+    flex-direction: column; /* Stack spinner and message */
+    align-items: center;
+    justify-content: center;
+    min-height: 150px; /* Give it some space */
+    text-align: center;
+    font-size: 1.2em;
+    color: var(--muted-text-color);
+}
+.spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border-left-color: var(--primary-color);
+    margin-bottom: 15px; /* Space between spinner and text */
+
+    animation: spin 1s ease infinite;
+}
+#loading-message {
+    font-size: 1rem; /* Slightly smaller message */
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}