Repeating viz panel by query runner on a viz panel (POC)

packages/scenes-app/src/demos/index.ts

@@ -43,6 +43,7 @@ import { getSceneGraphEventsDemo } from './sceneGraphEvents';
 import { getSeriesLimitTest } from './seriesLimit';
 import { getScopesDemo } from './scopesDemo';
 import { getVariableWithObjectValuesDemo } from './variableWithObjectValuesDemo';
+import { getPanelRepeaterByProcessorDemo } from './panelRepeaterByProcessor';
 
 export interface DemoDescriptor {
   title: string;
@@ -83,6 +84,12 @@ export function getDemos(): DemoDescriptor[] {
       getPage: getPanelRepeaterTest,
       getSourceCodeModule: () => import('!!raw-loader!../demos/panelRepeater'),
     },
+    {
+      title: 'Repeat layout by series (using data processor)',
+      description: 'Here we use repeat a panel using a data processor',
+      getPage: getPanelRepeaterByProcessorDemo,
+      getSourceCodeModule: () => import('!!raw-loader!../demos/panelRepeaterByProcessor'),
+    },
     {
       title: 'Repeat layout by variable',
       description: 'Test of repeating layout by variable',

packages/scenes-app/src/demos/panelRepeaterByProcessor.tsx

@@ -0,0 +1,100 @@
+import {
+  EmbeddedScene,
+  PanelBuilders,
+  SceneAppPage,
+  SceneAppPageState,
+  SceneCSSGridLayout,
+  SceneDataNode,
+  SceneQueryRunner,
+  SceneToolbarInput,
+  VizPanel,
+  sceneGraph,
+} from '@grafana/scenes';
+import { getEmbeddedSceneDefaults } from './utils';
+import { DATASOURCE_REF } from '../constants';
+import { LoadingState, PanelData, getFrameDisplayName } from '@grafana/data';
+
+export function getPanelRepeaterByProcessorDemo(defaults: SceneAppPageState) {
+  const queryRunner = new SceneQueryRunner({
+    dataProcessor: repeater,
+    queries: [
+      {
+        refId: 'A',
+        datasource: DATASOURCE_REF,
+        scenarioId: 'random_walk',
+        seriesCount: 4,
+        alias: '__server_names',
+      },
+    ],
+  });
+
+  return new SceneAppPage({
+    ...defaults,
+    getScene: () => {
+      return new EmbeddedScene({
+        ...getEmbeddedSceneDefaults(),
+        body: new SceneCSSGridLayout({
+          children: [
+            PanelBuilders.timeseries()
+              .setTitle('Panel')
+              .setOption('legend', { showLegend: false })
+              .setData(queryRunner)
+              .build(),
+          ],
+        }),
+        controls: [
+          new SceneToolbarInput({
+            value: '4',
+            label: 'Series count',
+            onChange: (newValue) => {
+              queryRunner.setState({
+                queries: [
+                  {
+                    ...queryRunner.state.queries[0],
+                    seriesCount: newValue,
+                  },
+                ],
+              });
+              queryRunner.runQueries();
+            },
+          }),
+          ...getEmbeddedSceneDefaults().controls,
+        ],
+      });
+    },
+  });
+}
+
+function repeater(queryRunner: SceneQueryRunner, data: PanelData) {
+  const layout = sceneGraph.getAncestor(queryRunner, SceneCSSGridLayout);
+  const sourcePanel = queryRunner.parent as VizPanel;
+  const children: VizPanel[] = [sourcePanel];
+  let returnData = data;
+
+  if (data.state === LoadingState.Loading) {
+    return returnData;
+  }
+
+  for (let seriesIndex = 0; seriesIndex < data.series.length; seriesIndex++) {
+    if (seriesIndex === 0) {
+      sourcePanel.setState({ title: getFrameDisplayName(data.series[seriesIndex], seriesIndex) });
+      returnData = { ...data, series: [data.series[seriesIndex]] };
+      continue;
+    }
+
+    const clone = sourcePanel.clone({
+      title: getFrameDisplayName(data.series[seriesIndex], seriesIndex),
+      $data: new SceneDataNode({
+        data: {
+          ...data,
+          series: [data.series[seriesIndex]],
+        },
+      }),
+    });
+
+    children.push(clone);
+  }
+
+  layout.setState({ children });
+  return returnData;
+}

packages/scenes/src/querying/SceneQueryRunner.ts

@@ -72,6 +72,7 @@ export interface QueryRunnerState extends SceneObjectState {
   runQueriesMode?: 'auto' | 'manual';
   // Filters to be applied to data layer results before combining them with SQR results
   dataLayerFilter?: DataLayerFilter;
+  dataProcessor?: (queryRunner: SceneQueryRunner, data: PanelData) => PanelData;
   /**
    * Optional prefix for the requestId. When set, request IDs will be formatted as `{requestIdPrefix}{counter}`.
    * Useful for identifying requests from specific panels or components.
@@ -620,14 +621,18 @@ export class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> implemen
     this._resultAnnotations = data.annotations;
 
     // Will combine annotations & alert state from data layer providers
-    const dataWithLayersApplied = this._combineDataLayers(preProcessedData);
+    let dataWithLayersApplied = this._combineDataLayers(preProcessedData);
 
     let hasFetchedData = this.state._hasFetchedData;
 
     if (!hasFetchedData && preProcessedData.state !== LoadingState.Loading) {
       hasFetchedData = true;
     }
 
+    if (this.state.dataProcessor) {
+      dataWithLayersApplied = this.state.dataProcessor(this, dataWithLayersApplied);
+    }
+
     this.setState({ data: dataWithLayersApplied, _hasFetchedData: hasFetchedData });
     this._results.next({ origin: this, data: dataWithLayersApplied });
   };