[ML] Add annotation markers to time series brush area to indicate annotations exist outside of selected range

x-pack/plugins/ml/public/application/components/annotations/annotations_table/annotations_table.js

@@ -98,7 +98,7 @@ class AnnotationsTableUI extends Component {
     if (dataCounts.processed_record_count > 0) {
       // Load annotations for the selected job.
       ml.annotations
-        .getAnnotations({
+        .getAnnotations$({
           jobIds: [job.job_id],
           earliestMs: null,
           latestMs: null,

x-pack/plugins/ml/public/application/components/annotations/annotations_table/annotations_table.test.js

@@ -24,7 +24,7 @@ jest.mock('../../../services/ml_api_service', () => {
   return {
     ml: {
       annotations: {
-        getAnnotations: jest.fn().mockReturnValue(mockAnnotations$),
+        getAnnotations$: jest.fn().mockReturnValue(mockAnnotations$),
       },
     },
   };

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

@@ -392,7 +392,7 @@ export function loadAnnotationsTableData(selectedCells, selectedJobs, interval,
 
   return new Promise((resolve) => {
     ml.annotations
-      .getAnnotations({
+      .getAnnotations$({
         jobIds,
         earliestMs: timeRange.earliestMs,
         latestMs: timeRange.latestMs,

x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details.js

@@ -40,7 +40,6 @@ export class JobDetailsUI extends Component {
   }
 
   render() {
-    console.log('this.props', this.props);
     const { job } = this.state;
     const {
       services: {

x-pack/plugins/ml/public/application/services/ml_api_service/annotations.ts

@@ -13,7 +13,7 @@ import { http, http$ } from '../http_service';
 import { basePath } from './index';
 
 export const annotations = {
-  getAnnotations(obj: {
+  getAnnotations$(obj: {
     jobIds: string[];
     earliestMs: number;
     latestMs: number;
@@ -30,6 +30,23 @@ export const annotations = {
     });
   },
 
+  getAnnotations(obj: {
+    jobIds: string[];
+    earliestMs: number;
+    latestMs: number;
+    maxAnnotations: number;
+    fields: FieldToBucket[];
+    detectorIndex: number;
+    entities: any[];
+  }) {
+    const body = JSON.stringify(obj);
+    return http<GetAnnotationsResponse>({
+      path: `${basePath()}/annotations`,
+      method: 'POST',
+      body,
+    });
+  },
+
   indexAnnotation(obj: Annotation) {
     const body = JSON.stringify(obj);
     return http<any>({

x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer_annotations.scss

@@ -76,3 +76,25 @@ $mlAnnotationRectDefaultFillOpacity: 0.05;
 .mlAnnotationHidden {
   display: none;
 }
+
+// context annotation marker
+.mlContextAnnotationRect {
+  stroke: $euiColorFullShade;
+  stroke-width: $mlAnnotationBorderWidth;
+  stroke-opacity: $mlAnnotationRectDefaultStrokeOpacity;
+  transition: stroke-opacity $euiAnimSpeedFast;
+
+  fill: $euiColorFullShade;
+  fill-opacity: $mlAnnotationRectDefaultFillOpacity;
+  transition: fill-opacity $euiAnimSpeedFast;
+
+  shape-rendering: geometricPrecision;
+}
+
+.mlContextAnnotationRect-isBlur {
+  stroke-opacity: $mlAnnotationRectDefaultStrokeOpacity / 2;
+  transition: stroke-opacity $euiAnimSpeedFast;
+
+  fill-opacity: $mlAnnotationRectDefaultFillOpacity / 2;
+  transition: fill-opacity $euiAnimSpeedFast;
+}

x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js

@@ -25,6 +25,7 @@ import { annotation$ } from '../../../services/annotations_service';
 import { formatValue } from '../../../formatters/format_value';
 import {
   LINE_CHART_ANOMALY_RADIUS,
+  ANNOTATION_SYMBOL_HEIGHT,
   MULTI_BUCKET_SYMBOL_SIZE,
   SCHEDULED_EVENT_SYMBOL_HEIGHT,
   drawLineChartDots,
@@ -48,11 +49,13 @@ import {
   renderAnnotations,
   highlightFocusChartAnnotation,
   unhighlightFocusChartAnnotation,
+  ANNOTATION_MIN_WIDTH,
 } from './timeseries_chart_annotations';
 
 const focusZoomPanelHeight = 25;
 const focusChartHeight = 310;
 const focusHeight = focusZoomPanelHeight + focusChartHeight;
+const annotationHeight = ANNOTATION_SYMBOL_HEIGHT + 4;
 const contextChartHeight = 60;
 const contextChartLineTopMargin = 3;
 const chartSpacing = 25;
@@ -82,7 +85,13 @@ const anomalyGrayScale = d3.scale
 
 function getSvgHeight() {
   return (
-    focusHeight + contextChartHeight + swimlaneHeight + chartSpacing + margin.top + margin.bottom
+    focusHeight +
+    contextChartHeight +
+    swimlaneHeight +
+    annotationHeight +
+    chartSpacing +
+    margin.top +
+    margin.bottom
   );
 }
 
@@ -225,7 +234,12 @@ class TimeseriesChartIntl extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (this.props.renderFocusChartOnly === false || prevProps.svgWidth !== this.props.svgWidth) {
+    if (
+      this.props.renderFocusChartOnly === false ||
+      prevProps.svgWidth !== this.props.svgWidth ||
+      prevProps.showAnnotations !== this.props.showAnnotations ||
+      prevProps.annotationData !== this.props.annotationData
+    ) {
       this.renderChart();
       this.drawContextChartSelection();
     }
@@ -367,7 +381,13 @@ class TimeseriesChartIntl extends Component {
 
     // Draw each of the component elements.
     createFocusChart(focus, this.vizWidth, focusHeight);
-    drawContextElements(context, this.vizWidth, contextChartHeight, swimlaneHeight);
+    drawContextElements(
+      context,
+      this.vizWidth,
+      contextChartHeight,
+      swimlaneHeight,
+      annotationHeight
+    );
   }
 
   contextChartInitialized = false;
@@ -947,8 +967,14 @@ class TimeseriesChartIntl extends Component {
   }
 
   drawContextElements(cxtGroup, cxtWidth, cxtChartHeight, swlHeight) {
-    const { bounds, contextChartData, contextForecastData, modelPlotEnabled } = this.props;
-
+    const {
+      bounds,
+      contextChartData,
+      contextForecastData,
+      modelPlotEnabled,
+      annotationData,
+      showAnnotations,
+    } = this.props;
     const data = contextChartData;
 
     this.contextXScale = d3.time
@@ -1065,6 +1091,57 @@ class TimeseriesChartIntl extends Component {
     cxtGroup.append('path').datum(data).attr('class', 'values-line').attr('d', contextValuesLine);
     drawLineChartDots(data, cxtGroup, contextValuesLine, 1);
 
+    // Add annotation markers to the context area
+    cxtGroup.append('g').classed('mlContextAnnotations', true);
+
+    const [contextXRangeStart, contextXRangeEnd] = this.contextXScale.range();
+    const ctxAnnotations = cxtGroup
+      .select('.mlContextAnnotations')
+      .selectAll('g.mlContextAnnotation')
+      .data(showAnnotations && annotationData ? annotationData : [], (d) => d._id || '');
+
+    ctxAnnotations.enter().append('g').classed('mlContextAnnotation', true);
+
+    const ctxAnnotationRects = ctxAnnotations
+      .selectAll('.mlContextAnnotationRect')
+      .data((d) => [d]);
+
+    ctxAnnotationRects
+      .enter()
+      .append('rect')
+      .attr('rx', 2)
+      .attr('ry', 2)
+      .classed('mlContextAnnotationRect', true);
+
+    ctxAnnotationRects
+      .attr('x', (d) => {
+        const date = moment(d.timestamp);
+        let xPos = this.contextXScale(date);
+
+        if (xPos - ANNOTATION_SYMBOL_HEIGHT <= contextXRangeStart) {
+          xPos = 0;
+        }
+        if (xPos + ANNOTATION_SYMBOL_HEIGHT >= contextXRangeEnd) {
+          xPos = contextXRangeEnd - ANNOTATION_SYMBOL_HEIGHT;
+        }
+
+        return xPos;
+      })
+      .attr('y', cxtChartHeight + swlHeight + 2)
+      .attr('height', ANNOTATION_SYMBOL_HEIGHT)
+      .attr('width', (d) => {
+        const s = this.contextXScale(moment(d.timestamp)) + 1;
+        const e =
+          typeof d.end_timestamp !== 'undefined'
+            ? this.contextXScale(moment(d.end_timestamp)) - 1
+            : s + ANNOTATION_MIN_WIDTH;
+        const width = Math.max(ANNOTATION_MIN_WIDTH, e - s);
+        return width;
+      });
+
+    ctxAnnotations.classed('mlAnnotationHidden', !showAnnotations);
+    ctxAnnotationRects.exit().remove();
+
     // Create the path elements for the forecast value line and bounds area.
     if (contextForecastData !== undefined) {
       cxtGroup
@@ -1120,7 +1197,7 @@ class TimeseriesChartIntl extends Component {
       .call(brush)
       .selectAll('rect')
       .attr('y', -1)
-      .attr('height', contextChartHeight + swimlaneHeight + 1);
+      .attr('height', contextChartHeight + swimlaneHeight + annotationHeight + 1);
 
     // move the left and right resize areas over to
     // be under the handles

x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart_annotations.ts

@@ -90,7 +90,7 @@ const ANNOTATION_DEFAULT_LEVEL = 1;
 const ANNOTATION_LEVEL_HEIGHT = 28;
 const ANNOTATION_UPPER_RECT_MARGIN = 0;
 const ANNOTATION_UPPER_TEXT_MARGIN = -7;
-const ANNOTATION_MIN_WIDTH = 2;
+export const ANNOTATION_MIN_WIDTH = 2;
 const ANNOTATION_RECT_BORDER_RADIUS = 2;
 const ANNOTATION_TEXT_VERTICAL_OFFSET = 26;
 const ANNOTATION_TEXT_RECT_VERTICAL_OFFSET = 12;

x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js

@@ -36,7 +36,10 @@ import {
 import { getToastNotifications } from '../util/dependency_cache';
 import { ResizeChecker } from '../../../../../../src/plugins/kibana_utils/public';
 
-import { ANOMALIES_TABLE_DEFAULT_QUERY_SIZE } from '../../../common/constants/search';
+import {
+  ANNOTATIONS_TABLE_DEFAULT_QUERY_SIZE,
+  ANOMALIES_TABLE_DEFAULT_QUERY_SIZE,
+} from '../../../common/constants/search';
 import {
   isModelPlotEnabled,
   isModelPlotChartableForDetector,
@@ -84,6 +87,7 @@ import {
 } from './timeseriesexplorer_utils';
 import { EMPTY_FIELD_VALUE_LABEL } from './components/entity_control/entity_control';
 import { ANOMALY_DETECTION_DEFAULT_TIME_RANGE } from '../../../common/constants/settings';
+import { extractErrorMessage } from '../../../common/util/errors';
 
 // Used to indicate the chart is being plotted across
 // all partition field values, where the cardinality of the field cannot be
@@ -128,6 +132,8 @@ function getTimeseriesexplorerDefaultState() {
     dataNotChartable: false,
     entitiesLoading: false,
     entityValues: {},
+    annotationError: undefined,
+    annotationData: [],
     focusAnnotationData: [],
     focusAggregations: {},
     focusAggregationInterval: {},
@@ -188,6 +194,7 @@ export class TimeSeriesExplorer extends React.Component {
         this.resizeRef.current !== null ? this.resizeRef.current.offsetWidth - containerPadding : 0,
     });
   };
+  unmounted = false;
 
   /**
    * Subject for listening brush time range selection.
@@ -421,6 +428,29 @@ export class TimeSeriesExplorer extends React.Component {
       );
   };
 
+  /**
+   * Loads the full list of annotations for job without any aggs or time boundaries
+   * used to indicate existence of annotations that are beyond the selected time
+   * in the time series brush area
+   */
+  loadAnnotations = async (jobId) => {
+    ml.annotations
+      .getAnnotations({
+        jobIds: [jobId],
+        earliestMs: null,
+        latestMs: null,
+        maxAnnotations: ANNOTATIONS_TABLE_DEFAULT_QUERY_SIZE,
+      })
+      .then((resp) => {
+        if (!this.unmounted && resp?.success === true) {
+          this.setState({ annotationData: resp.annotations[jobId] ?? [] });
+        }
+      })
+      .catch((error) => {
+        this.setState({ annotationData: [], annotationError: extractErrorMessage(error) });
+      });
+  };
+
   /**
    * Loads available entity values.
    * @param {Array} entities - Entity controls configuration
@@ -999,6 +1029,7 @@ export class TimeSeriesExplorer extends React.Component {
         previousProps.selectedForecastId !== this.props.selectedForecastId ||
         previousProps.selectedJobId !== this.props.selectedJobId;
       this.loadSingleMetricData(fullRefresh);
+      this.loadAnnotations(this.props.selectedJobId);
     }
 
     if (previousProps === undefined) {
@@ -1026,6 +1057,7 @@ export class TimeSeriesExplorer extends React.Component {
   componentWillUnmount() {
     this.subscriptions.unsubscribe();
     this.resizeChecker.destroy();
+    this.unmounted = true;
   }
 
   render() {
@@ -1046,6 +1078,7 @@ export class TimeSeriesExplorer extends React.Component {
       dataNotChartable,
       entityValues,
       focusAggregationInterval,
+      annotationData,
       focusAnnotationError,
       focusAnnotationData,
       focusAggregations,
@@ -1077,6 +1110,7 @@ export class TimeSeriesExplorer extends React.Component {
       contextForecastData,
       contextAggregationInterval,
       swimlaneData,
+      annotationData,
       focusAnnotationData,
       focusChartData,
       focusForecastData,
@@ -1111,7 +1145,6 @@ export class TimeSeriesExplorer extends React.Component {
       isEqual(this.previousChartProps.focusForecastData, chartProps.focusForecastData) &&
       isEqual(this.previousChartProps.focusChartData, chartProps.focusChartData) &&
       isEqual(this.previousChartProps.focusAnnotationData, chartProps.focusAnnotationData) &&
-      this.previousShowAnnotations === showAnnotations &&
       this.previousShowForecast === showForecast &&
       this.previousShowModelBounds === showModelBounds &&
       this.props.previousRefresh === lastRefresh
@@ -1120,7 +1153,6 @@ export class TimeSeriesExplorer extends React.Component {
     }
 
     this.previousChartProps = chartProps;
-    this.previousShowAnnotations = showAnnotations;
     this.previousShowForecast = showForecast;
     this.previousShowModelBounds = showModelBounds;
 

x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_utils/get_focus_data.ts

@@ -83,7 +83,7 @@ export function getFocusData(
     ),
     // Query 4 - load any annotations for the selected job.
     ml.annotations
-      .getAnnotations({
+      .getAnnotations$({
         jobIds: [selectedJob.job_id],
         earliestMs: searchBounds.min.valueOf(),
         latestMs: searchBounds.max.valueOf(),

x-pack/plugins/ml/public/application/util/chart_utils.js

@@ -15,6 +15,7 @@ import { ML_PAGES } from '../../../common/constants/ml_url_generator';
 export const LINE_CHART_ANOMALY_RADIUS = 7;
 export const MULTI_BUCKET_SYMBOL_SIZE = 100; // In square pixels for use with d3 symbol.size
 export const SCHEDULED_EVENT_SYMBOL_HEIGHT = 5;
+export const ANNOTATION_SYMBOL_HEIGHT = 10;
 
 const MAX_LABEL_WIDTH = 100;