Hugging Face's logo

Spaces:
amaye15
/
DuckDB-UI
Running

App Files Community
DuckDB-UI / index.html
amaye15's picture
amaye15
UI - API Docs - Added
d37fe3a
raw
history blame contribute delete
24.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>DuckDB Explorer - API Documentation</title>
 <style>
 /* --- THEME VARIABLES --- */
 :root {
 --bg-color: #f4f7f6;
 --text-color: #333;
 --header-bg: #4CAF50;
 --header-text: white;
 --sidebar-bg: #e9ecef;
 --sidebar-text: #495057;
 --sidebar-hover-bg: #d4dadf;
 --sidebar-active-bg: #007bff;
 --sidebar-active-text: white;
 --content-bg: #fff;
 --border-color: #dee2e6;
 --border-color-light: #e9ecef;
 --table-header-bg: #f8f9fa;
 --table-row-even-bg: #fdfdfe;
 --button-primary-bg: #28a745;
 --button-primary-hover-bg: #218838;
 --button-primary-text: white;
 --status-success-bg: #d1e7dd;
 --status-success-text: #0f5132;
 --status-success-border: #badbcc;
 --status-error-bg: #f8d7da;
 --status-error-text: #842029;
 --status-error-border: #f5c2c7;
 /* --loader-border: #f3f3f3; */ /* No longer needed */
 /* --loader-spinner: #007bff; */ /* No longer needed */
 --input-border: #ced4da;
 --input-bg: #fff;
 --link-color: #007bff;
 }
 @media (prefers-color-scheme: dark) {
 :root {
 --bg-color: #1a1a1a;
 --text-color: #e8e8e8;
 --header-bg: #2a622d;
 --header-text: #e8e8e8;
 --sidebar-bg: #2c2c2c;
 --sidebar-text: #adb5bd;
 --sidebar-hover-bg: #444;
 --sidebar-active-bg: #0056b3;
 --sidebar-active-text: white;
 --content-bg: #212121;
 --border-color: #444;
 --border-color-light: #333;
 --table-header-bg: #2c2c2c;
 --table-row-even-bg: #252525;
 --button-primary-bg: #218838;
 --button-primary-hover-bg: #1e7e34;
 --button-primary-text: white;
 --status-success-bg: #143620;
 --status-success-text: #a3cfbb;
 --status-success-border: #2a622d;
 --status-error-bg: #58151c;
 --status-error-text: #f5c6cb;
 --status-error-border: #842029;
 /* --loader-border: #444; */ /* No longer needed */
 /* --loader-spinner: #4dabf7; */ /* No longer needed */
 --input-border: #555;
 --input-bg: #333;
 --link-color: #4dabf7;
 }
 input[type="text"], textarea {
 color: var(--text-color);
 background-color: var(--input-bg);
 }
 th, td {
 color: var(--text-color);
 }
 ::placeholder { color: #888; opacity: 1; }
 :-ms-input-placeholder { color: #888; }
 ::-ms-input-placeholder { color: #888; }
 }
 /* --- General Styles --- */
 body {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 margin: 0; padding: 0; display: flex; flex-direction: column; height: 100vh;
 background-color: var(--bg-color); color: var(--text-color);
 transition: background-color 0.3s, color 0.3s;
 }
 a {
 color: var(--link-color);
 text-decoration: none; /* Remove default underline */
 }
 a:hover {
 text-decoration: underline; /* Add underline on hover */
 }
 /* --- Header --- */
 header {
 background-color: var(--header-bg);
 color: var(--header-text);
 padding: 15px 20px;
 display: flex;
 /* Use space-between to push items to ends */
 justify-content: space-between;
 align-items: center;
 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 font-size: 1.2em;
 font-weight: bold;
 transition: background-color 0.3s, color 0.3s;
 }
 /* Style for the link within the header */
 header a {
 color: var(--header-text); /* Inherit header text color */
 font-size: 0.8em; /* Make API link slightly smaller */
 font-weight: normal; /* Normal weight for link */
 margin-left: 20px; /* Add some space */
 }
 header a:hover {
 text-decoration: underline;
 }
 /* --- Container, Sidebar, Main Content (Keep as before) --- */
 .container { display: flex; flex: 1; overflow: hidden; }
 #sidebar { width: 220px; background-color: var(--sidebar-bg); padding: 15px; overflow-y: auto; border-right: 1px solid var(--border-color); transition: background-color 0.3s; }
 #sidebar h3 { margin-top: 0; margin-bottom: 15px; color: var(--sidebar-text); border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
 #tableList { list-style: none; padding: 0; margin: 0; }
 #tableList li { padding: 8px 10px; cursor: pointer; border-radius: 4px; margin-bottom: 5px; transition: background-color 0.2s, color 0.2s; font-size: 0.95em; color: var(--sidebar-text); }
 #tableList li:hover { background-color: var(--sidebar-hover-bg); }
 #tableList li.active { background-color: var(--sidebar-active-bg); color: var(--sidebar-active-text); font-weight: bold; }
 #mainContent { flex: 1; display: flex; flex-direction: column; padding: 20px; overflow: hidden; }
 .content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; gap: 15px; }
 #schemaDisplay, #dataDisplayContainer, #queryResultContainer { background-color: var(--content-bg); border: 1px solid var(--border-color); border-radius: 5px; padding: 15px; margin-bottom: 0; overflow: auto; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: background-color 0.3s, border-color 0.3s; }
 #schemaDisplay h4, #dataDisplayContainer h4, #queryResultContainer h4 { margin-top: 0; color: var(--sidebar-text); border-bottom: 1px solid var(--border-color-light); padding-bottom: 10px; margin-bottom: 15px; }
 #dataDisplayContainer { flex: 1; display: flex; flex-direction: column; }
 #dataDisplay { flex: 1; overflow: auto; min-height: 100px; }
 #schemaDisplay p, #dataDisplayContainer p { color: #888; }
 /* --- Query Area (Keep as before) --- */
 #queryArea { padding-top: 20px; border-top: 1px solid var(--border-color); background-color: var(--content-bg); padding: 15px; border-radius: 5px; box-shadow: 0 -1px 3px rgba(0,0,0,0.05); margin-top: 15px; transition: background-color 0.3s, border-color 0.3s; }
 #queryArea h4 { margin-top: 0; margin-bottom: 10px; color: var(--sidebar-text); }
 #queryArea textarea { width: 100%; min-height: 80px; padding: 10px; border: 1px solid var(--input-border); border-radius: 4px; box-sizing: border-box; font-family: monospace; margin-bottom: 10px; resize: vertical; background-color: var(--input-bg); color: var(--text-color); transition: background-color 0.3s, border-color 0.3s, color 0.3s; }
 #queryArea button { padding: 10px 20px; background-color: var(--button-primary-bg); color: var(--button-primary-text); border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; font-weight: bold; }
 #queryArea button:hover { background-color: var(--button-primary-hover-bg); }
 /* --- Tables (Keep as before) --- */
 table { width: 100%; border-collapse: collapse; margin-top: 0; font-size: 0.9em; }
 th, td { border: 1px solid var(--border-color-light); padding: 10px 12px; text-align: left; white-space: nowrap; max-width: 250px; overflow: hidden; text-overflow: ellipsis; color: var(--text-color); transition: border-color 0.3s; }
 th { background-color: var(--table-header-bg); font-weight: 600; position: sticky; top: 0; z-index: 1; transition: background-color 0.3s; }
 tr:nth-child(even) { background-color: var(--table-row-even-bg); transition: background-color 0.3s; }
 tr:nth-child(odd) { background-color: var(--content-bg); transition: background-color 0.3s; }
 /* --- Status Message (Keep as before) --- */
 #statusMessage { padding: 10px 15px; margin-top: 15px; border-radius: 4px; display: none; font-size: 0.9em; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
 #statusMessage.success { background-color: var(--status-success-bg); color: var(--status-success-text); border: 1px solid var(--status-success-border); }
 #statusMessage.error { background-color: var(--status-error-bg); color: var(--status-error-text); border: 1px solid var(--status-error-border); }
 /* Removed .loader and @keyframes spin styling */
 </style>
</head>
<body>
<header>
 <!-- Left side: Title -->
 <span>🦆 DuckDB Explorer</span>
<!-- Right side: API Docs Link -->
 <a href="/docs" target="_blank">API Documentation</a>
 <!-- Removed loader div -->
 </header>
<div class="container">
 <aside id="sidebar">
 <h3>Tables</h3>
 <ul id="tableList">
 <li>Loading...</li>
 </ul>
 </aside>
<main id="mainContent">
 <div class="content-area">
 <div id="schemaDisplay">
 <h4>Schema</h4>
 <p id="schemaPlaceholder">Select a table from the list.</p>
 <table id="schemaTable"></table>
 </div>
 <div id="dataDisplayContainer">
 <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>
 </div>
 <div id="queryResultContainer" style="display: none;">
 <h4>Query Result</h4>
 <div id="queryResultDisplay">
 <table id="queryResultTable"></table>
 </div>
 </div>
 </div>
<div id="queryArea">
 <h4>Custom SQL Query (SELECT/SHOW/PRAGMA only)</h4>
 <textarea id="sqlInput" placeholder="Enter your SELECT query here... e.g., SELECT * FROM table_name LIMIT 10"></textarea>
 <button id="runSqlButton">Run SQL</button>
 </div>
<div id="statusMessage"></div>
 </main>
 </div>
<script>
 // --- Keep the existing element variables EXCEPT loadingIndicator ---
 const tableList = document.getElementById('tableList');
 const schemaDisplay = document.getElementById('schemaDisplay');
 const schemaTable = document.getElementById('schemaTable');
 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');
 const tableDataHeader = document.getElementById('tableDataHeader');
 const sqlInput = document.getElementById('sqlInput');
 const runSqlButton = document.getElementById('runSqlButton');
 const queryResultContainer = document.getElementById('queryResultContainer');
 const queryResultDisplay = document.getElementById('queryResultDisplay');
 const queryResultTable = document.getElementById('queryResultTable');
 const statusMessage = document.getElementById('statusMessage');
 // const loadingIndicator = document.getElementById('loadingIndicator'); // Removed
 // --- API URL, currentTables, selectedTable, polling (Keep as before) ---
 const API_BASE_URL = '';
 let currentTables = [];
 let selectedTable = null;
 let pollingIntervalId = null;
 const POLLING_INTERVAL_MS = 10000;
 // --- Utility Functions ---
 // --- REMOVE showLoader function ---
 // function showLoader(show) {
 // loadingIndicator.style.display = show ? 'inline-block' : 'none';
 // }
 // --- Keep showStatus, clearStatus ---
 function showStatus(message, isError = false) {
 statusMessage.textContent = message;
 statusMessage.className = isError ? 'error' : 'success';
 statusMessage.style.display = 'block';
 setTimeout(() => { statusMessage.style.display = 'none'; }, 5000);
 }
 function clearStatus() {
 statusMessage.textContent = '';
 statusMessage.style.display = 'none';
 }
 async function fetchAPI(endpoint, options = {}) {
 // REMOVE showLoader(true);
 clearStatus();
 const url = `${API_BASE_URL}${endpoint}`;
 try {
 const response = await fetch(url, options);
 if (!response.ok) {
 let errorDetail = `HTTP error! status: ${response.status}`;
 try {
 const errorJson = await response.json();
 errorDetail += ` - ${errorJson.detail || JSON.stringify(errorJson)}`;
 } catch (e) { /* Ignore */ }
 throw new Error(errorDetail);
 }
 const contentType = response.headers.get("content-type");
 if (contentType && contentType.includes("application/json")) {
 return await response.json();
 }
 return await response.text();
 } catch (error) {
 console.error('API Fetch Error:', error);
 showStatus(`Error: ${error.message}`, true);
 throw error;
 } finally {
 // REMOVE showLoader(false);
 }
 }
 // --- Keep renderTable, renderSchema ---
 function renderTable(data, tableElement) {
 tableElement.innerHTML = '';
 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;
 }
 if (data.length === 0) {
 tableElement.innerHTML = '<tbody><tr><td>No data available.</td></tr></tbody>';
 return;
 }
 const headers = Object.keys(data[0]);
 const thead = tableElement.createTHead();
 const headerRow = thead.insertRow();
 headers.forEach(headerText => {
 const th = document.createElement('th');
 th.textContent = headerText;
 headerRow.appendChild(th);
 });
 const tbody = tableElement.createTBody();
 data.forEach(rowData => {
 const row = tbody.insertRow();
 headers.forEach(header => {
 const cell = row.insertCell();
 const value = rowData[header];
 cell.textContent = (value === null || value === undefined) ? 'NULL' : String(value);
 });
 });
 }
 function renderSchema(schemaData) {
 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;
 }
 const thead = schemaTable.createTHead();
 const headerRow = thead.insertRow();
 ['Name', 'Type'].forEach(headerText => {
 const th = document.createElement('th');
 th.textContent = headerText;
 headerRow.appendChild(th);
 });
 const tbody = schemaTable.createTBody();
 schemaData.columns.forEach(column => {
 const row = tbody.insertRow();
 row.insertCell().textContent = column.name;
 row.insertCell().textContent = column.type;
 });
 }
 // --- Event Handlers (Keep and ensure showLoader calls are removed) ---
 async function loadTables(isPolling = false) {
 // ... (keep existing logic, just remove showLoader calls) ...
 if (!isPolling) {
 tableList.innerHTML = '<li>Loading tables...</li>';
 schemaTable.innerHTML = '';
 dataTable.innerHTML = '';
 tableDataHeader.textContent = '';
 queryResultContainer.style.display = 'none';
 schemaPlaceholder.style.display = 'block';
 dataPlaceholder.style.display = 'block';
 }
 try {
 const newTables = await fetchAPI('/tables');
 if (!isPolling || JSON.stringify(newTables) !== JSON.stringify(currentTables)) {
 console.log("Table list changed, updating UI.");
 currentTables = newTables;
 displayTables(currentTables);
 if (!isPolling) {
 showStatus("Tables loaded.", false);
 }
 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>';
 schemaTable = document.getElementById('schemaTable');
 dataTable = document.getElementById('dataTable');
 schemaPlaceholder = document.getElementById('schemaPlaceholder');
 dataPlaceholder = document.getElementById('dataPlaceholder');
 tableDataHeader = document.getElementById('tableDataHeader');
 }
 }
 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.';
 dataPlaceholder.textContent = 'No tables found in the database.';
 }
 } catch (error) {
 if (!isPolling) {
 tableList.innerHTML = '<li>Error loading tables.</li>';
 schemaPlaceholder.textContent = 'Error loading tables.';
 dataPlaceholder.textContent = 'Error loading tables.';
 } else {
 console.error("Polling error:", error);
 }
 }
 }
 function displayTables(tables) {
 // ... (keep existing logic) ...
 tableList.innerHTML = '';
 if (tables.length === 0) {
 tableList.innerHTML = '<li>No tables found.</li>';
 return;
 }
 tables.sort().forEach(tableName => {
 const li = document.createElement('li');
 li.textContent = tableName;
 li.dataset.tableName = tableName;
 li.onclick = () => handleTableSelection(li);
 if (tableName === selectedTable) {
 li.classList.add('active');
 }
 tableList.appendChild(li);
 });
 }
 async function handleTableSelection(listItem) {
 // ... (keep existing logic, just remove showLoader calls) ...
 const currentActive = tableList.querySelector('.active');
 if (currentActive) {
 currentActive.classList.remove('active');
 }
 listItem.classList.add('active');
 selectedTable = listItem.dataset.tableName;
 if (!selectedTable) return;
 queryResultContainer.style.display = 'none';
 dataDisplayContainer.style.display = 'flex';
 dataPlaceholder.style.display = 'none';
 tableDataHeader.textContent = `for table "${selectedTable}"`;
 schemaPlaceholder.style.display = 'none';
 schemaTable.innerHTML = '<tbody><tr><td colspan="2">Loading schema...</td></tr></tbody>';
 dataTable.innerHTML = '<tbody><tr><td>Loading data...</td></tr></tbody>';
 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() {
 // ... (keep existing logic, just remove showLoader calls) ...
 const sql = sqlInput.value.trim();
 if (!sql) {
 showStatus("SQL query cannot be empty.", true);
 return;
 }
 const currentActive = tableList.querySelector('.active');
 if (currentActive) {
 currentActive.classList.remove('active');
 }
 selectedTable = null;
 dataDisplayContainer.style.display = 'none';
 dataPlaceholder.style.display = 'none';
 schemaPlaceholder.style.display = 'block';
 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', },
 body: JSON.stringify({ sql: sql }),
 });
 renderTable(resultData, queryResultTable);
 showStatus("Query executed successfully.", false);
 } catch (error) {
 queryResultTable.innerHTML = '<tbody><tr><td>Error executing query. See status message.</td></tr></tbody>';
 }
 }
 // --- Keep Polling Functions ---
 function startPolling() {
 stopPolling();
 console.log(`Starting polling every ${POLLING_INTERVAL_MS / 1000} seconds.`);
 pollingIntervalId = setInterval(() => loadTables(true), POLLING_INTERVAL_MS);
 }
 function stopPolling() {
 if (pollingIntervalId) {
 console.log("Stopping polling.");
 clearInterval(pollingIntervalId);
 pollingIntervalId = null;
 }
 }
 // --- Initial Setup ---
 runSqlButton.onclick = runCustomQuery;
 document.addEventListener('DOMContentLoaded', () => {
 loadTables().then(() => {
 if (currentTables.length >= 0) { // Start even if no tables initially
 startPolling();
 }
 });
 });
 </script>
</body>
</html>