[ML] Fix Anomaly Table update trigger (#18769) (#18774)

Fixes an issue with the anomaly table not correctly updating in the anomaly explorer and the anomaly markers not showing up in the time series viewer.
- moves the initialization of scope.anomalyRecords = []; to the controllers of anomaly explorer and time series viewer. having it in the anomaly table directive caused a race condition to overwrite already fetched records.
- use $watchCollection instead of $watch to track anomalyRecords and focusChartData changes.
replaces $timeouts with scope.$evalAsync
- fixes how focusChartData gets updated correctly to fix missing anomaly markers in the time series viewer.

x-pack/plugins/ml/public/components/anomalies_table/anomalies_table_directive.js

@@ -84,7 +84,6 @@ module.directive('mlAnomaliesTable', function (
       scope.table.columns = [];
       scope.table.rows = [];
       scope.rowScopes = [];
-      scope.anomalyRecords = [];
 
       scope.influencersLimit = 5;
 
@@ -94,7 +93,7 @@ module.directive('mlAnomaliesTable', function (
       mlSelectIntervalService.state.watch(updateTableData);
       mlSelectSeverityService.state.watch(updateTableData);
 
-      scope.$watch('anomalyRecords', updateTableData);
+      scope.$watchCollection('anomalyRecords', updateTableData);
 
       element.on('$destroy', () => {
         mlSelectIntervalService.state.unwatch(updateTableData);

x-pack/plugins/ml/public/explorer/explorer_controller.js

@@ -82,6 +82,7 @@ module.controller('MlExplorerController', function (
   const ALLOW_CELL_RANGE_SELECTION = mlExplorerDashboardService.allowCellRangeSelection;
   let disableDragSelectOnMouseLeave = true;
   $scope.queryFilters = [];
+  $scope.anomalyRecords = [];
 
   const dragSelect = new DragSelect({
     selectables: document.querySelectorAll('.sl-cell'),
@@ -171,11 +172,11 @@ module.controller('MlExplorerController', function (
     )
       .then((resp) => {
         // Need to use $timeout to ensure the update happens after the child scope is updated with the new data.
-        $timeout(() => {
+        $scope.$evalAsync(() => {
           // Sort in descending time order before storing in scope.
           $scope.anomalyRecords = _.chain(resp.records).sortBy(record => record[$scope.timeFieldName]).reverse().value();
           console.log('Explorer anomalies table data set:', $scope.anomalyRecords);
-        }, 0);
+        });
       });
   };
 

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

@@ -114,9 +114,8 @@ module.directive('mlTimeseriesChart', function (
       drawContextChartSelection();
     });
 
-    scope.$watch('focusChartData', renderFocusChart);
+    scope.$watchCollection('focusChartData', renderFocusChart);
-    scope.$watch('showModelBounds', renderFocusChart);
+    scope.$watchGroup(['showModelBounds', 'showForecast'], renderFocusChart);
-    scope.$watch('showForecast', renderFocusChart);
 
     // Redraw the charts when the container is resize.
     const resizeChecker = new ResizeChecker(angular.element('.ml-timeseries-chart'));

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

@@ -88,6 +88,7 @@ module.controller('MlTimeSeriesExplorerController', function (
   $scope.loading = true;
   $scope.loadCounter = 0;
   $scope.hasResults = false;
+  $scope.anomalyRecords = [];
 
   $scope.modelPlotEnabled = false;
   $scope.showModelBounds = true;            // Toggles display of model bounds in the focus chart
@@ -350,20 +351,21 @@ module.controller('MlTimeSeriesExplorerController', function (
       if (awaitingCount === 0) {
         // Tell the results container directives to render the focus chart.
         // Need to use $timeout to ensure the broadcast happens after the child scope is updated with the new data.
-        $timeout(() => {
+        let updatedFocusChartData = processDataForFocusAnomalies(
-          processDataForFocusAnomalies(
+          $scope.focusChartData,
-            $scope.focusChartData,
+          $scope.anomalyRecords,
-            $scope.anomalyRecords,
+          $scope.timeFieldName);
-            $scope.timeFieldName);
 
-          processScheduledEventsForChart(
+        updatedFocusChartData = processScheduledEventsForChart(
-            $scope.focusChartData,
+          $scope.focusChartData,
-            $scope.scheduledEvents);
+          $scope.scheduledEvents);
 
+        $scope.$evalAsync(() => {
+          $scope.focusChartData = updatedFocusChartData;
           console.log('Time series explorer focus chart data set:', $scope.focusChartData);
 
           $scope.loading = false;
-        }, 0);
+        });
       }
     }