fix: decuple brush cursor from chart rendering

This commit remove the unnecessary style recalculation caused by chancing the cursor style on the
document body from the chart_state. This commit also decouple the chart container from the chart
renderer, removing multiple rendering caused by the mouse leaving the brush area

.playground/playgroud.tsx

@@ -59,7 +59,7 @@ function renderChart(
   return (
     <div key={key} className="chart">
       <Chart ref={ref}>
-        <Settings tooltip={{ type: 'vertical' }} debug={false} showLegend={true} onCursorUpdate={onCursorUpdate} />
+        <Settings tooltip={{ type: 'vertical' }} debug={false} showLegend={true} onCursorUpdate={onCursorUpdate} onBrushEnd={console.log}/>
         <Axis
           id={getAxisId('timestamp')}
           title="timestamp"

src/chart_types/xy_chart/store/chart_state.ts

@@ -469,13 +469,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 +545,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

@@ -17,3 +17,22 @@
 .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,45 @@
+import React from 'react';
+import classNames from 'classnames';
+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 className = classNames('echChartCursorContainer', {
+      'echChart--isBrushEnabled': this.props.chartStore!.isCrosshairCursorVisible.get(),
+    });
+    const { setCursorPosition } = this.props.chartStore!;
+
+    return (
+      <div
+        className={className}
+        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,
@@ -406,76 +404,48 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
       clipHeight: chartDimensions.height,
     };
 
-    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);
+          width: '100%',
+          height: '100%',
         }}
-        onMouseLeave={() => {
-          setCursorPosition(-1, -1);
-        }}
-        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} {...layerClippings}>
+          {this.renderGrids()}
+        </Layer>
+
+        <Layer
+          x={chartDimensions.left + chartTransform.x}
+          y={chartDimensions.top + chartTransform.y}
+          rotation={chartRotation}
+          {...clippings}
+          hitGraphEnabled={false}
+          listening={false}
         >
-          <Layer hitGraphEnabled={false} listening={false} {...layerClippings}>
-            {this.renderGrids()}
-          </Layer>
-
-          <Layer
-            x={chartDimensions.left + chartTransform.x}
-            y={chartDimensions.top + chartTransform.y}
-            rotation={chartRotation}
-            {...clippings}
-            hitGraphEnabled={false}
-            listening={false}
-          >
-            {this.sortAndRenderElements()}
-          </Layer>
+          {this.sortAndRenderElements()}
+        </Layer>
 
+        <Layer hitGraphEnabled={false} listening={false}>
+          {debug && this.renderDebugChartBorders()}
+        </Layer>
+        {isBrushEnabled && (
           <Layer hitGraphEnabled={false} listening={false}>
-            {debug && this.renderDebugChartBorders()}
+            {this.renderBrushTool()}
           </Layer>
-          {isBrushEnabled && (
-            <Layer hitGraphEnabled={false} listening={false}>
-              {this.renderBrushTool()}
-            </Layer>
-          )}
+        )}
 
-          <Layer hitGraphEnabled={false} listening={false}>
-            {this.renderAxes()}
-          </Layer>
+        <Layer hitGraphEnabled={false} listening={false}>
+          {this.renderAxes()}
+        </Layer>
 
-          <Layer hitGraphEnabled={false} listening={false} {...layerClippings}>
-            {this.renderBarValues()}
-          </Layer>
-        </Stage>
-      </div>
+        <Layer hitGraphEnabled={false} listening={false} {...layerClippings}>
+          {this.renderBarValues()}
+        </Layer>
+      </Stage>
     );
   }