sqlite-hub 0.6.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,10 +36,14 @@ import {
   openQueryHistoryInEditor,
   openDeleteDataRowModal,
   openDeleteEditorRowModal,
+  openDeleteQueryChartModal,
   openEditConnectionModal,
+  openCreateQueryChartModal,
+  openEditQueryChartModal,
   refreshCurrentRoute,
   removeConnection,
   runQueryHistoryItem,
+  saveCurrentQueryChartDraft,
   selectDataRow,
   selectEditorRow,
   selectConnection,
@@ -45,8 +54,13 @@ import {
   setDataPageSize,
   setDataSearchColumn,
   setDataSearchQuery,
+  toggleDataTablesPanel,
   setCurrentQuery,
+  setChartsHeightPreset,
+  setEditorPanelVisibility,
   setEditorTab,
+  submitDeleteChartConfirmation,
+  setQueryHistoryPanelVisibility,
   sortDataTableByColumn,
   sortEditorResultsByColumn,
   setQueryHistorySearchInput,
@@ -55,6 +69,8 @@ import {
   saveQueryHistoryNotes,
   saveQueryHistoryTitle,
   saveCurrentTableDesignerDraft,
+  toggleChartsResultsPanel,
+  toggleChartsSqlPanel,
   queueTableDesignerCsvImport,
   showToast,
   submitCreateConnection,
@@ -66,11 +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";
@@ -218,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":
@@ -411,7 +432,7 @@ function renderApp(state) {
   const focusedInput = captureFocusedInputState();
   const previousRoutePath = lastRenderedRoutePath;
   const { main, panel } = resolveView(state);
-  const isLockedRoute = ["editor", "editorResults", "data", "structure", "tableDesigner"].includes(
+  const isLockedRoute = ["editor", "editorResults", "data", "charts", "structure", "tableDesigner"].includes(
     state.route.name
   );
   const isEnteringNewTableDesignerRoute =
@@ -426,6 +447,7 @@ function renderApp(state) {
   }
 
   teardownStructureGraph();
+  teardownQueryChartRenderer();
   shellRefs.topNav.innerHTML = renderTopNav(state);
   shellRefs.sidebar.innerHTML = renderSidebar(state);
   shellRefs.statusBar.innerHTML = renderStatusBar(state);
@@ -456,6 +478,10 @@ function renderApp(state) {
       console.error("Failed to mount structure graph.", error);
     });
   }
+
+  if (state.route.name === "charts") {
+    mountQueryChartRenderer(state);
+  }
 }
 
 const router = createRouter((route) => {
@@ -480,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;
@@ -554,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;
@@ -576,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 &&
@@ -599,6 +660,9 @@ 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);
@@ -794,6 +858,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 +922,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 +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 = {};
 

package/frontend/js/components/modal.js

@@ -1,5 +1,10 @@
 import { escapeHtml, truncateMiddle } from "../utils/format.js";
 import { renderConnectionLogo } from "./connectionLogo.js";
+import {
+  analyzeQueryChartResult,
+  getQueryChartTypeLabel,
+  QUERY_CHART_TYPES,
+} from "../lib/queryCharts.js";
 
 function renderField({ label, name, type = "text", placeholder = "", value = "" }) {
   return `
@@ -58,6 +63,31 @@ function renderFileField({
   `;
 }
 
+function renderSelectField({ label, name, value = "", options = [], bind = "" }) {
+  return `
+    <label class="block space-y-2">
+      <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+        ${escapeHtml(label)}
+      </span>
+      <select
+        class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+        ${bind ? `data-bind="${escapeHtml(bind)}"` : ""}
+        ${name ? `name="${escapeHtml(name)}"` : ""}
+      >
+        ${options
+          .map(
+            (option) => `
+              <option value="${escapeHtml(option.value)}" ${String(option.value) === String(value) ? "selected" : ""}>
+                ${escapeHtml(option.label)}
+              </option>
+            `
+          )
+          .join("")}
+      </select>
+    </label>
+  `;
+}
+
 function renderError(error) {
   if (!error) {
     return "";
@@ -380,6 +410,279 @@ function renderDeleteRowConfirmForm(modal) {
   `;
 }
 
+function renderChartColumnOptions(analysis, { allowEmpty = false, includeNumericHint = false } = {}) {
+  const options = allowEmpty ? [{ value: "", label: "None" }] : [];
+
+  return options.concat(
+    (analysis?.columns ?? []).map((column) => ({
+      value: column.name,
+      label: `${column.name} (${column.type}${includeNumericHint && column.type === "number" ? " numeric" : ""})`,
+    }))
+  );
+}
+
+function renderChartEditorForm(modal, state) {
+  const draft = modal.draft ?? {};
+  const analysis = state.charts.result ? analyzeQueryChartResult(state.charts.result) : null;
+  const chartTypeOptions = QUERY_CHART_TYPES.map((chartType) => ({
+    value: chartType,
+    label: getQueryChartTypeLabel(chartType),
+  }));
+  const columnOptions = renderChartColumnOptions(analysis);
+  const optionalColumnOptions = renderChartColumnOptions(analysis, { allowEmpty: true });
+  let chartSpecificFields = "";
+
+  if (draft.chartType === "bar") {
+    chartSpecificFields = `
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+        ${renderSelectField({
+          label: "X Column",
+          value: draft.config?.x_column ?? "",
+          options: columnOptions,
+          bind: "query-chart-draft-config:x_column",
+        })}
+        ${renderSelectField({
+          label: "Y Column",
+          value: draft.config?.y_column ?? "",
+          options: columnOptions,
+          bind: "query-chart-draft-config:y_column",
+        })}
+      </div>
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+        ${renderSelectField({
+          label: "Sort Direction",
+          value: draft.config?.sort_direction ?? "asc",
+          options: [
+            { value: "asc", label: "Ascending" },
+            { value: "desc", label: "Descending" },
+          ],
+          bind: "query-chart-draft-config:sort_direction",
+        })}
+        ${renderCheckboxField({
+          label: "Show legend",
+          name: "",
+          checked: Boolean(draft.config?.show_legend),
+          text: "Show legend",
+        }).replace("<input", '<input data-bind="query-chart-draft-config:show_legend"')}
+        ${renderCheckboxField({
+          label: "Show labels",
+          name: "",
+          checked: Boolean(draft.config?.show_labels),
+          text: "Show labels",
+        }).replace("<input", '<input data-bind="query-chart-draft-config:show_labels"')}
+      </div>
+    `;
+  } else if (draft.chartType === "line") {
+    chartSpecificFields = `
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+        ${renderSelectField({
+          label: "X Column",
+          value: draft.config?.x_column ?? "",
+          options: columnOptions,
+          bind: "query-chart-draft-config:x_column",
+        })}
+        ${renderSelectField({
+          label: "Y Column",
+          value: draft.config?.y_column ?? "",
+          options: columnOptions,
+          bind: "query-chart-draft-config:y_column",
+        })}
+      </div>
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-4">
+        ${renderSelectField({
+          label: "Sort Direction",
+          value: draft.config?.sort_direction ?? "asc",
+          options: [
+            { value: "asc", label: "Ascending" },
+            { value: "desc", label: "Descending" },
+          ],
+          bind: "query-chart-draft-config:sort_direction",
+        })}
+        ${renderCheckboxField({
+          label: "Smooth line",
+          name: "",
+          checked: Boolean(draft.config?.smooth),
+          text: "Smooth line",
+        }).replace("<input", '<input data-bind="query-chart-draft-config:smooth"')}
+        ${renderCheckboxField({
+          label: "Show legend",
+          name: "",
+          checked: Boolean(draft.config?.show_legend),
+          text: "Show legend",
+        }).replace("<input", '<input data-bind="query-chart-draft-config:show_legend"')}
+        ${renderCheckboxField({
+          label: "Show labels",
+          name: "",
+          checked: Boolean(draft.config?.show_labels),
+          text: "Show labels",
+        }).replace("<input", '<input data-bind="query-chart-draft-config:show_labels"')}
+      </div>
+    `;
+  } else if (draft.chartType === "pie") {
+    chartSpecificFields = `
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+        ${renderSelectField({
+          label: "Label Column",
+          value: draft.config?.label_column ?? "",
+          options: columnOptions,
+          bind: "query-chart-draft-config:label_column",
+        })}
+        ${renderSelectField({
+          label: "Value Column",
+          value: draft.config?.value_column ?? "",
+          options: columnOptions,
+          bind: "query-chart-draft-config:value_column",
+        })}
+      </div>
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+        ${renderCheckboxField({
+          label: "Donut",
+          name: "",
+          checked: Boolean(draft.config?.donut),
+          text: "Render as donut",
+        }).replace("<input", '<input data-bind="query-chart-draft-config:donut"')}
+        ${renderCheckboxField({
+          label: "Show legend",
+          name: "",
+          checked: Boolean(draft.config?.show_legend),
+          text: "Show legend",
+        }).replace("<input", '<input data-bind="query-chart-draft-config:show_legend"')}
+        ${renderCheckboxField({
+          label: "Show labels",
+          name: "",
+          checked: Boolean(draft.config?.show_labels),
+          text: "Show labels",
+        }).replace("<input", '<input data-bind="query-chart-draft-config:show_labels"')}
+      </div>
+    `;
+  } else if (draft.chartType === "scatter") {
+    chartSpecificFields = `
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+        ${renderSelectField({
+          label: "X Column",
+          value: draft.config?.x_column ?? "",
+          options: columnOptions,
+          bind: "query-chart-draft-config:x_column",
+        })}
+        ${renderSelectField({
+          label: "Y Column",
+          value: draft.config?.y_column ?? "",
+          options: columnOptions,
+          bind: "query-chart-draft-config:y_column",
+        })}
+      </div>
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+        ${renderSelectField({
+          label: "Size Column",
+          value: draft.config?.size_column ?? "",
+          options: optionalColumnOptions,
+          bind: "query-chart-draft-config:size_column",
+        })}
+        ${renderSelectField({
+          label: "Series Column",
+          value: draft.config?.series_column ?? "",
+          options: optionalColumnOptions,
+          bind: "query-chart-draft-config:series_column",
+        })}
+        ${renderCheckboxField({
+          label: "Show legend",
+          name: "",
+          checked: Boolean(draft.config?.show_legend),
+          text: "Show legend",
+        }).replace("<input", '<input data-bind="query-chart-draft-config:show_legend"')}
+      </div>
+    `;
+  }
+
+  return `
+    <form class="space-y-5" data-form="save-query-chart">
+      ${renderField({
+        label: "Chart Name",
+        name: "chartName",
+        value: draft.name ?? "",
+      }).replace("<input", '<input data-bind="query-chart-draft:name"')}
+      ${renderSelectField({
+        label: "Chart Type",
+        value: draft.chartType ?? "bar",
+        options: chartTypeOptions,
+        bind: "query-chart-draft:chartType",
+      })}
+      ${chartSpecificFields}
+      ${
+        analysis
+          ? `
+            <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-4">
+              <div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+                Result Columns
+              </div>
+              <div class="mt-3 flex flex-wrap gap-2">
+                ${analysis.columns
+                  .map(
+                    (column) => `
+                      <span class="border border-outline-variant/15 bg-surface-container px-2 py-1 text-[10px] font-mono uppercase tracking-[0.12em] text-on-surface-variant/70">
+                        ${escapeHtml(column.name)} • ${escapeHtml(column.type)}
+                      </span>
+                    `
+                  )
+                  .join("")}
+              </div>
+            </div>
+          `
+          : ""
+      }
+      ${renderError(modal.error)}
+      <div class="flex items-center justify-end gap-3 pt-2">
+        <button
+          class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface-variant hover:bg-surface-container-highest"
+          data-action="close-modal"
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          class="bg-primary-container px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-on-primary"
+          type="submit"
+        >
+          ${modal.submitting ? "Saving..." : draft.mode === "edit" ? "Save Chart" : "Create Chart"}
+        </button>
+      </div>
+    </form>
+  `;
+}
+
+function renderDeleteChartForm(modal) {
+  return `
+    <form class="space-y-5" data-form="delete-query-chart">
+      <div class="space-y-3">
+        <p class="text-sm leading-7 text-on-surface">
+          Delete chart <span class="font-bold text-primary-container">${escapeHtml(
+            modal.chartName ?? "Chart"
+          )}</span>?
+        </p>
+        <p class="text-sm leading-7 text-on-surface-variant/65">
+          The linked query-history entry stays intact. Only this chart definition is removed.
+        </p>
+      </div>
+      ${renderError(modal.error)}
+      <div class="flex items-center justify-end gap-3 pt-2">
+        <button
+          class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface-variant hover:bg-surface-container-highest"
+          data-action="close-modal"
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          class="border border-error/25 bg-error-container/10 px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-error"
+          type="submit"
+        >
+          ${modal.submitting ? "Deleting..." : "Delete Chart"}
+        </button>
+      </div>
+    </form>
+  `;
+}
+
 export function renderModal(state) {
   const modal = state.modal;
 
@@ -413,6 +716,16 @@ export function renderModal(state) {
       title: "Delete Row",
       body: renderDeleteRowConfirmForm(modal),
     },
+    "chart-editor": {
+      eyebrow: "Charts // Configure query-based ECharts panel",
+      title: modal.draft?.mode === "edit" ? "Edit Chart" : "New Chart",
+      body: renderChartEditorForm(modal, state),
+    },
+    "delete-chart": {
+      eyebrow: "Charts // Confirm chart deletion",
+      title: "Delete Chart",
+      body: renderDeleteChartForm(modal),
+    },
   };
 
   const config = contentByKind[modal.kind];
@@ -423,7 +736,7 @@ export function renderModal(state) {
 
   return `
     <div class="fixed inset-0 z-50 flex items-center justify-center bg-background/85 px-4 backdrop-blur-sm">
-      <div class="w-full max-w-xl border border-outline-variant/20 bg-surface-container shadow-[0_24px_80px_rgba(0,0,0,0.45)]">
+      <div class="w-full ${modal.kind === "chart-editor" ? "max-w-3xl" : "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">
           <div>
             <div class="text-[10px] font-mono uppercase tracking-[0.26em] text-primary-container/70">

package/frontend/js/components/queryChartRenderer.js

@@ -0,0 +1,125 @@
+import {
+  buildBarChartOption,
+  buildLineChartOption,
+  buildPieChartOption,
+  buildScatterChartOption,
+} from "../lib/queryChartOptions.js";
+import { analyzeQueryChartResult, validateQueryChartConfig } from "../lib/queryCharts.js";
+
+const chartInstances = new Map();
+const resizeObservers = new Map();
+
+function getEchartsRuntime() {
+  return window.echarts ?? null;
+}
+
+function getOptionBuilder(chartType) {
+  if (chartType === "bar") {
+    return buildBarChartOption;
+  }
+
+  if (chartType === "line") {
+    return buildLineChartOption;
+  }
+
+  if (chartType === "pie") {
+    return buildPieChartOption;
+  }
+
+  if (chartType === "scatter") {
+    return buildScatterChartOption;
+  }
+
+  return null;
+}
+
+function disposeChart(chartId) {
+  const instance = chartInstances.get(chartId);
+
+  if (instance) {
+    instance.dispose();
+    chartInstances.delete(chartId);
+  }
+
+  const observer = resizeObservers.get(chartId);
+
+  if (observer) {
+    observer.disconnect();
+    resizeObservers.delete(chartId);
+  }
+}
+
+export function teardownQueryChartRenderer() {
+  Array.from(chartInstances.keys()).forEach((chartId) => disposeChart(chartId));
+}
+
+export function mountQueryChartRenderer(state) {
+  const echartsRuntime = getEchartsRuntime();
+  const charts = state.charts.detail?.charts ?? [];
+  const result = state.charts.result;
+
+  teardownQueryChartRenderer();
+
+  if (!echartsRuntime || !result || !charts.length) {
+    return;
+  }
+
+  const analysis = analyzeQueryChartResult(result);
+
+  charts.forEach((chart) => {
+    const host = document.querySelector(`[data-query-chart-id="${CSS.escape(String(chart.id))}"]`);
+
+    if (!(host instanceof HTMLElement)) {
+      return;
+    }
+
+    const validation = validateQueryChartConfig(chart.chartType, chart.config, analysis);
+
+    if (!validation.valid) {
+      return;
+    }
+
+    const buildOption = getOptionBuilder(chart.chartType);
+
+    if (!buildOption) {
+      return;
+    }
+
+    const instance = echartsRuntime.init(host);
+
+    instance.setOption(buildOption(chart, result.rows ?? [], analysis), true);
+    chartInstances.set(String(chart.id), instance);
+
+    const resizeObserver = new ResizeObserver(() => {
+      instance.resize();
+    });
+
+    resizeObserver.observe(host);
+    resizeObservers.set(String(chart.id), resizeObserver);
+  });
+}
+
+export function exportQueryChartAsPng(chartId) {
+  const instance = chartInstances.get(String(chartId));
+
+  if (!instance) {
+    return false;
+  }
+
+  const link = document.createElement("a");
+  const chartNode = document.querySelector(
+    `[data-query-chart-id="${CSS.escape(String(chartId))}"]`
+  );
+  const fileName = chartNode?.dataset.chartExportName ?? `chart-${chartId}`;
+
+  link.href = instance.getDataURL({
+    type: "png",
+    pixelRatio: 2,
+    backgroundColor: "#131313",
+  });
+  link.download = `${fileName}.png`;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  return true;
+}