UI

index.html

@@ -382,16 +382,17 @@
              <div id="statusMessage"></div>
         </main>
     </div>
+
     <script>
-        // --- Element Variables ---
+        // --- Keep the existing element variables ---
         const tableList = document.getElementById('tableList');
         const schemaDisplay = document.getElementById('schemaDisplay');
         const schemaTable = document.getElementById('schemaTable');
-        const schemaPlaceholder = document.getElementById('schemaPlaceholder');
+        const schemaPlaceholder = document.getElementById('schemaPlaceholder'); // Added
         const dataDisplayContainer = document.getElementById('dataDisplayContainer');
         const dataDisplay = document.getElementById('dataDisplay');
         const dataTable = document.getElementById('dataTable');
-        const dataPlaceholder = document.getElementById('dataPlaceholder');
+        const dataPlaceholder = document.getElementById('dataPlaceholder'); // Added
         const tableDataHeader = document.getElementById('tableDataHeader');
         const sqlInput = document.getElementById('sqlInput');
         const runSqlButton = document.getElementById('runSqlButton');
@@ -401,20 +402,16 @@
         const statusMessage = document.getElementById('statusMessage');
         const loadingIndicator = document.getElementById('loadingIndicator');
 
-        // --- State Variables ---
+        // --- API URL is relative ---
         const API_BASE_URL = '';
         let currentTables = [];
         let selectedTable = null;
-        let currentCustomSQL = ''; // Keep track of the last run custom query
         let pollingIntervalId = null;
-        const POLLING_INTERVAL_MS = 5000; // Refresh every 5 seconds
+        const POLLING_INTERVAL_MS = 1000; // Refresh table list every 10 seconds
 
-        // --- Utility Functions ---
-        function showLoader(show, isPolling = false) {
-            // Only show loader for non-polling actions
-            if (!isPolling) {
-                loadingIndicator.style.display = show ? 'inline-block' : 'none';
-            }
+        // --- Utility Functions (keep existing) ---
+        function showLoader(show) {
+            loadingIndicator.style.display = show ? 'inline-block' : 'none';
         }
 
         function showStatus(message, isError = false) {
@@ -429,8 +426,8 @@
             statusMessage.style.display = 'none';
         }
 
-        async function fetchAPI(endpoint, options = {}, isPolling = false) { // Pass isPolling flag
-            showLoader(true, isPolling); // Pass isPolling flag
+        async function fetchAPI(endpoint, options = {}) {
+            showLoader(true);
             clearStatus();
             const url = `${API_BASE_URL}${endpoint}`;
             try {
@@ -443,28 +440,25 @@
                     } catch (e) { /* Ignore */ }
                     throw new Error(errorDetail);
                 }
+                 // Check if the response is likely JSON before trying to parse
                  const contentType = response.headers.get("content-type");
                  if (contentType && contentType.includes("application/json")) {
                      return await response.json();
                  }
+                 // Assume text for non-JSON or if content-type is missing
                  return await response.text();
             } catch (error) {
                 console.error('API Fetch Error:', error);
-                // Only show status for non-polling errors or make polling errors less prominent
-                if (!isPolling) {
-                    showStatus(`Error: ${error.message}`, true);
-                } else {
-                    console.warn(`Polling Error: ${error.message}`); // Log quietly
-                }
+                showStatus(`Error: ${error.message}`, true);
                 throw error;
             } finally {
-                showLoader(false, isPolling); // Pass isPolling flag
+                showLoader(false);
             }
         }
 
         function renderTable(data, tableElement) {
             tableElement.innerHTML = '';
-             if (!data || !Array.isArray(data)) {
+             if (!data || !Array.isArray(data)) { // Check if data is an array
                  tableElement.innerHTML = '<tbody><tr><td>Invalid data format received.</td></tr></tbody>';
                  console.error("Invalid data format for renderTable:", data);
                  return;
@@ -492,14 +486,17 @@
             });
         }
 
