sqlite-hub 0.6.0 → 0.7.0

package/frontend/js/store.js

@@ -9,6 +9,15 @@ import {
   updateTableDesignerColumnField,
   updateTableDesignerDraftField,
 } from "./utils/tableDesigner.js";
+import {
+  analyzeQueryChartResult,
+  buildDefaultQueryChartName,
+  buildQueryChartResultColumns,
+  buildSuggestedChartConfig,
+  resolveUniqueQueryChartName,
+  suggestQueryChartType,
+  validateQueryChartConfig,
+} from "./lib/queryCharts.js";
 
 const listeners = new Set();
 const DEFAULT_SETTINGS = {
@@ -19,6 +28,7 @@ const DEFAULT_SETTINGS = {
 const DATA_PAGE_SIZES = [25, 50, 100];
 const QUERY_HISTORY_PAGE_SIZE = 30;
 const QUERY_HISTORY_RUN_LIMIT = 8;
+const CHART_HEIGHT_PRESETS = new Set(["small", "medium", "large"]);
 const MISSING_DATABASE_ERROR = {
   code: "ACTIVE_DATABASE_REQUIRED",
   message: "No active SQLite database selected.",
@@ -28,6 +38,8 @@ let routeLoadVersion = 0;
 let queryHistoryLoadVersion = 0;
 let queryHistoryDetailLoadVersion = 0;
 let queryHistorySearchTimer = null;
+let chartsLoadVersion = 0;
+let chartsDetailLoadVersion = 0;
 
 const state = {
   ready: false,
@@ -55,6 +67,7 @@ const state = {
   dataBrowser: {
     tables: [],
     selectedTable: null,
+    tablesVisible: true,
     table: null,
     loading: false,
     tableLoading: false,
@@ -73,7 +86,9 @@ const state = {
   },
   editor: {
     sqlText: "",
+    editorPanelVisible: true,
     history: [],
+    historyPanelVisible: true,
     historyLoading: false,
     historyLoadingMore: false,
     historyError: null,
@@ -101,6 +116,21 @@ const state = {
     deleting: false,
     saveError: null,
   },
+  charts: {
+    queries: [],
+    loading: false,
+    error: null,
+    selectedHistoryId: null,
+    chartHeightPreset: "medium",
+    sqlExpanded: false,
+    resultsVisible: true,
+    detail: null,
+    detailLoading: false,
+    detailError: null,
+    result: null,
+    resultLoading: false,
+    resultError: null,
+  },
   tableDesigner: {
     tables: [],
     selectedTableName: null,
@@ -172,6 +202,7 @@ function requiresActiveDatabase(routeName) {
     "data",
     "editor",
     "editorResults",
+    "charts",
     "structure",
     "tableDesigner",
   ].includes(routeName);
@@ -375,6 +406,52 @@ function resetQueryHistoryState({ preserveSearch = true } = {}) {
   }
 }
 
+function resetChartsState() {
+  chartsLoadVersion += 1;
+  chartsDetailLoadVersion += 1;
+  state.charts.queries = [];
+  state.charts.loading = false;
+  state.charts.error = null;
+  state.charts.selectedHistoryId = null;
+  state.charts.chartHeightPreset = "medium";
+  state.charts.sqlExpanded = false;
+  state.charts.resultsVisible = true;
+  state.charts.detail = null;
+  state.charts.detailLoading = false;
+  state.charts.detailError = null;
+  state.charts.result = null;
+  state.charts.resultLoading = false;
+  state.charts.resultError = null;
+}
+
+function normalizeChartsHeightPreset(value) {
+  const normalizedValue = String(value ?? "")
+    .trim()
+    .toLowerCase();
+
+  return CHART_HEIGHT_PRESETS.has(normalizedValue) ? normalizedValue : "medium";
+}
+
+function mergeQueryHistoryItemWithChartSummary(updatedItem, fallbackItem = null) {
+  if (!updatedItem) {
+    return updatedItem;
+  }
+
+  return {
+    ...(fallbackItem ?? {}),
+    ...updatedItem,
+    chartCount:
+      updatedItem.chartCount !== undefined
+        ? Number(updatedItem.chartCount ?? 0)
+        : Number(fallbackItem?.chartCount ?? 0),
+    chartTypes: Array.isArray(updatedItem.chartTypes)
+      ? [...updatedItem.chartTypes]
+      : Array.isArray(fallbackItem?.chartTypes)
+        ? [...fallbackItem.chartTypes]
+        : [],
+  };
+}
+
 function syncQueryHistoryItem(updatedItem) {
   if (!updatedItem) {
     return;
@@ -387,6 +464,61 @@ function syncQueryHistoryItem(updatedItem) {
   if (state.editor.historyDetail?.id === updatedItem.id) {
     state.editor.historyDetail = updatedItem;
   }
+
+  const existingChartsEntry =
+    state.charts.queries.find((entry) => entry.id === updatedItem.id) ??
+    (state.charts.detail?.item?.id === updatedItem.id ? state.charts.detail.item : null);
+  const mergedChartsItem = mergeQueryHistoryItemWithChartSummary(updatedItem, existingChartsEntry);
+
+  state.charts.queries = state.charts.queries.map((entry) =>
+    entry.id === updatedItem.id ? mergedChartsItem : entry
+  );
+
+  if (state.charts.detail?.item?.id === updatedItem.id) {
+    state.charts.detail = {
+      ...state.charts.detail,
+      item: mergeQueryHistoryItemWithChartSummary(updatedItem, state.charts.detail.item),
+    };
+  }
+}
+
+function syncChartsQuerySummaryForHistory(historyId) {
+  const numericId = Number(historyId);
+
+  if (!Number.isInteger(numericId) || numericId < 1 || state.charts.detail?.item?.id !== numericId) {
+    return;
+  }
+
+  const charts = state.charts.detail?.charts ?? [];
+  const chartTypes = [...new Set(
+    charts
+      .map((chart) =>
+        String(chart?.chartType ?? "")
+          .trim()
+          .toLowerCase()
+      )
+      .filter(Boolean)
+  )];
+  const chartCount = charts.length;
+
+  state.charts.queries = state.charts.queries.map((entry) =>
+    entry.id === numericId
+      ? {
+          ...entry,
+          chartCount,
+          chartTypes,
+        }
+      : entry
+  );
+
+  state.charts.detail = {
+    ...state.charts.detail,
+    item: {
+      ...state.charts.detail.item,
+      chartCount,
+      chartTypes,
+    },
+  };
 }
 
 function resolveQueryHistorySql(historyId) {
@@ -396,6 +528,10 @@ function resolveQueryHistorySql(historyId) {
     return state.editor.historyDetail.rawSql;
   }
 
+  if (String(state.charts.detail?.item?.id ?? "") === historyIdAsString) {
+    return state.charts.detail.item.rawSql;
+  }
+
   return findQueryHistoryItem(historyId)?.rawSql ?? null;
 }
 
@@ -403,6 +539,9 @@ function clearRouteSlices() {
   state.overview.error = null;
   state.dataBrowser.error = null;
   state.dataBrowser.saveError = null;
+  state.charts.error = null;
+  state.charts.detailError = null;
+  state.charts.resultError = null;
   state.tableDesigner.error = null;
   state.tableDesigner.saveError = null;
   state.structure.error = null;
@@ -446,6 +585,9 @@ function setMissingDatabaseState() {
   state.tableDesigner.error = error;
   state.tableDesigner.saveError = null;
 
+  resetChartsState();
+  state.charts.error = error;
+
   resetQueryHistoryState({ preserveSearch: false });
 }
 
@@ -658,6 +800,114 @@ async function refreshQueryHistoryState({ append = false } = {}) {
   }
 }
 
+async function loadChartsDetail(historyId) {
+  const numericId = Number(historyId);
+  const requestVersion = ++chartsDetailLoadVersion;
+
+  if (!Number.isInteger(numericId) || numericId < 1) {
+    state.charts.selectedHistoryId = null;
+    state.charts.sqlExpanded = false;
+    state.charts.resultsVisible = true;
+    state.charts.detail = null;
+    state.charts.detailLoading = false;
+    state.charts.detailError = null;
+    state.charts.result = null;
+    state.charts.resultLoading = false;
+    state.charts.resultError = null;
+    emitChange();
+    return;
+  }
+
+  state.charts.selectedHistoryId = numericId;
+  state.charts.sqlExpanded = false;
+  state.charts.resultsVisible = true;
+  state.charts.detail = null;
+  state.charts.detailLoading = true;
+  state.charts.detailError = null;
+  state.charts.result = null;
+  state.charts.resultLoading = true;
+  state.charts.resultError = null;
+  emitChange();
+
+  const [detailResponse, resultResponse] = await Promise.allSettled([
+    api.getChartsQueryHistoryDetail(numericId),
+    api.executeChartsQueryHistory(numericId),
+  ]);
+
+  if (
+    requestVersion !== chartsDetailLoadVersion ||
+    state.charts.selectedHistoryId !== numericId
+  ) {
+    return;
+  }
+
+  if (detailResponse.status === "fulfilled") {
+    state.charts.detail = detailResponse.value.data ?? null;
+    state.charts.detailError = null;
+    if (detailResponse.value.data?.item) {
+      syncQueryHistoryItem(detailResponse.value.data.item);
+      syncChartsQuerySummaryForHistory(detailResponse.value.data.item.id);
+    }
+  } else {
+    state.charts.detail = null;
+    state.charts.detailError = normalizeError(detailResponse.reason);
+  }
+
+  if (resultResponse.status === "fulfilled") {
+    state.charts.result = resultResponse.value.data ?? null;
+    state.charts.resultError = null;
+  } else {
+    state.charts.result = null;
+    state.charts.resultError = normalizeError(resultResponse.reason);
+  }
+
+  if (requestVersion === chartsDetailLoadVersion) {
+    state.charts.detailLoading = false;
+    state.charts.resultLoading = false;
+    emitChange();
+  }
+}
+
+async function loadCharts(version, route) {
+  state.charts.loading = true;
+  state.charts.error = null;
+  emitChange();
+
+  try {
+    const response = await api.getChartsQueryHistory();
+
+    if (version !== routeLoadVersion) {
+      return;
+    }
+
+    state.charts.queries = response.data ?? [];
+    state.charts.error = null;
+  } catch (error) {
+    if (version !== routeLoadVersion) {
+      return;
+    }
+
+    state.charts.queries = [];
+    state.charts.error = normalizeError(error);
+  } finally {
+    if (version === routeLoadVersion) {
+      state.charts.loading = false;
+      emitChange();
+    }
+  }
+
+  if (version !== routeLoadVersion) {
+    return;
+  }
+
+  const requestedHistoryId = Number(route.params?.historyId ?? null);
+  const canLoadRequestedHistory =
+    Number.isInteger(requestedHistoryId) &&
+    state.charts.queries.some((item) => item.id === requestedHistoryId);
+
+  await loadChartsDetail(canLoadRequestedHistory ? requestedHistoryId : null);
+}
+
 async function loadOverview(version) {
   state.overview.loading = true;
   state.overview.error = null;
@@ -1004,6 +1254,7 @@ function invalidateDatabaseCaches() {
   state.tableDesigner.supportedTypes = [];
   state.tableDesigner.error = null;
   state.tableDesigner.saveError = null;
+  resetChartsState();
   state.structure.data = null;
   state.structure.detail = null;
 }
@@ -1031,6 +1282,9 @@ async function loadRouteData(route) {
     case "data":
       await loadData(version, route);
       return;
+    case "charts":
+      await loadCharts(version, route);
+      return;
     case "editor":
     case "editorResults":
       await refreshQueryHistoryState();
@@ -1083,6 +1337,94 @@ function closeModalInternal() {
   emitChange();
 }
 
+function getChartsResultAnalysis(snapshot = state) {
+  return snapshot.charts.result ? analyzeQueryChartResult(snapshot.charts.result) : null;
+}
+
+function buildQueryChartDraft(mode, chart = null) {
+  const queryItem = state.charts.detail?.item ?? null;
+  const analysis = getChartsResultAnalysis();
+
+  if (!queryItem || !analysis) {
+    return null;
+  }
+
+  const existingCharts = state.charts.detail?.charts ?? [];
+
+  if (mode === "edit" && chart) {
+    return {
+      mode,
+      chartId: chart.id,
+      queryHistoryId: chart.queryHistoryId,
+      chartType: chart.chartType,
+      name: chart.name,
+      nameTouched: true,
+      config: structuredClone(chart.config),
+      tableVisible: chart.tableVisible,
+      resultColumns: buildQueryChartResultColumns(analysis),
+    };
+  }
+
+  const chartType = suggestQueryChartType(analysis);
+  const name = resolveUniqueQueryChartName(
+    buildDefaultQueryChartName(chartType, queryItem.displayTitle),
+    existingCharts
+  );
+
+  return {
+    mode: "create",
+    chartId: null,
+    queryHistoryId: queryItem.id,
+    chartType,
+    name,
+    nameTouched: false,
+    config: buildSuggestedChartConfig(chartType, analysis),
+    tableVisible: true,
+    resultColumns: buildQueryChartResultColumns(analysis),
+  };
+}
+
+function upsertChartDetailItem(updatedChart) {
+  if (!updatedChart || state.charts.detail?.item?.id !== updatedChart.queryHistoryId) {
+    return;
+  }
+
+  const nextCharts = [...(state.charts.detail?.charts ?? [])];
+  const existingIndex = nextCharts.findIndex((chart) => chart.id === updatedChart.id);
+
+  if (existingIndex >= 0) {
+    nextCharts.splice(existingIndex, 1, updatedChart);
+  } else {
+    nextCharts.push(updatedChart);
+  }
+
+  nextCharts.sort((left, right) => {
+    const leftTime = Date.parse(left.createdAt ?? "") || 0;
+    const rightTime = Date.parse(right.createdAt ?? "") || 0;
+    return leftTime - rightTime || left.id - right.id;
+  });
+
+  state.charts.detail = {
+    ...state.charts.detail,
+    charts: nextCharts,
+  };
+
+  syncChartsQuerySummaryForHistory(updatedChart.queryHistoryId);
+}
+
+function removeChartDetailItem(chartId) {
+  if (!state.charts.detail) {
+    return;
+  }
+
+  state.charts.detail = {
+    ...state.charts.detail,
+    charts: (state.charts.detail.charts ?? []).filter((chart) => chart.id !== Number(chartId)),
+  };
+
+  syncChartsQuerySummaryForHistory(state.charts.detail.item?.id);
+}
+
 export function getState() {
   return clone(state);
 }
@@ -1205,10 +1547,147 @@ export function openDeleteEditorRowModal(rowIndex) {
   emitChange();
 }
 
+export function openCreateQueryChartModal() {
+  const draft = buildQueryChartDraft("create");
+
+  if (!state.charts.detail?.item || !state.charts.result) {
+    pushToast("The selected query has no chartable result set yet.", "alert");
+    return;
+  }
+
+  if (!draft) {
+    pushToast("The chart editor could not be opened for this query.", "alert");
+    return;
+  }
+
+  state.modal = {
+    kind: "chart-editor",
+    error: null,
+    submitting: false,
+    draft,
+  };
+  emitChange();
+}
+
+export function openEditQueryChartModal(chartId) {
+  if (!state.charts.result) {
+    pushToast("Reload the query result before editing this chart.", "alert");
+    return;
+  }
+
+  const chart = state.charts.detail?.charts?.find((entry) => entry.id === Number(chartId)) ?? null;
+  const draft = chart ? buildQueryChartDraft("edit", chart) : null;
+
+  if (!chart || !draft) {
+    pushToast("The selected chart could not be loaded.", "alert");
+    return;
+  }
+
+  state.modal = {
+    kind: "chart-editor",
+    error: null,
+    submitting: false,
+    draft,
+  };
+  emitChange();
+}
+
+export function openDeleteQueryChartModal(chartId) {
+  const chart = state.charts.detail?.charts?.find((entry) => entry.id === Number(chartId)) ?? null;
+
+  if (!chart) {
+    pushToast("The selected chart could not be loaded.", "alert");
+    return;
+  }
+
+  state.modal = {
+    kind: "delete-chart",
+    chartId: chart.id,
+    chartName: chart.name,
+    error: null,
+    submitting: false,
+  };
+  emitChange();
+}
+
 export function closeModal() {
   closeModalInternal();
 }
 
+export function toggleChartsSqlPanel() {
+  state.charts.sqlExpanded = !state.charts.sqlExpanded;
+  emitChange();
+}
+
+export function toggleChartsResultsPanel() {
+  state.charts.resultsVisible = !state.charts.resultsVisible;
+  emitChange();
+}
+
+export function setChartsHeightPreset(preset) {
+  const nextPreset = normalizeChartsHeightPreset(preset);
+
+  if (state.charts.chartHeightPreset === nextPreset) {
+    return;
+  }
+
+  state.charts.chartHeightPreset = nextPreset;
+  emitChange();
+}
+
+export function updateCurrentQueryChartDraftField(field, value) {
+  if (state.modal?.kind !== "chart-editor" || !state.modal.draft) {
+    return;
+  }
+
+  state.modal.error = null;
+
+  if (field === "name") {
+    state.modal.draft.name = String(value ?? "");
+    state.modal.draft.nameTouched = true;
+    emitChange();
+    return;
+  }
+
+  if (field === "chartType") {
+    const nextType = String(value ?? "").trim().toLowerCase();
+    const analysis = getChartsResultAnalysis();
+
+    state.modal.draft.chartType = nextType;
+    state.modal.draft.config = buildSuggestedChartConfig(nextType, analysis);
+
+    if (!state.modal.draft.nameTouched) {
+      const existingCharts = state.charts.detail?.charts ?? [];
+      state.modal.draft.name = resolveUniqueQueryChartName(
+        buildDefaultQueryChartName(nextType, state.charts.detail?.item?.displayTitle),
+        existingCharts,
+        state.modal.draft.chartId
+      );
+    }
+
+    emitChange();
+    return;
+  }
+
+  if (field === "tableVisible") {
+    state.modal.draft.tableVisible = Boolean(value);
+    emitChange();
+  }
+}
+
+export function updateCurrentQueryChartDraftConfigField(field, value) {
+  if (state.modal?.kind !== "chart-editor" || !state.modal.draft) {
+    return;
+  }
+
+  state.modal.error = null;
+  state.modal.draft.config = {
+    ...state.modal.draft.config,
+    [field]: value,
+  };
+  emitChange();
+}
+
 export function dismissToast(id) {
   const nextToasts = state.toasts.filter((toast) => toast.id !== id);
 
@@ -1408,6 +1887,18 @@ export function clearEditorResults() {
   emitChange();
 }
 
+export function setEditorPanelVisibility(visible) {
+  const nextValue =
+    typeof visible === "boolean" ? visible : !Boolean(state.editor.editorPanelVisible);
+
+  if (state.editor.editorPanelVisible === nextValue) {
+    return;
+  }
+
+  state.editor.editorPanelVisible = nextValue;
+  emitChange();
+}
+
 export function setEditorTab(tab) {
   state.editor.activeTab = tab;
   emitChange();
@@ -1478,6 +1969,18 @@ export async function setQueryHistoryTab(tab) {
   await refreshQueryHistoryState();
 }
 
+export function setQueryHistoryPanelVisibility(visible) {
+  const nextValue =
+    typeof visible === "boolean" ? visible : !Boolean(state.editor.historyPanelVisible);
+
+  if (state.editor.historyPanelVisible === nextValue) {
+    return;
+  }
+
+  state.editor.historyPanelVisible = nextValue;
+  emitChange();
+}
+
 export function setQueryHistorySearchInput(query) {
   state.editor.historySearchInput = String(query ?? "");
   emitChange();
@@ -1799,6 +2302,11 @@ export function setDataSearchColumn(columnName) {
   emitChange();
 }
 
+export function toggleDataTablesPanel() {
+  state.dataBrowser.tablesVisible = state.dataBrowser.tablesVisible === false;
+  emitChange();
+}
+
 export async function setDataPage(page) {
   const numericPage = Number(page);
 
@@ -2061,6 +2569,116 @@ export async function submitDeleteRowConfirmation() {
   return result;
 }
 
+export async function saveCurrentQueryChartDraft() {
+  if (state.modal?.kind !== "chart-editor" || !state.modal.draft) {
+    return null;
+  }
+
+  const analysis = getChartsResultAnalysis();
+
+  if (!analysis) {
+    state.modal.error = {
+      code: "RESULT_SET_REQUIRED",
+      message: "Reload the query result before saving a chart.",
+    };
+    emitChange();
+    return null;
+  }
+
+  const validation = validateQueryChartConfig(
+    state.modal.draft.chartType,
+    state.modal.draft.config,
+    analysis
+  );
+
+  if (!validation.valid) {
+    state.modal.error = {
+      code: "VALIDATION_ERROR",
+      message: validation.errors.join(" "),
+    };
+    emitChange();
+    return null;
+  }
+
+  startModalSubmission();
+  const draftMode = state.modal.draft.mode;
+
+  const payload = {
+    queryHistoryId: state.modal.draft.queryHistoryId,
+    name: state.modal.draft.name,
+    chartType: state.modal.draft.chartType,
+    config: state.modal.draft.config,
+    resultColumns: buildQueryChartResultColumns(analysis),
+    tableVisible: state.modal.draft.tableVisible,
+  };
+
+  try {
+    const response =
+      state.modal.draft.mode === "edit"
+        ? await api.updateQueryHistoryChart(state.modal.draft.chartId, payload)
+        : await api.createQueryHistoryChart(payload);
+    const chart = response.data ?? null;
+
+    if (chart) {
+      upsertChartDetailItem(chart);
+      closeModalInternal();
+      pushToast(response.message || (draftMode === "edit" ? "Chart updated." : "Chart created."), "success");
+      return chart;
+    }
+
+    closeModalInternal();
+    return null;
+  } catch (error) {
+    withModalError(error);
+    return null;
+  }
+}
+
+export async function toggleQueryChartTableVisibility(chartId) {
+  const chart = state.charts.detail?.charts?.find((entry) => entry.id === Number(chartId)) ?? null;
+
+  if (!chart) {
+    pushToast("The selected chart could not be loaded.", "alert");
+    return null;
+  }
+
+  try {
+    const response = await api.updateQueryHistoryChart(chart.id, {
+      tableVisible: !chart.tableVisible,
+    });
+
+    upsertChartDetailItem(response.data ?? null);
+    emitChange();
+    return response.data ?? null;
+  } catch (error) {
+    pushToast(normalizeError(error)?.message || "Chart update failed.", "alert");
+    return null;
+  }
+}
+
+export async function deleteQueryChart(chartId) {
+  try {
+    const response = await api.deleteQueryHistoryChart(chartId);
+    removeChartDetailItem(chartId);
+    closeModalInternal();
+    pushToast(response.message || "Chart deleted.", "muted");
+    emitChange();
+    return true;
+  } catch (error) {
+    withModalError(error);
+    return false;
+  }
+}
+
+export async function submitDeleteChartConfirmation() {
+  if (state.modal?.kind !== "delete-chart") {
+    return false;
+  }
+
+  startModalSubmission();
+  return deleteQueryChart(state.modal.chartId);
+}
+
 export async function exportCurrentQueryCsv() {
   state.editor.exportLoading = true;
   emitChange();