[DNS - prototype] ui: Add schema-aware PerfettoSQL autocomplete and live diagnostics #6237
[DNS - prototype] ui: Add schema-aware PerfettoSQL autocomplete and live diagnostics #6237gignat-dev wants to merge 5 commits into
Conversation
Add a shared, app-agnostic SQL editor intelligence module under components/sql_intelligence/ and wire it into the BigTrace query editor. - Autocomplete: catalog-driven table / column / function / macro completion (columns scoped to the tables referenced after FROM/JOIN, dotted table.column, INCLUDE-aware). Completion stays catalog-driven rather than parser-driven because the catalog scopes columns to the query while the parser only returns a flat, unscoped identifier dump. - Live, pre-run diagnostics via the syntaqlite WASM parser: unknown table / column / function and arity errors are underlined as you type, with a hover tooltip and an INCLUDE fix hint. Implemented dependency- free on @codemirror/view (Decoration marks + hoverTooltip) and debounced, so neither @codemirror/lint nor @codemirror/autocomplete is needed. The Editor widget gains additive completions?/diagnostics? props: when unset (every existing caller) its behaviour is byte-identical. BigTrace mirrors the syntaqlite runtime + perfetto dialect WASM into its own dist root and relaxes its CSP to allow wasm-unsafe-eval so the parser can load.
Add dev.perfetto.SqlEditorIntelligence, an opt-in plugin that brings the shared autocomplete + live diagnostics to the dev.perfetto.QueryPage editor. The plugin is not in the default set: when it is not enabled it never activates, registers nothing, loads no WASM, and the query editor behaves exactly as it did before. QueryPage exposes a generic EditorIntelligence hook (setEditorIntelligence) that the plugin populates. The plugin assembles the schema from the stdlib catalog, the per-trace SqlModules, and the tables created during this session (LiveSchemaCache records CREATE PERFETTO TABLE/VIEW from executed SQL and reads their columns via pragma_table_info), and passes completions / diagnostics through to the Editor widget only when present.
The autocomplete dropdown and the diagnostic hover tooltip were rendered inside the editor's own DOM, where an `overflow: hidden` ancestor (the query page's split pane) clipped them at the pane edge: near the right edge the completion list was sliced off, and near the bottom it was cut instead of staying on-screen. Render them in a document.body portal with fixed positioning so they escape the clip and become viewport-aware (flip/shift to fit). Gated on a popup source being present, so it stays inert for every other editor consumer.
|
Question: why are we adding so much code here rather than switching to Monaco and then using the LSP layer of syntaqlite for autocomplete? Would suggest looking at the editor experience at https://playground.syntaqlite.com/ and seeing if we can work with that before doing anything else. |
Codemirror has an LSP client plugin if that's all we're missing. I'd be wary of switching editors just for the sake of it. Granted, I have no experience with either monaco or the codemirror lsp editor so take this with a huge grain of salt. |
…plugin # Conflicts: # ui/build.mjs # ui/src/bigtrace/index.ts
gignat-dev
force-pushed
the
dev/gignat/sql-intel-plugin
branch
from
eddc7c3 to
6ec18bb
Compare
🎨 Perfetto UI Builds
|
Bigtrace UI Builds |
|
Personally I enjoyed my experience of working with Monaco in syntaqlite and certainly like the final result more than the look we get with codemirror (makes sense since it's just vscode's experience at the end of the day). But I'm fine with whatever we do here: I'm more concerned about (poorly) reinventing LSP here which is what a lot of this change appears to be. |
Agreed, let's not re-invent the wheel. |
Maybe we could look into improving the syntaqlite autocompletion first, or just use the bare autocompletion it provides. What do you think? |
|
syntaqlite auto omplete supports definitions just fine. You just need to feed it the schema for this. The playground shows how to do this. And if there's specific cases which are not working I would like to understand that so we can fix them. Also fwiw we should not be putting a lot of dedicated work in this space anyway because in the longer term with a combination of data explorer + AI I don't think many people will be writing SQL by hand really. Also also there's another problem here which is that there appears to be a lot of hardcoded logic here with respect to PerfettoSQL which will change a lot when PerfettoSQL next comes in with pipe syntax and custom interval/tree/graph operators. |
3 participants
This PR introduces a new SQL Editor Intelligence layer to the Perfetto UI, bringing context-aware autocomplete and real-time syntax diagnostics to both the main Query Page (via an opt-in plugin) and the BigTrace editor.
✨ Features
• Live Diagnostics: Real-time squiggly underlines for syntax and reference errors as you type. It intelligently suppresses reference errors until the schema is fully loaded and provides hints to INCLUDE missing stdlib modules.
• Smart Autocomplete: Catalog-driven autocomplete that understands INCLUDE statements, resolves table aliases, and correctly handles dotted table.column completions.
• Dynamic Session Schema: The main UI dynamically tracks CREATE PERFETTO TABLE/VIEW statements executed during your session. It queries pragma_table_info under the hood to instantly provide autocomplete for newly created tables and
columns.
• Unclipped Popups: CodeMirror tooltips (dropdowns and hover widgets) are now rendered via a document.body portal, preventing them from being annoyingly clipped by split-pane boundaries.
🛠 Technical Details
• WASM Parser: Powered by a lightweight WASM build of the syntaqlite parser, compiled via Emscripten and tailored specifically for the Perfetto SQL dialect.
• Shared Architecture: The core engine ( completion.ts , diagnostics.ts ) is built against a generic SqlSchema interface. This allows the exact same intelligence logic to be shared verbatim between the main UI and BigTrace.
• CSP Safe: BigTrace populates its schema catalog by manually parsing stdlib_docs.json . This deliberately avoids libraries like Zod whose parsing mechanisms can trigger unsafe-eval Content Security Policy (CSP) violations in strict
browser environments.
🧪 Testing
• Added comprehensive unit tests for the completion engine, diagnostics generator, and live schema cache (135 files, 2300+ tests passing).
• Added Playwright E2E integration tests ( sql_editor_intelligence.test.ts ) to verify end-to-end functionality.