+        // --- renderSchema FIX ---
         function renderSchema(schemaData) {
-             schemaTable.innerHTML = '';
-             schemaPlaceholder.style.display = 'none';
+             // Target the table directly
+             schemaTable.innerHTML = ''; // Clear previous table content
+             schemaPlaceholder.style.display = 'none'; // Hide placeholder
+
             if (!schemaData || !schemaData.columns || schemaData.columns.length === 0) {
                 schemaTable.innerHTML = '<tbody><tr><td colspan="2">No schema information available.</td></tr></tbody>';
                 return;
             }
-            // schemaDisplay.innerHTML = '<h4>Schema</h4>'; // Header is already there
+
             const thead = schemaTable.createTHead();
             const headerRow = thead.insertRow();
             ['Name', 'Type'].forEach(headerText => {
@@ -507,6 +504,7 @@
                 th.textContent = headerText;
                 headerRow.appendChild(th);
             });
+
             const tbody = schemaTable.createTBody();
             schemaData.columns.forEach(column => {
                 const row = tbody.insertRow();
@@ -515,52 +513,67 @@
             });
          }
 
-        // --- Core Logic Functions ---
+
+        // --- Event Handlers (Modified) ---
 
         async function loadTables(isPolling = false) {
             if (!isPolling) {
                 tableList.innerHTML = '<li>Loading tables...</li>';
-                resetDisplays();
+                schemaTable.innerHTML = '';
+                dataTable.innerHTML = '';
+                tableDataHeader.textContent = '';
+                queryResultContainer.style.display = 'none';
+                schemaPlaceholder.style.display = 'block'; // Show placeholders initially
+                dataPlaceholder.style.display = 'block';
             }
             try {
-                const newTables = await fetchAPI('/tables', {}, isPolling); // Pass polling flag
-                if (JSON.stringify(newTables) !== JSON.stringify(currentTables)) {
+                const newTables = await fetchAPI('/tables');
+                // Check if the list actually changed before re-rendering
+                if (!isPolling || JSON.stringify(newTables) !== JSON.stringify(currentTables)) {
                     console.log("Table list changed, updating UI.");
                     currentTables = newTables;
                     displayTables(currentTables);
-
-                    // If the currently selected table disappeared, clear the displays
-                    if (selectedTable && !currentTables.includes(selectedTable)) {
-                        console.log(`Selected table "${selectedTable}" removed.`);
-                        resetToInitialState();
+                    if (!isPolling) {
+                         showStatus("Tables loaded.", false);
                     }
-                }
+                     // If the currently selected table disappeared, clear the displays
+                    if (selectedTable && !currentTables.includes(selectedTable)) {
+                         console.log(`Selected table "${selectedTable}" removed.`);
+                         selectedTable = null;
+                         tableDataHeader.textContent = '';
+                         schemaDisplay.innerHTML = '<h4>Schema</h4><p id="schemaPlaceholder">Select a table from the list.</p><table id="schemaTable"></table>';
+                         dataDisplayContainer.innerHTML = '<h4>Data <span id="tableDataHeader"></span></h4><p id="dataPlaceholder">Select a table from the list.</p><div id="dataDisplay"><table id="dataTable"></table></div>';
+                         // Re-assign potentially overwritten elements
+                         schemaTable = document.getElementById('schemaTable');
+                         dataTable = document.getElementById('dataTable');
+                         schemaPlaceholder = document.getElementById('schemaPlaceholder');
+                         dataPlaceholder = document.getElementById('dataPlaceholder');
+                         tableDataHeader = document.getElementById('tableDataHeader');
+                     } else if (selectedTable && !isPolling) {
+                         // Optionally refresh current table view if needed,
+                         // but might be disruptive. Let's skip for now.
+                         // handleTableSelection(tableList.querySelector(`li[data-table-name="${selectedTable}"]`));
+                     }
+                 }
 
-                 // Update placeholders based on current state
-                 if (currentTables.length === 0 && !isPolling) {
-                     tableList.innerHTML = '<li>No tables found.</li>';
+                 // Clear placeholders if tables loaded successfully
+                 if (currentTables.length > 0 && !isPolling) {
+                     schemaPlaceholder.style.display = 'none';
+                     dataPlaceholder.style.display = 'none';
+                 } else if (currentTables.length === 0 && !isPolling) {
+                      tableList.innerHTML = '<li>No tables found.</li>';
                      schemaPlaceholder.textContent = 'No tables found in the database.';
-                     schemaPlaceholder.style.display = 'block';
                      dataPlaceholder.textContent = 'No tables found in the database.';
-                     dataPlaceholder.style.display = 'block';
-                 } else if (currentTables.length > 0 && !selectedTable && !currentCustomSQL && !isPolling) {
-                     schemaPlaceholder.style.display = 'block';
-                     dataPlaceholder.style.display = 'block';
                  }
 
             } catch (error) {
-                if (!isPolling) {
+                if (!isPolling) { // Only show initial load error prominently
                     tableList.innerHTML = '<li>Error loading tables.</li>';
                     schemaPlaceholder.textContent = 'Error loading tables.';
-                    schemaPlaceholder.style.display = 'block';
                     dataPlaceholder.textContent = 'Error loading tables.';
-                    dataPlaceholder.style.display = 'block';
                 } else {
-                    console.error("Polling error (loadTables):", error);
+                    console.error("Polling error:", error); // Log polling errors quietly
                 }
-                // Stop polling on error to avoid spamming
-                stopPolling();
-                showStatus("Could not update table list. Polling stopped.", true);
             }
         }
 
@@ -575,6 +588,7 @@
                 li.textContent = tableName;
                 li.dataset.tableName = tableName;
                 li.onclick = () => handleTableSelection(li);
+                // Re-apply active class if this table was selected
                 if (tableName === selectedTable) {
                     li.classList.add('active');
                 }
@@ -582,48 +596,7 @@
             });
         }
 
