diff --git a/docusaurus/docs/advanced-data.md b/docusaurus/docs/advanced-data.md index 30e5bb0b3..d1be19c77 100644 --- a/docusaurus/docs/advanced-data.md +++ b/docusaurus/docs/advanced-data.md @@ -65,6 +65,10 @@ The subscription returned from `sourceData.subscribeToState` is added to `this._ Similarly to data, you can use the closest time range in a custom scene object using `sceneGraph.getTimeRange(model)`. This method can be used both in the custom object class and the renderer, as described previously in the [Use data](#use-data) section. +## Sharing same data provide + +If you need to share the same data provider between many different scene objects and cannot do it by placing the $data on a shared common ancestor you can use the `DataProviderSharer`. This is a data provider that can share/forward data from another data provider. + ## Source code [View the example source code](https://github.com/grafana/scenes/tree/main/docusaurus/docs/advanced-data.tsx) diff --git a/packages/scenes-react/src/components/VizPanel.tsx b/packages/scenes-react/src/components/VizPanel.tsx index 37f53951b..90d5c9838 100644 --- a/packages/scenes-react/src/components/VizPanel.tsx +++ b/packages/scenes-react/src/components/VizPanel.tsx @@ -5,8 +5,8 @@ import { VizPanelState, VizConfig, SceneQueryRunner, + DataProviderSharer, } from '@grafana/scenes'; -import { DataProxyProvider } from '../DataProxyProvider'; import { usePrevious } from 'react-use'; import { getPanelOptionsWithDefaults } from '@grafana/data'; import { writeSceneLog } from '../utils'; @@ -96,7 +96,7 @@ export function VizPanel(props: VizPanelProps) { */ function getDataProviderForVizPanel(data: SceneDataProvider | undefined): SceneDataProvider | undefined { if (data instanceof SceneQueryRunner) { - return new DataProxyProvider({ source: data.getRef() }); + return new DataProviderSharer({ source: data.getRef() }); } return data; } diff --git a/packages/scenes-react/src/hooks/useDataTransformer.ts b/packages/scenes-react/src/hooks/useDataTransformer.ts index 63b4268e1..74c74ccef 100644 --- a/packages/scenes-react/src/hooks/useDataTransformer.ts +++ b/packages/scenes-react/src/hooks/useDataTransformer.ts @@ -1,9 +1,13 @@ -import { CustomTransformerDefinition, SceneDataProvider, SceneDataTransformer } from "@grafana/scenes" -import { useSceneContext } from "./hooks"; -import { useEffect, useId } from "react"; -import { isEqual } from "lodash"; -import { DataTransformerConfig } from "@grafana/schema"; -import { DataProxyProvider } from "../DataProxyProvider"; +import { + CustomTransformerDefinition, + DataProviderSharer, + SceneDataProvider, + SceneDataTransformer, +} from '@grafana/scenes'; +import { useSceneContext } from './hooks'; +import { useEffect, useId } from 'react'; +import { isEqual } from 'lodash'; +import { DataTransformerConfig } from '@grafana/schema'; export interface UseDataTransformerOptions { transformations: Array; @@ -19,7 +23,7 @@ export function useDataTransformer(options: UseDataTransformerOptions) { if (!dataTransformer) { dataTransformer = new SceneDataTransformer({ key: key, - $data: new DataProxyProvider({ source: options.data.getRef() }), + $data: new DataProviderSharer({ source: options.data.getRef() }), transformations: options.transformations, }); } diff --git a/packages/scenes/src/index.ts b/packages/scenes/src/index.ts index d2364f5db..309f4dc31 100644 --- a/packages/scenes/src/index.ts +++ b/packages/scenes/src/index.ts @@ -29,6 +29,7 @@ export { SceneTimeRange } from './core/SceneTimeRange'; export { SceneTimeZoneOverride } from './core/SceneTimeZoneOverride'; export { SceneQueryRunner, type QueryRunnerState } from './querying/SceneQueryRunner'; +export { DataProviderSharer } from './querying/DataProviderSharer'; export { type ExtraQueryDescriptor, type ExtraQueryProvider, diff --git a/packages/scenes-react/src/DataProxyProvider.tsx b/packages/scenes/src/querying/DataProviderSharer.ts similarity index 81% rename from packages/scenes-react/src/DataProxyProvider.tsx rename to packages/scenes/src/querying/DataProviderSharer.ts index 5c29c5199..16a4613f5 100644 --- a/packages/scenes-react/src/DataProxyProvider.tsx +++ b/packages/scenes/src/querying/DataProviderSharer.ts @@ -7,12 +7,12 @@ import { } from '@grafana/scenes'; import { Observable } from 'rxjs'; -export interface DataProxyProviderState extends SceneDataState { +export interface DataProviderSharerState extends SceneDataState { source: SceneObjectRef; } -export class DataProxyProvider extends SceneObjectBase implements SceneDataProvider { - public constructor(state: DataProxyProviderState) { +export class DataProviderSharer extends SceneObjectBase implements SceneDataProvider { + public constructor(state: DataProviderSharerState) { super({ source: state.source, data: state.source.resolve().state.data,