feat(webui): Add hover messages for ANTLR parsing errors in Monaco single-line editor. #1569
Conversation
Co-authored-by: hoophalab <200652805+hoophalab@users.noreply.github.com>
WalkthroughAdds inline SQL validation to SqlInput with Monaco hover tooltips and a "Run Query" action; introduces a ValidationError type and three validators in sql-parser; wires validators into guided controls; and enables Monaco hover contributions. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant User
participant SqlInput
participant Validator
participant Editor
participant Monaco
User->>SqlInput: Type SQL
SqlInput->>Validator: validateFn(sqlString)
Validator->>Validator: parse & collect ValidationError[]
Validator-->>SqlInput: return ValidationError[]
SqlInput->>Editor: map errors → decorations (squiggly + markdown)
Editor->>Monaco: apply decorations
User->>Monaco: hover over error
Monaco-->>User: show escaped hover tooltip
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (1)**/*.{cpp,hpp,java,js,jsx,tpp,ts,tsx}⚙️ CodeRabbit configuration file
Files:
🧠 Learnings (1)📓 Common learnings🔇 Additional comments (3)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (7)
components/webui/client/src/components/SqlEditor/monaco-loader.ts(1 hunks)components/webui/client/src/components/SqlInput/index.tsx(4 hunks)components/webui/client/src/components/SqlInput/utils.ts(1 hunks)components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx(2 hunks)components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx(2 hunks)components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx(2 hunks)components/webui/client/src/sql-parser/index.ts(4 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{cpp,hpp,java,js,jsx,tpp,ts,tsx}
⚙️ CodeRabbit configuration file
- Prefer
false == <expression>rather than!<expression>.
Files:
components/webui/client/src/sql-parser/index.tscomponents/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsxcomponents/webui/client/src/components/SqlInput/index.tsxcomponents/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsxcomponents/webui/client/src/components/SqlEditor/monaco-loader.tscomponents/webui/client/src/components/SqlInput/utils.tscomponents/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx
🧠 Learnings (2)
📚 Learning: 2025-07-21T14:37:57.648Z
Learnt from: davemarco
Repo: y-scope/clp PR: 1108
File: components/webui/client/src/components/SqlEditor/monaco-config.ts:6-8
Timestamp: 2025-07-21T14:37:57.648Z
Learning: In Monaco Editor configurations for SQL editing, the import of "monaco-editor/esm/vs/editor/editor.all.js" is required for SQL autocomplete functionality to work properly, even when using "editor.api" and "sql.contribution.js". Removing "editor.all.js" breaks the autocomplete feature.
Applied to files:
components/webui/client/src/components/SqlEditor/monaco-loader.ts
📚 Learning: 2025-08-26T13:45:46.445Z
Learnt from: davemarco
Repo: y-scope/clp PR: 1244
File: components/webui/client/package.json:29-29
Timestamp: 2025-08-26T13:45:46.445Z
Learning: The "color" package in components/webui/client/package.json is used in the SqlEditor component to convert Ant Design token colors to hex format for Monaco editor themes, specifically for the disabled state styling.
Applied to files:
components/webui/client/src/components/SqlEditor/monaco-loader.ts
🧬 Code graph analysis (5)
components/webui/client/src/sql-parser/index.ts (2)
components/webui/client/src/sql-parser/generated/SqlLexer.ts (1)
SqlLexer(15-1482)components/webui/client/src/sql-parser/generated/SqlParser.ts (1)
SqlParser(19-11121)
components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx (1)
components/webui/client/src/sql-parser/index.ts (1)
validateBooleanExpression(241-241)
components/webui/client/src/components/SqlInput/index.tsx (4)
components/webui/client/src/components/SqlEditor/index.tsx (2)
SqlEditorProps(144-144)SqlEditorType(145-145)components/webui/client/src/sql-parser/index.ts (1)
ValidationError(249-249)components/webui/common/src/utility-types.ts (1)
Nullable(3-3)components/webui/client/src/components/SqlInput/utils.ts (1)
escapeHoverMarkdown(13-13)
components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx (1)
components/webui/client/src/sql-parser/index.ts (1)
validateSortItemList(243-243)
components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx (1)
components/webui/client/src/sql-parser/index.ts (1)
validateSelectItemList(242-242)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: build (macos-15)
- GitHub Check: lint-check (macos-15)
- GitHub Check: lint-check (ubuntu-24.04)
🔇 Additional comments (9)
components/webui/client/src/components/SqlEditor/monaco-loader.ts (1)
7-8: LGTM! Hover imports correctly added.These imports enable the hover tooltip functionality needed for displaying validation error messages in the Monaco editor.
components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx (1)
3-3: LGTM! Boolean expression validation correctly integrated.The WHERE clause now validates user input as a boolean expression, providing inline error feedback.
Also applies to: 28-28
components/webui/client/src/components/SqlInput/utils.ts (1)
1-13: LGTM! Hover text escaping correctly implemented.The function correctly escapes angle brackets to prevent Monaco from interpreting them as HTML tags in hover tooltips, which is essential for displaying syntax error tokens like
<EOF>.components/webui/client/src/components/SqlInput/index.tsx (4)
19-24: LGTM! SqlInputProps correctly extends SqlEditorProps.The new
SqlInputPropstype properly adds the optionalvalidateFnprop while preserving all existingSqlEditorPropsfunctionality.
34-35: LGTM! Refs correctly typed as Nullable.Both refs are properly typed to handle the initial null state before the editor is ready.
66-108: Validation effect correctly implemented.The useEffect properly:
- Waits for editor initialization
- Lazily creates the decorations collection
- Clears decorations when validator is absent or input is empty
- Maps validation errors to Monaco decorations with hover messages
- Uses correct dependencies
The implementation ensures error highlighting and hover tooltips work seamlessly.
132-132: Good addition: disabling quick suggestions for single-line input.Setting
quickSuggestions: falseprevents Monaco from showing autocomplete dropdowns while typing, which is appropriate for a single-line constrained input where the validation decorations are the primary feedback mechanism.components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx (1)
3-3: LGTM! Select item list validation correctly integrated.The SELECT clause now validates user input as a select item list, providing inline error feedback for syntax issues.
Also applies to: 28-28
components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx (1)
3-3: LGTM! Sort item list validation correctly integrated.The ORDER BY clause now validates user input as a sort item list, providing inline error feedback for syntax issues.
Also applies to: 28-28
| const token = offendingSymbol as unknown as Token; | ||
| const startColumn = token.start + 1; | ||
| const endColumn = token.stop + 2; |
There was a problem hiding this comment.
🧩 Analysis chain
Verify type safety of Token cast and properties.
The cast offendingSymbol as unknown as Token and subsequent access to token.start and token.stop could fail at runtime if the offending symbol is not actually a Token or lacks these properties. ANTLR4's error listener can receive different symbol types depending on the error context.
Consider adding runtime checks:
- const token = offendingSymbol as unknown as Token;
- const startColumn = token.start + 1;
- const endColumn = token.stop + 2;
+ const token = offendingSymbol as unknown as Token;
+ const startColumn = token?.start !== undefined ? token.start + 1 : column;
+ const endColumn = token?.stop !== undefined ? token.stop + 2 : column + 1;Alternatively, verify with the ANTLR4 documentation that offendingSymbol is always a Token for lexer/parser errors and document this assumption.
I'll verify this review comment by examining the code context and investigating ANTLR4's error listener specifications.
---
🏁 Script executed:
```shell
#!/bin/bash
# Inspect the file around lines 40-42 to understand the context
cat -n components/webui/client/src/sql-parser/index.ts | sed -n '1,60p'
Length of output: 1806
🌐 Web query:
ANTLR4 error listener offendingSymbol type Token properties
💡 Result:
offendingSymbol (the Token passed to ANTLRErrorListener.syntaxError) implements org.antlr.v4.runtime.Token and exposes these useful properties/methods:
- getText() — token text. [1]
- getType() — token type (int). [1]
- getLine() — 1-based line number. [1]
- getCharPositionInLine() — char offset in line (0-based). [1]
- getStartIndex() / getStopIndex() — start/end char indexes in input (may return -1 if not available). [1]
- getTokenIndex() — index of token in token stream (or -1 if synthetic). [1]
- getChannel() — token channel (DEFAULT/HIDDEN etc.). [1]
- getTokenSource() / getInputStream() — source lexer/token stream and underlying CharStream. [1]
In an error listener you typically do:
public void syntaxError(Recognizer r, Object offendingSymbol, int line, int pos, String msg, RecognitionException e) {
Token t = (Token) offendingSymbol;
String text = t.getText();
int type = t.getType();
int start = t.getStartIndex();
int stop = t.getStopIndex();
int tokenIndex = t.getTokenIndex();
// ...
}
The listener contract and the meaning of offendingSymbol are documented on the ANTLR error-listener API. [2]
Sources: ANTLR Token API (methods listed above). [1] ANTLR error-listener / BaseErrorListener docs (offendingSymbol description). [2]
I need to verify the JavaScript/TypeScript ANTLR4 Token interface, as the web search returned Java documentation. Let me investigate further.
---
🏁 Script executed:
```shell
#!/bin/bash
# Search for Token interface definition or usage patterns in the codebase
rg -n "Token\." components/webui/client/src/sql-parser/ -A2 -B2
Length of output: 1108
🏁 Script executed:
#!/bin/bash
# Check if there are other error listener implementations or Token property accesses
rg -n "\.start|\.stop" components/webui/client/src/sql-parser/ -B3 -A1Length of output: 3932
🏁 Script executed:
#!/bin/bash
# Look for package.json to see antlr4 version
find components/webui/client -name "package.json" -exec cat {} \; | grep -A5 -B5 antlr4 || echo "antlr4 not in found package.json"Length of output: 350
🌐 Web query:
antlr4 npm JavaScript Token interface properties start stop
💡 Result:
Short answer: In the JS/TypeScript ANTLR runtimes tokens expose startIndex and stopIndex (character offsets); parser contexts expose start and stop Token objects. Use token.startIndex / token.stopIndex for character positions and ctx.start / ctx.stop for the tokens that bracket a rule. [1][2][3]
Sources
- CommonToken / Token definitions in the antlr4/ANTLR4‑TS TypeScript typings (start/stop → startIndex/stopIndex). [1]
- ParserRuleContext API: contexts have start and stop Token properties. [2]
- Note: rule $stop may be null in embedded actions (see discussion). [3]
Use correct Token property names: startIndex and stopIndex.
The review comment correctly identifies a type safety concern, but the underlying issue is more critical than suggested. In the JavaScript ANTLR4 runtime (version 4.13.2), Token objects expose startIndex and stopIndex properties, not start and stop. The current code will fail at runtime attempting to access undefined properties.
Update lines 41–42 to use:
const startColumn = token.startIndex + 1;
const endColumn = token.stopIndex + 2;The double cast bypasses TypeScript but does not prevent the runtime failure. No optional chaining fallback is needed if you correct the property names.
🤖 Prompt for AI Agents
In components/webui/client/src/sql-parser/index.ts around lines 40 to 42, the
code casts offendingSymbol to Token and accesses non-existent properties
token.start and token.stop which will be undefined at runtime; replace those
property accesses with the correct ANTLR Token properties token.startIndex and
token.stopIndex and remove the unnecessary double-cast so that you compute
startColumn as token.startIndex + 1 and endColumn as token.stopIndex + 2.
| const validateSelectItemList = (sqlString: string): ValidationError[] => { | ||
| const {parser, syntaxErrorListener} = setupParser(sqlString); | ||
| parser.standaloneSelectItemList(); | ||
|
|
||
| return syntaxErrorListener.errors; | ||
| }; |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider adding error handling to validation functions.
The validation functions don't have try-catch blocks. If the parser encounters an unexpected error (beyond syntax errors), it will propagate to the caller and potentially crash the UI.
Consider wrapping validation logic:
const validateSelectItemList = (sqlString: string): ValidationError[] => {
+ try {
const {parser, syntaxErrorListener} = setupParser(sqlString);
parser.standaloneSelectItemList();
return syntaxErrorListener.errors;
+ } catch (error) {
+ console.error("Unexpected validation error:", error);
+ return [{
+ line: 1,
+ column: 0,
+ startColumn: 0,
+ endColumn: sqlString.length,
+ message: "Unexpected validation error occurred"
+ }];
+ }
};Apply similar pattern to validateBooleanExpression and validateSortItemList.
Also applies to: 111-116, 124-129
🤖 Prompt for AI Agents
components/webui/client/src/sql-parser/index.ts lines 98-103 (and similarly
111-116, 124-129): the validation functions call the parser directly and can
throw unexpected exceptions; wrap the parser invocation in a try-catch, keep the
existing setupParser and return of syntaxErrorListener.errors in the normal
path, and in the catch block log the caught error (or forward it to the app
logger) and return a ValidationError[] containing a single ValidationError
describing an internal parser/validation failure so the UI doesn't crash; apply
the same try-catch pattern to validateBooleanExpression and
validateSortItemList.
hoophalab
left a comment
hoophalab
left a comment
There was a problem hiding this comment.
Looks good. Some comments
| range: new monaco.Range(error.line, error.startColumn, error.line, error.endColumn), | ||
| options: { | ||
| className: "squiggly-error", | ||
| hoverMessage: {value: escapeHoverMarkdown(error.message), isTrusted: false}, |
There was a problem hiding this comment.
how about
| hoverMessage: {value: escapeHoverMarkdown(error.message), isTrusted: false}, | |
| hoverMessage: {value: renderToString(<>{error.message}</>), isTrusted: false}, |
and import { renderToString } from 'react-dom/server';
There was a problem hiding this comment.
I guess hoverMessage expects a HTML string, then we probably should give it a string rendered from an html element?
The old message doesn't escape & if there is a raw &.
There was a problem hiding this comment.
I believe it is markdown not html? https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.Hover.html. May i can ampersand to the markdown escape function?
There was a problem hiding this comment.
Oh yeah, I didn't realize it's actually markdown. I guess markdown special characters can still be easily triggered and we should escape them?
There was a problem hiding this comment.
i updated with more escapes
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
components/webui/client/src/sql-parser/index.ts(4 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{cpp,hpp,java,js,jsx,tpp,ts,tsx}
⚙️ CodeRabbit configuration file
- Prefer
false == <expression>rather than!<expression>.
Files:
components/webui/client/src/sql-parser/index.ts
🧠 Learnings (3)
📚 Learning: 2024-10-07T21:16:41.660Z
Learnt from: AVMatthews
Repo: y-scope/clp PR: 543
File: components/core/src/clp_s/JsonParser.cpp:769-779
Timestamp: 2024-10-07T21:16:41.660Z
Learning: In `components/core/src/clp_s/JsonParser.cpp`, when handling errors in `parse_from_ir`, prefer to maintain the current mix of try-catch and if-statements because specific messages are returned back up in some cases.
Applied to files:
components/webui/client/src/sql-parser/index.ts
📚 Learning: 2024-11-19T19:52:43.429Z
Learnt from: junhaoliao
Repo: y-scope/clp PR: 596
File: components/log-viewer-webui/client/src/api/query.js:35-41
Timestamp: 2024-11-19T19:52:43.429Z
Learning: For internal APIs in `components/log-viewer-webui/client/src/api/query.js`, runtime validation of parameters may not be necessary since the APIs are not exposed to end users, and JsDoc type annotations may be sufficient.
Applied to files:
components/webui/client/src/sql-parser/index.ts
📚 Learning: 2025-05-26T18:55:45.417Z
Learnt from: anlowee
Repo: y-scope/clp PR: 925
File: components/core/src/clp_s/search/kql/antlr_generated/KqlLexer.cpp:8-13
Timestamp: 2025-05-26T18:55:45.417Z
Learning: ANTLR code generation includes duplicate "using namespace antlr4;" declarations intentionally: the first comes from a general template header section, and the second is added after custom namespace declarations (e.g., "using namespace kql;") to ensure ANTLR symbols remain in scope. This is a known code generation pattern, not an error.
Applied to files:
components/webui/client/src/sql-parser/index.ts
🧬 Code graph analysis (1)
components/webui/client/src/sql-parser/index.ts (2)
components/webui/client/src/sql-parser/generated/SqlLexer.ts (1)
SqlLexer(15-1482)components/webui/client/src/sql-parser/generated/SqlParser.ts (1)
SqlParser(19-11121)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: package-image
- GitHub Check: lint-check (ubuntu-24.04)
- GitHub Check: lint-check (macos-15)
| // Offending symbol always returns a token | ||
| // https://github.com/antlr/antlr4/blob/cc82115a4e7f53d71d9d905caa2c2dfa4da58899/runtime/JavaScript/src/antlr4/Parser.js#L308 | ||
| const token = offendingSymbol as unknown as Token; | ||
| const startColumn = token.start + 1; | ||
| const endColumn = token.stop + 2; | ||
|
|
||
| this.errors.push({ | ||
| column: column, | ||
| endColumn: endColumn, | ||
| line: line, | ||
| message: msg, | ||
| startColumn: startColumn, | ||
| }); |
There was a problem hiding this comment.
Handle lexer errors when offendingSymbol is null.
Once the listener is registered on the lexer, ANTLR calls syntaxError with offendingSymbol === null for tokenisation failures. Casting that value to Token and dereferencing .start/.stop throws at runtime, so malformed SQL currently crashes the validation path instead of emitting a ValidationError. Guard the dereference and fall back to the provided column when no token bounds exist.
- const token = offendingSymbol as unknown as Token;
- const startColumn = token.start + 1;
- const endColumn = token.stop + 2;
+ const candidateToken = offendingSymbol as unknown as Token | null | undefined;
+ const hasTokenBounds =
+ "undefined" !== typeof candidateToken &&
+ null !== candidateToken &&
+ "number" === typeof candidateToken.start &&
+ "number" === typeof candidateToken.stop &&
+ -1 !== candidateToken.start &&
+ -1 !== candidateToken.stop;
+ const startColumn = hasTokenBounds ?
+ (candidateToken as Token).start + 1 :
+ column + 1;
+ const endColumn = hasTokenBounds ?
+ (candidateToken as Token).stop + 2 :
+ column + 2;Committable suggestion skipped: line range outside the PR's diff.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
components/webui/client/src/components/SqlInput/utils.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{cpp,hpp,java,js,jsx,tpp,ts,tsx}
⚙️ CodeRabbit configuration file
- Prefer
false == <expression>rather than!<expression>.
Files:
components/webui/client/src/components/SqlInput/utils.ts
🧠 Learnings (1)
📓 Common learnings
Learnt from: davemarco
Repo: y-scope/clp PR: 1108
File: components/webui/client/src/components/SqlEditor/monaco-config.ts:6-8
Timestamp: 2025-07-21T14:37:57.648Z
Learning: In Monaco Editor configurations for SQL editing, the import of "monaco-editor/esm/vs/editor/editor.all.js" is required for SQL autocomplete functionality to work properly, even when using "editor.api" and "sql.contribution.js". Removing "editor.all.js" breaks the autocomplete feature.
🔇 Additional comments (2)
components/webui/client/src/components/SqlInput/utils.ts (2)
1-6: LGTM!The documentation clearly describes the function's purpose and usage for Monaco editor hover tooltips.
21-21: LGTM!The export statement correctly exposes the utility function for use in other modules.
Co-authored-by: hoophalab <200652805+hoophalab@users.noreply.github.com>
junhaoliao
left a comment
junhaoliao
left a comment
There was a problem hiding this comment.
deferring to @hoophalab 's review
3 participants
Description
Add hover feature for ANTLR error. Also reworked highlight to use a different monaco API, since the marker api was not very flexible.
Checklist
breaking change.
Validation performed
Hover box appears
Summary by CodeRabbit