refactor: decouple the brush component from XY chart (opensearch-proj…

…ect#821)

This commit decouples the brush rendering component from the XY axis chart. This can be then reused by heatmap that requires this feature.
A set of more specific methods on the `InternalChartState` interface are added to decouple the implementation of every single chart related to chart dimensions and brush area computation.

Co-authored-by: Nick Partridge <nick.ryan.partridge@gmail.com>

packages/osd-charts/src/chart_types/goal_chart/state/chart_state.tsx

@@ -25,6 +25,7 @@ import { Tooltip } from '../../../components/tooltip';
 import { InternalChartState, GlobalChartState, BackwardRef } from '../../../state/chart_state';
 import { InitStatus } from '../../../state/selectors/get_internal_is_intialized';
 import { LegendItemLabel } from '../../../state/selectors/get_legend_items_labels';
+import { Dimensions } from '../../../utils/dimensions';
 import { Goal } from '../renderer/canvas/connected_component';
 import { getSpecOrNull } from './selectors/goal_spec';
 import { isTooltipVisibleSelector } from './selectors/is_tooltip_visible';
@@ -114,4 +115,19 @@ export class GoalState implements InternalChartState {
     this.onElementOutCaller(globalState);
     this.onElementClickCaller(globalState);
   }
+
+  // TODO
+  getProjectionContainerArea(): Dimensions {
+    return { width: 0, height: 0, top: 0, left: 0 };
+  }
+
+  // TODO
+  getMainProjectionArea(): Dimensions {
+    return { width: 0, height: 0, top: 0, left: 0 };
+  }
+
+  // TODO
+  getBrushArea(): Dimensions | null {
+    return null;
+  }
 }

packages/osd-charts/src/chart_types/partition_chart/state/chart_state.tsx

@@ -23,6 +23,7 @@ import { ChartTypes } from '../..';
 import { Tooltip } from '../../../components/tooltip';
 import { InternalChartState, GlobalChartState, BackwardRef } from '../../../state/chart_state';
 import { InitStatus } from '../../../state/selectors/get_internal_is_intialized';
+import { Dimensions } from '../../../utils/dimensions';
 import { Partition } from '../renderer/canvas/partition';
 import { HighlighterFromHover } from '../renderer/dom/highlighter_hover';
 import { HighlighterFromLegend } from '../renderer/dom/highlighter_legend';
@@ -116,4 +117,19 @@ export class PartitionState implements InternalChartState {
     this.onElementOutCaller(globalState);
     this.onElementClickCaller(globalState);
   }
+
+  // TODO
+  getProjectionContainerArea(): Dimensions {
+    return { width: 0, height: 0, top: 0, left: 0 };
+  }
+
+  // TODO
+  getMainProjectionArea(): Dimensions {
+    return { width: 0, height: 0, top: 0, left: 0 };
+  }
+
+  // TODO
+  getBrushArea(): Dimensions | null {
+    return null;
+  }
 }

packages/osd-charts/src/chart_types/xy_chart/renderer/dom/_index.scss

@@ -1,4 +1,3 @@
 @import 'highlighter';
 @import 'crosshair';
-@import 'brush';
 @import 'annotations/index';

packages/osd-charts/src/chart_types/xy_chart/state/chart_state.tsx

@@ -22,16 +22,19 @@ import React, { RefObject } from 'react';
 import { ChartTypes } from '../..';
 import { LegendItemExtraValues } from '../../../commons/legend';
 import { SeriesKey } from '../../../commons/series_id';
+import { BrushTool } from '../../../components/brush/brush';
 import { Tooltip } from '../../../components/tooltip';
 import { InternalChartState, GlobalChartState, BackwardRef } from '../../../state/chart_state';
+import { getChartContainerDimensionsSelector } from '../../../state/selectors/get_chart_container_dimensions';
 import { InitStatus } from '../../../state/selectors/get_internal_is_intialized';
 import { htmlIdGenerator } from '../../../utils/commons';
 import { XYChart } from '../renderer/canvas/xy_chart';
 import { Annotations } from '../renderer/dom/annotations';
-import { BrushTool } from '../renderer/dom/brush';
 import { Crosshair } from '../renderer/dom/crosshair';
 import { Highlighter } from '../renderer/dom/highlighter';
+import { computeChartDimensionsSelector } from './selectors/compute_chart_dimensions';
 import { computeLegendSelector } from './selectors/compute_legend';
+import { getBrushAreaSelector } from './selectors/get_brush_area';
 import { getPointerCursorSelector } from './selectors/get_cursor_pointer';
 import { getHighlightedValuesSelector } from './selectors/get_highlighted_values';
 import { getLegendItemsLabelsSelector } from './selectors/get_legend_items_labels';
@@ -85,6 +88,18 @@ export class XYAxisChartState implements InternalChartState {
     return isChartEmptySelector(globalState);
   }
 
