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-charts/src/charts/repeater/CoreRepeater.tsx

@@ -47,6 +47,7 @@ export const CoreRepeaterImpl: React.FC<ICoreRepeaterChartProps> = (props) => {
         pushData,
         onError,
         onColumnResized,
+        onDataView,
         config = {},
         drillableItems = [],
         onDrill = noop,
@@ -76,6 +77,7 @@ export const CoreRepeaterImpl: React.FC<ICoreRepeaterChartProps> = (props) => {
             onSuccess: (dataView) => {
                 onLoadingChanged?.({ isLoading: false });
                 pushData?.({ dataView: dataView.dataView });
+                onDataView?.(dataView);
             },
             onError: (error) => {
                 onLoadingChanged?.({ isLoading: false });

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-ext/src/internal/components/pluggableVisualizations/repeater/PluggableRepeater.tsx

@@ -372,6 +372,7 @@ export class PluggableRepeater extends AbstractPluggableVisualization {
                 onLoadingChanged={this.onLoadingChanged}
                 pushData={this.handlePushData}
                 onError={this.onError}
+                onDataView={this.onDataView}
                 onColumnResized={this.onColumnResized}
                 intl={this.intl}
             />,