feat: add onDataView callback to visualization components

This optional callback can be used to get notified whenever the
visualization loads new data. This can be used to display some extra
UI elements based on the data being empty, partially empty, etc.

For now added as alpha, pending some feedback from internal use.

JIRA: CQ-1287
risk: low

Author: no23reason

Diff for: libs/sdk-ui-ext/src/insightView/InsightRenderer.tsx

@@ -181,11 +181,10 @@ class InsightRendererCore extends React.PureComponent<IInsightRendererProps & Wr
                     this.props.onError?.(error);
                     this.props.onLoadingChanged?.({ isLoading: false });
                 },
-                onLoadingChanged: ({ isLoading }) => {
-                    this.props.onLoadingChanged?.({ isLoading });
-                },
+                onLoadingChanged: this.props.onLoadingChanged,
                 pushData: this.props.pushData,
                 onDrill: this.props.onDrill,
+                onDataView: this.props.onDataView,
                 onExportReady: this.onExportReadyDecorator,
                 afterRender: this.props.afterRender,
             },
@@ -370,6 +369,7 @@ export const InsightRenderer: React.FC<IInsightRendererProps> = (props) => {
         onError: onErrorCallBack,
         onExportReady: onExportReadyCallback,
         onLoadingChanged: onLoadingChangedCallback,
+        onDataView: onDataViewCallback,
         ...resProps
     } = props;
 
