Scene: Exploring typed scene panels (#58168)

* Scene: Exploring typed scene panels

* Updated

* minor rename

public/app/features/scenes/components/VizPanel/VizPanel.tsx

@@ -1,3 +1,4 @@
+import { DeepPartial } from '@reduxjs/toolkit';
 import React from 'react';
 
 import { AbsoluteTimeRange, FieldConfigSource, PanelModel, PanelPlugin, toUtc } from '@grafana/data';
@@ -15,23 +16,21 @@ import { VizPanelRenderer } from './VizPanelRenderer';
 export interface VizPanelState<TOptions = {}, TFieldConfig = {}> extends SceneLayoutChildState {
   title: string;
   pluginId: string;
-  options: TOptions;
-  fieldConfig: FieldConfigSource<TFieldConfig>;
+  options: DeepPartial<TOptions>;
+  fieldConfig: FieldConfigSource<DeepPartial<TFieldConfig>>;
   pluginVersion?: string;
   // internal state
   pluginLoadError?: string;
 }
 
-export class VizPanel<TOptions = {}, TFieldConfig = {}> extends SceneObjectBase<
-  VizPanelState<Partial<TOptions>, TFieldConfig>
-> {
+export class VizPanel<TOptions = {}, TFieldConfig = {}> extends SceneObjectBase<VizPanelState<TOptions, TFieldConfig>> {
   public static Component = VizPanelRenderer;
   public static Editor = VizPanelEditor;
 
   // Not part of state as this is not serializable
   private _plugin?: PanelPlugin;
 
-  public constructor(state: Partial<VizPanelState<Partial<TOptions>, TFieldConfig>>) {
+  public constructor(state: Partial<VizPanelState<TOptions, TFieldConfig>>) {
     super({
       options: {},
       fieldConfig: { defaults: {}, overrides: [] },
@@ -109,7 +108,7 @@ export class VizPanel<TOptions = {}, TFieldConfig = {}> extends SceneObjectBase<
     this.setState({ options });
   };
 
-  public onFieldConfigChange = (fieldConfig: FieldConfigSource) => {
+  public onFieldConfigChange = (fieldConfig: FieldConfigSource<TFieldConfig>) => {
     this.setState({ fieldConfig });
   };
 }

public/app/features/scenes/components/VizPanel/panelBuilders.ts

@@ -0,0 +1,32 @@
+import { GraphFieldConfig, TableFieldOptions } from '@grafana/schema';
+import { PanelOptions as BarGaugePanelOptions } from 'app/plugins/panel/bargauge/models.gen';
+import { PanelOptions as TablePanelOptions } from 'app/plugins/panel/table/models.gen';
+import { TimeSeriesOptions } from 'app/plugins/panel/timeseries/types';
+
+import { VizPanel, VizPanelState } from './VizPanel';
+
+export type TypedVizPanelState<TOptions, TFieldConfig> = Omit<
+  Partial<VizPanelState<TOptions, TFieldConfig>>,
+  'pluginId'
+>;
+
+export const panelBuilders = {
+  newTable: (state: TypedVizPanelState<TablePanelOptions, TableFieldOptions>) => {
+    return new VizPanel<TablePanelOptions, TableFieldOptions>({
+      ...state,
+      pluginId: 'table',
+    });
+  },
+  newGraph: (state: TypedVizPanelState<TimeSeriesOptions, GraphFieldConfig>) => {
+    return new VizPanel({
+      ...state,
+      pluginId: 'timeseries',
+    });
+  },
+  newBarGauge: (state: TypedVizPanelState<BarGaugePanelOptions, {}>) => {
+    return new VizPanel({
+      ...state,
+      pluginId: 'bargauge',
+    });
+  },
+};

public/app/features/scenes/scenes/demo.tsx

@@ -8,6 +8,7 @@ import {
   VizPanel,
 } from '../components';
 import { EmbeddedScene } from '../components/Scene';
+import { panelBuilders } from '../components/VizPanel/panelBuilders';
 import { SceneTimeRange } from '../core/SceneTimeRange';
 import { SceneEditManager } from '../editor/SceneEditManager';
 
@@ -19,21 +20,27 @@ export function getFlexLayoutTest(standalone: boolean): Scene {
     layout: new SceneFlexLayout({
       direction: 'row',
       children: [
-        new VizPanel({
+        panelBuilders.newGraph({
           size: { minWidth: '70%' },
-          pluginId: 'timeseries',
           title: 'Dynamic height and width',
           $data: getQueryRunnerWithRandomWalkQuery({}, { maxDataPointsFromWidth: true }),
         }),
         new SceneFlexLayout({
           direction: 'column',
           children: [
-            new VizPanel({
-              pluginId: 'timeseries',
+            panelBuilders.newGraph({
               title: 'Fill height',
+              options: {},
+              fieldConfig: {
+                defaults: {
+                  custom: {
+                    fillOpacity: 20,
+                  },
+                },
+                overrides: [],
+              },
             }),
-            new VizPanel({
-              pluginId: 'timeseries',
+            panelBuilders.newGraph({
               title: 'Fill height',
             }),
             new SceneCanvasText({
@@ -42,10 +49,9 @@ export function getFlexLayoutTest(standalone: boolean): Scene {
               fontSize: 20,
               align: 'center',
             }),
-            new VizPanel({
-              size: { height: 300 },
-              pluginId: 'timeseries',
+            panelBuilders.newGraph({
               title: 'Fixed height',
+              size: { height: 300 },
             }),
           ],
         }),