[ML] Single Metric Viewer: Fix annnotations refresh. (#56107) (#56161)

When creating/editing/deleting an annotation, the Single Metric Viewer page wouldn't update with the applied changes. This fixes it by tracking the change in the outer component with lastRefresh/previousRefresh and making it a condition in contextChartSelected() to trigger an update after a refresh.

x-pack/legacy/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx

@@ -89,6 +89,7 @@ export const TimeSeriesExplorerUrlStateManager: FC<TimeSeriesExplorerUrlStateMan
   const [appState, setAppState] = useUrlState('_a');
   const [globalState, setGlobalState] = useUrlState('_g');
   const [lastRefresh, setLastRefresh] = useState(0);
+  const previousRefresh = usePrevious(lastRefresh);
   const [selectedJobId, setSelectedJobId] = useState<string>();
 
   const refresh = useRefresh();
@@ -295,6 +296,7 @@ export const TimeSeriesExplorerUrlStateManager: FC<TimeSeriesExplorerUrlStateMan
         bounds,
         dateFormatTz,
         lastRefresh,
+        previousRefresh,
         selectedJobId,
         selectedDetectorIndex,
         selectedEntities,

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

@@ -161,6 +161,7 @@ export class TimeSeriesExplorer extends React.Component {
     bounds: PropTypes.object.isRequired,
     dateFormatTz: PropTypes.string.isRequired,
     lastRefresh: PropTypes.number.isRequired,
+    previousRefresh: PropTypes.number.isRequired,
     selectedJobId: PropTypes.string.isRequired,
     selectedDetectorIndex: PropTypes.number,
     selectedEntities: PropTypes.object,
@@ -319,7 +320,11 @@ export class TimeSeriesExplorer extends React.Component {
       to: selection.to.toISOString(),
     };
 
-    if (isEqual(this.props.zoom, zoomState) && this.state.focusChartData !== undefined) {
+    if (
+      isEqual(this.props.zoom, zoomState) &&
+      this.state.focusChartData !== undefined &&
+      this.props.previousRefresh === this.props.lastRefresh
+    ) {
       return;
     }
 
@@ -1089,13 +1094,12 @@ export class TimeSeriesExplorer extends React.Component {
       this.previousShowAnnotations === showAnnotations &&
       this.previousShowForecast === showForecast &&
       this.previousShowModelBounds === showModelBounds &&
-      this.previousLastRefresh === lastRefresh
+      this.props.previousRefresh === lastRefresh
     ) {
       renderFocusChartOnly = false;
     }
 
     this.previousChartProps = chartProps;
-    this.previousLastRefresh = lastRefresh;
     this.previousShowAnnotations = showAnnotations;
     this.previousShowForecast = showForecast;
     this.previousShowModelBounds = showModelBounds;