feat(ui): queries can now have a title

Author: oktal

src/lib/components/explorer/EntityTree.svelte

@@ -49,7 +49,7 @@
 
 	let dragHoverClass = $derived($mode === 'light' ? 'draghover' : 'draghover-dark');
 
-	function toggleExpanded({ id }: { id: string }) {
+	function toggleExpanded(id: string) {
 		if (!expandMap.has(id)) {
 			let expanded = $state(true);
 			expandMap.set(id, {
@@ -194,7 +194,7 @@
 			builders={[builder]}
 			variant="ghost"
 			class="flex w-full justify-start gap-1"
-			on:click={() => toggleExpanded({ id })}
+			on:click={() => toggleExpanded(id)}
 			ondrop={(e: DropEvent) => handleDropEvent(e, dropProperties)}
 			ondragenter={handleDragEnter}
 			ondragleave={handleDragLeave}

src/lib/components/explorer/QueryHistory.svelte

@@ -25,17 +25,18 @@
 </script>
 
 <div class="flex flex-col gap-2">
-	{#each queriesStore.streams as stream}
-		{@const streamInfo = queriesStore.getStreamInfo(stream)}
+	{#each queriesStore.entries as entry}
+		{@const streamInfo = queriesStore.getStreamInfo(entry.stream)}
 		<div class="flex flex-row">
 			<Label class="flex flex-col">
 				<span>{streamInfo.id}</span>
+				<span class="text-xs font-bold">{entry.title}</span>
 				<span class="text-pretty text-xs text-muted-foreground">{streamInfo.query}</span>
-				{#if stream.kind === 'full'}
+				{#if entry.stream.kind === 'full'}
 					<div class="flex gap-1">
 						<Icon icon="carbon:save" width={16} height={16} />
 						<span class="text-pretty text-xs text-muted-foreground"
-							>{stream.stream.rows.length} rows</span
+							>{entry.stream.stream.rows.length} rows</span
 						>
 					</div>
 				{/if}

src/lib/components/query/QueryPane.svelte

@@ -11,6 +11,7 @@
 	import ExportDialog from '$lib/components/dialog/ExportDialog.svelte';
 	import QueryResultsTable from './QueryResultsTable.svelte';
 	import { queryPaneGroup, type SplitDirection } from './QueryPaneGroup.svelte';
+	import { DEFAULT_QUERY_TITLE } from './QueryPane.svelte';
 
 	import Icon from '@iconify/svelte';
 	import { mount } from 'svelte';
@@ -28,6 +29,33 @@
 
 	let { direction, paneId, closable = false }: Props = $props();
 
+	class QueryTitle {
+		mode = $state<'show' | 'edit'>('show');
+		value = $state(queryPaneGroup.panes[paneId].title);
+
+		toggleEdit() {
+			if (this.mode === 'show') this.mode = 'edit';
+			else {
+				queryPaneGroup.setTitle(paneId, this.value);
+				this.mode = 'show';
+			}
+		}
+
+		handleKeyDown(ev: KeyboardEvent) {
+			if (ev.code === 'Enter') this.toggleEdit();
+		}
+
+		focus(input: HTMLInputElement) {
+			input.focus();
+		}
+
+		reset() {
+			this.mode = 'show';
+			this.value = DEFAULT_QUERY_TITLE;
+		}
+	}
+
+	const queryTitle = new QueryTitle();
 	let queryError: any | undefined = $state(undefined);
 
 	let editorLanguage = $state('mysql');
@@ -58,7 +86,7 @@
 		} else {
 			try {
 				queryError = undefined;
-				await queryPaneGroup.run(paneId);
+				await queryPaneGroup.run(paneId, queryTitle.value);
 			} catch (e) {
 				handleError(e);
 			}
@@ -84,6 +112,11 @@
 			toast.error(`Failed to export data: ${e}`);
 		}
 	}
+
+	function clear() {
+		queryTitle.reset();
+		queryPaneGroup.clear(paneId);
+	}
 </script>
 
 <div class="relative flex h-full max-h-screen w-full flex-col gap-1 overflow-auto">
@@ -181,7 +214,7 @@
 				icon: 'carbon:erase',
 				tooltip: 'Clear',
 				disabled: queryStream === undefined,
-				action: () => queryPaneGroup.clear(paneId)
+				action: clear
 			})}
 
 			{@render topBarItem({
@@ -192,6 +225,26 @@
 			})}
 		</div>
 
+		<Separator orientation="vertical" />
+		<div class="ml-2 flex items-center gap-1">
+			{#if queryTitle.mode === 'show'}
+				<Label class="ml-2">{queryTitle.value}</Label>
+			{:else if queryTitle.mode === 'edit'}
+				<input
+					bind:value={queryTitle.value}
+					class="border-input bg-background text-sm ring-offset-background"
+					onkeydown={(e) => queryTitle.handleKeyDown(e)}
+					use:queryTitle.focus
+				/>
+			{/if}
+			{@render topBarItem({
+				icon: queryTitle.mode === 'show' ? 'carbon:pen' : 'carbon:checkmark',
+				tooltip: 'Rename query',
+				disabled: false,
+				action: () => queryTitle.toggleEdit()
+			})}
+		</div>
+
 		<div class="ml-auto mr-2 flex gap-1">
 			{#if closable}
 				<Button

src/lib/components/query/QueryPaneGroup.svelte.ts

@@ -1,30 +1,52 @@
 import type { StreamId } from "$lib/lens/types";
-import { queriesStore } from "$lib/stores/queries.svelte";
+import { queriesStore, type QueryStoreEntry } from "$lib/stores/queries.svelte";
 import type { QueryStream } from "$lib/stores/QueryStream.svelte";
 
 export type SplitDirection = 'vertical' | 'horizontal';
+export const DEFAULT_QUERY_TITLE: string = 'Unnamed';
 
-type PaneInfo = {
-  get query(): string,
-  set query(val: string),
+class QueryPane {
+  query = $state('');
+  title = $state('');
+  stream = $state<QueryStream | undefined>(undefined);
 
-  stream?: QueryStream,
-};
+  streamId?: StreamId;
 
-function usePane(queryString?: string): PaneInfo {
-  let query = $state(queryString ?? '');
+  constructor(queryString?: string, title: string = DEFAULT_QUERY_TITLE) {
+    this.query = queryString ?? '';
+    this.title = title;
+  }
+
+  clear() {
+    this.query = '';
+    this.title = DEFAULT_QUERY_TITLE;
+
+    this.streamId = undefined;
+    this.stream = undefined;
+  }
+
+  renew(entry: QueryStoreEntry) {
+    const { title, stream } = entry;
 
-  return {
-    get query(): string { return query },
-    set query(val: string) { query = val },
+    this.title = title;
 
-    stream: undefined,
-  };
+    if (stream.kind === 'partial') {
+      this.query = stream.query;
+      this.streamId = stream.id;
+      this.stream = undefined;
+    } else if (stream.kind === 'full') {
+      const { query, streamId } = stream.stream;
+
+      this.query = query;
+      this.streamId = streamId;
+      this.stream = stream.stream;
+    }
+  }
 }
 
 export class QueryPaneGroup {
   direction = $state<SplitDirection | undefined>(undefined);
-  panes = $state<PaneInfo[]>([usePane(undefined)]);
+  panes = $state<QueryPane[]>([new QueryPane('')]);
   overlayVisible = $state(false);
 
   constructor() {
@@ -34,7 +56,7 @@ export class QueryPaneGroup {
     this.direction = direction;
 
     if (this.panes.length == 1) {
-      this.panes.push(usePane(undefined))
+      this.panes.push(new QueryPane(''))
     }
   }
 
@@ -49,21 +71,11 @@ export class QueryPaneGroup {
     if (paneId >= this.panes.length)
       throw new Error(`invalid pane ${paneId}`);
 
-    const stream = queriesStore.get(streamId);
-    if (!stream)
-      throw new Error(`Could not find stream for id ${streamId}`);
+    const entry = queriesStore.get(streamId);
+    if (!entry)
+      throw new Error(`Could not find query for stream ${streamId}`);
 
-    if (stream.kind === 'partial') {
-      this.panes[paneId] = {
-        query: stream.query,
-        stream: undefined
-      }
-    } else if (stream.kind === 'full') {
-      this.panes[paneId] = {
-        query: stream.stream.query,
-        stream: stream.stream
-      }
-    }
+    this.panes[paneId].renew(entry);
   }
 
   save(paneId: number) {
@@ -75,25 +87,33 @@ export class QueryPaneGroup {
       queriesStore.save(stream);
   }
 
+  setTitle(paneId: number, title: string) {
+    if (paneId >= this.panes.length)
+      throw new Error(`invalid pane ${paneId}`);
+
+    const streamId = this.panes[paneId]?.streamId;
+    if (streamId)
+      queriesStore.setTitle(streamId, title);
+
+  }
+
   clear(paneId: number) {
     if (paneId >= this.panes.length)
       throw new Error(`invalid pane ${paneId}`);
 
-    this.panes[paneId].stream = undefined;
-    this.panes[paneId].query = '';
+    this.panes[paneId].clear();
   }
 
-  async run(paneId: number): Promise<QueryStream> {
+  async run(paneId: number, title: string): Promise<QueryStream> {
     if (paneId >= this.panes.length)
       throw new Error(`invalid pane ${paneId}`);
 
     const query = this.panes[paneId].query;
-    const stream = await queriesStore.run(query);
+    const stream = await queriesStore.run(query, title);
+
+    this.panes[paneId].streamId = stream.streamId;
+    this.panes[paneId].stream = stream;
 
-    this.panes[paneId] = {
-      query,
-      stream
-    }
     return stream;
   }
 

src/lib/stores/queries.svelte.ts

@@ -6,34 +6,46 @@ type StreamInfo = {
   query: string;
 }
 
-type Stream = {
+export type QueryStoreStream = {
   kind: 'partial',
   id: StreamId;
   query: string;
 } |
 { kind: 'full', stream: QueryStream };
 
+export class QueryStoreEntry {
+  title = $state('');
+  query: string;
+  stream: QueryStoreStream;
+
+  constructor(stream: QueryStream, title: string) {
+    const { streamId: id, query } = stream;
+
+    this.title = title;
+    this.query = query;
+
+    this.stream = {
+      kind: 'partial',
+      id,
+      query,
+    }
+  }
+}
 
 class QueriesStore {
   private maxHistory?: number;
-  streams = $state<Stream[]>([]);
+  entries = $state<QueryStoreEntry[]>([]);
 
   constructor(maxHistory?: number) {
     this.maxHistory = maxHistory;
   }
 
-  async run(query: string): Promise<QueryStream> {
+  async run(query: string, title: string): Promise<QueryStream> {
     const addToHistory = ({ stream }: { stream: QueryStream }) => {
-      const { streamId: id, query } = stream;
-
-      this.streams.push({
-        kind: 'partial',
-        query,
-        id
-      });
+      this.entries.push(new QueryStoreEntry(stream, title));
 
-      if (this.maxHistory && this.streams.length >= this.maxHistory) {
-        this.streams.splice(0, 1);
+      if (this.maxHistory && this.entries.length >= this.maxHistory) {
+        this.entries.splice(0, 1);
       }
     };
 
@@ -42,12 +54,20 @@ class QueriesStore {
     return stream;
   }
 
+  setTitle(streamId: StreamId, title: string) {
+    let index = this.entries.findIndex(e => streamId === this.getStreamId(e.stream));
+    if (index === undefined)
+      return;
+
+    this.entries[index].title = title;
+  }
+
   save(stream: QueryStream): boolean {
-    let index = this.streams.findIndex(s => stream.streamId === this.getStreamId(s));
+    let index = this.entries.findIndex(e => stream.streamId === this.getStreamId(e.stream));
     if (index === undefined)
       return false;
 
-    this.streams[index] = {
+    this.entries[index].stream = {
       kind: 'full',
       stream
     };
@@ -56,16 +76,16 @@ class QueriesStore {
   }
 
   delete(id: StreamId): boolean {
-    const oldLen = this.streams.length;
-    this.streams = this.streams.filter(s => id !== this.getStreamId(s));
-    return oldLen > this.streams.length;
+    const oldLen = this.entries.length;
+    this.entries = this.entries.filter(e => id !== this.getStreamId(e.stream));
+    return oldLen > this.entries.length;
   }
 
-  get(id: StreamId): Stream | undefined {
-    return this.streams.find(s => id === this.getStreamId(s));
+  get(id: StreamId): QueryStoreEntry | undefined {
+    return this.entries.find(e => id === this.getStreamId(e.stream));
   }
 
-  getStreamInfo(stream: Stream): StreamInfo {
+  getStreamInfo(stream: QueryStoreStream): StreamInfo {
     if (stream.kind === 'partial') {
       const { id, query } = stream;
       return { id, query };
@@ -79,7 +99,7 @@ class QueriesStore {
     throw new Error("Can't determine information for stream");
   }
 
-  getStreamId(stream: Stream): StreamId {
+  getStreamId(stream: QueryStoreStream): StreamId {
     return this.getStreamInfo(stream).id;
   }
 }