sqlite-hub 0.6.0 → 0.7.0

package/frontend/js/views/charts.js

@@ -0,0 +1,471 @@
+import { renderQueryResultsPane } from '../components/queryResults.js';
+import { analyzeQueryChartResult, getQueryChartTypeLabel, validateQueryChartConfig } from '../lib/queryCharts.js';
+import { escapeHtml, highlightSql } from '../utils/format.js';
+import { renderStatusBadge } from '../components/badges.js';
+
+function renderMissingDatabase() {
+    return `
+    <section class="flex flex-1 items-center justify-center px-8 text-center">
+      <div class="max-w-xl">
+        <span class="material-symbols-outlined mb-4 text-5xl text-on-surface-variant/20">database_off</span>
+        <h1 class="font-headline text-3xl font-black uppercase tracking-tight text-primary-container">
+          No Active SQLite Database
+        </h1>
+        <p class="mt-3 text-sm leading-7 text-on-surface-variant/65">
+          Open a local SQLite database first. The Charts area only works against query-history entries from the active database.
+        </p>
+      </div>
+    </section>
+  `;
+}
+
+function renderChartsList(state) {
+    const queries = state.charts.queries ?? [];
+    const selectedHistoryId = Number(state.charts.selectedHistoryId);
+
+    if (state.charts.loading && !queries.length) {
+        return `
+      <div class="flex h-full items-center justify-center px-6 text-center text-on-surface-variant/45">
+        <div>
+          <span class="material-symbols-outlined mb-3 text-4xl">progress_activity</span>
+          <p class="font-mono text-[10px] uppercase tracking-[0.18em]">Loading Queries</p>
+        </div>
+      </div>
+    `;
+    }
+
+    if (state.charts.error && !queries.length) {
+        return `
+      <div class="p-5">
+        <div class="border border-error/30 bg-error-container/20 px-4 py-4 text-sm text-error">
+          ${escapeHtml(state.charts.error.message)}
+        </div>
+      </div>
+    `;
+    }
+
+    if (!queries.length) {
+        return `
+      <div class="flex h-full items-center justify-center px-6 text-center">
+        <div>
+          <span class="material-symbols-outlined mb-3 text-4xl text-on-surface-variant/25">query_stats</span>
+          <p class="font-headline text-lg font-black uppercase tracking-tight text-on-surface">
+            No Query History
+          </p>
+          <p class="mt-2 max-w-xs text-sm leading-6 text-on-surface-variant/60">
+            Run saved queries in the SQL Editor first. They will appear here automatically.
+          </p>
+        </div>
+      </div>
+    `;
+    }
+
+    return `
+    <div class="custom-scrollbar flex-1 overflow-auto px-4 py-4">
+      <div class="space-y-2">
+        ${queries
+            .map(
+                item => `
+              <button
+                class="w-full border px-4 py-3 text-left transition-colors ${
+                    selectedHistoryId === item.id
+                        ? '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="/charts/${encodeURIComponent(item.id)}"
+                type="button"
+              >
+                <div class="flex items-start justify-between gap-3">
+                  <div class="min-w-0 flex-1 truncate font-mono text-xs ${
+                      selectedHistoryId === item.id ? 'text-primary-container' : 'text-on-surface'
+                  }">
+                    ${escapeHtml(item.displayTitle)}
+                  </div>
+                  <div class="flex shrink-0 flex-wrap justify-end gap-1">
+                    ${
+                        item.chartTypes?.length
+                            ? item.chartTypes
+                                  .map(chartType => renderStatusBadge(getQueryChartTypeLabel(chartType), 'primary'))
+                                  .join('')
+                            : renderStatusBadge('None', 'muted')
+                    }
+                  </div>
+                </div>
+                <div class="mt-1 truncate text-[10px] uppercase tracking-[0.16em] text-on-surface-variant/45">
+                  ${escapeHtml(item.previewSql)}
+                </div>
+              </button>
+            `,
+            )
+            .join('')}
+      </div>
+    </div>
+  `;
+}
+
+function renderEmptyChartDetail() {
+    return `
+    <div class="flex flex-1 items-center justify-center px-8 py-10 text-center">
+      <div class="max-w-lg">
+        <span class="material-symbols-outlined mb-4 text-5xl text-on-surface-variant/20">bar_chart</span>
+        <h2 class="font-headline text-2xl font-black uppercase tracking-tight text-primary-container">
+          Select A Query
+        </h2>
+        <p class="mt-3 text-sm leading-7 text-on-surface-variant/65">
+          Choose a query-history entry on the left to load its charts, render the live result set, and manage chart definitions.
+        </p>
+      </div>
+    </div>
+  `;
+}
+
+function renderQueryResultState(state, result) {
+    if (state.charts.resultLoading && !result) {
+        return `
+      <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-4 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+        Loading live query result...
+      </div>
+    `;
+    }
+
+    if (state.charts.resultError) {
+        return `
+      <div class="border border-error/30 bg-error-container/15 px-4 py-4 text-sm text-error">
+        <div class="font-mono text-[10px] uppercase tracking-[0.18em]">
+          ${escapeHtml(state.charts.resultError.code ?? 'RESULT_ERROR')}
+        </div>
+        <div class="mt-2">${escapeHtml(state.charts.resultError.message)}</div>
+      </div>
+    `;
+    }
+
+    if (!result) {
+        return `
+      <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-4 text-sm text-on-surface-variant/60">
+        No live result set is available for this query.
+      </div>
+    `;
+    }
+
+    return '';
+}
+
+function renderQuerySqlSection(state, rawSql) {
+    const isExpanded = Boolean(state.charts.sqlExpanded);
+
+    return `
+    <section class="mt-5 border border-outline-variant/10 bg-surface-container-lowest">
+      <button
+        class="flex w-full items-center justify-between gap-3 border-b border-outline-variant/10 px-4 py-3 text-left"
+        data-action="toggle-charts-sql-panel"
+        type="button"
+      >
+        <span class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+          Query SQL
+        </span>
+        <span class="material-symbols-outlined text-on-surface-variant/55">
+          ${isExpanded ? 'expand_less' : 'expand_more'}
+        </span>
+      </button>
+      ${
+          isExpanded
+              ? `
+            <pre class="custom-scrollbar overflow-auto p-4 font-mono text-sm leading-6 text-on-surface"><code>${highlightSql(
+                rawSql,
+            )}</code></pre>
+          `
+              : ''
+      }
+    </section>
+  `;
+}
+
+function renderQueryResultsSection(state) {
+    const isVisible = Boolean(state.charts.resultsVisible);
+    const statusMarkup = renderQueryResultState(state, state.charts.result);
+
+    return `
+    <section class="mt-6 border border-outline-variant/10 bg-surface-container-lowest">
+      <div class="flex items-center justify-between gap-3 border-b border-outline-variant/10 px-4 py-3">
+        <span class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+          Results
+        </span>
+        <button
+          class="toolbar-button query-chart-card__action"
+          data-action="toggle-charts-results-panel"
+          type="button"
+        >
+          ${isVisible ? 'Hide Results' : 'Show Results'}
+        </button>
+      </div>
+      ${statusMarkup}
+      ${
+          isVisible && state.charts.result && !state.charts.resultLoading && !state.charts.resultError
+              ? `
+            <div class="h-[18rem] overflow-hidden">
+              ${renderQueryResultsPane(state.charts.result, {
+                  selectedRowIndex: null,
+                  editable: false,
+                  sortColumn: null,
+                  sortDirection: null,
+              })}
+            </div>
+          `
+              : ''
+      }
+    </section>
+  `;
+}
+
+function resolveChartCardSizeClass(state) {
+    return `query-chart-card--${String(state.charts.chartHeightPreset ?? 'medium')
+        .trim()
+        .toLowerCase()}`;
+}
+
+function renderChartHeightPresetToggle(state) {
+    const activePreset = String(state.charts.chartHeightPreset ?? 'medium')
+        .trim()
+        .toLowerCase();
+    const presets = [
+        { value: 'small', label: 'Small', height: '300px' },
+        { value: 'medium', label: 'Medium', height: '450px' },
+        { value: 'large', label: 'Large', height: '600px' },
+    ];
+
+    return `
+    <div class="flex flex-col gap-2">
+      <div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+        Chart Height
+      </div>
+      <div class="charts-height-toggle" role="group" aria-label="Chart height preset">
+        ${presets
+            .map(
+                preset => `
+              <button
+                class="toolbar-button charts-height-toggle__button ${activePreset === preset.value ? 'is-active' : ''}"
+                data-action="set-charts-height-preset"
+                data-preset="${preset.value}"
+                type="button"
+                title="${preset.height}"
+              >
+                ${preset.label}
+              </button>
+            `,
+            )
+            .join('')}
+      </div>
+    </div>
+  `;
+}
+
+function renderChartSurface(chart, state, analysis) {
+    if (state.charts.resultLoading) {
+        return `
+      <div class="query-chart-surface-state flex h-full items-center justify-center text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
+        Loading chart result...
+      </div>
+    `;
+    }
+
+    if (state.charts.resultError) {
+        return `
+      <div class="query-chart-surface-state flex items-center justify-center border border-error/20 bg-error-container/10 px-6 text-center text-sm text-error">
+        ${escapeHtml(state.charts.resultError.message)}
+      </div>
+    `;
+    }
+
+    const validation = validateQueryChartConfig(chart.chartType, chart.config, analysis);
+
+    if (!validation.valid) {
+        return `
+      <div class="query-chart-surface-state flex items-center justify-center border border-error/20 bg-error-container/10 px-6 text-center text-sm text-error">
+        ${escapeHtml(validation.errors.join(' '))}
+      </div>
+    `;
+    }
+
+    return `
+    <div
+      class="query-chart-canvas w-full"
+      data-query-chart-id="${escapeHtml(chart.id)}"
+      data-chart-export-name="${escapeHtml(chart.name.replace(/[^\w.-]+/g, '_'))}"
+    ></div>
+  `;
+}
+
+function renderChartCard(chart, state, analysis) {
+    const sizeClass = resolveChartCardSizeClass(state);
+
+    return `
+    <article class="query-chart-card ${sizeClass}">
+      <header class="query-chart-card__header">
+        <div class="min-w-0">
+          <div class="flex flex-wrap items-center gap-2">
+            <h3 class="truncate font-headline text-xl font-black uppercase tracking-tight text-on-surface">
+              ${escapeHtml(chart.name)}
+            </h3>
+            ${renderStatusBadge(getQueryChartTypeLabel(chart.chartType), 'primary')}
+          </div>
+        </div>
+        <div class="flex flex-wrap items-center gap-2">
+          <button
+            class="toolbar-button query-chart-card__action"
+            data-action="open-edit-query-chart-modal"
+            data-chart-id="${escapeHtml(chart.id)}"
+            type="button"
+          >
+            Edit
+          </button>
+          <button
+            class="toolbar-button query-chart-card__action"
+            data-action="open-delete-query-chart-modal"
+            data-chart-id="${escapeHtml(chart.id)}"
+            type="button"
+          >
+            Delete
+          </button>
+          <button
+            class="toolbar-button query-chart-card__action"
+            data-action="export-query-chart-png"
+            data-chart-id="${escapeHtml(chart.id)}"
+            type="button"
+          >
+            Export PNG
+          </button>
+        </div>
+      </header>
+      <div class="query-chart-card__body">
+        ${renderChartSurface(chart, state, analysis)}
+      </div>
+    </article>
+  `;
+}
+
+function renderChartsDetail(state) {
+    const detail = state.charts.detail;
+    const selectedHistoryId = state.charts.selectedHistoryId;
+
+    if (!selectedHistoryId) {
+        return renderEmptyChartDetail();
+    }
+
+    if (state.charts.detailLoading && !detail) {
+        return `
+      <div class="flex flex-1 items-center justify-center px-8 text-center text-on-surface-variant/45">
+        <div>
+          <span class="material-symbols-outlined mb-3 text-4xl">progress_activity</span>
+          <p class="font-mono text-[10px] uppercase tracking-[0.18em]">Loading Query Detail</p>
+        </div>
+      </div>
+    `;
+    }
+
+    if (state.charts.detailError && !detail) {
+        return `
+      <div class="p-8">
+        <div class="border border-error/30 bg-error-container/20 px-4 py-4 text-sm text-error">
+          ${escapeHtml(state.charts.detailError.message)}
+        </div>
+      </div>
+    `;
+    }
+
+    if (!detail?.item) {
+        return renderEmptyChartDetail();
+    }
+
+    const analysis = state.charts.result ? analyzeQueryChartResult(state.charts.result) : null;
+    const charts = detail.charts ?? [];
+
+    return `
+    <div class="custom-scrollbar flex-1 overflow-auto">
+      <div class="charts-detail-shell">
+        <header class="charts-detail-shell__header">
+          <div class="min-w-0">
+            <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/70">
+              Charts
+            </div>
+            <h1 class="mt-2 truncate font-headline text-4xl font-black uppercase tracking-tight text-primary-container">
+              ${escapeHtml(detail.item.displayTitle)}
+            </h1>
+          </div>
+          <div class="charts-detail-shell__controls">
+            ${renderChartHeightPresetToggle(state)}
+            <button
+              class="toolbar-button charts-detail-shell__button"
+              data-action="open-query-history"
+              data-history-id="${escapeHtml(detail.item.id)}"
+              type="button"
+            >
+              Open In Editor
+            </button>
+            <button
+              class="toolbar-button charts-detail-shell__button charts-detail-shell__button--primary"
+              data-action="open-create-query-chart-modal"
+              type="button"
+              ${state.charts.resultError || !state.charts.result ? 'disabled' : ''}
+            >
+              New Chart
+            </button>
+          </div>
+        </header>
+
+        ${renderQuerySqlSection(state, detail.item.rawSql)}
+
+        <section class="mt-6 space-y-5">
+          ${
+              charts.length
+                  ? charts.map(chart => renderChartCard(chart, state, analysis)).join('')
+                  : `
+                  <div class="flex min-h-[240px] items-center justify-center border border-dashed border-outline-variant/20 bg-surface-container-low px-8 text-center">
+                    <div>
+                      <span class="material-symbols-outlined mb-3 text-4xl text-on-surface-variant/25">add_chart</span>
+                      <p class="font-headline text-lg font-black uppercase tracking-tight text-on-surface">
+                        No Charts Yet
+                      </p>
+                      <p class="mt-2 max-w-md text-sm leading-6 text-on-surface-variant/60">
+                        Create the first chart for this query. The query stays read-only here; only chart definitions are editable.
+                      </p>
+                    </div>
+                  </div>
+                `
+          }
+        </section>
+
+        ${renderQueryResultsSection(state)}
+      </div>
+    </div>
+  `;
+}
+
+export function renderChartsView(state) {
+    if (!state.connections.active && state.charts.error?.code === 'ACTIVE_DATABASE_REQUIRED') {
+        return {
+            main: `<section class="view-surface flex min-h-full">${renderMissingDatabase()}</section>`,
+            panel: '',
+        };
+    }
+
+    return {
+        main: `
+      <section class="charts-view">
+        <aside class="charts-view__sidebar">
+          <div class="charts-view__sidebar-header">
+            <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
+              Query History
+            </div>
+            <h2 class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+              Charts
+            </h2>
+          </div>
+          ${renderChartsList(state)}
+        </aside>
+        <div class="charts-view__detail">${renderChartsDetail(state)}</div>
+      </section>
+    `,
+        panel: '',
+    };
+}

