fix(highlighter): hide it when tooltip type is None (#482)

If the tooltip type is hidden (TooltipType.None) then the tooltip should not be shown. This add the check on the selector and includes also a smoke test.

fix #478, fix #479

Author: markov00

.playground/playgroud.tsx

@@ -1,20 +1,5 @@
 import React from 'react';
-import {
-  Axis,
-  Chart,
-  getAxisId,
-  getSpecId,
-  Position,
-  ScaleType,
-  Settings,
-  LIGHT_THEME,
-  niceTimeFormatter,
-  LineAnnotation,
-  AnnotationDomainTypes,
-  BarSeries,
-  RectAnnotation,
-  TooltipType,
-} from '../src';
+import { Chart, Settings, TooltipType, LineSeries } from '../src';
 import { KIBANA_METRICS } from '../src/utils/data_samples/test_dataset_kibana';
 export class Playground extends React.Component {
   chartRef: React.RefObject<Chart> = React.createRef();
@@ -43,50 +28,17 @@ export class Playground extends React.Component {
     }
   };
   render() {
-    const data = KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 7);
-
     return (
       <>
         <button onClick={this.onSnapshot}>Snapshot</button>
         <div className="chart">
-          <Chart ref={this.chartRef}>
-            <Settings theme={LIGHT_THEME} showLegend={true} tooltip={TooltipType.Crosshairs} />
-            <Axis
-              id={getAxisId('time')}
-              position={Position.Bottom}
-              tickFormat={niceTimeFormatter([data[0][0], data[data.length - 1][0]])}
-            />
-            <Axis id={getAxisId('count')} position={Position.Left} />
-            <LineAnnotation
-              id="line annotation"
-              dataValues={[
-                {
-                  dataValue: data[5][0],
-                  details: 'hello tooltip',
-                },
-              ]}
-              domainType={AnnotationDomainTypes.XDomain}
-              marker={<div style={{ width: 10, height: 10, background: 'red' }} />}
-            />
-            <RectAnnotation
-              id="rect annotation"
-              dataValues={[
-                {
-                  coordinates: {
-                    x1: data[3][0],
-                  },
-                  details: 'hello',
-                },
-              ]}
-            />
-            <BarSeries
-              id={getSpecId('series bars chart')}
-              xScaleType={ScaleType.Linear}
-              yScaleType={ScaleType.Linear}
+          <Chart>
+            <Settings tooltip={{ type: TooltipType.Crosshairs }} showLegend />
+            <LineSeries
+              id="lines"
               xAccessor={0}
               yAccessors={[1]}
-              data={data}
-              yScaleToDataExtent={true}
+              data={KIBANA_METRICS.metrics.kibana_os_load[0].data}
             />
           </Chart>
         </div>

src/chart_types/xy_chart/state/chart_state.interactions.test.ts

@@ -212,10 +212,8 @@ describe('Chart state pointer interactions', () => {
     store.dispatch(specParsed());
     store.dispatch(onPointerMove({ x: 10, y: 10 + 70 }, 0));
     const tooltipData = getTooltipValuesAndGeometriesSelector(store.getState());
-    expect(tooltipData.tooltipValues.length).toBe(2);
-    expect(tooltipData.tooltipValues[0].isXValue).toBe(true);
-    expect(tooltipData.tooltipValues[1].isXValue).toBe(false);
-    expect(tooltipData.tooltipValues[1].isHighlighted).toBe(true);
+    // no tooltip values exist if we have a TooltipType === None
+    expect(tooltipData.tooltipValues.length).toBe(0);
     let isTooltipVisible = isTooltipVisibleSelector(store.getState());
     expect(isTooltipVisible).toBe(false);
 

src/chart_types/xy_chart/state/chart_state.tooltip.test.ts

@@ -0,0 +1,45 @@
+import { GlobalChartState, chartStoreReducer } from '../../../state/chart_state';
+import { createStore, Store } from 'redux';
+import { upsertSpec, specParsed } from '../../../state/actions/specs';
+import { MockSeriesSpec, MockGlobalSpec } from '../../../mocks/specs';
+import { updateParentDimensions } from '../../../state/actions/chart_settings';
+import { getTooltipValuesAndGeometriesSelector } from './selectors/get_tooltip_values_highlighted_geoms';
+import { onPointerMove } from '../../../state/actions/mouse';
+import { TooltipType } from '../utils/interactions';
+
+describe('XYChart - State tooltips', () => {
+  let store: Store<GlobalChartState>;
+  beforeEach(() => {
+    const storeReducer = chartStoreReducer('chartId');
+    store = createStore(storeReducer);
+    store.dispatch(upsertSpec(MockSeriesSpec.bar({ data: [{ x: 1, y: 10 }, { x: 2, y: 5 }] })));
+    store.dispatch(upsertSpec(MockGlobalSpec.settings()));
+    store.dispatch(specParsed());
+    store.dispatch(updateParentDimensions({ width: 100, height: 100, top: 0, left: 0 }));
+  });
+
+  describe('should compute tooltip values depending on tooltip type', () => {
+    it.each<[TooltipType, number, number]>([
+      [TooltipType.None, 0, 0],
+      [TooltipType.Follow, 1, 2],
+      [TooltipType.VerticalCursor, 1, 2],
+      [TooltipType.Crosshairs, 1, 2],
+    ])('tooltip type %s', (tooltipType, expectedHgeomsLength, expectedTooltipValuesLength) => {
+      store.dispatch(onPointerMove({ x: 25, y: 50 }, 0));
+      store.dispatch(
+        upsertSpec(
+          MockGlobalSpec.settings({
+            tooltip: {
+              type: tooltipType,
+            },
+          }),
+        ),
+      );
+      store.dispatch(specParsed());
+      const state = store.getState();
+      const tooltipValues = getTooltipValuesAndGeometriesSelector(state);
+      expect(tooltipValues.tooltipValues).toHaveLength(expectedTooltipValuesLength);
+      expect(tooltipValues.highlightedGeometries).toHaveLength(expectedHgeomsLength);
+    });
+  });
+});

src/chart_types/xy_chart/state/selectors/get_specs.test.ts

@@ -1,23 +1,12 @@
 import { getSeriesSpecsSelector } from './get_specs';
 import { getInitialState } from '../../../../state/chart_state';
-import { ChartTypes } from '../../..';
-import { SpecTypes } from '../../utils/specs';
+import { MockSeriesSpec } from '../../../../mocks/specs';
 
 describe('selector - get_specs', () => {
   const state = getInitialState('chartId1');
-  const barSpec1 = {
-    id: 'bars1',
-    chartType: ChartTypes.XYAxis,
-    specType: SpecTypes.Series,
-  };
-  const barSpec2 = {
-    id: 'bars2',
-    chartType: ChartTypes.XYAxis,
-    specType: SpecTypes.Series,
-  };
   beforeEach(() => {
-    state.specs['bars1'] = barSpec1;
-    state.specs['bars2'] = barSpec2;
+    state.specs['bars1'] = MockSeriesSpec.bar({ id: 'bars1' });
+    state.specs['bars2'] = MockSeriesSpec.bar({ id: 'bars2' });
   });
   it('shall return the same ref objects', () => {
     const series = getSeriesSpecsSelector(state);

src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.ts

@@ -67,6 +67,9 @@ function getTooltipAndHighlightFromXValue(
   if (!scales.xScale || !scales.yScales) {
     return EMPTY_VALUES;
   }
+  if (tooltipType === TooltipType.None) {
+    return EMPTY_VALUES;
+  }
   let x = orientedProjectedPointerPosition.x;
   let y = orientedProjectedPointerPosition.y;
   if (externalPointerEvent && isValidExternalPointerEvent(externalPointerEvent, scales.xScale)) {

src/mocks/specs/specs.ts

@@ -10,10 +10,14 @@ import {
   BasicSeriesSpec,
   SpecTypes,
   SeriesTypes,
+  Position,
 } from '../../chart_types/xy_chart/utils/specs';
 import { getSpecId, getGroupId } from '../../utils/ids';
 import { ScaleType } from '../../utils/scales/scales';
 import { ChartTypes } from '../../chart_types';
+import { SettingsSpec } from '../../specs';
+import { TooltipType } from '../../chart_types/xy_chart/utils/interactions';
+import { LIGHT_THEME } from '../../utils/themes/light_theme';
 
 export class MockSeriesSpec {
   private static readonly barBase: BarSeriesSpec = {
@@ -104,13 +108,10 @@ export class MockSeriesSpec {
     switch (type) {
       case 'line':
         return MockSeriesSpec.lineBase;
-        break;
       case 'bar':
         return MockSeriesSpec.barBase;
-        break;
       case 'area':
         return MockSeriesSpec.areaBase;
-        break;
       default:
         return MockSeriesSpec.barBase;
     }
@@ -133,3 +134,29 @@ export class MockSeriesSpecs {
     return [];
   }
 }
+
+export class MockGlobalSpec {
+  private static readonly settingsBase: SettingsSpec = {
+    id: '__global__settings___',
+    chartType: ChartTypes.Global,
+    specType: SpecTypes.Settings,
+    rendering: 'canvas' as 'canvas',
+    rotation: 0 as 0,
+    animateData: true,
+    showLegend: false,
+    resizeDebounce: 10,
+    debug: false,
+    tooltip: {
+      type: TooltipType.VerticalCursor,
+      snap: true,
+    },
+    legendPosition: Position.Right,
+    showLegendDisplayValue: true,
+    hideDuplicateAxes: false,
+    theme: LIGHT_THEME,
+  };
+
+  static settings(partial?: Partial<SettingsSpec>): SettingsSpec {
+    return mergePartial<SettingsSpec>(MockGlobalSpec.settingsBase, partial, { mergeOptionalPartialValues: true });
+  }
+}

src/specs/settings.tsx

@@ -112,7 +112,7 @@ export type DefaultSettingsProps =
 export const DEFAULT_TOOLTIP_TYPE = TooltipType.VerticalCursor;
 export const DEFAULT_TOOLTIP_SNAP = true;
 
-export const DEFAULT_SETTINGS_SPEC = {
+export const DEFAULT_SETTINGS_SPEC: SettingsSpec = {
   id: '__global__settings___',
   chartType: ChartTypes.Global,
   specType: SpecTypes.Settings,
@@ -125,7 +125,6 @@ export const DEFAULT_SETTINGS_SPEC = {
   tooltip: {
     type: DEFAULT_TOOLTIP_TYPE,
     snap: DEFAULT_TOOLTIP_SNAP,
-    value: '',
   },
   legendPosition: Position.Right,
   showLegendDisplayValue: true,