Skip to content

feat(webui): Highlight Presto SQL syntax errors for guided UI inputs with ANTLR. #1533

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open

feat(webui): Highlight Presto SQL syntax errors for guided UI inputs with ANTLR. #1533

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
bf8af6a
latest
Oct 29, 2025
33f4afe
latest
Oct 29, 2025
1b326fd
latest
Oct 30, 2025
2b9a0ea
latest
Nov 3, 2025
6f83b4d
latest
Nov 3, 2025
63d3d45
latest
Nov 4, 2025
57edfd4
latest
Nov 4, 2025
e26809e
latest
Nov 4, 2025
76248cd
Merge branch 'main' into error_highlight
davemarco Nov 5, 2025
cb77dad
Apply suggestions from code review
davemarco Nov 5, 2025
8799f54
latest
Nov 5, 2025
ec83aef
latest
Nov 5, 2025
528f9b5
Merge branch 'main' into error_highlight
hoophalab Nov 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 58 additions & 3 deletions components/webui/client/src/components/SqlInput/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,39 @@
// Reference: https://github.com/vikyd/vue-monaco-singleline
import {useCallback} from "react";
import {
useCallback,
useEffect,
useRef,
} from "react";
Comment on lines +2 to +6
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Fix import sorting to resolve pipeline failure.

The pipeline reports an import sorting violation that must be resolved before merge.

Run the autofix command to sort the imports:

npm run lint:fix

Or manually reorder if needed.

🧰 Tools
🪛 GitHub Actions: clp-lint

[warning] 2-2: Run autofix to sort these imports! simple-import-sort/imports

🤖 Prompt for AI Agents 
In components/webui/client/src/components/SqlInput/index.tsx around lines 2 to
6, import statements are not sorted which triggers the lint pipeline; run the
autofix to reorder imports (npm run lint:fix) or manually reorder the imports to
match the project's ESLint/organize-imports rules (group external packages, then
local imports, alphabetize within groups), save the file, and commit the change
to clear the import-sorting violation.


import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";

import {ValidationError} from "../../sql-parser";
import SqlEditor, {
SqlEditorProps,
SqlEditorType,
} from "../SqlEditor";


type SqlInputProps = SqlEditorProps & {
/**
* Validation function to check SQL syntax and return errors.
*/
validateFn?: (sqlString: string) => ValidationError[];
};

