feat: add schema browser with table/column insertion for SQL editor

frontend/src2/components/Code.vue

@@ -137,5 +137,14 @@ defineExpose({
 		const _pos = Math.min(pos, code.value.length)
 		codeMirror.value.view.dispatch({ selection: { anchor: _pos, head: _pos } })
 	},
+	insertText: (text) => {
+		const view = codeMirror.value.view
+		const pos = view.state.selection.ranges[0].to
+		view.dispatch({
+			changes: { from: pos, insert: text },
+			selection: { anchor: pos + text.length, head: pos + text.length }
+		})
+		view.focus()
+	},
 })
 </script>

frontend/src2/query/components/NativeQueryEditor.vue

@@ -10,6 +10,7 @@ import { Query } from '../query'
 import QueryDataTable from './QueryDataTable.vue'
 import DataSourceSelector from './source_selector/DataSourceSelector.vue'
 import { createToast } from '../../helpers/toasts'
+import SchemaExplorer from './SchemaExplorer.vue'
 
 const query = inject<Query>('query')!
 query.autoExecute = false
@@ -55,6 +56,13 @@ async function format() {
 	}
 }
 
+const codeEditor = ref<InstanceType<typeof Code> | null>(null)
+function insertTextIntoEditor(text: string) {
+	if (codeEditor.value) {
+		codeEditor.value.insertText(text)
+	}
+}
+
 const dataSourceSchema = ref<Record<string, any>>({})
 const dataSourceStore = useDataSourceStore()
 wheneverChanges(
@@ -81,15 +89,15 @@ const completions = computed(() => {
 	Object.entries(dataSourceSchema.value).forEach(([table, tableData]) => {
 		schema[table] = tableData.columns.map((column: any) => ({
 			label: column.label,
-			detail: column.label,
+			detail: column.type,
 		}))
 	})
 
 	const tables = Object.entries(dataSourceSchema.value).map(([table, tableData]) => ({
 		label: table,
 		detail: tableData.label,
 	}))
-
+	console.log({ schema, tables })
 	return {
 		schema,
 		tables,
@@ -98,7 +106,9 @@ const completions = computed(() => {
 </script>
 
 <template>
-	<div class="flex flex-1 flex-col gap-4 overflow-hidden p-4">
+	<div class="flex flex-1 gap-4 overflow-hidden p-4">
+
+		<div class="flex flex-1 flex-col gap-4 overflow-hidden">
 		<div class="relative flex h-[55%] w-full flex-col rounded border">
 			<div class="flex flex-shrink-0 items-center gap-1 border-b p-1">
 				<DataSourceSelector v-model="data_source" placeholder="Select a data source" />
@@ -110,6 +120,7 @@ const completions = computed(() => {
 			</div>
 			<div class="flex-1 overflow-hidden">
 				<Code
+					ref="codeEditor"
 					:key="completions.tables.length"
 					v-model="sql"
 					language="sql"
@@ -154,5 +165,9 @@ const completions = computed(() => {
 		<div class="relative flex w-full flex-1 flex-col overflow-hidden rounded border">
 			<QueryDataTable :query="query" :enable-alerts="true" />
 		</div>
+		</div>
+		<div class="w-64 flex-shrink-0">
+			<SchemaExplorer :schema="dataSourceSchema" @insert-text="insertTextIntoEditor" />
+		</div>
 	</div>
 </template>

frontend/src2/query/components/SchemaExplorer.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { ChevronDown, ChevronRight, Search, Table2 , Calendar, HashIcon,SearchIcon,TypeIcon} from 'lucide-vue-next'
+import { computed, ref } from 'vue'
+
+interface Column {
+	label: string
+	detail: string
+	type: string
+}
+
+interface TableSchema {
+	[key: string]: {
+		label?: string
+		columns: Column[]
+	}
+}
+
+interface Props {
+	schema: TableSchema
+}
+
+interface Emits {
+	(e: 'insert-text', text: string): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+const expandedTables = ref<Set<string>>(new Set())
+const searchQuery = ref('')
+
+function toggleTable(tableName: string) {
+	if (expandedTables.value.has(tableName)) {
+		expandedTables.value.delete(tableName)
+	} else {
+		expandedTables.value.add(tableName)
+	}
+}
+function insertTableName(tableName: string) {
+	emit('insert-text', `\`${tableName}\``)
+}
+
+function insertColumnName(columnName: string) {
+	emit('insert-text', `\`${columnName}\`\,`)
+}
+
+function getColumnIcon(type: string) {
+	const colType = type?.toLowerCase() || ''
+
+	if (colType === 'string' ) {
+		return TypeIcon
+	} else if (colType === 'integer' || colType.includes('decimal')) {
+		return HashIcon
+	} else if (colType === 'date' || colType === 'datetime' || colType.includes('time')) {
+		return Calendar
+	} else {
+		return TypeIcon
+	}
+}
+
+const filteredSchema = computed(() => {
+	if (!searchQuery.value.trim()) {
+		expandedTables.value.clear()
+		return props.schema
+	}
+
+	const query = searchQuery.value.toLowerCase()
+	const filtered: TableSchema = {}
+
+	Object.entries(props.schema).forEach(([tableName, tableData]) => {
+		const tableMatches = tableName.toLowerCase().includes(query)
+		const matchingColumns = tableData.columns.filter((column) =>
+			column.label.toLowerCase().includes(query)
+		)
+
+		if (tableMatches || matchingColumns.length > 0) {
+			filtered[tableName] = {
+				...tableData,
+				columns: tableMatches ? tableData.columns : matchingColumns,
+			}
+			// auto expand tables with matching columns
+			if (matchingColumns.length > 0 && !tableMatches) {
+				expandedTables.value.add(tableName)
+			}
+		}
+	})
+
+	return filtered
+})
+</script>
+
+<template>
+	<div class="flex h-full flex-col overflow-hidden rounded border">
+		<div class="flex-shrink-0 border-b px-3 py-2.5 text-sm font-medium text-gray-700">
+			Tables
+		</div>
+		<div class="flex-shrink-0 border-b p-2">
+			<div class="relative">
+				<FormControl
+				placeholder="Search Tables and Columns..."
+				v-model="searchQuery"
+				:debounce="300">
+				<template #prefix>
+					<SearchIcon class="h-4 w-4 text-gray-500" />
+				</template>
+			</FormControl>
+			</div>
+		</div>
+		<div class="flex-1 overflow-y-auto">
+			<div v-if="!Object.keys(schema).length" class="p-4 text-center text-sm text-gray-500">
+				No Tables available. Select a data source first
+			</div>
+			<div v-else-if="!Object.keys(filteredSchema).length" class="p-4 text-center text-sm text-gray-500">
+				No tables or columns match your search
+			</div>
+			<div v-else class="divide-y">
+				<div v-for="[tableName, tableData] in Object.entries(filteredSchema)" :key="tableName">
+					<div class="flex w-full items-center gap-2 px-3 py-2 text-sm hover:bg-gray-50">
+						<button
+							@click="toggleTable(tableName)"
+							class="flex h-4 w-4 flex-shrink-0 items-center justify-center"
+						>
+							<ChevronRight
+								v-if="!expandedTables.has(tableName)"
+								class="h-4 w-4 text-gray-500"
+							/>
+							<ChevronDown
+								v-else
+								class="h-4 w-4 text-gray-500"
+							/>
+						</button>
+						<Table2 class="h-4 w-4text-gray-700" />
+						<button
+							@click="insertTableName(tableName)"
+							class="text-start font-medium text-gray-700 hover:text-blue-600"
+						>
+							{{ tableName }}
+						</button>
+					</div>
+					<div v-if="expandedTables.has(tableName)" class=" py-1">
+						<button
+							v-for="column in tableData.columns"
+							:key="column.label"
+							@click="insertColumnName(column.label)"
+							class="flex w-full items-center gap-2 px-4 py-1.5 text-left text-sm text-gray-600 hover:bg-gray-100 hover:text-blue-600"
+							:title="`${column.label} (${column.detail || column.type})`"
+						>
+							<component
+								:is="getColumnIcon(column.detail || column.type)"
+								class="h-4 w-4 flex-shrink-0 text-gray-700"
+							/>
+
+							<span class="truncate text-gray-700 hover:text-blue-600">{{ column.label }}</span>
+							<span class="ml-auto flex-shrink-0 text-xs text-gray-500">{{ column.detail || column.type }}</span>
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>