DataProvideSharer: Add and export DataProviderSharer (#903)

grafana · Sep 20, 2024 · a825f42 · a825f42
1 parent d97d82e
commit a825f42
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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<DataTransformerConfig | CustomTransformerDefinition>;
@@ -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
@@ -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/...es/scenes-react/src/DataProxyProvider.tsx → ...scenes/src/querying/DataProviderSharer.ts b/...es/scenes-react/src/DataProxyProvider.tsx → ...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<SceneDataProvider>;
 }
 
-export class DataProxyProvider extends SceneObjectBase<DataProxyProviderState> implements SceneDataProvider {
-  public constructor(state: DataProxyProviderState) {
+export class DataProviderSharer extends SceneObjectBase<DataProviderSharerState> implements SceneDataProvider {
+  public constructor(state: DataProviderSharerState) {
     super({
       source: state.source,
       data: state.source.resolve().state.data,