[Explore vis] Add empty data validation to prevent visualization errors (#10801)

- Add data validation check before visualization processing
- Only process visualizations when transformedData has content
- Maintain error throwing for invalid visualization rules
- Add comprehensive test coverage for empty data scenarios
- Improve robustness of explore embeddable component

Signed-off-by: Ansh Mohta <[email protected]>
Signed-off-by: ansh mohta <[email protected]>
Co-authored-by: ansh mohta <[email protected]>
Co-authored-by: Yulong Ruan <[email protected]>

Author: 3 people

src/plugins/explore/public/embeddable/explore_embeddable.test.tsx

@@ -489,4 +489,28 @@ describe('ExploreEmbeddable', () => {
       'Cannot load saved visualization "Test Explore" with id test-id'
     );
   });
+
+  test('fetch handles empty data by skipping visualization processing', async () => {
+    const mockNormalizeResultRows = await import(
+      '../components/visualizations/utils/normalize_result_rows'
+    );
+    jest.spyOn(mockNormalizeResultRows, 'normalizeResultRows').mockReturnValueOnce({
+      transformedData: [],
+      numericalColumns: [],
+      categoricalColumns: [],
+      dateColumns: [],
+    });
+
+    mockSavedExplore.visualization = JSON.stringify({
+      chartType: 'line',
+      axesMapping: { x: 'field1', y: 'field2' },
+    });
+    mockSavedExplore.uiState = JSON.stringify({ activeTab: 'visualization' });
+
+    // @ts-ignore
+    await embeddable.fetch();
+
+    expect(embeddable.getOutput().error).toBeUndefined();
+    expect(embeddable.getOutput().loading).toBe(false);
+  });
 });

src/plugins/explore/public/embeddable/explore_embeddable.tsx

@@ -376,40 +376,44 @@ export class ExploreEmbeddable
         ...(categoricalColumns ?? []),
         ...(dateColumns ?? []),
       ];
-      if (selectedChartType === 'table') {
-        this.searchProps.tableData = {
-          columns: allColumns,
-          rows: visualizationData.transformedData ?? [],
-        };
-      } else {
-        const axesMapping = convertStringsToMappings(visualization.axesMapping, allColumns);
-        const matchedRule = visualizationRegistry.findRuleByAxesMapping(
-          visualization.axesMapping,
-          allColumns
-        );
-        if (!matchedRule || !matchedRule.toSpec) {
-          throw new Error(
-            `Cannot load saved visualization "${this.panelTitle}" with id ${this.savedExplore.id}`
+
+      // Check if there's data to visualize
+      if (visualizationData.transformedData && visualizationData.transformedData.length > 0) {
+        if (selectedChartType === 'table') {
+          this.searchProps.tableData = {
+            columns: allColumns,
+            rows: visualizationData.transformedData ?? [],
+          };
+        } else {
+          const axesMapping = convertStringsToMappings(visualization.axesMapping, allColumns);
+          const matchedRule = visualizationRegistry.findRuleByAxesMapping(
+            visualization.axesMapping,
+            allColumns
+          );
+          if (!matchedRule || !matchedRule.toSpec) {
+            throw new Error(
+              `Cannot load saved visualization "${this.panelTitle}" with id ${this.savedExplore.id}`
+            );
+          }
+          const searchContext = {
+            query: this.input.query,
+            filters: this.input.filters,
+            timeRange: this.input.timeRange,
+          };
+          this.searchProps.searchContext = searchContext;
+          const styleOptions = visualization.params;
+          const spec = matchedRule.toSpec(
+            visualizationData.transformedData,
+            numericalColumns,
+            categoricalColumns,
+            dateColumns,
+            styleOptions,
+            selectedChartType,
+            axesMapping
           );
+          const exp = toExpression(searchContext, spec);
+          this.searchProps.expression = exp;
         }
-        const searchContext = {
-          query: this.input.query,
-          filters: this.input.filters,
-          timeRange: this.input.timeRange,
-        };
-        this.searchProps.searchContext = searchContext;
-        const styleOptions = visualization.params;
-        const spec = matchedRule.toSpec(
-          visualizationData.transformedData,
-          numericalColumns,
-          categoricalColumns,
-          dateColumns,
-          styleOptions,
-          selectedChartType,
-          axesMapping
-        );
-        const exp = toExpression(searchContext, spec);
-        this.searchProps.expression = exp;
       }
     }
     this.updateOutput({ loading: false, error: undefined });