fix(heatmap): limit brush tool (#1270)

Closes #1216

integration/tests/heatmap_stories.test.ts

@@ -0,0 +1,19 @@
+/*
+ * 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 { common } from '../page_objects';
+
+describe('Heatmap stories', () => {
+  it('should not have brush tool extend into axes', async () => {
+    await common.expectChartWithDragAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/heatmap-alpha--basic',
+      { left: 100, top: 100 },
+      { left: 300, top: 300 },
+    );
+  });
+});

packages/charts/src/chart_types/heatmap/renderer/dom/highlighter.tsx

@@ -40,11 +40,11 @@ export const HighlighterCellsComponent: FC<HighlighterCellsProps> = ({
   if (!initialized || dragShape === null) return null;
 
   const maskId = `echHighlighterMask__${chartId}`;
-
   return (
     <svg className="echHighlighter" width="100%" height="100%">
       <defs>
         <mask id={maskId}>
+          {/* the entire chart */}
           {brushMask.visible && (
             <rect
               x={0}
@@ -56,13 +56,15 @@ export const HighlighterCellsComponent: FC<HighlighterCellsProps> = ({
           )}
           {brushArea.visible && (
             <>
+              {/* the rectangle box */}
               <rect
                 x={dragShape.x}
                 y={dragShape.y}
                 width={dragShape.width}
                 height={dragShape.height}
                 fill={brushArea.fill}
               />
+              {/* the left axis labels */}
               <rect
                 x={0}
                 y={dragShape.y}
@@ -75,6 +77,7 @@ export const HighlighterCellsComponent: FC<HighlighterCellsProps> = ({
         </mask>
       </defs>
       <g>
+        {/* the entire chart */}
         {brushMask.visible && (
           <rect
             x={0}
@@ -87,6 +90,7 @@ export const HighlighterCellsComponent: FC<HighlighterCellsProps> = ({
         )}
         {brushArea.visible && (
           <>
+            {/* top line for the box */}
             <line
               x1={dragShape.x}
               y1={dragShape.y}
@@ -95,6 +99,7 @@ export const HighlighterCellsComponent: FC<HighlighterCellsProps> = ({
               stroke={brushArea.stroke}
               strokeWidth={brushArea.strokeWidth}
             />
+            {/* bottom line */}
             <line
               x1={dragShape.x}
               y1={dragShape.y + dragShape.height}
@@ -103,6 +108,7 @@ export const HighlighterCellsComponent: FC<HighlighterCellsProps> = ({
               stroke={brushArea.stroke}
               strokeWidth={brushArea.strokeWidth}
             />
+            {/* left line */}
             <line
               x1={dragShape.x}
               y1={dragShape.y}
@@ -111,6 +117,7 @@ export const HighlighterCellsComponent: FC<HighlighterCellsProps> = ({
               stroke={brushArea.stroke}
               strokeWidth={brushArea.strokeWidth}
             />
+            {/* right line */}
             <line
               x1={dragShape.x + dragShape.width}
               y1={dragShape.y}

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

@@ -9,10 +9,12 @@
 import { BrushAxis } from '../../../../specs';
 import { GlobalChartState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
-import { getChartRotationSelector } from '../../../../state/selectors/get_chart_rotation';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
+import { clamp } from '../../../../utils/common';
 import { Dimensions } from '../../../../utils/dimensions';
 import { computeChartDimensionsSelector } from './compute_chart_dimensions';
+import { getBrushedHighlightedShapesSelector } from './get_brushed_highlighted_shapes';
+import { getGridHeightParamsSelector } from './get_grid_full_height';
 
 const getMouseDownPosition = (state: GlobalChartState) => state.interactions.pointer.down;
 const getIsDragging = (state: GlobalChartState) => state.interactions.pointer.dragging;
@@ -24,22 +26,37 @@ export const getBrushAreaSelector = createCustomCachedSelector(
     getIsDragging,
     getMouseDownPosition,
     getCurrentPointerPosition,
-    getChartRotationSelector,
     getSettingsSpecSelector,
     computeChartDimensionsSelector,
+    getBrushedHighlightedShapesSelector,
+    getGridHeightParamsSelector,
   ],
-  (isDragging, mouseDownPosition, end, chartRotation, { brushAxis }, chartDimensions): Dimensions | null => {
-    if (!isDragging || !mouseDownPosition) {
+  (isDragging, mouseDownPosition, end, { brushAxis }, chartDimensions, dragShape, gridParams): Dimensions | null => {
+    if (!isDragging || !mouseDownPosition || !dragShape) {
       return null;
     }
     const start = {
       x: mouseDownPosition.position.x - chartDimensions.left,
       y: mouseDownPosition.position.y,
     };
+
+    const clampedEndY = clamp(end.y, 0, gridParams.gridCellHeight * gridParams.pageSize);
+
     switch (brushAxis) {
       case BrushAxis.Both:
+        return {
+          top: start.y,
+          left: start.x,
+          width: end.x - start.x - chartDimensions.left,
+          height: clampedEndY - start.y,
+        };
       default:
-        return { top: start.y, left: start.x, width: end.x - start.x - chartDimensions.left, height: end.y - start.y };
+        return {
+          top: start.y,
+          left: start.x,
+          width: end.x - start.x - chartDimensions.left,
+          height: clampedEndY - start.y,
+        };
     }
   },
 );

packages/charts/src/components/brush/brush.tsx

@@ -78,6 +78,28 @@ class BrushToolComponent extends React.Component<Props> {
     }
   }
 
+  render() {
+    const { initialized, isBrushAvailable, isBrushing, projectionContainer, zIndex } = this.props;
+    if (!initialized || !isBrushAvailable || !isBrushing) {
+      this.ctx = null;
+      return null;
+    }
+    const { width, height } = projectionContainer;
+    return (
+      <canvas
+        ref={this.canvasRef}
+        className="echBrushTool"
+        width={width * this.devicePixelRatio}
+        height={height * this.devicePixelRatio}
+        style={{
+          width,
+          height,
+          zIndex,
+        }}
+      />
+    );
+  }
+
   private drawCanvas = () => {
     const { brushArea, mainProjectionArea, fillColor } = this.props;
     const { ctx } = this;
@@ -113,28 +135,6 @@ class BrushToolComponent extends React.Component<Props> {
     const canvas = this.canvasRef.current;
     this.ctx = canvas && canvas.getContext('2d');
   }
-
-  render() {
-    const { initialized, isBrushAvailable, isBrushing, projectionContainer, zIndex } = this.props;
-    if (!initialized || !isBrushAvailable || !isBrushing) {
-      this.ctx = null;
-      return null;
-    }
-    const { width, height } = projectionContainer;
-    return (
-      <canvas
-        ref={this.canvasRef}
-        className="echBrushTool"
-        width={width * this.devicePixelRatio}
-        height={height * this.devicePixelRatio}
-        style={{
-          width,
-          height,
-          zIndex,
-        }}
-      />
-    );
-  }
 }
 
 const mapStateToProps = (state: GlobalChartState): StateProps => {

storybook/stories/heatmap/1_basic.tsx

@@ -41,6 +41,9 @@ export const Example = () => {
 
   const config: RecursivePartial<Config> = useMemo(
     () => ({
+      brushTool: {
+        visible: true,
+      },
       grid: {
         cellHeight: {
           min: 20,