sqlite-hub 0.6.0 → 0.8.7

package/frontend/styles/views.css

@@ -1,124 +1,351 @@
 .machined-grid {
-  background-image: radial-gradient(var(--color-grid-dot) 1px, transparent 1px);
-  background-size: 32px 32px;
+    background-image: radial-gradient(var(--color-grid-dot) 1px, transparent 1px);
+    background-size: 32px 32px;
 }
 
 .data-grid-texture {
-  background-image: radial-gradient(var(--color-primary-container) 1px, transparent 1px);
-  background-size: 24px 24px;
-  opacity: 0.03;
+    background-image: radial-gradient(var(--color-primary-container) 1px, transparent 1px);
+    background-size: 24px 24px;
+    opacity: 0.03;
 }
 
 .view-surface {
-  background: var(--color-surface);
-  min-height: 100%;
+    background: var(--color-surface);
+    min-height: 100%;
 }
 
 .view-frame {
-  min-height: 100%;
-  padding: var(--spacing-8);
+    min-height: 100%;
+    padding: var(--spacing-8);
 }
 
 .view-stack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
 }
 
 .table-designer-view {
-  display: flex;
-  height: 100%;
-  min-height: 0;
-  overflow: hidden;
+    display: flex;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
 }
 
 .table-designer-workspace {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: var(--spacing-4);
-  min-height: 0;
-  min-width: 0;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--spacing-4);
+    min-height: 0;
+    min-width: 0;
 }
 
 .table-designer-workspace__top,
 .table-designer-workspace__bottom {
-  min-height: 0;
-  min-width: 0;
+    min-height: 0;
+    min-width: 0;
 }
 
 .table-designer-workspace__top {
-  flex: 1;
+    flex: 1;
 }
 
 .table-designer-workspace__bottom {
-  flex: 0 0 34%;
+    flex: 0 0 34%;
+}
+
+.table-designer-workspace__bottom.is-collapsed {
+    flex: 0 0 auto;
 }
 
 .landing-view {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  min-height: 100%;
-  overflow: hidden;
-  position: relative;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    min-height: 100%;
+    overflow: hidden;
+    position: relative;
 }
 
 .landing-accent {
-  background: rgba(75, 71, 50, 0.2);
-  height: 1px;
-  position: absolute;
+    background: rgba(75, 71, 50, 0.2);
+    height: 1px;
+    position: absolute;
 }
 
 .landing-accent--a {
-  left: 3rem;
-  top: 2.5rem;
-  transform: rotate(45deg);
-  width: 8rem;
+    left: 3rem;
+    top: 2.5rem;
+    transform: rotate(45deg);
+    width: 8rem;
 }
 
 .landing-accent--b {
-  bottom: 2.5rem;
-  right: 3rem;
-  transform: rotate(-12deg);
-  width: 16rem;
+    bottom: 2.5rem;
+    right: 3rem;
+    transform: rotate(-12deg);
+    width: 16rem;
 }
 
 .landing-accent--c {
-  border-bottom: 1px solid rgba(75, 71, 50, 0.12);
-  border-right: 1px solid rgba(75, 71, 50, 0.12);
-  height: 4rem;
-  left: 0;
-  top: 50%;
-  width: 4rem;
+    border-bottom: 1px solid rgba(75, 71, 50, 0.12);
+    border-right: 1px solid rgba(75, 71, 50, 0.12);
+    height: 4rem;
+    left: 0;
+    top: 50%;
+    width: 4rem;
 }
 
 .system-placeholder-grid {
-  display: grid;
-  gap: var(--spacing-4);
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    display: grid;
+    gap: var(--spacing-4);
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 }
 
 .system-placeholder-card {
-  background: var(--color-surface-low);
-  border-bottom: 2px solid rgba(49, 48, 48, 1);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2);
-  min-height: 160px;
-  padding: var(--spacing-6);
+    background: var(--color-surface-low);
+    border-bottom: 2px solid rgba(49, 48, 48, 1);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+    min-height: 160px;
+    padding: var(--spacing-6);
 }
 
 .system-placeholder-card.is-primary {
-  border-bottom-color: var(--color-primary-container);
+    border-bottom-color: var(--color-primary-container);
 }
 
