remove cursor from heatmap and pie

elastic · Aug 4, 2021 · 73d1b25 · 73d1b25
1 parent e8c1aa8
commit 73d1b25
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 65 deletions.
diff --git a/x-pack/plugins/lens/public/heatmap_visualization/chart_component.tsx b/x-pack/plugins/lens/public/heatmap_visualization/chart_component.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { FC, useEffect, useMemo, useRef, useState } from 'react';
+import React, { FC, useEffect, useMemo, useState } from 'react';
 import {
   Chart,
   ElementClickListener,
@@ -16,7 +16,7 @@ import {
   ScaleType,
   Settings,
 } from '@elastic/charts';
-import { CustomPaletteState, useActiveCursor } from '../../../../../src/plugins/charts/public';
+import type { CustomPaletteState } from 'src/plugins/charts/public';
 import { VisualizationContainer } from '../visualization_container';
 import type { HeatmapRenderProps } from './types';
 import './index.scss';
@@ -118,15 +118,10 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = ({
   onClickValue,
   onSelectRange,
   paletteService,
-  chartsActiveCursorService,
 }) => {
   const chartTheme = chartsThemeService.useChartsTheme();
   const isDarkTheme = chartsThemeService.useDarkMode();
 
-  const chartRef = useRef<Chart>(null);
-  const handleCursorUpdate = useActiveCursor(chartsActiveCursorService, chartRef, {
-    datatables: Object.values(data.tables),
-  });
   const tableId = Object.keys(data.tables)[0];
   const table = data.tables[tableId];
 
@@ -320,9 +315,8 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = ({
   }
 
   return (
-    <Chart ref={chartRef}>
+    <Chart>
       <Settings
-        onPointerUpdate={handleCursorUpdate}
         onElementClick={onElementClick}
         showLegend={args.legend.isVisible}
         legendPosition={args.legend.position}

diff --git a/x-pack/plugins/lens/public/heatmap_visualization/expression.tsx b/x-pack/plugins/lens/public/heatmap_visualization/expression.tsx
@@ -13,11 +13,7 @@ import type { IInterpreterRenderHandlers } from '../../../../../src/plugins/expr
 import type { LensBrushEvent, LensFilterEvent } from '../types';
 import type { FormatFactory } from '../../common';
 import { LENS_HEATMAP_RENDERER } from './constants';
-import type {
-  ChartsPluginSetup,
-  ChartsPluginStart,
-  PaletteRegistry,
-} from '../../../../../src/plugins/charts/public';
+import type { ChartsPluginSetup, PaletteRegistry } from '../../../../../src/plugins/charts/public';
 import { HeatmapChartReportable } from './chart_component';
 import type { HeatmapExpressionProps } from './types';
 
@@ -26,7 +22,6 @@ export { heatmapGridConfig, heatmapLegendConfig, heatmap } from '../../common/ex
 export const getHeatmapRenderer = (dependencies: {
   formatFactory: Promise<FormatFactory>;
   chartsThemeService: ChartsPluginSetup['theme'];
-  chartsActiveCursorService: ChartsPluginStart['activeCursor'];
   paletteService: PaletteRegistry;
   timeZone: string;
 }) => ({
@@ -59,7 +54,6 @@ export const getHeatmapRenderer = (dependencies: {
             onSelectRange={onSelectRange}
             timeZone={dependencies.timeZone}
             formatFactory={formatFactory}
-            chartsActiveCursorService={dependencies.chartsActiveCursorService}
             chartsThemeService={dependencies.chartsThemeService}
             paletteService={dependencies.paletteService}
           />

diff --git a/x-pack/plugins/lens/public/heatmap_visualization/index.ts b/x-pack/plugins/lens/public/heatmap_visualization/index.ts
@@ -9,8 +9,6 @@ import type { CoreSetup } from 'kibana/public';
 import type { ExpressionsSetup } from '../../../../../src/plugins/expressions/public';
 import type { EditorFrameSetup } from '../types';
 import type { ChartsPluginSetup } from '../../../../../src/plugins/charts/public';
-import type { LensPluginStartDependencies } from '../plugin';
-
 import { getTimeZone } from '../utils';
 import type { FormatFactory } from '../../common';
 
@@ -25,8 +23,8 @@ export class HeatmapVisualization {
   constructor() {}
 
   setup(
-    core: CoreSetup<LensPluginStartDependencies, void>,
-    { expressions, formatFactory, editorFrame }: HeatmapVisualizationPluginSetupPlugins
+    core: CoreSetup,
+    { expressions, formatFactory, editorFrame, charts }: HeatmapVisualizationPluginSetupPlugins
   ) {
     editorFrame.registerVisualization(async () => {
       const timeZone = getTimeZone(core.uiSettings);
@@ -38,7 +36,6 @@ export class HeatmapVisualization {
         heatmapGridConfig,
         getHeatmapRenderer,
       } = await import('../async_services');
-      const [, { charts }] = await core.getStartServices();
       const palettes = await charts.palettes.getPalettes();
 
       expressions.registerFunction(() => heatmap);
@@ -50,7 +47,6 @@ export class HeatmapVisualization {
           formatFactory,
           chartsThemeService: charts.theme,
           paletteService: palettes,
-          chartsActiveCursorService: charts.activeCursor,
           timeZone,
         })
       );

diff --git a/x-pack/plugins/lens/public/heatmap_visualization/types.ts b/x-pack/plugins/lens/public/heatmap_visualization/types.ts
@@ -10,11 +10,7 @@ import type { LensBrushEvent, LensFilterEvent } from '../types';
 import type { LensMultiTable, FormatFactory, CustomPaletteParams } from '../../common';
 import type { HeatmapGridConfigResult, HeatmapLegendConfigResult } from '../../common/expressions';
 import { CHART_SHAPES, LENS_HEATMAP_RENDERER } from './constants';
-import type {
-  ChartsPluginSetup,
-  ChartsPluginStart,
-  PaletteRegistry,
-} from '../../../../../src/plugins/charts/public';
+import type { ChartsPluginSetup, PaletteRegistry } from '../../../../../src/plugins/charts/public';
 
 export type ChartShapes = typeof CHART_SHAPES[keyof typeof CHART_SHAPES];
 
@@ -57,7 +53,6 @@ export type HeatmapRenderProps = HeatmapExpressionProps & {
   timeZone: string;
   formatFactory: FormatFactory;
   chartsThemeService: ChartsPluginSetup['theme'];
-  chartsActiveCursorService: ChartsPluginStart['activeCursor'];
   onClickValue: (data: LensFilterEvent['data']) => void;
   onSelectRange: (data: LensBrushEvent['data']) => void;
   paletteService: PaletteRegistry;

diff --git a/x-pack/plugins/lens/public/pie_visualization/expression.tsx b/x-pack/plugins/lens/public/pie_visualization/expression.tsx
@@ -17,18 +17,13 @@ import type { LensFilterEvent } from '../types';
 import { PieComponent } from './render_function';
 import type { FormatFactory } from '../../common';
 import type { PieExpressionProps } from '../../common/expressions';
-import type {
-  ChartsPluginSetup,
-  ChartsPluginStart,
-  PaletteRegistry,
-} from '../../../../../src/plugins/charts/public';
+import type { ChartsPluginSetup, PaletteRegistry } from '../../../../../src/plugins/charts/public';
 
 export { pie } from '../../common/expressions';
 
 export const getPieRenderer = (dependencies: {
   formatFactory: Promise<FormatFactory>;
   chartsThemeService: ChartsPluginSetup['theme'];
-  chartsActiveCursorService: ChartsPluginStart['activeCursor'];
   paletteService: PaletteRegistry;
 }): ExpressionRenderDefinition<PieExpressionProps> => ({
   name: 'lens_pie_renderer',
@@ -53,7 +48,6 @@ export const getPieRenderer = (dependencies: {
           {...config}
           formatFactory={formatFactory}
           chartsThemeService={dependencies.chartsThemeService}
-          chartsActiveCursorService={dependencies.chartsActiveCursorService}
           paletteService={dependencies.paletteService}
           onClickValue={onClickValue}
           renderMode={handlers.getRenderMode()}

diff --git a/x-pack/plugins/lens/public/pie_visualization/index.ts b/x-pack/plugins/lens/public/pie_visualization/index.ts
@@ -11,7 +11,6 @@ import type { EditorFrameSetup } from '../types';
 import type { UiActionsStart } from '../../../../../src/plugins/ui_actions/public';
 import type { ChartsPluginSetup } from '../../../../../src/plugins/charts/public';
 import type { FormatFactory } from '../../common';
-import type { LensPluginStartDependencies } from '../plugin';
 
 export interface PieVisualizationPluginSetupPlugins {
   editorFrame: EditorFrameSetup;
@@ -28,12 +27,11 @@ export class PieVisualization {
   constructor() {}
 
   setup(
-    core: CoreSetup<LensPluginStartDependencies, void>,
-    { expressions, formatFactory, editorFrame }: PieVisualizationPluginSetupPlugins
+    core: CoreSetup,
+    { expressions, formatFactory, editorFrame, charts }: PieVisualizationPluginSetupPlugins
   ) {
     editorFrame.registerVisualization(async () => {
       const { getPieVisualization, pie, getPieRenderer } = await import('../async_services');
-      const [, { charts }] = await core.getStartServices();
       const palettes = await charts.palettes.getPalettes();
 
       expressions.registerFunction(() => pie);
@@ -42,7 +40,6 @@ export class PieVisualization {
         getPieRenderer({
           formatFactory,
           chartsThemeService: charts.theme,
-          chartsActiveCursorService: charts.activeCursor,
           paletteService: palettes,
         })
       );

diff --git a/x-pack/plugins/lens/public/pie_visualization/render_function.test.tsx b/x-pack/plugins/lens/public/pie_visualization/render_function.test.tsx
@@ -24,11 +24,7 @@ import { EmptyPlaceholder } from '../shared_components';
 import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks';
 import { LensIconChartDonut } from '../assets/chart_donut';
 
-const chartSetupContract = chartPluginMock.createSetupContract();
-const chartStartContract = chartPluginMock.createStartContract();
-
-const chartsThemeService = chartSetupContract.theme;
-const chartsActiveCursorService = chartStartContract.activeCursor;
+const chartsThemeService = chartPluginMock.createSetupContract().theme;
 
 describe('PieVisualization component', () => {
   let getFormatSpy: jest.Mock;
@@ -78,7 +74,6 @@ describe('PieVisualization component', () => {
         formatFactory: getFormatSpy,
         onClickValue: jest.fn(),
         chartsThemeService,
-        chartsActiveCursorService,
         paletteService: chartPluginMock.createPaletteRegistry(),
         renderMode: 'display' as const,
         syncColors: false,

diff --git a/x-pack/plugins/lens/public/pie_visualization/render_function.tsx b/x-pack/plugins/lens/public/pie_visualization/render_function.tsx
@@ -6,7 +6,7 @@
  */
 
 import { uniq } from 'lodash';
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiText } from '@elastic/eui';
 import {
@@ -23,7 +23,7 @@ import {
   Settings,
   ElementClickListener,
 } from '@elastic/charts';
-import type { RenderMode } from 'src/plugins/expressions';
+import { RenderMode } from 'src/plugins/expressions';
 import type { LensFilterEvent } from '../types';
 import { VisualizationContainer } from '../visualization_container';
 import { CHART_NAMES, DEFAULT_PERCENT_DECIMALS } from './constants';
@@ -34,10 +34,8 @@ import { EmptyPlaceholder } from '../shared_components';
 import './visualization.scss';
 import {
   ChartsPluginSetup,
-  ChartsPluginStart,
   PaletteRegistry,
   SeriesLayer,
-  useActiveCursor,
 } from '../../../../../src/plugins/charts/public';
 import { LensIconChartDonut } from '../assets/chart_donut';
 import { getLegendAction } from './get_legend_action';
@@ -57,7 +55,6 @@ export function PieComponent(
   props: PieExpressionProps & {
     formatFactory: FormatFactory;
     chartsThemeService: ChartsPluginSetup['theme'];
-    chartsActiveCursorService: ChartsPluginStart['activeCursor'];
     paletteService: PaletteRegistry;
     onClickValue: (data: LensFilterEvent['data']) => void;
     renderMode: RenderMode;
@@ -67,13 +64,7 @@ export function PieComponent(
   const [firstTable] = Object.values(props.data.tables);
   const formatters: Record<string, ReturnType<FormatFactory>> = {};
 
-  const {
-    chartsThemeService,
-    chartsActiveCursorService,
-    paletteService,
-    syncColors,
-    onClickValue,
-  } = props;
+  const { chartsThemeService, paletteService, syncColors, onClickValue } = props;
   const {
     shape,
     groups,
@@ -87,15 +78,10 @@ export function PieComponent(
     hideLabels,
     palette,
   } = props.args;
-  const chartRef = useRef<Chart>(null);
   const chartTheme = chartsThemeService.useChartsTheme();
   const chartBaseTheme = chartsThemeService.useChartsBaseTheme();
   const isDarkMode = chartsThemeService.useDarkMode();
 
-  const handleCursorUpdate = useActiveCursor(chartsActiveCursorService, chartRef, {
-    datatables: Object.values(props.data.tables),
-  });
-
   if (!hideLabels) {
     firstTable.columns.forEach((column) => {
       formatters[column.id] = props.formatFactory(column.meta.params);
@@ -286,9 +272,8 @@ export function PieComponent(
       className="lnsPieExpression__container"
       isReady={state.isReady}
     >
-      <Chart ref={chartRef}>
+      <Chart>
         <Settings
-          onPointerUpdate={handleCursorUpdate}
           tooltip={{ boundary: document.getElementById('app-fixed-viewport') ?? undefined }}
           debugState={window._echDebugStateFlag ?? false}
           // Legend is hidden in many scenarios