From 50ea5eee884921423a255c1f5240bb84f309f2dd Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Sun, 7 Jan 2024 18:05:28 +0530
Subject: [PATCH 01/15] feat: expression builder

---
 frontend/src/components/Controls/Code.vue     |  17 +-
 frontend/src/index.css                        |  11 +-
 .../query/visual/ColumnExpressionEditor.vue   | 290 +++++++++++++-----
 frontend/src/query/visual/ColumnSection.vue   |  43 ++-
 frontend/src/utils/index.js                   |  20 +-
 frontend/src/utils/query/index.js             |  37 +++
 6 files changed, 321 insertions(+), 97 deletions(-)

diff --git a/frontend/src/components/Controls/Code.vue b/frontend/src/components/Controls/Code.vue
index b090cddf9..88dd3bed5 100644
--- a/frontend/src/components/Controls/Code.vue
+++ b/frontend/src/components/Controls/Code.vue
@@ -11,18 +11,19 @@
 		@update="onUpdate"
 		@focus="emit('focus')"
 		@blur="emit('blur')"
+		@ready="codeMirror = $event"
 	/>
 </template>
 
 <script setup>
 import { autocompletion, closeBrackets } from '@codemirror/autocomplete'
 import { javascript } from '@codemirror/lang-javascript'
-import { MySQL, sql } from '@codemirror/lang-sql'
 import { python } from '@codemirror/lang-python'
+import { MySQL, sql } from '@codemirror/lang-sql'
 import { HighlightStyle, syntaxHighlighting, syntaxTree } from '@codemirror/language'
 import { EditorView } from '@codemirror/view'
 import { tags } from '@lezer/highlight'
-import { computed, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { Codemirror } from 'vue-codemirror'
 
 const props = defineProps({
@@ -65,6 +66,7 @@ const onUpdate = (viewUpdate) => {
 	})
 }
 
+const codeMirror = ref(null)
 const code = computed({
 	get: () => (props.modelValue ? props.modelValue || '' : props.value || ''),
 	set: (value) => emit('update:modelValue', value),
@@ -174,4 +176,15 @@ const getHighlighterStyle = () =>
 	])
 
 extensions.push(syntaxHighlighting(getHighlighterStyle()))
+
+defineExpose({
+	get cursorPos() {
+		return codeMirror.value.view.state.selection.ranges[0].to
+	},
+	focus: () => codeMirror.value.view.focus(),
+	setCursorPos: (pos) => {
+		const _pos = Math.min(pos, code.value.length)
+		codeMirror.value.view.dispatch({ selection: { anchor: _pos, head: _pos } })
+	},
+})
 </script>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 6e902a423..3ed1449f9 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -27,13 +27,12 @@
 	padding: 0px !important;
 	position: relative !important;
 }
