[ML] Fix focus chart updating. (#45146) (#45243)

- Restores the behavior of the angularjs version which only updates the focus chart once all data is loaded. The chart area itself doesn't have a loading indicator, but now we pass on the loading state of single metric viewer as a prop to TimeseriesChart. TimeseriesChart mostly wraps d3 code and we now trigger a re-render only if loading is false.
- Triggers the overall loading indicator when the focus chart reloads
- Fixes to pass in values for the progress bar as numbers instead of strings.

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

@@ -103,6 +103,7 @@ const TimeseriesChartIntl = injectI18n(class TimeseriesChart extends React.Compo
     focusAnnotationData: PropTypes.array,
     focusChartData: PropTypes.array,
     focusForecastData: PropTypes.array,
+    loading: PropTypes.bool.isRequired,
     modelPlotEnabled: PropTypes.bool.isRequired,
     renderFocusChartOnly: PropTypes.bool.isRequired,
     selectedJob: PropTypes.object,
@@ -202,6 +203,10 @@ const TimeseriesChartIntl = injectI18n(class TimeseriesChart extends React.Compo
   }
 
   componentDidUpdate() {
+    if (this.props.loading) {
+      return;
+    }
+
     if (this.props.renderFocusChartOnly === false) {
       this.renderChart();
       this.drawContextChartSelection();
@@ -1063,6 +1068,15 @@ const TimeseriesChartIntl = injectI18n(class TimeseriesChart extends React.Compo
       const selectionMin = selectedBounds[0].getTime();
       const selectionMax = selectedBounds[1].getTime();
 
+      // Avoid triggering an update if bounds haven't changed
+      if (
+        that.selectedBounds !== undefined &&
+        that.selectedBounds.min.valueOf() === selectionMin &&
+        that.selectedBounds.max.valueOf() === selectionMax
+      ) {
+        return;
+      }
+
       // Set the color of the swimlane cells according to whether they are inside the selection.
       contextGroup.selectAll('.swimlane-cell')
         .style('fill', (d) => {

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

@@ -136,7 +136,7 @@ const TimeSeriesExplorerPage = ({ children, jobSelectorProps, loading, resizeRef
     {loading && (<EuiProgress className="mlTimeSeriesExplorerProgress" color="primary" size="xs" />)}
     {/* Show a progress bar with progress 0% when not loading.
         If we'd just show no progress bar when not loading it would result in a flickering height effect. */}
-    {!loading && (<EuiProgress className="mlTimeSeriesExplorerProgress" value="0" max="100" color="primary" size="xs" />)}
+    {!loading && (<EuiProgress className="mlTimeSeriesExplorerProgress" value={0} max={100} color="primary" size="xs" />)}
     <JobSelector {...jobSelectorProps} />
     <div className="ml-time-series-explorer" ref={resizeRef} >
       {children}
@@ -294,6 +294,11 @@ export class TimeSeriesExplorer extends React.Component {
         modelPlotEnabled,
       } = this.state;
 
+      this.setState({
+        loading: true,
+        fullRefresh: false,
+      });
+
       getFocusData(
         criteriaFields,
         +detectorId,
@@ -969,6 +974,7 @@ export class TimeSeriesExplorer extends React.Component {
       focusChartData,
       focusForecastData,
       focusAggregationInterval,
+      loading,
       svgWidth,
       zoomFrom,
       zoomTo,