/**
* Single-line SQL input.
*
* @param props
* @return
*/
const SqlInput = (props: SqlEditorProps) => {
const SqlInput = (props: SqlInputProps) => {
const {validateFn, ...editorProps} = props;
const editorRef = useRef<SqlEditorType | null>(null);

const handleEditorReady = useCallback((editor: SqlEditorType) => {
editorRef.current = editor;

// Prevent multi-line input by repositioning cursor and replacing newlines with empty
// string.
editor.onDidChangeCursorPosition((e) => {
Expand All @@ -42,6 +59,43 @@ const SqlInput = (props: SqlEditorProps) => {
});
}, []);

// Validate SQL and update markers whenever value changes
useEffect(() => {
const editor = editorRef.current;
if (!editor) {
return;
}

const model = editor.getModel();
if (!model) {
return;
}

const value = "string" === typeof editorProps.value ?
editorProps.value :
"";

// Clear markers if no validation function or empty/whitespace-only input
if (!validateFn || !value.trim()) {
monaco.editor.setModelMarkers(model, "sql-parser", []);

return;
}

const errors = validateFn(value);
const markers: monaco.editor.IMarkerData[] = errors.map((error) => ({
endColumn: error.endColumn,
endLineNumber: error.line,
message: error.message,
severity: monaco.MarkerSeverity.Error,
startColumn: error.startColumn,
startLineNumber: error.line,
}));

monaco.editor.setModelMarkers(model, "sql-parser", markers);
}, [editorProps.value,
validateFn]);

return (
<SqlEditor
options={{
Expand Down Expand Up @@ -76,8 +130,9 @@ const SqlInput = (props: SqlEditorProps) => {
wordWrap: "off",
}}
onEditorReady={handleEditorReady}
{...props}/>
{...editorProps}/>
);
};

export default SqlInput;
export type {SqlInputProps};
2 changes: 2 additions & 0 deletions ...onents/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import InputLabel from "../../../../../components/InputLabel";
import SqlInput from "../../../../../components/SqlInput";
import {validateSortItemList} from "../../../../../sql-parser";
import useSearchStore from "../../../SearchState/index";
import usePrestoSearchState from "../../../SearchState/Presto";
import {SEARCH_UI_STATE} from "../../../SearchState/typings";
Expand All @@ -24,6 +25,7 @@ const OrderBy = () => {
<SqlInput
className={guidedGrid["noLeftBorderRadius"] || ""}
disabled={disabled}
validateFn={validateSortItemList}
value={orderBy}
onChange={(value) => {
updateOrderBy(value || "");
Expand Down
2 changes: 2 additions & 0 deletions components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import InputLabel from "../../../../../components/InputLabel";
import SqlInput from "../../../../../components/SqlInput";
import {validateSelectItemList} from "../../../../../sql-parser";
import useSearchStore from "../../../SearchState/index";
import usePrestoSearchState from "../../../SearchState/Presto";
import {SEARCH_UI_STATE} from "../../../SearchState/typings";
Expand All @@ -24,6 +25,7 @@ const Select = () => {
<SqlInput
className={guidedGrid["noLeftBorderRadius"] || ""}
disabled={disabled}
validateFn={validateSelectItemList}
value={select}
onChange={(value) => {
updateSelect(value || "");
Expand Down
2 changes: 2 additions & 0 deletions components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import InputLabel from "../../../../../components/InputLabel";
import SqlInput from "../../../../../components/SqlInput";
import {validateBooleanExpression} from "../../../../../sql-parser";
import useSearchStore from "../../../SearchState/index";
import usePrestoSearchState from "../../../SearchState/Presto";
import {SEARCH_UI_STATE} from "../../../SearchState/typings";
Expand All @@ -24,6 +25,7 @@ const Where = () => {
<SqlInput
className={guidedGrid["noLeftBorderRadius"] || ""}
disabled={disabled}
validateFn={validateBooleanExpression}
value={where}
onChange={(value) => {
updateWhere(value || "");
Expand Down
20 changes: 20 additions & 0 deletions components/webui/client/src/sql-parser/Sql.g4
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,23 @@
grammar Sql;

import SqlBase;

selectItemList
: selectItem (',' selectItem)*
;

standaloneSelectItemList
: selectItemList EOF
;

standaloneBooleanExpression
: booleanExpression EOF
;

sortItemList
: sortItem (',' sortItem)*
;

standaloneSortItemList
: sortItemList EOF
;
10 changes: 5 additions & 5 deletions components/webui/client/src/sql-parser/generated/SqlLexer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,9 +273,9 @@ export default class SqlLexer extends Lexer {
public static readonly EOF = Token.EOF;

public static readonly channelNames: string[] = [ "DEFAULT_TOKEN_CHANNEL", "HIDDEN" ];
public static readonly literalNames: (string | null)[] = [ null, "'.'",
"'('", "')'",
"','", "'?'",
public static readonly literalNames: (string | null)[] = [ null, "','",
"'.'", "'('",
"')'", "'?'",
"'->'", "'['",
"']'", "'=>'",
"'ADD'", "'ADMIN'",
Expand Down Expand Up @@ -988,8 +988,8 @@ export default class SqlLexer extends Lexer {
491,2212,1,0,0,0,493,2216,1,0,0,0,495,2226,1,0,0,0,497,2234,1,0,0,0,499,
2245,1,0,0,0,501,2256,1,0,0,0,503,2279,1,0,0,0,505,2307,1,0,0,0,507,2325,
1,0,0,0,509,2334,1,0,0,0,511,2336,1,0,0,0,513,2338,1,0,0,0,515,2355,1,0,
0,0,517,2370,1,0,0,0,519,2376,1,0,0,0,521,522,5,46,0,0,522,2,1,0,0,0,523,
524,5,40,0,0,524,4,1,0,0,0,525,526,5,41,0,0,526,6,1,0,0,0,527,528,5,44,
0,0,517,2370,1,0,0,0,519,2376,1,0,0,0,521,522,5,44,0,0,522,2,1,0,0,0,523,
524,5,46,0,0,524,4,1,0,0,0,525,526,5,40,0,0,526,6,1,0,0,0,527,528,5,41,
0,0,528,8,1,0,0,0,529,530,5,63,0,0,530,10,1,0,0,0,531,532,5,45,0,0,532,
533,5,62,0,0,533,12,1,0,0,0,534,535,5,91,0,0,535,14,1,0,0,0,536,537,5,93,
0,0,537,16,1,0,0,0,538,539,5,61,0,0,539,540,5,62,0,0,540,18,1,0,0,0,541,
Expand Down
Loading
Loading