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

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>

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>

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),

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
     //

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}

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,

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}

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,
         };
     };

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;
         }

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;
 

libs/sdk-ui/src/base/index.tsx

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

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));

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
  */

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
      */