Upgrade to mosaic v0.18 (#81)

Author: manzt

deno.json

@@ -22,13 +22,13 @@
 		"include": ["lib", "README.md"]
 	},
 	"imports": {
-		"@js-temporal/polyfill": "npm:@js-temporal/polyfill@~0.4.4",
+		"@js-temporal/polyfill": "npm:@js-temporal/polyfill@^0.5.1",
 		"@lukeed/uuid": "npm:@lukeed/uuid@^2.0.1",
-		"@preact/signals-core": "npm:@preact/signals-core@^1.8.0",
-		"@uwdata/flechette": "npm:@uwdata/flechette@^1.1.0",
-		"@uwdata/mosaic-core": "npm:@uwdata/mosaic-core@~0.11.0",
-		"@uwdata/mosaic-plot": "npm:@uwdata/mosaic-plot@~0.11.0",
-		"@uwdata/mosaic-sql": "npm:@uwdata/mosaic-sql@~0.11.0",
+		"@preact/signals-core": "npm:@preact/signals-core@^1.11.0",
+		"@uwdata/flechette": "npm:@uwdata/flechette@^2.1.0",
+		"@uwdata/mosaic-core": "npm:@uwdata/mosaic-core@~0.18.0",
+		"@uwdata/mosaic-plot": "npm:@uwdata/mosaic-plot@~0.18.0",
+		"@uwdata/mosaic-sql": "npm:@uwdata/mosaic-sql@~0.18.0",
 		"d3": "npm:d3@^7.9.0",
 		"htl": "npm:htl@~0.3.1"
 	},

deno.lock

@@ -1,14 +1,17 @@
 import * as flech from "@uwdata/flechette";
-// @ts-types="../deps/mosaic-core.d.ts"
 import {
 	type Coordinator,
-	type FieldInfo,
-	type FieldRequest,
 	MosaicClient,
+	queryFieldInfo,
 	Selection,
 } from "@uwdata/mosaic-core";
-// @ts-types="../deps/mosaic-sql.d.ts"
-import { desc, Query, type SQLExpression } from "@uwdata/mosaic-sql";
+import {
+	asc,
+	desc,
+	type FilterExpr,
+	Query,
+	type SelectQuery,
+} from "@uwdata/mosaic-sql";
 import * as signals from "@preact/signals-core";
 import { html } from "htl";
 
@@ -21,6 +24,7 @@ import { signal } from "@preact/signals-core";
 
 import stylesString from "./styles.css.ts";
 import { StatusBar } from "./StatusBar.ts";
+import { isFlechetteTable } from "../utils/guards.ts";
 
 interface DataTableOptions {
 	table: string;
@@ -55,7 +59,9 @@ export async function datatable(
 			.from(table)
 			.select(options.columns ?? ["*"])
 			.limit(0),
+		{ type: "arrow" },
 	);
+	assert(isFlechetteTable(empty), "Expected a flechette table");
 	let client = new DataTable({
 		table,
 		schema: empty.schema,
@@ -156,17 +162,6 @@ export class DataTable extends MosaicClient {
 		return this.#sql;
 	}
 
-	/**
-	 * Mosaic function. Client defines the fields to be requested from the coordinator.
-	 */
-	override fields(): Array<FieldRequest> {
-		return this.#columns.map((column) => ({
-			table: this.#meta.table,
-			column,
-			stats: [],
-		}));
-	}
-
 	node(): HTMLElement {
 		return this.#root;
 	}