+  getMainProjectionArea(globalState: GlobalChartState) {
+    return computeChartDimensionsSelector(globalState).chartDimensions;
+  }
+
+  getProjectionContainerArea(globalState: GlobalChartState) {
+    return getChartContainerDimensionsSelector(globalState);
+  }
+
+  getBrushArea(globalState: GlobalChartState) {
+    return getBrushAreaSelector(globalState);
+  }
+
   getLegendItemsLabels(globalState: GlobalChartState) {
     return getLegendItemsLabelsSelector(globalState);
   }

packages/osd-charts/src/components/_index.scss

@@ -1,5 +1,6 @@
 @import 'global';
 @import 'container';
+@import 'brush/index';
 @import 'tooltip/index';
 @import 'portal/index';
 @import 'icons/index';

packages/osd-charts/src/components/brush/_index.scss

@@ -0,0 +1 @@
+@import 'brush';

packages/osd-charts/src/chart_types/xy_chart/renderer/dom/brush.tsx → packages/osd-charts/src/components/brush/brush.tsx

@@ -20,28 +20,41 @@
 import React, { RefObject } from 'react';
 import { connect } from 'react-redux';
 
-import { clearCanvas, withContext, withClip } from '../../../../renderers/canvas';
-import { GlobalChartState } from '../../../../state/chart_state';
-import { getChartContainerDimensionsSelector } from '../../../../state/selectors/get_chart_container_dimensions';
-import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/selectors/get_internal_is_intialized';
-import { Dimensions } from '../../../../utils/dimensions';
-import { computeChartDimensionsSelector } from '../../state/selectors/compute_chart_dimensions';
-import { getBrushAreaSelector } from '../../state/selectors/get_brush_area';
-import { isBrushAvailableSelector } from '../../state/selectors/is_brush_available';
-import { isBrushingSelector } from '../../state/selectors/is_brushing';
-import { renderRect } from '../canvas/primitives/rect';
+import { RgbObject } from '../../chart_types/partition_chart/layout/utils/color_library_wrappers';
+import { renderRect } from '../../chart_types/xy_chart/renderer/canvas/primitives/rect';
+import { clearCanvas, withContext, withClip } from '../../renderers/canvas';
+import { GlobalChartState } from '../../state/chart_state';
+import { getInternalBrushAreaSelector } from '../../state/selectors/get_internal_brush_area';
+import { getInternalIsBrushingSelector } from '../../state/selectors/get_internal_is_brushing';
+import { getInternalIsBrushingAvailableSelector } from '../../state/selectors/get_internal_is_brushing_available';
+import { getInternalIsInitializedSelector, InitStatus } from '../../state/selectors/get_internal_is_intialized';
+import { getInternalMainProjectionAreaSelector } from '../../state/selectors/get_internal_main_projection_area';
+import { getInternalProjectionContainerAreaSelector } from '../../state/selectors/get_internal_projection_container_area';
+import { Dimensions } from '../../utils/dimensions';
 
