[APM] ML anomaly detection integration: Displaying anomaly job results in the Transaction duration chart is not as intended

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

@@ -16,6 +16,7 @@ import {
   niceTimeFormatter,
   Placement,
   Position,
+  RectAnnotation,
   ScaleType,
   Settings,
   YDomainRange,
@@ -27,7 +28,7 @@ import React, { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import { useChartTheme } from '../../../../../observability/public';
 import { asAbsoluteDateTime } from '../../../../common/utils/formatters';
-import { TimeSeries } from '../../../../typings/timeseries';
+import { RectCoordinate, TimeSeries } from '../../../../typings/timeseries';
 import { FETCH_STATUS } from '../../../hooks/useFetcher';
 import { useTheme } from '../../../hooks/useTheme';
 import { useUrlParams } from '../../../hooks/useUrlParams';
@@ -53,6 +54,7 @@ interface Props {
   yTickFormat?: (y: number) => string;
   showAnnotations?: boolean;
   yDomain?: YDomainRange;
+  anomalySeries?: TimeSeries[];
 }
 
 export function TimeseriesChart({
@@ -65,6 +67,7 @@ export function TimeseriesChart({
   yTickFormat,
   showAnnotations = true,
   yDomain,
+  anomalySeries,
 }: Props) {
   const history = useHistory();
   const chartRef = React.createRef<Chart>();
@@ -102,7 +105,12 @@ export function TimeseriesChart({
       <Chart ref={chartRef} id={id}>
         <Settings
           onBrushEnd={({ x }) => onBrushEnd({ x, history })}
-          theme={chartTheme}
+          theme={{
+            ...chartTheme,
+            areaSeriesStyle: {
+              line: { visible: false },
+            },
+          }}
           onPointerUpdate={setPointerEvent}
           externalPointerEvents={{
             tooltip: { visible: true, placement: Placement.Bottom },
@@ -169,6 +177,45 @@ export function TimeseriesChart({
             />
           );
         })}
+
+        {anomalySeries &&
+          anomalySeries.map((anomalySerie) => {
+            if (anomalySerie.type === 'area') {
+              return (
+                <AreaSeries
+                  key={anomalySerie.title}
+                  id={anomalySerie.title}
+                  xScaleType={ScaleType.Time}
+                  yScaleType={ScaleType.Linear}
+                  xAccessor="x"
+                  yAccessors={['y']}
+                  y0Accessors={['y0']}
+                  data={isEmpty ? [] : anomalySerie.data}
+                  color={anomalySerie.color}
+                  curve={CurveType.CURVE_MONOTONE_X}
+                  hideInLegend
+                  filterSeriesInTooltip={() => false}
+                />
+              );
+            }
+            return (
+              <RectAnnotation
+                key={anomalySerie.title}
+                id="score_anomalies"
+                dataValues={(anomalySerie.data as RectCoordinate[]).map(
+                  ({ x0, x: x1 }) => ({
+                    coordinates: {
+                      x0,
+                      x1,
+                    },
+                  })
+                )}
+                style={{
+                  fill: anomalySerie.color,
+                }}
+              />
+            );
+          })}
       </Chart>
     </ChartContainer>
   );

x-pack/plugins/apm/public/components/shared/charts/transaction_charts/index.tsx

@@ -46,7 +46,7 @@ export function TransactionCharts({
 }: TransactionChartProps) {
   const { transactionType } = urlParams;
 
-  const { responseTimeSeries, tpmSeries } = charts;
+  const { responseTimeSeries, tpmSeries, anomalySeries } = charts;
 
   const { formatter, toggleSerie } = useFormatter(responseTimeSeries);
 
@@ -79,6 +79,7 @@ export function TransactionCharts({
                   id="transactionDuration"
                   timeseries={responseTimeSeries || []}
                   yLabelFormat={getResponseTimeTickFormatter(formatter)}
+                  anomalySeries={anomalySeries}
                   onToggleLegend={(serie) => {
                     if (serie) {
                       toggleSerie(serie);

x-pack/plugins/apm/public/selectors/chart_selectors.test.ts

@@ -23,13 +23,12 @@ describe('chart selectors', () => {
     it('should return anomalyScoreSeries', () => {
       const data = [{ x0: 0, x: 10 }];
       expect(getAnomalyScoreSeries(data)).toEqual({
-        areaColor: 'rgba(231,102,76,0.1)',
-        color: 'none',
+        color: '#e7664c',
         data: [{ x0: 0, x: 10 }],
         hideLegend: true,
         hideTooltipValue: true,
         title: 'Anomaly score',
-        type: 'areaMaxHeight',
+        type: 'rectAnnotation',
       });
     });
   });
@@ -55,9 +54,7 @@ describe('chart selectors', () => {
     };
 
     it('should produce correct series', () => {
-      expect(
-        getResponseTimeSeries({ apmTimeseries, anomalyTimeseries: undefined })
-      ).toEqual([
+      expect(getResponseTimeSeries({ apmTimeseries })).toEqual([
         {
           color: '#6092c0',
           data: [
@@ -92,10 +89,7 @@ describe('chart selectors', () => {
     });
 
     it('should return 3 series', () => {
-      expect(
-        getResponseTimeSeries({ apmTimeseries, anomalyTimeseries: undefined })
-          .length
-      ).toBe(3);
+      expect(getResponseTimeSeries({ apmTimeseries }).length).toBe(3);
     });
   });
 

x-pack/plugins/apm/public/selectors/chart_selectors.ts

@@ -34,6 +34,7 @@ export interface ITransactionChartData {
   tpmSeries?: ITpmBucket[];
   responseTimeSeries?: TimeSeries[];
   mlJobId: string | undefined;
+  anomalySeries?: TimeSeries[];
 }
 
 const INITIAL_DATA: Partial<TimeSeriesAPIResponse> = {
@@ -58,16 +59,33 @@ export function getTransactionCharts(
 
     transactionCharts.responseTimeSeries = getResponseTimeSeries({
       apmTimeseries,
+    });
+
+    transactionCharts.anomalySeries = getResponseTimeAnnomalySeries({
       anomalyTimeseries,
     });
   }
   return transactionCharts;
 }
 
+function getResponseTimeAnnomalySeries({
+  anomalyTimeseries,
+}: {
+  anomalyTimeseries: TimeSeriesAPIResponse['anomalyTimeseries'];
+}): TimeSeries[] | undefined {
+  if (anomalyTimeseries) {
+    return [
+      getAnomalyBoundariesSeries(anomalyTimeseries?.anomalyBoundaries),
+      getAnomalyScoreSeries(anomalyTimeseries?.anomalyScore),
+    ];
+  }
+}
+
 export function getResponseTimeSeries({
   apmTimeseries,
-  anomalyTimeseries,
-}: TimeSeriesAPIResponse) {
+}: {
+  apmTimeseries: TimeSeriesAPIResponse['apmTimeseries'];
+}) {
   const { overallAvgDuration } = apmTimeseries;
   const { avg, p95, p99 } = apmTimeseries.responseTimes;
 
@@ -107,16 +125,6 @@ export function getResponseTimeSeries({
     },
   ];
 
-  if (anomalyTimeseries) {
-    // insert after Avg. series
-    series.splice(
-      1,
-      0,
-      getAnomalyBoundariesSeries(anomalyTimeseries.anomalyBoundaries),
-      getAnomalyScoreSeries(anomalyTimeseries.anomalyScore)
-    );
-  }
-
   return series;
 }
 
@@ -125,12 +133,9 @@ export function getAnomalyScoreSeries(data: RectCoordinate[]) {
     title: i18n.translate('xpack.apm.transactions.chart.anomalyScoreLabel', {
       defaultMessage: 'Anomaly score',
     }),
-    hideLegend: true,
-    hideTooltipValue: true,
     data,
-    type: 'areaMaxHeight',
-    color: 'none',
-    areaColor: rgba(theme.euiColorVis9, 0.1),
+    type: 'rectAnnotation',
+    color: theme.euiColorVis9,
   };
 }
 
@@ -142,12 +147,9 @@ function getAnomalyBoundariesSeries(data: Coordinate[]) {
         defaultMessage: 'Anomaly Boundaries',
       }
     ),
-    hideLegend: true,
-    hideTooltipValue: true,
     data,
     type: 'area',
-    color: 'none',
-    areaColor: rgba(theme.euiColorVis1, 0.1),
+    color: rgba(theme.euiColorVis1, 0.5),
   };
 }