From ff7c398445be20258a78da2804b9927f019987dc Mon Sep 17 00:00:00 2001
From: Yunus M <myounis.ar@live.com>
Date: Mon, 5 May 2025 20:02:26 +0530
Subject: [PATCH] feat: console log context based on cursor position

---
 .../CodeMirrorWhereClause.tsx                 | 88 +++++++++++++------
 1 file changed, 59 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/QueryBuilderV2/CodeMirrorWhereClause/CodeMirrorWhereClause.tsx b/frontend/src/components/QueryBuilderV2/CodeMirrorWhereClause/CodeMirrorWhereClause.tsx
index 591a545e5c46..4939046ecfe9 100644
--- a/frontend/src/components/QueryBuilderV2/CodeMirrorWhereClause/CodeMirrorWhereClause.tsx
+++ b/frontend/src/components/QueryBuilderV2/CodeMirrorWhereClause/CodeMirrorWhereClause.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable class-methods-use-this */
+/* eslint-disable max-classes-per-file */
 /* eslint-disable sonarjs/no-collapsible-if */
 /* eslint-disable sonarjs/cognitive-complexity */
 /* eslint-disable import/no-extraneous-dependencies */
@@ -13,6 +15,7 @@ import {
 	startCompletion,
 } from '@codemirror/autocomplete';
 import { javascript } from '@codemirror/lang-javascript';
+import { ViewPlugin, ViewUpdate } from '@codemirror/view';
 import { copilot } from '@uiw/codemirror-theme-copilot';
 import CodeMirror, { EditorView } from '@uiw/react-codemirror';
 import { Card, Collapse, Space, Typography } from 'antd';
@@ -127,6 +130,29 @@ const stopEventsExtension = EditorView.domEventHandlers({
 	},
 });
 
+// Custom extension to analyze the context at the cursor position
+const contextAwarePlugin = (
+	analyzeContext: (view: EditorView, pos: number) => void,
+): ViewPlugin<{ update: (update: ViewUpdate) => void }> =>
+	ViewPlugin.fromClass(
+		class {
+			constructor(view: EditorView) {
+				this.analyze(view);
+			}
+
+			update(update: ViewUpdate): void {
+				if (update.selectionSet && !update.docChanged) {
+					this.analyze(update.view);
+				}
+			}
+
+			analyze(view: EditorView): void {
+				const pos = view.state.selection.main.head;
+				analyzeContext(view, pos);
+			}
+		},
+	);
+
 function CodeMirrorWhereClause(): JSX.Element {
 	const [query, setQuery] = useState<string>('');
 	const [valueSuggestions, setValueSuggestions] = useState<any[]>([
@@ -209,6 +235,38 @@ function CodeMirrorWhereClause(): JSX.Element {
 		return value;
 	};
 
+	const analyzeContext = (view: EditorView, pos: number): void => {
+		const word = view.state.wordAt(pos);
+		const token = word ? view.state.sliceDoc(word.from, word.to) : '';
+
+		// Get the query context at the cursor position
+		const queryContext = getQueryContextAtCursor(view.state.doc.toString(), pos);
+
+		let contextType = 'Unknown';
+		if (queryContext.isInKey) {
+			contextType = 'Key';
+		} else if (queryContext.isInOperator) {
+			contextType = 'Operator';
+		} else if (queryContext.isInValue) {
+			contextType = 'Value';
+		} else if (queryContext.isInFunction) {
+			contextType = 'Function';
+		} else if (queryContext.isInConjunction) {
+			contextType = 'Conjunction';
+		} else if (queryContext.isInParenthesis) {
+			contextType = 'Parenthesis';
+		}
+
+		console.log(
+			'Cursor is at',
+			pos,
+			'Token under cursor:',
+			token,
+			'Context:',
+			contextType,
+		);
+	};
+
 	// Use callback to prevent dependency changes on each render
 	const fetchValueSuggestions = useCallback(
 		async (key: string): Promise<void> => {
@@ -377,35 +435,6 @@ function CodeMirrorWhereClause(): JSX.Element {
 		handleQueryChange(newQuery);
 	};
 
-	// const renderContextBadge = (): JSX.Element | null => {
-	// 	if (!queryContext) return null;
-
-	// 	let color = 'black';
-	// 	let text = 'Unknown';
-
-	// 	if (queryContext.isInKey) {
-	// 		color = 'blue';
-	// 		text = 'Key';
-	// 	} else if (queryContext.isInOperator) {
-	// 		color = 'purple';
-	// 		text = 'Operator';
-	// 	} else if (queryContext.isInValue) {
-	// 		color = 'green';
-	// 		text = 'Value';
-	// 	} else if (queryContext.isInFunction) {
-	// 		color = 'orange';
-	// 		text = 'Function';
-	// 	} else if (queryContext.isInConjunction) {
-	// 		color = 'magenta';
-	// 		text = 'Conjunction';
-	// 	} else if (queryContext.isInParenthesis) {
-	// 		color = 'grey';
-	// 		text = 'Parenthesis';
-	// 	}
-
-	// 	return <Badge color={color} text={text} />;
-	// };
-
 	function myCompletions(context: CompletionContext): CompletionResult | null {
 		const word = context.matchBefore(/[.\w]*/);
 		if (word?.from === word?.to && !context.explicit) return null;
@@ -627,6 +656,7 @@ function CodeMirrorWhereClause(): JSX.Element {
 					javascript({ jsx: false, typescript: false }),
 					EditorView.lineWrapping,
 					stopEventsExtension,
+					contextAwarePlugin(analyzeContext),
 					// customTheme,
 				]}
 				basicSetup={{