Skip to content

[FEATURE] Add a query playground to the Query Viewer - #227

Open
gangadhar-res wants to merge 1 commit into
perses:mainfrom
gangadhar-res:feat/query-viewer-playground
Open

[FEATURE] Add a query playground to the Query Viewer#227
gangadhar-res wants to merge 1 commit into
perses:mainfrom
gangadhar-res:feat/query-viewer-playground

Conversation

@gangadhar-res

@gangadhar-res gangadhar-res commented Aug 15, 2026

Copy link
Copy Markdown

Description

Implements the query playground requested in perses/perses#4333: the Query Viewer dialog now lets users edit the panel's queries and assess the result on the fly, instead of only showing them read-only.

How it works:

  • QueryViewerDialog accepts a new optional panelDefinition prop. When provided, it renders the new QueryPlayground component; when omitted, the previous read-only rendering is kept, so the public API stays backward compatible.
  • QueryPlayground composes existing building blocks: MultiQueryEditor for editing (same editor as the panel drawer, including Run Query), PanelPreview inside a DataQueriesProvider for the live chart, and PanelEditorProvider so the suggested step is computed from the real preview width. Draft queries drive the editors and only become part of the preview when run, mirroring PanelQueriesSharedControls.
  • Nothing is persisted: all state is local React state gated on the dialog being open, so closing or refreshing drops every change, as required by the issue. The dashboard panel itself is untouched since edited queries produce new query keys and the original definitions are never mutated.
  • GridItemContent passes the panel definition through, which enables the playground for the existing "open query view" panel action.

Since the panel preview is reused as the chart, this works for any panel/query plugin combination, not just time series.

A follow-up PR in perses/perses will cover the e2e test and close the issue once this is released.

Screenshots

(will add after running locally against the perses app)

Queries in the Query Viewer dialog are now editable and can be run on
the fly against a live preview of the panel. All edits are local to the
dialog and dropped when it closes, so nothing is ever persisted.

Part of perses/perses#4333

Signed-off-by: Gangadhar Chalapaka <gangadhar@resolve.ai>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant