[ML] Add annotation markers to the Anomaly Swimlane axis

x-pack/plugins/ml/public/application/explorer/actions/load_explorer_data.ts

@@ -23,6 +23,7 @@ import {
   loadAnomaliesTableData,
   loadFilteredTopInfluencers,
   loadTopInfluencers,
+  loadOverallAnnotations,
   AppStateSelectedCells,
   ExplorerJob,
 } from '../explorer_utils';
@@ -55,6 +56,10 @@ const memoize = <T extends (...a: any[]) => any>(func: T, context?: any) => {
   return memoizeOne(wrapWithLastRefreshArg<T>(func, context) as any, memoizeIsEqual);
 };
 
+const memoizedLoadOverallAnnotations = memoize<typeof loadOverallAnnotations>(
+  loadOverallAnnotations
+);
+
 const memoizedLoadAnnotationsTableData = memoize<typeof loadAnnotationsTableData>(
   loadAnnotationsTableData
 );
@@ -149,9 +154,17 @@ const loadExplorerDataProvider = (
 
     const dateFormatTz = getDateFormatTz();
 
+    const interval = swimlaneBucketInterval.asSeconds();
+
     // First get the data where we have all necessary args at hand using forkJoin:
     // annotationsData, anomalyChartRecords, influencers, overallState, tableData, topFieldValues
     return forkJoin({
+      overallAnnotations: memoizedLoadOverallAnnotations(
+        lastRefresh,
+        selectedJobs,
+        interval,
+        bounds
+      ),
       annotationsData: memoizedLoadAnnotationsTableData(
         lastRefresh,
         selectedCells,
@@ -214,6 +227,7 @@ const loadExplorerDataProvider = (
       tap(explorerService.setChartsDataLoading),
       mergeMap(
         ({
+          overallAnnotations,
           anomalyChartRecords,
           influencers,
           overallState,
@@ -271,6 +285,7 @@ const loadExplorerDataProvider = (
             }),
             map(({ viewBySwimlaneState, filteredTopInfluencers }) => {
               return {
+                overallAnnotations,
                 annotations: annotationsData,
                 influencers: filteredTopInfluencers as any,
                 loading: false,

x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx

@@ -87,6 +87,7 @@ export const AnomalyTimeline: FC<AnomalyTimelineProps> = React.memo(
       viewByPerPage,
       swimlaneLimit,
       loading,
+      overallAnnotations,
     } = explorerState;
 
     const menuItems = useMemo(() => {
@@ -240,6 +241,7 @@ export const AnomalyTimeline: FC<AnomalyTimelineProps> = React.memo(
             isLoading={loading}
             noDataWarning={<NoOverallData />}
             showTimeline={false}
+            annotationsData={overallAnnotations.annotationsData}
           />
 
           <EuiSpacer size="m" />
@@ -257,6 +259,7 @@ export const AnomalyTimeline: FC<AnomalyTimelineProps> = React.memo(
                 })
               }
               timeBuckets={timeBuckets}
+              showLegend={false}
               swimlaneData={viewBySwimlaneData as ViewBySwimLaneData}
               swimlaneType={SWIMLANE_TYPE.VIEW_BY}
               selection={selectedCells}

x-pack/plugins/ml/public/application/explorer/explorer_utils.d.ts

@@ -110,6 +110,12 @@ declare interface SwimlaneBounds {
   latest: number;
 }
 
+export declare const loadOverallAnnotations: (
+  selectedJobs: ExplorerJob[],
+  interval: number,
+  bounds: TimeRangeBounds
+) => Promise<AnnotationsTable>;
+
 export declare const loadAnnotationsTableData: (
   selectedCells: AppStateSelectedCells | undefined,
   selectedJobs: ExplorerJob[],

x-pack/plugins/ml/public/application/explorer/explorer_utils.js

@@ -385,6 +385,57 @@ export function getViewBySwimlaneOptions({
   };
 }
 
+export function loadOverallAnnotations(selectedJobs, interval, bounds) {
+  const jobIds = selectedJobs.map((d) => d.id);
+  const timeRange = getSelectionTimeRange(undefined, interval, bounds);
+
+  return new Promise((resolve) => {
+    ml.annotations
+      .getAnnotations$({
+        jobIds,
+        earliestMs: timeRange.earliestMs,
+        latestMs: timeRange.latestMs,
+        maxAnnotations: ANNOTATIONS_TABLE_DEFAULT_QUERY_SIZE,
+      })
+      .toPromise()
+      .then((resp) => {
+        if (resp.error !== undefined || resp.annotations === undefined) {
+          const errorMessage = extractErrorMessage(resp.error);
+          return resolve({
+            annotationsData: [],
+            error: errorMessage !== '' ? errorMessage : undefined,
+          });
+        }
+
+        const annotationsData = [];
+        jobIds.forEach((jobId) => {
+          const jobAnnotations = resp.annotations[jobId];
+          if (jobAnnotations !== undefined) {
+            annotationsData.push(...jobAnnotations);
+          }
+        });
+
+        return resolve({
+          annotationsData: annotationsData
+            .sort((a, b) => {
+              return a.timestamp - b.timestamp;
+            })
+            .map((d, i) => {
+              d.key = (i + 1).toString();
+              return d;
+            }),
+        });
+      })
+      .catch((resp) => {
+        const errorMessage = extractErrorMessage(resp);
+        return resolve({
+          annotationsData: [],
+          error: errorMessage !== '' ? errorMessage : undefined,
+        });
+      });
+  });
+}
+
 export function loadAnnotationsTableData(selectedCells, selectedJobs, interval, bounds) {
   const jobIds =
     selectedCells !== undefined && selectedCells.viewByFieldName === VIEW_BY_JOB_LABEL

x-pack/plugins/ml/public/application/explorer/reducers/explorer_reducer/state.ts

@@ -27,6 +27,7 @@ import { SWIM_LANE_DEFAULT_PAGE_SIZE } from '../../explorer_constants';
 import { InfluencersFilterQuery } from '../../../../../common/types/es_client';
 
 export interface ExplorerState {
+  overallAnnotations: AnnotationsTable;
   annotations: AnnotationsTable;
   anomalyChartsDataLoading: boolean;
   chartsData: ExplorerChartsData;
@@ -65,6 +66,11 @@ function getDefaultIndexPattern() {
 
 export function getExplorerDefaultState(): ExplorerState {
   return {
+    overallAnnotations: {
+      error: undefined,
+      annotationsData: [],
+      aggregations: {},
+    },
     annotations: {
       error: undefined,
       annotationsData: [],

x-pack/plugins/ml/public/application/explorer/swimlane_annotation_container.tsx

@@ -0,0 +1,138 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { FC, useEffect } from 'react';
+import d3 from 'd3';
+import { scaleTime } from 'd3-scale';
+import { i18n } from '@kbn/i18n';
+import { formatHumanReadableDateTimeSeconds } from '../../../common/util/date_utils';
+import { AnnotationsTable } from '../../../common/types/annotations';
+import { ChartTooltipService } from '../components/chart_tooltip';
+
+const ANNOTATION_HEIGHT = 12;
+export const Y_AXIS_LABEL_WIDTH = 170;
+export const Y_AXIS_LABEL_PADDING = 8;
+export const Y_AXIS_LABEL_FONT_COLOR = '#6a717d';
+
+interface SwimlaneAnnotationContainerProps {
+  chartWidth: number;
+  domain: {
+    min: number;
+    max: number;
+  };
+  annotationsData?: AnnotationsTable['annotationsData'];
+  tooltipService: ChartTooltipService;
+}
+
+export const SwimlaneAnnotationContainer: FC<SwimlaneAnnotationContainerProps> = ({
+  chartWidth,
+  domain,
+  annotationsData,
+  tooltipService,
+}) => {
+  const canvasRef = React.useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (canvasRef.current !== null && Array.isArray(annotationsData)) {
+      const chartElement = d3.select(canvasRef.current);
+      chartElement.selectAll('*').remove();
+
+      const startingXPos = Y_AXIS_LABEL_WIDTH + 2 * Y_AXIS_LABEL_PADDING;
+      const endingXPos = startingXPos + chartWidth - Y_AXIS_LABEL_PADDING;
+
+      const svg = chartElement
+        .append('svg')
+        .attr('width', '100%')
+        .attr('height', ANNOTATION_HEIGHT);
+
+      const xScale = scaleTime().domain([domain.min, domain.max]).range([startingXPos, endingXPos]);
+
+      // Add Annotation y axis label
+      svg
+        .append('text')
+        .attr('text-anchor', 'end')
+        .attr('class', 'swimlaneAnnotationLabel')
+        .text(
+          i18n.translate('xpack.ml.explorer.swimlaneAnnotationLabel', {
+            defaultMessage: 'Annotations',
+          })
+        )
+        .attr('x', Y_AXIS_LABEL_WIDTH + Y_AXIS_LABEL_PADDING)
+        .attr('y', ANNOTATION_HEIGHT)
+        .style('fill', Y_AXIS_LABEL_FONT_COLOR)
+        .style('font-size', '12px');
+
+      // Add border
+      svg
+        .append('rect')
+        .attr('x', startingXPos)
+        .attr('y', 0)
+        .attr('height', ANNOTATION_HEIGHT)
+        .attr('width', endingXPos - startingXPos)
+        .style('stroke', '#cccccc')
+        .style('fill', 'none')
+        .style('stroke-width', 1);
+
+      // Add annotation marker
+      annotationsData.forEach((d) => {
+        const annotationWidth = d.end_timestamp ? xScale(d.end_timestamp) - xScale(d.timestamp) : 0;
+        svg
+          .append('rect')
+          .classed('mlAnnotationRect', true)
+          .attr('x', xScale(d.timestamp))
+          .attr('y', 0)
+          .attr('height', ANNOTATION_HEIGHT)
+          .attr('width', Math.max(annotationWidth, 5))
+          .on('mouseover', function () {
+            const startingTime = formatHumanReadableDateTimeSeconds(d.timestamp);
+            const endingTime =
+              d.end_timestamp !== undefined
+                ? formatHumanReadableDateTimeSeconds(d.end_timestamp)
+                : undefined;
+
+            const timeLabel = endingTime ? `${startingTime} - ${endingTime}` : startingTime;
+
+            const tooltipData = [
+              {
+                label: `${d.annotation}`,
+                seriesIdentifier: {
+                  key: 'anomaly_timeline',
+                  specId: d._id ?? `${d.annotation}-${d.timestamp}-label`,
+                },
+                valueAccessor: 'label',
+              },
+              {
+                label: `${timeLabel}`,
+                seriesIdentifier: {
+                  key: 'anomaly_timeline',
+                  specId: d._id ?? `${d.annotation}-${d.timestamp}-ts`,
+                },
+                valueAccessor: 'time',
+              },
+            ];
+            if (d.partition_field_name !== undefined && d.partition_field_value !== undefined) {
+              tooltipData.push({
+                label: `${d.partition_field_name}: ${d.partition_field_value}`,
+                seriesIdentifier: {
+                  key: 'anomaly_timeline',
+                  specId: d._id
+                    ? `${d._id}-partition`
+                    : `${d.partition_field_name}-${d.partition_field_value}-label`,
+                },
+                valueAccessor: 'partition',
+              });
+            }
+            // @ts-ignore we don't need all the fields for tooltip to show
+            tooltipService.show(tooltipData, this);
+          })
+          .on('mouseout', () => tooltipService.hide());
+      });
+    }
+  }, [chartWidth, domain, annotationsData]);
+
+  return <div ref={canvasRef} />;
+};