Deploy explorer to Hugging Face Spaces

evals/interactive_explorer.py

@@ -2144,6 +2144,15 @@ HTML_CONTENT = """
       display: none;
     }
 
+    .spinner-large {
+      width: 40px;
+      height: 40px;
+      border: 3px solid rgba(255, 255, 255, 0.1);
+      border-top-color: var(--accent);
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+
     @keyframes spin {
       to { transform: rotate(360deg); }
     }
@@ -2592,7 +2601,7 @@ HTML_CONTENT = """
   <div class="container">
 
     <!-- Sidebar History & Builder -->
-    <div class="sidebar" style="display: flex; flex-direction: column;">
+    <div class="sidebar" id="sidebar" style="display: flex; flex-direction: column; transition: opacity var(--transition-speed) ease, filter var(--transition-speed) ease;">
 
       <!-- Sidebar Tabs -->
       <div style="display: flex; border-bottom: 1px solid var(--border); transition: border-color var(--transition-speed) ease;">
@@ -2817,6 +2826,11 @@ HTML_CONTENT = """
               <div class="empty-title">Data360 Spec View</div>
               <div class="empty-desc">System engine visualization will render here.</div>
             </div>
+            <div class="empty-state" id="system-chart-loading-state" style="display: none; flex-direction: column; justify-content: center; align-items: center; min-height: 250px;">
+              <div class="spinner-large" style="margin-bottom: 16px;"></div>
+              <div class="empty-title" style="font-size:14px; font-weight:600; color:var(--text);">Compiling Spec...</div>
+              <div class="empty-desc" style="font-size:12px; color:var(--text-muted); margin-top:4px;">Retrieving MCP data and rendering charts</div>
+            </div>
             <div class="chart-container-div" id="system-chart-container"></div>
 
             <!-- Score & Critique Banner -->
@@ -2879,6 +2893,11 @@ HTML_CONTENT = """
               <div class="empty-title">Direct LLM Spec</div>
               <div class="empty-desc">Direct LLM generated visualization will render here.</div>
             </div>
+            <div class="empty-state" id="llm-chart-loading-state" style="display: none; flex-direction: column; justify-content: center; align-items: center; min-height: 250px;">
+              <div class="spinner-large" style="margin-bottom: 16px;"></div>
+              <div class="empty-title" style="font-size:14px; font-weight:600; color:var(--text);">Compiling Spec...</div>
+              <div class="empty-desc" style="font-size:12px; color:var(--text-muted); margin-top:4px;">Retrieving Direct LLM visualization output</div>
+            </div>
             <div class="chart-container-div" id="llm-chart-container"></div>
 
             <!-- Score & Critique Banner -->
@@ -3090,6 +3109,47 @@ HTML_CONTENT = """
       }
     }
 
+    // Background task interface blocker
+    function setSidebarDisabled(disabled) {
+      const sidebar = document.getElementById('sidebar');
+      if (!sidebar) return;
+      if (disabled) {
+        sidebar.style.pointerEvents = 'none';
+        sidebar.style.opacity = '0.5';
+        sidebar.style.filter = 'grayscale(35%)';
+        sidebar.style.cursor = 'not-allowed';
+      } else {
+        sidebar.style.pointerEvents = 'auto';
+        sidebar.style.opacity = '1';
+        sidebar.style.filter = 'none';
+        sidebar.style.cursor = 'default';
+      }
+    }
+
+    // Chart loaders state toggler
+    function setChartLoading(loading) {
+      const sysEmpty = document.getElementById("system-chart-empty-state");
+      const sysLoading = document.getElementById("system-chart-loading-state");
+      const sysContainer = document.getElementById("system-chart-container");
+      
+      const llmEmpty = document.getElementById("llm-chart-empty-state");
+      const llmLoading = document.getElementById("llm-chart-loading-state");
+      const llmContainer = document.getElementById("llm-chart-container");
+
+      if (loading) {
+        if (sysEmpty) sysEmpty.style.display = "none";
+        if (sysLoading) sysLoading.style.display = "flex";
+        if (sysContainer) sysContainer.style.display = "none";
+
+        if (llmEmpty) llmEmpty.style.display = "none";
+        if (llmLoading) llmLoading.style.display = "flex";
+        if (llmContainer) llmContainer.style.display = "none";
+      } else {
+        if (sysLoading) sysLoading.style.display = "none";
+        if (llmLoading) llmLoading.style.display = "none";
+      }
+    }
+
     async function loadReport(filename) {
       try {
         activeReportFilename = filename;
@@ -3106,6 +3166,7 @@ HTML_CONTENT = """
     function renderReport(data) {
       activeReport = data;
       window.lastReportData = data;
+      setChartLoading(false);
 
       document.getElementById("welcome-container").style.display = "none";
       document.getElementById("viz-grid").style.display = "grid";
@@ -3465,6 +3526,7 @@ HTML_CONTENT = """
       btn.disabled = true;
       spinner.style.display = "block";
       label.textContent = "Running Vision Audit...";
+      setSidebarDisabled(true);
 
       const logConsole = document.getElementById("log-console");
       logConsole.innerHTML += `<div class="terminal-line info">Running Visual Critique on both spec renders (GPT-4o Vision)...</div>`;
@@ -3496,6 +3558,7 @@ HTML_CONTENT = """
       } finally {
         btn.disabled = false;
         spinner.style.display = "none";
+        setSidebarDisabled(false);
       }
     }
 
@@ -3510,6 +3573,8 @@ HTML_CONTENT = """
       btn.disabled = true;
       spinner.style.display = "block";
       label.textContent = "Rerunning...";
+      setSidebarDisabled(true);
+      setChartLoading(true);
 
       const logConsole = document.getElementById("log-console");
       logConsole.innerHTML = `<div class="terminal-line info">Triggering rerun for report: ${activeReportFilename}...</div>`;
@@ -3527,10 +3592,12 @@ HTML_CONTENT = """
         await loadReport(activeReportFilename);
       } catch (err) {
         logConsole.innerHTML += `<div class="terminal-line err">Error during rerun: ${err.message}</div>`;
+        setChartLoading(false);
       } finally {
         btn.disabled = false;
         spinner.style.display = "none";
         label.textContent = "🔄 Rerun this run";
+        setSidebarDisabled(false);
       }
     }
 
@@ -3961,6 +4028,8 @@ HTML_CONTENT = """
       const oldText = generateBtn.innerText;
       generateBtn.disabled = true;
       generateBtn.innerText = 'Generating Visuals...';
+      setSidebarDisabled(true);
+      setChartLoading(true);
 
       // Build filters
       const disaggregation_filters = {};
@@ -3996,6 +4065,7 @@ HTML_CONTENT = """
         const data = await res.json();
         if (data.error) {
           alert(`Generation failed: ${data.error}`);
+          setChartLoading(false);
           return;
         }
 
@@ -4008,9 +4078,11 @@ HTML_CONTENT = """
 
       } catch (err) {
         alert(`Request failed: ${err}`);
+        setChartLoading(false);
       } finally {
         generateBtn.disabled = false;
         generateBtn.innerText = oldText;
+        setSidebarDisabled(false);
       }
     }