feat(heatmap): Sync cursor from xy charts to Heatmap

packages/charts/src/chart_types/heatmap/layout/types/viewmodel_types.ts

@@ -99,6 +99,9 @@ export type PickHighlightedArea = (
   y: Array<NonNullable<PrimitiveValue>>,
 ) => Rect | null;
 
+/** @internal */
+export type PickCursorBand = (x: NonNullable<PrimitiveValue>) => Rect | undefined;
+
 /** @internal */
 export type PickGridCell = (x: Pixels, y: Pixels) => GridCell | undefined;
 
@@ -114,6 +117,7 @@ export type ShapeViewModel = {
   pickDragShape: PickDragShapeFunction;
   pickHighlightedArea: PickHighlightedArea;
   pickGridCell: PickGridCell;
+  pickCursorBand: PickCursorBand;
 };
 
 /** @internal */
@@ -144,4 +148,5 @@ export const nullShapeViewModel = (): ShapeViewModel => ({
   pickDragShape: () => ({ x: 0, y: 0, width: 0, height: 0 }),
   pickHighlightedArea: () => ({ x: 0, y: 0, width: 0, height: 0 }),
   pickGridCell: () => undefined,
+  pickCursorBand: () => undefined,
 });

packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts

@@ -16,7 +16,7 @@ import { Box, Font, maximiseFontSize } from '../../../../common/text_utils';
 import { ScaleType } from '../../../../scales/constants';
 import { LinearScale, OrdinalScale, RasterTimeScale } from '../../../../specs';
 import { TextMeasure } from '../../../../utils/bbox/canvas_text_bbox_calculator';
-import { addIntervalToTime } from '../../../../utils/chrono/elasticsearch';
+import { addIntervalToTime, roundDateToESInterval } from '../../../../utils/chrono/elasticsearch';
 import { clamp, Datum, isFiniteNumber } from '../../../../utils/common';
 import { innerPad, pad } from '../../../../utils/dimensions';
 import { Logger } from '../../../../utils/logger';
