grafana/public/app/features/dashboard-scene/scene/ViewPanelScene.tsx

import React from 'react';

import {
  SceneComponentProps,
  SceneObjectBase,
  SceneObjectRef,
  SceneObjectState,
  VizPanel,
  sceneUtils,
  SceneVariables,
  SceneGridRow,
  sceneGraph,
  SceneVariableSet,
  SceneVariable,
} from '@grafana/scenes';

interface ViewPanelSceneState extends SceneObjectState {
  panelRef: SceneObjectRef<VizPanel>;
  body?: VizPanel;
}

export class ViewPanelScene extends SceneObjectBase<ViewPanelSceneState> {
  public constructor(state: ViewPanelSceneState) {
    super(state);

    this.addActivationHandler(this._activationHandler.bind(this));
  }

  public _activationHandler() {
    const panel = this.state.panelRef.resolve();
    const panelState = sceneUtils.cloneSceneObjectState(panel.state, {
      key: panel.state.key + '-view',
      $variables: this.getScopedVariables(panel),
    });

    const body = new VizPanel(panelState);

    this.setState({ body });

    return () => {
      // Make sure we preserve data state
      if (body.state.$data) {
        panel.setState({ $data: body.state.$data.clone() });
      }
    };
  }

  // In case the panel is inside a repeated row
  private getScopedVariables(panel: VizPanel): SceneVariables | undefined {
    const row = tryGetParentRow(panel);
    const variables: SceneVariable[] = [];

    // Because we are rendering the panel outside it's potential row context we need to copy the row (scoped) varables
    if (row && row.state.$variables) {
      for (const variable of row.state.$variables.state.variables) {
        variables.push(variable.clone());
      }
    }

    // If we have local scoped panel variables we need to add the row variables to it
    if (panel.state.$variables) {
      for (const variable of panel.state.$variables.state.variables) {
        variables.push(variable.clone());
      }
    }

    if (variables.length > 0) {
      return new SceneVariableSet({ variables });
    }

    return undefined;
  }

  public getUrlKey() {
    return this.state.panelRef.resolve().state.key;
  }

  public static Component = ({ model }: SceneComponentProps<ViewPanelScene>) => {
    const { body } = model.useState();

    if (!body) {
      return null;
    }

    return <body.Component model={body} />;
  };
}

function tryGetParentRow(panel: VizPanel): SceneGridRow | undefined {
  try {
    return sceneGraph.getAncestor(panel, SceneGridRow);
  } catch {
    return undefined;
  }
}