sqlite-hub 0.9.0 → 0.9.3

package/frontend/js/components/rowEditorPanel.js

@@ -50,15 +50,7 @@ function renderReadonlyField(label, value) {
     <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3">
       <div class="flex flex-wrap items-center gap-2 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
         <span>${escapeHtml(displayLabel)}</span>
-        ${badges
-          .map(
-            (badge) => `
-              <span class="border border-outline-variant/20 bg-surface-container px-2 py-1 text-[9px] text-primary-container">
-                ${escapeHtml(badge)}
-              </span>
-            `
-          )
-          .join("")}
+        ${badges.map((badge) => renderFieldBadge(badge)).join("")}
       </div>
       ${
         jsonPreview
@@ -72,37 +64,68 @@ function renderReadonlyField(label, value) {
 function renderEditableField(field) {
   const badges = Array.isArray(field.badges) ? field.badges : [];
   const jsonPreview = getJsonPreview(field.value);
+  const inputType = field.inputType === "number" ? "number" : "text";
+  const numberStep = field.numberStep === "1" ? "1" : "any";
 
   return `
     <label class="block space-y-2">
       <span class="flex flex-wrap items-center gap-2 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
         <span>${escapeHtml(field.label ?? field.name)}</span>
-        ${badges
-          .map(
-            (badge) => `
-              <span class="border border-outline-variant/20 bg-surface-container px-2 py-1 text-[9px] text-primary-container">
-                ${escapeHtml(badge)}
-              </span>
-            `
-          )
-          .join("")}
+        ${badges.map((badge) => renderFieldBadge(badge)).join("")}
       </span>
       ${
         jsonPreview
           ? renderJsonViewer(jsonPreview, "JSON Preview")
           : ""
       }
-      <textarea
-        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 ${
-          jsonPreview ? "min-h-[14rem] font-mono leading-6" : "min-h-[56px]"
-        }"
-        name="field:${escapeHtml(field.name)}"
-        spellcheck="false"
-      >${escapeHtml(field.value ?? "")}</textarea>
+      ${
+        inputType === "number" && !jsonPreview
+          ? `
+              <input
+                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"
+                name="field:${escapeHtml(field.name)}"
+                step="${escapeHtml(numberStep)}"
+                type="number"
+                value="${escapeHtml(field.value ?? "")}"
+              />
+            `
+          : `
+              <textarea
+                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 ${
+                  jsonPreview ? "min-h-[14rem] font-mono leading-6" : "min-h-[56px]"
+                }"
+                name="field:${escapeHtml(field.name)}"
+                spellcheck="false"
+              >${escapeHtml(field.value ?? "")}</textarea>
+            `
+      }
     </label>
   `;
 }
 
+function getFieldBadgeClassName(tone) {
+  if (tone === "primary-key") {
+    return "border-primary-container/35 bg-primary-container/15 text-primary-container";
+  }
+
+  if (tone === "foreign-key") {
+    return "border-tertiary-fixed-dim/35 bg-tertiary-fixed-dim/15 text-tertiary-fixed-dim";
+  }
+
+  return "border-outline-variant/20 bg-surface-container text-on-surface-variant";
+}
+
+function renderFieldBadge(badge) {
+  const label = typeof badge === "object" ? badge.label : badge;
+  const tone = typeof badge === "object" ? badge.tone : "";
+
+  return `
+    <span class="border px-2 py-1 text-[9px] ${getFieldBadgeClassName(tone)}">
+      ${escapeHtml(label)}
+    </span>
+  `;
+}
+
 export function renderRowEditorPanel({
   title,
   sectionLabel = "Row Editor",

package/frontend/js/lib/queryChartOptions.js

@@ -5,6 +5,7 @@ import {
   formatQueryChartAxisValue,
   getAnalysisColumn,
   sortQueryChartRows,
+  sortQueryChartRowsByNumericColumn,
 } from "./queryCharts.js";
 
 const CHART_PALETTE = ["#FCE300", "#2DFAFF", "#FFB4AB", "#CDC7AB", "#7DD3FC", "#86EFAC"];
@@ -55,7 +56,10 @@ function buildLineLabelConfig(enabled) {
 }
 
 export function buildBarChartOption(chart, rows) {
-  const sortedRows = sortQueryChartRows(rows, chart.config.x_column, chart.config.sort_direction);
+  const sortedRows =
+    chart.config.sort_by === "y"
+      ? sortQueryChartRowsByNumericColumn(rows, chart.config.y_column, chart.config.sort_direction)
+      : sortQueryChartRows(rows, chart.config.x_column, chart.config.sort_direction);
 
   return {
     ...buildCommonOption(),

package/frontend/js/lib/queryCharts.js

@@ -312,7 +312,43 @@ function getFirstColumn(columns, predicate) {
 
 function getNextNumericColumn(analysis, excludedNames = []) {
   const excluded = new Set(excludedNames);
-  return getFirstColumn(analysis?.numberColumns, (column) => !excluded.has(column.name));
+  const candidates = (analysis?.numberColumns ?? []).filter((column) => !excluded.has(column.name));
+
+  if (!candidates.length) {
+    return null;
+  }
+
+  const scoredCandidates = candidates
+    .map((column, index) => ({
+      column,
+      index,
+      score: getNumericMeasureScore(column.name),
+    }))
+    .sort((left, right) => right.score - left.score || left.index - right.index);
+
+  return scoredCandidates[0]?.column ?? null;
+}
+
+function getNumericMeasureScore(columnName = "") {
+  const normalized = String(columnName ?? "")
+    .trim()
+    .toLowerCase();
+
+  let score = 0;
+
+  if (
+    /(count|total|sum|avg|average|amount|score|size|value|price|cost|rate|percent|pct|percentage|number)/.test(
+      normalized
+    )
+  ) {
+    score += 20;
+  }
+
+  if (/(^|_)(id|uuid|pk|key)$/.test(normalized) || /(^|_)id$/.test(normalized)) {
+    score -= 40;
+  }
+
+  return score;
 }
 
 function getPrimaryDimensionColumn(analysis) {
@@ -406,7 +442,8 @@ export function buildSuggestedChartConfig(chartType, analysis) {
         y_column: firstNumeric?.name ?? "",
         show_legend: true,
         show_labels: false,
-        sort_direction: "asc",
+        sort_by: "y",
+        sort_direction: "desc",
       };
   }
 }
@@ -524,6 +561,17 @@ export function sortQueryChartRows(rows, columnName, direction = "asc") {
   );
 }
 
+export function sortQueryChartRowsByNumericColumn(rows, columnName, direction = "asc") {
+  const multiplier = direction === "desc" ? -1 : 1;
+
+  return [...(rows ?? [])].sort((left, right) => {
+    const leftValue = coerceNumericChartValue(left?.[columnName]);
+    const rightValue = coerceNumericChartValue(right?.[columnName]);
+
+    return compareValues(leftValue, rightValue) * multiplier;
+  });
+}
+
 export function formatQueryChartAxisValue(value) {
   if (value === null || value === undefined) {
     return "NULL";

package/frontend/js/store.js

@@ -29,7 +29,9 @@ const DEFAULT_SETTINGS = {
     maxPageSize: 200,
     csvDelimiter: ',',
 };
+const DEFAULT_DATA_PAGE_SIZE = 50;
 const DATA_PAGE_SIZES = [25, 50, 100];
+const DATA_ROW_SIZE_STORAGE_KEY = 'data_row_size';
 const QUERY_HISTORY_PAGE_SIZE = 30;
 const QUERY_HISTORY_RUN_LIMIT = 8;
 const CHART_HEIGHT_PRESETS = new Set(['small', 'medium', 'large']);
@@ -46,6 +48,22 @@ let chartsLoadVersion = 0;
 let chartsDetailLoadVersion = 0;
 let mediaTaggingPreviewVersion = 0;
 
+function readStoredDataPageSize(fallback = DEFAULT_DATA_PAGE_SIZE) {
+    try {
+        return normalizeDataPageSize(globalThis.localStorage?.getItem(DATA_ROW_SIZE_STORAGE_KEY), fallback);
+    } catch {
+        return fallback;
+    }
+}
+
+function storeDataPageSize(pageSize) {
+    try {
+        globalThis.localStorage?.setItem(DATA_ROW_SIZE_STORAGE_KEY, String(pageSize));
+    } catch {
+        // Ignore unavailable browser storage; the in-memory setting still applies.
+    }
+}
+
 const state = {
     ready: false,
     route: { name: 'landing', path: '/', params: {} },
@@ -79,7 +97,7 @@ const state = {
         saving: false,
         deleting: false,
         page: 1,
-        pageSize: 50,
+        pageSize: readStoredDataPageSize(),
         sortColumn: null,
         sortDirection: null,
         searchQuery: '',
@@ -124,9 +142,11 @@ const state = {
         saveError: null,
     },
     charts: {
+        loaded: false,
         queries: [],
         loading: false,
         error: null,
+        historyTab: 'recent',
         selectedHistoryId: null,
         chartHeightPreset: 'medium',
         sqlExpanded: false,
@@ -194,6 +214,7 @@ const state = {
         dismissedIssueKeys: [],
         selectedTagKeys: [],
         workflowMediaDetailsVisible: true,
+        workflowMediaRotationDegrees: 0,
         skippedMediaKeys: [],
         tagFormValues: {},
     },
@@ -348,6 +369,35 @@ function requiresActiveDatabase(routeName) {
     ].includes(routeName);
 }
 
+function isMediaTaggingRouteName(routeName) {
+    return routeName === 'mediaTaggingSetup' || routeName === 'mediaTaggingQueue';
+}
+
+function getConnectionIdentity(connection) {
+    return connection?.id ?? connection?.path ?? null;
+}
+
+function hasLoadedMediaTaggingForActiveConnection() {
+    const activeConnectionId = getConnectionIdentity(state.connections.active);
+
+    return (
+        Boolean(activeConnectionId) &&
+        getConnectionIdentity(state.mediaTagging.connection) === activeConnectionId &&
+        !state.mediaTagging.loading &&
+        (state.mediaTagging.draft !== null || state.mediaTagging.suggestedConfig !== null)
+    );
+}
+
+function normalizeMediaTaggingRotationDegrees(value) {
+    const numericValue = Number(value);
+
+    if (!Number.isFinite(numericValue)) {
+        return 0;
+    }
+
+    return ((Math.round(numericValue / 90) * 90) % 360 + 360) % 360;
+}
+
 function normalizeDataPageSize(value, fallback = 50) {
     const numericValue = Number(value);
 
@@ -636,9 +686,11 @@ function resetQueryHistoryState({ preserveSearch = true } = {}) {
 function resetChartsState() {
     chartsLoadVersion += 1;
     chartsDetailLoadVersion += 1;
+    state.charts.loaded = false;
     state.charts.queries = [];
     state.charts.loading = false;
     state.charts.error = null;
+    state.charts.historyTab = 'recent';
     state.charts.selectedHistoryId = null;
     state.charts.chartHeightPreset = 'medium';
     state.charts.sqlExpanded = false;
@@ -659,6 +711,10 @@ function normalizeChartsHeightPreset(value) {
     return CHART_HEIGHT_PRESETS.has(normalizedValue) ? normalizedValue : 'medium';
 }
 
+function normalizeChartsHistoryTab(value) {
+    return ['recent', 'saved'].includes(value) ? value : 'recent';
+}
+
 function mergeQueryHistoryItemWithChartSummary(updatedItem, fallbackItem = null) {
     if (!updatedItem) {
         return updatedItem;
@@ -684,20 +740,24 @@ function syncQueryHistoryItem(updatedItem) {
         return;
     }
 
-    state.editor.history = state.editor.history.map(entry => (entry.id === updatedItem.id ? updatedItem : entry));
+    const updatedItemId = String(updatedItem.id);
+
+    state.editor.history = state.editor.history.map(entry => (String(entry.id) === updatedItemId ? updatedItem : entry));
 
-    if (state.editor.historyDetail?.id === updatedItem.id) {
+    if (String(state.editor.historyDetail?.id ?? '') === updatedItemId) {
         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);
+        state.charts.queries.find(entry => String(entry.id) === updatedItemId) ??
+        (String(state.charts.detail?.item?.id ?? '') === updatedItemId ? state.charts.detail.item : null);
     const mergedChartsItem = mergeQueryHistoryItemWithChartSummary(updatedItem, existingChartsEntry);
 
-    state.charts.queries = state.charts.queries.map(entry => (entry.id === updatedItem.id ? mergedChartsItem : entry));
+    state.charts.queries = state.charts.queries.map(entry =>
+        String(entry.id) === updatedItemId ? mergedChartsItem : entry,
+    );
 
-    if (state.charts.detail?.item?.id === updatedItem.id) {
+    if (String(state.charts.detail?.item?.id ?? '') === updatedItemId) {
         state.charts.detail = {
             ...state.charts.detail,
             item: mergeQueryHistoryItemWithChartSummary(updatedItem, state.charts.detail.item),
@@ -844,6 +904,7 @@ function setMissingDatabaseState() {
     state.mediaTagging.issues = [];
     state.mediaTagging.dismissedIssueKeys = [];
     state.mediaTagging.selectedTagKeys = [];
+    state.mediaTagging.workflowMediaRotationDegrees = 0;
     state.mediaTagging.skippedMediaKeys = [];
     state.mediaTagging.tagFormValues = {};
     state.mediaTagging.error = error;
@@ -1138,7 +1199,56 @@ async function loadChartsDetail(historyId) {
     }
 }
 
-async function loadCharts(version, route) {
+function getRequestedChartsHistoryId(route) {
+    const requestedHistoryId = Number(route.params?.historyId ?? null);
+
+    return Number.isInteger(requestedHistoryId) && requestedHistoryId > 0 ? requestedHistoryId : null;
+}
+
+function resolveLoadableChartsHistoryId(route) {
+    const requestedHistoryId = getRequestedChartsHistoryId(route);
+
+    if (!requestedHistoryId) {
+        return null;
+    }
+
+    return state.charts.queries.some(item => item.id === requestedHistoryId) ? requestedHistoryId : null;
+}
+
+function hasSettledChartsDetail(historyId) {
+    if (state.charts.detailLoading || state.charts.resultLoading) {
+        return false;
+    }
+
+    if (historyId === null) {
+        return (
+            state.charts.selectedHistoryId === null &&
+            !state.charts.detail &&
+            !state.charts.result &&
+            !state.charts.detailError &&
+            !state.charts.resultError
+        );
+    }
+
+    return (
+        state.charts.selectedHistoryId === historyId &&
+        (state.charts.detail?.item?.id === historyId || Boolean(state.charts.detailError)) &&
+        (Boolean(state.charts.result) || Boolean(state.charts.resultError))
+    );
+}
+
+async function loadCharts(version, route, options = {}) {
+    if (!options.force && state.charts.loaded) {
+        const historyId = resolveLoadableChartsHistoryId(route);
+
+        if (hasSettledChartsDetail(historyId)) {
+            return;
+        }
+
+        await loadChartsDetail(historyId);
+        return;
+    }
+
     state.charts.loading = true;
     state.charts.error = null;
     emitChange();
@@ -1151,6 +1261,7 @@ async function loadCharts(version, route) {
         }
 
         state.charts.queries = response.data ?? [];
+        state.charts.loaded = true;
         state.charts.error = null;
     } catch (error) {
         if (version !== routeLoadVersion) {
@@ -1158,6 +1269,7 @@ async function loadCharts(version, route) {
         }
 
         state.charts.queries = [];
+        state.charts.loaded = false;
         state.charts.error = normalizeError(error);
     } finally {
         if (version === routeLoadVersion) {
@@ -1170,11 +1282,7 @@ async function loadCharts(version, route) {
         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);
+    await loadChartsDetail(resolveLoadableChartsHistoryId(route));
 }
 
 async function loadOverview(version) {
@@ -1249,7 +1357,7 @@ async function resolvePendingDataBrowserRow(version) {
 
 async function loadDataTable(version) {
     const tableName = state.dataBrowser.selectedTable;
-    const pageSize = normalizeDataPageSize(state.dataBrowser.pageSize, 50);
+    const pageSize = normalizeDataPageSize(state.dataBrowser.pageSize, DEFAULT_DATA_PAGE_SIZE);
     const page = Math.max(1, Number(state.dataBrowser.page) || 1);
     const sortColumn = state.dataBrowser.sortColumn;
     const sortDirection = normalizeSortDirection(state.dataBrowser.sortDirection);
@@ -1579,6 +1687,9 @@ function applyMediaTaggingResponse(data, options = {}) {
     };
     state.mediaTagging.tags = data?.tags ?? [];
     state.mediaTagging.workflow = data?.workflow ?? null;
+    if (previousCurrentKey !== nextCurrentKey) {
+        state.mediaTagging.workflowMediaRotationDegrees = 0;
+    }
     state.mediaTagging.issues = data?.issues ?? [];
     state.mediaTagging.error = null;
     syncDismissedMediaTaggingIssues();
@@ -1650,6 +1761,7 @@ async function loadMediaTagging(version) {
         state.mediaTagging.issues = [];
         state.mediaTagging.dismissedIssueKeys = [];
         state.mediaTagging.selectedTagKeys = [];
+        state.mediaTagging.workflowMediaRotationDegrees = 0;
         state.mediaTagging.skippedMediaKeys = [];
         state.mediaTagging.tagFormValues = {};
         state.mediaTagging.removingTagKey = null;
@@ -1759,11 +1871,12 @@ function invalidateDatabaseCaches() {
     state.mediaTagging.issues = [];
     state.mediaTagging.dismissedIssueKeys = [];
     state.mediaTagging.selectedTagKeys = [];
+    state.mediaTagging.workflowMediaRotationDegrees = 0;
     state.mediaTagging.skippedMediaKeys = [];
     state.mediaTagging.tagFormValues = {};
 }
 
-async function loadRouteData(route) {
+async function loadRouteData(route, options = {}) {
     clearRouteSlices();
 
     if (requiresActiveDatabase(route.name) && !state.connections.active) {
@@ -1772,6 +1885,10 @@ async function loadRouteData(route) {
         return;
     }
 
+    if (!options.force && isMediaTaggingRouteName(route.name) && hasLoadedMediaTaggingForActiveConnection()) {
+        return;
+    }
+
     const version = ++routeLoadVersion;
 
     if (route.name === 'landing' || route.name === 'connections') {
@@ -1787,7 +1904,7 @@ async function loadRouteData(route) {
             await loadData(version, route);
             return;
         case 'charts':
-            await loadCharts(version, route);
+            await loadCharts(version, route, options);
             return;
         case 'editor':
         case 'editorResults':
@@ -2161,6 +2278,21 @@ export function setChartsHeightPreset(preset) {
     emitChange();
 }
 
+export function setChartsHistoryTab(tab) {
+    const nextTab = normalizeChartsHistoryTab(
+        String(tab ?? '')
+            .trim()
+            .toLowerCase(),
+    );
+
+    if (state.charts.historyTab === nextTab) {
+        return;
+    }
+
+    state.charts.historyTab = nextTab;
+    emitChange();
+}
+
 export function updateCurrentQueryChartDraftField(field, value) {
     if (state.modal?.kind !== 'chart-editor' || !state.modal.draft) {
         return;
@@ -2585,16 +2717,25 @@ export async function runQueryHistoryItem(historyId) {
     return executeCurrentQuery();
 }
 
-export async function toggleQueryHistorySavedState(historyId, nextValue) {
+export async function toggleQueryHistorySavedState(historyId, nextValue, options = {}) {
     try {
         const response = await api.toggleQueryHistorySaved(historyId, nextValue);
         syncQueryHistoryItem(response.data);
-        pushToast(response.message || 'Query save state updated.', 'muted');
-        await refreshQueryHistoryState();
+        if (options.toast !== false) {
+            pushToast(response.message || 'Query save state updated.', 'muted');
+        }
+        if (options.notify !== false) {
+            emitChange();
+        }
+        if (options.refresh !== false) {
+            await refreshQueryHistoryState();
+        }
         return true;
     } catch (error) {
         state.editor.historyDetailError = normalizeError(error);
-        emitChange();
+        if (options.notify !== false) {
+            emitChange();
+        }
         return false;
     }
 }
@@ -2878,6 +3019,20 @@ export function setMediaTaggingWorkflowMediaDetailsVisible(value, options = {})
     }
 }
 
+export function setMediaTaggingWorkflowMediaRotationDegrees(value, options = {}) {
+    const nextValue = normalizeMediaTaggingRotationDegrees(value);
+
+    if (state.mediaTagging.workflowMediaRotationDegrees === nextValue) {
+        return;
+    }
+
+    state.mediaTagging.workflowMediaRotationDegrees = nextValue;
+
+    if (options.notify !== false) {
+        emitChange();
+    }
+}
+
 export async function refreshMediaTaggingPreview() {
     return previewMediaTaggingDraft({
         keepSelectedTags: true,
@@ -3286,6 +3441,7 @@ export async function setDataPageSize(pageSize) {
     }
 
     state.dataBrowser.pageSize = normalizedPageSize;
+    storeDataPageSize(normalizedPageSize);
     state.dataBrowser.page = 1;
     clearDataBrowserRowSelectionState();
     state.dataBrowser.saveError = null;
@@ -3681,7 +3837,7 @@ export function sortEditorResultsByColumn(columnName) {
 }
 
 export async function refreshCurrentRoute() {
-    await loadRouteData(state.route);
+    await loadRouteData(state.route, { force: true });
 }
 
 export function showToast(message, tone = 'muted') {