Annotation tooltip not being displayed.

[cauemarcondes]

Describe the bug
When I move the mouse cursor from the data to the annotation, it will not display the tooltip for the annotation, but if I move my mouse out of the chart then back in on the annotation from the top, then it does display the tooltip.

Expected behaviour
The tooltip should be shown no matter where the mouse is coming from.

Screenshots

Screen.Recording.2021-03-25.at.14.04.07.mov

Kibana Cross Issues
elastic/kibana#91339 (comment)

[rshen91]

Hi @cauemarcondes thank you for taking the time to write up this issue. I'm trying to reproduce this and am having trouble finding this problem locally. For reference, in the playgound.tsx file within elastic-charts I'm testing with this playground:

import { Chart, Settings, LineSeries, ScaleType, LineAnnotation, LineAnnotationDatum, Position } from '../src';
import { Icon } from '../src/components/icons/icon';

function generateAnnotationData(values: any[]): LineAnnotationDatum[] {
  return values.map((value, index) => ({ dataValue: value, details: `detail-${index}` }));
}
export class Playground extends React.Component {
  render() {
    return (
      <div className="story-chart story-root root">
        <Chart size={[500, 200]}>
          <Settings showLegend showLegendExtra />
          <LineAnnotation
            id="test_annotation"
            domainType="xDomain"
            dataValues={generateAnnotationData([5])}
            marker={<Icon type="dot" />}
            markerPosition={Position.Top}
          />
          <LineAnnotation
            id="test_annotation_2"
            domainType="xDomain"
            dataValues={generateAnnotationData([5.5])}
            marker={<Icon type="dot" />}
            markerPosition={Position.Top}
          />
          <LineSeries
            id="line"
            xScaleType={ScaleType.Linear}
            yScaleType={ScaleType.Linear}
            xAccessor={0}
            yAccessors={[1]}
            data={[
              [0, 103, 'group0'],
              [1, 13, 'group1'],
              [2, 102, 'group2'],
              [3, 12, 'group3'],
              [4, 103, 'group0'],
              [5, 100, 'group1'],
              [6, 3, 'group2'],
              [7, 13, 'group3'],
              [8, 23, 'group2'],
              [9, 123, 'group3'],
            ]}
          />
        </Chart>
      </div>
    );
  }
}

Can you provide the steps to reproduce the visualization in Kibana for us to better help? Or alternatively, if you're able to set up a codesandbox for us to see the problem, that would be really helpful! Thanks

[cauemarcondes]

Can you provide the steps to reproduce the visualization in Kibana for us to better help?

Hi @rshen91 , you can test it on this URL https://dev-oblt.elastic.dev/app/apm/services/opbeans-java/overview?rangeFrom=now-7d&rangeTo=now&latencyAggregationType=avg

Screen.Recording.2021-03-25.at.14.04.07.mov

[rshen91]

Interesting! So in x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx when commenting out onPointerUpdate={setPointerEvent} this bug seems to go away. It looks like the issue is in the react hook in x-pack/plugins/apm/public/context/chart_pointer_event/use_chart_pointer_event_context.tsx. What is onPointerUpdate doing in timeseries_chart.tsx (can this be removed)?

[cauemarcondes]

@rshen91 sorry for the late response. The use_chart_pointer_event_context is responsible to show the tooltip in all the charts when hovering over one.

Unfortunately, it cannot be removed. But we followed this example to implement it https://elastic.github.io/elastic-charts/?path=/story/interactions--cursor-update-action

[nickofthyme]

I'll take another look at this.

[nickofthyme]

🎉 This issue has been resolved in version 30.0.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