sqlite-hub 0.6.0 → 0.8.7

package/frontend/js/app.js

@@ -4,9 +4,14 @@ import { renderSidebar } from "./components/sidebar.js";
 import { renderStatusBar } from "./components/statusBar.js";
 import {
   mountStructureGraph,
-  resetPersistedStructureGraphState,
   teardownStructureGraph,
+  resetPersistedStructureGraphState,
 } from "./components/structureGraph.js";
+import {
+  exportQueryChartAsPng,
+  mountQueryChartRenderer,
+  teardownQueryChartRenderer,
+} from "./components/queryChartRenderer.js";
 import { renderToasts } from "./components/toast.js";
 import { renderTopNav } from "./components/topNav.js";
 import { createRouter } from "./router.js";
@@ -31,22 +36,33 @@ import {
   openQueryHistoryInEditor,
   openDeleteDataRowModal,
   openDeleteEditorRowModal,
+  openDeleteQueryChartModal,
   openEditConnectionModal,
+  openCreateQueryChartModal,
+  openEditQueryChartModal,
   refreshCurrentRoute,
   removeConnection,
   runQueryHistoryItem,
+  saveCurrentQueryChartDraft,
   selectDataRow,
   selectEditorRow,
   selectConnection,
   selectQueryHistoryItem,
   selectStructureEntry,
   setTableDesignerSearchQuery,
+  setTableDesignerSqlPreviewVisibility,
+  toggleStructureTablesPanel,
   setDataPage,
   setDataPageSize,
   setDataSearchColumn,
   setDataSearchQuery,
+  toggleDataTablesPanel,
   setCurrentQuery,
+  setChartsHeightPreset,
+  setEditorPanelVisibility,
   setEditorTab,
+  submitDeleteChartConfirmation,
+  setQueryHistoryPanelVisibility,
   sortDataTableByColumn,
   sortEditorResultsByColumn,
   setQueryHistorySearchInput,
@@ -55,6 +71,8 @@ import {
   saveQueryHistoryNotes,
   saveQueryHistoryTitle,
   saveCurrentTableDesignerDraft,
+  toggleChartsResultsPanel,
+  toggleChartsSqlPanel,
   queueTableDesignerCsvImport,
   showToast,
   submitCreateConnection,
@@ -66,11 +84,14 @@ import {
   submitOpenConnection,
   subscribe,
   toggleQueryHistorySavedState,
+  updateCurrentQueryChartDraftConfigField,
+  updateCurrentQueryChartDraftField,
   updateCurrentTableDesignerColumnField,
   updateCurrentTableDesignerField,
   addCurrentTableDesignerColumn,
   removeCurrentTableDesignerColumn,
 } from "./store.js";
+import { renderChartsView } from "./views/charts.js";
 import { renderConnectionsView } from "./views/connections.js";
 import { renderDataView } from "./views/data.js";
 import { renderEditorView } from "./views/editor.js";
@@ -96,7 +117,21 @@ const shellRefs = {
   toast: document.querySelector("#toast-root"),
 };
 let lastRenderedRoutePath = null;
+let lastRenderedTopNavMarkup = "";
+let lastRenderedSidebarMarkup = "";
+let lastRenderedStatusBarMarkup = "";
+let lastRenderedMainMarkup = "";
+let lastRenderedPanelMarkup = "";
+let lastRenderedModalMarkup = "";
+let lastRenderedToastMarkup = "";
+let lastRenderedPanelOpen = false;
+let lastRenderedLockedRoute = false;
 let pendingNewTableDesignerAutofocus = false;
+let pendingQueryEditorFocus = false;
+
+function invalidateMainRenderCache() {
+  lastRenderedMainMarkup = null;
+}
 
 function resetStructureGraphForDatabaseChange() {
   resetPersistedStructureGraphState();
@@ -196,7 +231,7 @@ function renderNotFoundView() {
             404_SIGNAL
           </h1>
           <button
-            class="mt-8 bg-primary-container px-6 py-3 font-headline text-sm font-bold uppercase tracking-[0.2em] text-on-primary"
+            class="standard-button mt-8 px-6 font-headline text-sm"
             data-action="navigate"
             data-to="/"
             type="button"
@@ -218,6 +253,8 @@ function resolveView(state) {
       return renderConnectionsView(state);
     case "overview":
       return renderOverviewView(state);
+    case "charts":
+      return renderChartsView(state);
     case "data":
       return renderDataView(state);
     case "editor":
@@ -368,6 +405,18 @@ function focusTableDesignerColumnNameField(columnId) {
   return true;
 }
 
+function focusQueryEditorInput() {
+  const input = document.querySelector('[data-bind="current-query"]');
+
+  if (!(input instanceof HTMLTextAreaElement)) {
+    return false;
+  }
+
+  input.focus({ preventScroll: true });
+  input.setSelectionRange(input.value.length, input.value.length);
+  return true;
+}
+
 async function handleTableDesignerCsvImport(fileInput) {
   if (!(fileInput instanceof HTMLInputElement)) {
     return;
@@ -408,12 +457,39 @@ async function handleTableDesignerCsvImport(fileInput) {
 }
 
 function renderApp(state) {
-  const focusedInput = captureFocusedInputState();
   const previousRoutePath = lastRenderedRoutePath;
   const { main, panel } = resolveView(state);
-  const isLockedRoute = ["editor", "editorResults", "data", "structure", "tableDesigner"].includes(
+  const topNavMarkup = renderTopNav(state);
+  const sidebarMarkup = renderSidebar(state);
+  const statusBarMarkup = renderStatusBar(state);
+  const modalMarkup = renderModal(state);
+  const toastMarkup = renderToasts(state.toasts);
+  const isLockedRoute = ["editor", "editorResults", "data", "charts", "structure", "tableDesigner"].includes(
     state.route.name
   );
+  const panelOpen = Boolean(panel);
+  const shellMarkupUnchanged =
+    state.route.path === lastRenderedRoutePath &&
+    topNavMarkup === lastRenderedTopNavMarkup &&
+    sidebarMarkup === lastRenderedSidebarMarkup &&
+    statusBarMarkup === lastRenderedStatusBarMarkup &&
+    main === lastRenderedMainMarkup &&
+    panel === lastRenderedPanelMarkup &&
+    modalMarkup === lastRenderedModalMarkup &&
+    panelOpen === lastRenderedPanelOpen &&
+    isLockedRoute === lastRenderedLockedRoute;
+
+  if (shellMarkupUnchanged && toastMarkup !== lastRenderedToastMarkup) {
+    shellRefs.toast.innerHTML = toastMarkup;
+    lastRenderedToastMarkup = toastMarkup;
+    return;
+  }
+
+  if (shellMarkupUnchanged && toastMarkup === lastRenderedToastMarkup) {
+    return;
+  }
+
+  const focusedInput = captureFocusedInputState();
   const isEnteringNewTableDesignerRoute =
     state.route.name === "tableDesigner" &&
     state.route.params?.isNew &&
@@ -426,17 +502,25 @@ function renderApp(state) {
   }
 
   teardownStructureGraph();
-  shellRefs.topNav.innerHTML = renderTopNav(state);
-  shellRefs.sidebar.innerHTML = renderSidebar(state);
-  shellRefs.statusBar.innerHTML = renderStatusBar(state);
+  teardownQueryChartRenderer();
+  shellRefs.topNav.innerHTML = topNavMarkup;
+  shellRefs.sidebar.innerHTML = sidebarMarkup;
+  shellRefs.statusBar.innerHTML = statusBarMarkup;
   shellRefs.view.innerHTML = main;
   shellRefs.view.classList.toggle("app-main-scroll--locked", isLockedRoute);
   shellRefs.panel.innerHTML = panel;
-  shellRefs.modal.innerHTML = renderModal(state);
-  shellRefs.toast.innerHTML = renderToasts(state.toasts);
-  shellRefs.shell.classList.toggle("panel-open", Boolean(panel));
+  shellRefs.modal.innerHTML = modalMarkup;
+  shellRefs.toast.innerHTML = toastMarkup;
+  shellRefs.shell.classList.toggle("panel-open", panelOpen);
 
   if (
+    pendingQueryEditorFocus &&
+    (state.route.name === "editor" || state.route.name === "editorResults")
+  ) {
+    if (focusQueryEditorInput()) {
+      pendingQueryEditorFocus = false;
+    }
+  } else if (
     pendingNewTableDesignerAutofocus &&
     state.route.name === "tableDesigner" &&
     state.route.params?.isNew &&
@@ -450,12 +534,25 @@ function renderApp(state) {
   }
 
   lastRenderedRoutePath = state.route.path;
+  lastRenderedTopNavMarkup = topNavMarkup;
+  lastRenderedSidebarMarkup = sidebarMarkup;
+  lastRenderedStatusBarMarkup = statusBarMarkup;
+  lastRenderedMainMarkup = main;
+  lastRenderedPanelMarkup = panel;
+  lastRenderedModalMarkup = modalMarkup;
+  lastRenderedToastMarkup = toastMarkup;
+  lastRenderedPanelOpen = panelOpen;
+  lastRenderedLockedRoute = isLockedRoute;
 
   if (state.route.name === "structure") {
     mountStructureGraph(state).catch((error) => {
       console.error("Failed to mount structure graph.", error);
     });
   }
+
+  if (state.route.name === "charts") {
+    mountQueryChartRenderer(state);
+  }
 }
 
 const router = createRouter((route) => {
@@ -480,6 +577,15 @@ async function handleAction(actionNode) {
     case "open-modal":
       openModal(actionNode.dataset.modal);
       return;
+    case "open-create-query-chart-modal":
+      openCreateQueryChartModal();
+      return;
+    case "open-edit-query-chart-modal":
+      openEditQueryChartModal(actionNode.dataset.chartId);
+      return;
+    case "open-delete-query-chart-modal":
+      openDeleteQueryChartModal(actionNode.dataset.chartId);
+      return;
     case "edit-connection":
       openEditConnectionModal(actionNode.dataset.connectionId);
       return;
@@ -532,6 +638,7 @@ async function handleAction(actionNode) {
       openDeleteEditorRowModal(actionNode.dataset.rowIndex);
       return;
     case "clear-query":
+      pendingQueryEditorFocus = true;
       clearCurrentQuery();
       if (getState().route.name === "editorResults") {
         router.navigate("/editor");
@@ -554,6 +661,16 @@ async function handleAction(actionNode) {
         await setQueryHistoryTab(actionNode.dataset.tab);
       }
       return;
+    case "toggle-query-history-panel":
+      setQueryHistoryPanelVisibility(
+        actionNode.dataset.nextValue ? actionNode.dataset.nextValue === "true" : undefined
+      );
+      return;
+    case "toggle-editor-panel":
+      setEditorPanelVisibility(
+        actionNode.dataset.nextValue ? actionNode.dataset.nextValue === "true" : undefined
+      );
+      return;
     case "load-more-query-history":
       await loadMoreQueryHistory();
       return;
@@ -576,6 +693,22 @@ async function handleAction(actionNode) {
         );
       }
       return;
+    case "toggle-charts-sql-panel":
+      toggleChartsSqlPanel();
+      return;
+    case "toggle-charts-results-panel":
+      toggleChartsResultsPanel();
+      return;
+    case "set-charts-height-preset":
+      if (actionNode.dataset.preset) {
+        setChartsHeightPreset(actionNode.dataset.preset);
+      }
+      return;
+    case "export-query-chart-png":
+      if (actionNode.dataset.chartId && !exportQueryChartAsPng(actionNode.dataset.chartId)) {
+        showToast("The selected chart is not ready for PNG export.", "alert");
+      }
+      return;
     case "delete-query-history":
       if (
         actionNode.dataset.historyId &&
@@ -599,6 +732,12 @@ async function handleAction(actionNode) {
     case "export-data-csv":
       await exportCurrentDataTableCsv();
       return;
+    case "toggle-data-tables":
+      toggleDataTablesPanel();
+      return;
+    case "toggle-structure-tables":
+      toggleStructureTablesPanel();
+      return;
     case "select-structure-entry":
       if (actionNode.dataset.entryName) {
         await selectStructureEntry(actionNode.dataset.entryName);
@@ -640,6 +779,11 @@ async function handleAction(actionNode) {
       }
       return;
     }
+    case "toggle-table-designer-sql-preview":
+      setTableDesignerSqlPreviewVisibility(
+        actionNode.dataset.nextValue ? actionNode.dataset.nextValue === "true" : undefined
+      );
+      return;
     case "import-table-designer-csv": {
       const fileInput = document.querySelector('[data-bind="table-designer-import-file"]');
 
@@ -758,6 +902,7 @@ document.addEventListener("input", (event) => {
   }
 
   if (bindNode.dataset.bind === "current-query") {
+    invalidateMainRenderCache();
     syncQueryEditorHighlight(bindNode);
     syncQueryEditorScroll(bindNode);
     setCurrentQuery(bindNode.value);
@@ -794,6 +939,11 @@ document.addEventListener("input", (event) => {
 
   if (bindNode.dataset.bind === "query-history-search") {
     setQueryHistorySearchInput(bindNode.value);
+    return;
+  }
+
+  if (bindNode.dataset.bind === "query-chart-draft:name") {
+    updateCurrentQueryChartDraftField("name", bindNode.value);
   }
 });
 
@@ -853,6 +1003,28 @@ document.addEventListener("change", (event) => {
       bindNode.dataset.field,
       bindNode.checked
     );
+    return;
+  }
+
+  if (bindNode.dataset.bind === "query-chart-draft:chartType") {
+    updateCurrentQueryChartDraftField("chartType", bindNode.value);
+    return;
+  }
+
+  if (bindNode.dataset.bind === "query-chart-draft:tableVisible") {
+    updateCurrentQueryChartDraftField("tableVisible", bindNode.checked);
+    return;
+  }
+
+  if (bindNode.dataset.bind?.startsWith("query-chart-draft-config:")) {
+    const field = bindNode.dataset.bind.slice("query-chart-draft-config:".length);
+    const value =
+      bindNode instanceof HTMLInputElement && bindNode.type === "checkbox"
+        ? bindNode.checked
+        : bindNode.value === ""
+          ? null
+          : bindNode.value;
+    updateCurrentQueryChartDraftConfigField(field, value);
   }
 });
 
@@ -938,6 +1110,12 @@ document.addEventListener("submit", async (event) => {
     case "delete-row-confirm":
       await submitDeleteRowConfirmation();
       return;
+    case "save-query-chart":
+      await saveCurrentQueryChartDraft();
+      return;
+    case "delete-query-chart":
+      await submitDeleteChartConfirmation();
+      return;
     case "save-data-row": {
       const values = {};
 

package/frontend/js/components/connectionCard.js

@@ -73,17 +73,16 @@ export function renderConnectionCard(connection, activeConnectionId) {
       <div class="border-t border-outline-variant/10 bg-surface-container-low px-4 py-3">
         <div class="grid grid-cols-[minmax(0,1fr)_5.1rem_5.8rem] gap-2">
           <button
-            class="clipped-corner min-w-0 bg-primary-container px-3 py-2.5 text-[10px] font-black uppercase tracking-[0.18em] text-on-primary shadow-[0_0_18px_-10px_rgba(252,227,0,0.7)] transition-[filter,box-shadow] hover:brightness-105"
+            class="signature-button"
             data-action="select-connection"
             data-connection-id="${escapeHtml(connection.id)}"
-            style="--clip-path: ${clipPath};"
             type="button"
             title="${primaryActionLabel}"
           >
             ${primaryActionLabel}
           </button>
           <button
-            class="border border-outline-variant/20 bg-surface-container px-3 py-2.5 text-[10px] font-bold uppercase tracking-[0.18em] text-on-surface-variant transition-colors hover:bg-surface-container-highest"
+            class="standard-button"
             data-action="edit-connection"
             data-connection-id="${escapeHtml(connection.id)}"
             type="button"
@@ -91,7 +90,7 @@ export function renderConnectionCard(connection, activeConnectionId) {
             Edit
           </button>
           <button
-            class="border border-outline-variant/20 bg-surface-container px-3 py-2.5 text-[10px] font-bold uppercase tracking-[0.18em] text-on-surface-variant transition-colors hover:bg-surface-container-highest"
+            class="delete-button"
             data-action="remove-connection"
             data-connection-id="${escapeHtml(connection.id)}"
             type="button"

package/frontend/js/components/emptyState.js

@@ -22,7 +22,7 @@ function renderRecentConnections(recentConnections = []) {
         .map(
           (connection) => `
             <button
-              class="flex items-center gap-2 border border-outline-variant/15 bg-surface-container-low px-4 py-3 text-left text-on-surface transition-colors hover:border-primary-container/30 hover:bg-surface-container-high"
+              class="control-button flex items-center gap-2 border border-outline-variant/15 bg-surface-container-low px-4 text-left text-on-surface transition-colors hover:border-primary-container/30 hover:bg-surface-container-high"
               data-action="select-connection"
               data-connection-id="${escapeHtml(connection.id)}"
               type="button"
@@ -135,7 +135,7 @@ export function renderEmptyState({ activeConnection, recentConnections = [] }) {
             ? `
               <div class="mx-auto mt-8 grid w-full max-w-3xl grid-cols-1 gap-4 px-6 md:grid-cols-3">
                 <button
-                  class="border border-outline-variant/20 bg-surface-container-low px-5 py-4 font-headline text-sm font-bold uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container/30 hover:text-primary-container"
+                  class="standard-button"
                   data-action="navigate"
                   data-to="/overview"
                   type="button"
@@ -143,7 +143,7 @@ export function renderEmptyState({ activeConnection, recentConnections = [] }) {
                   Overview
                 </button>
                 <button
-                  class="border border-outline-variant/20 bg-surface-container-low px-5 py-4 font-headline text-sm font-bold uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container/30 hover:text-primary-container"
+                  class="standard-button"
                   data-action="navigate"
                   data-to="/structure"
                   type="button"
@@ -151,7 +151,7 @@ export function renderEmptyState({ activeConnection, recentConnections = [] }) {
                   Structure
                 </button>
                 <button
-                  class="border border-outline-variant/20 bg-surface-container-low px-5 py-4 font-headline text-sm font-bold uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container/30 hover:text-primary-container"
+                  class="standard-button"
                   data-action="navigate"
                   data-to="/editor"
                   type="button"