viz element data; filtering

public/app/features/canvas/elements/visualization.tsx

@@ -2,14 +2,7 @@ import {css} from '@emotion/css';
 
 import {GrafanaTheme2, SelectableValue} from '@grafana/data';
 import {DataFrame} from '@grafana/data/';
-import {
-  EmbeddedScene,
-  PanelBuilders,
-  SceneDataQuery,
-  SceneFlexItem,
-  SceneFlexLayout,
-  SceneQueryRunner,
-} from '@grafana/scenes';
+import {EmbeddedScene, PanelBuilders, SceneDataNode, SceneFlexItem, SceneFlexLayout} from '@grafana/scenes';
 import {stylesFactory, usePanelContext} from '@grafana/ui';
 import {config} from 'app/core/config';
 import {DimensionContext} from 'app/features/dimensions/context';
@@ -52,31 +45,7 @@ const VisualizationDisplay = (props: CanvasElementProps<VizElementConfig, VizEle
     fields: frame.fields.filter((field) => !elementConfig.fields?.includes(field.name)),
   }));
 
-  // @TODO: Update refId
-  const getQueries = () => {
-    const queries: SceneDataQuery[] = [];
-    selectedFrames?.forEach((frame, index) => {
-      queries.push({
-        refId: `A${index}`,
-      });
-    });
-
-    return queries;
-  };
-
-  // TODO data needs to be tied to element options and come from dashboard dataframes
-  const panelData = new SceneQueryRunner({
-    data: {
-      ...scene?.data,
-      series: selectedFrames,
-    },
-    datasource: {
-      type: 'grafana-testdata-datasource',
-    },
-    queries: getQueries(),
-  });
-
-  panelToEmbed.setData(panelData);
+  panelToEmbed.setData(new SceneDataNode({ data: data!.data }));
   const panel = panelToEmbed.build();
 
   const embeddedPanel = new EmbeddedScene({
@@ -149,19 +118,32 @@ export const visualizationItem: CanvasElementItem<VizElementConfig, VizElementDa
 
   // Called when data changes
   prepareData: (dimensionContext: DimensionContext, elementOptions: CanvasElementOptions<VizElementConfig>) => {
-    const textConfig = elementOptions.config;
+    const vizConfig = elementOptions.config;
+    let panelData = dimensionContext.getPanelData();
+
+    if (vizConfig?.fields && vizConfig.fields.length > 1 && panelData) {
+      let frames = panelData?.series;
+      let selectedFrames =
+        frames?.filter((frame) => frame.fields.filter((field) => vizConfig.fields!.includes(field.name)).length > 0) ??
+        [];
+      panelData = {
+        ...panelData,
+        series: selectedFrames,
+      };
+    }
 
     const data: VizElementData = {
-      text: textConfig?.text ? dimensionContext.getText(textConfig.text).value() : '',
-      field: textConfig?.text?.field,
-      align: textConfig?.align ?? Align.Center,
-      valign: textConfig?.valign ?? VAlign.Middle,
-      size: textConfig?.size,
-      vizType: textConfig?.vizType,
+      text: vizConfig?.text ? dimensionContext.getText(vizConfig.text).value() : '',
+      field: vizConfig?.text?.field,
+      align: vizConfig?.align ?? Align.Center,
+      valign: vizConfig?.valign ?? VAlign.Middle,
+      size: vizConfig?.size,
+      vizType: vizConfig?.vizType,
+      data: panelData,
     };
 
-    if (textConfig?.color) {
-      data.color = dimensionContext.getColor(textConfig.color).value();
+    if (vizConfig?.color) {
+      data.color = dimensionContext.getColor(vizConfig.color).value();
     }
 
     return data;

public/app/features/canvas/types.ts

@@ -1,4 +1,4 @@
-import {LinkModel} from '@grafana/data/src';
+import {LinkModel, PanelData} from '@grafana/data/src';
 import {ColorDimensionConfig, ResourceDimensionConfig, TextDimensionConfig} from '@grafana/schema';
 import {BackgroundImageSize} from 'app/plugins/panel/canvas/panelcfg.gen';
 
@@ -48,6 +48,7 @@ export interface VizElementConfig extends TextConfig {
 
 export interface VizElementData extends TextData {
   vizType?: string;
+  data?: PanelData;
 }
 
 export interface CanvasElementConfig extends TextConfig {

public/app/plugins/panel/canvas/editor/layer/TreeNavigationEditor.tsx

@@ -13,7 +13,7 @@ import {frameSelection, reorderElements} from 'app/features/canvas/runtime/scene
 import {getGlobalStyles} from '../../globalStyles';
 import {Options} from '../../panelcfg.gen';
 import {DragNode, DropNode} from '../../types';
-import { doSelect, onGenerateVisualization, getElementTypes, onAddItem } from '../../utils';
+import {doSelect, getElementTypes, onAddItem, onGenerateVisualization} from '../../utils';
 import {TreeViewEditorProps} from '../element/elementEditor';
 
 import {TreeNodeTitle} from './TreeNodeTitle';

public/app/plugins/panel/canvas/utils.ts

@@ -316,4 +316,4 @@ export const onGenerateVisualization = (selectedElements: ElementState[], layer:
   });
 
   onAddItem(visualizationSelection, layer, undefined, selectedFields);
-}
+};