@@ -187,10 +182,10 @@ export class DataTable extends MosaicClient {
 	 * @param filter - The filter predicates to apply to the query
 	 * @returns The query to be executed
 	 */
-	override query(filter: Array<unknown> = []): Query {
+	override query(filter?: FilterExpr | null | undefined): SelectQuery {
 		let query = Query.from(this.#meta.table)
 			.select(this.#columns)
-			.where(filter)
+			.where(filter ?? [])
 			.orderby(
 				this.#orderby
 					.filter((o) => o.order !== "unset")
@@ -227,7 +222,7 @@ export class DataTable extends MosaicClient {
 	/**
 	 * Mosaic lifecycle function called after `queryResult`
 	 */
-	update(): this {
+	override update(): this {
 		if (!this.#pendingInternalRequest) {
 			// on the first update, populate the table with initial data
 			this.#appendRows(this.#rows * 2);
@@ -244,21 +239,26 @@ export class DataTable extends MosaicClient {
 		this.requestQuery(query);
 
 		// prefetch subsequent data batch
-		this.coordinator.prefetch(query.clone().offset(offset + this.#limit));
+		this.coordinator!.prefetch(query.clone().offset(offset + this.#limit));
 	}
 
-	/**
-	 * Mosaic lifecycle function called when the client is connected to a coordinator.
-	 */
-	override fieldInfo(infos: Array<FieldInfo>): this {
+	override async prepare(): Promise<void> {
+		const infos = await queryFieldInfo(
+			this.coordinator!,
+			this.#columns.map((column) => ({
+				table: this.#meta.table,
+				column,
+				stats: [],
+			})),
+		);
 		let classes = classof(this.#meta.schema);
 
 		{
 			let statusBar = new StatusBar({
 				table: this.#meta.table,
 				filterBy: this.filterBy,
 			});
-			this.coordinator.connect(statusBar);
+			this.coordinator!.connect(statusBar);
 			this.#shadowRoot.querySelector(".quak")?.appendChild(
 				statusBar.node(),
 			);
@@ -290,7 +290,7 @@ export class DataTable extends MosaicClient {
 				});
 			}
 			let th = thcol(field, this.#columnWidth, vis);
-			this.coordinator.connect(vis);
+			this.coordinator!.connect(vis);
 			return th;
 		});
 
@@ -334,8 +334,6 @@ export class DataTable extends MosaicClient {
 				}
 			});
 		}
-
-		return this;
 	}
 
 	/** Number of rows to append */
@@ -557,23 +555,6 @@ function shouldGrayoutValue(value: string) {
 	);
 }
 
-/**
- * A mosaic SQL expression for ascending order
- *
- * The normal behavior in SQL is to sort nulls first when sorting in ascending order.
- * This function returns an expression that sorts nulls last (i.e., `NULLS LAST`),
- * like the `desc` function.
- *
- * @param field
- */
-function asc(field: string): SQLExpression {
-	// doesn't sort nulls for asc
-	let expr = desc(field);
-	// @ts-expect-error - private field
-	expr._expr[0] = expr._expr[0].replace("DESC", "ASC");
-	return expr;
-}
-
 /**
  * Adds custom wheel behavior to an HTML element, allowing either horizontal or vertical scrolling based on the scroll input.
  * Prevents default scrolling to stop event propagation to parent elements.

lib/clients/DataTable.ts

@@ -1,13 +1,10 @@
-// @ts-types="../deps/mosaic-core.d.ts";
 import {
-	type ColumnField,
 	type FieldInfo,
-	type FieldRequest,
 	MosaicClient,
+	queryFieldInfo,
 	type Selection,
 } from "@uwdata/mosaic-core";
-// @ts-types="../deps/mosaic-sql.d.ts";
-import { count, Query, type SQLExpression } from "@uwdata/mosaic-sql";
+import { count, type ExprNode, Query } from "@uwdata/mosaic-sql";
 import * as mplot from "@uwdata/mosaic-plot";
 import type * as flech from "@uwdata/flechette";
 
@@ -42,9 +39,9 @@ export class Histogram extends MosaicClient implements Mark {
 	};
 	#el: HTMLElement = document.createElement("div");
 	#select: {
-		x1: ColumnField;
-		x2: ColumnField;
-		y: SQLExpression;
+		x1: ExprNode;
+		x2: ExprNode;
+		y: ExprNode;
 	};
 	#interval: mplot.Interval1D | undefined = undefined;
 	#initialized: boolean = false;
@@ -71,26 +68,25 @@ export class Histogram extends MosaicClient implements Mark {
 		});
 	}
 
-	override fields(): Array<FieldRequest> {
-		return [
-			{
-				table: this.#source.table,
-				column: this.#source.column,
-				stats: ["min", "max"],
-			},
-		];
-	}
-
-	override fieldInfo(info: Array<FieldInfo>) {
+	override async prepare(): Promise<void> {
+		const info = await queryFieldInfo(
+			this.coordinator!,
+			[
+				{
+					table: this.#source.table,
+					column: this.#source.column,
+					stats: ["min", "max"],
+				},
+			],
+		);
 		this.#fieldInfo = info[0];
-		return this;
 	}
 	/**
 	 * Return a query specifying the data needed by this Mark client.
 	 * @param filter The filtering criteria to apply in the query.
 	 * @returns The client query
 	 */
-	override query(filter: Array<SQLExpression> = []): Query {
+	override query(filter: Array<ExprNode> = []): Query {
 		return Query
 			.from({ source: this.#source.table })
 			.select(this.#select)
@@ -128,7 +124,7 @@ export class Histogram extends MosaicClient implements Mark {
 	/* Required by the Mark interface */
 	type = "rectY";
 	/** Required by `mplot.bin` to get the field info. */
-	channelField(channel: string): FieldInfo {
+	channelField(channel: string) {
 		assert(channel === "x");
 		assert(this.#fieldInfo, "No field info yet");
 		return this.#fieldInfo;

lib/clients/Histogram.ts

@@ -1,11 +1,5 @@
-import * as flech from "@uwdata/flechette";
-// @ts-types="../deps/mosaic-core.d.ts"
-import {
-	type Interactor,
-	MosaicClient,
-	type Selection,
-} from "@uwdata/mosaic-core";
-// @ts-types="../deps/mosaic-sql.d.ts"
+import type * as flech from "@uwdata/flechette";
+import { MosaicClient, type Selection } from "@uwdata/mosaic-core";
 import { count, Query } from "@uwdata/mosaic-sql";
 import { assert } from "../utils/assert.ts";
 
@@ -35,18 +29,7 @@ export class StatusBar extends MosaicClient {
 		this.#el.classList.add("status-bar");
 
 		this.#button.addEventListener("mousedown", () => {
-			if (!this.filterBy) return;
-			// TODO: A better way to do this?
-			// We want to clear all the existing selections
-			// @see https://github.com/uwdata/mosaic/blob/8e63149753e7d6ca30274c032a04744e14df2fd6/packages/core/src/Selection.js#L265-L272
-			for (let { source } of this.filterBy.clauses) {
-				if (!isInteractor(source)) {
-					console.warn("Skipping non-interactor source", source);
-					continue;
-				}
-				source.reset();
-				this.filterBy.update(source.clause());
-			}
+			this.filterBy?.reset();
 		});
 
 		this.#button.style.visibility = "hidden";
@@ -61,21 +44,17 @@ export class StatusBar extends MosaicClient {
 	}
 
 	override query(filter = []) {
-		let query = Query.from(this.#table)
+		return Query.from(this.#table)
 			.select({ count: count() })
 			.where(filter);
-		return query;
 	}
 
 	override queryResult(table: flech.Table) {
+		let count: unknown = table.get(0)?.count ?? 0;
 		assert(
-			isNumericArrowField(
-				table.schema.fields.find((f) => f.name === "count"),
-			),
-			"Expected count field to be an integer or float",
+			typeof count === "number" && !Number.isNaN(count),
+			"Got NaN for count.",
 		);
-
-		let count = Number(table.get(0)?.count ?? 0);
 		if (!this.#totalRows) {
 			// we need to know the total number of rows to display
 			this.#totalRows = count;
@@ -94,18 +73,3 @@ export class StatusBar extends MosaicClient {
 		return this.#el;
 	}
 }
-
-function isObject(x: unknown): x is Record<string, unknown> {
-	return typeof x === "object" && x !== null && !Array.isArray(x);
-}
-
-function isInteractor(x: unknown): x is Interactor {
-	return isObject(x) && "clause" in x && "reset" in x;
-}
-
-function isNumericArrowField(field?: flech.Field) {
-	return (
-		field?.type.typeId === flech.Type.Int ||
-		field?.type.typeId === flech.Type.Float
-	);
-}