-.cm-gutters {
+/* .cm-gutters {
 	display: none !important;
-}
+} */
 .cm-gutters {
-	@apply !border-none !bg-transparent pl-1 !text-sm !leading-6;
+	@apply !border-r !bg-transparent !text-sm !leading-6 !text-gray-600;
 }
-/* hide fold bar */
 .cm-foldGutter span {
 	@apply !opacity-0;
 }
@@ -41,7 +40,7 @@
 	@apply !bg-transparent;
 }
 .cm-activeLineGutter {
-	@apply !bg-transparent !font-medium text-gray-900;
+	@apply !bg-transparent text-gray-600;
 }
 .cm-editor {
 	height: 100%;
@@ -52,7 +51,7 @@
 }
 
 .cm-placeholder {
-	@apply !leading-6 !text-gray-600;
+	@apply !leading-6 !text-gray-500;
 }
 .cm-content {
 	padding: 6px 0px !important;
diff --git a/frontend/src/query/visual/ColumnExpressionEditor.vue b/frontend/src/query/visual/ColumnExpressionEditor.vue
index a923a7c4e..0c33acd7c 100644
--- a/frontend/src/query/visual/ColumnExpressionEditor.vue
+++ b/frontend/src/query/visual/ColumnExpressionEditor.vue
@@ -1,14 +1,22 @@
 <script setup>
 import Code from '@/components/Controls/Code.vue'
-import ExpressionHelp from '@/components/ExpressionHelp.vue'
-import UsePopover from '@/components/UsePopover.vue'
+import { fieldtypesToIcon, returnTypesToIcon } from '@/utils'
 import { parse } from '@/utils/expressions'
 import { FUNCTIONS } from '@/utils/query'
 import { debounce } from 'frappe-ui'
-import { computed, inject, onMounted, ref } from 'vue'
+import { computed, inject, nextTick, ref } from 'vue'
 import { getSelectedTables } from './useAssistedQuery'
 
-const query = inject('query')
+const COLUMN_TYPES = [
+	{ label: 'String', value: 'String' },
+	{ label: 'Integer', value: 'Integer' },
+	{ label: 'Decimal', value: 'Decimal' },
+	{ label: 'Text', value: 'Text' },
+	{ label: 'Datetime', value: 'Datetime' },
+	{ label: 'Date', value: 'Date' },
+	{ label: 'Time', value: 'Time' },
+]
+
 const assistedQuery = inject('assistedQuery')
 const emit = defineEmits(['update:column'])
 const props = defineProps({ column: Object })
@@ -19,88 +27,165 @@ const column = computed({
 })
 
 const focused = ref(false)
-const columnCompletions = computed(() => {
-	// a list of options for code autocompletion
-	const selectedTables = getSelectedTables(assistedQuery)
-	return assistedQuery.columnOptions
-		.filter((c) => selectedTables.includes(c.table))
-		.map((c) => ({ label: `${c.table}.${c.column}` }))
-})
-const getCompletions = (context, syntaxTree) => {
-	let word = context.matchBefore(/\w*/)
-	let nodeBefore = syntaxTree.resolveInner(context.pos, -1)
-
-	if (nodeBefore.name === 'TemplateString') {
-		return {
-			from: word.from,
-			options: columnCompletions.value,
-		}
-	}
-	if (nodeBefore.name === 'VariableName') {
-		return {
-			from: word.from,
-			options: Object.keys(FUNCTIONS).map((label) => ({ label })),
-		}
-	}
-}
-
 const codeEditor = ref(null)
 const helpInfo = ref(null)
-const codeViewUpdate = debounce(function ({ cursorPos }) {
-	if (!column.value.expression?.raw) return
-	setCompletionPosition()
+const currentToken = ref(null)
+
+const codeViewUpdate = debounce(function ({ cursorPos: newCurPos }) {
+	currentToken.value = null
 	helpInfo.value = null
+
+	if (!column.value.expression?.raw) return
+
 	const tokens = parse(column.value.expression.raw).tokens
 	const token = tokens
-		.filter((t) => t.start <= cursorPos - 1 && t.end >= cursorPos && t.type == 'FUNCTION')
+		.filter((t) => t.start <= newCurPos - 1 && t.end >= newCurPos && t.type == 'FUNCTION')
 		.at(-1)
+
+	currentToken.value = token
+
 	if (token) {
 		const { value } = token
 		if (FUNCTIONS[value]) {
 			helpInfo.value = FUNCTIONS[value]
 		}
 	}
-}, 300)
+}, 100)
 
-const helpInfoRefreshKey = ref(0)
-const observer = new ResizeObserver(() => {
-	helpInfoRefreshKey.value += 1
+const filteredColumnOptions = computed(() => {
+	const selectedTables = getSelectedTables(assistedQuery)
+	return assistedQuery.columnOptions
+		.filter((c) => selectedTables.includes(c.table))
+		.filter((c) => {
+			if (!currentToken.value) return true
+			if (isBetweenParenthesis()) return true
+			const searchTxt = currentToken.value.value.toLowerCase()
+			return (
+				c.column.toLowerCase().includes(searchTxt) ||
+				c.label.toLowerCase().includes(searchTxt)
+			)
+		})
 })
-onMounted(() => {
-	codeEditor.value && observer.observe(codeEditor.value)
+const allFunctionOptions = Object.keys(FUNCTIONS).map((f) => {
+	return {
+		label: f,
+		...FUNCTIONS[f],
+	}
+})
+const filteredFunctionOptions = computed(() => {
+	if (!currentToken.value) return allFunctionOptions
+	if (isBetweenParenthesis()) return allFunctionOptions
+	const searchTxt = currentToken.value.value.toLowerCase()
+	return allFunctionOptions.filter((f) => {
+		return f.label.toLowerCase().includes(searchTxt)
+	})
+})
+
+const suggestionGroups = computed(() => {
+	return [
+		{
+			groupLabel: 'Columns',
+			items: filteredColumnOptions.value.map((c) => {
+				return {
+					...c,
+					icon: fieldtypesToIcon[c.type],
+					label: c.label || c.column,
+					description: c.table_label,
+					suggestionType: 'column',
+				}
+			}),
+		},
+		{
+			groupLabel: 'Functions',
+			items: filteredFunctionOptions.value.map((f) => {
+				return {
+					icon: returnTypesToIcon[f.returnType],
+					label: f.label,
+					description: f.returnType,
+					suggestionType: 'function',
+				}
+			}),
+		},
+	]
 })
 
-function setCompletionPosition() {
-	const completion = document.querySelector('.cm-tooltip-autocomplete')
-	if (!completion) return
+function onSuggestionSelect(item) {
+	const raw = column.value.expression.raw
+	const start = currentToken.value?.value ? currentToken.value.start : raw.length
+	const end = currentToken.value?.value ? currentToken.value.end : raw.length
 
-	const cursor = document.querySelector('.cm-cursor.cm-cursor-primary')
-	const left = Number(cursor.style.left.replace('px', ''))
-	const top = Number(cursor.style.top.replace('px', ''))
+	if (item.suggestionType === 'function') {
+		const newText = `${item.label}()`
+		const newCursorPos = start + newText.length - 1
+		const textBeforeToken = raw.slice(0, start)
+		const textAfterToken = raw.slice(end)
+		column.value.expression.raw = `${textBeforeToken}${newText}${textAfterToken}`
 
-	completion.setAttribute('style', `left: ${left}px !important; top: ${top + 20}px !important;`)
+		nextTick(() => {
+			codeEditor.value.focus()
+			codeEditor.value.setCursorPos(newCursorPos)
+		})
+	}
+	if (item.suggestionType === 'column') {
+		// insert `table.column`
+		const newText = '`' + `${item.table}.${item.column}` + '`'
+		const newCursorPos = start + newText.length
+		const textBeforeToken = raw.slice(0, start)
+		const textAfterToken = raw.slice(end)
+		column.value.expression.raw = `${textBeforeToken}${newText}${textAfterToken}`
+
+		nextTick(() => {
+			codeEditor.value.focus()
+			codeEditor.value.setCursorPos(newCursorPos)
+		})
+	}
 }
 
-const COLUMN_TYPES = [
-	{ label: 'String', value: 'String' },
-	{ label: 'Integer', value: 'Integer' },
-	{ label: 'Decimal', value: 'Decimal' },
-	{ label: 'Text', value: 'Text' },
-	{ label: 'Datetime', value: 'Datetime' },
-	{ label: 'Date', value: 'Date' },
-	{ label: 'Time', value: 'Time' },
-]
+function isBetweenParenthesis() {
+	const raw = column.value.expression?.raw
+	const start = codeEditor.value?.cursorPos
+	const end = codeEditor.value?.cursorPos
+	if (!raw) return false
+	const textBeforeCursor = raw.slice(0, start).trim()
+	const textAfterCursor = raw.slice(end).trim()
+	return textBeforeCursor.endsWith('(') && textAfterCursor.startsWith(')')
+}
 </script>
 
 <template>
 	<div class="exp-editor space-y-3 text-base">
+		<div class="flex gap-3">
+			<FormControl
+				type="text"
+				label="Label"
+				class="w-full"
+				v-model="column.label"
+				placeholder="Label"
+				autocomplete="off"
+			/>
+			<FormControl
+				label="Type"
+				type="select"
+				class="w-full"
+				v-model="column.type"
+				:options="COLUMN_TYPES"
+			/>
+		</div>
+
 		<div>
 			<span class="mb-2 block text-sm leading-4 text-gray-700">Expression</span>
-			<div ref="codeEditor" class="form-input min-h-[7rem] border border-gray-400 p-0">
+			<div
+				class="h-fit min-h-[2.5rem] rounded rounded-b-none border border-transparent bg-gray-100 p-0 px-1 transition-all"
+				:class="
+					focused
+						? ' border border-b-0 !border-gray-300 bg-white hover:bg-transparent'
+						: ''
+				"
+			>
 				<Code
+					ref="codeEditor"
 					:modelValue="column.expression.raw"
-					:completions="getCompletions"
-					:autofocus="false"
+					:completions="() => {}"
 					placeholder="Write an expression"
 					@focus="focused = true"
 					@blur="focused = false"
@@ -113,35 +198,70 @@ const COLUMN_TYPES = [
 					"
 				></Code>
 			</div>
+			<div
+				class="-mt-1 flex h-[14rem] divide-x divide-gray-300 rounded rounded-t-none border border-t border-gray-300"
+			>
+				<div class="relative flex flex-[2] flex-col overflow-hidden overflow-y-scroll">
+					<template v-for="group in suggestionGroups">
+						<div
+							class="sticky top-0 flex-shrink-0 truncate bg-gray-50 px-2.5 py-1.5 text-sm font-medium text-gray-600"
+						>
+							{{ group.groupLabel }}
+						</div>
+						<div
+							v-for="item in group.items.slice(0, 25)"
+							class="exp-editor-suggestion flex cursor-pointer items-center rounded py-1.5 px-2 hover:bg-gray-100"
+							@click.prevent.stop="onSuggestionSelect(item)"
+						>
+							<component
+								:is="item.icon"
+								class="mr-1 h-4 w-4 flex-shrink-0 text-gray-600"
+							/>
+							<div class="flex flex-1 items-center justify-between overflow-hidden">
+								<span class="flex-1 truncate text-sm text-gray-700">
+									{{ item.label }}
+								</span>
+								<span
+									v-if="item.description"
+									class="flex-shrink-0 text-xs text-gray-500"
+								>
+									{{ item.description }}
+								</span>
+							</div>
+						</div>
+						<div
+							v-if="group.items.length == 0"
+							class="flex h-10 items-center justify-center text-sm text-gray-500"
+						>
+							No {{ group.groupLabel.toLowerCase() }} found
+						</div>
+					</template>
+				</div>
+				<div class="flex flex-[3] flex-col overflow-hidden pb-2">
+					<div
+						class="flex-shrink-0 truncate bg-gray-50 px-2.5 py-1.5 text-sm font-medium text-gray-600"
+					>
+						Info
+					</div>
+					<div v-if="helpInfo" class="flex flex-col px-3 py-2 text-sm">
+						<p>{{ helpInfo.description }}</p>
+						<div class="mt-2 rounded bg-gray-50 p-2 text-xs leading-5">
+							<code>
+								<span class="text-gray-600"># Syntax</span>
+								<br />
+								{{ helpInfo.syntax }}
+								<br />
+								<br />
+								<span class="text-gray-600"># Example</span>
+								<br />
+								{{ helpInfo.example }}
+							</code>
+						</div>
+					</div>
+				</div>
+			</div>
 		</div>
-
-		<FormControl
-			type="text"
-			label="Label"
-			class="w-full"
-			v-model="column.label"
-			placeholder="Label"
-		/>
-		<FormControl
-			label="Type"
-			type="select"
-			class="w-full"
-			v-model="column.type"
-			:options="COLUMN_TYPES"
-		/>
 	</div>
-
-	<UsePopover
-		v-if="codeEditor"
-		:show="focused && Boolean(helpInfo)"
-		:targetElement="codeEditor"
-		placement="right-start"
-		:key="helpInfoRefreshKey"
-	>
-		<div class="w-[10rem] text-sm transition-all">
-			<ExpressionHelp v-show="helpInfo?.syntax" :info="helpInfo" />
-		</div>
-	</UsePopover>
 </template>
 
 <style>
diff --git a/frontend/src/query/visual/ColumnSection.vue b/frontend/src/query/visual/ColumnSection.vue
index f28af960f..c1c1765e1 100644
--- a/frontend/src/query/visual/ColumnSection.vue
+++ b/frontend/src/query/visual/ColumnSection.vue
@@ -3,6 +3,7 @@ import { Combine, GripVertical } from 'lucide-vue-next'
 import { computed, inject, nextTick, ref } from 'vue'
 import Draggable from 'vuedraggable'
 import ColumnEditor from './ColumnEditor.vue'
+import ColumnExpressionEditor from './ColumnExpressionEditor.vue'
 import ColumnListItem from './ColumnListItem.vue'
 import { NEW_COLUMN } from './constants'
 
@@ -13,6 +14,18 @@ const assistedQuery = inject('assistedQuery')
 const columns = computed(() => assistedQuery.columns)
 const columnRefs = ref(null)
 const activeColumnIdx = ref(null)
+const showExpressionEditor = computed(() => {
+	if (activeColumnIdx.value === null) return false
+	const activeColumn = columns.value[activeColumnIdx.value]
+	return (
+		activeColumn.expression.hasOwnProperty('raw') ||
+		activeColumn.expression.hasOwnProperty('ast')
+	)
+})
+const showColumnEditor = computed(() => {
+	if (activeColumnIdx.value === null) return false
+	return !showExpressionEditor.value
+})
 
 function onColumnSelect(column) {
 	if (!column) return
@@ -97,7 +110,7 @@ function onColumnSort(e) {
 					<GripVertical class="handle h-4 w-4 flex-shrink-0 cursor-grab text-gray-500" />
 					<div class="flex-1">
 						<Popover
-							:show="activeColumnIdx === idx"
+							:show="showColumnEditor"
 							@close="activeColumnIdx = null"
 							placement="right-start"
 						>
@@ -111,14 +124,14 @@ function onColumnSort(e) {
 							</template>
 							<template #body>
 								<div
-									v-if="activeColumnIdx === idx"
+									v-if="showColumnEditor"
 									class="ml-2 w-[20rem] rounded-lg border border-gray-100 bg-white text-base shadow-xl"
 								>
 									<ColumnEditor
 										:column="column"
-										@discard="activeColumnIdx = null"
 										@remove="onRemoveColumn"
 										@save="onSaveColumn"
+										@discard="activeColumnIdx = null"
 									/>
 								</div>
 							</template>
@@ -128,4 +141,28 @@ function onColumnSort(e) {
 			</template>
 		</Draggable>
 	</div>
+
+	<Dialog
+		:modelValue="showExpressionEditor"
+		@close="activeColumnIdx = null"
+		:options="{
+			title: 'Expression',
+			size: '3xl',
+			actions: [
+				{ label: 'Discard', variant: 'outline', onClick: () => (activeColumnIdx = null) },
+				{
+					label: 'Save',
+					variant: 'solid',
+					onClick: () => onSaveColumn(columns[activeColumnIdx]),
+				},
+			],
+		}"
+	>
+		<template #body-content>
+			<ColumnExpressionEditor
+				v-if="showExpressionEditor"
+				:column="columns[activeColumnIdx]"
+			/>
+		</template>
+	</Dialog>
 </template>
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 745a1522f..a9baa8617 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -3,7 +3,16 @@ import { createToast } from '@/utils/toasts'
 import { watchDebounced } from '@vueuse/core'
 import domtoimage from 'dom-to-image'
 import { call } from 'frappe-ui'
-import { Baseline, Calendar, CalendarClock, Clock, Hash, Type } from 'lucide-vue-next'
+import {
+	Baseline,
+	Calendar,
+	CalendarClock,
+	Clock,
+	Hash,
+	ShieldQuestion,
+	ToggleLeft,
+	Type,
+} from 'lucide-vue-next'
 import { computed, unref, watch } from 'vue'
 
 export const fieldtypesToIcon = {
@@ -17,6 +26,15 @@ export const fieldtypesToIcon = {
 	'Long Text': Type,
 }
 
+export const returnTypesToIcon = {
+	number: Hash,
+	string: Type,
+	boolean: ToggleLeft,
+	date: Calendar,
+	datetime: CalendarClock,
+	any: ShieldQuestion,
+}
+
 export const FIELDTYPES = {
 	NUMBER: ['Integer', 'Decimal'],
 	TEXT: ['Text', 'String'],
diff --git a/frontend/src/utils/query/index.js b/frontend/src/utils/query/index.js
index 28466d531..4f4f618d2 100644
--- a/frontend/src/utils/query/index.js
+++ b/frontend/src/utils/query/index.js
@@ -4,46 +4,55 @@ export const FUNCTIONS = {
 		syntax: 'in(column_name, "value1", "value2", ...)',
 		description: 'Checks if column contains any of the provided values.',
 		example: 'in(`status`, "Closed", "Resolved")',
+		returnType: 'boolean',
 	},
 	not_in: {
 		syntax: 'not_in(column_name, "value1", "value2", ...)',
 		description: 'Checks if column excludes the provided values.',
 		example: 'not_in(`status`, "Closed", "Resolved")',
+		returnType: 'boolean',
 	},
 	is_set: {
 		syntax: 'is_set(column_name)',
 		description: 'Checks if column has a value.',
 		example: 'is_set(`status`)',
+		returnType: 'boolean',
 	},
 	is_not_set: {
 		syntax: 'is_not_set(column_name)',
 		description: 'Checks if column lacks a value.',
 		example: 'is_not_set(`status`)',
+		returnType: 'boolean',
 	},
 	between: {
 		syntax: 'between(column_name, "value1", "value2")',
 		description: 'Checks if column value is between two values.',
 		example: 'between(`age`, 10, 30)',
+		returnType: 'boolean',
 	},
 	contains: {
 		syntax: 'contains(column_name, "value")',
 		description: 'Checks if column contains the specified value.',
 		example: 'contains(`customer`, "John")',
+		returnType: 'boolean',
 	},
 	not_contains: {
 		syntax: 'not_contains(column_name, "value")',
 		description: 'Checks if column excludes the specified value.',
 		example: 'not_contains(`customer`, "John")',
+		returnType: 'boolean',
 	},
 	ends_with: {
 		syntax: 'ends_with(column_name, "value")',
 		description: 'Checks if column ends with the specified value.',
 		example: 'ends_with(`customer`, "Souza")',
+		returnType: 'boolean',
 	},
 	starts_with: {
 		syntax: 'starts_with(column_name, "value")',
 		description: 'Checks if column starts with the specified value.',
 		example: 'starts_with(`customer`, "John")',
+		returnType: 'boolean',
 	},
 
 	// String Functions
@@ -51,21 +60,25 @@ export const FUNCTIONS = {
 		syntax: 'lower(string_column)',
 		description: 'Converts string to lowercase.',
 		example: 'lower(`category`)',
+		returnType: 'string',
 	},
 	upper: {
 		syntax: 'upper(string_column)',
 		description: 'Converts string to uppercase.',
 		example: 'upper(`category`)',
+		returnType: 'string',
 	},
 	concat: {
 		syntax: 'concat(column1, column2, ...)',
 		description: 'Combines values from columns or strings.',
 		example: 'concat(`first_name`, " ", `last_name`)',
+		returnType: 'string',
 	},
 	replace: {
 		syntax: 'replace(column_name, "search", "replace")',
 		description: 'Replaces occurrences in the column.',
 		example: 'replace(`category`, "_", "-")',
+		returnType: 'string',
 	},
 
 	// Arithmetic Functions
@@ -73,41 +86,49 @@ export const FUNCTIONS = {
 		syntax: 'abs(number_column)',
 		description: 'Returns absolute value of the column.',
 		example: 'abs(`paid_amount`)',
+		returnType: 'number',
 	},
 	sum: {
 		syntax: 'sum(number_column)',
 		description: 'Sums values of the column.',
 		example: 'sum(`paid_amount`)',
+		returnType: 'number',
 	},
 	min: {
 		syntax: 'min(number_column)',
 		description: 'Finds minimum value of the column.',
 		example: 'min(`paid_amount`)',
+		returnType: 'number',
 	},
 	max: {
 		syntax: 'max(number_column)',
 		description: 'Finds maximum value of the column.',
 		example: 'max(`paid_amount`)',
+		returnType: 'number',
 	},
 	avg: {
 		syntax: 'avg(number_column)',
 		description: 'Calculates average value of the column.',
 		example: 'avg(`paid_amount`)',
+		returnType: 'number',
 	},
 	round: {
 		syntax: 'round(number_column)',
 		description: 'Rounds the column value.',
 		example: 'round(`paid_amount`)',
+		returnType: 'number',
 	},
 	floor: {
 		syntax: 'floor(number_column)',
 		description: 'Rounds the column value down.',
 		example: 'floor(`paid_amount`)',
+		returnType: 'number',
 	},
 	ceil: {
 		syntax: 'ceil(number_column)',
 		description: 'Rounds the column value up.',
 		example: 'ceil(`paid_amount`)',
+		returnType: 'number',
 	},
 
 	// Date & Time Functions
@@ -115,26 +136,31 @@ export const FUNCTIONS = {
 		syntax: 'timespan(column_name, "timespan")',
 		description: 'Checks if column value is within the timespan.',
 		example: 'timespan(`creation`, "Last 7 Days")',
+		returnType: 'boolean',
 	},
 	now: {
 		syntax: 'now()',
 		description: 'Gets current date and time.',
 		example: '`posting_date` = now()',
+		returnType: 'datetime',
 	},
 	today: {
 		syntax: 'today()',
 		description: 'Gets current date.',
 		example: '`posting_date` = today()',
+		returnType: 'date',
 	},
 	start_of: {
 		syntax: 'start_of(unit, date)',
 		description: 'Finds start of the given unit (e.g., Month, Year).',
 		example: 'start_of("Month", today())',
+		returnType: 'date',
 	},
 	time_elapsed: {
 		syntax: 'time_elapsed(unit, date1, date2)',
 		description: 'Calculates time between two dates.',
 		example: 'time_elapsed("day", `posting_date`, today())',
+		returnType: 'number',
 	},
 
 	// Other Functions
@@ -142,55 +168,66 @@ export const FUNCTIONS = {
 		syntax: 'case(condition1, "value1", ..., "default_value")',
 		description: 'Returns matched condition value or default.',
 		example: 'case(`amount` > 0, "Unpaid", `amount` < 0, "Return", "Paid")',
+		returnType: 'any',
 	},
 	count: {
 		syntax: 'count(column_name)',
 		description: 'Counts rows based on column.',
 		example: 'count(`ID`)',
+		returnType: 'number',
 	},
 	coalesce: {
 		syntax: 'coalesce(column1, column2, ...)',
 		description: 'Returns first non-null value from columns.',
 		example: 'coalesce(`first_name`, `last_name`)',
+		returnType: 'any',
 	},
 	if_null: {
 		syntax: 'if_null(column_name, "default_value")',
 		description: 'Provides default if column is null.',
 		example: 'if_null(`category`, "No Category")',
+		returnType: 'any',
 	},
 	distinct: {
 		syntax: 'distinct(column_name)',
 		description: 'Lists distinct values of the column.',
 		example: 'distinct(`customer`)',
+		returnType: 'any',
 	},
 	distinct_count: {
 		syntax: 'distinct_count(column_name)',
 		description: 'Counts distinct values of the column.',
 		example: 'distinct_count(`customer`)',
+		returnType: 'number',
 	},
 	count_if: {
 		syntax: 'count_if(condition)',
 		description: 'Counts rows that satisfy the condition.',
 		example: 'count_if(`amount` > 0)',
+		returnType: 'number',
 	},
 	sum_if: {
 		syntax: 'sum_if(condition, column_name)',
 		description: 'Sums values of the column that satisfy the condition.',
 		example: 'sum_if(`customer` = "John", `grand_total`)',
+		returnType: 'number',
 	},
 	descendants: {
 		syntax: 'descendants("value", "doctype", "fieldname")',
 		description: 'Lists all descendants of the given value.',
 		example: 'descendants("India", "tabTerritory", `territory`)',
+		returnType: 'boolean',
 	},
 	descendants_and_self: {
 		syntax: 'descendants_and_self("value", "doctype", "fieldname")',
 		description: 'Lists all descendants and self of the given value.',
 		example: 'descendants_and_self("India", "tabTerritory", `territory`)',
+		returnType: 'boolean',
 	},
 	sql: {
 		syntax: 'sql("query")',
 		description: 'Write raw SQL queries.',
 		example: 'sql("MONTH(invoice.posting_date)")',
+		returnType: 'any',
 	},
 }

From f744ee19cf3c696dd77145a8b3b9dc0eac2844c5 Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Mon, 8 Jan 2024 12:53:46 +0530
Subject: [PATCH 02/15] fix: compile column before using as `text`

without compiling the column is resolved as "table".column while it should be `table`.column
---
 insights/insights/query_builders/sql_builder.py | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/insights/insights/query_builders/sql_builder.py b/insights/insights/query_builders/sql_builder.py
index 125b6b1af..40f2c6e81 100644
--- a/insights/insights/query_builders/sql_builder.py
+++ b/insights/insights/query_builders/sql_builder.py
@@ -21,6 +21,7 @@
 from sqlalchemy import Column, TextClause
 from sqlalchemy import column as sa_column
 from sqlalchemy import select, table
+from sqlalchemy.dialects import mysql
 from sqlalchemy.engine import Dialect
 from sqlalchemy.sql import and_, case, distinct, func, or_, text
 
@@ -72,7 +73,8 @@ def format_date(cls, format, column: Column):
         if format == "Week":
             # DATE_FORMAT(install_date, '%Y-%m-%d') - INTERVAL (DAYOFWEEK(install_date) - 1) DAY,
             date = func.date_format(column, "%Y-%m-%d")
-            return func.DATE_SUB(date, text(f"INTERVAL (DAYOFWEEK({column}) - 1) DAY"))
+            compiled = column.compile(dialect=mysql.dialect())
+            return func.DATE_SUB(date, text(f"INTERVAL (DAYOFWEEK({compiled}) - 1) DAY"))
         if format == "Month" or format == "Mon":
             return func.date_format(column, "%Y-%m-01")
         if format == "Year":

From 42ff43ed7e555e74f6f7ce037f7dc754aa48d7c7 Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Fri, 12 Jan 2024 14:21:27 +0530
Subject: [PATCH 03/15] fix: show query link if chart fails to load

---
 frontend/src/dashboard/DashboardItem.vue |  2 +-
 frontend/src/widgets/useChartData.js     | 16 +++++++++++-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/frontend/src/dashboard/DashboardItem.vue b/frontend/src/dashboard/DashboardItem.vue
index 766e76f22..b818c32a1 100644
--- a/frontend/src/dashboard/DashboardItem.vue
+++ b/frontend/src/dashboard/DashboardItem.vue
@@ -93,7 +93,7 @@ function openQueryInNewTab() {
 				:options="item.options"
 			/>
 
-			<div class="absolute right-3 top-3 z-10 flex items-center">
+			<div class="absolute right-3 top-3 z-[10001] flex items-center">
 				<div v-if="chartFilters?.length">
 					<Tooltip :text="chartFilters.map((c) => c.label || c.column?.label).join(', ')">
 						<div
diff --git a/frontend/src/widgets/useChartData.js b/frontend/src/widgets/useChartData.js
index 3c1731c76..786cca337 100644
--- a/frontend/src/widgets/useChartData.js
+++ b/frontend/src/widgets/useChartData.js
@@ -30,11 +30,17 @@ export default function useChartData(options = {}) {
 	function load(query) {
 		if (!query) return
 		state.loading = true
-		return options.resultsFetcher().then((results) => {
-			state.loading = false
-			state.rawData = getFormattedResult(results)
-			state.data = convertResultToObjects(state.rawData)
-		})
+		return options
+			.resultsFetcher()
+			.then((results) => {
+				state.loading = false
+				state.rawData = getFormattedResult(results)
+				state.data = convertResultToObjects(state.rawData)
+			})
+			.error((error) => {
+				state.loading = false
+				state.error = error
+			})
 	}
 
 	if (options.query) {

From 2e54bd0f0292516860b81ea20babc7bde896330d Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Sat, 13 Jan 2024 14:14:07 +0530
Subject: [PATCH 04/15] refactor: common section header component

---
 frontend/src/query/visual/ColumnSection.vue    |  9 +++------
 frontend/src/query/visual/FilterSection.vue    |  9 +++------
 frontend/src/query/visual/SectionHeader.vue    | 13 +++++++++++++
 frontend/src/query/visual/TableSection.vue     |  9 +++------
 frontend/src/query/visual/TransformSection.vue |  9 +++------
 5 files changed, 25 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/query/visual/SectionHeader.vue

diff --git a/frontend/src/query/visual/ColumnSection.vue b/frontend/src/query/visual/ColumnSection.vue
index c1c1765e1..463543749 100644
--- a/frontend/src/query/visual/ColumnSection.vue
+++ b/frontend/src/query/visual/ColumnSection.vue
@@ -5,6 +5,7 @@ import Draggable from 'vuedraggable'
 import ColumnEditor from './ColumnEditor.vue'
 import ColumnExpressionEditor from './ColumnExpressionEditor.vue'
 import ColumnListItem from './ColumnListItem.vue'
+import SectionHeader from './SectionHeader.vue'
 import { NEW_COLUMN } from './constants'
 
 const query = inject('query')
@@ -70,11 +71,7 @@ function onColumnSort(e) {
 
 <template>
 	<div>
-		<div class="mb-2 flex items-center justify-between">
-			<div class="flex items-center space-x-1.5">
-				<Combine class="h-4 w-4 text-gray-600" />
-				<p class="font-medium">Summarize</p>
-			</div>
+		<SectionHeader title="Summarize" :icon="Combine">
 			<Autocomplete
 				:modelValue="columns"
 				bodyClasses="w-[18rem]"
@@ -96,7 +93,7 @@ function onColumnSort(e) {
 					</Button>
 				</template>
 			</Autocomplete>
-		</div>
+		</SectionHeader>
 		<Draggable
 			class="w-full"
 			:model-value="columns"
diff --git a/frontend/src/query/visual/FilterSection.vue b/frontend/src/query/visual/FilterSection.vue
index fb6dded08..eb534c636 100644
--- a/frontend/src/query/visual/FilterSection.vue
+++ b/frontend/src/query/visual/FilterSection.vue
@@ -4,6 +4,7 @@ import { ListFilter, X } from 'lucide-vue-next'
 import { computed, inject, ref } from 'vue'
 import FilterEditor from './FilterEditor.vue'
 import { fieldtypesToIcon } from '@/utils'
+import SectionHeader from './SectionHeader.vue'
 
 const query = inject('query')
 const assistedQuery = inject('assistedQuery')
@@ -38,13 +39,9 @@ function isValidFilter(filter) {
 
 <template>
 	<div>
-		<div class="mb-2 flex items-center justify-between">
-			<div class="flex items-center space-x-1.5">
-				<ListFilter class="h-4 w-4 text-gray-600" />
-				<p class="font-medium">Filter</p>
-			</div>
+		<SectionHeader title="Filter" :icon="ListFilter">
 			<Button variant="outline" icon="plus" @click.prevent.stop="onAddFilter"></Button>
-		</div>
+		</SectionHeader>
 		<div class="space-y-2">
 			<div
 				ref="filterRefs"
diff --git a/frontend/src/query/visual/SectionHeader.vue b/frontend/src/query/visual/SectionHeader.vue
new file mode 100644
index 000000000..5461e5b47
--- /dev/null
+++ b/frontend/src/query/visual/SectionHeader.vue
@@ -0,0 +1,13 @@
+<template>
+	<div class="mb-2 flex items-center justify-between">
+		<div class="flex items-center space-x-1.5">
+			<component :is="icon" class="h-4 w-4 text-gray-600" />
+			<p class="font-medium">{{ title }}</p>
+		</div>
+		<slot></slot>
+	</div>
+</template>
+
+<script setup>
+defineProps(['title', 'icon'])
+</script>
diff --git a/frontend/src/query/visual/TableSection.vue b/frontend/src/query/visual/TableSection.vue
index 773e378ef..93e98f6dd 100644
--- a/frontend/src/query/visual/TableSection.vue
+++ b/frontend/src/query/visual/TableSection.vue
@@ -13,6 +13,7 @@ import { computed, inject, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import TableJoinEditor from './TableJoinEditor.vue'
 import { Table2, GanttChartSquare } from 'lucide-vue-next'
+import SectionHeader from './SectionHeader.vue'
 
 const assistedQuery = inject('assistedQuery')
 
@@ -65,11 +66,7 @@ async function handleDataSourceChange(option) {
 
 <template>
 	<div>
-		<div class="mb-2 flex items-center justify-between">
-			<div class="flex items-center space-x-1.5">
-				<Sheet class="h-4 w-4 text-gray-600" />
-				<p class="font-medium">Data</p>
-			</div>
+		<SectionHeader title="Data" :icon="Sheet">
 			<!-- Show Data Source Selector first then show Table Selector -->
 			<Autocomplete
 				ref="selector"
@@ -88,7 +85,7 @@ async function handleDataSourceChange(option) {
 					<Button variant="outline" icon="plus" @click="togglePopover"></Button>
 				</template>
 			</Autocomplete>
-		</div>
+		</SectionHeader>
 		<div class="space-y-2">
 			<div
 				v-if="assistedQuery.table.table"
diff --git a/frontend/src/query/visual/TransformSection.vue b/frontend/src/query/visual/TransformSection.vue
index e3979391f..57a24c73c 100644
--- a/frontend/src/query/visual/TransformSection.vue
+++ b/frontend/src/query/visual/TransformSection.vue
@@ -5,6 +5,7 @@ import { CornerLeftDown, CornerRightUp, Crop, Option, X } from 'lucide-vue-next'
 import { inject, ref } from 'vue'
 import TransformEditor from './TransformEditor.vue'
 import { Sigma } from 'lucide-vue-next'
+import SectionHeader from './SectionHeader.vue'
 
 const query = inject('query')
 const assistedQuery = inject('assistedQuery')
@@ -44,13 +45,9 @@ function isValidTransform(transform) {
 
 <template>
 	<div>
-		<div class="mb-2 flex items-center justify-between">
-			<div class="flex items-center space-x-1.5">
-				<Option class="h-3.5 w-3.5 text-gray-600" />
-				<p class="font-medium">Transform</p>
-			</div>
+		<SectionHeader title="Transform" :icon="Option">
 			<Button variant="outline" icon="plus" @click.prevent.stop="onAddTransform"></Button>
-		</div>
+		</SectionHeader>
 		<div class="space-y-2">
 			<div
 				ref="transformRefs"

From 6355bd92ec5216711d9f9f879ed6691869eee33a Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Sat, 13 Jan 2024 15:01:56 +0530
Subject: [PATCH 05/15] refactor: use common `DraggableList` component

---
 frontend/src/components/DraggableList.vue   |  2 +-
 frontend/src/query/visual/ColumnSection.vue | 76 ++++++++++-----------
 2 files changed, 36 insertions(+), 42 deletions(-)

diff --git a/frontend/src/components/DraggableList.vue b/frontend/src/components/DraggableList.vue
index 1561e3879..e7f41ecbf 100644
--- a/frontend/src/components/DraggableList.vue
+++ b/frontend/src/components/DraggableList.vue
@@ -41,7 +41,7 @@ function onChange(e) {
 			<div class="mb-2 flex items-center gap-1">
 				<GripVertical class="handle h-4 w-4 flex-shrink-0 cursor-grab text-gray-500" />
 				<div class="flex-1">
-					<slot :item="item" :index="idx">
+					<slot name="item" :item="item" :index="idx">
 						<div
 							class="group form-input flex h-7 flex-1 cursor-pointer items-center justify-between px-2"
 						>
diff --git a/frontend/src/query/visual/ColumnSection.vue b/frontend/src/query/visual/ColumnSection.vue
index 463543749..9d3aa4a4c 100644
--- a/frontend/src/query/visual/ColumnSection.vue
+++ b/frontend/src/query/visual/ColumnSection.vue
@@ -1,12 +1,12 @@
 <script setup>
-import { Combine, GripVertical } from 'lucide-vue-next'
+import { Combine } from 'lucide-vue-next'
 import { computed, inject, nextTick, ref } from 'vue'
-import Draggable from 'vuedraggable'
-import ColumnEditor from './ColumnEditor.vue'
 import ColumnExpressionEditor from './ColumnExpressionEditor.vue'
-import ColumnListItem from './ColumnListItem.vue'
 import SectionHeader from './SectionHeader.vue'
 import { NEW_COLUMN } from './constants'
+import DraggableList from '@/components/DraggableList.vue'
+import ColumnEditor from './ColumnEditor.vue'
+import ColumnListItem from './ColumnListItem.vue'
 
 const query = inject('query')
 const assistedQuery = inject('assistedQuery')
@@ -94,49 +94,43 @@ function onColumnSort(e) {
 				</template>
 			</Autocomplete>
 		</SectionHeader>
-		<Draggable
-			class="w-full"
-			:model-value="columns"
+		<DraggableList
+			:items="columns"
 			group="columns"
 			item-key="label"
-			handle=".handle"
+			empty-text="No columns selected"
 			@sort="onColumnSort"
 		>
-			<template #item="{ element: column, index: idx }">
-				<div class="mb-2 flex items-center gap-1">
-					<GripVertical class="handle h-4 w-4 flex-shrink-0 cursor-grab text-gray-500" />
-					<div class="flex-1">
-						<Popover
-							:show="showColumnEditor"
-							@close="activeColumnIdx = null"
-							placement="right-start"
+			<template #item="{ item: column, index: idx }">
+				<Popover
+					:show="showColumnEditor && activeColumnIdx === idx"
+					@close="activeColumnIdx = null"
+					placement="right-start"
+				>
+					<template #target="{ togglePopover }">
+						<ColumnListItem
+							:column="column"
+							:isActive="activeColumnIdx === idx"
+							@edit-column="activeColumnIdx = idx"
+							@remove-column="assistedQuery.removeColumnAt(idx)"
+						/>
+					</template>
+					<template #body>
+						<div
+							v-if="showColumnEditor && activeColumnIdx === idx"
+							class="ml-2 w-[20rem] rounded-lg border border-gray-100 bg-white text-base shadow-xl"
 						>
-							<template #target="{ togglePopover }">
-								<ColumnListItem
-									:column="column"
-									:isActive="activeColumnIdx === idx"
-									@edit-column="activeColumnIdx = idx"
-									@remove-column="assistedQuery.removeColumnAt(idx)"
-								/>
-							</template>
-							<template #body>
-								<div
-									v-if="showColumnEditor"
-									class="ml-2 w-[20rem] rounded-lg border border-gray-100 bg-white text-base shadow-xl"
-								>
-									<ColumnEditor
-										:column="column"
-										@remove="onRemoveColumn"
-										@save="onSaveColumn"
-										@discard="activeColumnIdx = null"
-									/>
-								</div>
-							</template>
-						</Popover>
-					</div>
-				</div>
+							<ColumnEditor
+								:column="column"
+								@remove="onRemoveColumn"
+								@save="onSaveColumn"
+								@discard="activeColumnIdx = null"
+							/>
+						</div>
+					</template>
+				</Popover>
 			</template>
-		</Draggable>
+		</DraggableList>
 	</div>
 
 	<Dialog

From 6426b61507d5017605bfd073fdcb61043b1f6f54 Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Sat, 13 Jan 2024 15:11:33 +0530
Subject: [PATCH 06/15] refactor: remove simple/expression switcher from column
 editor

---
 .../query/visual/ColumnExpressionEditor.vue   | 10 ++-
 frontend/src/query/visual/ColumnSection.vue   | 19 ++---
 ...olumnEditor.vue => SimpleColumnEditor.vue} | 84 +++++++------------
 3 files changed, 47 insertions(+), 66 deletions(-)
 rename frontend/src/query/visual/{ColumnEditor.vue => SimpleColumnEditor.vue} (50%)

diff --git a/frontend/src/query/visual/ColumnExpressionEditor.vue b/frontend/src/query/visual/ColumnExpressionEditor.vue
index 0c33acd7c..3855b027d 100644
--- a/frontend/src/query/visual/ColumnExpressionEditor.vue
+++ b/frontend/src/query/visual/ColumnExpressionEditor.vue
@@ -6,6 +6,7 @@ import { FUNCTIONS } from '@/utils/query'
 import { debounce } from 'frappe-ui'
 import { computed, inject, nextTick, ref } from 'vue'
 import { getSelectedTables } from './useAssistedQuery'
+import { NEW_COLUMN } from './constants'
 
 const COLUMN_TYPES = [
 	{ label: 'String', value: 'String' },
@@ -21,8 +22,15 @@ const assistedQuery = inject('assistedQuery')
 const emit = defineEmits(['update:column'])
 const props = defineProps({ column: Object })
 
+const emptyExpressionColumn = {
+	...NEW_COLUMN,
+	expression: {
+		raw: '',
+		ast: {},
+	},
+}
 const column = computed({
-	get: () => props.column,
+	get: () => props.column || emptyExpressionColumn,
 	set: (val) => emit('update:column', val),
 })
 
diff --git a/frontend/src/query/visual/ColumnSection.vue b/frontend/src/query/visual/ColumnSection.vue
index 9d3aa4a4c..4a0a61061 100644
--- a/frontend/src/query/visual/ColumnSection.vue
+++ b/frontend/src/query/visual/ColumnSection.vue
@@ -1,12 +1,12 @@
 <script setup>
+import DraggableList from '@/components/DraggableList.vue'
 import { Combine } from 'lucide-vue-next'
 import { computed, inject, nextTick, ref } from 'vue'
 import ColumnExpressionEditor from './ColumnExpressionEditor.vue'
+import ColumnListItem from './ColumnListItem.vue'
 import SectionHeader from './SectionHeader.vue'
+import SimpleColumnEditor from './SimpleColumnEditor.vue'
 import { NEW_COLUMN } from './constants'
-import DraggableList from '@/components/DraggableList.vue'
-import ColumnEditor from './ColumnEditor.vue'
-import ColumnListItem from './ColumnListItem.vue'
 
 const query = inject('query')
 const assistedQuery = inject('assistedQuery')
@@ -23,7 +23,7 @@ const showExpressionEditor = computed(() => {
 		activeColumn.expression.hasOwnProperty('ast')
 	)
 })
-const showColumnEditor = computed(() => {
+const showSimpleColumnEditor = computed(() => {
 	if (activeColumnIdx.value === null) return false
 	return !showExpressionEditor.value
 })
@@ -103,7 +103,7 @@ function onColumnSort(e) {
 		>
 			<template #item="{ item: column, index: idx }">
 				<Popover
-					:show="showColumnEditor && activeColumnIdx === idx"
+					:show="showSimpleColumnEditor && activeColumnIdx === idx"
 					@close="activeColumnIdx = null"
 					placement="right-start"
 				>
@@ -117,10 +117,10 @@ function onColumnSort(e) {
 					</template>
 					<template #body>
 						<div
-							v-if="showColumnEditor && activeColumnIdx === idx"
+							v-if="showSimpleColumnEditor && activeColumnIdx === idx"
 							class="ml-2 w-[20rem] rounded-lg border border-gray-100 bg-white text-base shadow-xl"
 						>
-							<ColumnEditor
+							<SimpleColumnEditor
 								:column="column"
 								@remove="onRemoveColumn"
 								@save="onSaveColumn"
@@ -150,10 +150,7 @@ function onColumnSort(e) {
 		}"
 	>
 		<template #body-content>
-			<ColumnExpressionEditor
-				v-if="showExpressionEditor"
-				:column="columns[activeColumnIdx]"
-			/>
+			<ColumnExpressionEditor :column="columns[activeColumnIdx]" />
 		</template>
 	</Dialog>
 </template>
diff --git a/frontend/src/query/visual/ColumnEditor.vue b/frontend/src/query/visual/SimpleColumnEditor.vue
similarity index 50%
rename from frontend/src/query/visual/ColumnEditor.vue
rename to frontend/src/query/visual/SimpleColumnEditor.vue
index 8d444c53e..212d9065b 100644
--- a/frontend/src/query/visual/ColumnEditor.vue
+++ b/frontend/src/query/visual/SimpleColumnEditor.vue
@@ -10,7 +10,6 @@ const props = defineProps({ column: Object })
 const assistedQuery = inject('assistedQuery')
 const query = inject('query')
 
-const activeTab = ref('Simple')
 const column = reactive({
 	...NEW_COLUMN,
 	...props.column,
@@ -18,12 +17,7 @@ const column = reactive({
 if (column.table && column.column && !column.value) {
 	column.value = `${column.table}.${column.column}`
 }
-// `ast` is checked here, because when adding new expression column
-// `ast` is set to {} to open the expression editor instead of the simple editor
-// since setting it to `null` will open the simple editor
-if (column.expression?.ast) {
-	activeTab.value = 'Expression'
-} else if (!column.aggregation) {
+if (!column.aggregation) {
 	column.aggregation = 'group by'
 }
 
@@ -40,7 +34,6 @@ function onColumnChange(option) {
 
 const isValidColumn = computed(() => {
 	if (!column.label || !column.type) return false
-	if (column.expression?.raw && column.expression?.ast) return true
 	if (column.table && column.column) return true
 	return false
 })
@@ -48,53 +41,36 @@ const isValidColumn = computed(() => {
 
 <template>
 	<div class="flex flex-col gap-4 p-4">
-		<div
-			class="flex h-8 w-full cursor-pointer select-none items-center rounded bg-gray-100 p-1"
-		>
-			<div
-				v-for="(tab, idx) in ['Simple', 'Expression']"
-				class="flex h-full flex-1 items-center justify-center px-4 text-sm transition-all"
-				:class="activeTab === tab ? 'rounded bg-white shadow' : ''"
-				@click.prevent.stop="activeTab = tab"
-			>
-				{{ tab }}
-			</div>
+		<div class="space-y-1">
+			<span class="text-sm font-medium text-gray-700">Aggregation</span>
+			<Autocomplete
+				:modelValue="column.aggregation.toLowerCase()"
+				placeholder="Aggregation"
+				:options="AGGREGATIONS"
+				@update:modelValue="(op) => (column.aggregation = op.value)"
+			/>
+		</div>
+		<div class="space-y-1">
+			<span class="text-sm font-medium text-gray-700">Column</span>
+			<Autocomplete
+				:modelValue="column"
+				bodyClasses="w-[18rem]"
+				placeholder="Column"
+				@update:modelValue="onColumnChange"
+				:options="assistedQuery.groupedColumnOptions"
+				@update:query="assistedQuery.fetchColumnOptions"
+			/>
+		</div>
+		<div class="space-y-1">
+			<span class="text-sm font-medium text-gray-700">Label</span>
+			<FormControl
+				type="text"
+				class="w-full"
+				v-model="column.label"
+				placeholder="Label"
+				@update:modelValue="(val) => (column.alias = val)"
+			/>
 		</div>
-		<template v-if="activeTab == 'Expression'">
-			<ColumnExpressionEditor v-model:column="column" />
-		</template>
-		<template v-if="activeTab == 'Simple'">
-			<div class="space-y-1">
-				<span class="text-sm font-medium text-gray-700">Aggregation</span>
-				<Autocomplete
-					:modelValue="column.aggregation.toLowerCase()"
-					placeholder="Aggregation"
-					:options="AGGREGATIONS"
-					@update:modelValue="(op) => (column.aggregation = op.value)"
-				/>
-			</div>
-			<div class="space-y-1">
-				<span class="text-sm font-medium text-gray-700">Column</span>
-				<Autocomplete
-					:modelValue="column"
-					bodyClasses="w-[18rem]"
-					placeholder="Column"
-					@update:modelValue="onColumnChange"
-					:options="assistedQuery.groupedColumnOptions"
-					@update:query="assistedQuery.fetchColumnOptions"
-				/>
-			</div>
-			<div class="space-y-1">
-				<span class="text-sm font-medium text-gray-700">Label</span>
-				<FormControl
-					type="text"
-					class="w-full"
-					v-model="column.label"
-					placeholder="Label"
-					@update:modelValue="(val) => (column.alias = val)"
-				/>
-			</div>
-		</template>
 		<div v-if="FIELDTYPES.DATE.includes(column.type)" class="space-y-1">
 			<span class="text-sm font-medium text-gray-700">Date Format</span>
 			<Autocomplete

From 8ff7a59fdbc191438eeee14b5339b8636f21af9b Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Sat, 13 Jan 2024 15:50:22 +0530
Subject: [PATCH 07/15] fix: do not save automatically & add date format
 control

---
 .../query/visual/ColumnExpressionEditor.vue   | 140 +++++++++++-------
 frontend/src/query/visual/ColumnSection.vue   |  15 +-
 2 files changed, 95 insertions(+), 60 deletions(-)

diff --git a/frontend/src/query/visual/ColumnExpressionEditor.vue b/frontend/src/query/visual/ColumnExpressionEditor.vue
index 3855b027d..79a38efa2 100644
--- a/frontend/src/query/visual/ColumnExpressionEditor.vue
+++ b/frontend/src/query/visual/ColumnExpressionEditor.vue
@@ -1,12 +1,39 @@
 <script setup>
 import Code from '@/components/Controls/Code.vue'
-import { fieldtypesToIcon, returnTypesToIcon } from '@/utils'
+import { FIELDTYPES, GRANULARITIES, fieldtypesToIcon, returnTypesToIcon } from '@/utils'
 import { parse } from '@/utils/expressions'
 import { FUNCTIONS } from '@/utils/query'
 import { debounce } from 'frappe-ui'
-import { computed, inject, nextTick, ref } from 'vue'
-import { getSelectedTables } from './useAssistedQuery'
+import { computed, defineProps, inject, nextTick, reactive, ref } from 'vue'
 import { NEW_COLUMN } from './constants'
+import { getSelectedTables } from './useAssistedQuery'
+
+const emptyExpressionColumn = {
+	...NEW_COLUMN,
+	expression: {
+		raw: '',
+		ast: {},
+	},
+}
+
+const assistedQuery = inject('assistedQuery')
+const emit = defineEmits(['save', 'discard', 'remove'])
+const props = defineProps({ column: Object })
+
+const propsColumn = props.column || emptyExpressionColumn
+const column = reactive({
+	...NEW_COLUMN,
+	...propsColumn,
+})
+if (!column.expression) {
+	column.expression = { ...emptyExpressionColumn.expression }
+}
+
+const isValid = computed(() => {
+	if (!column.label || !column.type) return false
+	if (!column.expression.raw) return false
+	return true
+})
 
 const COLUMN_TYPES = [
 	{ label: 'String', value: 'String' },
@@ -18,22 +45,6 @@ const COLUMN_TYPES = [
 	{ label: 'Time', value: 'Time' },
 ]
 
-const assistedQuery = inject('assistedQuery')
-const emit = defineEmits(['update:column'])
-const props = defineProps({ column: Object })
-
-const emptyExpressionColumn = {
-	...NEW_COLUMN,
-	expression: {
-		raw: '',
-		ast: {},
-	},
-}
-const column = computed({
-	get: () => props.column || emptyExpressionColumn,
-	set: (val) => emit('update:column', val),
-})
-
 const focused = ref(false)
 const codeEditor = ref(null)
 const helpInfo = ref(null)
@@ -43,9 +54,9 @@ const codeViewUpdate = debounce(function ({ cursorPos: newCurPos }) {
 	currentToken.value = null
 	helpInfo.value = null
 
-	if (!column.value.expression?.raw) return
+	if (!column.expression?.raw) return
 
-	const tokens = parse(column.value.expression.raw).tokens
+	const tokens = parse(column.expression.raw).tokens
 	const token = tokens
 		.filter((t) => t.start <= newCurPos - 1 && t.end >= newCurPos && t.type == 'FUNCTION')
 		.at(-1)
@@ -118,7 +129,7 @@ const suggestionGroups = computed(() => {
 })
 
 function onSuggestionSelect(item) {
-	const raw = column.value.expression.raw
+	const raw = column.expression.raw
 	const start = currentToken.value?.value ? currentToken.value.start : raw.length
 	const end = currentToken.value?.value ? currentToken.value.end : raw.length
 
@@ -127,7 +138,7 @@ function onSuggestionSelect(item) {
 		const newCursorPos = start + newText.length - 1
 		const textBeforeToken = raw.slice(0, start)
 		const textAfterToken = raw.slice(end)
-		column.value.expression.raw = `${textBeforeToken}${newText}${textAfterToken}`
+		column.expression.raw = `${textBeforeToken}${newText}${textAfterToken}`
 
 		nextTick(() => {
 			codeEditor.value.focus()
@@ -140,7 +151,7 @@ function onSuggestionSelect(item) {
 		const newCursorPos = start + newText.length
 		const textBeforeToken = raw.slice(0, start)
 		const textAfterToken = raw.slice(end)
-		column.value.expression.raw = `${textBeforeToken}${newText}${textAfterToken}`
+		column.expression.raw = `${textBeforeToken}${newText}${textAfterToken}`
 
 		nextTick(() => {
 			codeEditor.value.focus()
@@ -150,7 +161,7 @@ function onSuggestionSelect(item) {
 }
 
 function isBetweenParenthesis() {
-	const raw = column.value.expression?.raw
+	const raw = column.expression?.raw
 	const start = codeEditor.value?.cursorPos
 	const end = codeEditor.value?.cursorPos
 	if (!raw) return false
@@ -158,28 +169,23 @@ function isBetweenParenthesis() {
 	const textAfterCursor = raw.slice(end).trim()
 	return textBeforeCursor.endsWith('(') && textAfterCursor.startsWith(')')
 }
+
+function onSave() {
+	if (!isValid.value) return
+	emit('save', {
+		...column,
+		label: column.label.trim(),
+		type: column.type.trim(),
+		expression: {
+			raw: column.expression.raw,
+			ast: parse(column.expression.raw).ast,
+		},
+	})
+}
 </script>
 
 <template>
 	<div class="exp-editor space-y-3 text-base">
-		<div class="flex gap-3">
-			<FormControl
-				type="text"
-				label="Label"
-				class="w-full"
-				v-model="column.label"
-				placeholder="Label"
-				autocomplete="off"
-			/>
-			<FormControl
-				label="Type"
-				type="select"
-				class="w-full"
-				v-model="column.type"
-				:options="COLUMN_TYPES"
-			/>
-		</div>
-
 		<div>
 			<span class="mb-2 block text-sm leading-4 text-gray-700">Expression</span>
 			<div
@@ -209,7 +215,10 @@ function isBetweenParenthesis() {
 			<div
 				class="-mt-1 flex h-[14rem] divide-x divide-gray-300 rounded rounded-t-none border border-t border-gray-300"
 			>
-				<div class="relative flex flex-[2] flex-col overflow-hidden overflow-y-scroll">
+				<div
+					class="relative flex flex-[2] flex-col overflow-hidden overflow-y-scroll"
+					v-auto-animate
+				>
 					<template v-for="group in suggestionGroups">
 						<div
 							class="sticky top-0 flex-shrink-0 truncate bg-gray-50 px-2.5 py-1.5 text-sm font-medium text-gray-600"
@@ -245,7 +254,7 @@ function isBetweenParenthesis() {
 						</div>
 					</template>
 				</div>
-				<div class="flex flex-[3] flex-col overflow-hidden pb-2">
+				<div class="flex flex-[3] flex-col overflow-hidden pb-2" v-auto-animate>
 					<div
 						class="flex-shrink-0 truncate bg-gray-50 px-2.5 py-1.5 text-sm font-medium text-gray-600"
 					>
@@ -269,11 +278,40 @@ function isBetweenParenthesis() {
 				</div>
 			</div>
 		</div>
+
+		<div class="grid grid-cols-2 gap-4">
+			<FormControl
+				type="text"
+				label="Label"
+				class="col-span-1"
+				v-model="column.label"
+				placeholder="Label"
+				autocomplete="off"
+			/>
+			<FormControl
+				label="Type"
+				type="select"
+				class="col-span-1"
+				v-model="column.type"
+				:options="COLUMN_TYPES"
+			/>
+			<div v-if="FIELDTYPES.DATE.includes(column.type)" class="col-span-1 space-y-1">
+				<span class="mb-2 block text-sm leading-4 text-gray-700">Date Format</span>
+				<Autocomplete
+					:modelValue="column.granularity"
+					placeholder="Date Format"
+					:options="GRANULARITIES"
+					@update:modelValue="(op) => (column.granularity = op.value)"
+				/>
+			</div>
+		</div>
+
+		<div class="flex flex-col justify-between gap-2 lg:flex-row">
+			<Button variant="outline" @click="emit('discard')"> Discard </Button>
+			<div class="flex flex-col gap-2 lg:flex-row">
+				<Button variant="outline" theme="red" @click="emit('remove')">Remove</Button>
+				<Button variant="solid" :disabled="!isValid" @click="onSave"> Save </Button>
+			</div>
+		</div>
 	</div>
 </template>
-
-<style>
-.exp-editor .cm-tooltip-autocomplete {
-	position: absolute !important;
-}
-</style>
diff --git a/frontend/src/query/visual/ColumnSection.vue b/frontend/src/query/visual/ColumnSection.vue
index 4a0a61061..a706b7689 100644
--- a/frontend/src/query/visual/ColumnSection.vue
+++ b/frontend/src/query/visual/ColumnSection.vue
@@ -139,18 +139,15 @@ function onColumnSort(e) {
 		:options="{
 			title: 'Expression',
 			size: '3xl',
-			actions: [
-				{ label: 'Discard', variant: 'outline', onClick: () => (activeColumnIdx = null) },
-				{
-					label: 'Save',
-					variant: 'solid',
-					onClick: () => onSaveColumn(columns[activeColumnIdx]),
-				},
-			],
 		}"
 	>
 		<template #body-content>
-			<ColumnExpressionEditor :column="columns[activeColumnIdx]" />
+			<ColumnExpressionEditor
+				:column="columns[activeColumnIdx]"
+				@remove="onRemoveColumn"
+				@save="onSaveColumn"
+				@discard="activeColumnIdx = null"
+			/>
 		</template>
 	</Dialog>
 </template>

From 6e9301e36d2eafac87873c66579aaf69d204007f Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Sat, 13 Jan 2024 15:51:35 +0530
Subject: [PATCH 08/15] chore: move constant to utils

---
 .../query/visual/ColumnExpressionEditor.vue    | 18 +++++++-----------
 frontend/src/utils/index.js                    | 10 ++++++++++
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/frontend/src/query/visual/ColumnExpressionEditor.vue b/frontend/src/query/visual/ColumnExpressionEditor.vue
index 79a38efa2..1d90647bb 100644
--- a/frontend/src/query/visual/ColumnExpressionEditor.vue
+++ b/frontend/src/query/visual/ColumnExpressionEditor.vue
@@ -1,6 +1,12 @@
 <script setup>
 import Code from '@/components/Controls/Code.vue'
-import { FIELDTYPES, GRANULARITIES, fieldtypesToIcon, returnTypesToIcon } from '@/utils'
+import {
+	COLUMN_TYPES,
+	FIELDTYPES,
+	GRANULARITIES,
+	fieldtypesToIcon,
+	returnTypesToIcon,
+} from '@/utils'
 import { parse } from '@/utils/expressions'
 import { FUNCTIONS } from '@/utils/query'
 import { debounce } from 'frappe-ui'
@@ -35,16 +41,6 @@ const isValid = computed(() => {
 	return true
 })
 
-const COLUMN_TYPES = [
-	{ label: 'String', value: 'String' },
-	{ label: 'Integer', value: 'Integer' },
-	{ label: 'Decimal', value: 'Decimal' },
-	{ label: 'Text', value: 'Text' },
-	{ label: 'Datetime', value: 'Datetime' },
-	{ label: 'Date', value: 'Date' },
-	{ label: 'Time', value: 'Time' },
-]
-
 const focused = ref(false)
 const codeEditor = ref(null)
 const helpInfo = ref(null)
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index a9baa8617..4ab61810f 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -15,6 +15,16 @@ import {
 } from 'lucide-vue-next'
 import { computed, unref, watch } from 'vue'
 
+export const COLUMN_TYPES = [
+	{ label: 'String', value: 'String' },
+	{ label: 'Integer', value: 'Integer' },
+	{ label: 'Decimal', value: 'Decimal' },
+	{ label: 'Text', value: 'Text' },
+	{ label: 'Datetime', value: 'Datetime' },
+	{ label: 'Date', value: 'Date' },
+	{ label: 'Time', value: 'Time' },
+]
+
 export const fieldtypesToIcon = {
 	Integer: Hash,
 	Decimal: Hash,

From 65a281a9cd2c4ffddfb5f44fe3ff5c1c3b616563 Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Sat, 13 Jan 2024 20:19:46 +0530
Subject: [PATCH 09/15] refactor: move expression builder logic to a different
 component

---
 .../query/visual/ColumnExpressionEditor.vue   | 233 +-----------------
 .../src/query/visual/ExpressionBuilder.vue    | 233 ++++++++++++++++++
 frontend/src/utils/query/index.js             |   1 +
 3 files changed, 241 insertions(+), 226 deletions(-)
 create mode 100644 frontend/src/query/visual/ExpressionBuilder.vue

diff --git a/frontend/src/query/visual/ColumnExpressionEditor.vue b/frontend/src/query/visual/ColumnExpressionEditor.vue
index 1d90647bb..f8664dade 100644
--- a/frontend/src/query/visual/ColumnExpressionEditor.vue
+++ b/frontend/src/query/visual/ColumnExpressionEditor.vue
@@ -1,16 +1,8 @@
 <script setup>
-import Code from '@/components/Controls/Code.vue'
-import {
-	COLUMN_TYPES,
-	FIELDTYPES,
-	GRANULARITIES,
-	fieldtypesToIcon,
-	returnTypesToIcon,
-} from '@/utils'
+import { COLUMN_TYPES, FIELDTYPES, GRANULARITIES } from '@/utils'
 import { parse } from '@/utils/expressions'
-import { FUNCTIONS } from '@/utils/query'
-import { debounce } from 'frappe-ui'
-import { computed, defineProps, inject, nextTick, reactive, ref } from 'vue'
+import { computed, defineProps, inject, reactive } from 'vue'
+import ExpressionBuilder from './ExpressionBuilder.vue'
 import { NEW_COLUMN } from './constants'
 import { getSelectedTables } from './useAssistedQuery'
 
@@ -41,131 +33,11 @@ const isValid = computed(() => {
 	return true
 })
 
-const focused = ref(false)
-const codeEditor = ref(null)
-const helpInfo = ref(null)
-const currentToken = ref(null)
-
-const codeViewUpdate = debounce(function ({ cursorPos: newCurPos }) {
-	currentToken.value = null
-	helpInfo.value = null
-
-	if (!column.expression?.raw) return
-
-	const tokens = parse(column.expression.raw).tokens
-	const token = tokens
-		.filter((t) => t.start <= newCurPos - 1 && t.end >= newCurPos && t.type == 'FUNCTION')
-		.at(-1)
-
-	currentToken.value = token
-
-	if (token) {
-		const { value } = token
-		if (FUNCTIONS[value]) {
-			helpInfo.value = FUNCTIONS[value]
-		}
-	}
-}, 100)
-
-const filteredColumnOptions = computed(() => {
+const columnOptions = computed(() => {
 	const selectedTables = getSelectedTables(assistedQuery)
-	return assistedQuery.columnOptions
-		.filter((c) => selectedTables.includes(c.table))
-		.filter((c) => {
-			if (!currentToken.value) return true
-			if (isBetweenParenthesis()) return true
-			const searchTxt = currentToken.value.value.toLowerCase()
-			return (
-				c.column.toLowerCase().includes(searchTxt) ||
-				c.label.toLowerCase().includes(searchTxt)
-			)
-		})
-})
-const allFunctionOptions = Object.keys(FUNCTIONS).map((f) => {
-	return {
-		label: f,
-		...FUNCTIONS[f],
-	}
-})
-const filteredFunctionOptions = computed(() => {
-	if (!currentToken.value) return allFunctionOptions
-	if (isBetweenParenthesis()) return allFunctionOptions
-	const searchTxt = currentToken.value.value.toLowerCase()
-	return allFunctionOptions.filter((f) => {
-		return f.label.toLowerCase().includes(searchTxt)
-	})
+	return assistedQuery.columnOptions.filter((c) => selectedTables.includes(c.table)) || []
 })
 
-const suggestionGroups = computed(() => {
-	return [
-		{
-			groupLabel: 'Columns',
-			items: filteredColumnOptions.value.map((c) => {
-				return {
-					...c,
-					icon: fieldtypesToIcon[c.type],
-					label: c.label || c.column,
-					description: c.table_label,
-					suggestionType: 'column',
-				}
-			}),
-		},
-		{
-			groupLabel: 'Functions',
-			items: filteredFunctionOptions.value.map((f) => {
-				return {
-					icon: returnTypesToIcon[f.returnType],
-					label: f.label,
-					description: f.returnType,
-					suggestionType: 'function',
-				}
-			}),
-		},
-	]
-})
-
-function onSuggestionSelect(item) {
-	const raw = column.expression.raw
-	const start = currentToken.value?.value ? currentToken.value.start : raw.length
-	const end = currentToken.value?.value ? currentToken.value.end : raw.length
-
-	if (item.suggestionType === 'function') {
-		const newText = `${item.label}()`
-		const newCursorPos = start + newText.length - 1
-		const textBeforeToken = raw.slice(0, start)
-		const textAfterToken = raw.slice(end)
-		column.expression.raw = `${textBeforeToken}${newText}${textAfterToken}`
-
-		nextTick(() => {
-			codeEditor.value.focus()
-			codeEditor.value.setCursorPos(newCursorPos)
-		})
-	}
-	if (item.suggestionType === 'column') {
-		// insert `table.column`
-		const newText = '`' + `${item.table}.${item.column}` + '`'
-		const newCursorPos = start + newText.length
-		const textBeforeToken = raw.slice(0, start)
-		const textAfterToken = raw.slice(end)
-		column.expression.raw = `${textBeforeToken}${newText}${textAfterToken}`
-
-		nextTick(() => {
-			codeEditor.value.focus()
-			codeEditor.value.setCursorPos(newCursorPos)
-		})
-	}
-}
-
-function isBetweenParenthesis() {
-	const raw = column.expression?.raw
-	const start = codeEditor.value?.cursorPos
-	const end = codeEditor.value?.cursorPos
-	if (!raw) return false
-	const textBeforeCursor = raw.slice(0, start).trim()
-	const textAfterCursor = raw.slice(end).trim()
-	return textBeforeCursor.endsWith('(') && textAfterCursor.startsWith(')')
-}
-
 function onSave() {
 	if (!isValid.value) return
 	emit('save', {
@@ -181,99 +53,8 @@ function onSave() {
 </script>
 
 <template>
-	<div class="exp-editor space-y-3 text-base">
-		<div>
-			<span class="mb-2 block text-sm leading-4 text-gray-700">Expression</span>
-			<div
-				class="h-fit min-h-[2.5rem] rounded rounded-b-none border border-transparent bg-gray-100 p-0 px-1 transition-all"
-				:class="
-					focused
-						? ' border border-b-0 !border-gray-300 bg-white hover:bg-transparent'
-						: ''
-				"
-			>
-				<Code
-					ref="codeEditor"
-					:modelValue="column.expression.raw"
-					:completions="() => {}"
-					placeholder="Write an expression"
-					@focus="focused = true"
-					@blur="focused = false"
-					@viewUpdate="codeViewUpdate"
-					@update:modelValue="
-						column.expression = {
-							raw: $event,
-							ast: parse($event).ast,
-						}
-					"
-				></Code>
-			</div>
-			<div
-				class="-mt-1 flex h-[14rem] divide-x divide-gray-300 rounded rounded-t-none border border-t border-gray-300"
-			>
-				<div
-					class="relative flex flex-[2] flex-col overflow-hidden overflow-y-scroll"
-					v-auto-animate
-				>
-					<template v-for="group in suggestionGroups">
-						<div
-							class="sticky top-0 flex-shrink-0 truncate bg-gray-50 px-2.5 py-1.5 text-sm font-medium text-gray-600"
-						>
-							{{ group.groupLabel }}
-						</div>
-						<div
-							v-for="item in group.items.slice(0, 25)"
-							class="exp-editor-suggestion flex cursor-pointer items-center rounded py-1.5 px-2 hover:bg-gray-100"
-							@click.prevent.stop="onSuggestionSelect(item)"
-						>
-							<component
-								:is="item.icon"
-								class="mr-1 h-4 w-4 flex-shrink-0 text-gray-600"
-							/>
-							<div class="flex flex-1 items-center justify-between overflow-hidden">
-								<span class="flex-1 truncate text-sm text-gray-700">
-									{{ item.label }}
-								</span>
-								<span
-									v-if="item.description"
-									class="flex-shrink-0 text-xs text-gray-500"
-								>
-									{{ item.description }}
-								</span>
-							</div>
-						</div>
-						<div
-							v-if="group.items.length == 0"
-							class="flex h-10 items-center justify-center text-sm text-gray-500"
-						>
-							No {{ group.groupLabel.toLowerCase() }} found
-						</div>
-					</template>
-				</div>
-				<div class="flex flex-[3] flex-col overflow-hidden pb-2" v-auto-animate>
-					<div
-						class="flex-shrink-0 truncate bg-gray-50 px-2.5 py-1.5 text-sm font-medium text-gray-600"
-					>
-						Info
-					</div>
-					<div v-if="helpInfo" class="flex flex-col px-3 py-2 text-sm">
-						<p>{{ helpInfo.description }}</p>
-						<div class="mt-2 rounded bg-gray-50 p-2 text-xs leading-5">
-							<code>
-								<span class="text-gray-600"># Syntax</span>
-								<br />
-								{{ helpInfo.syntax }}
-								<br />
-								<br />
-								<span class="text-gray-600"># Example</span>
-								<br />
-								{{ helpInfo.example }}
-							</code>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
+	<div class="space-y-3 text-base">
+		<ExpressionBuilder v-model="column.expression" :columnOptions="columnOptions" />
 
 		<div class="grid grid-cols-2 gap-4">
 			<FormControl
diff --git a/frontend/src/query/visual/ExpressionBuilder.vue b/frontend/src/query/visual/ExpressionBuilder.vue
new file mode 100644
index 000000000..0d497e6fe
--- /dev/null
+++ b/frontend/src/query/visual/ExpressionBuilder.vue
@@ -0,0 +1,233 @@
+<script setup>
+import Code from '@/components/Controls/Code.vue'
+import { fieldtypesToIcon, returnTypesToIcon } from '@/utils'
+import { parse } from '@/utils/expressions'
+import { FUNCTIONS } from '@/utils/query'
+import { debounce } from 'frappe-ui'
+import { computed, nextTick, reactive, ref } from 'vue'
+
+const emit = defineEmits(['update:modelValue'])
+const props = defineProps({
+	modelValue: Object,
+	columnOptions: Array,
+})
+
+const expression = computed({
+	get: () => props.modelValue,
+	set: (value) => emit('update:modelValue', value),
+})
+
+const focused = ref(false)
+const codeEditor = ref(null)
+const functionHelp = ref(null)
+const suggestionContext = reactive({
+	from: null,
+	to: null,
+	text: null,
+})
+
+const codeViewUpdate = debounce(function ({ cursorPos: _cursorPos }) {
+	functionHelp.value = null
+
+	if (!expression.value?.raw) return
+
+	const tokens = parse(expression.value.raw).tokens
+	const token = tokens
+		.filter((t) => t.type == 'FUNCTION' && t.start < _cursorPos && t.end > _cursorPos)
+		.at(-1)
+
+	if (token) {
+		const { value } = token
+		if (FUNCTIONS[value]) {
+			functionHelp.value = FUNCTIONS[value]
+		}
+	}
+}, 100)
+
+function onSuggestionSelect(item) {
+	const raw = expression.value.raw
+	const start = suggestionContext.from
+	const end = suggestionContext.to
+
+	if (item.suggestionType === 'function') {
+		const textBeforeToken = raw.slice(0, start)
+		const textAfterToken = raw.slice(end)
+		let newText = `${item.label}`
+		if (!textAfterToken.trim().startsWith('(')) newText += '()'
+		expression.value.raw = `${textBeforeToken}${newText}${textAfterToken}`
+
+		const newCursorPos = start + newText.length - 1
+		nextTick(() => {
+			codeEditor.value.focus()
+			codeEditor.value.setCursorPos(newCursorPos)
+		})
+	}
+
+	if (item.suggestionType === 'column') {
+		// insert `table.column`
+		const textBefore = raw.slice(0, start)
+		const textAfter = raw.slice(end)
+		let newText = `${item.table}.${item.column}`
+		if (!textBefore.trim().endsWith('`')) newText = '`' + newText
+		if (!textAfter.trim().startsWith('`')) newText += '`'
+		expression.value.raw = `${textBefore}${newText}${textAfter}`
+
+		const newCursorPos = start + newText.length
+		nextTick(() => {
+			codeEditor.value.focus()
+			codeEditor.value.setCursorPos(newCursorPos)
+		})
+	}
+}
+
+const allFunctionOptions = Object.keys(FUNCTIONS).map((f) => {
+	return {
+		label: f,
+		...FUNCTIONS[f],
+	}
+})
+const allOptions = computed(() => {
+	return [
+		...props.columnOptions.map((c) => ({
+			...c,
+			icon: fieldtypesToIcon[c.type],
+			label: c.label || c.column,
+			value: `${c.table}.${c.column}`,
+			description: c.table_label,
+			suggestionType: 'column',
+		})),
+		...allFunctionOptions.map((f) => ({
+			icon: returnTypesToIcon[f.returnType],
+			label: f.label,
+			value: f.label,
+			description: f.returnType,
+			suggestionType: 'function',
+		})),
+	]
+})
+
+const filteredOptions = computed(() => {
+	if (!suggestionContext.text) return allOptions.value
+	const _searchTxt = suggestionContext.text.toLowerCase()
+	return allOptions.value.filter(
+		(o) =>
+			o.label.toLowerCase().includes(_searchTxt) ||
+			o.value.toLowerCase().includes(_searchTxt) ||
+			o.description?.toLowerCase().includes(_searchTxt)
+	)
+})
+
+const filteredGroupedOptions = computed(() => {
+	return [
+		{
+			groupLabel: 'Columns',
+			items: filteredOptions.value.filter((o) => o.suggestionType === 'column'),
+		},
+		{
+			groupLabel: 'Functions',
+			items: filteredOptions.value.filter((o) => o.suggestionType === 'function'),
+		},
+	]
+})
+
+const onGetCodeCompletion = (context) => {
+	const _context = context.matchBefore(/\w*/)
+	suggestionContext.from = _context?.from
+	suggestionContext.to = _context?.to
+	suggestionContext.text = _context?.text
+}
+</script>
+
+<template>
+	<div>
+		<span class="mb-2 block text-sm leading-4 text-gray-700">Expression</span>
+		<div
+			class="h-fit min-h-[2.5rem] rounded rounded-b-none border border-transparent bg-gray-100 p-0 px-1 transition-all"
+			:class="
+				focused ? ' border border-b-0 !border-gray-300 bg-white hover:bg-transparent' : ''
+			"
+		>
+			<Code
+				ref="codeEditor"
+				:modelValue="expression.raw"
+				:completions="onGetCodeCompletion"
+				placeholder="Write an expression"
+				@focus="focused = true"
+				@blur="focused = false"
+				@viewUpdate="codeViewUpdate"
+				@update:modelValue="
+					expression = {
+						raw: $event,
+						ast: parse($event).ast,
+					}
+				"
+			></Code>
+		</div>
+		<div
+			class="-mt-1 flex h-[14rem] divide-x divide-gray-300 rounded rounded-t-none border border-t border-gray-300"
+		>
+			<div
+				class="relative flex flex-[2] flex-col overflow-hidden overflow-y-scroll"
+				v-auto-animate
+			>
+				<template v-for="group in filteredGroupedOptions">
+					<div
+						class="sticky top-0 flex-shrink-0 truncate bg-gray-50 px-2.5 py-1.5 text-sm font-medium text-gray-600"
+					>
+						{{ group.groupLabel }}
+					</div>
+					<div
+						v-for="item in group.items.slice(0, 25)"
+						:key="item.value"
+						class="exp-editor-suggestion flex cursor-pointer items-center rounded py-1.5 px-2 hover:bg-gray-100"
+						@click.prevent.stop="onSuggestionSelect(item)"
+					>
+						<component
+							:is="item.icon"
+							class="mr-1 h-4 w-4 flex-shrink-0 text-gray-600"
+						/>
+						<div class="flex flex-1 items-center justify-between overflow-hidden">
+							<span class="flex-1 truncate text-sm text-gray-700">
+								{{ item.label }}
+							</span>
+							<span
+								v-if="item.description"
+								class="flex-shrink-0 text-xs text-gray-500"
+							>
+								{{ item.description }}
+							</span>
+						</div>
+					</div>
+					<div
+						v-if="group.items.length == 0"
+						class="flex h-10 items-center justify-center text-sm text-gray-500"
+					>
+						No {{ group.groupLabel.toLowerCase() }} found
+					</div>
+				</template>
+			</div>
+			<div class="flex flex-[3] flex-col overflow-hidden pb-2" v-auto-animate>
+				<div
+					class="flex-shrink-0 truncate bg-gray-50 px-2.5 py-1.5 text-sm font-medium text-gray-600"
+				>
+					Info
+				</div>
+				<div v-if="functionHelp" class="flex flex-col px-3 py-2 text-sm">
+					<p>{{ functionHelp.description }}</p>
+					<div class="mt-2 rounded bg-gray-50 p-2 text-xs leading-5">
+						<code>
+							<span class="text-gray-600"># Syntax</span>
+							<br />
+							{{ functionHelp.syntax }}
+							<br />
+							<br />
+							<span class="text-gray-600"># Example</span>
+							<br />
+							{{ functionHelp.example }}
+						</code>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/frontend/src/utils/query/index.js b/frontend/src/utils/query/index.js
index da2a5cdea..cd5f18771 100644
--- a/frontend/src/utils/query/index.js
+++ b/frontend/src/utils/query/index.js
@@ -84,6 +84,7 @@ export const FUNCTIONS = {
 		syntax: 'substring(column_name, start, end)',
 		description: 'Extracts part of the column value.',
 		example: 'substring(`customer`, 0, 5)',
+		returnType: 'string',
 	},
 
 	// Arithmetic Functions

From a171e29192ad716ef035ffd094c0b7ecf06bcf21 Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Sat, 13 Jan 2024 21:22:45 +0530
Subject: [PATCH 10/15] refactor: use expression builder for filter expressions

---
 .../src/query/visual/ExpressionBuilder.vue    |   8 +-
 frontend/src/query/visual/FilterEditor.vue    |  13 +-
 .../query/visual/FilterExpressionEditor.vue   | 149 +++++-------------
 frontend/src/query/visual/FilterListItem.vue  |  63 ++++++++
 frontend/src/query/visual/FilterSection.vue   | 124 ++++++---------
 5 files changed, 162 insertions(+), 195 deletions(-)
 create mode 100644 frontend/src/query/visual/FilterListItem.vue

diff --git a/frontend/src/query/visual/ExpressionBuilder.vue b/frontend/src/query/visual/ExpressionBuilder.vue
index 0d497e6fe..a8aa7b7db 100644
--- a/frontend/src/query/visual/ExpressionBuilder.vue
+++ b/frontend/src/query/visual/ExpressionBuilder.vue
@@ -55,6 +55,7 @@ function onSuggestionSelect(item) {
 		let newText = `${item.label}`
 		if (!textAfterToken.trim().startsWith('(')) newText += '()'
 		expression.value.raw = `${textBeforeToken}${newText}${textAfterToken}`
+		expression.value.ast = parse(expression.value.raw).ast
 
 		const newCursorPos = start + newText.length - 1
 		nextTick(() => {
@@ -71,6 +72,7 @@ function onSuggestionSelect(item) {
 		if (!textBefore.trim().endsWith('`')) newText = '`' + newText
 		if (!textAfter.trim().startsWith('`')) newText += '`'
 		expression.value.raw = `${textBefore}${newText}${textAfter}`
+		expression.value.ast = parse(expression.value.raw).ast
 
 		const newCursorPos = start + newText.length
 		nextTick(() => {
@@ -139,7 +141,7 @@ const onGetCodeCompletion = (context) => {
 </script>
 
 <template>
-	<div>
+	<div class="min-w-[32rem]">
 		<span class="mb-2 block text-sm leading-4 text-gray-700">Expression</span>
 		<div
 			class="h-fit min-h-[2.5rem] rounded rounded-b-none border border-transparent bg-gray-100 p-0 px-1 transition-all"
@@ -167,7 +169,7 @@ const onGetCodeCompletion = (context) => {
 			class="-mt-1 flex h-[14rem] divide-x divide-gray-300 rounded rounded-t-none border border-t border-gray-300"
 		>
 			<div
-				class="relative flex flex-[2] flex-col overflow-hidden overflow-y-scroll"
+				class="relative flex flex-1 flex-col overflow-hidden overflow-y-scroll"
 				v-auto-animate
 			>
 				<template v-for="group in filteredGroupedOptions">
@@ -206,7 +208,7 @@ const onGetCodeCompletion = (context) => {
 					</div>
 				</template>
 			</div>
-			<div class="flex flex-[3] flex-col overflow-hidden pb-2" v-auto-animate>
+			<div class="flex flex-1 flex-col overflow-hidden pb-2" v-auto-animate>
 				<div
 					class="flex-shrink-0 truncate bg-gray-50 px-2.5 py-1.5 text-sm font-medium text-gray-600"
 				>
diff --git a/frontend/src/query/visual/FilterEditor.vue b/frontend/src/query/visual/FilterEditor.vue
index ba03bc160..c650651f2 100644
--- a/frontend/src/query/visual/FilterEditor.vue
+++ b/frontend/src/query/visual/FilterEditor.vue
@@ -1,9 +1,10 @@
 <script setup>
 import { FIELDTYPES, getOperatorOptions } from '@/utils'
 import { computed, defineProps, inject, reactive, ref, watch } from 'vue'
-import FilterExpressionEditor from './FilterExpressionEditor.vue'
+import ExpressionBuilder from './ExpressionBuilder.vue'
 import FilterValueSelector from './FilterValueSelector.vue'
 import { NEW_FILTER } from './constants'
+import { getSelectedTables } from './useAssistedQuery'
 
 const emit = defineEmits(['save', 'discard', 'remove'])
 const props = defineProps({ filter: Object })
@@ -83,6 +84,11 @@ function isValidExpression(c) {
 	if (!c) return false
 	return c.expression?.raw && c.expression?.ast
 }
+
+const expressionColumnOptions = computed(() => {
+	const selectedTables = getSelectedTables(assistedQuery)
+	return assistedQuery.columnOptions.filter((c) => selectedTables.includes(c.table)) || []
+})
 </script>
 
 <template>
@@ -100,7 +106,10 @@ function isValidExpression(c) {
 			</div>
 		</div>
 		<template v-if="activeTab == 'Expression'">
-			<FilterExpressionEditor v-model:filter="filter" />
+			<ExpressionBuilder
+				v-model="filter.expression"
+				:columnOptions="expressionColumnOptions"
+			/>
 		</template>
 		<template v-if="activeTab == 'Simple'">
 			<div class="space-y-1">
diff --git a/frontend/src/query/visual/FilterExpressionEditor.vue b/frontend/src/query/visual/FilterExpressionEditor.vue
index 8aaca9c56..aefc2d7e4 100644
--- a/frontend/src/query/visual/FilterExpressionEditor.vue
+++ b/frontend/src/query/visual/FilterExpressionEditor.vue
@@ -1,132 +1,59 @@
 <script setup>
-import Code from '@/components/Controls/Code.vue'
-import ExpressionHelp from '@/components/ExpressionHelp.vue'
-import UsePopover from '@/components/UsePopover.vue'
 import { parse } from '@/utils/expressions'
-import { FUNCTIONS } from '@/utils/query'
-import { debounce } from 'frappe-ui'
-import { computed, inject, onMounted, ref } from 'vue'
+import { computed, defineProps, inject, reactive } from 'vue'
+import ExpressionBuilder from './ExpressionBuilder.vue'
+import { NEW_FILTER } from './constants'
 import { getSelectedTables } from './useAssistedQuery'
 
-const query = inject('query')
+const emptyExpressionFilter = {
+	...NEW_FILTER,
+	expression: {
+		raw: '',
+		ast: {},
+	},
+}
+
 const assistedQuery = inject('assistedQuery')
-const emit = defineEmits(['update:filter'])
 const props = defineProps({ filter: Object })
 
-const filter = computed({
-	get: () => props.filter,
-	set: (val) =>
-		emit('update:filter', {
-			expression: {
-				raw: val.expression.raw,
-				ast: val.expression.ast,
-			},
-		}),
-})
-
-const focused = ref(false)
-const columnCompletions = computed(() => {
-	// a list of options for code autocompletion
-	const selectedTables = getSelectedTables(assistedQuery)
-	return assistedQuery.columnOptions
-		.filter((c) => selectedTables.includes(c.table))
-		.map((c) => ({ label: `${c.table}.${c.column}` }))
+const propsFilter = props.filter || emptyExpressionFilter
+const filter = reactive({
+	...NEW_FILTER,
+	...propsFilter,
 })
-const getCompletions = (context, syntaxTree) => {
-	let word = context.matchBefore(/\w*/)
-	let nodeBefore = syntaxTree.resolveInner(context.pos, -1)
-
-	if (nodeBefore.name === 'TemplateString') {
-		return {
-			from: word.from,
-			options: columnCompletions.value,
-		}
-	}
-	if (nodeBefore.name === 'VariableName') {
-		return {
-			from: word.from,
-			options: Object.keys(FUNCTIONS).map((label) => ({ label })),
-		}
-	}
+if (!filter.expression) {
+	filter.expression = { ...emptyExpressionFilter.expression }
 }
 
-const codeEditor = ref(null)
-const helpInfo = ref(null)
-const codeViewUpdate = debounce(function ({ cursorPos }) {
-	if (!filter.value.expression?.raw) return
-	setCompletionPosition()
-	helpInfo.value = null
-	const tokens = parse(filter.value.expression.raw).tokens
-	const token = tokens
-		.filter((t) => t.start <= cursorPos - 1 && t.end >= cursorPos && t.type == 'FUNCTION')
-		.at(-1)
-	if (token) {
-		const { value } = token
-		if (FUNCTIONS[value]) {
-			helpInfo.value = FUNCTIONS[value]
-		}
-	}
-}, 300)
-
-const helpInfoRefreshKey = ref(0)
-const observer = new ResizeObserver(() => {
-	helpInfoRefreshKey.value += 1
-})
-onMounted(() => {
-	codeEditor.value && observer.observe(codeEditor.value)
+const isValid = computed(() => {
+	return filter.expression.raw.trim().length > 0 && filter.expression.ast
 })
 
-function setCompletionPosition() {
-	const completion = document.querySelector('.cm-tooltip-autocomplete')
-	if (!completion) return
-
-	const cursor = document.querySelector('.cm-cursor.cm-cursor-primary')
-	const left = Number(cursor.style.left.replace('px', ''))
-	const top = Number(cursor.style.top.replace('px', ''))
+const columnOptions = computed(() => {
+	const selectedTables = getSelectedTables(assistedQuery)
+	return assistedQuery.columnOptions.filter((c) => selectedTables.includes(c.table)) || []
+})
 
-	completion.setAttribute('style', `left: ${left}px !important; top: ${top + 20}px !important;`)
+function onSave() {
+	if (!isValid.value) return
+	emit('save', {
+		...filter,
+		expression: {
+			raw: filter.expression.raw,
+			ast: parse(filter.expression.raw).ast,
+		},
+	})
 }
 </script>
 
 <template>
-	<div class="exp-editor space-y-3 text-base">
-		<div>
-			<span class="mb-2 block text-sm leading-4 text-gray-700">Expression</span>
-			<div ref="codeEditor" class="form-input min-h-[7rem] border border-gray-400 p-0">
-				<Code
-					:modelValue="filter.expression.raw"
-					:completions="getCompletions"
-					:autofocus="false"
-					placeholder="Write an expression"
-					@focus="focused = true"
-					@blur="focused = false"
-					@viewUpdate="codeViewUpdate"
-					@update:modelValue="
-						filter.expression = {
-							raw: $event,
-							ast: parse($event).ast,
-						}
-					"
-				></Code>
+	<div class="space-y-3 text-base">
+		<div class="flex flex-col justify-between gap-2 lg:flex-row">
+			<Button variant="outline" @click="emit('discard')"> Discard </Button>
+			<div class="flex flex-col gap-2 lg:flex-row">
+				<Button variant="outline" theme="red" @click="emit('remove')">Remove</Button>
+				<Button variant="solid" :disabled="!isValid" @click="onSave"> Save </Button>
 			</div>
 		</div>
 	</div>
-
-	<UsePopover
-		v-if="codeEditor"
-		:show="focused && Boolean(helpInfo)"
-		:targetElement="codeEditor"
-		placement="right-start"
-		:key="helpInfoRefreshKey"
-	>
-		<div class="w-[10rem] text-sm transition-all">
-			<ExpressionHelp v-show="helpInfo?.syntax" :info="helpInfo" />
-		</div>
-	</UsePopover>
 </template>
-
-<style>
-.exp-editor .cm-tooltip-autocomplete {
-	position: absolute !important;
-}
-</style>
diff --git a/frontend/src/query/visual/FilterListItem.vue b/frontend/src/query/visual/FilterListItem.vue
new file mode 100644
index 000000000..6339fbaf2
--- /dev/null
+++ b/frontend/src/query/visual/FilterListItem.vue
@@ -0,0 +1,63 @@
+<script setup>
+import { fieldtypesToIcon } from '@/utils'
+import { Sigma, X } from 'lucide-vue-next'
+
+defineProps(['filter', 'isActive'])
+defineEmits(['edit', 'remove'])
+
+function isValidExpression(expression) {
+	return expression?.raw && expression?.ast
+}
+
+function isValidFilter(filter) {
+	if (isValidExpression(filter.expression)) return true
+	const is_valid_column = filter.column.column || isValidExpression(filter.column.expression)
+	return (
+		is_valid_column &&
+		filter.operator.value &&
+		(filter.value.value || filter.operator.value.includes('is_'))
+	)
+}
+</script>
+
+<template>
+	<div
+		class="group flex h-8 w-full cursor-pointer items-center justify-between rounded border border-gray-300 bg-white px-2 hover:shadow"
+		:class="isActive ? 'border-gray-500 bg-white shadow-sm ring-1 ring-gray-400' : ''"
+		@click="$emit('edit')"
+	>
+		<div class="flex w-full items-center overflow-hidden">
+			<div class="flex w-full space-x-2" v-if="isValidFilter(filter)">
+				<template v-if="filter.expression?.raw">
+					<component :is="Sigma" class="h-4 w-4 flex-shrink-0 text-gray-600" />
+					<span class="truncate font-mono">{{ filter.expression.raw }}</span>
+				</template>
+				<template v-else>
+					<div class="flex max-w-[60%] flex-shrink-0 gap-1 truncate">
+						<component
+							:is="fieldtypesToIcon[filter.column.type]"
+							class="h-4 w-4 flex-shrink-0 text-gray-600"
+						/>
+						{{ filter.column.label || filter.column.column }}
+					</div>
+					<span class="flex-shrink-0 font-medium text-green-600">
+						{{ filter.operator.value }}
+					</span>
+					<span
+						v-if="!filter.operator.value.includes('is_')"
+						class="flex-1 flex-shrink-0 truncate"
+					>
+						{{ filter.value.label || filter.value.value }}
+					</span>
+				</template>
+			</div>
+			<div v-else class="text-gray-600">Select a filter</div>
+		</div>
+		<div class="flex items-center">
+			<X
+				class="invisible h-4 w-4 text-gray-600 transition-all hover:text-gray-800 group-hover:visible"
+				@click.prevent.stop="$emit('remove')"
+			/>
+		</div>
+	</div>
+</template>
diff --git a/frontend/src/query/visual/FilterSection.vue b/frontend/src/query/visual/FilterSection.vue
index 80bbfa301..43cd99393 100644
--- a/frontend/src/query/visual/FilterSection.vue
+++ b/frontend/src/query/visual/FilterSection.vue
@@ -1,22 +1,31 @@
 <script setup>
-import UsePopover from '@/components/UsePopover.vue'
-import { ListFilter, X } from 'lucide-vue-next'
-import { computed, inject, ref } from 'vue'
+import { ListFilter } from 'lucide-vue-next'
+import { computed, inject, nextTick, ref } from 'vue'
 import FilterEditor from './FilterEditor.vue'
-import { fieldtypesToIcon } from '@/utils'
+import FilterListItem from './FilterListItem.vue'
 import SectionHeader from './SectionHeader.vue'
-import { Sigma } from 'lucide-vue-next'
 
 const query = inject('query')
 const assistedQuery = inject('assistedQuery')
 
 const filters = computed(() => assistedQuery.filters)
-const filterRefs = ref(null)
 const activeFilterIdx = ref(null)
 
+const showExpressionEditor = computed(() => {
+	if (activeFilterIdx.value === null) return false
+	const activeFilter = filters.value[activeFilterIdx.value]
+	if (!activeFilter) return false
+	return (
+		activeFilter.expression.hasOwnProperty('raw') ||
+		activeFilter.expression.hasOwnProperty('ast')
+	)
+})
+
 function onAddFilter() {
 	assistedQuery.addFilter()
-	activeFilterIdx.value = filters.value.length - 1
+	nextTick(() => {
+		activeFilterIdx.value = filters.value.length - 1
+	})
 }
 function onRemoveFilter() {
 	assistedQuery.removeFilterAt(activeFilterIdx.value)
@@ -26,16 +35,6 @@ function onSaveFilter(filter) {
 	assistedQuery.updateFilterAt(activeFilterIdx.value, filter)
 	activeFilterIdx.value = null
 }
-function isValidFilter(filter) {
-	if (filter.expression?.raw && filter.expression?.ast) return true
-	const is_valid_column =
-		filter.column.column || (filter.column.expression?.raw && filter.column.expression?.ast)
-	return (
-		is_valid_column &&
-		filter.operator.value &&
-		(filter.value.value || filter.operator.value.includes('is_'))
-	)
-}
 </script>
 
 <template>
@@ -44,68 +43,35 @@ function isValidFilter(filter) {
 			<Button variant="outline" icon="plus" @click.prevent.stop="onAddFilter"></Button>
 		</SectionHeader>
 		<div class="space-y-2">
-			<div
-				ref="filterRefs"
-				v-for="(filter, idx) in filters"
-				:key="idx"
-				class="group flex h-8 cursor-pointer items-center justify-between rounded border border-gray-300 bg-white px-2 hover:shadow"
-				:class="
-					activeFilterIdx === idx
-						? 'border-gray-500 bg-white shadow-sm ring-1 ring-gray-400'
-						: ''
-				"
-				@click="activeFilterIdx = filters.indexOf(filter)"
-			>
-				<div class="flex w-full items-center overflow-hidden">
-					<div class="flex w-full space-x-2" v-if="isValidFilter(filter)">
-						<template v-if="filter.expression?.raw">
-							<span class="truncate font-mono">{{ filter.expression.raw }}</span>
-						</template>
-						<template v-else>
-							<div class="flex max-w-[60%] flex-shrink-0 gap-1 truncate">
-								<component
-									:is="fieldtypesToIcon[filter.column.type] || Sigma"
-									class="h-4 w-4 flex-shrink-0 text-gray-600"
-								/>
-								{{ filter.column.label || filter.column.column }}
-							</div>
-							<span class="flex-shrink-0 font-medium text-green-600">
-								{{ filter.operator.value }}
-							</span>
-							<span
-								v-if="!filter.operator.value.includes('is_')"
-								class="flex-1 flex-shrink-0 truncate"
-							>
-								{{ filter.value.label || filter.value.value }}
-							</span>
-						</template>
-					</div>
-					<div v-else class="text-gray-600">Select a filter</div>
-				</div>
-				<div class="flex items-center">
-					<X
-						class="invisible h-4 w-4 text-gray-600 transition-all hover:text-gray-800 group-hover:visible"
-						@click.prevent.stop="assistedQuery.removeFilterAt(idx)"
-					/>
-				</div>
-			</div>
+			<template v-for="(filter, idx) in filters" :key="idx">
+				<Popover
+					:show="activeFilterIdx === idx"
+					@close="activeFilterIdx = null"
+					placement="right-start"
+				>
+					<template #target="{ togglePopover }">
+						<FilterListItem
+							:filter="filter"
+							:isActive="activeFilterIdx === idx"
+							@edit="activeFilterIdx = idx"
+							@remove="assistedQuery.removeFilterAt(idx)"
+						/>
+					</template>
+					<template #body>
+						<div
+							v-if="activeFilterIdx === idx"
+							class="ml-2 min-w-[20rem] rounded-lg border border-gray-100 bg-white text-base shadow-xl transition-all"
+						>
+							<FilterEditor
+								:filter="filters[activeFilterIdx]"
+								@discard="activeFilterIdx = null"
+								@remove="onRemoveFilter"
+								@save="onSaveFilter"
+							/>
+						</div>
+					</template>
+				</Popover>
+			</template>
 		</div>
 	</div>
-
-	<UsePopover
-		v-if="filterRefs?.[activeFilterIdx]"
-		:show="activeFilterIdx !== null"
-		@update:show="activeFilterIdx = null"
-		:target-element="filterRefs[activeFilterIdx]"
-		placement="right-start"
-	>
-		<div class="w-[20rem] rounded bg-white text-base shadow-2xl">
-			<FilterEditor
-				:filter="filters[activeFilterIdx]"
-				@discard="activeFilterIdx = null"
-				@remove="onRemoveFilter"
-				@save="onSaveFilter"
-			/>
-		</div>
-	</UsePopover>
 </template>

From 0d81d4d7b14f572c5eb659cc90b9acabef107bc6 Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Sat, 13 Jan 2024 21:25:52 +0530
Subject: [PATCH 11/15] fix: dialog label

---
 frontend/src/query/visual/ColumnSection.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/query/visual/ColumnSection.vue b/frontend/src/query/visual/ColumnSection.vue
index a706b7689..69fc6e5d5 100644
--- a/frontend/src/query/visual/ColumnSection.vue
+++ b/frontend/src/query/visual/ColumnSection.vue
@@ -137,7 +137,7 @@ function onColumnSort(e) {
 		:modelValue="showExpressionEditor"
 		@close="activeColumnIdx = null"
 		:options="{
-			title: 'Expression',
+			title: 'Column Expression',
 			size: '3xl',
 		}"
 	>

From 6c621d88e0ea2ef752066c194e1a9a5dc9499111 Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Sat, 13 Jan 2024 21:32:44 +0530
Subject: [PATCH 12/15] fix: cannot call `slice` of undefined

---
 frontend/src/query/visual/ExpressionBuilder.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/query/visual/ExpressionBuilder.vue b/frontend/src/query/visual/ExpressionBuilder.vue
index a8aa7b7db..742fd8fa9 100644
--- a/frontend/src/query/visual/ExpressionBuilder.vue
+++ b/frontend/src/query/visual/ExpressionBuilder.vue
@@ -45,7 +45,7 @@ const codeViewUpdate = debounce(function ({ cursorPos: _cursorPos }) {
 }, 100)
 
 function onSuggestionSelect(item) {
-	const raw = expression.value.raw
+	const raw = expression.value.raw || ''
 	const start = suggestionContext.from
 	const end = suggestionContext.to
 

From 77b48393b0fd710ac460945eac21ec7a5ff7797d Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Sat, 13 Jan 2024 21:32:59 +0530
Subject: [PATCH 13/15] chore: remove unused component

---
 .../query/visual/FilterExpressionEditor.vue   | 59 -------------------
 1 file changed, 59 deletions(-)
 delete mode 100644 frontend/src/query/visual/FilterExpressionEditor.vue

diff --git a/frontend/src/query/visual/FilterExpressionEditor.vue b/frontend/src/query/visual/FilterExpressionEditor.vue
deleted file mode 100644
index aefc2d7e4..000000000
--- a/frontend/src/query/visual/FilterExpressionEditor.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<script setup>
-import { parse } from '@/utils/expressions'
-import { computed, defineProps, inject, reactive } from 'vue'
-import ExpressionBuilder from './ExpressionBuilder.vue'
-import { NEW_FILTER } from './constants'
-import { getSelectedTables } from './useAssistedQuery'
-
-const emptyExpressionFilter = {
-	...NEW_FILTER,
-	expression: {
-		raw: '',
-		ast: {},
-	},
-}
-
-const assistedQuery = inject('assistedQuery')
-const props = defineProps({ filter: Object })
-
-const propsFilter = props.filter || emptyExpressionFilter
-const filter = reactive({
-	...NEW_FILTER,
-	...propsFilter,
-})
-if (!filter.expression) {
-	filter.expression = { ...emptyExpressionFilter.expression }
-}
-
-const isValid = computed(() => {
-	return filter.expression.raw.trim().length > 0 && filter.expression.ast
-})
-
-const columnOptions = computed(() => {
-	const selectedTables = getSelectedTables(assistedQuery)
-	return assistedQuery.columnOptions.filter((c) => selectedTables.includes(c.table)) || []
-})
-
-function onSave() {
-	if (!isValid.value) return
-	emit('save', {
-		...filter,
-		expression: {
-			raw: filter.expression.raw,
-			ast: parse(filter.expression.raw).ast,
-		},
-	})
-}
-</script>
-
-<template>
-	<div class="space-y-3 text-base">
-		<div class="flex flex-col justify-between gap-2 lg:flex-row">
-			<Button variant="outline" @click="emit('discard')"> Discard </Button>
-			<div class="flex flex-col gap-2 lg:flex-row">
-				<Button variant="outline" theme="red" @click="emit('remove')">Remove</Button>
-				<Button variant="solid" :disabled="!isValid" @click="onSave"> Save </Button>
-			</div>
-		</div>
-	</div>
-</template>

From b2424edd61e08a61a6d6c7ac342660afa7ff2759 Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Sat, 13 Jan 2024 21:33:08 +0530
Subject: [PATCH 14/15] fix: filter edit issue

---
 frontend/src/query/visual/FilterListItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/query/visual/FilterListItem.vue b/frontend/src/query/visual/FilterListItem.vue
index 6339fbaf2..a43e5be43 100644
--- a/frontend/src/query/visual/FilterListItem.vue
+++ b/frontend/src/query/visual/FilterListItem.vue
@@ -24,7 +24,7 @@ function isValidFilter(filter) {
 	<div
 		class="group flex h-8 w-full cursor-pointer items-center justify-between rounded border border-gray-300 bg-white px-2 hover:shadow"
 		:class="isActive ? 'border-gray-500 bg-white shadow-sm ring-1 ring-gray-400' : ''"
-		@click="$emit('edit')"
+		@click.prevent.stop="$emit('edit')"
 	>
 		<div class="flex w-full items-center overflow-hidden">
 			<div class="flex w-full space-x-2" v-if="isValidFilter(filter)">

From 6121c7cff54e224b2d0fabc38c044634733dda30 Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Sat, 13 Jan 2024 21:52:47 +0530
Subject: [PATCH 15/15] fix: expression auto-save bug

* modifying `raw` expression triggered `save` for some reason
---
 .../src/query/visual/ExpressionBuilder.vue    | 30 ++++++++-----------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/frontend/src/query/visual/ExpressionBuilder.vue b/frontend/src/query/visual/ExpressionBuilder.vue
index 742fd8fa9..a65865f3f 100644
--- a/frontend/src/query/visual/ExpressionBuilder.vue
+++ b/frontend/src/query/visual/ExpressionBuilder.vue
@@ -12,9 +12,13 @@ const props = defineProps({
 	columnOptions: Array,
 })
 
-const expression = computed({
-	get: () => props.modelValue,
-	set: (value) => emit('update:modelValue', value),
+const rawExpression = computed({
+	get: () => props.modelValue?.raw || '',
+	set: (value) =>
+		emit('update:modelValue', {
+			raw: value,
+			ast: parse(value).ast,
+		}),
 })
 
 const focused = ref(false)
@@ -29,9 +33,9 @@ const suggestionContext = reactive({
 const codeViewUpdate = debounce(function ({ cursorPos: _cursorPos }) {
 	functionHelp.value = null
 
-	if (!expression.value?.raw) return
+	if (!rawExpression.value) return
 
-	const tokens = parse(expression.value.raw).tokens
+	const tokens = parse(rawExpression.value).tokens
 	const token = tokens
 		.filter((t) => t.type == 'FUNCTION' && t.start < _cursorPos && t.end > _cursorPos)
 		.at(-1)
@@ -45,7 +49,7 @@ const codeViewUpdate = debounce(function ({ cursorPos: _cursorPos }) {
 }, 100)
 
 function onSuggestionSelect(item) {
-	const raw = expression.value.raw || ''
+	const raw = rawExpression.value || ''
 	const start = suggestionContext.from
 	const end = suggestionContext.to
 
@@ -54,8 +58,7 @@ function onSuggestionSelect(item) {
 		const textAfterToken = raw.slice(end)
 		let newText = `${item.label}`
 		if (!textAfterToken.trim().startsWith('(')) newText += '()'
-		expression.value.raw = `${textBeforeToken}${newText}${textAfterToken}`
-		expression.value.ast = parse(expression.value.raw).ast
+		rawExpression.value = `${textBeforeToken}${newText}${textAfterToken}`
 
 		const newCursorPos = start + newText.length - 1
 		nextTick(() => {
@@ -71,8 +74,7 @@ function onSuggestionSelect(item) {
 		let newText = `${item.table}.${item.column}`
 		if (!textBefore.trim().endsWith('`')) newText = '`' + newText
 		if (!textAfter.trim().startsWith('`')) newText += '`'
-		expression.value.raw = `${textBefore}${newText}${textAfter}`
-		expression.value.ast = parse(expression.value.raw).ast
+		rawExpression.value = `${textBefore}${newText}${textAfter}`
 
 		const newCursorPos = start + newText.length
 		nextTick(() => {
@@ -151,18 +153,12 @@ const onGetCodeCompletion = (context) => {
 		>
 			<Code
 				ref="codeEditor"
-				:modelValue="expression.raw"
+				v-model="rawExpression"
 				:completions="onGetCodeCompletion"
 				placeholder="Write an expression"
 				@focus="focused = true"
 				@blur="focused = false"
 				@viewUpdate="codeViewUpdate"
-				@update:modelValue="
-					expression = {
-						raw: $event,
-						ast: parse($event).ast,
-					}
-				"
 			></Code>
 		</div>
 		<div