[ML] Anomaly Explorer: Display markers for scheduled events in distri…

…bution type anomaly charts (elastic#192377)

## Summary

Fix for [elastic#129304](elastic#129304)

Previously, for distribution type charts, we displayed calendar event
markers only for anomalous data points. The changes improve the display
of event markers for such chart types, including showing calendar event
markers even when there is no underlying data point.

| Scenario | Before    | After    |
| :---:   | :---: | :---: |
| Rare chart |
![image](https://github.com/user-attachments/assets/c3e186c0-0ec8-434f-a845-3f9e703431dd)
|
![image](https://github.com/user-attachments/assets/3dd51cd1-6972-4343-bbc8-8e5f38d7c6bd)
|
| Population chart | ![Zrzut ekranu 2024-09-9 o 16 16
01](https://github.com/user-attachments/assets/df22dc40-3c8b-46fe-9a5a-02a41278245c)
|
![image](https://github.com/user-attachments/assets/c198e75e-14c8-4194-9d71-2358d25f21d5)
|
| Single metric chart (no difference) |
![image](https://github.com/user-attachments/assets/d0546ba0-46b1-4d2e-9976-fe49bcd4d2da)
|
![image](https://github.com/user-attachments/assets/c11ec696-b1f4-4ddf-9542-037b8dd2d31f)
|

x-pack/plugins/ml/common/constants/charts.ts

@@ -13,3 +13,5 @@ export const CHART_TYPE = {
 } as const;
 
 export type ChartType = (typeof CHART_TYPE)[keyof typeof CHART_TYPE];
+
+export const SCHEDULE_EVENT_MARKER_ENTITY = 'schedule_event_marker_entity';

x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js

@@ -40,6 +40,7 @@ import { CHART_TYPE } from '../explorer_constants';
 import { CHART_HEIGHT, TRANSPARENT_BACKGROUND } from './constants';
 import { filter } from 'rxjs';
 import { drawCursor } from './utils/draw_anomaly_explorer_charts_cursor';
+import { SCHEDULE_EVENT_MARKER_ENTITY } from '../../../../common/constants/charts';
 
 const CONTENT_WRAPPER_HEIGHT = 215;
 const SCHEDULED_EVENT_MARKER_HEIGHT = 5;
@@ -158,12 +159,29 @@ export class ExplorerChartDistribution extends React.Component {
         .key((d) => d.entity)
         .entries(chartData)
         .sort((a, b) => {
+          // To display calendar event markers we populate the chart with fake data points.
+          // If a category has fake data points, it should be sorted to the end.
+          const aHasFakeData = a.values.some((d) => d.entity === SCHEDULE_EVENT_MARKER_ENTITY);
+          const bHasFakeData = b.values.some((d) => d.entity === SCHEDULE_EVENT_MARKER_ENTITY);
+
+          if (aHasFakeData && !bHasFakeData) {
+            return 1;
+          }
+
+          if (bHasFakeData && !aHasFakeData) {
+            return -1;
+          }
+
           return b.values.length - a.values.length;
         })
         .filter((d, i) => {
           // only filter for rare charts
           if (chartType === CHART_TYPE.EVENT_DISTRIBUTION) {
-            return i < categoryLimit || d.key === highlight;
+            return (
+              i < categoryLimit ||
+              d.key === highlight ||
+              d.values.some((d) => d.entity === SCHEDULE_EVENT_MARKER_ENTITY)
+            );
           }
           return true;
         })
@@ -373,7 +391,8 @@ export class ExplorerChartDistribution extends React.Component {
         .orient('left')
         .innerTickSize(0)
         .outerTickSize(0)
-        .tickPadding(10);
+        .tickPadding(10)
+        .tickFormat((d) => (d === SCHEDULE_EVENT_MARKER_ENTITY ? null : d));
 
       if (fieldFormat !== undefined) {
         yAxis.tickFormat((d) => fieldFormat.convert(d, 'text'));
@@ -518,7 +537,8 @@ export class ExplorerChartDistribution extends React.Component {
       const tooltipData = [{ label: formattedDate }];
       const seriesKey = config.detectorLabel;
 
-      if (marker.entity !== undefined) {
+      // Hide entity for scheduled events with mocked value.
+      if (marker.entity !== undefined && marker.entity !== SCHEDULE_EVENT_MARKER_ENTITY) {
         tooltipData.push({
           label: i18n.translate('xpack.ml.explorer.distributionChart.entityLabel', {
             defaultMessage: 'entity',
@@ -590,7 +610,11 @@ export class ExplorerChartDistribution extends React.Component {
             });
           }
         }
-      } else if (chartType !== CHART_TYPE.EVENT_DISTRIBUTION) {
+      } else if (
+        chartType !== CHART_TYPE.EVENT_DISTRIBUTION &&
+        // Hide value for scheduled events with mocked value.
+        marker.entity !== SCHEDULE_EVENT_MARKER_ENTITY
+      ) {
         tooltipData.push({
           label: i18n.translate(
             'xpack.ml.explorer.distributionChart.valueWithoutAnomalyScoreLabel',

x-pack/plugins/ml/server/models/results_service/anomaly_charts.ts

@@ -53,7 +53,7 @@ import { parseInterval } from '../../../common/util/parse_interval';
 import { getDatafeedAggregations } from '../../../common/util/datafeed_utils';
 import { findAggField } from '../../../common/util/validation_utils';
 import type { ChartType } from '../../../common/constants/charts';
-import { CHART_TYPE } from '../../../common/constants/charts';
+import { CHART_TYPE, SCHEDULE_EVENT_MARKER_ENTITY } from '../../../common/constants/charts';
 import { getChartType } from '../../../common/util/chart_utils';
 import type { MlJob } from '../..';
 
@@ -1124,9 +1124,19 @@ export function anomalyChartsDataProvider(mlClient: MlClient, client: IScopedClu
         each(scheduledEvents, (events, time) => {
           const chartPoint = findChartPointForTime(chartDataForPointSearch, Number(time));
           if (chartPoint !== undefined) {
-            // Note if the scheduled event coincides with an absence of the underlying metric data,
-            // we don't worry about plotting the event.
             chartPoint.scheduledEvents = events;
+            // We do not want to create additional points for single metric charts
+            // as it could break the chart.
+          } else if (chartType !== CHART_TYPE.SINGLE_METRIC) {
+            // If there's no underlying metric data point for the scheduled event,
+            // create a new chart point with a value of 0.
+            const eventChartPoint: ChartPoint = {
+              date: Number(time),
+              value: 0,
+              entity: SCHEDULE_EVENT_MARKER_ENTITY,
+              scheduledEvents: events,
+            };
+            chartData.push(eventChartPoint);
           }
         });
       }