sqlite-hub 1.0.0 → 1.1.0

package/frontend/js/app.js

@@ -35,6 +35,7 @@ import {
     clearEditorResults,
     clearQueryHistorySelection,
     closeModal,
+    checkSettingsAppVersion,
     dismissMediaTaggingIssue,
     dismissToast,
     executeCurrentQuery,
@@ -95,7 +96,9 @@ import {
     toggleDataTablesPanel,
     setCurrentQuery,
     setChartsHeightPreset,
+    setChartsDetailPanelVisibility,
     setChartsHistoryTab,
+    setChartsHistorySearchInput,
     setChartsHistoryPanelVisibility,
     setEditorPanelVisibility,
     setEditorTab,
@@ -222,6 +225,7 @@ let lastRenderedPanelMarkup = '';
 let lastRenderedModalMarkup = '';
 let lastRenderedToastMarkup = '';
 let lastRenderedChartsHistorySignature = '';
+let lastRenderedChartsCardSignature = '';
 let lastRenderedPanelOpen = false;
 let lastRenderedLockedRoute = false;
 let pendingNewTableDesignerAutofocus = false;
@@ -714,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,
@@ -725,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(
@@ -738,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';
+    }
+}
+
+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
+        );
+    });
 
-        if (!nextValue && getState().charts.historyTab === 'saved') {
+    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 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) {
+function patchChartsDetailUi(state, { preserveCharts = false } = {}) {
     const chartsView = shellRefs.view.querySelector('.charts-view');
     const detailNode = chartsView?.querySelector('.charts-view__detail');
 
@@ -802,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;
 }
@@ -1228,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',
@@ -1247,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 =
@@ -1286,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) {
@@ -1387,6 +1527,7 @@ function renderApp(state) {
     lastRenderedModalMarkup = modalMarkup;
     lastRenderedToastMarkup = toastMarkup;
     lastRenderedChartsHistorySignature = chartsHistorySignature;
+    lastRenderedChartsCardSignature = chartsCardSignature;
     lastRenderedPanelOpen = panelOpen;
     lastRenderedLockedRoute = isLockedRoute;
 
@@ -1396,7 +1537,7 @@ function renderApp(state) {
         });
     }
 
-    if (state.route.name === 'charts') {
+    if (state.route.name === 'charts' && !preservedChartsDom) {
         mountQueryChartRenderer(state);
     }
 }
@@ -2099,6 +2240,9 @@ async function handleAction(actionNode) {
         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;
@@ -2387,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;
@@ -2420,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;
@@ -2982,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);
     }

package/frontend/js/components/modal.js

@@ -1018,6 +1018,20 @@ function getExportOptions() {
       meta: ".md",
       preview: ["| id | name |", "| --- | --- |"],
     },
