UI Improved

index.html

@@ -382,17 +382,16 @@
              <div id="statusMessage"></div>
         </main>
     </div>
-
     <script>
-        // --- Keep the existing element variables ---
+        // --- Element Variables ---
         const tableList = document.getElementById('tableList');
         const schemaDisplay = document.getElementById('schemaDisplay');
         const schemaTable = document.getElementById('schemaTable');
-        const schemaPlaceholder = document.getElementById('schemaPlaceholder'); // Added
+        const schemaPlaceholder = document.getElementById('schemaPlaceholder');
         const dataDisplayContainer = document.getElementById('dataDisplayContainer');
         const dataDisplay = document.getElementById('dataDisplay');
         const dataTable = document.getElementById('dataTable');
-        const dataPlaceholder = document.getElementById('dataPlaceholder'); // Added
+        const dataPlaceholder = document.getElementById('dataPlaceholder');
         const tableDataHeader = document.getElementById('tableDataHeader');
         const sqlInput = document.getElementById('sqlInput');
         const runSqlButton = document.getElementById('runSqlButton');
@@ -402,16 +401,20 @@
         const statusMessage = document.getElementById('statusMessage');
         const loadingIndicator = document.getElementById('loadingIndicator');
 
-        // --- API URL is relative ---
+        // --- State Variables ---
         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 = 1000; // Refresh table list every 10 seconds
+        const POLLING_INTERVAL_MS = 5000; // Refresh every 5 seconds
 
-        // --- Utility Functions (keep existing) ---
-        function showLoader(show) {
-            loadingIndicator.style.display = show ? 'inline-block' : 'none';
+        // --- Utility Functions ---
+        function showLoader(show, isPolling = false) {
+            // Only show loader for non-polling actions
+            if (!isPolling) {
+                loadingIndicator.style.display = show ? 'inline-block' : 'none';
+            }
         }
 
         function showStatus(message, isError = false) {
@@ -426,8 +429,8 @@
             statusMessage.style.display = 'none';
         }
 
-        async function fetchAPI(endpoint, options = {}) {
-            showLoader(true);
+        async function fetchAPI(endpoint, options = {}, isPolling = false) { // Pass isPolling flag
+            showLoader(true, isPolling); // Pass isPolling flag
             clearStatus();
             const url = `${API_BASE_URL}${endpoint}`;
             try {
@@ -440,25 +443,28 @@
                     } 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);
-                showStatus(`Error: ${error.message}`, true);
+                // 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
+                }
                 throw error;
             } finally {
-                showLoader(false);
+                showLoader(false, isPolling); // Pass isPolling flag
             }
         }
 
         function renderTable(data, tableElement) {
             tableElement.innerHTML = '';
-             if (!data || !Array.isArray(data)) { // Check if data is an array
+             if (!data || !Array.isArray(data)) {
                  tableElement.innerHTML = '<tbody><tr><td>Invalid data format received.</td></tr></tbody>';
                  console.error("Invalid data format for renderTable:", data);
                  return;
@@ -486,17 +492,14 @@
             });
         }
 
-        // --- renderSchema FIX ---
         function renderSchema(schemaData) {
-             // Target the table directly
-             schemaTable.innerHTML = ''; // Clear previous table content
-             schemaPlaceholder.style.display = 'none'; // Hide placeholder
-
+             schemaTable.innerHTML = '';
+             schemaPlaceholder.style.display = 'none';
             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 => {
@@ -504,7 +507,6 @@
                 th.textContent = headerText;
                 headerRow.appendChild(th);
             });
-
             const tbody = schemaTable.createTBody();
             schemaData.columns.forEach(column => {
                 const row = tbody.insertRow();
@@ -513,67 +515,52 @@
             });
          }
 
