Merge branch 'playground' into develop

src/app/codemirror-override.css

@@ -19,6 +19,7 @@
   padding: 10px;
   background: #333;
   border-radius: 5px;
+  margin-bottom: 10px;
 }
 
 .code-tooltip table {

src/app/playground/page.tsx

@@ -1,4 +1,5 @@
 import { buttonVariants } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
 import WebsiteLayout from "@/components/website-layout";
 import { get_database } from "@/db";
 import { dbDataset } from "@/db/schema-dataset";
@@ -35,7 +36,9 @@ export default async function PlaygroundPage() {
         </Link>
       </div>
 
-      <div className="border-t py-4 mx-auto container">
+      <Separator />
+
+      <div className="py-4 mx-auto container">
         <h2 className="text-2xl font-bold mb-2">Existing Dataset</h2>
         <p className="mb-4">Preload the database with existing dataset.</p>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">

src/components/gui/result-stat.tsx

@@ -6,7 +6,7 @@ export default function ResultStats({ stats }: { stats: DatabaseResultStat }) {
       {stats.queryDurationMs !== null && (
         <div className="px-2 border-r">
           <span className="font-semibold">Query Duration</span>:{" "}
-          {stats.queryDurationMs}s
+          {stats.queryDurationMs}ms
         </div>
       )}
 

src/components/gui/table-cell/GenericCell.tsx

@@ -72,7 +72,7 @@ export default function GenericCell({
       );
     }
 
-    if (value instanceof ArrayBuffer) {
+    if (value instanceof ArrayBuffer || value instanceof Uint8Array) {
       const sliceByte = value.slice(0, 64);
       const base64Text = btoa(
         new Uint8Array(sliceByte).reduce(

src/components/gui/tabs/query-tab.tsx

@@ -26,10 +26,12 @@ import {
 } from "@/components/lib/multiple-query";
 import WindowTabs from "../windows-tab";
 import QueryResult from "../query-result";
+import { useSchema } from "@/context/schema-provider";
 
 export default function QueryWindow() {
   const { schema } = useAutoComplete();
   const { databaseDriver } = useDatabaseDriver();
+  const { refresh: refreshSchema } = useSchema();
   const [code, setCode] = useState("");
   const editorRef = useRef<ReactCodeMirrorRef>(null);
   const [lineNumber, setLineNumber] = useState(0);
@@ -69,7 +71,32 @@ export default function QueryWindow() {
       multipleQuery(databaseDriver, finalStatements, (currentProgrss) => {
         setProgress(currentProgrss);
       })
-        .then(setData)
+        .then(({ result: completeQueryResult, logs: completeLogs }) => {
+          setData(completeQueryResult);
+
+          // Check if sql contain any CREATE/DROP
+          let hasAlterSchema = false;
+          for (const log of completeLogs) {
+            console.log(log.sql);
+            if (
+              log.sql.trim().substring(0, "create ".length).toLowerCase() ===
+              "create "
+            ) {
+              hasAlterSchema = true;
+              break;
+            } else if (
+              log.sql.trim().substring(0, "drop ".length).toLowerCase() ===
+              "drop "
+            ) {
+              hasAlterSchema = true;
+              break;
+            }
+          }
+
+          if (hasAlterSchema) {
+            refreshSchema();
+          }
+        })
         .catch(console.error);
     }
   };

src/components/gui/tabs/table-data-tab.tsx

@@ -80,6 +80,8 @@ export default function TableDataWindow({ tableName }: TableDataContentProps) {
             orderBy: sortColumns,
           });
 
+        console.log(dataResult);
+
         setData(OptimizeTableState.createFromResult(dataResult, schemaResult));
         setStat(dataResult.stat);
         setTableSchema(schemaResult);

src/components/lib/multiple-query.ts

@@ -30,7 +30,10 @@ export async function multipleQuery(
   driver: BaseDriver,
   statements: string[],
   onProgress?: (progress: MultipleQueryProgress) => void
-): Promise<MultipleQueryResult[]> {
+): Promise<{
+  result: MultipleQueryResult[];
+  logs: MultipleQueryProgressItem[];
+}> {
   const logs: MultipleQueryProgressItem[] = [];
   const result: MultipleQueryResult[] = [];
 
@@ -82,5 +85,5 @@ export async function multipleQuery(
     }
   }
 
-  return result;
+  return { result, logs };
 }

src/drivers/sqlite/function-tooltip.json

@@ -27,6 +27,10 @@
     "syntax": "format(FORMAT,...)",
     "description": "<p>The FORMAT() function, similar to C's printf(), uses a format string (first argument) to construct the output with values from subsequent arguments.</p>\n<pre><code>select format('i am %d years old', 50);\n-&gt; 'i am 50 years old'\n</code></pre>"
   },
+  "fts5": {
+    "syntax": "fts5(...col)",
+    "description": "<p>FTS5 is an SQLite virtual table module that provides full-text search functionality to database applications.</p>\n<pre><code>CREATE VIRTUAL TABLE movie_fts USING fts5(title, summary);\nCREATE VIRTUAL TABLE name_fts USING fts5(name, tokenize='trigram');\n</code></pre>\n<p><strong>External Content Tables</strong></p>\n<pre><code>CREATE VIRTUAL TABLE student_fts USING fts5(\n    name,\n    tokenize='trigram',\n    content='student',\n    content_rowid='id'\n);\n</code></pre>"
+  },
   "glob": {
     "syntax": "glob(X,Y)",
     "description": "<p>The GLOB operator is like LIKE but uses Unix file globbing syntax and is case-sensitive.</p>\n<pre><code>select glob('*hello*', 'hello world');\n-&gt; 1\n</code></pre>"

src/drivers/sqlite/functions/fts5.md

@@ -0,0 +1,19 @@
+fts5(...col)
+
+FTS5 is an SQLite virtual table module that provides full-text search functionality to database applications.
+
+```
+CREATE VIRTUAL TABLE movie_fts USING fts5(title, summary);
+CREATE VIRTUAL TABLE name_fts USING fts5(name, tokenize='trigram');
+```
+
+**External Content Tables**
+
+```
+CREATE VIRTUAL TABLE student_fts USING fts5(
+    name,
+    tokenize='trigram',
+    content='student',
+    content_rowid='id'
+);
+```

src/drivers/sqljs-driver.ts

@@ -37,6 +37,7 @@ export default class SqljsDriver extends SqliteLikeBaseDriver {
     const bind =
       typeof stmt === "string" ? undefined : (stmt.args as BindParams);
 
+    const startTime = Date.now();
     const s = this.db.prepare(sql, bind);
 
     // Do the transform result here
@@ -70,17 +71,23 @@ export default class SqljsDriver extends SqliteLikeBaseDriver {
       );
     }
 
+    const endTime = Date.now();
+
     return {
       headers,
       rows,
       stat: {
         rowsAffected: this.db.getRowsModified(),
         rowsRead: null,
         rowsWritten: null,
-        queryDurationMs: null,
+        queryDurationMs: endTime - startTime,
       },
-      lastInsertRowid: this.db.exec("select last_insert_rowid();")[0]
-        .values[0][0] as number | undefined,
+      lastInsertRowid:
+        headers.length > 0
+          ? undefined
+          : (this.db.exec("select last_insert_rowid();")[0].values[0][0] as
+              | number
+              | undefined),
     };
   }