feat: update the context with additonal properties

frontend/src/components/QueryBuilderV2/CodeMirrorWhereClause/CodeMirrorWhereClause.tsx

@@ -118,8 +118,10 @@ function CodeMirrorWhereClause(): JSX.Element {
 	// 	signal: 'traces',
 	// });
 
-	const generateOptions = (data: any): any[] => {
-		const options = Object.values(data.keys).flatMap((items: any) =>
+	console.log('loading', isLoading);
+
+	const generateOptions = (data: any): any[] =>
+		Object.values(data.keys).flatMap((items: any) =>
 			items.map(({ name, fieldDataType, fieldContext }: any) => ({
 				label: name,
 				type: fieldDataType === 'string' ? 'keyword' : fieldDataType,
@@ -128,23 +130,14 @@ function CodeMirrorWhereClause(): JSX.Element {
 			})),
 		);
 
-		console.log('options', options);
-
-		return options;
-	};
-
 	useEffect(() => {
 		if (queryKeySuggestions) {
-			console.log('queryKeySuggestions', queryKeySuggestions);
-
 			const options = generateOptions(queryKeySuggestions.data.data);
 
 			setKeySuggestions(options);
 		}
 	}, [queryKeySuggestions]);
 
-	console.log('keySuggestions', keySuggestions);
-
 	const handleUpdate = (viewUpdate: { view: EditorView }): void => {
 		const selection = viewUpdate.view.state.selection.main;
 		const pos = selection.head;
@@ -164,13 +157,6 @@ function CodeMirrorWhereClause(): JSX.Element {
 		}
 	};
 
-	console.log({
-		cursorPos,
-		queryContext,
-		validation,
-		isLoading,
-	});
-
 	const handleQueryChange = useCallback(async (newQuery: string) => {
 		setIsLoading(true);
 		setQuery(newQuery);
@@ -261,20 +247,18 @@ function CodeMirrorWhereClause(): JSX.Element {
 		} else if (queryContext.isInOperator) {
 			options = queryOperatorSuggestions;
 		} else if (queryContext.isInValue) {
+			console.log('is In Value', queryContext.currentToken);
 			// refetchQueryKeyValuesSuggestions();
 
-			// Fetch values based on the key
-			const key = queryContext.currentToken;
-			// refetchQueryKeyValuesSuggestions({ key }).then((response) => {
-			// 	if (response && response.data && Array.isArray(response.data.values)) {
-			// 		options = response.data.values.map((value: string) => ({
-			// 			label: value,
-			// 			type: 'value',
-			// 		}));
-			// 	}
-			// });
+			// Fetch values based on the key - use the keyToken if available
+			const key = queryContext.keyToken || queryContext.currentToken;
 
-			console.log('key', key, queryContext, query);
+			console.log('key', key);
+
+			// const response = refetchQueryKeyValuesSuggestions({
+			// 	key: 'status',
+			// 	signal: 'traces',
+			// });
 
 			options = [
 				{ label: 'error', type: 'value' },
@@ -410,6 +394,40 @@ function CodeMirrorWhereClause(): JSX.Element {
 								</Text>
 								{renderContextBadge()}
 							</Space>
+
+							{/* Display the key-operator-value triplet when available */}
+							{queryContext.keyToken && (
+								<Space>
+									<Text strong style={{ color: 'black' }}>
+										Key:
+									</Text>
+									<Text code style={{ color: 'blue' }}>
+										{queryContext.keyToken}
+									</Text>
+								</Space>
+							)}
+
+							{queryContext.operatorToken && (
+								<Space>
+									<Text strong style={{ color: 'black' }}>
+										Operator:
+									</Text>
+									<Text code style={{ color: 'purple' }}>
+										{queryContext.operatorToken}
+									</Text>
+								</Space>
+							)}
+
+							{queryContext.valueToken && (
+								<Space>
+									<Text strong style={{ color: 'black' }}>
+										Value:
+									</Text>
+									<Text code style={{ color: 'green' }}>
+										{queryContext.valueToken}
+									</Text>
+								</Space>
+							)}
 						</Space>
 					</div>
 				</Card>

frontend/src/types/antlrQueryTypes.ts

@@ -24,6 +24,9 @@ export interface IQueryContext {
 	isInFunction: boolean;
 	isInConjunction?: boolean;
 	isInParenthesis?: boolean;
+	keyToken?: string;
+	operatorToken?: string;
+	valueToken?: string;
 }
 
 export interface IDetailedError {

frontend/src/utils/antlrQueryUtils.ts

@@ -162,6 +162,103 @@ export const validateQuery = (query: string): IValidationResult => {
 	}
 };
 
+// Helper function to find key-operator-value triplets in token stream
+function findKeyOperatorValueTriplet(
+	allTokens: IToken[],
+	currentToken: IToken,
+	isInKey: boolean,
+	isInOperator: boolean,
+	isInValue: boolean,
+): { keyToken?: string; operatorToken?: string; valueToken?: string } {
+	// Find current token index in allTokens
+	let currentTokenIndex = -1;
+	for (let i = 0; i < allTokens.length; i++) {
+		if (
+			allTokens[i].start === currentToken.start &&
+			allTokens[i].stop === currentToken.stop &&
+			allTokens[i].type === currentToken.type
+		) {
+			currentTokenIndex = i;
+			break;
+		}
+	}
+
+	if (currentTokenIndex === -1) return {};
+
+	// Initialize result with empty object
+	const result: {
+		keyToken?: string;
+		operatorToken?: string;
+		valueToken?: string;
+	} = {};
+
+	if (isInKey) {
+		// When in key context, we only know the key
+		result.keyToken = currentToken.text;
+	} else if (isInOperator) {
+		// When in operator context, we know the operator and can find the preceding key
+		result.operatorToken = currentToken.text;
+
+		// Look backward for key
+		for (let i = currentTokenIndex - 1; i >= 0; i--) {
+			const token = allTokens[i];
+			// Skip whitespace and other hidden channel tokens
+			if (token.channel !== 0) continue;
+
+			if (token.type === FilterQueryLexer.KEY) {
+				result.keyToken = token.text;
+				break;
+			}
+		}
+	} else if (isInValue) {
+		// When in value context, we know the value and can find the preceding operator and key
+		result.valueToken = currentToken.text;
+
+		let foundOperator = false;
+
+		// Look backward for operator and key
+		for (let i = currentTokenIndex - 1; i >= 0; i--) {
+			const token = allTokens[i];
+			// Skip whitespace and other hidden channel tokens
+			if (token.channel !== 0) continue;
+
+			// If we haven't found an operator yet, check for operator
+			if (
+				!foundOperator &&
+				[
+					FilterQueryLexer.EQUALS,
+					FilterQueryLexer.NOT_EQUALS,
+					FilterQueryLexer.NEQ,
+					FilterQueryLexer.LT,
+					FilterQueryLexer.LE,
+					FilterQueryLexer.GT,
+					FilterQueryLexer.GE,
+					FilterQueryLexer.LIKE,
+					FilterQueryLexer.NOT_LIKE,
+					FilterQueryLexer.ILIKE,
+					FilterQueryLexer.NOT_ILIKE,
+					FilterQueryLexer.BETWEEN,
+					FilterQueryLexer.EXISTS,
+					FilterQueryLexer.REGEXP,
+					FilterQueryLexer.CONTAINS,
+					FilterQueryLexer.IN,
+					FilterQueryLexer.NOT,
+				].includes(token.type)
+			) {
+				result.operatorToken = token.text;
+				foundOperator = true;
+			}
+			// If we already found an operator and this is a key, record it
+			else if (foundOperator && token.type === FilterQueryLexer.KEY) {
+				result.keyToken = token.text;
+				break; // We found our triplet
+			}
+		}
+	}
+
+	return result;
+}
+
 export function getQueryContextAtCursor(
 	query: string,
 	cursorIndex: number,
@@ -233,11 +330,6 @@ export function getQueryContextAtCursor(
 			}
 		}
 
-		console.log('exactToken', exactToken);
-		console.log('previousToken', previousToken);
-		console.log('nextToken', nextToken);
-		console.log('query', query);
-
 		// Determine the context based on cursor position and surrounding tokens
 		let currentToken: IToken | null = null;
 
@@ -337,7 +429,14 @@ export function getQueryContextAtCursor(
 			FilterQueryLexer.HASNONE,
 		].includes(currentToken.type);
 
-		console.log('currentToken', currentToken);
+		// Get the context-related tokens (key, operator, value)
+		const relationTokens = findKeyOperatorValueTriplet(
+			allTokens,
+			currentToken,
+			isInKey,
+			isInOperator,
+			isInValue,
+		);
 
 		// Handle transitions based on spaces
 		// When a user adds a space after a token, change the context accordingly
@@ -362,6 +461,7 @@ export function getQueryContextAtCursor(
 					isInFunction: false,
 					isInConjunction: false,
 					isInParenthesis: false,
+					...relationTokens, // Include related tokens
 				};
 			}
 
@@ -379,6 +479,7 @@ export function getQueryContextAtCursor(
 					isInFunction: false,
 					isInConjunction: false,
 					isInParenthesis: false,
+					...relationTokens, // Include related tokens
 				};
 			}
 
@@ -396,6 +497,7 @@ export function getQueryContextAtCursor(
 					isInFunction: false,
 					isInConjunction: true,
 					isInParenthesis: false,
+					...relationTokens, // Include related tokens
 				};
 			}
 
@@ -413,6 +515,7 @@ export function getQueryContextAtCursor(
 					isInFunction: false,
 					isInConjunction: false,
 					isInParenthesis: false,
+					...relationTokens, // Include related tokens
 				};
 			}
 		}
@@ -437,6 +540,7 @@ export function getQueryContextAtCursor(
 					isInFunction: false,
 					isInConjunction: false,
 					isInParenthesis: false,
+					...relationTokens, // Include related tokens
 				};
 			}
 
@@ -460,6 +564,7 @@ export function getQueryContextAtCursor(
 					isInFunction: false,
 					isInConjunction: false,
 					isInParenthesis: false,
+					...relationTokens, // Include related tokens
 				};
 			}
 
@@ -483,6 +588,7 @@ export function getQueryContextAtCursor(
 					isInFunction: false,
 					isInConjunction: false,
 					isInParenthesis: false,
+					...relationTokens, // Include related tokens
 				};
 			}
 
@@ -525,6 +631,7 @@ export function getQueryContextAtCursor(
 					isInFunction: false,
 					isInConjunction: false,
 					isInParenthesis: false,
+					...relationTokens, // Include related tokens
 				};
 			}
 
@@ -550,6 +657,7 @@ export function getQueryContextAtCursor(
 					isInFunction: false,
 					isInConjunction: false,
 					isInParenthesis: false,
+					...relationTokens, // Include related tokens
 				};
 			}
 
@@ -572,6 +680,7 @@ export function getQueryContextAtCursor(
 					isInFunction: false,
 					isInConjunction: false,
 					isInParenthesis: false,
+					...relationTokens, // Include related tokens
 				};
 			}
 
@@ -588,6 +697,7 @@ export function getQueryContextAtCursor(
 					isInFunction: false,
 					isInConjunction: true,
 					isInParenthesis: false,
+					...relationTokens, // Include related tokens
 				};
 			}
 		}
@@ -605,6 +715,7 @@ export function getQueryContextAtCursor(
 			isInFunction,
 			isInConjunction,
 			// isInParenthesis,
+			...relationTokens, // Include related tokens
 		};
 	} catch (error) {
 		console.error('Error in getQueryContextAtCursor:', error);