-@media (max-width: 1023px) {
-  .table-designer-view {
+.charts-view {
+    background: var(--color-surface);
+    display: flex;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.charts-view__sidebar {
+    background: var(--color-surface-low);
+    border-right: 1px solid rgba(75, 71, 50, 0.18);
+    display: flex;
+    flex: 0 0 23rem;
+    flex-direction: column;
+    min-height: 0;
+    width: 23rem;
+}
+
+.charts-view__sidebar-header {
+    border-bottom: 1px solid rgba(75, 71, 50, 0.18);
+    padding: var(--spacing-5);
+}
+
+.structure-view {
+    background: var(--color-surface);
+    display: flex;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.structure-view__sidebar {
+    background: var(--color-surface-low);
+    border-right: 1px solid rgba(75, 71, 50, 0.18);
+    display: flex;
+    flex: 0 0 18.5rem;
     flex-direction: column;
-  }
+    min-height: 0;
+    width: 18.5rem;
+}
+
+.structure-view__sidebar-header {
+    border-bottom: 1px solid rgba(75, 71, 50, 0.18);
+    padding: var(--spacing-5);
+}
+
+.structure-view__sidebar-body {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: var(--spacing-4);
+}
+
+.structure-view__detail {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+    min-width: 0;
+}
+
+.structure-view__header {
+    border-bottom: 1px solid rgba(75, 71, 50, 0.18);
+    padding: 1.25rem 1.5rem;
+}
+
+.structure-headline-container {
+    max-width: min(64rem, 100%);
+}
+
+.structure-view__graph-shell {
+    flex: 1;
+    min-height: 0;
+}
+
+.structure-sidebar__section + .structure-sidebar__section {
+    margin-top: 1.5rem;
+}
+
+.charts-view__detail {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+    min-width: 0;
+}
+
+.charts-detail-shell {
+    min-height: 100%;
+    padding: var(--spacing-6);
+}
+
+.charts-detail-shell__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-4);
+}
+
+.charts-detail-shell__title {
+    min-width: 0;
+}
+
+.charts-detail-shell__controls {
+    align-items: end;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-3);
+    justify-content: space-between;
+}
+
+.charts-detail-shell__controls-group {
+    align-items: end;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-3);
+}
+
+.charts-detail-shell__controls-group--end {
+    justify-content: flex-end;
+    margin-left: auto;
+}
+
+.charts-height-toggle {
+    background: var(--color-surface-container-low);
+    border: 1px solid rgba(75, 71, 50, 0.18);
+    display: inline-flex;
+    gap: 0;
+    height: var(--control-height);
+    overflow: hidden;
+}
+
+.charts-height-toggle__button {
+    align-items: center;
+    background: transparent;
+    border: none;
+    box-sizing: border-box;
+    color: var(--color-on-surface-variant);
+    display: inline-flex;
+    font-family: var(--font-family-mono);
+    font-size: 0.625rem;
+    font-weight: 700;
+    height: var(--control-height);
+    justify-content: center;
+    line-height: 1;
+    letter-spacing: 0.16em;
+    padding: 0 1rem;
+}
+
+.charts-height-toggle__button + .charts-height-toggle__button {
+    border-left: 1px solid rgba(75, 71, 50, 0.18);
+}
+
+.charts-height-toggle__button.is-active {
+    background: var(--color-primary-container);
+    border-color: transparent;
+    color: var(--color-on-primary);
+}
+
+.query-chart-card {
+    --query-chart-height: 450px;
+    background: var(--color-surface-low);
+    border: 1px solid rgba(75, 71, 50, 0.12);
+    overflow: hidden;
+}
+
+.query-chart-card--small {
+    --query-chart-height: 300px;
+}
+
+.query-chart-card--medium {
+    --query-chart-height: 450px;
+}
+
+.query-chart-card--large {
+    --query-chart-height: 600px;
+}
+
+.query-chart-card__header {
+    align-items: center;
+    background: var(--color-surface-container-highest);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-4);
+    justify-content: space-between;
+    padding: 1rem 1.25rem;
+}
+
+.query-chart-card__body {
+    background:
+        radial-gradient(circle at top right, rgba(252, 227, 0, 0.08), transparent 28%),
+        linear-gradient(180deg, rgba(32, 31, 31, 0.92), rgba(14, 14, 14, 1));
+    min-height: var(--query-chart-height);
+    padding: 1rem;
+}
+
+.query-chart-canvas,
+.query-chart-surface-state {
+    height: var(--query-chart-height);
+    min-height: var(--query-chart-height);
+}
+
+.query-chart-card__results {
+    background: var(--color-surface-container-lowest);
+}
+
+@media (max-width: 1023px) {
+    .charts-view {
+        flex-direction: column;
+    }
+
+    .charts-view__sidebar {
+        flex-basis: 18rem;
+        width: 100%;
+    }
+
+    .structure-view {
+        flex-direction: column;
+    }
+
+    .structure-view__sidebar {
+        flex-basis: 18rem;
+        width: 100%;
+    }
+
+    .table-designer-view {
+        flex-direction: column;
+    }
 
-  .table-designer-workspace__bottom {
-    flex-basis: 280px;
-  }
+    .table-designer-workspace__bottom {
+        flex-basis: 280px;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sqlite-hub",
-    "version": "0.6.0",
+    "version": "0.8.7",
     "description": "SQLite-only local management app backend and SPA shell",
     "main": "server/server.js",
     "bin": {
@@ -15,6 +15,7 @@
         "better-sqlite3": "^11.8.1",
         "cytoscape": "^3.33.2",
         "cytoscape-elk": "^2.3.0",
+        "echarts": "^5.6.0",
         "elkjs": "^0.11.1",
         "express": "^4.21.2"
     }

package/server/routes/charts.js

@@ -0,0 +1,153 @@
+const express = require("express");
+const {
+  DatabaseRequiredError,
+  route,
+  successResponse,
+} = require("../utils/errors");
+
+function getActiveDatabaseKey(connectionManager) {
+  return connectionManager.getActiveConnection()?.id ?? null;
+}
+
+function requireActiveDatabaseKey(connectionManager) {
+  const databaseKey = getActiveDatabaseKey(connectionManager);
+
+  if (!databaseKey) {
+    throw new DatabaseRequiredError();
+  }
+
+  return databaseKey;
+}
+
+function createChartsRouter({ appStateStore, connectionManager, sqlExecutor }) {
+  const router = express.Router();
+
+  router.get(
+    "/query-history",
+    route((req, res) => {
+      const databaseKey = requireActiveDatabaseKey(connectionManager);
+
+      res.json(
+        successResponse({
+          data: appStateStore.getChartQueryHistoryList(databaseKey),
+          metadata: { databaseKey },
+        })
+      );
+    })
+  );
+
+  router.get(
+    "/query-history/:historyId",
+    route((req, res) => {
+      const databaseKey = requireActiveDatabaseKey(connectionManager);
+
+      res.json(
+        successResponse({
+          data: appStateStore.getQueryHistoryChartsDetail(req.params.historyId, databaseKey),
+          metadata: {
+            databaseKey,
+            historyId: Number(req.params.historyId),
+          },
+        })
+      );
+    })
+  );
+
+  router.post(
+    "/query-history/:historyId/execute",
+    route((req, res) => {
+      const databaseKey = requireActiveDatabaseKey(connectionManager);
+      const item = appStateStore.getQueryHistoryItemForDatabase(req.params.historyId, databaseKey);
+      const result = sqlExecutor.execute(item.rawSql, {
+        persistHistory: false,
+        requireReader: true,
+      });
+
+      res.json(
+        successResponse({
+          message: "Query results loaded for charts.",
+          data: {
+            ...result,
+            queryHistoryId: item.id,
+          },
+          metadata: {
+            databaseKey,
+            historyId: item.id,
+          },
+          timingMs: result.timingMs,
+        })
+      );
+    })
+  );
+
+  router.post(
+    "/",
+    route((req, res) => {
+      const databaseKey = requireActiveDatabaseKey(connectionManager);
+      const chart = appStateStore.createQueryHistoryChart({
+        databaseKey,
+        queryHistoryId: req.body?.queryHistoryId,
+        name: req.body?.name,
+        chartType: req.body?.chartType,
+        config: req.body?.config,
+        resultColumns: req.body?.resultColumns,
+        tableVisible: req.body?.tableVisible,
+      });
+
+      res.json(
+        successResponse({
+          message: "Chart created.",
+          data: chart,
+          metadata: { databaseKey },
+        })
+      );
+    })
+  );
+
+  router.patch(
+    "/:chartId",
+    route((req, res) => {
+      const databaseKey = requireActiveDatabaseKey(connectionManager);
+      const chart = appStateStore.updateQueryHistoryChart(req.params.chartId, {
+        databaseKey,
+        name: req.body?.name,
+        chartType: req.body?.chartType,
+        config: req.body?.config,
+        resultColumns: req.body?.resultColumns,
+        tableVisible: req.body?.tableVisible,
+      });
+
+      res.json(
+        successResponse({
+          message: "Chart updated.",
+          data: chart,
+          metadata: { databaseKey },
+        })
+      );
+    })
+  );
+
+  router.delete(
+    "/:chartId",
+    route((req, res) => {
+      const databaseKey = requireActiveDatabaseKey(connectionManager);
+      appStateStore.deleteQueryHistoryChart(req.params.chartId, databaseKey);
+
+      res.json(
+        successResponse({
+          message: "Chart deleted.",
+          data: {
+            id: Number(req.params.chartId),
+          },
+          metadata: { databaseKey },
+        })
+      );
+    })
+  );
+
+  return router;
+}
+
+module.exports = {
+  createChartsRouter,
+};

package/server/server.js

@@ -15,6 +15,7 @@ const { TableDesignerService } = require("./services/sqlite/tableDesignerService
 const { createConnectionsRouter } = require("./routes/connections");
 const { createOverviewRouter } = require("./routes/overview");
 const { createSqlRouter } = require("./routes/sql");
+const { createChartsRouter } = require("./routes/charts");
 const { createStructureRouter } = require("./routes/structure");
 const { createDataRouter } = require("./routes/data");
 const { createTableDesignerRouter } = require("./routes/tableDesigner");
@@ -79,6 +80,7 @@ app.use(
 );
 app.use("/api/db", createOverviewRouter({ overviewService }));
 app.use("/api/sql", createSqlRouter({ appStateStore, connectionManager, sqlExecutor }));
+app.use("/api/charts", createChartsRouter({ appStateStore, connectionManager, sqlExecutor }));
 app.use("/api/structure", createStructureRouter({ structureService }));
 app.use("/api/data", createDataRouter({ dataBrowserService }));
 app.use("/api/table-designer", createTableDesignerRouter({ tableDesignerService }));
@@ -109,6 +111,10 @@ app.use(
   "/vendor/elkjs",
   express.static(path.resolve(__dirname, "..", "node_modules", "elkjs"))
 );
+app.use(
+  "/vendor/echarts",
+  express.static(path.resolve(__dirname, "..", "node_modules", "echarts"))
+);
 app.use(express.static(FRONTEND_ROOT));
 app.use("/db_logos", express.static(path.join(APP_STATE_DIRECTORY, "db_logos")));
 app.use(errorMiddleware);

package/server/services/sqlite/overviewService.js

@@ -12,6 +12,73 @@ class OverviewService {
     this.connectionManager = connectionManager;
   }
 
+  getSchemaMapPreview(schema) {
+    const tables = schema?.tables ?? [];
+    const indexes = schema?.indexes ?? [];
+    const tableNames = new Set(tables.map((table) => table.name));
+    const adjacency = new Map(tables.map((table) => [table.name, new Set()]));
+    let relationshipCount = 0;
+
+    tables.forEach((table) => {
+      (table.foreignKeys ?? []).forEach((foreignKey) => {
+        if (!tableNames.has(foreignKey.referencedTable)) {
+          return;
+        }
+
+        relationshipCount += foreignKey.mappings?.length ?? 0;
+        adjacency.get(table.name)?.add(foreignKey.referencedTable);
+        adjacency.get(foreignKey.referencedTable)?.add(table.name);
+      });
+    });
+
+    let fkClusters = 0;
+    let isolatedTables = 0;
+    const visited = new Set();
+
+    tables.forEach((table) => {
+      if (visited.has(table.name)) {
+        return;
+      }
+
+      const stack = [table.name];
+      let componentHasRelationships = false;
+
+      visited.add(table.name);
+
+      while (stack.length) {
+        const current = stack.pop();
+        const neighbors = adjacency.get(current) ?? new Set();
+
+        if (neighbors.size > 0) {
+          componentHasRelationships = true;
+        }
+
+        neighbors.forEach((neighbor) => {
+          if (visited.has(neighbor)) {
+            return;
+          }
+
+          visited.add(neighbor);
+          stack.push(neighbor);
+        });
+      }
+
+      if (componentHasRelationships) {
+        fkClusters += 1;
+      } else {
+        isolatedTables += 1;
+      }
+    });
+
+    return {
+      tableCount: tables.length,
+      indexCount: indexes.length,
+      relationshipCount,
+      fkClusters,
+      isolatedTables,
+    };
+  }
+
   safePragmaValue(db, pragmaName) {
     const row = db.prepare(`PRAGMA ${pragmaName}`).get();
     return row ? Object.values(row)[0] : null;
@@ -78,6 +145,7 @@ class OverviewService {
         indexes: schema.indexes.length,
         triggers: schema.triggers.length,
       },
+      schemaMap: this.getSchemaMapPreview(schema),
       topTablesByRowCount: [...schema.tables]
         .sort((left, right) => (right.rowCount ?? 0) - (left.rowCount ?? 0))
         .slice(0, 10)