@@ -378,6 +378,7 @@ export const InsightRenderer: React.FC<IInsightRendererProps> = (props) => {
     const onError = useUpdatableCallback(onErrorCallBack);
     const onExportReady = useUpdatableCallback(onExportReadyCallback);
     const onLoadingChanged = useUpdatableCallback(onLoadingChangedCallback);
+    const onDataView = useUpdatableCallback(onDataViewCallback);
 
     return (
         <IntlWrapper locale={props.locale}>
@@ -387,6 +388,7 @@ export const InsightRenderer: React.FC<IInsightRendererProps> = (props) => {
                 onError={onError}
                 onExportReady={onExportReady}
                 onLoadingChanged={onLoadingChanged}
+                onDataView={onDataView}
                 {...resProps}
             />
         </IntlWrapper>

Diff for: libs/sdk-ui-ext/src/insightView/InsightView.tsx

@@ -60,6 +60,7 @@ const InsightViewCore: React.FC<IInsightViewProps & WrappedComponentProps> = (pr
         onLoadingChanged,
         onExportReady,
         onError,
+        onDataView,
         onInsightLoaded,
         pushData,
 
@@ -248,6 +249,7 @@ const InsightViewCore: React.FC<IInsightViewProps & WrappedComponentProps> = (pr
                     onError={handleError}
                     onExportReady={onExportReady}
                     onLoadingChanged={handleLoadingChanged}
+                    onDataView={onDataView}
                     pushData={pushData}
                 />
             </div>

Diff for: libs/sdk-ui-ext/src/internal/components/BaseVisualization.tsx

@@ -272,7 +272,7 @@ export class BaseVisualization extends React.PureComponent<IBaseVisualizationPro
             console.error(`Error: unsupported visualization type - ${visUri}`);
         }
 
-        let visualizationId;
+        let visualizationId: string;
         if (isInsight(insight)) {
             visualizationId = insight.insight.identifier;
         } else {
@@ -304,6 +304,7 @@ export class BaseVisualization extends React.PureComponent<IBaseVisualizationPro
                     onExportReady: props.onExportReady,
                     pushData: props.pushData,
                     onDrill: props.onDrill,
+                    onDataView: props.onDataView,
                 },
                 featureFlags,
                 visualizationProperties: insightProperties(props.insight),

Diff for: libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/AbstractPluggableVisualization.tsx

@@ -35,6 +35,7 @@ import {
     UnexpectedSdkError,
     isForecastNotReceived,
     isClusteringNotReceived,
+    DataViewFacade,
 } from "@gooddata/sdk-ui";
 import { IntlShape } from "react-intl";
 import { createInternalIntl } from "../../utils/internalIntlProvider.js";
@@ -292,6 +293,10 @@ export abstract class AbstractPluggableVisualization implements IVisualization {
         return this.callbacks.onDrill ? this.callbacks.onDrill(event) : true;
     };
 
+    protected onDataView = (dataView: DataViewFacade): void => {
+        this.callbacks.onDataView?.(dataView);
+    };
+
     //
     // Templated implementation of addNewDerivedBucketItems contract
     //

Diff for: libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/baseChart/PluggableBaseChart.tsx

@@ -289,6 +289,7 @@ export class PluggableBaseChart extends AbstractPluggableVisualization {
                 onExportReady={this.onExportReady}
                 onLoadingChanged={this.onLoadingChanged}
                 pushData={this.handlePushData}
+                onDataView={this.onDataView}
                 height={resultingHeight}
                 type={this.type}
                 locale={locale}

Diff for: libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/geoChart/PluggableGeoPushpinChart.tsx

@@ -308,6 +308,7 @@ export class PluggableGeoPushpinChart extends PluggableBaseChart {
             onError: this.onError,
             onExportReady: this.onExportReady,
             onLoadingChanged: this.onLoadingChanged,
+            onDataView: this.onDataView,
             LoadingComponent: null,
             ErrorComponent: null,
             theme,

Diff for: libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/headline/PluggableHeadline.tsx

@@ -242,6 +242,7 @@ export class PluggableHeadline extends AbstractPluggableVisualization {
                 config={headlineConfig}
                 afterRender={this.afterRender}
                 onLoadingChanged={this.onLoadingChanged}
+                onDataView={this.onDataView}
                 pushData={this.pushData}
                 onError={this.onError}
                 LoadingComponent={null}

Diff for: libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/pivotTable/PluggablePivotTable.tsx

@@ -404,6 +404,7 @@ export class PluggablePivotTable extends AbstractPluggableVisualization {
             pushData: this.handlePushData,
             onError: this.onError,
             onExportReady: this.onExportReady,
+            onDataView: this.onDataView,
             onColumnResized,
         };
     };

Diff for: libs/sdk-ui-pivot/src/CorePivotTable.tsx

@@ -188,6 +188,7 @@ export class CorePivotTableAgImpl extends React.Component<ICorePivotTableProps,
         | "onExportReady"
         | "onLoadingChanged"
         | "onError"
+        | "onDataView"
         | "onDrill"
         | "ErrorComponent"
         | "LoadingComponent"
@@ -202,6 +203,7 @@ export class CorePivotTableAgImpl extends React.Component<ICorePivotTableProps,
         onExportReady: noop,
         onLoadingChanged: noop,
         onError: noop,
+        onDataView: noop,
         onDrill: () => true,
         ErrorComponent,
         LoadingComponent,
@@ -739,7 +741,9 @@ export class CorePivotTableAgImpl extends React.Component<ICorePivotTableProps,
         this.internal.isAltKeyPressed = event.altKey;
     };
 
-    private onPageLoaded = (_dv: DataViewFacade, newResult: boolean): void => {
+    private onPageLoaded = (dv: DataViewFacade, newResult: boolean): void => {
+        this.props.onDataView?.(dv);
+
         if (!this.internal.table) {
             return;
         }

Diff for: libs/sdk-ui/api/sdk-ui.api.md

@@ -1393,6 +1393,8 @@ PlaceholderValue<T> | undefined,
 export interface IVisualizationCallbacks {
     // @internal (undocumented)
     afterRender?: () => void;
+    // @alpha
+    onDataView?: OnDataView;
     onDrill?: OnFiredDrillEvent;
     onError?: OnError;
     onExportReady?: OnExportReady;
@@ -1520,6 +1522,9 @@ export function objMatch(obj: any): IHeaderPredicate;
 // @public
 export function objRefMatch(objRef: ObjRef): IHeaderPredicate;
 
+// @alpha (undocumented)
+export type OnDataView = (dataView: DataViewFacade) => void;
+
 // @public (undocumented)
 export type OnError = (error: GoodDataSdkError) => void;
 

Diff for: libs/sdk-ui/src/base/index.tsx

@@ -280,6 +280,7 @@ export type {
     OnError,
     OnExportReady,
     OnLoadingChanged,
+    OnDataView,
     ILoadingState,
     IExportFunction,
     IExtendedExportConfig,

Diff for: libs/sdk-ui/src/base/react/legacy/withEntireDataView.tsx

@@ -119,6 +119,7 @@ export function withEntireDataView<T extends IDataVisualizationProps>(
             this.onLoadingChanged = this.onLoadingChanged.bind(this);
             this.onDataTooLarge = this.onDataTooLarge.bind(this);
             this.onNegativeValues = this.onNegativeValues.bind(this);
+            this.onDataView = this.onDataView.bind(this);
             this.abortController = new AbortController();
         }
 
@@ -169,6 +170,7 @@ export function withEntireDataView<T extends IDataVisualizationProps>(
         public componentWillUnmount() {
             this.hasUnmounted = true;
             this.onLoadingChanged = noop;
+            this.onDataView = noop;
             this.onError = noop;
             this.refreshAbortController();
         }
@@ -196,6 +198,12 @@ export function withEntireDataView<T extends IDataVisualizationProps>(
             this.setState(state);
         }
 
+        private onDataView(dataView: IDataView) {
+            const { onDataView } = this.props;
+
+            onDataView?.(DataViewFacade.for(dataView));
+        }
+
         private onError(error: GoodDataSdkError) {
             const { onExportReady } = this.props;
 
@@ -301,6 +309,7 @@ export function withEntireDataView<T extends IDataVisualizationProps>(
 
                 this.setState({ dataView, error: null, executionResult });
                 this.onLoadingChanged({ isLoading: false });
+                this.onDataView(dataView);
 
                 if (onExportReady) {
                     onExportReady(createExportFunction(dataView.result, exportTitle));

Diff for: libs/sdk-ui/src/base/vis/Events.ts

@@ -1,4 +1,4 @@
-// (C) 2007-2023 GoodData Corporation
+// (C) 2007-2025 GoodData Corporation
 import { IDataView, IExportConfig, IExportResult } from "@gooddata/sdk-backend-spi";
 import {
     IColor,
@@ -10,6 +10,7 @@ import {
 } from "@gooddata/sdk-model";
 import { GoodDataSdkError } from "../errors/GoodDataSdkError.js";
 import { IMappingHeader } from "../headerMatching/MappingHeader.js";
+import { DataViewFacade } from "../results/facade.js";
 
 /**
  * @public
@@ -28,6 +29,11 @@ export type OnError = (error: GoodDataSdkError) => void;
  */
 export type OnLoadingChanged = (loadingState: ILoadingState) => void;
 
+/**
+ * @alpha
+ */
+export type OnDataView = (dataView: DataViewFacade) => void;
+
 /**
  * @public
  */

Diff for: libs/sdk-ui/src/base/vis/VisualizationProps.ts

@@ -4,7 +4,7 @@ import { ExplicitDrill, OnFiredDrillEvent } from "./DrillEvents.js";
 import React from "react";
 import { IErrorProps } from "../react/ErrorComponent.js";
 import { ILoadingProps } from "../react/LoadingComponent.js";
-import { IPushData, OnError, OnExportReady, OnLoadingChanged } from "./Events.js";
+import { IPushData, OnDataView, OnError, OnExportReady, OnLoadingChanged } from "./Events.js";
 import { IClusteringConfig, IForecastConfig, IPreparedExecution } from "@gooddata/sdk-backend-spi";
 
 /**
@@ -80,6 +80,13 @@ export interface IVisualizationCallbacks {
      */
     onDrill?: OnFiredDrillEvent;
 
+    /**
+     * Called when the visualization loads a DataView, i.e. it receives data from the backend.
+     *
+     * @alpha
+     */
+    onDataView?: OnDataView;
+
     /**
      * @internal
      */