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

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

@@ -28,7 +28,6 @@ import {
 import { CommonProps } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { distinctUntilChanged } from 'rxjs/operators';
 import {
   ANNOTATION_MAX_LENGTH_CHARS,
   ANNOTATION_EVENT_USER,
@@ -37,6 +36,7 @@ import {
   annotation$,
   annotationsRefreshed,
   AnnotationState,
+  AnnotationUpdatesService,
 } from '../../../services/annotations_service';
 import { AnnotationDescriptionList } from '../annotation_description_list';
 import { DeleteAnnotationModal } from '../delete_annotation_modal';
@@ -48,6 +48,7 @@ import {
 } from '../../../../../common/types/annotations';
 import { PartitionFieldsType } from '../../../../../common/types/anomalies';
 import { PARTITION_FIELDS } from '../../../../../common/constants/anomalies';
+import { MlAnnotationComponent } from '../annotations_service';
 
 interface ViewableDetector {
   index: number;
@@ -356,16 +357,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
@@ -402,18 +403,16 @@ export class AnnotationFlyoutUI extends Component<CommonProps & Props> {
   }
 }
 
-export const AnnotationFlyout: FC<any> = (props) => {
-  const annotationProp = useObservable(
-    annotation$.pipe(
-      distinctUntilChanged((prev, curr) => {
-        // prevent re-rendering
-        return prev !== null && curr !== null;
-      })
-    )
-  );
+interface AnnotationFlyoutContainerProps extends CommonProps, Props {
+  annotationUpdatesService: AnnotationUpdatesService;
+}
+
+export const AnnotationFlyoutContainer: FC<any> = (props: AnnotationFlyoutContainerProps) => {
+  const { annotationUpdatesService, ...restProps } = props;
+  const annotationProp = useObservable<AnnotationState>(annotationUpdatesService.update$());
 
   const cancelEditingHandler = useCallback(() => {
-    annotation$.next(null);
+    annotationUpdatesService.setValue(null);
   }, []);
 
   if (annotationProp === undefined || annotationProp === null) {
@@ -441,7 +440,22 @@ export const AnnotationFlyout: FC<any> = (props) => {
           </h2>
         </EuiTitle>
       </EuiFlyoutHeader>
-      <AnnotationFlyoutUI {...props} />
+      <AnnotationFlyoutUI {...restProps} />
     </EuiFlyout>
   );
 };
+
+export const AnnotationFlyout: FC<any> = (props) => {
+  return (
+    <MlAnnotationComponent>
+      {(annotationUpdatesService) => {
+        return (
+          <AnnotationFlyoutContainer
+            annotationUpdatesService={annotationUpdatesService}
+            {...props}
+          />
+        );
+      }}
+    </MlAnnotationComponent>
+  );
+};

x-pack/plugins/ml/public/application/components/annotations/annotations_service/annotation_service.tsx

@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FC, useMemo } from 'react';
+import { AnnotationUpdatesService } from '../../../services/annotations_service';
+
+interface MlAnnotationWrapperProps {
+  children: (annotationUpdatesService: AnnotationUpdatesService) => React.ReactElement;
+}
+
+export const MlAnnotationComponent: FC<MlAnnotationWrapperProps> = ({ children }) => {
+  const service = useMemo(() => new AnnotationUpdatesService(), []);
+  return <>{children(service)}</>;
+};

x-pack/plugins/ml/public/application/components/annotations/annotations_service/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { MlAnnotationComponent } from './annotation_service';

x-pack/plugins/ml/public/application/services/annotations_service.tsx

@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { BehaviorSubject } from 'rxjs';
-
+import { BehaviorSubject, Observable } from 'rxjs';
+import { distinctUntilChanged } from 'rxjs/operators';
 import { Annotation } from '../../../common/types/annotations';
 
 /*
@@ -79,3 +79,20 @@ export const annotation$ = new BehaviorSubject<AnnotationState>(null);
 */
 export const annotationsRefresh$ = new BehaviorSubject(Date.now());
 export const annotationsRefreshed = () => annotationsRefresh$.next(Date.now());
+
+export class AnnotationUpdatesService {
+  private _annotation$: BehaviorSubject<AnnotationState> = annotation$;
+
+  public update$(): Observable<AnnotationState> {
+    return this._annotation$.asObservable().pipe(
+      distinctUntilChanged((prev, curr) => {
+        // prevent re-rendering
+        return prev !== null && curr !== null;
+      })
+    );
+  }
+
+  public setValue(annotation: AnnotationState) {
+    this._annotation$.next(annotation);
+  }
+}

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

@@ -10,6 +10,7 @@ import React from 'react';
 import { Annotation } from '../../../../../common/types/annotations';
 import { CombinedJob } from '../../../../../common/types/anomaly_detection_jobs';
 import { ChartTooltipService } from '../../../components/chart_tooltip';
+import { AnnotationUpdatesService } from '../../../services/annotations_service';
 
 interface Props {
   selectedJob: CombinedJob;
@@ -45,6 +46,7 @@ interface TimeseriesChartProps {
   zoomFromFocusLoaded: object;
   zoomToFocusLoaded: object;
   tooltipService: object;
+  annotationUpdatesService: AnnotationUpdatesService;
 }
 
 declare class TimeseriesChart extends React.Component<Props, any> {

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

@@ -21,7 +21,6 @@ import {
   getSeverityWithLow,
   getMultiBucketImpactLabel,
 } from '../../../../../common/util/anomaly_utils';
-import { annotation$ } from '../../../services/annotations_service';
 import { formatValue } from '../../../formatters/format_value';
 import {
   LINE_CHART_ANOMALY_RADIUS,
@@ -1798,7 +1797,9 @@ class TimeseriesChartIntl extends Component {
 }
 
 export const TimeseriesChart = (props) => {
-  const annotationProp = useObservable(annotation$);
+  const { annotationService } = props;
+  const annotationProp = useObservable(annotationService.update$());
+
   if (annotationProp === undefined) {
     return null;
   }

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

@@ -16,6 +16,7 @@ import { useMlKibana, useNotifications } from '../../../contexts/kibana';
 import { getBoundsRoundedToInterval } from '../../../util/time_buckets';
 import { ANNOTATION_EVENT_USER } from '../../../../../common/constants/annotations';
 import { getControlsForDetector } from '../../get_controls_for_detector';
+import { MlAnnotationComponent } from '../../../components/annotations/annotations_service';
 
 interface TimeSeriesChartWithTooltipsProps {
   bounds: any;
@@ -119,22 +120,29 @@ export const TimeSeriesChartWithTooltips: FC<TimeSeriesChartWithTooltipsProps> =
 
   return (
     <div className="ml-timeseries-chart" data-test-subj="mlSingleMetricViewerChart">
-      <MlTooltipComponent>
-        {(tooltipService) => (
-          <TimeseriesChart
-            {...chartProps}
-            annotationData={annotationData}
-            bounds={bounds}
-            detectorIndex={detectorIndex}
-            renderFocusChartOnly={renderFocusChartOnly}
-            selectedJob={selectedJob}
-            showAnnotations={showAnnotations}
-            showForecast={showForecast}
-            showModelBounds={showModelBounds}
-            tooltipService={tooltipService}
-          />
-        )}
-      </MlTooltipComponent>
+      <MlAnnotationComponent>
+        {(annotationService) => {
+          return (
+            <MlTooltipComponent>
+              {(tooltipService) => (
+                <TimeseriesChart
+                  {...chartProps}
+                  annotationService={annotationService}
+                  annotationData={annotationData}
+                  bounds={bounds}
+                  detectorIndex={detectorIndex}
+                  renderFocusChartOnly={renderFocusChartOnly}
+                  selectedJob={selectedJob}
+                  showAnnotations={showAnnotations}
+                  showForecast={showForecast}
+                  showModelBounds={showModelBounds}
+                  tooltipService={tooltipService}
+                />
+              )}
+            </MlTooltipComponent>
+          );
+        }}
+      </MlAnnotationComponent>
     </div>
   );
 };