grafana-scenes

Build a reactive Grafana plugin page by composing SceneApp, SceneAppPage, and EmbeddedScene structures. This scene graph automatically propagates variable, time range, and query result changes to table, timeseries, or stat panels without manual state management wiring.

Configure drilldown navigation and tabbed sub-pages in a Grafana plugin by defining wildcard routePath patterns on SceneAppPage components. These route patterns capture URL parameters to drive click-through detail page navigation and switch between distinct embedded scene views.

Reference variables within Grafana scene query runners by accessing SceneVariableSet ancestors through the scene hierarchy. This allows SceneQueryRunner components to interpolate QueryVariable values directly into data source queries for dynamic filtering.

Yes, you can chain SceneDataTransformer with SceneQueryRunner to transform query results before rendering Grafana panels. This allows you to manipulate the data structure output and feed the processed data directly into table, timeseries, or stat panel visualizations.

Load scenes lazily in a Grafana plugin by returning scene objects from a getScene function. This function must return the EmbeddedScene instance without causing side effects, ensuring the scene graph initializes cleanly upon route navigation.

TypeScript is the primary language for building Grafana plugin scenes, providing type safety for SceneApp, SceneQueryRunner, and SceneVariableSet declarations. The reactive scene architecture relies on strongly typed components to ensure query and variable wiring integrity.