sqlite-hub 0.5.0 → 0.7.0

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,21 +36,31 @@ import {
   openQueryHistoryInEditor,
   openDeleteDataRowModal,
   openDeleteEditorRowModal,
+  openDeleteQueryChartModal,
   openEditConnectionModal,
+  openCreateQueryChartModal,
+  openEditQueryChartModal,
   refreshCurrentRoute,
   removeConnection,
   runQueryHistoryItem,
+  saveCurrentQueryChartDraft,
   selectDataRow,
   selectEditorRow,
   selectConnection,
   selectQueryHistoryItem,
   selectStructureEntry,
+  setTableDesignerSearchQuery,
   setDataPage,
   setDataPageSize,
   setDataSearchColumn,
   setDataSearchQuery,
+  toggleDataTablesPanel,
   setCurrentQuery,
+  setChartsHeightPreset,
+  setEditorPanelVisibility,
   setEditorTab,
+  submitDeleteChartConfirmation,
+  setQueryHistoryPanelVisibility,
   sortDataTableByColumn,
   sortEditorResultsByColumn,
   setQueryHistorySearchInput,
@@ -53,6 +68,11 @@ import {
   setRoute,
   saveQueryHistoryNotes,
   saveQueryHistoryTitle,
+  saveCurrentTableDesignerDraft,
+  toggleChartsResultsPanel,
+  toggleChartsSqlPanel,
+  queueTableDesignerCsvImport,
+  showToast,
   submitCreateConnection,
   submitDeleteRowConfirmation,
   submitDataRowUpdate,
@@ -62,7 +82,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";
@@ -70,6 +97,7 @@ import { renderLandingView } from "./views/landing.js";
 import { renderOverviewView } from "./views/overview.js";
 import { renderSettingsView } from "./views/settings.js";
 import { renderStructureView } from "./views/structure.js";
+import { renderTableDesignerView } from "./views/tableDesigner.js";
 import { highlightSql } from "./utils/format.js";
 
 const appRoot = document.querySelector("#app");
@@ -86,6 +114,8 @@ const shellRefs = {
   modal: document.querySelector("#modal-root"),
   toast: document.querySelector("#toast-root"),
 };
+let lastRenderedRoutePath = null;
+let pendingNewTableDesignerAutofocus = false;
 
 function resetStructureGraphForDatabaseChange() {
   resetPersistedStructureGraphState();
@@ -146,6 +176,21 @@ function readFileAsBase64(file) {
   });
 }
 
+function readFileAsText(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      resolve(String(reader.result ?? ""));
+    };
+    reader.onerror = () => {
+      reject(reader.error ?? new Error("The selected CSV file could not be read."));
+    };
+
+    reader.readAsText(file);
+  });
+}
+
 async function buildConnectionLogoUpload(file) {
   if (!(file instanceof File) || !file.size) {
     return null;
@@ -192,6 +237,8 @@ function resolveView(state) {
       return renderConnectionsView(state);
     case "overview":
       return renderOverviewView(state);
+    case "charts":
+      return renderChartsView(state);
     case "data":
       return renderDataView(state);
     case "editor":
@@ -200,6 +247,8 @@ function resolveView(state) {
       return renderEditorView(state, { isResultsRoute: true });
     case "structure":
       return renderStructureView(state);
+    case "tableDesigner":
+      return renderTableDesignerView(state);
     case "settings":
       return renderSettingsView(state);
     default:
@@ -212,7 +261,11 @@ function captureFocusedInputState() {
 
   if (
     !activeElement ||
-    !(activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement)
+    !(
+      activeElement instanceof HTMLInputElement ||
+      activeElement instanceof HTMLTextAreaElement ||
+      activeElement instanceof HTMLSelectElement
+    )
   ) {
     return null;
   }
@@ -224,6 +277,8 @@ function captureFocusedInputState() {
 
   return {
     bind,
+    field: activeElement.dataset.field ?? null,
+    columnId: activeElement.dataset.columnId ?? null,
     selectionStart: activeElement.selectionStart,
     selectionEnd: activeElement.selectionEnd,
     selectionDirection: activeElement.selectionDirection,
@@ -232,24 +287,61 @@ function captureFocusedInputState() {
   };
 }
 
+function buildFocusedInputSelectors(snapshot) {
+  if (!snapshot?.bind) {
+    return [];
+  }
+
+  const selectors = [];
+  const bindSelector = `[data-bind="${CSS.escape(snapshot.bind)}"]`;
+
+  if (snapshot.columnId && snapshot.field) {
+    selectors.push(
+      `${bindSelector}[data-column-id="${CSS.escape(snapshot.columnId)}"][data-field="${CSS.escape(snapshot.field)}"]`
+    );
+  }
+
+  if (snapshot.field) {
+    selectors.push(`${bindSelector}[data-field="${CSS.escape(snapshot.field)}"]`);
+  }
+
+  if (snapshot.columnId) {
+    selectors.push(`${bindSelector}[data-column-id="${CSS.escape(snapshot.columnId)}"]`);
+  }
+
+  selectors.push(bindSelector);
+  return selectors;
+}
+
 function restoreFocusedInputState(snapshot) {
   if (!snapshot) {
-    return;
+    return false;
   }
 
-  const selector = `[data-bind="${CSS.escape(snapshot.bind)}"]`;
-  const nextElement = document.querySelector(selector);
+  const nextElement = buildFocusedInputSelectors(snapshot)
+    .map((selector) => document.querySelector(selector))
+    .find(
+      (candidate) =>
+        candidate instanceof HTMLInputElement ||
+        candidate instanceof HTMLTextAreaElement ||
+        candidate instanceof HTMLSelectElement
+    );
 
   if (
     !nextElement ||
-    !(nextElement instanceof HTMLInputElement || nextElement instanceof HTMLTextAreaElement)
+    !(
+      nextElement instanceof HTMLInputElement ||
+      nextElement instanceof HTMLTextAreaElement ||
+      nextElement instanceof HTMLSelectElement
+    )
   ) {
-    return;
+    return false;
   }
 
   nextElement.focus({ preventScroll: true });
 
   if (
+    (nextElement instanceof HTMLInputElement || nextElement instanceof HTMLTextAreaElement) &&
     typeof snapshot.selectionStart === "number" &&
     typeof snapshot.selectionEnd === "number"
   ) {
@@ -262,16 +354,100 @@ function restoreFocusedInputState(snapshot) {
 
   nextElement.scrollTop = snapshot.scrollTop;
   nextElement.scrollLeft = snapshot.scrollLeft;
+  return true;
+}
+
+function focusNewTableDesignerNameField() {
+  const input = document.querySelector(
+    '[data-bind="table-designer-field"][data-field="tableName"]'
+  );
+
+  if (!(input instanceof HTMLInputElement)) {
+    return false;
+  }
+
+  input.focus({ preventScroll: true });
+  input.setSelectionRange(input.value.length, input.value.length);
+  return true;
+}
+
+function focusTableDesignerColumnNameField(columnId) {
+  if (!columnId) {
+    return false;
+  }
+
+  const input = document.querySelector(
+    `[data-bind="table-designer-column-field"][data-column-id="${CSS.escape(columnId)}"][data-field="name"]`
+  );
+
+  if (!(input instanceof HTMLInputElement)) {
+    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;
+  }
+
+  const file = fileInput.files?.[0];
+
+  if (!(file instanceof File)) {
+    return;
+  }
+
+  if (!file.size) {
+    showToast("The selected CSV file is empty.", "alert");
+    fileInput.value = "";
+    return;
+  }
+
+  try {
+    const csvText = await readFileAsText(file);
+    const imported = queueTableDesignerCsvImport(file.name, csvText);
+
+    if (!imported) {
+      return;
+    }
+
+    router.navigate("/table-designer/new");
+    showToast(
+      `Imported ${imported.columnCount} columns and ${imported.importedRowCount} row${
+        imported.importedRowCount === 1 ? "" : "s"
+      } from ${file.name}.`,
+      "success"
+    );
+  } catch (error) {
+    showToast(error?.message || "CSV import failed.", "alert");
+  } finally {
+    fileInput.value = "";
+  }
 }
 
 function renderApp(state) {
   const focusedInput = captureFocusedInputState();
+  const previousRoutePath = lastRenderedRoutePath;
   const { main, panel } = resolveView(state);
-  const isLockedRoute = ["editor", "editorResults", "data", "structure"].includes(
+  const isLockedRoute = ["editor", "editorResults", "data", "charts", "structure", "tableDesigner"].includes(
     state.route.name
   );
+  const isEnteringNewTableDesignerRoute =
+    state.route.name === "tableDesigner" &&
+    state.route.params?.isNew &&
+    previousRoutePath !== state.route.path;
+
+  if (isEnteringNewTableDesignerRoute) {
+    pendingNewTableDesignerAutofocus = true;
+  } else if (state.route.name !== "tableDesigner" || !state.route.params?.isNew) {
+    pendingNewTableDesignerAutofocus = false;
+  }
 
   teardownStructureGraph();
+  teardownQueryChartRenderer();
   shellRefs.topNav.innerHTML = renderTopNav(state);
   shellRefs.sidebar.innerHTML = renderSidebar(state);
   shellRefs.statusBar.innerHTML = renderStatusBar(state);
@@ -281,13 +457,31 @@ function renderApp(state) {
   shellRefs.modal.innerHTML = renderModal(state);
   shellRefs.toast.innerHTML = renderToasts(state.toasts);
   shellRefs.shell.classList.toggle("panel-open", Boolean(panel));
-  restoreFocusedInputState(focusedInput);
+
+  if (
+    pendingNewTableDesignerAutofocus &&
+    state.route.name === "tableDesigner" &&
+    state.route.params?.isNew &&
+    state.tableDesigner.draft?.mode === "create"
+  ) {
+    if (focusNewTableDesignerNameField()) {
+      pendingNewTableDesignerAutofocus = false;
+    }
+  } else {
+    restoreFocusedInputState(focusedInput);
+  }
+
+  lastRenderedRoutePath = state.route.path;
 
   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) => {
@@ -312,6 +506,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;
@@ -386,6 +589,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;
@@ -408,6 +621,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 &&
@@ -431,11 +660,61 @@ async function handleAction(actionNode) {
     case "export-data-csv":
       await exportCurrentDataTableCsv();
       return;
+    case "toggle-data-tables":
+      toggleDataTablesPanel();
+      return;
     case "select-structure-entry":
       if (actionNode.dataset.entryName) {
         await selectStructureEntry(actionNode.dataset.entryName);
       }
       return;
+    case "add-table-designer-column":
+      {
+        const columnId = addCurrentTableDesignerColumn();
+        if (columnId) {
+          window.requestAnimationFrame(() => {
+            focusTableDesignerColumnNameField(columnId);
+          });
+        }
+      }
+      return;
+    case "remove-table-designer-column":
+      if (actionNode.dataset.columnId) {
+        removeCurrentTableDesignerColumn(actionNode.dataset.columnId);
+      }
+      return;
+    case "save-table-designer": {
+      const savedTableName = await saveCurrentTableDesignerDraft();
+      if (savedTableName) {
+        router.navigate(`/table-designer/${encodeURIComponent(savedTableName)}`);
+      }
+      return;
+    }
+    case "copy-table-designer-sql": {
+      const sqlPreview = getState().tableDesigner.draft?.sqlPreview ?? "";
+      if (!sqlPreview.trim()) {
+        return;
+      }
+
+      try {
+        await navigator.clipboard.writeText(sqlPreview);
+        showToast("SQL preview copied.", "success");
+      } catch (error) {
+        showToast("Clipboard access failed.", "alert");
+      }
+      return;
+    }
+    case "import-table-designer-csv": {
+      const fileInput = document.querySelector('[data-bind="table-designer-import-file"]');
+
+      if (!(fileInput instanceof HTMLInputElement)) {
+        return;
+      }
+
+      fileInput.value = "";
+      fileInput.click();
+      return;
+    }
     case "select-data-row":
       if (actionNode.dataset.rowIndex) {
         selectDataRow(actionNode.dataset.rowIndex);
@@ -554,8 +833,36 @@ document.addEventListener("input", (event) => {
     return;
   }
 
+  if (bindNode.dataset.bind === "table-designer-search") {
+    setTableDesignerSearchQuery(bindNode.value);
+    return;
+  }
+
+  if (bindNode.dataset.bind === "table-designer-field") {
+    if (bindNode instanceof HTMLInputElement && bindNode.type === "checkbox") {
+      return;
+    }
+
+    updateCurrentTableDesignerField(bindNode.dataset.field, bindNode.value);
+    return;
+  }
+
+  if (bindNode.dataset.bind === "table-designer-column-field") {
+    updateCurrentTableDesignerColumnField(
+      bindNode.dataset.columnId,
+      bindNode.dataset.field,
+      bindNode.value
+    );
+    return;
+  }
+
   if (bindNode.dataset.bind === "query-history-search") {
     setQueryHistorySearchInput(bindNode.value);
+    return;
+  }
+
+  if (bindNode.dataset.bind === "query-chart-draft:name") {
+    updateCurrentQueryChartDraftField("name", bindNode.value);
   }
 });
 
@@ -582,6 +889,61 @@ document.addEventListener("change", (event) => {
 
   if (bindNode.dataset.bind === "data-search-column") {
     setDataSearchColumn(bindNode.value);
+    return;
+  }
+
+  if (bindNode.dataset.bind === "table-designer-import-file") {
+    void handleTableDesignerCsvImport(bindNode);
+    return;
+  }
+
+  if (bindNode.dataset.bind === "table-designer-field") {
+    if (bindNode instanceof HTMLInputElement && bindNode.type === "checkbox") {
+      updateCurrentTableDesignerField(bindNode.dataset.field, bindNode.checked);
+      return;
+    }
+
+    updateCurrentTableDesignerField(bindNode.dataset.field, bindNode.value);
+    return;
+  }
+
+  if (bindNode.dataset.bind === "table-designer-column-field") {
+    updateCurrentTableDesignerColumnField(
+      bindNode.dataset.columnId,
+      bindNode.dataset.field,
+      bindNode.value
+    );
+    return;
+  }
+
+  if (bindNode.dataset.bind === "table-designer-column-flag") {
+    updateCurrentTableDesignerColumnField(
+      bindNode.dataset.columnId,
+      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);
   }
 });
 
@@ -667,6 +1029,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 = {};