-        async function loadTableSchemaAndData(tableName, isPolling = false) {
-             if (!tableName) return;
-
-             // Only show placeholders/loading text on initial load, not polling refresh
-             if (!isPolling) {
-                 dataDisplayContainer.style.display = 'flex';
-                 queryResultContainer.style.display = 'none';
-                 dataPlaceholder.style.display = 'none';
-                 schemaPlaceholder.style.display = 'none';
-                 tableDataHeader.textContent = `for table "${tableName}"`;
-                 schemaTable.innerHTML = '<tbody><tr><td colspan="2">Loading schema...</td></tr></tbody>';
-                 dataTable.innerHTML = '<tbody><tr><td>Loading data...</td></tr></tbody>';
-             }
-
-             try {
-                // Fetch concurrently
-                const [schemaResponse, tableDataResponse] = await Promise.all([
-                    fetchAPI(`/tables/${tableName}/schema`, {}, isPolling), // Pass polling flag
-                    fetchAPI(`/tables/${tableName}?limit=100`, {}, isPolling) // Pass polling flag
-                ]);
-                 // Only render if the table is still the selected one (polling might finish after user clicks away)
-                 if (selectedTable === tableName) {
-                    renderSchema(schemaResponse);
-                    renderTable(tableDataResponse, dataTable);
-                 }
-             } catch (error) {
-                 // Error shown by fetchAPI
-                 // If the table disappeared during polling, loadTables will handle cleanup
-                 if (selectedTable === tableName) { // Check if still selected
-                     if (!isPolling) { // Don't overwrite placeholders if polling fails
-                         schemaTable.innerHTML = '<tbody><tr><td colspan="2">Error loading schema.</td></tr></tbody>';
-                         dataTable.innerHTML = '<tbody><tr><td>Error loading data.</td></tr></tbody>';
-                     } else {
-                         console.error(`Polling error for table ${tableName}:`, error);
-                         // Optionally show a less intrusive error or just log it
-                         // showStatus(`Could not refresh data for ${tableName}`, true);
-                     }
-                 }
-             }
-        }
-
-        function handleTableSelection(listItem) {
+        async function handleTableSelection(listItem) {
             const currentActive = tableList.querySelector('.active');
             if (currentActive) {
                 currentActive.classList.remove('active');
@@ -631,115 +604,75 @@
             listItem.classList.add('active');
 
             selectedTable = listItem.dataset.tableName;
-            currentCustomSQL = ''; // Clear custom query when selecting a table
-            sqlInput.value = ''; // Clear the textarea
+            if (!selectedTable) return;
+
+            queryResultContainer.style.display = 'none';
+            dataDisplayContainer.style.display = 'flex';
+            dataPlaceholder.style.display = 'none'; // Hide placeholder
+
+            tableDataHeader.textContent = `for table "${selectedTable}"`;
+            schemaPlaceholder.style.display = 'none'; // Hide placeholder
+            schemaTable.innerHTML = '<tbody><tr><td colspan="2">Loading schema...</td></tr></tbody>';
+            dataTable.innerHTML = '<tbody><tr><td>Loading data...</td></tr></tbody>';
 
-            loadTableSchemaAndData(selectedTable, false); // Initial load, not polling
+            try {
+                const [schemaResponse, tableDataResponse] = await Promise.all([
+                    fetchAPI(`/tables/${selectedTable}/schema`),
+                    fetchAPI(`/tables/${selectedTable}?limit=100`)
+                ]);
+                renderSchema(schemaResponse);
+                renderTable(tableDataResponse, dataTable);
+            } catch (error) {
+                 schemaTable.innerHTML = '<tbody><tr><td colspan="2">Error loading schema.</td></tr></tbody>';
+                 dataTable.innerHTML = '<tbody><tr><td>Error loading data.</td></tr></tbody>';
+            }
         }
 
-        async function runCustomQuery(isPolling = false) {
+
+         async function runCustomQuery() {
              const sql = sqlInput.value.trim();
              if (!sql) {
-                 if (!isPolling) showStatus("SQL query cannot be empty.", true);
+                 showStatus("SQL query cannot be empty.", true);
                  return;
              }
 
-             // Only update UI text/visibility on explicit run, not polling refresh
-             if (!isPolling) {
-                 // Clear active selection in sidebar
-                 const currentActive = tableList.querySelector('.active');
-                 if (currentActive) {
-                     currentActive.classList.remove('active');
-                 }
-                 selectedTable = null; // Deselect table
-
-                 resetDisplays();
-                 dataDisplayContainer.style.display = 'none';
-                 queryResultContainer.style.display = 'block';
-                 queryResultTable.innerHTML = '<tbody><tr><td>Running query...</td></tr></tbody>';
-                 currentCustomSQL = sql; // Store the ran query
+             // Clear active selection in sidebar if a custom query is run
+             const currentActive = tableList.querySelector('.active');
+             if (currentActive) {
+                 currentActive.classList.remove('active');
              }
+             selectedTable = null; // Deselect table
+
+            dataDisplayContainer.style.display = 'none';
+            dataPlaceholder.style.display = 'none';
+             schemaPlaceholder.style.display = 'block'; // Show placeholders again
+             schemaTable.innerHTML = '';
+             tableDataHeader.textContent = '';
+
+            queryResultContainer.style.display = 'block';
+            queryResultTable.innerHTML = '<tbody><tr><td>Running query...</td></tr></tbody>';
+
 
              try {
                  const resultData = await fetchAPI('/query', {
                      method: 'POST',
-                     headers: { 'Content-Type': 'application/json', },
+                     headers: {
+                         'Content-Type': 'application/json',
+                     },
                      body: JSON.stringify({ sql: sql }),
-                 }, isPolling); // Pass polling flag
-
-                  // Only render if this is still the active custom query
-                  if (currentCustomSQL === sql) {
-                    renderTable(resultData, queryResultTable);
-                    if (!isPolling) showStatus("Query executed successfully.", false);
-                  }
+                 });
+                 renderTable(resultData, queryResultTable);
+                 showStatus("Query executed successfully.", false);
              } catch (error) {
-                  // Error shown by fetchAPI
-                  if (currentCustomSQL === sql) { // Only update if still relevant
-                     if (!isPolling) {
-                         queryResultTable.innerHTML = '<tbody><tr><td>Error executing query. See status message.</td></tr></tbody>';
-                     } else {
-                         console.error(`Polling error for query "${sql}":`, error);
-                     }
-                  }
+                 queryResultTable.innerHTML = '<tbody><tr><td>Error executing query. See status message.</td></tr></tbody>';
              }
          }
 
-         function resetDisplays() {
-             // Reset schema display
-             schemaDisplay.innerHTML = '<h4>Schema</h4><p id="schemaPlaceholder">Select a table or run a query.</p><table id="schemaTable"></table>';
-             // Reset data display
-             dataDisplayContainer.innerHTML = '<h4>Data <span id="tableDataHeader"></span></h4><p id="dataPlaceholder">Select a table or run a query.</p><div id="dataDisplay"><table id="dataTable"></table></div>';
-             // Reset query display
-             queryResultContainer.style.display = 'none';
-             queryResultTable.innerHTML = '';
-
-             // Re-assign potentially overwritten elements after innerHTML reset
-             schemaTable = document.getElementById('schemaTable');
-             dataTable = document.getElementById('dataTable');
-             schemaPlaceholder = document.getElementById('schemaPlaceholder');
-             dataPlaceholder = document.getElementById('dataPlaceholder');
-             tableDataHeader = document.getElementById('tableDataHeader');
-         }
-
-         function resetToInitialState() {
-            selectedTable = null;
-            currentCustomSQL = '';
-            sqlInput.value = '';
-            resetDisplays();
-            // Make sure placeholders are visible if needed
-            if (currentTables.length > 0) {
-                schemaPlaceholder.style.display = 'block';
-                dataPlaceholder.style.display = 'block';
-            }
-         }
-
-
          // --- Polling Function ---
-         async function pollForUpdates() {
-             console.log("Polling for updates...");
-             try {
-                 await loadTables(true); // Refresh table list (quietly)
-
-                 if (selectedTable) {
-                     // If a table is selected, refresh its data
-                     await loadTableSchemaAndData(selectedTable, true);
-                 } else if (currentCustomSQL) {
-                     // If a custom query was last run, re-run it
-                     await runCustomQuery(true);
-                 }
-             } catch (error) {
-                 // Errors are logged within the called functions if isPolling is true
-                 console.error("Error during polling cycle:", error);
-                 // Optionally stop polling on error: stopPolling(); showStatus("Polling stopped due to error.", true);
-             }
-         }
-
          function startPolling() {
-             stopPolling();
+             stopPolling(); // Clear existing interval if any
              console.log(`Starting polling every ${POLLING_INTERVAL_MS / 1000} seconds.`);
-             // Run immediately once, then set interval
-             pollForUpdates();
-             pollingIntervalId = setInterval(pollForUpdates, POLLING_INTERVAL_MS);
+             pollingIntervalId = setInterval(() => loadTables(true), POLLING_INTERVAL_MS);
          }
 
          function stopPolling() {
@@ -751,32 +684,28 @@
          }
 
         // --- Initial Setup ---
-        runSqlButton.onclick = () => runCustomQuery(false); // Explicit run is not polling
+        runSqlButton.onclick = runCustomQuery;
 
+        // Load tables automatically when the page loads and start polling
         document.addEventListener('DOMContentLoaded', () => {
             loadTables().then(() => {
-                if (currentTables.length >= 0) { // Start polling even if empty initially
+                // Start polling only after the initial load succeeds
+                if (currentTables.length >= 0) { // Start even if no tables initially
                     startPolling();
                 }
             });
         });
 
-        // Optional: Pause polling when tab is hidden
-         document.addEventListener("visibilitychange", () => {
-             if (document.visibilityState === 'hidden') {
-                 stopPolling();
-             } else {
-                 // Refresh immediately when tab becomes visible, then restart polling
-                 loadTables().then(() => { // Refresh tables first
-                    if (selectedTable) {
-                        loadTableSchemaAndData(selectedTable); // Refresh data if table selected
-                    } else if (currentCustomSQL) {
-                        runCustomQuery(); // Refresh query if that was active
-                    }
-                    startPolling(); // Restart regular polling
-                 });
-             }
-         });
+        // Optional: Stop polling when the page is hidden (e.g., tab switched)
+        // document.addEventListener("visibilitychange", () => {
+        //     if (document.visibilityState === 'hidden') {
+        //         stopPolling();
+        //     } else {
+        //         // Optionally restart polling immediately or wait for next interval
+        //         loadTables(); // Refresh immediately when tab becomes visible
+        //         startPolling();
+        //     }
+        // });
 
     </script>