Merge main into DATEDIFF over TIMESTAMP_LTZ

Author: kvlonge

website/package.json

@@ -9,7 +9,7 @@
     "dev": "node scripts/prepare_playground.mjs && astro dev",
     "build": "node scripts/prepare_playground.mjs && astro build",
     "preview": "astro preview",
-    "test:engine": "node --test tests/playground.test.mjs",
+    "test:engine": "node scripts/prepare_playground.mjs && node --test tests/playground.test.mjs",
     "check:figures": "node scripts/check_figures.mjs"
   },
   "dependencies": {

website/public/playground/examples.js

@@ -86,6 +86,42 @@ FROM orders`,
 FROM orders`,
 };
 
+// The example chips above the editor, grouped by what SQLQuack does with them. `slug` is the
+// example's `?example=` link and `stops` the stage where its run stops (null when all four pass);
+// tests/playground.test.mjs checks each `stops` against the engine and DuckDB-WASM.
+export const EXAMPLE_GROUPS = [
+	{
+		title: 'Runs it',
+		tagline: 'verified results',
+		examples: [
+			{ key: 'valid', slug: 'converts-and-runs', name: 'Converts and runs', stops: null },
+			{ key: 'decimal', slug: 'decimal-division', name: 'Decimal division', stops: null },
+		],
+	},
+	{
+		title: 'Catches the mistake',
+		tagline: 'a clear no',
+		examples: [
+			{ key: 'syntax', slug: 'syntax-error', name: 'Syntax error', stops: 'parse' },
+			{ key: 'rejected', slug: 'snowflake-rejects-it', name: 'Snowflake rejects it', stops: 'checks' },
+			{ key: 'unknown', slug: 'unknown-column', name: 'Unknown column', stops: 'checks' },
+		],
+	},
+	{
+		title: 'Says no, clearly',
+		tagline: 'a clear no',
+		examples: [{ key: 'refused', slug: 'translation-refused', name: 'Translation refused', stops: 'translate' }],
+	},
+];
+
+export const STOP_LABELS = {
+	parse: 'stops at Parse',
+	checks: 'stops at Check',
+	translate: 'stops at Translate',
+	run: 'stops at Run',
+};
+export const stopLabel = (stops) => (stops ? STOP_LABELS[stops] : 'all four pass');
+
 // Shown under the editor while an example is loaded and unedited.
 export const CAPTIONS = {
 	refused:

website/public/playground/index.html

@@ -66,20 +66,10 @@ <h1>Playground</h1>
 					your browser. Each stage passes or fails on its own, so you can see which step stopped and where.
 				</p>
 			</div>
+			<div class="wrap pg-examples" id="pg-examples" role="group" aria-label="Examples"></div>
 			<div class="wrap playground">
 				<div class="pg-inputs">
-					<label class="pg-label" for="pg-sql"
-						><span>Snowflake SQL</span>
-						<select id="pg-example" aria-label="Examples">
-							<option value="">Examples…</option>
-							<option value="valid">Converts and runs</option>
-							<option value="decimal">Decimal division</option>
-							<option value="syntax">Syntax error</option>
-							<option value="rejected">Snowflake rejects it</option>
-							<option value="unknown">Unknown column</option>
-							<option value="refused">Translation refused</option>
-						</select></label
-					>
+					<label class="pg-label" for="pg-sql"><span>Snowflake SQL</span></label>
 					<div class="pg-editor">
 						<div class="pg-marks" id="pg-marks" aria-hidden="true"></div>
 						<textarea id="pg-sql" spellcheck="false" autocomplete="off" autocapitalize="off"></textarea>

website/public/playground/playground.js

@@ -2,10 +2,10 @@
 // worker) and shows its stages; translated SQL runs in DuckDB-WASM, which downloads in the
 // background once the page is idle.
 
-import { DUCKDB_DIR, DUCKDB_WASM_BYTES } from './duckdb-version.js';
+import { DUCKDB_DIR, DUCKDB_EXTENSIONS, DUCKDB_WASM_BYTES } from './duckdb-version.js';
 import { ENGINE_DIR, ENGINE_WASM_BYTES } from './engine-version.js';
-import { CAPTIONS, EXAMPLES, ROWS, SCHEMA } from './examples.js';
-import { escape, rendered, resultTable, underlined } from './spans.js';
+import { CAPTIONS, EXAMPLE_GROUPS, EXAMPLES, ROWS, SCHEMA, stopLabel } from './examples.js';
+import { escape, previewLimit, rendered, resultTable, underlined } from './spans.js';
 
 const here = (path) => new URL(path, import.meta.url).href;
 const ENGINE_WASM = here(`${ENGINE_DIR}sqlquack_wasm_bg.wasm`);
@@ -328,7 +328,17 @@ async function loadDuckDB() {
 	const module = await import(moduleUrl);
 	const db = new module.AsyncDuckDB(new module.VoidLogger(), new Worker(workerUrl));
 	await db.instantiate(wasmUrl);
-	const version = await (await db.connect()).query('SELECT version() AS v');
+	const conn = await db.connect();
+	// The extensions this build lacks, from the site, before any SQL: DuckDB autoloads ICU while
+	// binding the first statement that needs it, which corrupts that statement's function lookups.
+	await conn.query(`SET custom_extension_repository = '${here(`${DUCKDB_DIR}extensions`)}'`);
+	for (const extension of DUCKDB_EXTENSIONS) {
+		await conn.query(`LOAD ${extension}`).catch((error) => {
+			throw new Error(`the ${extension} extension did not load: ${error.message ?? error}`);
+		});
+	}
+	const version = await conn.query('SELECT version() AS v');
+	await conn.close();
 	return { db, version: String(version.toArray()[0].v) };
 }
 
@@ -362,6 +372,8 @@ async function execute() {
 	if (!sql) return;
 	const ticket = ++running;
 	setStage('run', 'running', '');
+	// Whether the error came from the translated statement itself, after the fixture loaded.
+	let ranStatement = false;
 	try {
 		if (!duckdb) await startDuckDB();
 		const conn = await duckdb.db.connect();
@@ -371,6 +383,7 @@ async function execute() {
 			for (const table of tables.tables) await conn.query(table.replace(/^CREATE TABLE/, 'CREATE OR REPLACE TABLE'));
 			if (rowsBox.value.trim()) await conn.query(rowsBox.value);
 			const started = performance.now();
+			ranStatement = true;
 			// Every value as DuckDB's own text, so decimals and timestamps show exactly.
 			const result = await conn.query(`SELECT COLUMNS(*)::VARCHAR FROM (${sql}) AS result`);
 			const elapsed = performance.now() - started;
@@ -392,6 +405,20 @@ async function execute() {
 		const failure = JSON.parse((await engine('failure', { message })).result);
 		if (ticket !== running) return;
 		const version = duckdb ? `DuckDB ${duckdb.version}` : '';
+		if (!failure.errno && ranStatement && previewLimit(message)) {
+			setStage(
+				'run',
+				'refused',
+				'<p class="pg-conversion-note"><strong>A limit of the in-browser DuckDB, not of the translation.</strong> ' +
+					'This page runs a preview build of DuckDB-WASM, which could not run this translated SQL. SQLQuack translates for ' +
+					'native DuckDB 2.0: <code>sqlquack convert</code> binds every translated statement in native DuckDB before ' +
+					'returning it, so run it there to see the result.</p>' +
+					terminal(`<span class="dim">DuckDB-WASM:</span> ${escape(message)}`),
+				version,
+				'not run here',
+			);
+			return;
+		}
 		if (!failure.errno) {
 			setStage('run', 'fail', terminal(`<span class="bad">DuckDB:</span> ${escape(message)}`), version);
 			return;
@@ -426,6 +453,13 @@ document.addEventListener('click', (event) => {
 });
 sqlBox.addEventListener('input', () => {
 	showCaption(null);
+	// Edited SQL is no longer the example, so neither the chip nor the link names it any more.
+	if (activeExample) {
+		setActiveExample(null);
+		const url = new URL(location.href);
+		url.searchParams.delete('example');
+		history.replaceState(null, '', url);
+	}
 	schedule();
 });
 schemaBox.addEventListener('input', schedule);
@@ -436,11 +470,45 @@ $('#pg-load-policy').addEventListener('click', async () => {
 });
 rowsBox.addEventListener('input', () => latest && duckdb && schedule());
 sqlBox.addEventListener('scroll', () => (marks.scrollTop = sqlBox.scrollTop));
-$('#pg-example').addEventListener('change', (event) => {
-	if (!EXAMPLES[event.target.value]) return;
-	sqlBox.value = EXAMPLES[event.target.value];
-	showCaption(event.target.value);
-	event.target.value = '';
+
+// The example chips: one click loads an example and runs it, and the link names it
+// (`?example=<slug>`) so it can be shared.
+const examples = EXAMPLE_GROUPS.flatMap((group) => group.examples);
+const examplesBox = $('#pg-examples');
+examplesBox.innerHTML = EXAMPLE_GROUPS.map(
+	(group) =>
+		`<div class="pg-group"><p class="pg-group-head"><strong>${escape(group.title)}</strong> <span>${escape(group.tagline)}</span></p>` +
+		'<div class="pg-chips">' +
+		group.examples
+			.map(
+				(example) =>
+					`<button class="pg-chip" type="button" aria-pressed="false" data-example="${example.key}" data-stops="${example.stops ?? 'none'}">` +
+					`<span class="pg-chip-name">${escape(example.name)}</span><span class="pg-chip-stop">${escape(stopLabel(example.stops))}</span></button>`,
+			)
+			.join('') +
+		'</div></div>',
+).join('');
+
+let activeExample = null;
+function setActiveExample(key) {
+	activeExample = key;
+	for (const chip of examplesBox.querySelectorAll('.pg-chip')) chip.setAttribute('aria-pressed', String(chip.dataset.example === key));
+}
+
+function loadExample(key) {
+	sqlBox.value = EXAMPLES[key];
+	showCaption(key);
+	setActiveExample(key);
+}
+
+examplesBox.addEventListener('click', (event) => {
+	const key = event.target.closest('.pg-chip')?.dataset.example;
+	if (!key) return;
+	loadExample(key);
+	const url = new URL(location.href);
+	url.searchParams.delete('sql');
+	url.searchParams.set('example', examples.find((example) => example.key === key).slug);
+	history.replaceState(null, '', url);
 	run();
 });
 
@@ -462,8 +530,13 @@ sqlBox.addEventListener('mousemove', (event) => {
 sqlBox.addEventListener('mouseleave', () => (tip.hidden = true));
 
 const params = new URLSearchParams(location.search);
-sqlBox.value = params.get('sql') ?? EXAMPLES[params.get('example')] ?? EXAMPLES.valid;
-if (!params.get('sql')) showCaption(params.get('example'));
+if (params.get('sql') !== null) sqlBox.value = params.get('sql');
+else {
+	// A slug, or an example's key as earlier links used; anything else opens the default quietly.
+	const requested = params.get('example');
+	const key = examples.find((example) => example.slug === requested)?.key ?? (Object.hasOwn(EXAMPLES, requested ?? '') ? requested : 'valid');
+	loadExample(key);
+}
 schemaBox.value = SCHEMA;
 rowsBox.value = ROWS;
 setStage('parse', 'loading', '', 'loading the engine…', 'loading');

website/public/playground/spans.js

@@ -69,3 +69,10 @@ export function resultTable(names, columns) {
 	const head = names.map((name) => `<th>${escape(name)}</th>`).join('');
 	return { html: `<div class="pg-rows"><table><thead><tr>${head}</tr></thead><tbody>${body.join('')}</tbody></table></div>`, rows };
 }
+
+// Whether a DuckDB-WASM error on a translated statement comes from the in-browser engine rather
+// than from the rows: a statement it could not bind or plan, or a crash of the WebAssembly engine.
+// The playground runs a preview build of DuckDB-WASM; errors about values (conversion, out of
+// range) would be raised by native DuckDB too, so they are not counted.
+const PREVIEW_LIMITS = /^(Binder|Catalog|Parser|Not implemented|INTERNAL) Error|memory access out of bounds|unreachable|RuntimeError/;
+export const previewLimit = (message) => PREVIEW_LIMITS.test(message);

website/public/styles.css

@@ -1135,13 +1135,92 @@ footer a {
 	font-weight: 500;
 }
 
-.pg-label select {
-	padding: 4px 8px;
+/* Example chips above the editor, in groups by what SQLQuack does with them. */
+.pg-examples {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 16px 32px;
+	padding-top: 28px;
+}
+
+.pg-group-head {
+	margin: 0 0 8px;
+	color: var(--muted-foreground);
+	font-size: 13px;
+}
+
+.pg-group-head strong {
+	color: var(--foreground);
+	font-weight: 600;
+}
+
+.pg-group-head span::before {
+	content: '· ';
+}
+
+.pg-chips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
+.pg-chip {
+	display: inline-flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 2px;
+	padding: 7px 12px;
 	border: 1px solid var(--inner-line);
 	border-radius: var(--radius);
 	background: var(--panel);
 	color: var(--foreground);
 	font: inherit;
+	text-align: left;
+	cursor: pointer;
+}
+
+.pg-chip:hover {
+	border-color: var(--faint);
+}
+
+.pg-chip:focus-visible {
+	outline: 2px solid var(--primary);
+	outline-offset: 2px;
+}
+
+.pg-chip[aria-pressed='true'] {
+	border-color: var(--primary);
+	background: var(--accent-soft);
+	box-shadow: inset 0 0 0 1px var(--primary);
+}
+
+.pg-chip-name {
+	font-size: 14px;
+	font-weight: 550;
+}
+
+.pg-chip-stop {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	color: var(--muted-foreground);
+	font-size: 12px;
+}
+
+.pg-chip-stop::before {
+	content: '';
+	width: 7px;
+	height: 7px;
+	border-radius: 50%;
+	background: var(--error);
+}
+
+.pg-chip[data-stops='none'] .pg-chip-stop::before {
+	background: var(--success);
+}
+
+.pg-chip[data-stops='translate'] .pg-chip-stop::before {
+	background: var(--warning);
 }
 
 .pg-editor {
@@ -1477,3 +1556,9 @@ footer a {
 		grid-template-columns: minmax(0, 1fr);
 	}
 }
+
+@media (max-width: 620px) {
+	.pg-examples {
+		flex-direction: column;
+	}
+}