-
-        // --- Event Handlers (Modified) ---
+        // --- Core Logic Functions ---
 
         async function loadTables(isPolling = false) {
             if (!isPolling) {
                 tableList.innerHTML = '<li>Loading tables...</li>';
-                schemaTable.innerHTML = '';
-                dataTable.innerHTML = '';
-                tableDataHeader.textContent = '';
-                queryResultContainer.style.display = 'none';
-                schemaPlaceholder.style.display = 'block'; // Show placeholders initially
-                dataPlaceholder.style.display = 'block';
+                resetDisplays();
             }
             try {
-                const newTables = await fetchAPI('/tables');
-                // Check if the list actually changed before re-rendering
-                if (!isPolling || JSON.stringify(newTables) !== JSON.stringify(currentTables)) {
+                const newTables = await fetchAPI('/tables', {}, isPolling); // Pass polling flag
+                if (JSON.stringify(newTables) !== JSON.stringify(currentTables)) {
                     console.log("Table list changed, updating UI.");
                     currentTables = newTables;
                     displayTables(currentTables);
-                    if (!isPolling) {
-                         showStatus("Tables loaded.", false);
-                    }
-                     // If the currently selected table disappeared, clear the displays
+
+                    // 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}"]`));
-                     }
-                 }
+                        console.log(`Selected table "${selectedTable}" removed.`);
+                        resetToInitialState();
+                    }
+                }
 
-                 // 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>';
+                 // Update placeholders based on current state
+                 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) { // Only show initial load error prominently
+                if (!isPolling) {
                     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:", error); // Log polling errors quietly
+                    console.error("Polling error (loadTables):", error);
                 }
+                // Stop polling on error to avoid spamming
+                stopPolling();
+                showStatus("Could not update table list. Polling stopped.", true);
             }
         }
 
@@ -588,7 +575,6 @@
                 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');
                 }
@@ -596,7 +582,48 @@
             });
         }
 
-        async function handleTableSelection(listItem) {
+        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) {
             const currentActive = tableList.querySelector('.active');
             if (currentActive) {
                 currentActive.classList.remove('active');
@@ -604,75 +631,115 @@
             listItem.classList.add('active');
 
             selectedTable = listItem.dataset.tableName;
-            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>';
+            currentCustomSQL = ''; // Clear custom query when selecting a table
+            sqlInput.value = ''; // Clear the textarea
 
-            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>';
-            }
+            loadTableSchemaAndData(selectedTable, false); // Initial load, not polling
         }
 
-
-         async function runCustomQuery() {
+        async function runCustomQuery(isPolling = false) {
              const sql = sqlInput.value.trim();
              if (!sql) {
-                 showStatus("SQL query cannot be empty.", true);
+                 if (!isPolling) showStatus("SQL query cannot be empty.", true);
                  return;
              }
 
-             // 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>';
+             // 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
+             }
 
              try {
                  const resultData = await fetchAPI('/query', {
                      method: 'POST',
-                     headers: {
-                         'Content-Type': 'application/json',
-                     },
+                     headers: { 'Content-Type': 'application/json', },
                      body: JSON.stringify({ sql: sql }),
-                 });
-                 renderTable(resultData, queryResultTable);
-                 showStatus("Query executed successfully.", false);
+                 }, 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);
+                  }
              } catch (error) {
-                 queryResultTable.innerHTML = '<tbody><tr><td>Error executing query. See status message.</td></tr></tbody>';
+                  // 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);
+                     }
+                  }
              }
          }
 
+         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(); // Clear existing interval if any
+             stopPolling();
              console.log(`Starting polling every ${POLLING_INTERVAL_MS / 1000} seconds.`);
-             pollingIntervalId = setInterval(() => loadTables(true), POLLING_INTERVAL_MS);
+             // Run immediately once, then set interval
+             pollForUpdates();
+             pollingIntervalId = setInterval(pollForUpdates, POLLING_INTERVAL_MS);
          }
 
          function stopPolling() {
@@ -684,28 +751,32 @@
          }
 
         // --- Initial Setup ---
-        runSqlButton.onclick = runCustomQuery;
+        runSqlButton.onclick = () => runCustomQuery(false); // Explicit run is not polling
 
-        // Load tables automatically when the page loads and start polling
         document.addEventListener('DOMContentLoaded', () => {
             loadTables().then(() => {
-                // Start polling only after the initial load succeeds
-                if (currentTables.length >= 0) { // Start even if no tables initially
+                if (currentTables.length >= 0) { // Start polling even if empty initially
                     startPolling();
                 }
             });
         });
 
-        // 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();
-        //     }
-        // });
+        // 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
+                 });
+             }
+         });
 
     </script>