feat: better code completions

frontend/src2/helpers/index.ts

@@ -12,6 +12,7 @@ import {
 import { FIELDTYPES } from './constants'
 import { createToast } from './toasts'
 import { getFormattedDate } from '../query/helpers'
+import { call } from 'frappe-ui'
 
 export function getUniqueId(length = 8) {
 	return (+new Date() * Math.random()).toString(36).substring(0, length)
@@ -431,3 +432,22 @@ function areValidDates(data: string[]) {
 function isValidDate(value: string) {
 	return !isNaN(new Date(value).getTime())
 }
+
+const fetchCache = new Map<string, any>()
+export function fetchCall(url: string, options?: any): Promise<any> {
+	// a function that makes a fetch call, but also caches the response for the same url & options
+	const key = JSON.stringify({ url, options })
+	if (fetchCache.has(key)) {
+		return Promise.resolve(fetchCache.get(key))
+	}
+
+	return call(url, options)
+		.then((response: any) => {
+			fetchCache.set(key, response)
+			return response
+		})
+		.catch((err: Error) => {
+			fetchCache.delete(key)
+			throw err
+		})
+}

frontend/src2/index.css

@@ -2,6 +2,10 @@
 @import 'frappe-ui/src/style.css';
 @import './styles/codemirror.css';
 
+body {
+	@apply text-base;
+}
+
 .tnum {
 	font-feature-settings: 'tnum';
 }

frontend/src2/query/components/ExpressionEditor.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { call } from 'frappe-ui'
-import { ref } from 'vue'
+import { debounce } from 'frappe-ui'
+import { onMounted, ref } from 'vue'
 import Code from '../../components/Code.vue'
+import { fetchCall } from '../../helpers'
 import { ColumnOption } from '../../types/query.types'
 
 const props = defineProps<{ columnOptions: ColumnOption[]; placeholder?: string }>()
@@ -10,7 +11,7 @@ const expression = defineModel<string>({
 })
 
 const functionList = ref<string[]>([])
-call('insights.insights.doctype.insights_data_source_v3.ibis_functions.get_function_list').then(
+fetchCall('insights.insights.doctype.insights_data_source_v3.ibis.utils.get_function_list').then(
 	(res: any) => {
 		functionList.value = res
 	}
@@ -56,18 +57,128 @@ function getFunctionMatches(word: string) {
 			detail: 'function',
 		}))
 }
+
+const codeEditor = ref<any>(null)
+const codeContainer = ref<HTMLElement | null>(null)
+const signatureElement = ref<HTMLElement | null>(null)
+
+onMounted(() => {
+	// fix clipping of tooltip & signature element because of dialog styling
+	const dialogElement = codeContainer.value?.closest('.my-8.overflow-hidden.rounded-xl')
+	if (!dialogElement) {
+		return
+	}
+	dialogElement.classList.remove('overflow-hidden', 'rounded-xl', 'bg-white')
+	dialogElement.children[0]?.classList.add('rounded-xl')
+})
+
+type FunctionSignature = {
+	name: string
+	definition: string
+	description: string
+	current_param: string
+	current_param_description: string
+	params: { name: string; description: string }[]
+}
+const currentFunctionSignature = ref<FunctionSignature>()
+const fetchCompletions = debounce(() => {
+	if (!codeEditor.value) {
+		currentFunctionSignature.value = undefined
+		return
+	}
+
+	let code = expression.value
+	const codeBeforeCursor = code.slice(0, codeEditor.value.cursorPos)
+	const codeAfterCursor = code.slice(codeEditor.value.cursorPos)
+
+	code = codeBeforeCursor + '|' + codeAfterCursor
+
+	fetchCall('insights.insights.doctype.insights_data_source_v3.ibis.utils.get_code_completions', {
+		code,
+	})
+		.then((res: any) => {
+			currentFunctionSignature.value = res.current_function
+			// if there is a current_param, then we need to update the definition
+			// add <b> & underline tags before and after the current_param value in the definition
+			if (currentFunctionSignature.value?.current_param) {
+				const current_param = res.current_function.current_param
+				const definition = res.current_function.definition
+				const current_param_index = definition.indexOf(current_param)
+				if (current_param_index !== -1) {
+					const updated_definition =
+						definition.slice(0, current_param_index) +
+						`<b><u>${current_param}</u></b>` +
+						definition.slice(current_param_index + current_param.length)
+					currentFunctionSignature.value.definition = updated_definition
+				}
+			}
+		})
+		.catch((e: any) => {
+			console.error(e)
+		})
+}, 1000)
+
+function setSignatureElementPosition() {
+	setTimeout(() => {
+		const containerRect = codeContainer.value?.getBoundingClientRect()
+		const tooltipElement = codeContainer.value?.querySelector('.cm-tooltip-autocomplete')
+		const cursorElement = codeContainer.value?.querySelector('.cm-cursor.cm-cursor-primary')
+
+		if (!containerRect) return
+		if (!signatureElement.value) return
+
+		let left = 0,
+			top = 0
+
+		if (tooltipElement) {
+			const tooltipRect = tooltipElement.getBoundingClientRect()
+			left = tooltipRect.left - containerRect.left
+			top = tooltipRect.top + tooltipRect.height - containerRect.top + 10
+		} else if (cursorElement) {
+			const cursorRect = cursorElement?.getBoundingClientRect()
+			left = cursorRect.left - containerRect.left
+			top = cursorRect.top - containerRect.top + 20
+		}
+
+		if (left <= 0 || top <= 0) {
+			return
+		}
+
+		signatureElement.value.style.left = `${left}px`
+		signatureElement.value.style.top = `${top}px`
+	}, 100)
+}
 </script>
 
 <template>
-	<div ref="codeContainer" class="flex h-[14rem] w-full overflow-scroll rounded border text-base">
+	<div ref="codeContainer" class="relative flex h-[14rem] w-full rounded border text-base">
 		<Code
 			ref="codeEditor"
 			language="python"
 			class="column-expression"
 			v-model="expression"
 			:placeholder="placeholder"
 			:completions="getCompletions"
+			@view-update="() => (fetchCompletions(), setSignatureElementPosition())"
 		></Code>
+
+		<div
+			ref="signatureElement"
+			v-show="currentFunctionSignature"
+			class="absolute z-10 flex h-fit max-h-[14rem] w-[25rem] flex-col gap-2 overflow-y-auto rounded-lg bg-white px-2.5 py-1.5 shadow-md transition-all"
+		>
+			<template v-if="currentFunctionSignature">
+				<p
+					v-if="currentFunctionSignature.definition"
+					v-html="currentFunctionSignature.definition"
+					class="font-mono text-p-sm text-gray-800"
+				></p>
+				<hr v-if="currentFunctionSignature.definition" />
+				<div class="whitespace-pre-wrap font-mono text-p-sm text-gray-800">
+					{{ currentFunctionSignature.description }}
+				</div>
+			</template>
+		</div>
 	</div>
 </template>
 

frontend/src2/query/components/FiltersSelector.vue

@@ -4,8 +4,8 @@ import { computed, reactive } from 'vue'
 import { copy, flattenOptions } from '../../helpers'
 import { ColumnOption, FilterGroupArgs, GroupedColumnOption } from '../../types/query.types'
 import { column, expression } from '../helpers'
+import ExpressionEditor from './ExpressionEditor.vue'
 import FilterRule from './FilterRule.vue'
-import InlineExpression from './InlineExpression.vue'
 import { isFilterExpressionValid, isFilterValid } from './filter_utils'
 
 const props = defineProps<{
@@ -90,9 +90,12 @@ const areFiltersUpdated = computed(() => {
 						{{ filterGroup.logical_operator.toLowerCase() }}
 					</Button>
 				</div>
-				<InlineExpression
+				<ExpressionEditor
 					v-if="'expression' in filterGroup.filters[i]"
-					v-model="filterGroup.filters[i].expression"
+					language="python"
+					class="inline-expression h-fit max-h-[10rem] min-h-[1.75rem] text-sm"
+					v-model="filterGroup.filters[i].expression.expression"
+					:column-options="(flattenOptions(props.columnOptions) as ColumnOption[])"
 				/>
 				<FilterRule
 					v-if="'column' in filterGroup.filters[i]"

frontend/src2/styles/codemirror.css

@@ -44,11 +44,7 @@
 	outline: none !important;
 }
 .cm-tooltip-autocomplete {
-	border: 1px solid #fafafa !important;
-	padding: 0.25rem;
-	background-color: #fff !important;
-	border-radius: 0.375rem;
-	filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
+	@apply !rounded-lg !shadow-md !bg-white !p-1.5 !border-none;
 }
 .cm-tooltip-autocomplete > ul {
 	font-family: 'Inter' !important;
@@ -57,3 +53,20 @@
 	@apply !rounded !bg-gray-200/80;
 	color: #000 !important;
 }
+.cm-completionLabel {
+	margin-right: 1rem !important;
+}
+.cm-completionDetail {
+	margin-left: auto !important;
+}
+
+.inline-expression .cm-content {
+	padding: 0 !important;
+	line-height: 26px !important;
+}
+.inline-expression .cm-placeholder {
+	line-height: 26px !important;
+}
+.inline-expression .cm-gutters {
+	line-height: 26px !important;
+}