refactor: update catalog store and table components for improved performance and metrics tracking

- worker client middle man class for handling communication between worker and catalog store.
- Tracking search request duration and displaying on client

Author: githyperplexed

src/lib/components/search/results.svelte

@@ -15,5 +15,5 @@
 	bind:query={catalog.query}
 	type={catalog.type}
 	onsort={(key) => catalog.toggleSort(key)}
-	onloadrange={(offset, limit) => catalog.loadRange(offset, limit)}
+	onloadrange={(offset, limit) => catalog.load(offset, limit)}
 />

src/lib/components/table/showing.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
+	import Badge from "$lib/components/ui/badge.svelte";
+
 	interface Props {
 		count: number;
 		total: number;
+		duration: number;
 	}
 
-	let { count, total }: Props = $props();
+	let { count, total, duration }: Props = $props();
 </script>
 
-{#if count !== total}
-	<span>Showing {count.toLocaleString()} of {total.toLocaleString()} results</span>
-{:else}
-	<span>Showing {count.toLocaleString()} results</span>
-{/if}
+<div class="flex items-center gap-2">
+	<span>Showing {count.toLocaleString()} of {total.toLocaleString()}</span>
+	<Badge variant="brand">{duration.toFixed(0)}ms</Badge>
+</div>

src/lib/components/table/table.svelte

@@ -82,12 +82,16 @@
 		/>
 	</div>
 
-	<div class="w-full h-8 px-4 py-2 border-b border-neutral-900 bg-neutral-950 shrink-0 flex items-center justify-between text-xs text-neutral-500">
+	<div class="w-full h-8 px-4 py-2 border-b border-neutral-900 bg-neutral-950 shrink-0 flex items-center justify-between text-xs text-neutral-400">
 		<div class="flex items-center gap-2">
 			{#if config.status === "pending"}
 				<Spinner class="w-3 h-3 text-neutral-500" />
 			{:else}
-				<Showing count={config.count} total={config.total} />
+				<Showing 
+					count={config.count} 
+					total={config.total} 
+					duration={config.duration} 
+				/>
 			{/if}
 		</div>
 	</div>

src/lib/stores/catalog.svelte.ts

@@ -1,12 +1,13 @@
 import { setContext, getContext } from "svelte";
 
-import SearchWorker from "$lib/workers/search.worker?worker";
+import { SearchClient } from "$lib/workers/client";
+import { MetricsStore } from "$lib/stores/metrics.svelte";
+import { getNextSortState } from "$lib/utilities/sort";
 
 import type { Store } from "$lib/types/store";
 import type { CatalogType } from "$lib/types/catalog";
 import type { Status } from "$lib/types/status";
 import { SortStateSchema, type SortState } from "$lib/types/table";
-import type { WorkerToMainMessage } from "$lib/types/worker";
 
 export class CatalogStore {
 	status = $state<Status>("pending");
@@ -15,45 +16,40 @@ export class CatalogStore {
 	results = $state<Store[]>([]);
 	offset = $state(0);
 
+	metrics = new MetricsStore();
+	
 	_query = $state("");
 	_type = $state<CatalogType>("stores");
 	_sort = $state<SortState>(SortStateSchema.parse({}));
 
-	worker: Worker | undefined;
-
-	private requestId = 0;
-	private ready = false;
+	client: SearchClient | undefined;
 
 	constructor() {
 		if (typeof window !== "undefined") {
-			this.worker = new SearchWorker();
-
-			this.worker.onmessage = (e: MessageEvent<WorkerToMainMessage>) => {
-				const message = e.data;
-
-				if (message.type === "ready") {
-					this.ready = true;
-					this.count = message.count;
-					this.total = message.count;
+			this.client = new SearchClient({
+				onReady: (count) => {
+					this.count = count;
+					this.total = count;
 					this.search(this.query, 0, 40);
-				} else if (message.type === "results") {
-					if (message.id === this.requestId && message.id !== undefined) {
-						this.results = message.results;
-						this.count = message.total;
-						this.offset = message.offset;
-						this.status = "success";
+				},
+				onResults: (results, total, offset) => {
+					this.results = results;
+					this.count = total;
+					this.offset = offset;
+					this.status = "success";
+					if (this.offset === 0) {
+						this.metrics.stop();
 					}
-				} else if (message.type === "error") {
+				},
+				onError: (error) => {
 					this.status = "error";
-					console.error("Catalog error:", message.error);
+					console.error("Catalog error:", error);
 				}
-			};
-
-			this.worker.onerror = () => {
-				this.status = "error";
-			};
+			});
 
-			this.load();
+			this.metrics.start();
+			
+			this.init();
 		}
 	}
 
@@ -63,6 +59,7 @@ export class CatalogStore {
 
 	set query(value: string) {
 		this._query = value;
+		this.metrics.start();
 		this.search(value, 0, 40);
 	}
 
@@ -72,60 +69,48 @@ export class CatalogStore {
 
 	set type(value: CatalogType) {
 		this._type = value;
-		this.status = "pending";
-		this.results = [];
-		this.count = 0;
-		this.total = 0;
-		this._query = "";
-		this._sort = SortStateSchema.parse({});
-		this.ready = false;
-		this.load();
+
+		this.reset();
+
+		this.metrics.restart();
+
+		this.init();
 	}
 
 	get sort() {
 		return this._sort;
 	}
 
 	toggleSort(key: string) {
-		if (this._sort.key === key) {
-			if (this._sort.direction === "asc") {
-				this._sort = { key, direction: "desc" };
-			} else {
-				this._sort = SortStateSchema.parse({});
-			}
-		} else {
-			this._sort = { key, direction: "asc" };
-		}
-
+		this._sort = getNextSortState(this._sort, key);
+		this.metrics.start();
 		this.search(this.query, 0, 40);
 	}
 
-	load() {
-		if (this.worker) {
-			this.worker.postMessage({ type: "load", payload: `/${this.type}.json` });
-		}
+	init() {
+		this.client?.load(`/${this.type}.json`);
 	}
 
 	search(q: string, offset: number = 0, limit: number = 20) {
-		if (this.ready && this.worker) {
-			this.requestId++;
-			this.worker.postMessage({ 
-				type: "search", 
-				payload: q,
-				offset,
-				limit,
-				sort: this._sort.key ? { ...this._sort } : undefined,
-				id: this.requestId
-			});
-		}
+		this.client?.search(q, offset, limit, this._sort);
 	}
 
-	loadRange(offset: number, limit: number) {
+	load(offset: number, limit: number) {
 		this.search(this.query, offset, limit);
 	}
 
+	reset() {
+		this.status = "pending";
+		this.results = [];
+		this.count = 0;
+		this.total = 0;
+
+		this._query = "";
+		this._sort = SortStateSchema.parse({});
+	}
+
 	destroy() {
-		this.worker?.terminate();
+		this.client?.terminate();
 	}
 }
 

src/lib/stores/metrics.svelte.ts

@@ -0,0 +1,30 @@
+export class MetricsStore {
+	duration = $state(0);
+
+	private startTime = 0;
+	private shouldUpdate = false;
+
+	start() {
+		this.startTime = performance.now();
+		this.shouldUpdate = true;
+	}
+
+	stop() {
+		if (this.shouldUpdate) {
+			this.duration = performance.now() - this.startTime;
+			this.shouldUpdate = false;
+		}
+	}
+
+	reset() {
+		this.duration = 0;
+		this.startTime = 0;
+		this.shouldUpdate = false;
+	}
+
+	restart() {
+		this.reset();
+		this.start();
+	}
+}
+

src/lib/stores/virtualization.svelte.ts

@@ -3,7 +3,6 @@ import { getRange, getSpacers } from "$lib/utilities/virtualization";
 import { type TableConfig, TableConfigSchema } from "$lib/types/table";
 
 export class Virtualizer {
-	// Scroll State
 	scrollTop = $state(0);
 	viewportHeight = $state(800);
 	innerWidth = $state(1024);

src/lib/types/table.ts

@@ -22,6 +22,7 @@ export const TableConfigSchema = z.object({
 	columns: z.array(ColumnSchema).default([]),
 	count: z.number().default(0),
 	total: z.number().default(0),
+	duration: z.number().default(0),
 	status: StatusSchema.default("idle"),
 	sort: SortStateSchema.default({
 		key: "",

src/lib/utilities/catalog.ts

@@ -1,15 +1,16 @@
-import type { Catalog } from "$lib/stores/catalog.svelte";
+import type { CatalogStore } from "$lib/stores/catalog.svelte";
 
 import { getColumns } from "$lib/utilities/columns";
 
 import type { TableConfig } from "$lib/types/table";
 
-export const mapConfig = (catalog: Catalog, title: string, placeholder = "Search..."): TableConfig => {
+export const mapConfig = (catalog: CatalogStore, title: string, placeholder = "Search..."): TableConfig => {
 	return {
 		data: catalog.results,
 		columns: getColumns(catalog.type),
 		count: catalog.count,
 		total: catalog.total,
+		duration: catalog.metrics.duration,
 		status: catalog.status,
 		sort: catalog.sort,
 		title,

src/lib/utilities/sort.ts

@@ -21,4 +21,14 @@ export const compare = (a: Store, b: Store, sort: SortState): number => {
 	return 0;
 };
 
+export const getNextSortState = (current: SortState, key: string): SortState => {
+	if (current.key === key) {
+		if (current.direction === "asc") {
+			return { key, direction: "desc" };
+		}
+		return { key: "", direction: "asc" };
+	}
+	return { key, direction: "asc" };
+};
+
 

src/lib/workers/client.ts

@@ -0,0 +1,62 @@
+import SearchWorker from "$lib/workers/search.worker?worker";
+import type { WorkerToMainMessage } from "$lib/types/worker";
+import type { Store } from "$lib/types/store";
+import type { SortState } from "$lib/types/table";
+
+type SearchClientCallbacks = {
+	onReady: (count: number) => void;
+	onResults: (results: Store[], total: number, offset: number) => void;
+	onError: (error: string) => void;
+}
+
+export class SearchClient {
+	private worker: Worker;
+	private requestId = 0;
+	private ready = false;
+
+	constructor(private callbacks: SearchClientCallbacks) {
+		this.worker = new SearchWorker();
+		this.worker.onmessage = this.handleMessage.bind(this);
+		this.worker.onerror = () => this.callbacks.onError("Worker error");
+	}
+
+	private handleMessage(e: MessageEvent<WorkerToMainMessage>) {
+		const message = e.data;
+
+		if (message.type === "ready") {
+			this.ready = true;
+			this.callbacks.onReady(message.count);
+		} else if (message.type === "results") {
+			if (message.id === this.requestId) {
+				this.callbacks.onResults(message.results, message.total, message.offset);
+			}
+		} else if (message.type === "error") {
+			this.callbacks.onError(message.error);
+		}
+	}
+
+	load(url: string) {
+		this.ready = false;
+		this.worker.postMessage({ type: "load", payload: url });
+	}
+
+	search(query: string, offset: number, limit: number, sort: SortState) {
+		if (!this.ready) return;
+		
+		this.requestId++;
+    
+		this.worker.postMessage({
+			type: "search",
+			payload: query,
+			offset,
+			limit,
+			sort: sort.key ? { key: sort.key, direction: sort.direction } : undefined,
+			id: this.requestId
+		});
+	}
+
+	terminate() {
+		this.worker.terminate();
+	}
+}
+