package/frontend/js/views/data.js

@@ -67,6 +67,7 @@ function renderTableList(state) {
 
 function renderWorkspaceHeader(state) {
     const table = state.dataBrowser.table;
+    const tablesVisible = state.dataBrowser.tablesVisible !== false;
 
     return `
     <header class="border-b border-outline-variant/10 bg-surface-container px-6 py-5">
@@ -91,15 +92,20 @@ function renderWorkspaceHeader(state) {
         <div class="flex items-center gap-3">
           ${
               table
-                  ? `
+                  ? `<button
+                    class="border border-outline-variant/20 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface hover:bg-surface-container-highest"
+                    data-action="toggle-data-tables"
+                    type="button"
+                  >
+                    ${tablesVisible ? '<span class="material-symbols-outlined text-sm">visibility_off</span> Hide Tables' : 'Show Tables'}
+                  </button>
                   <button
                     class="border border-outline-variant/20 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface hover:bg-surface-container-highest"
                     data-action="export-data-csv"
                     type="button"
                   >
                     ${state.dataBrowser.exportLoading ? 'Exporting...' : 'Export CSV'}
-                  </button>
-                `
+                  </button>`
                   : ''
           }
           <button
@@ -505,21 +511,29 @@ function renderDataRowEditorPanel(state) {
 }
 
 export function renderDataView(state) {
+    const tablesVisible = state.dataBrowser.tablesVisible !== false;
+
     return {
         main: `
       <section class="view-surface min-h-full bg-surface-container flex h-full min-h-0 flex-col overflow-hidden">
-        <div class="grid h-full min-h-0 grid-cols-1 md:grid-cols-[18rem_minmax(0,1fr)]">
-          <aside class="flex min-h-0 flex-col border-r border-outline-variant/10 bg-surface-low">
-            <div class="border-b border-outline-variant/10 px-6 py-5">
-              <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
-                Tables
-              </div>
-              <div class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-                total ${escapeHtml(formatNumber(state.dataBrowser.tables.length))}
-              </div>
-            </div>
-            ${renderTableList(state)}
-          </aside>
+        <div class="grid h-full min-h-0 grid-cols-1 ${tablesVisible ? 'md:grid-cols-[18rem_minmax(0,1fr)]' : ''}">
+          ${
+              tablesVisible
+                  ? `
+                    <aside class="flex min-h-0 flex-col border-r border-outline-variant/10 bg-surface-low">
+                      <div class="border-b border-outline-variant/10 px-6 py-5">
+                        <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
+                          Tables
+                        </div>
+                        <div class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+                          total ${escapeHtml(formatNumber(state.dataBrowser.tables.length))}
+                        </div>
+                      </div>
+                      ${renderTableList(state)}
+                    </aside>
+                  `
+                  : ''
+          }
           <section class="flex min-h-0 flex-col overflow-hidden">
             ${renderWorkspaceHeader(state)}
             ${renderWorkspaceError(state)}

package/frontend/js/views/editor.js

@@ -236,7 +236,7 @@ function renderResultsSurface(state, isResultsRoute) {
 
 export function renderEditorView(state, { isResultsRoute = false } = {}) {
   const connection = getCurrentConnection(state);
-  const editorSectionClass = "min-h-[27.5%]";
+  const editorSectionClass = state.editor.editorPanelVisible ? "min-h-[27.5%]" : "flex-none";
   const resultsSectionClass = "flex-1";
 
   return {
@@ -252,6 +252,8 @@ export function renderEditorView(state, { isResultsRoute = false } = {}) {
               exporting: state.editor.exportLoading,
               historyLoading: state.editor.historyLoading,
               historyTotal: state.editor.historyTotal,
+              editorVisible: state.editor.editorPanelVisible,
+              historyVisible: state.editor.historyPanelVisible,
               title: connection?.label ?? "SQLite Query Workspace",
             })}
           </section>
@@ -259,18 +261,22 @@ export function renderEditorView(state, { isResultsRoute = false } = {}) {
             ${renderResultsSurface(state, isResultsRoute)}
           </section>
         </div>
-        ${renderQueryHistoryPanel({
-          items: state.editor.history,
-          loading: state.editor.historyLoading,
-          loadingMore: state.editor.historyLoadingMore,
-          error: state.editor.historyError,
-          activeTab: state.editor.historyTab,
-          search: state.editor.historySearchInput,
-          total: state.editor.historyTotal,
-          hasMore: state.editor.historyHasMore,
-          activeHistoryId: state.editor.historyActiveId,
-          selectedHistoryId: state.editor.historySelectedId,
-        })}
+        ${
+          state.editor.historyPanelVisible
+            ? renderQueryHistoryPanel({
+                items: state.editor.history,
+                loading: state.editor.historyLoading,
+                loadingMore: state.editor.historyLoadingMore,
+                error: state.editor.historyError,
+                activeTab: state.editor.historyTab,
+                search: state.editor.historySearchInput,
+                total: state.editor.historyTotal,
+                hasMore: state.editor.historyHasMore,
+                activeHistoryId: state.editor.historyActiveId,
+                selectedHistoryId: state.editor.historySelectedId,
+              })
+            : ""
+        }
       </section>
     `,
     panel: