Fix empty state

packages/charts/src/chart_types/heatmap/state/chart_state.tsx

@@ -27,6 +27,7 @@ import { getTooltipAnchorSelector } from './selectors/get_tooltip_anchor';
 import { getSpecOrNull } from './selectors/heatmap_spec';
 import { isBrushAvailableSelector } from './selectors/is_brush_available';
 import { isBrushingSelector } from './selectors/is_brushing';
+import { isEmptySelector } from './selectors/is_empty';
 import { isTooltipVisibleSelector } from './selectors/is_tooltip_visible';
 import { createOnBrushEndCaller } from './selectors/on_brush_end_caller';
 import { createOnElementClickCaller } from './selectors/on_element_click_caller';
@@ -60,8 +61,8 @@ export class HeatmapState implements InternalChartState {
     return isBrushingSelector(globalState);
   }
 
-  isChartEmpty() {
-    return false;
+  isChartEmpty(globalState: GlobalChartState) {
+    return isEmptySelector(globalState);
   }
 
   getLegendItems(globalState: GlobalChartState) {

packages/charts/src/chart_types/heatmap/state/selectors/compute_legend.ts

@@ -11,13 +11,14 @@ import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getDeselectedSeriesSelector } from '../../../../state/selectors/get_deselected_data_series';
 import { getColorScale } from './get_color_scale';
 import { getSpecOrNull } from './heatmap_spec';
+import { isEmptySelector } from './is_empty';
 
 const EMPTY_LEGEND: LegendItem[] = [];
 /** @internal */
 export const computeLegendSelector = createCustomCachedSelector(
-  [getSpecOrNull, getColorScale, getDeselectedSeriesSelector],
-  (spec, { bands }, deselectedDataSeries): LegendItem[] => {
-    if (spec === null) {
+  [getSpecOrNull, getColorScale, getDeselectedSeriesSelector, isEmptySelector],
+  (spec, { bands }, deselectedDataSeries, empty): LegendItem[] => {
+    if (spec === null || empty) {
       return EMPTY_LEGEND;
     }
 

packages/charts/src/chart_types/heatmap/state/selectors/geometries.ts

@@ -15,6 +15,7 @@ import { getColorScale } from './get_color_scale';
 import { getGridHeightParamsSelector } from './get_grid_full_height';
 import { getHeatmapSpecSelector } from './get_heatmap_spec';
 import { getHeatmapTableSelector } from './get_heatmap_table';
+import { isEmptySelector } from './is_empty';
 import { render } from './scenegraph';
 
 const getDeselectedSeriesSelector = (state: GlobalChartState) => state.interactions.deselectedDataSeries;
@@ -29,6 +30,7 @@ export const getHeatmapGeometries = createCustomCachedSelector(
     getDeselectedSeriesSelector,
     getGridHeightParamsSelector,
     getChartThemeSelector,
+    isEmptySelector,
   ],
   (
     heatmapSpec,
@@ -38,6 +40,7 @@ export const getHeatmapGeometries = createCustomCachedSelector(
     deselectedSeries,
     gridHeightParams,
     theme,
+    empty,
   ): ShapeViewModel => {
     // instead of using the specId, each legend item is associated with an unique band label
     const disabledBandLabels = new Set(
@@ -52,7 +55,7 @@ export const getHeatmapGeometries = createCustomCachedSelector(
       })
       .map(({ start, end }) => [start, end]);
 
-    return heatmapSpec
+    return heatmapSpec && !empty
       ? render(heatmapSpec, chartDimensions, heatmapTable, colorScale, bandsToHide, gridHeightParams, theme)
       : nullShapeViewModel();
   },

packages/charts/src/chart_types/heatmap/state/selectors/is_empty.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { createCustomCachedSelector } from '../../../../state/create_selector';
+import { getHeatmapTableSelector } from './get_heatmap_table';
+
+/** @internal */
+export const isEmptySelector = createCustomCachedSelector([getHeatmapTableSelector], (heatmap): boolean => {
+  return heatmap.table.length === 0;
+});