+    {
+      label: "JSON",
+      format: "json",
+      icon: "data_object",
+      meta: ".json",
+      preview: ['[', '  {"id":1,"name":"Acme"}', ']'],
+    },
+    {
+      label: "Parquet",
+      format: "parquet",
+      icon: "dataset",
+      meta: ".parquet",
+      preview: ["columnar binary", "typed row groups"],
+    },
     {
       label: "Duplicate",
       format: "table",
@@ -1047,7 +1061,7 @@ function renderTextExportModal(modal, action) {
           ${disabledAttribute}
         />
       </label>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
         ${getExportOptions()
           .map(
             (option) => `
@@ -1784,6 +1798,8 @@ export function renderModal(state) {
         modal.kind === "row-update-preview" ||
         modal.kind === "table-designer-constraints"
           ? "max-w-3xl"
+          : modal.kind === "query-export" || modal.kind === "data-export"
+            ? "max-w-4xl"
           : "max-w-xl"
       } border border-outline-variant/20 bg-surface-container shadow-[0_24px_80px_rgba(0,0,0,0.45)]">
         <div class="flex items-start justify-between gap-4 border-b border-outline-variant/10 bg-surface-container-low px-6 py-5">

package/frontend/js/components/queryChartRenderer.js

@@ -7,6 +7,7 @@ import {
 import { analyzeQueryChartResult, validateQueryChartConfig } from "../lib/queryCharts.js";
 
 const chartInstances = new Map();
+const chartHosts = new Map();
 const resizeObservers = new Map();
 
 function getEchartsRuntime() {
@@ -41,6 +42,8 @@ function disposeChart(chartId) {
     chartInstances.delete(chartId);
   }
 
+  chartHosts.delete(chartId);
+
   const observer = resizeObservers.get(chartId);
 
   if (observer) {
@@ -58,7 +61,15 @@ export function mountQueryChartRenderer(state) {
   const charts = state.charts.detail?.charts ?? [];
   const result = state.charts.result;
 
-  teardownQueryChartRenderer();
+  const activeChartIds = new Set(charts.map((chart) => String(chart.id)));
+
+  Array.from(chartInstances.keys()).forEach((chartId) => {
+    const host = chartHosts.get(chartId);
+
+    if (!activeChartIds.has(chartId) || !(host instanceof HTMLElement) || !host.isConnected) {
+      disposeChart(chartId);
+    }
+  });
 
   if (!echartsRuntime || !result || !charts.length) {
     return;
@@ -85,17 +96,31 @@ export function mountQueryChartRenderer(state) {
       return;
     }
 
+    const chartId = String(chart.id);
+    const existingInstance = chartInstances.get(chartId);
+    const existingHost = chartHosts.get(chartId);
+
+    if (existingInstance && existingHost === host) {
+      existingInstance.resize();
+      return;
+    }
+
+    if (existingInstance) {
+      disposeChart(chartId);
+    }
+
     const instance = echartsRuntime.init(host);
 
     instance.setOption(buildOption(chart, result.rows ?? [], analysis), true);
-    chartInstances.set(String(chart.id), instance);
+    chartInstances.set(chartId, instance);
+    chartHosts.set(chartId, host);
 
     const resizeObserver = new ResizeObserver(() => {
       instance.resize();
     });
 
     resizeObserver.observe(host);
-    resizeObservers.set(String(chart.id), resizeObserver);
+    resizeObservers.set(chartId, resizeObserver);
   });
 }
 

package/frontend/js/components/queryEditor.js

@@ -1,5 +1,4 @@
 import { escapeHtml, highlightSql } from "../utils/format.js";
-import { renderActionBar } from "./actionBar.js";
 
 function renderLineNumbers(query) {
   const lineCount = Math.max(1, String(query || "").split("\n").length);
@@ -40,20 +39,11 @@ export function renderQueryEditor({
   query,
   executing = false,
   exporting = false,
-  historyLoading = false,
-  historyTotal = 0,
   editorVisible = true,
   historyVisible = true,
 }) {
   const secondaryButtonClass = "standard-button";
   const left = `
-    <div class="flex items-center gap-2 text-[10px] font-mono uppercase tracking-widest text-on-surface-variant/40">
-      <span class="material-symbols-outlined text-xs">history</span>
-      ${historyLoading ? "Loading history..." : `${historyTotal} queries tracked`}
-    </div>
-  `;
-
-  const right = `
     <button
       class="${secondaryButtonClass}"
       data-action="toggle-editor-panel"
@@ -63,15 +53,9 @@ export function renderQueryEditor({
       <span class="material-symbols-outlined text-sm">${editorVisible ? "keyboard_arrow_down" : "terminal"}</span>
       ${editorVisible ? "Hide Editor" : "Show Editor"}
     </button>
-    <button
-      class="${secondaryButtonClass}"
-      data-action="toggle-query-history-panel"
-      data-next-value="${historyVisible ? "false" : "true"}"
-      type="button"
-    >
-      <span class="material-symbols-outlined text-sm">${historyVisible ? "visibility_off" : "visibility"}</span>
-      ${historyVisible ? "Hide History" : "Show History"}
-    </button>
+  `;
+
+  const center = `
     <button
       class="${secondaryButtonClass}"
       data-action="format-current-query"
@@ -104,14 +88,26 @@ export function renderQueryEditor({
     </button>
   `;
 
+  const right = `
+    <button
+      class="${secondaryButtonClass}"
+      data-action="toggle-query-history-panel"
+      data-next-value="${historyVisible ? "false" : "true"}"
+      type="button"
+    >
+      <span class="material-symbols-outlined text-sm">${historyVisible ? "visibility_off" : "visibility"}</span>
+      ${historyVisible ? "Hide History" : "Show History"}
+    </button>
+  `;
+
   return `
     <div class="flex h-full min-h-0 flex-col">
       <div class="bg-surface-container-low px-6 py-3">
-        ${renderActionBar({
-          left,
-          right,
-          className: "flex-wrap",
-        })}
+        <div class="query-editor-toolbar">
+          <div class="query-editor-toolbar__left">${left}</div>
+          <div class="query-editor-toolbar__center">${center}</div>
+          <div class="query-editor-toolbar__right">${right}</div>
+        </div>
       </div>
       ${
         editorVisible

package/frontend/js/components/queryHistoryDetail.js

@@ -163,7 +163,7 @@ export function renderQueryHistoryDetail({
     escapeHtml(item.displayTitle),
     "</h2></div>",
     '<button class="query-history-icon-button" data-action="clear-query-history-selection" type="button"><span class="material-symbols-outlined text-[18px]">close</span></button>',
-    '</div><div class="mt-4 flex flex-wrap gap-2">',
+    '</div><div class="query-history-badge-row mt-4 flex flex-wrap gap-2">',
     statusMarkup,
     "</div></div>",
     '<div class="custom-scrollbar min-h-0 flex-1 overflow-auto px-5 py-5">',

package/frontend/js/components/queryHistoryHeader.js

@@ -0,0 +1,48 @@
+import { escapeHtml } from '../utils/format.js';
+
+export function renderQueryHistoryHeader({
+    title = 'Query History',
+    icon = 'history',
+    closeAction = 'toggle-query-history-panel',
+    closeTitle = 'Hide query history',
+    nextValue = 'false',
+} = {}) {
+    return `
+      <div class="flex items-center justify-between gap-3">
+        <div class="flex items-center gap-2">
+          <span class="material-symbols-outlined text-[18px] text-primary-container">${escapeHtml(icon)}</span>
+          <span class="font-headline text-xs font-black uppercase tracking-[0.18em] text-primary-container">
+            ${escapeHtml(title)}
+          </span>
+        </div>
+        <button
+          class="query-history-icon-button"
+          data-action="${escapeHtml(closeAction)}"
+          data-next-value="${escapeHtml(nextValue)}"
+          title="${escapeHtml(closeTitle)}"
+          type="button"
+        >
+          <span class="material-symbols-outlined text-[18px]">close</span>
+        </button>
+      </div>
+    `;
+}
+
+export function renderQueryHistorySearch({
+    bind = 'query-history-search',
+    value = '',
+    placeholder = 'Search SQL, titles, notes...',
+} = {}) {
+    return `
+      <label class="mt-4 block">
+        <span class="sr-only">Search query history</span>
+        <input
+          class="control-input w-full border border-outline-variant/20 bg-surface-container text-sm text-on-surface outline-none placeholder:text-on-surface-variant/35 focus:border-primary-container"
+          data-bind="${escapeHtml(bind)}"
+          placeholder="${escapeHtml(placeholder)}"
+          type="search"
+          value="${escapeHtml(value)}"
+        />
+      </label>
+    `;
+}