[ML] Performance improvements to annotations editing in Single Metric Viewer & buttons placement

x-pack/plugins/ml/public/application/components/annotations/annotation_flyout/index.tsx

@@ -356,16 +356,16 @@ export class AnnotationFlyoutUI extends Component<CommonProps & Props> {
           </EuiFormRow>
         </EuiFlyoutBody>
         <EuiFlyoutFooter>
-          <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexGroup>
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty iconType="cross" onClick={this.cancelEditingHandler} flush="left">
+              <EuiButtonEmpty onClick={this.cancelEditingHandler} flush="left">
                 <FormattedMessage
                   id="xpack.ml.timeSeriesExplorer.annotationFlyout.cancelButtonLabel"
                   defaultMessage="Cancel"
                 />
               </EuiButtonEmpty>
             </EuiFlexItem>
-            <EuiFlexItem grow={false}>
+            <EuiFlexItem grow={false} style={{ marginLeft: 'auto' }}>
               {isExistingAnnotation && (
                 <EuiButtonEmpty color="danger" onClick={this.deleteConfirmHandler}>
                   <FormattedMessage

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

@@ -51,6 +51,7 @@ import {
   unhighlightFocusChartAnnotation,
   ANNOTATION_MIN_WIDTH,
 } from './timeseries_chart_annotations';
+import { distinctUntilChanged } from 'rxjs/operators';
 
 const focusZoomPanelHeight = 25;
 const focusChartHeight = 310;
@@ -1798,7 +1799,15 @@ class TimeseriesChartIntl extends Component {
 }
 
 export const TimeseriesChart = (props) => {
-  const annotationProp = useObservable(annotation$);
+  const annotationProp = useObservable(
+    annotation$.pipe(
+      distinctUntilChanged((prev, curr) => {
+        // prevent re-rendering
+        return prev !== null && curr !== null;
+      })
+    )
+  );
+
   if (annotationProp === undefined) {
     return null;
   }