-interface Props {
+interface OwnProps {
+  fillColor?: RgbObject;
+}
+interface StateProps {
   initialized: boolean;
-  chartDimensions: Dimensions;
-  chartContainerDimensions: Dimensions;
+  mainProjectionArea: Dimensions;
+  projectionContainer: Dimensions;
   isBrushing: boolean | undefined;
   isBrushAvailable: boolean | undefined;
   brushArea: Dimensions | null;
 }
 
+const DEFAULT_FILL_COLOR: RgbObject = {
+  r: 128,
+  g: 128,
+  b: 128,
+  opacity: 0.6,
+};
+
+type Props = OwnProps & StateProps;
+
 class BrushToolComponent extends React.Component<Props> {
-  static displayName = 'BrushToolComponent';
+  static displayName = 'BrushTool';
 
   private readonly devicePixelRatio: number;
   private ctx: CanvasRenderingContext2D | null;
@@ -73,7 +86,7 @@ class BrushToolComponent extends React.Component<Props> {
   }
 
   private drawCanvas = () => {
-    const { brushArea, chartDimensions } = this.props;
+    const { brushArea, mainProjectionArea, fillColor } = this.props;
     if (!this.ctx || !brushArea) {
       return;
     }
@@ -83,14 +96,14 @@ class BrushToolComponent extends React.Component<Props> {
       withClip(
         ctx,
         {
-          x: chartDimensions.left,
-          y: chartDimensions.top,
-          width: chartDimensions.width,
-          height: chartDimensions.height,
+          x: mainProjectionArea.left,
+          y: mainProjectionArea.top,
+          width: mainProjectionArea.width,
+          height: mainProjectionArea.height,
         },
         (ctx) => {
           clearCanvas(ctx, 200000, 200000);
-          ctx.translate(chartDimensions.left, chartDimensions.top);
+          ctx.translate(mainProjectionArea.left, mainProjectionArea.top);
           renderRect(
             ctx,
             {
@@ -100,12 +113,7 @@ class BrushToolComponent extends React.Component<Props> {
               height,
             },
             {
-              color: {
-                r: 128,
-                g: 128,
-                b: 128,
-                opacity: 0.6,
-              },
+              color: fillColor ?? DEFAULT_FILL_COLOR,
             },
           );
         },
@@ -119,12 +127,12 @@ class BrushToolComponent extends React.Component<Props> {
   }
 
   render() {
-    const { initialized, isBrushAvailable, isBrushing, chartContainerDimensions } = this.props;
+    const { initialized, isBrushAvailable, isBrushing, projectionContainer } = this.props;
     if (!initialized || !isBrushAvailable || !isBrushing) {
       this.ctx = null;
       return null;
     }
-    const { width, height } = chartContainerDimensions;
+    const { width, height } = projectionContainer;
     return (
       <canvas
         ref={this.canvasRef}
@@ -140,34 +148,34 @@ class BrushToolComponent extends React.Component<Props> {
   }
 }
 
-const mapStateToProps = (state: GlobalChartState): Props => {
+const mapStateToProps = (state: GlobalChartState): StateProps => {
   if (getInternalIsInitializedSelector(state) !== InitStatus.Initialized) {
     return {
       initialized: false,
-      isBrushing: false,
-      isBrushAvailable: false,
-      brushArea: null,
-      chartContainerDimensions: {
+      projectionContainer: {
         width: 0,
         height: 0,
         left: 0,
         top: 0,
       },
-      chartDimensions: {
+      mainProjectionArea: {
         top: 0,
         left: 0,
         width: 0,
         height: 0,
       },
+      isBrushing: false,
+      isBrushAvailable: false,
+      brushArea: null,
     };
   }
   return {
     initialized: state.specsInitialized,
-    chartContainerDimensions: getChartContainerDimensionsSelector(state),
-    brushArea: getBrushAreaSelector(state),
-    isBrushAvailable: isBrushAvailableSelector(state),
-    chartDimensions: computeChartDimensionsSelector(state).chartDimensions,
-    isBrushing: isBrushingSelector(state),
+    projectionContainer: getInternalProjectionContainerAreaSelector(state),
+    mainProjectionArea: getInternalMainProjectionAreaSelector(state),
+    isBrushAvailable: getInternalIsBrushingAvailableSelector(state),
+    isBrushing: getInternalIsBrushingSelector(state),
+    brushArea: getInternalBrushAreaSelector(state),
   };
 };
 

packages/osd-charts/src/state/chart_state.ts

@@ -121,6 +121,24 @@ export interface InternalChartState {
    * @param globalState
    */
   eventCallbacks(globalState: GlobalChartState): void;
+
+  /**
+   * Get the chart main projection area: exclude legends, axis and other external marks
+   * @param globalState
+   */
+  getMainProjectionArea(globalState: GlobalChartState): Dimensions;
+
+  /**
+   * Get the chart container projection area
+   * @param globalState
+   */
+  getProjectionContainerArea(globalState: GlobalChartState): Dimensions;
+
+  /**
+   * Get the brushed area if available
+   * @param globalState
+   */
+  getBrushArea(globalState: GlobalChartState): Dimensions | null;
 }
 
 /** @internal */

packages/osd-charts/src/state/selectors/get_internal_brush_area.ts

@@ -0,0 +1,29 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Dimensions } from '../../utils/dimensions';
+import { GlobalChartState } from '../chart_state';
+
+/** @internal */
+export const getInternalBrushAreaSelector = (state: GlobalChartState): Dimensions | null => {
+  if (state.internalChartState) {
+    return state.internalChartState.getBrushArea(state);
+  }
+  return null;
+};

packages/osd-charts/src/state/selectors/get_internal_main_projection_area.ts

@@ -0,0 +1,29 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Dimensions } from '../../utils/dimensions';
+import { GlobalChartState } from '../chart_state';
+
+/** @internal */
+export const getInternalMainProjectionAreaSelector = (state: GlobalChartState): Dimensions => {
+  if (state.internalChartState) {
+    return state.internalChartState.getMainProjectionArea(state);
+  }
+  return { width: 0, height: 0, left: 0, top: 0 };
+};

packages/osd-charts/src/state/selectors/get_internal_projection_container_area.ts

@@ -0,0 +1,29 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Dimensions } from '../../utils/dimensions';
+import { GlobalChartState } from '../chart_state';
+
+/** @internal */
+export const getInternalProjectionContainerAreaSelector = (state: GlobalChartState): Dimensions => {
+  if (state.internalChartState) {
+    return state.internalChartState.getProjectionContainerArea(state);
+  }
+  return { width: 0, height: 0, left: 0, top: 0 };
+};