sqlite-hub 0.17.2 → 1.1.0

package/examples/api/queries.js

@@ -0,0 +1,31 @@
+const SQLITE_HUB_URL = 'http://127.0.0.1:4180';
+// Create a new token for your database in Settings > API Tokens.
+const apiToken = 'shub_Lv9A2xocv01PqT6a0jEmuT-PxPyqfzI_UBaY_VEzjqE';
+const DATABASE_ID = 'conn_ae9b5e54ae8eca1d';
+const path = `${SQLITE_HUB_URL}/api/v1/databases/${DATABASE_ID}`;
+
+async function databaseInfo(path, { method = 'GET' } = {}) {
+    console.log(path);
+    const response = await fetch(path, {
+        method,
+        headers: {
+            Accept: 'application/json',
+            Authorization: `Bearer ${apiToken}`,
+        },
+    });
+    return await response.json();
+}
+
+const queries = await databaseInfo(`${path}/queries`);
+
+console.log(queries.data.items.map(query => query.displayTitle));
+
+const queryName = encodeURIComponent(queries.data.items[0].displayTitle);
+const query = await databaseInfo(`${path}/queries/${queryName}`);
+
+console.log(query.data);
+
+// Executing a saved query changes server state and therefore requires POST.
+const exec = await databaseInfo(`${path}/queries/${queryName}/execute`, { method: 'POST' });
+
+console.log(exec.data);

package/examples/api/rows.js

@@ -0,0 +1,27 @@
+const SQLITE_HUB_URL = 'http://127.0.0.1:4180';
+// Create a new token for your database in Settings > API Tokens.
+const apiToken = 'shub_Lv9A2xocv01PqT6a0jEmuT-PxPyqfzI_UBaY_VEzjqE';
+const DATABASE_ID = 'conn_ae9b5e54ae8eca1d';
+const path = `${SQLITE_HUB_URL}/api/v1/databases/${DATABASE_ID}`;
+
+async function databaseInfo(path) {
+    console.log(path);
+    const response = await fetch(path, {
+        headers: {
+            Accept: 'application/json',
+            Authorization: `Bearer ${apiToken}`,
+        },
+    });
+
+    return await response.json();
+}
+
+const info = await databaseInfo(path);
+const tables = await databaseInfo(`${path}/tables`);
+
+console.log(info.data);
+console.log(tables.data.items);
+
+const row = await databaseInfo(`${path}/tables/${tables.data.items[0].name}`);
+
+console.log(row.data);

package/frontend/js/api.js

@@ -86,6 +86,12 @@ export function createConnection(payload) {
   });
 }
 
