[ML] fix chartTooltip$ observable usage (#55694)

This commit is contained in:
Dima Arnautov 2020-01-23 15:49:54 +01:00 committed by GitHub
parent 841afe32fc
commit a895977aca
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -9,12 +9,11 @@ import React, { useRef, FC } from 'react';
import { TooltipValueFormatter } from '@elastic/charts';
import useObservable from 'react-use/lib/useObservable';
import { chartTooltip$, ChartTooltipValue } from './chart_tooltip_service';
import { chartTooltip$, ChartTooltipState, ChartTooltipValue } from './chart_tooltip_service';
type RefValue = HTMLElement | null;
function useRefWithCallback() {
const chartTooltipState = useObservable(chartTooltip$);
function useRefWithCallback(chartTooltipState?: ChartTooltipState) {
const ref = useRef<RefValue>(null);
return (node: RefValue) => {
@ -66,7 +65,7 @@ const renderHeader = (headerData?: ChartTooltipValue, formatter?: TooltipValueFo
export const ChartTooltip: FC = () => {
const chartTooltipState = useObservable(chartTooltip$);
const chartTooltipElement = useRefWithCallback();
const chartTooltipElement = useRefWithCallback(chartTooltipState);
if (chartTooltipState === undefined || !chartTooltipState.isTooltipVisible) {
return <div className="mlChartTooltip mlChartTooltip--hidden" ref={chartTooltipElement} />;