From 174047d3cb26dba615397013735bff3d33185789 Mon Sep 17 00:00:00 2001
From: Rachel Shen <rachelwshen@gmail.com>
Date: Fri, 3 Sep 2021 11:19:01 -0600
Subject: [PATCH] fix(heatmap): filter out tooltip picked shapes in x-axis area
 (#1351)

Closes #1215
---
 .../heatmap/state/selectors/picked_shapes.ts           | 10 +++++++---
 storybook/stories/heatmap/2_categorical.story.tsx      |  4 +++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/picked_shapes.ts b/packages/charts/src/chart_types/heatmap/state/selectors/picked_shapes.ts
index 3fdbb45aa6..cc64cf3d9e 100644
--- a/packages/charts/src/chart_types/heatmap/state/selectors/picked_shapes.ts
+++ b/packages/charts/src/chart_types/heatmap/state/selectors/picked_shapes.ts
@@ -10,6 +10,7 @@ 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;
@@ -17,10 +18,13 @@ function getCurrentPointerPosition(state: GlobalChartState) {
 
 /** @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;
   },
 );
diff --git a/storybook/stories/heatmap/2_categorical.story.tsx b/storybook/stories/heatmap/2_categorical.story.tsx
index ed93832e45..9b8bc4170c 100644
--- a/storybook/stories/heatmap/2_categorical.story.tsx
+++ b/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>