sqlite-hub 0.5.0 → 0.7.0

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;
+}

package/frontend/js/components/queryEditor.js

@@ -28,11 +28,11 @@ function renderEditorSurface({ query }) {
           <span class="material-symbols-outlined text-[120px] font-thin">terminal</span>
         </div>
         <div class="query-editor-layer relative z-10 h-full min-h-[140px]">
-          <pre
+          <div
             aria-hidden="true"
             class="query-editor-highlight"
             data-query-editor-highlight
-          >${renderHighlightedQuery(query)}</pre>
+          >${renderHighlightedQuery(query)}</div>
           <textarea
             class="query-editor-input custom-scrollbar relative z-10 h-full min-h-[140px] w-full resize-none border-none focus:ring-0"
             data-bind="current-query"
@@ -52,7 +52,11 @@ export function renderQueryEditor({
   exporting = false,
   historyLoading = false,
   historyTotal = 0,
+  editorVisible = true,
+  historyVisible = true,
 }) {
+  const secondaryButtonClass =
+    "toolbar-button border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-bold uppercase tracking-widest text-on-surface transition-colors hover:border-primary-container hover:text-primary-container";
   const left = `
     <div class="flex items-center gap-2 bg-surface-container-lowest px-3 py-1">
       <span class="material-symbols-outlined text-xs text-[#FCE300]">database</span>
@@ -68,22 +72,41 @@ export function renderQueryEditor({
 
   const right = `
     <button
-      class="px-4 py-1.5 text-[10px] font-bold uppercase tracking-widest text-on-surface hover:bg-surface-container-highest transition-colors"
+      class="${secondaryButtonClass}"
+      data-action="toggle-editor-panel"
+      data-next-value="${editorVisible ? "false" : "true"}"
+      type="button"
+    >
+      <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" : "history"}</span>
+      ${historyVisible ? "Hide History" : "Show History"}
+    </button>
+    <button
+      class="${secondaryButtonClass}"
       data-action="clear-query"
       type="button"
     >
       Clear
     </button>
     <button
-      class="px-4 py-1.5 text-[10px] font-bold uppercase tracking-widest text-on-surface hover:bg-surface-container-highest transition-colors"
+      class="${secondaryButtonClass}"
       data-action="export-query-csv"
       type="button"
     >
       ${exporting ? "Exporting..." : "Export CSV"}
     </button>
     <button
-      class="bg-primary-container px-6 py-1.5 text-xs font-black uppercase tracking-tighter text-on-primary shadow-[0_0_15px_-5px_rgba(252,227,0,0.4)] transition-all hover:brightness-110"
+      class="toolbar-button toolbar-button--primary bg-primary-container px-4 py-2 font-headline text-xs font-bold uppercase tracking-widest text-on-primary clipped-corner"
       data-action="execute-query"
+      style="--clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);"
       type="button"
     >
       ${executing ? "RUNNING..." : "EXECUTE"}
@@ -99,9 +122,15 @@ export function renderQueryEditor({
           className: "flex-wrap",
         })}
       </div>
-      <div class="flex min-h-0 flex-1 flex-col">
-        ${renderEditorSurface({ query })}
-      </div>
+      ${
+        editorVisible
+          ? `
+            <div class="flex min-h-0 flex-1 flex-col">
+              ${renderEditorSurface({ query })}
+            </div>
+          `
+          : ""
+      }
     </div>
   `;
 }

package/frontend/js/components/queryHistoryPanel.js

@@ -150,11 +150,22 @@ export function renderQueryHistoryPanel({
   return `
     <aside class="query-history-panel border-l border-outline-variant/10 bg-surface-container-lowest">
       <div class="border-b border-outline-variant/10 px-4 py-4">
-        <div class="flex items-center gap-2">
-          <span class="material-symbols-outlined text-[18px] text-primary-container">history</span>
-          <span class="font-headline text-xs font-black uppercase tracking-[0.18em] text-primary-container">
-            Query History
-          </span>
+        <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">history</span>
+            <span class="font-headline text-xs font-black uppercase tracking-[0.18em] text-primary-container">
+              Query History
+            </span>
+          </div>
+          <button
+            class="query-history-icon-button"
+            data-action="toggle-query-history-panel"
+            data-next-value="false"
+            title="Hide query history"
+            type="button"
+          >
+            <span class="material-symbols-outlined text-[18px]">close</span>
+          </button>
         </div>
         <div class="mt-4">${renderQueryHistoryTabs(activeTab, total)}</div>
         <label class="mt-4 block">

package/frontend/js/components/sidebar.js

@@ -5,8 +5,10 @@ const sidebarItems = [
   { label: "Connections", href: "#/connections", key: "connections", icon: "database" },
   { label: "Overview", href: "#/overview", key: "overview", icon: "dashboard" },
   { label: "Data", href: "#/data", key: "data", icon: "table_rows" },
+  { label: "Charts", href: "#/charts", key: "charts", icon: "bar_chart" },
   { label: "SQL Editor", href: "#/editor", key: "editor", icon: "terminal" },
   { label: "Structure", href: "#/structure", key: "structure", icon: "account_tree" },
+  { label: "Table Designer", href: "#/table-designer", key: "tableDesigner", icon: "table_chart" },
   { label: "Settings", href: "#/settings", key: "settings", icon: "settings" },
 ];