[ML] Fix reloading anomaly charts on resize. (#22967) (#22995)

- Fixes a regression introduced in #22814. Because of the stricter checking for scope/props updates, resizing the browser window would miss updating the Anomaly Explorer Charts widths. This fixes it by adding a check to trigger anomalyDataChange in redrawOnResize().
- Additionally, if only one chart is up for display, this update makes sure a single chart always spans across the full available width.

x-pack/plugins/ml/public/explorer/explorer_charts/__snapshots__/explorer_charts_container_service.test.js.snap

@@ -11,7 +11,7 @@ Object {
 
 exports[`explorerChartsContainerService call anomalyChangeListener with actual series config 2`] = `
 Object {
-  "layoutCellsPerChart": 6,
+  "layoutCellsPerChart": 12,
   "seriesToPlot": Array [
     Object {
       "bucketSpanSeconds": 900,
@@ -71,7 +71,7 @@ Object {
 
 exports[`explorerChartsContainerService call anomalyChangeListener with actual series config 3`] = `
 Object {
-  "layoutCellsPerChart": 6,
+  "layoutCellsPerChart": 12,
   "seriesToPlot": Array [
     Object {
       "bucketSpanSeconds": 900,
@@ -603,8 +603,8 @@ Object {
       "loading": false,
       "metricFieldName": "responsetime",
       "metricFunction": "avg",
-      "plotEarliest": 1486611900000,
-      "plotLatest": 1486714500000,
+      "plotEarliest": 1486560600000,
+      "plotLatest": 1486765800000,
       "selectedEarliest": 1486656000000,
       "selectedLatest": 1486670399999,
       "timeField": "@timestamp",

x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container_service.js

@@ -58,7 +58,10 @@ export function explorerChartsContainerServiceFactory(
     const allSeriesRecords = processRecordsForDisplay(filteredRecords);
     // Calculate the number of charts per row, depending on the width available, to a max of 4.
     const chartsContainerWidth = Math.floor($chartContainer.width());
-    const chartsPerRow = Math.min(Math.max(Math.floor(chartsContainerWidth / 550), 1), MAX_CHARTS_PER_ROW);
+    let chartsPerRow = Math.min(Math.max(Math.floor(chartsContainerWidth / 550), 1), MAX_CHARTS_PER_ROW);
+    if (allSeriesRecords.length === 1) {
+      chartsPerRow = 1;
+    }
 
     data.layoutCellsPerChart = DEFAULT_LAYOUT_CELLS_PER_CHART / chartsPerRow;
 
@@ -71,8 +74,15 @@ export function explorerChartsContainerServiceFactory(
 
     // Calculate the time range of the charts, which is a function of the chart width and max job bucket span.
     data.tooManyBuckets = false;
-    const { chartRange, tooManyBuckets } = calculateChartRange(seriesConfigs, earliestMs, latestMs,
-      Math.floor(chartsContainerWidth / chartsPerRow), recordsToPlot, data.timeFieldName);
+    const chartWidth = Math.floor(chartsContainerWidth / chartsPerRow);
+    const { chartRange, tooManyBuckets } = calculateChartRange(
+      seriesConfigs,
+      earliestMs,
+      latestMs,
+      chartWidth,
+      recordsToPlot,
+      data.timeFieldNam
+    );
     data.tooManyBuckets = tooManyBuckets;
 
     // initialize the charts with loading indicators

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

@@ -305,6 +305,16 @@ module.controller('MlExplorerController', function (
 
     mlExplorerDashboardService.swimlaneDataChange.changed('overall');
     mlExplorerDashboardService.swimlaneDataChange.changed('viewBy');
+
+    if (
+      mlCheckboxShowChartsService.state.get('showCharts') &&
+      $scope.anomalyChartRecords.length > 0
+    ) {
+      const timerange = getSelectionTimeRange($scope.cellData);
+      mlExplorerDashboardService.anomalyDataChange.changed(
+        $scope.anomalyChartRecords, timerange.earliestMs, timerange.latestMs
+      );
+    }
   }
 
   // Refresh the data when the dashboard filters are updated.