sqlite-hub 0.6.0 → 0.7.0

package/frontend/js/components/queryEditor.js

@@ -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,6 +5,7 @@ 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" },

package/frontend/js/components/tableDesignerSidebar.js

@@ -1,28 +1,29 @@
-import { escapeHtml, formatNumber } from "../utils/format.js";
+import { escapeHtml, formatNumber } from '../utils/format.js';
 
 function getFilteredTables(tables, searchQuery) {
-  const normalizedSearch = String(searchQuery ?? "").trim().toLowerCase();
+    const normalizedSearch = String(searchQuery ?? '')
+        .trim()
+        .toLowerCase();
 
-  if (!normalizedSearch) {
-    return tables;
-  }
+    if (!normalizedSearch) {
+        return tables;
+    }
 
-  return tables.filter((table) => table.name.toLowerCase().includes(normalizedSearch));
+    return tables.filter(table => table.name.toLowerCase().includes(normalizedSearch));
 }
 
 export function renderTableDesignerSidebar(state) {
-  const tables = state.tableDesigner.tables ?? [];
-  const filteredTables = getFilteredTables(tables, state.tableDesigner.searchQuery);
-  const isNewDraft = state.tableDesigner.draft?.mode === "create";
+    const tables = state.tableDesigner.tables ?? [];
+    const filteredTables = getFilteredTables(tables, state.tableDesigner.searchQuery);
+    const isNewDraft = state.tableDesigner.draft?.mode === 'create';
 
-  return `
+    return `
     <aside class="table-designer-sidebar">
       <div class="table-designer-sidebar__header">
         <div>
-          <div class="table-designer-sidebar__eyebrow">Schema Workspace</div>
-          <div class="table-designer-sidebar__title">Table Designer</div>
+          <div class="table-designer-sidebar__eyebrow">Table Designer</div>
           <div class="table-designer-sidebar__meta">
-            ${escapeHtml(formatNumber(tables.length))} table${tables.length === 1 ? "" : "s"}
+            ${escapeHtml(formatNumber(tables.length))} table${tables.length === 1 ? '' : 's'}
           </div>
         </div>
         <div class="table-designer-sidebar__header-actions">
@@ -58,23 +59,23 @@ export function renderTableDesignerSidebar(state) {
           placeholder="Search tables..."
           spellcheck="false"
           type="search"
-          value="${escapeHtml(state.tableDesigner.searchQuery ?? "")}"
+          value="${escapeHtml(state.tableDesigner.searchQuery ?? '')}"
         />
       </label>
 
       <div class="table-designer-sidebar__list custom-scrollbar">
         ${
-          state.tableDesigner.loading && !tables.length
-            ? `
+            state.tableDesigner.loading && !tables.length
+                ? `
                 <div class="table-designer-sidebar__empty">
                   <span class="material-symbols-outlined mb-2 text-3xl">progress_activity</span>
                   <div>Loading SQLite schema...</div>
                 </div>
               `
-            : isNewDraft
-              ? `
+                : isNewDraft
+                  ? `
                   <button
-                    class="table-designer-sidebar__item is-active"
+                    class="table-designer-sidebar__item is-active w-full border border-primary-container/30 bg-surface-container-high px-4 py-3 text-left transition-colors"
                     data-action="navigate"
                     data-to="/table-designer/new"
                     type="button"
@@ -83,42 +84,44 @@ export function renderTableDesignerSidebar(state) {
                     <div class="table-designer-sidebar__item-meta">unsaved schema</div>
                   </button>
                 `
-              : ""
+                  : ''
         }
         ${
-          !filteredTables.length && !state.tableDesigner.loading
-            ? `
+            !filteredTables.length && !state.tableDesigner.loading
+                ? `
                 <div class="table-designer-sidebar__empty">
                   ${
-                    tables.length
-                      ? "No tables match the current search."
-                      : "No tables found. Create the first table in this database."
+                      tables.length
+                          ? 'No tables match the current search.'
+                          : 'No tables found. Create the first table in this database.'
                   }
                 </div>
               `
-            : filteredTables
-                .map(
-                  (table) => `
+                : filteredTables
+                      .map(
+                          table => `
                     <button
-                      class="table-designer-sidebar__item ${
-                        !isNewDraft && table.name === state.tableDesigner.selectedTableName
-                          ? "is-active"
-                          : ""
+                      class="table-designer-sidebar__item w-full border px-4 py-3 text-left transition-colors ${
+                          !isNewDraft && table.name === state.tableDesigner.selectedTableName
+                              ? 'is-active border-primary-container/30 bg-surface-container-high'
+                              : 'border-outline-variant/10 bg-surface-container-lowest hover:bg-surface-container-high'
                       }"
                       data-action="navigate"
                       data-to="/table-designer/${encodeURIComponent(table.name)}"
                       type="button"
                     >
-                      <div class="table-designer-sidebar__item-name">${escapeHtml(table.name)}</div>
-                      <div class="table-designer-sidebar__item-meta">
+                      <div class="table-designer-sidebar__item-name ${
+                          !isNewDraft && table.name === state.tableDesigner.selectedTableName ? 'is-active' : ''
+                      }">${escapeHtml(table.name)}</div>
+                      <div class="mt-1 truncate text-[10px] uppercase tracking-[0.16em] text-on-surface-variant/45">
                         ${escapeHtml(formatNumber(table.columnCount ?? 0))} column${
-                          Number(table.columnCount ?? 0) === 1 ? "" : "s"
+                            Number(table.columnCount ?? 0) === 1 ? '' : 's'
                         }
                       </div>
                     </button>
-                  `
-                )
-                .join("")
+                  `,
+                      )
+                      .join('')
         }
       </div>
     </aside>

package/frontend/js/lib/queryChartOptions.js

@@ -0,0 +1,283 @@
+import {
+  coerceDatetimeChartValue,
+  coerceNumericChartValue,
+  formatTimeOfDayAxisValue,
+  formatQueryChartAxisValue,
+  getAnalysisColumn,
+  sortQueryChartRows,
+} from "./queryCharts.js";
+
+const CHART_PALETTE = ["#FCE300", "#2DFAFF", "#FFB4AB", "#CDC7AB", "#7DD3FC", "#86EFAC"];
+
+function buildCommonOption() {
+  return {
+    animationDuration: 220,
+    backgroundColor: "transparent",
+    color: CHART_PALETTE,
+    textStyle: {
+      color: "#e5e2e1",
+      fontFamily: "Inter, sans-serif",
+    },
+    tooltip: {
+      backgroundColor: "#201f1f",
+      borderColor: "rgba(252, 227, 0, 0.14)",
+      textStyle: {
+        color: "#e5e2e1",
+      },
+    },
+    grid: {
+      left: 48,
+      right: 24,
+      top: 36,
+      bottom: 48,
+      containLabel: true,
+    },
+  };
+}
+
+function buildAxisLabel(color = "#cdc7ab") {
+  return {
+    color,
+    fontFamily: "Roboto Mono, monospace",
+    fontSize: 11,
+  };
+}
+
+function buildLineLabelConfig(enabled) {
+  return enabled
+    ? {
+        show: true,
+        color: "#e5e2e1",
+        fontFamily: "Roboto Mono, monospace",
+        fontSize: 10,
+      }
+    : { show: false };
+}
+
+export function buildBarChartOption(chart, rows) {
+  const sortedRows = sortQueryChartRows(rows, chart.config.x_column, chart.config.sort_direction);
+
+  return {
+    ...buildCommonOption(),
+    legend: {
+      show: chart.config.show_legend,
+      textStyle: { color: "#cdc7ab" },
+    },
+    xAxis: {
+      type: "category",
+      data: sortedRows.map((row) => formatQueryChartAxisValue(row[chart.config.x_column])),
+      axisLabel: buildAxisLabel(),
+      axisLine: { lineStyle: { color: "rgba(205, 199, 171, 0.28)" } },
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: buildAxisLabel(),
+      splitLine: { lineStyle: { color: "rgba(205, 199, 171, 0.12)" } },
+    },
+    series: [
+      {
+        name: chart.name,
+        type: "bar",
+        label: buildLineLabelConfig(chart.config.show_labels),
+        emphasis: { focus: "series" },
+        data: sortedRows.map((row) => coerceNumericChartValue(row[chart.config.y_column]) ?? 0),
+      },
+    ],
+  };
+}
+
+export function buildLineChartOption(chart, rows) {
+  const sortedRows = sortQueryChartRows(rows, chart.config.x_column, chart.config.sort_direction);
+
+  return {
+    ...buildCommonOption(),
+    legend: {
+      show: chart.config.show_legend,
+      textStyle: { color: "#cdc7ab" },
+    },
+    xAxis: {
+      type: "category",
+      data: sortedRows.map((row) => formatQueryChartAxisValue(row[chart.config.x_column])),
+      axisLabel: buildAxisLabel(),
+      axisLine: { lineStyle: { color: "rgba(205, 199, 171, 0.28)" } },
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: buildAxisLabel(),
+      splitLine: { lineStyle: { color: "rgba(205, 199, 171, 0.12)" } },
+    },
+    series: [
+      {
+        name: chart.name,
+        type: "line",
+        smooth: chart.config.smooth,
+        showSymbol: sortedRows.length < 60,
+        symbolSize: 8,
+        lineStyle: {
+          width: 3,
+        },
+        label: buildLineLabelConfig(chart.config.show_labels),
+        data: sortedRows.map((row) => coerceNumericChartValue(row[chart.config.y_column]) ?? 0),
+      },
+    ],
+  };
+}
+
+export function buildPieChartOption(chart, rows) {
+  return {
+    ...buildCommonOption(),
+    legend: {
+      show: chart.config.show_legend,
+      orient: "vertical",
+      right: 0,
+      top: "middle",
+      textStyle: { color: "#cdc7ab" },
+    },
+    series: [
+      {
+        name: chart.name,
+        type: "pie",
+        radius: chart.config.donut ? ["42%", "70%"] : "70%",
+        center: chart.config.show_legend ? ["36%", "50%"] : ["50%", "50%"],
+        label: {
+          show: chart.config.show_labels,
+          color: "#e5e2e1",
+          formatter: "{b}: {c}",
+          fontSize: 11,
+        },
+        data: rows.map((row) => ({
+          name: formatQueryChartAxisValue(row[chart.config.label_column]),
+          value: coerceNumericChartValue(row[chart.config.value_column]) ?? 0,
+        })),
+      },
+    ],
+  };
+}
+
+function resolveScatterAxisType(column) {
+  if (column?.type === "datetime") {
+    return column.datetimeKind === "time" ? "time-of-day" : "time";
+  }
+
+  return "value";
+}
+
+function buildScatterAxisConfig(column, columnName) {
+  const axisType = resolveScatterAxisType(column);
+  const baseConfig = {
+    axisLabel: buildAxisLabel(),
+    splitLine: { lineStyle: { color: "rgba(205, 199, 171, 0.12)" } },
+    name: columnName,
+    nameTextStyle: buildAxisLabel("#FCE300"),
+  };
+
+  if (axisType === "time") {
+    return {
+      ...baseConfig,
+      type: "time",
+    };
+  }
+
+  if (axisType === "time-of-day") {
+    return {
+      ...baseConfig,
+      type: "value",
+      axisLabel: {
+        ...buildAxisLabel(),
+        formatter: (value) => formatTimeOfDayAxisValue(value),
+      },
+    };
+  }
+
+  return {
+    ...baseConfig,
+    type: "value",
+  };
+}
+
+function coerceScatterAxisValue(value, axisType) {
+  if (axisType === "time" || axisType === "time-of-day") {
+    return coerceDatetimeChartValue(value);
+  }
+
+  return coerceNumericChartValue(value);
+}
+
+function buildScatterSeries(chart, rows, analysis) {
+  const groups = new Map();
+  const xColumn = getAnalysisColumn(analysis, chart.config.x_column);
+  const yColumn = getAnalysisColumn(analysis, chart.config.y_column);
+  const xAxisType = resolveScatterAxisType(xColumn);
+  const yAxisType = resolveScatterAxisType(yColumn);
+  const sizeValues = rows
+    .map((row) => coerceNumericChartValue(row[chart.config.size_column]))
+    .filter((value) => value !== null);
+  const minSize = sizeValues.length ? Math.min(...sizeValues) : 0;
+  const maxSize = sizeValues.length ? Math.max(...sizeValues) : 0;
+
+  function resolveSymbolSize(sizeValue) {
+    if (sizeValue === null || sizeValue === undefined) {
+      return 14;
+    }
+
+    if (maxSize <= minSize) {
+      return 20;
+    }
+
+    return 10 + ((sizeValue - minSize) / (maxSize - minSize)) * 24;
+  }
+
+  rows.forEach((row) => {
+    const seriesName = chart.config.series_column
+      ? formatQueryChartAxisValue(row[chart.config.series_column])
+      : chart.name;
+    const x = coerceScatterAxisValue(row[chart.config.x_column], xAxisType);
+    const y = coerceScatterAxisValue(row[chart.config.y_column], yAxisType);
+
+    if (x === null || y === null) {
+      return;
+    }
+
+    const point = {
+      value: [
+        x,
+        y,
+        chart.config.size_column ? coerceNumericChartValue(row[chart.config.size_column]) : null,
+      ],
+      symbolSize: resolveSymbolSize(
+        chart.config.size_column ? coerceNumericChartValue(row[chart.config.size_column]) : null
+      ),
+    };
+
+    if (!groups.has(seriesName)) {
+      groups.set(seriesName, []);
+    }
+
+    groups.get(seriesName).push(point);
+  });
+
+  return Array.from(groups.entries()).map(([seriesName, data]) => ({
+    name: seriesName,
+    type: "scatter",
+    data,
+    symbolSize(value, params) {
+      return params?.data?.symbolSize ?? resolveSymbolSize(value?.[2] ?? null);
+    },
+  }));
+}
+
+export function buildScatterChartOption(chart, rows, analysis = null) {
+  const xColumn = getAnalysisColumn(analysis, chart.config.x_column);
+  const yColumn = getAnalysisColumn(analysis, chart.config.y_column);
+
+  return {
+    ...buildCommonOption(),
+    legend: {
+      show: chart.config.show_legend,
+      textStyle: { color: "#cdc7ab" },
+    },
+    xAxis: buildScatterAxisConfig(xColumn, chart.config.x_column),
+    yAxis: buildScatterAxisConfig(yColumn, chart.config.y_column),
+    series: buildScatterSeries(chart, rows, analysis),
+  };
+}