feat: remove x values from pickedShapes onbrushend event

elastic · Sep 9, 2021 · 7c131ed · 7c131ed
1 parent 51fce1b
commit 7c131ed
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 16 deletions.
diff --git a/packages/charts/src/chart_types/heatmap/renderer/dom/highlighter.tsx b/packages/charts/src/chart_types/heatmap/renderer/dom/highlighter.tsx
@@ -8,7 +8,6 @@
 
 import React, { FC } from 'react';
 
-import { PointerStates } from '../../../../state/chart_state';
 import { Dimensions } from '../../../../utils/dimensions';
 import { config } from '../../layout/config/config';
 import { Config } from '../../layout/types/config_types';
@@ -23,7 +22,6 @@ export interface HighlighterCellsProps {
   dragShape: DragShape | null;
   brushMask: Config['brushMask'];
   brushArea: Config['brushArea'];
-  pointer: PointerStates | null;
 }
 
 /**
@@ -38,14 +36,11 @@ export const HighlighterCellsComponent: FC<HighlighterCellsProps> = ({
   canvasDimension,
   brushArea,
   brushMask,
-  pointer,
 }) => {
   if (!initialized || dragShape === null) return null;
 
   const maskId = `echHighlighterMask__${chartId}`;
-  const pointerOnLeftAxis =
-    pointer && pointer.lastDrag ? pointer.lastDrag?.start.position.x < canvasDimension.left : false;
-  return !pointerOnLeftAxis ? (
+  return (
     <svg className="echHighlighter" width="100%" height="100%">
       <defs>
         <mask id={maskId}>
@@ -135,7 +130,7 @@ export const HighlighterCellsComponent: FC<HighlighterCellsProps> = ({
         )}
       </g>
     </svg>
-  ) : null;
+  );
 };
 
 /** @internal */
@@ -152,5 +147,4 @@ export const DEFAULT_PROPS: HighlighterCellsProps = {
   dragShape: { x: 0, y: 0, height: 0, width: 0 },
   brushArea: config.brushArea,
   brushMask: config.brushMask,
-  pointer: null,
 };
diff --git a/packages/charts/src/chart_types/heatmap/renderer/dom/highlighter_brush.tsx b/packages/charts/src/chart_types/heatmap/renderer/dom/highlighter_brush.tsx
@@ -17,10 +17,6 @@ import { getHeatmapConfigSelector } from '../../state/selectors/get_heatmap_conf
 import { getHighlightedAreaSelector } from '../../state/selectors/get_highlighted_area';
 import { DEFAULT_PROPS, HighlighterCellsComponent, HighlighterCellsProps } from './highlighter';
 
-function getCurrentPointerStates(state: GlobalChartState) {
-  return state.interactions.pointer;
-}
-
 const brushMapStateToProps = (state: GlobalChartState): HighlighterCellsProps => {
   if (getInternalIsInitializedSelector(state) !== InitStatus.Initialized) {
     return DEFAULT_PROPS;
@@ -37,7 +33,6 @@ const brushMapStateToProps = (state: GlobalChartState): HighlighterCellsProps =>
     dragShape = highlightedArea;
   }
   const { brushMask, brushArea } = getHeatmapConfigSelector(state);
-  const pointer = getCurrentPointerStates(state);
 
   return {
     chartId,
@@ -47,7 +42,6 @@ const brushMapStateToProps = (state: GlobalChartState): HighlighterCellsProps =>
     dragShape,
     brushMask,
     brushArea,
-    pointer,
   };
 };
 

diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/get_picked_cells.ts b/packages/charts/src/chart_types/heatmap/state/selectors/get_picked_cells.ts
@@ -9,16 +9,24 @@
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getLastDragSelector } from '../../../../state/selectors/get_last_drag';
 import { PickDragFunction } from '../../layout/types/viewmodel_types';
+import { computeChartDimensionsSelector } from './compute_chart_dimensions';
 import { geometries } from './geometries';
 
 /** @internal */
 export const getPickedCells = createCustomCachedSelector(
-  [geometries, getLastDragSelector],
-  (geoms, dragState): ReturnType<PickDragFunction> | null => {
+  [geometries, getLastDragSelector, computeChartDimensionsSelector],
+  (geoms, dragState, canvasDimensions): ReturnType<PickDragFunction> | null => {
     if (!dragState) {
       return null;
     }
 
+    // the pointer is not on the cells but over the axis and does not cross the axis
+    if (dragState.start.position.x < canvasDimensions.left && dragState.end.position.x < canvasDimensions.left) {
+      const fittedDragStateStart = { x: canvasDimensions.left, y: dragState.start.position.y };
+      const { y, cells } = geoms.pickDragArea([fittedDragStateStart, dragState.end.position]);
+      return { x: [], y, cells };
+    }
+
     return geoms.pickDragArea([dragState.start.position, dragState.end.position]);
   },
 );