Logo
All projects

Xata Query Editor

NewShipped

A SQL editor and query performance view for the Xata console, rebuilt around resizable panels, a draft and save flow, and virtualized results.

Xata Query Editor & Query Insights

Two related surfaces: the editor where developers write and save SQL against a branch, and the insights view where they find the queries that are slowing a database down. I reworked the editor into a proper workspace, then brought insights onto the same interaction patterns. Part of the Xata Console.

Running a statement, saving a draft as a named query and exporting the results.

Key Contributions:

  • Editor v2: Reworked the queries page onto resizable panels for both the sidebar and the editor and results split, with responsive collapse on smaller screens, dropping the react-split-pane dependency.
  • Component decomposition: Broke a monolithic editor into a toolbar, results toolbar, results grid and save dialog, each independently testable.
  • Draft and save flow: Added a draft state for manual save mode with save as, dirty tracking, and optimistic creation when auto save is enabled.
  • Data loss bug: Diagnosed and fixed lines of code disappearing mid edit. Auto save was writing the server response back into the query cache, and the changed prop destroyed and recreated Monaco with stale content.
  • Insights alignment: Replaced a modal drawer with an inline resizable detail panel, flattened the page into one edge to edge layout with a single sticky toolbar, and added a footer reporting the visible query count.
  • Virtualized results: Virtualized the insights table while preserving column resizing, sorting, sticky headers and expandable rows.
  • Column alignment: Fixed long standing header and body misalignment by sizing cells directly from the column API instead of CSS variables that lagged a render behind.
  • Slow query highlighting: Split row visual state into independent channels so severity and selection compose correctly and stay readable in both themes.
Query editor with a saved queries sidebar, a SQL statement and a results grid below it
Editor v2: saved queries sidebar, resizable editor and results split, and the results toolbar.
Query insights table listing queries by runtime, with an inline detail panel showing the selected query
Query insights: virtualized table with runtime bars and an inline detail panel for the selected query.

Technical Impact:

The data loss bug is the one worth naming. It presented as a rendering glitch and turned out to be a cache write feeding stale content back into a controlled editor, which is the kind of failure that erodes trust in a tool faster than any missing feature. Structurally, decomposing the editor made the draft and save behaviour possible to reason about at all, and aligning insights to the logs viewer meant one set of interaction patterns to learn instead of three.

Project Structure:

  • Editor: Monaco based editor, resizable panel layout, saved query sidebar
  • Save flow: draft state, save as dialog, dirty tracking, optimistic creation
  • Results: tabbed results grid with sticky headers and contained scrolling
  • Insights: virtualized table, inline detail panel, sticky toolbar, severity highlighting