+export function chooseOpenDatabasePath() {
+  return request("/api/connections/choose-open-path", {
+    method: "POST",
+  });
+}
+
 export function chooseCreateDatabasePath() {
   return request("/api/connections/choose-create-path", {
     method: "POST",
@@ -425,10 +431,29 @@ export function patchSettings(settings) {
   });
 }
 
+export function checkAppVersion() {
+  return request("/api/settings/version-check");
+}
+
+export function createApiToken(name) {
+  return request("/api/settings/api-tokens", {
+    method: "POST",
+    body: { name },
+  });
+}
+
+export function deleteApiToken(tokenId) {
+  return request(`/api/settings/api-tokens/${encodeURIComponent(tokenId)}`, {
+    method: "DELETE",
+  });
+}
+
 const TEXT_EXPORT_EXTENSIONS = {
   csv: "csv",
   tsv: "tsv",
   md: "md",
+  json: "json",
+  parquet: "parquet",
 };
 
 function normalizeTextExportFormat(format) {

package/frontend/js/app.js

@@ -24,6 +24,8 @@ import { renderTopNav } from './components/topNav.js';
 import { createRouter } from './router.js';
 import {
     createActiveConnectionBackup,
+    createSettingsApiToken,
+    chooseOpenDatabasePath,
     chooseCreateDatabasePath,
     createDocument,
     createDocumentFromMarkdownExport,
@@ -33,6 +35,7 @@ import {
     clearEditorResults,
     clearQueryHistorySelection,
     closeModal,
+    checkSettingsAppVersion,
     dismissMediaTaggingIssue,
     dismissToast,
     executeCurrentQuery,
@@ -49,6 +52,7 @@ import {
     openDeleteDataRowModal,
     openDeleteEditorRowModal,
     openDeleteQueryHistoryModal,
+    openDeleteSettingsApiTokenModal,
     openDeleteQueryChartModal,
     openDataExportModal,
     openDeleteDocumentModal,
@@ -92,7 +96,9 @@ import {
     toggleDataTablesPanel,
     setCurrentQuery,
     setChartsHeightPreset,
+    setChartsDetailPanelVisibility,
     setChartsHistoryTab,
+    setChartsHistorySearchInput,
     setChartsHistoryPanelVisibility,
     setEditorPanelVisibility,
     setEditorTab,
@@ -103,6 +109,7 @@ import {
     submitCreateMediaTaggingTagTable,
     submitCreateMediaTaggingMappingTable,
     submitDeleteQueryHistoryConfirmation,
+    submitDeleteSettingsApiTokenConfirmation,
     submitRowUpdatePreviewConfirmation,
     setQueryHistoryPanelVisibility,
     sortDataTableByColumn,
@@ -113,6 +120,7 @@ import {
     setCopyColumnModalEditedText,
     setCopyColumnModalSubmitting,
     setRoute,
+    setSettingsSection,
     saveQueryHistoryNotes,
     saveQueryHistoryTitle,
     saveCurrentTableDesignerDraft,
@@ -217,6 +225,7 @@ let lastRenderedPanelMarkup = '';
 let lastRenderedModalMarkup = '';
 let lastRenderedToastMarkup = '';
 let lastRenderedChartsHistorySignature = '';
+let lastRenderedChartsCardSignature = '';
 let lastRenderedPanelOpen = false;
 let lastRenderedLockedRoute = false;
 let pendingNewTableDesignerAutofocus = false;
@@ -709,7 +718,11 @@ function buildChartsHistorySignature(state) {
     }
 
     return JSON.stringify({
+        detailPanelVisible: Boolean(state.charts.detailPanelVisible),
+        detailPanelHistoryId: state.charts.detailPanelVisible ? state.charts.selectedHistoryId : null,
         tab: state.charts.historyTab ?? 'recent',
+        searchInput: state.charts.historySearchInput ?? '',
+        search: state.charts.historySearch ?? '',
         queries: queries.map(item => [
             item.id,
             item.displayTitle,
@@ -720,6 +733,46 @@ function buildChartsHistorySignature(state) {
     });
 }
 
+const chartSignatureObjectIds = new WeakMap();
+let nextChartSignatureObjectId = 1;
+
+function getChartSignatureObjectId(value) {
+    if (!value || typeof value !== 'object') {
+        return null;
+    }
+
+    if (!chartSignatureObjectIds.has(value)) {
+        chartSignatureObjectIds.set(value, nextChartSignatureObjectId);
+        nextChartSignatureObjectId += 1;
+    }
+
+    return chartSignatureObjectIds.get(value);
+}
+
+function buildChartsCardSignature(state) {
+    if (state.route.name !== 'charts' || !state.charts.selectedHistoryId || !state.charts.detail?.item) {
+        return '';
+    }
+
+    const charts = state.charts.detail?.charts ?? [];
+
+    return JSON.stringify({
+        selectedHistoryId: state.charts.selectedHistoryId,
+        chartHeightPreset: state.charts.chartHeightPreset ?? 'medium',
+        resultObjectId: getChartSignatureObjectId(state.charts.result),
+        resultLoading: Boolean(state.charts.resultLoading),
+        resultError: state.charts.resultError
+            ? [state.charts.resultError.code ?? '', state.charts.resultError.message ?? '']
+            : null,
+        charts: charts.map(chart => [
+            chart.id,
+            chart.name,
+            chart.chartType,
+            JSON.stringify(chart.config ?? {}),
+        ]),
+    });
+}
+
 function syncChartsHistorySelectionUi(state) {
     const selectedHistoryId = String(state.charts.selectedHistoryId ?? '');
     const historyButtons = shellRefs.view.querySelectorAll(
@@ -733,56 +786,123 @@ function syncChartsHistorySelectionUi(state) {
 
         const itemNode = button.closest('[data-charts-history-item]');
         const isSelected = button.dataset.historyId === selectedHistoryId;
-        const titleNode = button.querySelector('[data-charts-history-title]');
         const selectionNode = itemNode instanceof HTMLElement ? itemNode : button;
 
-        selectionNode.classList.toggle('border-primary-container/30', isSelected);
-        selectionNode.classList.toggle('bg-surface-container-high', isSelected);
-        selectionNode.classList.toggle('border-outline-variant/10', !isSelected);
-        selectionNode.classList.toggle('bg-surface-container-lowest', !isSelected);
-        selectionNode.classList.toggle('hover:bg-surface-container-high', !isSelected);
-
-        if (titleNode instanceof HTMLElement) {
-            titleNode.classList.toggle('text-primary-container', isSelected);
-            titleNode.classList.toggle('text-on-surface', !isSelected);
-        }
+        selectionNode.classList.toggle('is-active', isSelected);
+        button.classList.toggle('is-active', isSelected);
     }
 
     return true;
 }
 
-function syncChartsSavedToggleUi(actionNode, nextValue) {
-    const itemNode = actionNode.closest('[data-charts-history-item]');
-
-    actionNode.classList.toggle('is-active', nextValue);
-    actionNode.dataset.nextValue = nextValue ? 'false' : 'true';
-    actionNode.title = nextValue ? 'Remove from saved' : 'Save query';
+function syncChartsSavedToggleButtonUi(button, nextValue) {
+    button.classList.toggle('is-active', nextValue);
+    button.dataset.nextValue = nextValue ? 'false' : 'true';
+    button.title = nextValue ? 'Remove from saved' : 'Save query';
 
-    const iconNode = actionNode.querySelector('.material-symbols-outlined');
+    const iconNode = button.querySelector('.material-symbols-outlined');
     if (iconNode instanceof HTMLElement) {
         iconNode.textContent = nextValue ? 'bookmark' : 'bookmark_add';
     }
 
-    if (itemNode instanceof HTMLElement) {
-        itemNode.querySelector('[data-charts-saved-badge]')?.toggleAttribute('hidden', !nextValue);
+    const labelNode = button.querySelector('[data-charts-saved-label]');
+    if (labelNode instanceof HTMLElement) {
+        labelNode.textContent = nextValue ? 'Unsave' : 'Save';
+    }
+}
 
-        if (!nextValue && getState().charts.historyTab === 'saved') {
+function syncChartsSavedToggleUi(actionNode, nextValue) {
+    const historyId = actionNode.dataset.historyId;
+    const relatedButtons = [
+        actionNode,
+        ...shellRefs.view.querySelectorAll('[data-action="toggle-charts-query-history-saved"][data-history-id]'),
+        ...shellRefs.panel.querySelectorAll('[data-action="toggle-charts-query-history-saved"][data-history-id]'),
+    ].filter((button, index, buttons) => {
+        return (
+            button instanceof HTMLElement &&
+            button.dataset.historyId === historyId &&
+            buttons.indexOf(button) === index
+        );
+    });
+
+    for (const button of relatedButtons) {
+        syncChartsSavedToggleButtonUi(button, nextValue);
+
+        const itemNode = button.closest('[data-charts-history-item]');
+        const historyTab = getState().charts.historyTab;
+        if (
+            itemNode instanceof HTMLElement &&
+            ((historyTab === 'saved' && !nextValue) || (historyTab === 'unsaved' && nextValue))
+        ) {
             itemNode.remove();
         }
     }
 
+    for (const badgeNode of [
+        ...shellRefs.view.querySelectorAll('[data-charts-saved-badge][data-history-id]'),
+        ...shellRefs.panel.querySelectorAll('[data-charts-saved-badge][data-history-id]'),
+    ]) {
+        if (badgeNode instanceof HTMLElement && badgeNode.dataset.historyId === historyId) {
+            badgeNode.toggleAttribute('hidden', !nextValue);
+        }
+    }
+
     const countNode = shellRefs.view.querySelector('[data-charts-history-count]');
     if (countNode instanceof HTMLElement) {
-        const state = getState();
-        const count =
-            state.charts.historyTab === 'saved'
-                ? (state.charts.queries ?? []).filter(item => item.isSaved).length
-                : (state.charts.queries ?? []).length;
-        countNode.textContent = String(count);
+        countNode.textContent = String(shellRefs.view.querySelectorAll('[data-charts-history-item]').length);
     }
 }
 
-function patchChartsDetailUi(state) {
+function renderChartsMainIntoScratch(state) {
+    const scratch = document.createElement('div');
+
+    replaceChildrenFromRenderedMarkup(scratch, renderChartsView(state).main);
+    return scratch;
+}
+
+function patchChartsHistoryUi(state) {
+    const chartsView = shellRefs.view.querySelector('.charts-view');
+
+    if (!(chartsView instanceof HTMLElement)) {
+        return false;
+    }
+
+    const currentSidebar = chartsView.querySelector('.charts-view__sidebar');
+    const scratch = renderChartsMainIntoScratch(state);
+    const nextSidebar = scratch.querySelector('.charts-view__sidebar');
+
+    if (!currentSidebar && !nextSidebar) {
+        return true;
+    }
+
+    if (!(currentSidebar instanceof HTMLElement) || !(nextSidebar instanceof HTMLElement)) {
+        return false;
+    }
+
+    currentSidebar.replaceWith(nextSidebar);
+    return true;
+}
+
+function renderChartsDetailIntoScratch(state) {
+    const scratch = document.createElement('div');
+
+    replaceChildrenFromRenderedMarkup(scratch, renderChartsDetail(state));
+    return scratch;
+}
+
+function replaceChartsDetailSection(detailNode, scratchNode, selector) {
+    const currentNode = detailNode.querySelector(selector);
+    const nextNode = scratchNode.querySelector(selector);
+
+    if (!(currentNode instanceof HTMLElement) || !(nextNode instanceof HTMLElement)) {
+        return false;
+    }
+
+    currentNode.replaceWith(nextNode);
+    return true;
+}
+
+function patchChartsDetailUi(state, { preserveCharts = false } = {}) {
     const chartsView = shellRefs.view.querySelector('.charts-view');
     const detailNode = chartsView?.querySelector('.charts-view__detail');
 
@@ -797,7 +917,17 @@ function patchChartsDetailUi(state) {
         return false;
     }
 
-    replaceChildrenFromRenderedMarkup(detailNode, renderChartsDetail(state));
+    if (preserveCharts) {
+        const scratch = renderChartsDetailIntoScratch(state);
+        const patched = replaceChartsDetailSection(detailNode, scratch, '[data-charts-detail-header]');
+
+        if (!patched) {
+            return false;
+        }
+    } else {
+        replaceChildrenFromRenderedMarkup(detailNode, renderChartsDetail(state));
+    }
+
     syncChartsHistorySelectionUi(state);
     return true;
 }
@@ -1223,6 +1353,7 @@ function renderApp(state) {
     const modalMarkup = renderModal(state);
     const toastMarkup = renderToasts(state.toasts);
     const chartsHistorySignature = buildChartsHistorySignature(state);
+    const chartsCardSignature = buildChartsCardSignature(state);
     const isLockedRoute = [
         'editor',
         'editorResults',
@@ -1242,6 +1373,7 @@ function renderApp(state) {
     const panelChanged = panel !== lastRenderedPanelMarkup;
     const modalChanged = modalMarkup !== lastRenderedModalMarkup;
     const chartsHistoryChanged = chartsHistorySignature !== lastRenderedChartsHistorySignature;
+    const chartsCardsChanged = chartsCardSignature !== lastRenderedChartsCardSignature;
     const panelOpenChanged = panelOpen !== lastRenderedPanelOpen;
     const lockedRouteChanged = isLockedRoute !== lastRenderedLockedRoute;
     const shellMarkupUnchanged =
@@ -1281,12 +1413,25 @@ function renderApp(state) {
     }
 
     const canPatchChartsMain =
-        mainChanged && previousRouteName === 'charts' && state.route.name === 'charts' && !chartsHistoryChanged;
+        mainChanged && previousRouteName === 'charts' && state.route.name === 'charts';
     let mainPatched = false;
+    let preservedChartsDom = false;
 
     if (canPatchChartsMain) {
-        teardownQueryChartRenderer();
-        mainPatched = patchChartsDetailUi(state);
+        const historyPatched = !chartsHistoryChanged || patchChartsHistoryUi(state);
+
+        if (historyPatched) {
+            if (chartsCardsChanged) {
+                teardownQueryChartRenderer();
+            }
+
+            preservedChartsDom = !chartsCardsChanged;
+            mainPatched = patchChartsDetailUi(state, { preserveCharts: preservedChartsDom });
+        }
+
+        if (!mainPatched) {
+            preservedChartsDom = false;
+        }
     }
 
     if (mainChanged) {
@@ -1382,6 +1527,7 @@ function renderApp(state) {
     lastRenderedModalMarkup = modalMarkup;
     lastRenderedToastMarkup = toastMarkup;
     lastRenderedChartsHistorySignature = chartsHistorySignature;
+    lastRenderedChartsCardSignature = chartsCardSignature;
     lastRenderedPanelOpen = panelOpen;
     lastRenderedLockedRoute = isLockedRoute;
 
@@ -1391,7 +1537,7 @@ function renderApp(state) {
         });
     }
 
-    if (state.route.name === 'charts') {
+    if (state.route.name === 'charts' && !preservedChartsDom) {
         mountQueryChartRenderer(state);
     }
 }
@@ -2091,6 +2237,35 @@ async function handleAction(actionNode) {
         case 'refresh-view':
             await refreshCurrentRoute();
             return;
+        case 'set-settings-section':
+            setSettingsSection(actionNode.dataset.section);
+            return;
+        case 'check-app-version':
+            await checkSettingsAppVersion();
+            return;
+        case 'open-delete-api-token-modal':
+            openDeleteSettingsApiTokenModal(actionNode.dataset.tokenId);
+            return;
+        case 'copy-created-api-token': {
+            const tokenInput = document.querySelector('[data-created-api-token]');
+            const token = tokenInput instanceof HTMLInputElement ? tokenInput.value : '';
+
+            if (token && navigator.clipboard?.writeText) {
+                await navigator.clipboard.writeText(token);
+                showToast('API token copied.', 'success');
+            }
+            return;
+        }
+        case 'copy-database-id': {
+            const databaseIdNode = document.querySelector('[data-database-id]');
+            const databaseId = databaseIdNode?.textContent?.trim() ?? '';
+
+            if (databaseId && navigator.clipboard?.writeText) {
+                await navigator.clipboard.writeText(databaseId);
+                showToast('Database ID copied.', 'success');
+            }
+            return;
+        }
         case 'open-row-editor-url':
             openRowEditorUrl(actionNode);
             return;
@@ -2181,6 +2356,33 @@ async function handleAction(actionNode) {
         case 'edit-connection':
             openEditConnectionModal(actionNode.dataset.connectionId);
             return;
+        case 'choose-open-database-path': {
+            const labelNode = actionNode.querySelector('[data-open-database-path-button-label]');
+
+            actionNode.setAttribute('disabled', '');
+            if (labelNode) {
+                labelNode.textContent = 'Choosing...';
+            }
+
+            const selectedPath = await chooseOpenDatabasePath();
+            const pathInput = document.querySelector(
+                '[data-form="open-connection"] [data-open-database-path]',
+            );
+
+            if (selectedPath && pathInput instanceof HTMLInputElement) {
+                pathInput.value = selectedPath;
+                pathInput.focus({ preventScroll: true });
+                pathInput.setSelectionRange(pathInput.value.length, pathInput.value.length);
+            }
+
+            if (actionNode.isConnected) {
+                actionNode.removeAttribute('disabled');
+                if (labelNode) {
+                    labelNode.textContent = 'Browse...';
+                }
+            }
+            return;
+        }
         case 'choose-create-database-path': {
             const labelNode = actionNode.querySelector('[data-create-database-path-button-label]');
 
@@ -2329,7 +2531,12 @@ async function handleAction(actionNode) {
             await loadMoreQueryHistory();
             return;
         case 'open-query-history':
-            if (actionNode.dataset.historyId && openQueryHistoryInEditor(actionNode.dataset.historyId)) {
+            if (
+                actionNode.dataset.historyId &&
+                openQueryHistoryInEditor(actionNode.dataset.historyId, {
+                    notify: getState().route.name !== 'charts',
+                })
+            ) {
                 router.navigate('/editor');
             }
             return;
@@ -2362,6 +2569,17 @@ async function handleAction(actionNode) {
                 }
             }
             return;
+        case 'open-charts-query-detail':
+            if (actionNode.dataset.historyId) {
+                setChartsDetailPanelVisibility(true);
+                if (getState().route.params?.historyId !== actionNode.dataset.historyId) {
+                    router.navigate(`/charts/${encodeURIComponent(actionNode.dataset.historyId)}`);
+                }
+            }
+            return;
+        case 'close-charts-query-detail':
+            setChartsDetailPanelVisibility(false);
+            return;
         case 'toggle-charts-sql-panel':
             toggleChartsSqlPanel();
             return;
@@ -2924,6 +3142,11 @@ document.addEventListener('input', event => {
         return;
     }
 
+    if (bindNode.dataset.bind === 'charts-history-search') {
+        setChartsHistorySearchInput(bindNode.value);
+        return;
+    }
+
     if (bindNode.dataset.bind === 'query-chart-draft:name') {
         updateCurrentQueryChartDraftField('name', bindNode.value);
     }
@@ -3116,6 +3339,9 @@ document.addEventListener('submit', async event => {
     const formData = submitter ? new FormData(form, submitter) : new FormData(form);
 
     switch (form.dataset.form) {
+        case 'create-api-token':
+            await createSettingsApiToken(String(formData.get('name') ?? ''));
+            return;
         case 'open-connection': {
             resetStructureGraphForDatabaseChange();
             const connection = await submitOpenConnection({
@@ -3206,6 +3432,9 @@ document.addEventListener('submit', async event => {
             }
             return;
         }
+        case 'delete-api-token-confirm':
+            await submitDeleteSettingsApiTokenConfirmation();
+            return;
         case 'document-insert-table': {
             const inserted = await submitDocumentInsertTable();
 

package/frontend/js/components/formControls.js

@@ -0,0 +1,38 @@
+import { escapeHtml } from '../utils/format.js';
+
+export const STANDARD_TEXT_INPUT_CLASS =
+    'control-input w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors placeholder:text-on-surface-variant/35 focus:border-primary-container';
+
+export function renderTextInput({
+    className = '',
+    dataAttributes = {},
+    disabled = false,
+    maxlength = null,
+    name = '',
+    placeholder = '',
+    readonly = false,
+    spellcheck = null,
+    type = 'text',
+    value = '',
+} = {}) {
+    const attributes = [
+        `class="${escapeHtml([STANDARD_TEXT_INPUT_CLASS, className].filter(Boolean).join(' '))}"`,
+        name ? `name="${escapeHtml(name)}"` : '',
+        placeholder ? `placeholder="${escapeHtml(placeholder)}"` : '',
+        `type="${escapeHtml(type)}"`,
+        `value="${escapeHtml(value)}"`,
+        Number.isInteger(maxlength) ? `maxlength="${maxlength}"` : '',
+        disabled ? 'disabled' : '',
+        readonly ? 'readonly' : '',
+        typeof spellcheck === 'boolean' ? `spellcheck="${spellcheck}"` : '',
+        ...Object.entries(dataAttributes).map(([name, attributeValue]) => {
+            const attributeName = `data-${String(name).replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)}`;
+
+            return attributeValue === true
+                ? attributeName
+                : `${attributeName}="${escapeHtml(attributeValue)}"`;
+        }),
+    ].filter(Boolean);
+
+    return `<input ${attributes.join(' ')} />`;
+}