[APM] Don't show annotations on charts with no data (elastic#68829)

Hide the annotations plot and legend when a chart has annotations but doesn't have any values in the series.

Fixes elastic#66981.

x-pack/plugins/apm/public/components/shared/charts/CustomPlot/CustomPlot.stories.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+// @ts-ignore
+import CustomPlot from './';
+
+storiesOf('shared/charts/CustomPlot', module).add(
+  'with annotations but no data',
+  () => {
+    const annotations = [
+      {
+        type: 'version',
+        id: '2020-06-10 04:36:31',
+        '@timestamp': 1591763925012,
+        text: '2020-06-10 04:36:31',
+      },
+      {
+        type: 'version',
+        id: '2020-06-10 15:23:01',
+        '@timestamp': 1591802689233,
+        text: '2020-06-10 15:23:01',
+      },
+    ];
+    return <CustomPlot annotations={annotations} series={[]} />;
+  },
+  {
+    info: {
+      source: false,
+      text:
+        "When a chart has no data but does have annotations, the annotations shouldn't show up at all.",
+    },
+  }
+);

x-pack/plugins/apm/public/components/shared/charts/CustomPlot/index.js

@@ -168,7 +168,7 @@ export class InnerCustomPlot extends PureComponent {
             tickFormatX={this.props.tickFormatX}
           />
 
-          {this.state.showAnnotations && !isEmpty(annotations) && (
+          {this.state.showAnnotations && !isEmpty(annotations) && !noHits && (
             <AnnotationsPlot
               plotValues={plotValues}
               width={width}
@@ -202,7 +202,7 @@ export class InnerCustomPlot extends PureComponent {
           hiddenSeriesCount={hiddenSeriesCount}
           clickLegend={this.clickLegend}
           seriesEnabledState={this.state.seriesEnabledState}
-          hasAnnotations={!isEmpty(annotations)}
+          hasAnnotations={!isEmpty(annotations) && !noHits}
           showAnnotations={this.state.showAnnotations}
           onAnnotationsToggle={() => {
             this.setState(({ showAnnotations }) => ({

x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/CustomPlot.test.js

@@ -255,12 +255,28 @@ describe('when response has no data', () => {
   const onHover = jest.fn();
   const onMouseLeave = jest.fn();
   const onSelectionEnd = jest.fn();
+  const annotations = [
+    {
+      type: 'version',
+      id: '2020-06-10 04:36:31',
+      '@timestamp': 1591763925012,
+      text: '2020-06-10 04:36:31',
+    },
+    {
+      type: 'version',
+      id: '2020-06-10 15:23:01',
+      '@timestamp': 1591802689233,
+      text: '2020-06-10 15:23:01',
+    },
+  ];
+
   let wrapper;
   beforeEach(() => {
     const series = getEmptySeries(1451606400000, 1451610000000);
 
     wrapper = mount(
       <InnerCustomPlot
+        annotations={annotations}
         series={series}
         onHover={onHover}
         onMouseLeave={onMouseLeave}
@@ -294,6 +310,10 @@ describe('when response has no data', () => {
       expect(wrapper.find('Tooltip').length).toEqual(0);
     });
 
+    it('should not show annotations', () => {
+      expect(wrapper.find('AnnotationsPlot')).toHaveLength(0);
+    });
+
     it('should have correct markup', () => {
       expect(toJson(wrapper)).toMatchSnapshot();
     });