Ultra-fast jobs display: backend returns first 40 jobs instantly, frontend renders immediately, full set updates when ready

cache-visualization.html

@@ -25,53 +25,58 @@
     <tbody></tbody>
   </table>
   <script>
-    let cacheData = [];
-    function renderTable(data) {
-      const tbody = document.querySelector('#cacheTable tbody');
+    let cacheKeys = [];
+    let cacheDetails = {};
+    const tbody = document.querySelector('#cacheTable tbody');
+
+    function renderTable(keys) {
       tbody.innerHTML = '';
-      for (const { key, value } of data) {
+      for (const { key } of keys) {
         const tr = document.createElement('tr');
         const tdKey = document.createElement('td');
         tdKey.textContent = key;
         const tdValue = document.createElement('td');
-        if (typeof value === 'object' && value !== null) {
-          const btn = document.createElement('span');
-          btn.textContent = '[expand]';
-          btn.className = 'expand';
-          btn.onclick = () => {
-            btn.outerHTML = `<div class='json'>${JSON.stringify(value, null, 2)}</div>`;
-          };
-          tdValue.appendChild(btn);
-        } else {
-          tdValue.textContent = String(value);
-        }
+        tdValue.textContent = '[click to load]';
+        tdValue.className = 'expand';
+        tdValue.onclick = async () => {
+          tdValue.textContent = 'Loading...';
+          if (!cacheDetails[key]) {
+            try {
+              const res = await fetch(`http://localhost:3006/api/cache/${encodeURIComponent(key)}`);
+              const data = await res.json();
+              cacheDetails[key] = data.value;
+            } catch (err) {
+              tdValue.textContent = 'Error loading value';
+              return;
+            }
+          }
+          tdValue.innerHTML = `<div class='json'>${JSON.stringify(cacheDetails[key], null, 2)}</div>`;
+        };
         tr.appendChild(tdKey);
         tr.appendChild(tdValue);
         tbody.appendChild(tr);
       }
     }
 
-    // Fetch cache data from API
-    async function loadCache() {
+    // Fetch cache keys from API
+    async function loadKeys() {
       try {
-        const res = await fetch('http://localhost:3006/api/cache');
-        cacheData = await res.json();
-        renderTable(cacheData);
+        const res = await fetch('http://localhost:3006/api/cache/keys');
+        cacheKeys = await res.json();
+        renderTable(cacheKeys);
       } catch (err) {
-        document.querySelector('#cacheTable tbody').innerHTML = `<tr><td colspan='2' style='color:#b91c1c'>Failed to load cache data: ${err}</td></tr>`;
+        tbody.innerHTML = `<tr><td colspan='2' style='color:#b91c1c'>Failed to load cache keys: ${err}</td></tr>`;
       }
     }
 
     // Search functionality
     document.getElementById('search').addEventListener('input', function() {
       const q = this.value.toLowerCase();
-      renderTable(cacheData.filter(({key, value}) =>
-        key.toLowerCase().includes(q) || JSON.stringify(value).toLowerCase().includes(q)
-      ));
+      renderTable(cacheKeys.filter(({key}) => key.toLowerCase().includes(q)));
     });
 
     // Initial load
-    loadCache();
+    loadKeys();
   </script>
 </body>
 </html>