SharedQueryProvider: Fixes issue when source panel query runner is waiting for container width (#78199)

SharedQueryProvider: Fixes issue when source panel is not active and is waiting for container width

public/app/features/dashboard-scene/scene/ShareQueryDataProvider.ts

@@ -22,6 +22,8 @@ export class ShareQueryDataProvider extends SceneObjectBase<ShareQueryDataProvid
   private _querySub: Unsubscribable | undefined;
   private _sourceDataDeactivationHandler?: SceneDeactivationHandler;
   private _results = new ReplaySubject<SceneDataProviderResult>();
+  private _sourceProvider?: SceneDataProvider;
+  private _passContainerWidth = false;
 
   constructor(state: ShareQueryDataProviderState) {
     super(state);
@@ -66,26 +68,30 @@ export class ShareQueryDataProvider extends SceneObjectBase<ShareQueryDataProvid
       return;
     }
 
-    let sourceData = source.state.$data;
-    if (!sourceData) {
+    this._sourceProvider = source.state.$data;
+    if (!this._sourceProvider) {
       console.log('No source data found for shared dashboard query');
       return;
     }
 
+    // If the source is not active we need to pass the container width
+    if (!this._sourceProvider.isActive) {
+      this._passContainerWidth = true;
+    }
+
     // This will activate if sourceData is part of hidden panel
     // Also make sure the sourceData is not deactivated if hidden later
-    this._sourceDataDeactivationHandler = sourceData.activate();
+    this._sourceDataDeactivationHandler = this._sourceProvider.activate();
 
-    if (sourceData instanceof SceneDataTransformer) {
-      if (!query.withTransforms) {
-        if (!sourceData.state.$data) {
+    // If source is a data transformer we might need to get the inner query runner instead depending on withTransforms option
+    if (this._sourceProvider instanceof SceneDataTransformer && !query.withTransforms) {
+      if (!this._sourceProvider.state.$data) {
         throw new Error('No source inner query runner found in data transformer');
       }
-        sourceData = sourceData.state.$data;
-      }
+      this._sourceProvider = this._sourceProvider.state.$data;
     }
 
-    this._querySub = sourceData.subscribeToState((state) => {
+    this._querySub = this._sourceProvider.subscribeToState((state) => {
       this._results.next({
         origin: this,
         data: state.data || {
@@ -99,7 +105,20 @@ export class ShareQueryDataProvider extends SceneObjectBase<ShareQueryDataProvid
     });
 
     // Copy the initial state
-    this.setState({ data: sourceData.state.data });
+    this.setState({ data: this._sourceProvider.state.data });
+  }
+
+  public setContainerWidth(width: number) {
+    if (this._passContainerWidth && this._sourceProvider) {
+      this._sourceProvider.setContainerWidth?.(width);
+    }
+  }
+
+  public isDataReadyToDisplay() {
+    if (this._sourceProvider && this._sourceProvider.isDataReadyToDisplay) {
+      return this._sourceProvider.isDataReadyToDisplay();
+    }
+    return false;
   }
 }