fix: decuple brush cursor from chart rendering

src/chart_types/xy_chart/store/chart_state.test.ts

@@ -908,21 +908,63 @@ describe('Chart Store', () => {
       store.cursorPosition.x = -1;
       store.cursorPosition.y = -1;
       store.onBrushEndListener = brushEndListener;
-      expect(store.isCrosshairCursorVisible.get()).toBe(false);
+      expect(store.chartCursor.get()).toBe('default');
     });
 
     test('when cursor is within chart bounds and brush enabled', () => {
       store.cursorPosition.x = 10;
       store.cursorPosition.y = 10;
       store.onBrushEndListener = brushEndListener;
-      expect(store.isCrosshairCursorVisible.get()).toBe(true);
+      expect(store.chartCursor.get()).toBe('crosshair');
     });
 
     test('when cursor is within chart bounds and brush disabled', () => {
       store.cursorPosition.x = 10;
       store.cursorPosition.y = 10;
       store.onBrushEndListener = undefined;
-      expect(store.isCrosshairCursorVisible.get()).toBe(false);
+      expect(store.chartCursor.get()).toBe('default');
+    });
+    test('when cursor is within chart bounds and brush enabled but over one geom', () => {
+      store.cursorPosition.x = 10;
+      store.cursorPosition.y = 10;
+      store.onBrushEndListener = brushEndListener;
+      const geom1: IndexedGeometry = {
+        color: 'red',
+        geometryId: {
+          specId: getSpecId('specId1'),
+          seriesKey: [2],
+        },
+        value: {
+          x: 0,
+          y: 1,
+          accessor: 'y1',
+        },
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+        seriesStyle: {
+          rect: {
+            opacity: 1,
+          },
+          rectBorder: {
+            strokeWidth: 1,
+            visible: false,
+          },
+          displayValue: {
+            fill: 'black',
+            fontFamily: '',
+            fontSize: 2,
+            offsetX: 0,
+            offsetY: 0,
+            padding: 2,
+          },
+        },
+      };
+      store.highlightedGeometries.replace([geom1]);
+      expect(store.chartCursor.get()).toBe('crosshair');
+      store.onElementClickListener = jest.fn();
+      expect(store.chartCursor.get()).toBe('pointer');
     });
   });
   test('should set tooltip type to follow when single value x scale', () => {

src/chart_types/xy_chart/store/chart_state.ts

@@ -241,17 +241,16 @@ export class ChartStore {
     this.computeChart();
   });
 
-  /**
-   * determine if crosshair cursor should be visible based on cursor position and brush enablement
-   */
-  isCrosshairCursorVisible = computed(() => {
+  chartCursor = computed(() => {
     const { x: xPos, y: yPos } = this.cursorPosition;
 
     if (yPos < 0 || xPos < 0) {
-      return false;
+      return 'default';
     }
-
-    return this.isBrushEnabled();
+    if (this.highlightedGeometries.length > 0 && (this.onElementClickListener || this.onElementOverListener)) {
+      return 'pointer';
+    }
+    return this.isBrushEnabled() ? 'crosshair' : 'default';
   });
 
   /**
@@ -469,13 +468,6 @@ export class ChartStore {
     } else {
       this.tooltipData.replace(tooltipValues);
     }
-
-    // TODO move this into the renderer
-    if (oneHighlighted) {
-      document.body.style.cursor = 'pointer';
-    } else {
-      document.body.style.cursor = 'default';
-    }
   });
 
   legendItemTooltipValues = computed(() => {
@@ -552,8 +544,6 @@ export class ChartStore {
     this.highlightedGeometries.clear();
     this.tooltipData.clear();
 
-    document.body.style.cursor = 'default';
-
     if (this.onCursorUpdateListener && this.isActiveChart.get()) {
       this.onCursorUpdateListener();
     }

src/components/_container.scss

@@ -14,6 +14,21 @@
   }
 }
 
-.echChart--isBrushEnabled {
-  cursor: crosshair;
+.echChartCursorContainer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  box-sizing: border-box;
 }
+
+.echChartResizer {
+  z-index: -10000000;
+  position: absolute;
+  bottom: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  box-sizing: border-box;
+}

src/components/chart.tsx

@@ -10,7 +10,7 @@ import { Crosshair } from './crosshair';
 import { Highlighter } from './highlighter';
 import { Legend } from './legend/legend';
 import { LegendButton } from './legend/legend_button';
-import { ReactiveChart as ReactChart } from './react_canvas/reactive_chart';
+import { ChartContainer } from './react_canvas/chart_container';
 import { Tooltips } from './tooltips';
 import { CursorEvent } from '../specs/settings';
 import { ChartSize, getChartSize } from '../utils/chart_size';
@@ -75,8 +75,8 @@ export class Chart extends React.Component<ChartProps> {
             <ChartResizer />
             <Crosshair />
             {// TODO reenable when SVG rendered is aligned with canvas one
-            renderer === 'svg' && <ReactChart />}
-            {renderer === 'canvas' && <ReactChart />}
+            renderer === 'svg' && <ChartContainer />}
+            {renderer === 'canvas' && <ChartContainer />}
             <Tooltips />
             <AnnotationTooltip />
             <Legend legendId={this.legendId} />

src/components/chart_resizer.tsx

@@ -35,20 +35,7 @@ class Resizer extends React.Component<ResizerProps> {
   };
 
   render() {
-    return (
-      <div
-        ref={this.containerRef}
-        style={{
-          zIndex: -10000000,
-          position: 'absolute',
-          bottom: 0,
-          top: 0,
-          left: 0,
-          right: 0,
-          boxSizing: 'border-box',
-        }}
-      />
-    );
+    return <div ref={this.containerRef} className="echChartResizer" />;
   }
 
   private handleResize = (entries: ResizeObserverEntry[]) => {

src/components/react_canvas/chart_container.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { inject, observer } from 'mobx-react';
+import { ChartStore } from '../../chart_types/xy_chart/store/chart_state';
+import { ReactiveChart } from './reactive_chart';
+interface ReactiveChartProps {
+  chartStore?: ChartStore; // FIX until we find a better way on ts mobx
+}
+
+class ChartContainerComponent extends React.Component<ReactiveChartProps> {
+  static displayName = 'ChartContainer';
+
+  render() {
+    const { initialized } = this.props.chartStore!;
+    if (!initialized.get()) {
+      return null;
+    }
+    const { setCursorPosition } = this.props.chartStore!;
+    return (
+      <div
+        className="echChartCursorContainer"
+        style={{
+          cursor: this.props.chartStore!.chartCursor.get(),
+        }}
+        onMouseMove={({ nativeEvent: { offsetX, offsetY } }) => {
+          setCursorPosition(offsetX, offsetY);
+        }}
+        onMouseLeave={() => {
+          setCursorPosition(-1, -1);
+        }}
+        onMouseUp={() => {
+          if (this.props.chartStore!.isBrushing.get()) {
+            return;
+          }
+          this.props.chartStore!.handleChartClick();
+        }}
+      >
+        <ReactiveChart />
+      </div>
+    );
+  }
+}
+
+export const ChartContainer = inject('chartStore')(observer(ChartContainerComponent));

src/components/react_canvas/reactive_chart.tsx

@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import { inject, observer } from 'mobx-react';
 import React from 'react';
 import { Layer, Rect, Stage } from 'react-konva';
@@ -352,7 +351,6 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
       chartRotation,
       chartTransform,
       debug,
-      setCursorPosition,
       isChartEmpty,
       legendCollapsed,
       legendPosition,
@@ -390,74 +388,48 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
       };
     }
 
-    const className = classNames({
-      'echChart--isBrushEnabled': this.props.chartStore!.isCrosshairCursorVisible.get(),
-    });
-
     return (
-      <div
+      <Stage
+        width={parentDimensions.width}
+        height={parentDimensions.height}
         style={{
-          position: 'absolute',
-          top: 0,
-          bottom: 0,
-          right: 0,
-          left: 0,
-          boxSizing: 'border-box',
-        }}
-        onMouseMove={({ nativeEvent: { offsetX, offsetY } }) => {
-          setCursorPosition(offsetX, offsetY);
-        }}
-        onMouseLeave={() => {
-          setCursorPosition(-1, -1);
+          width: '100%',
+          height: '100%',
         }}
-        onMouseUp={() => {
-          if (this.props.chartStore!.isBrushing.get()) {
-            return;
-          }
-          this.props.chartStore!.handleChartClick();
-        }}
-        className={className}
+        {...brushProps}
       >
-        <Stage
-          width={parentDimensions.width}
-          height={parentDimensions.height}
-          style={{
-            width: '100%',
-            height: '100%',
-          }}
-          {...brushProps}
+        <Layer hitGraphEnabled={false} listening={false}>
+          {this.renderGrids()}
+        </Layer>
+        <Layer hitGraphEnabled={false} listening={false}>
+          {this.renderAxes()}
+        </Layer>
+
+        <Layer
+          x={chartDimensions.left + chartTransform.x}
+          y={chartDimensions.top + chartTransform.y}
+          rotation={chartRotation}
+          hitGraphEnabled={false}
+          listening={false}
         >
-          <Layer hitGraphEnabled={false} listening={false}>
-            {this.renderGrids()}
-          </Layer>
-          <Layer hitGraphEnabled={false} listening={false}>
-            {this.renderAxes()}
-          </Layer>
-
-          <Layer
-            x={chartDimensions.left + chartTransform.x}
-            y={chartDimensions.top + chartTransform.y}
-            rotation={chartRotation}
-            hitGraphEnabled={false}
-            listening={false}
-          >
-            {this.sortAndRenderElements()}
-          </Layer>
+          {this.sortAndRenderElements()}
+        </Layer>
 
+        {debug && (
           <Layer hitGraphEnabled={false} listening={false}>
-            {debug && this.renderDebugChartBorders()}
+            {this.renderDebugChartBorders()}
           </Layer>
-          {isBrushEnabled && (
-            <Layer hitGraphEnabled={false} listening={false}>
-              {this.renderBrushTool()}
-            </Layer>
-          )}
-
+        )}
+        {isBrushEnabled && (
           <Layer hitGraphEnabled={false} listening={false}>
-            {this.renderBarValues()}
+            {this.renderBrushTool()}
           </Layer>
-        </Stage>
-      </div>
+        )}
+
+        <Layer hitGraphEnabled={false} listening={false}>
+          {this.renderBarValues()}
+        </Layer>
+      </Stage>
     );
   }