[Lens][Heatmap] Enables cursor syncronization

src/plugins/chart_expressions/expression_heatmap/common/expression_functions/heatmap_function.ts

@@ -230,6 +230,7 @@ export const heatmapFunction = (): HeatmapExpressionFunctionDefinition => ({
             (handlers.variables?.embeddableTitle as string) ??
             handlers.getExecutionContext?.()?.description,
         },
+        syncTooltips: handlers?.isSyncTooltipsEnabled?.() ?? false,
       },
     };
   },

src/plugins/chart_expressions/expression_heatmap/common/types/expression_functions.ts

@@ -92,6 +92,7 @@ export type HeatmapInput = Datatable;
 export interface HeatmapExpressionProps {
   data: Datatable;
   args: HeatmapArguments;
+  syncTooltips: boolean;
 }
 
 export interface HeatmapRender {

src/plugins/chart_expressions/expression_heatmap/common/types/expression_renderers.ts

@@ -7,7 +7,7 @@
  */
 
 import type { PaletteRegistry } from '@kbn/coloring';
-import type { ChartsPluginSetup } from '@kbn/charts-plugin/public';
+import type { ChartsPluginSetup, ChartsPluginStart } from '@kbn/charts-plugin/public';
 import type { DatatableUtilitiesService } from '@kbn/data-plugin/common';
 import type { IFieldFormat, SerializedFieldFormat } from '@kbn/field-formats-plugin/common';
 import type { RangeSelectContext, ValueClickContext } from '@kbn/embeddable-plugin/public';
@@ -31,11 +31,13 @@ export type HeatmapRenderProps = HeatmapExpressionProps & {
   timeZone?: string;
   formatFactory: FormatFactory;
   chartsThemeService: ChartsPluginSetup['theme'];
+  chartsActiveCursorService: ChartsPluginStart['activeCursor'];
   datatableUtilities: DatatableUtilitiesService;
   onClickValue: (data: FilterEvent['data']) => void;
   onSelectRange: (data: BrushEvent['data']) => void;
   paletteService: PaletteRegistry;
   uiState: PersistedState;
   interactive: boolean;
+  syncTooltips: boolean;
   renderComplete: IInterpreterRenderHandlers['done'];
 };

src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx

@@ -46,8 +46,9 @@ const actWithTimeout = (action: Function, timer: number = 1) =>
         }, timer)
       )
   );
-
+const chartStartContract = chartPluginMock.createStartContract();
 const chartsThemeService = chartPluginMock.createSetupContract().theme;
+const chartsActiveCursorService = chartStartContract.activeCursor;
 const palettesRegistry = chartPluginMock.createPaletteRegistry();
 const formatService = fieldFormatsServiceMock.createStartContract();
 const args: HeatmapArguments = {
@@ -114,6 +115,7 @@ describe('HeatmapComponent', function () {
     wrapperProps = {
       data,
       chartsThemeService,
+      chartsActiveCursorService,
       args,
       uiState,
       onClickValue: jest.fn(),
@@ -122,6 +124,7 @@ describe('HeatmapComponent', function () {
       paletteService: palettesRegistry,
       formatFactory: formatService.deserialize,
       interactive: true,
+      syncTooltips: false,
       renderComplete: jest.fn(),
     };
   });

src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { memo, FC, useMemo, useState, useCallback } from 'react';
+import React, { memo, FC, useMemo, useState, useCallback, useRef } from 'react';
 import {
   Chart,
   ElementClickListener,
@@ -25,7 +25,7 @@ import {
 } from '@elastic/charts';
 import type { CustomPaletteState } from '@kbn/charts-plugin/public';
 import { search } from '@kbn/data-plugin/public';
-import { LegendToggle, EmptyPlaceholder } from '@kbn/charts-plugin/public';
+import { LegendToggle, EmptyPlaceholder, useActiveCursor } from '@kbn/charts-plugin/public';
 import {
   getAccessorByDimension,
   getFormatByAccessor,
@@ -138,14 +138,17 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
     timeZone,
     formatFactory,
     chartsThemeService,
+    chartsActiveCursorService,
     datatableUtilities,
     onClickValue,
     onSelectRange,
     paletteService,
     uiState,
     interactive,
+    syncTooltips,
     renderComplete,
   }) => {
+    const chartRef = useRef<Chart>(null);
     const chartTheme = chartsThemeService.useChartsTheme();
     const isDarkTheme = chartsThemeService.useDarkMode();
     // legacy heatmap legend is handled by the uiState
@@ -436,6 +439,9 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
       }
       return `${metricFormatter.convert(value) ?? ''}`;
     };
+    const handleCursorUpdate = useActiveCursor(chartsActiveCursorService, chartRef, {
+      datatables: [formattedTable.table],
+    });
 
     const { colors, ranges } = computeColorRanges(
       paletteService,
@@ -564,12 +570,16 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
             legendPosition: args.legend.position,
           }}
         >
-          <Chart>
+          <Chart ref={chartRef}>
             <Settings
               onRenderChange={onRenderChange}
               noResults={
                 <EmptyPlaceholder icon={IconChartHeatmap} renderComplete={onRenderChange} />
               }
+              onPointerUpdate={handleCursorUpdate}
+              externalPointerEvents={{
+                tooltip: { visible: syncTooltips },
+              }}
               onElementClick={interactive ? (onElementClick as ElementClickListener) : undefined}
               showLegend={showLegend ?? args.legend.isVisible}
               legendPosition={args.legend.position}

src/plugins/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx

@@ -88,6 +88,8 @@ export const heatmapRenderer: (
             renderComplete={renderComplete}
             uiState={handlers.uiState as PersistedState}
             interactive={isInteractive()}
+            chartsActiveCursorService={plugins.charts.activeCursor}
+            syncTooltips={config.syncTooltips}
           />
         </div>
       </KibanaThemeProvider>,