fix(heatmap): filter out tooltip picked shapes in x-axis area (#1351)

Closes #1215

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

@@ -10,17 +10,21 @@ import { GlobalChartState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { Cell, TextBox } from '../../layout/types/viewmodel_types';
 import { geometries } from './geometries';
+import { getGridHeightParamsSelector } from './get_grid_full_height';
 
 function getCurrentPointerPosition(state: GlobalChartState) {
   return state.interactions.pointer.current.position;
 }
 
 /** @internal */
 export const getPickedShapes = createCustomCachedSelector(
-  [geometries, getCurrentPointerPosition],
-  (geoms, pointerPosition): Cell[] | TextBox => {
+  [geometries, getCurrentPointerPosition, getGridHeightParamsSelector],
+  (geoms, pointerPosition, gridParams): Cell[] | TextBox => {
     const picker = geoms.pickQuads;
     const { x, y } = pointerPosition;
-    return picker(x, y);
+    const pickedData = picker(x, y);
+    return Array.isArray(pickedData)
+      ? pickedData.filter(({ y }) => y < gridParams.gridCellHeight * gridParams.pageSize)
+      : pickedData;
   },
 );

storybook/stories/heatmap/2_categorical.story.tsx

@@ -7,6 +7,7 @@
  */
 
 import { action } from '@storybook/addon-actions';
+import { boolean } from '@storybook/addon-knobs';
 import React from 'react';
 
 import { Chart, Heatmap, Settings } from '@elastic/charts';
@@ -15,7 +16,8 @@ import { BABYNAME_DATA } from '@elastic/charts/src/utils/data_samples/babynames'
 import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
-  const data = BABYNAME_DATA.filter(([year]) => year > 1950 && year < 1960);
+  const filterData = boolean('filter dataset', true);
+  const data = filterData ? BABYNAME_DATA.filter(([year]) => year > 1950 && year < 1960) : BABYNAME_DATA;
 
   return (
     <Chart>