@@ -28,6 +28,7 @@ import { ColorScale } from '../../state/selectors/get_color_scale';
 import {
   Cell,
   GridCell,
+  PickCursorBand,
   PickDragFunction,
   PickDragShapeFunction,
   PickHighlightedArea,
@@ -333,6 +334,24 @@ export function shapeViewModel<D extends BaseDatum = Datum>(
     return pickHighlightedArea(area.x, area.y);
   };
 
+  const pickCursorBand: PickCursorBand = (x) => {
+    // TODO for Linear scale we need to round the numerical interval. see also https://github.com/elastic/elastic-charts/issues/1701
+    const roundedValue =
+      isRasterTimeScale(spec.xScale) && isFiniteNumber(x)
+        ? roundDateToESInterval(x, spec.xScale.interval, 'start', spec.timeZone)
+        : x;
+
+    const index = xValues.indexOf(roundedValue);
+    return index < 0
+      ? undefined
+      : {
+          width: cellWidth,
+          x: elementSizes.grid.left + (xScale(xValues[index]) ?? NaN),
+          y: elementSizes.grid.top,
+          height: elementSizes.grid.height,
+        };
+  };
+
   // ordered left-right vertical lines
   const xLines = Array.from({ length: xValues.length + 1 }, (d, i) => {
     const xAxisExtension = i % elementSizes.xAxisTickCadence === 0 ? 5 : 0;
@@ -416,6 +435,7 @@ export function shapeViewModel<D extends BaseDatum = Datum>(
     pickDragArea,
     pickDragShape,
     pickHighlightedArea,
+    pickCursorBand,
   };
 }
 
@@ -435,7 +455,7 @@ export function isRasterTimeScale(scale: RasterTimeScale | OrdinalScale | Linear
 function getXTicks(
   spec: HeatmapSpec,
   style: HeatmapStyle['xAxisLabel'],
-  scale: ScaleBand<string | number>,
+  scale: ScaleBand<NonNullable<PrimitiveValue>>,
   values: NonNullable<PrimitiveValue>[],
 ): Array<TextBox> {
   const isTimeScale = isRasterTimeScale(spec.xScale);

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

@@ -0,0 +1,76 @@
+/*
+ * 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 React from 'react';
+import { connect } from 'react-redux';
+
+import { Rect } from '../../../../geoms/types';
+import { getTooltipType } from '../../../../specs';
+import { TooltipType } from '../../../../specs/constants';
+import { GlobalChartState } from '../../../../state/chart_state';
+import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
+import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/selectors/get_internal_is_intialized';
+import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_spec';
+import { getTooltipSpecSelector } from '../../../../state/selectors/get_tooltip_spec';
+import { LIGHT_THEME } from '../../../../utils/themes/light_theme';
+import { Theme } from '../../../../utils/themes/theme';
+import { getCursorBandPositionSelector } from '../../state/selectors/get_cursor_band';
+
+interface CursorBandProps {
+  bandStyle: Theme['crosshair']['band'];
+  cursorPosition?: Rect;
+  tooltipType: TooltipType;
+  fromExternalEvent?: boolean;
+}
+
+function canRenderBand(type: TooltipType, visible: boolean, fromExternalEvent?: boolean) {
+  return visible && (type === TooltipType.Crosshairs || type === TooltipType.VerticalCursor || fromExternalEvent);
+}
+
+class CursorBandComponent extends React.Component<CursorBandProps> {
+  static displayName = 'CursorBand';
+
+  render() {
+    const { bandStyle, cursorPosition, tooltipType, fromExternalEvent } = this.props;
+    const isBand = (cursorPosition?.width ?? 0) > 0 && (cursorPosition?.height ?? 0) > 0;
+    if (!isBand || !cursorPosition || !canRenderBand(tooltipType, bandStyle.visible, fromExternalEvent)) {
+      return null;
+    }
+    const { x, y, width, height } = cursorPosition;
+    const { fill } = bandStyle;
+    return (
+      <svg className="echCrosshair__cursor" width="100%" height="100%">
+        <rect {...{ x, y, width, height, fill, opacity: 0.5 }} />
+      </svg>
+    );
+  }
+}
+
+const mapStateToProps = (state: GlobalChartState): CursorBandProps => {
+  if (getInternalIsInitializedSelector(state) !== InitStatus.Initialized) {
+    return {
+      bandStyle: LIGHT_THEME.crosshair.band,
+      tooltipType: TooltipType.None,
+    };
+  }
+  const settings = getSettingsSpecSelector(state);
+  const tooltip = getTooltipSpecSelector(state);
+  const cursorBandPosition = getCursorBandPositionSelector(state);
+  const fromExternalEvent = cursorBandPosition?.fromExternalEvent;
+  const tooltipType = getTooltipType(tooltip, settings, fromExternalEvent);
+
+  return {
+    bandStyle: getChartThemeSelector(state).crosshair.band,
+    cursorPosition: cursorBandPosition,
+    tooltipType,
+    fromExternalEvent,
+  };
+};
+
+/** @internal */
+export const CursorBand = connect(mapStateToProps)(CursorBandComponent);

packages/charts/src/chart_types/heatmap/state/chart_state.tsx

@@ -16,6 +16,7 @@ import { getChartContainerDimensionsSelector } from '../../../state/selectors/ge
 import { InitStatus } from '../../../state/selectors/get_internal_is_intialized';
 import { Dimensions } from '../../../utils/dimensions';
 import { Heatmap } from '../renderer/canvas/connected_component';
+import { CursorBand } from '../renderer/dom/cursor_band';
 import { HighlighterFromBrush } from '../renderer/dom/highlighter_brush';
 import { computeChartElementSizesSelector } from './selectors/compute_chart_dimensions';
 import { computeLegendSelector } from './selectors/compute_legend';
@@ -85,6 +86,7 @@ export class HeatmapState implements InternalChartState {
       <>
         <Tooltip getChartContainerRef={containerRef} />
         <Heatmap forwardStageRef={forwardStageRef} />
+        <CursorBand />
         <BrushTool />
         <HighlighterFromBrush />
       </>

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

@@ -0,0 +1,59 @@
+/*
+ * 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 { Rect } from '../../../../geoms/types';
+import { isPointerOverEvent, PointerEvent, SettingsSpec } from '../../../../specs';
+import { GlobalChartState, PointerState } from '../../../../state/chart_state';
+import { createCustomCachedSelector } from '../../../../state/create_selector';
+import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_spec';
+import { isNil } from '../../../../utils/common';
+import { ShapeViewModel } from '../../layout/types/viewmodel_types';
+import { getHeatmapGeometries } from './geometries';
+
+const getExternalPointerEventStateSelector = (state: GlobalChartState) => state.externalEvents.pointer;
+
+const getPointerEventStateSelector = (state: GlobalChartState) => state.interactions.pointer.current;
+
+/** @internal */
+export const getCursorBandPositionSelector = createCustomCachedSelector(
+  [getHeatmapGeometries, getExternalPointerEventStateSelector, getPointerEventStateSelector, getSettingsSpecSelector],
+  getCursorBand,
+);
+
+function getCursorBand(
+  geoms: ShapeViewModel,
+  externalPointerEvent: PointerEvent | null,
+  currentPointer: PointerState,
+  settings: SettingsSpec,
+): (Rect & { fromExternalEvent: boolean }) | undefined {
+  // external pointer events takes precedence over the current mouse pointer
+  if (settings.externalPointerEvents.tooltip.visible && isPointerOverEvent(externalPointerEvent)) {
+    const { x } = externalPointerEvent;
+    if (!isNil(x)) {
+      const band = geoms.pickCursorBand(x);
+      if (band) {
+        return {
+          ...band,
+          fromExternalEvent: true,
+        };
+      }
+    }
+  }
+  // display the current hovered cell
+  if (currentPointer.position.x > -1) {
+    const point = currentPointer.position;
+    const end = { x: point.x + Number.EPSILON, y: point.y + Number.EPSILON };
+    const band = geoms.pickDragShape([point, end]);
+    if (band) {
+      return {
+        ...band,
+        fromExternalEvent: false,
+      };
+    }
+  }
+}