[ML] Annotations UI Bugfixes (#27477)

- Fixes the default sorting of the annotations table to sort by starting timestamp.
- Fixes sorting of the label column by adding a "Label" column header.
- Fixes creating annotations when starting over model bounds by setting pointer-events: none to non-interactive chart elements like model bound areas and lines
- Fixes hovering of anomaly markers on top of annotation by changing the order of SVG wrapper elements in the Single Metric Chart.
- Fixes a regression and re-enables the display of the labels in the annotation chart in Single Metric Viewer.
- Fixes missing background color of annotation labels in Firefox/IE.

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

@@ -311,8 +311,9 @@ class AnnotationsTable extends Component {
     if (isNumberBadgeVisible) {
       columns.unshift({
         field: 'key',
-        name: '',
-        width: '50px',
+        name: 'Label',
+        sortable: true,
+        width: '60px',
         render: (key) => {
           return (
             <EuiBadge color="default">
@@ -367,7 +368,11 @@ class AnnotationsTable extends Component {
         pagination={{
           pageSizeOptions: [5, 10, 25]
         }}
-        sorting={true}
+        sorting={{
+          sort: {
+            field: 'timestamp', direction: 'asc'
+          }
+        }}
         rowProps={getRowProps}
       />
     );

x-pack/plugins/ml/public/timeseriesexplorer/_timeseriesexplorer.scss

@@ -125,16 +125,19 @@
 
     .area.bounds {
       fill: rgba(50, 167, 194, 0.25); // Needs variable
+      pointer-events: none;
     }
 
     .values-line {
       fill: none;
       stroke: #32a7c2; // Needs variable
       stroke-width: 2;
+      pointer-events: none;
     }
 
     .values-line.forecast {
       stroke: #cca300; // Needs variable
+      pointer-events: none;
     }
 
     .values-dots circle {
@@ -148,6 +151,7 @@
 
     .area.forecast {
       fill: rgba(204, 163, 0, 0.25); // Needs variable
+      pointer-events: none;
     }
 
     .metric-value {

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

@@ -66,10 +66,6 @@ $mlAnnotationRectDefaultFillOpacity: 0.05;
 .mlAnnotationTextRect {
   fill: $euiColorLightShade;
   transition: fill $euiAnimSpeedFast;
-  // TODO This is hard-coded for now for labels A-Z
-  // Needs to support dynamic SVG width.
-  width: $euiSizeL;
-  height: $euiSize + $euiSizeXS;
 }
 
 .mlAnnotationTextRect-isBlur {

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

@@ -489,6 +489,7 @@ export class TimeseriesChart extends React.Component {
       .attr('class', 'chart-border');
     this.createZoomInfoElements(zoomGroup, fcsWidth);
 
+    // Create the elements for annotations
     if (mlAnnotationsEnabled) {
       const annotateBrush = this.annotateBrush.bind(this);
 
@@ -499,6 +500,8 @@ export class TimeseriesChart extends React.Component {
         .attr('x', 0)
         .attr('y', focusZoomPanelHeight)
         .attr('height', focusChartHeight);
+
+      fcsGroup.append('g').classed('mlAnnotations', true);
     }
 
     // Add border round plot area.
@@ -559,11 +562,6 @@ export class TimeseriesChart extends React.Component {
         .attr('class', 'focus-chart-markers forecast');
     }
 
-    // Create the elements for annotations
-    if (mlAnnotationsEnabled) {
-      fcsGroup.append('g').classed('mlAnnotations', true);
-    }
-
     fcsGroup.append('rect')
       .attr('x', 0)
       .attr('y', 0)

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

@@ -98,6 +98,8 @@ const ANNOTATION_MIN_WIDTH = 2;
 const ANNOTATION_RECT_BORDER_RADIUS = 2;
 const ANNOTATION_TEXT_VERTICAL_OFFSET = 26;
 const ANNOTATION_TEXT_RECT_VERTICAL_OFFSET = 12;
+const ANNOTATION_TEXT_RECT_WIDTH = 24;
+const ANNOTATION_TEXT_RECT_HEIGHT = 20;
 
 export function renderAnnotations(
   focusChart: d3.Selection<[]>,
@@ -190,6 +192,8 @@ export function renderAnnotations(
     .enter()
     .append('rect')
     .classed('mlAnnotationTextRect', true)
+    .attr('width', ANNOTATION_TEXT_RECT_WIDTH)
+    .attr('height', ANNOTATION_TEXT_RECT_HEIGHT)
     .attr('rx', ANNOTATION_RECT_BORDER_RADIUS)
     .attr('ry', ANNOTATION_RECT_BORDER_RADIUS);
 

x-pack/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.html

@@ -138,7 +138,7 @@
         <ml-annotation-table
           annotations="focusAnnotationData"
           drill-down="false"
-          jobs="[selectedJob]"
+          number-badge="true"
         />
 
         <br /><br />