feat: styling updates

frontend/src/components/QueryBuilderV2/CodeMirrorWhereClause/CodeMirrorWhereClause.styles.scss

@@ -9,14 +9,14 @@
 		'Helvetica Neue', sans-serif;
 
 	.cm-editor {
-		border: 1px solid var(--bg-vanilla-300);
-		border-radius: 4px;
+		border-radius: 2px;
 		overflow: hidden;
 		margin-bottom: 4px;
+		background-color: var(--bg-ink-400);
 
 		&:focus-within {
 			border-color: var(--bg-robin-500);
-			box-shadow: 0 0 0 2px rgba(63, 94, 204, 0.2);
+			background-color: var(--bg-ink-400);
 		}
 	}
 

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

@@ -114,8 +114,8 @@ function CodeMirrorWhereClause(): JSX.Element {
 	// 	isLoading: queryKeyValuesSuggestionsLoading,
 	// 	refetch: refetchQueryKeyValuesSuggestions,
 	// } = useGetQueryKeyValueSuggestions({
-	// 	signal: 'traces',
 	// 	key: 'status',
+	// 	signal: 'traces',
 	// });
 
 	const generateOptions = (data: any): any[] => {
@@ -300,6 +300,33 @@ function CodeMirrorWhereClause(): JSX.Element {
 		};
 	}
 
+	const customTheme = EditorView.theme({
+		'&': {
+			fontFamily: '"Space Mono", monospace', // Change to any font
+			fontSize: '13px', // Set font size
+			lineHeight: '1.8', // Set line height
+			margin: '8px 0px',
+		},
+		'.cm-line': {
+			lineHeight: '2.2', // Set line height
+		},
+		'.cm-gutters': {
+			lineHeight: '1.8', // Set line height
+			display: 'none',
+		},
+		'.cm-content': {
+			lineHeight: '2.2', // Set line height
+			borderRadius: '2px',
+			border: '1px solid var(--bg-ink-400) !important',
+			background: 'var(--bg-ink-400) !important',
+			padding: '0px',
+		},
+		'.cm-focused': {
+			border: '1px solid var(--bg-robin-500) !important',
+			background: 'var(--bg-ink-400) !important',
+		},
+	});
+
 	return (
 		<div className="code-mirror-where-clause">
 			<Card
@@ -322,7 +349,11 @@ function CodeMirrorWhereClause(): JSX.Element {
 						autocompletion({ override: [myCompletions] }),
 						collapseSpacesOutsideStrings(),
 						javascript({ jsx: false, typescript: false }),
+						customTheme,
 					]}
+					basicSetup={{
+						lineNumbers: false,
+					}}
 				/>
 
 				<Space className="cursor-position" size={4}>

frontend/src/utils/antlrQueryUtils.ts

@@ -233,6 +233,11 @@ 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;