From 3151364b30b0cbc9995a4eb99290d62b7f8f52a9 Mon Sep 17 00:00:00 2001
From: Quynh Nguyen <quynh.nguyen@elastic.co>
Date: Wed, 14 Jul 2021 17:31:33 -0500
Subject: [PATCH] [ML] Fix alignment if some annotations overflow

---
 .../application/explorer/anomaly_timeline.tsx |  2 +-
 .../swimlane_annotation_container.tsx         | 19 ++++++++++++-------
 .../explorer/swimlane_container.tsx           |  3 ---
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx b/x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx
index 4f8a1c1fb920e..8f4d0cb83a776 100644
--- a/x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx
+++ b/x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx
@@ -286,7 +286,7 @@ export const AnomalyTimeline: FC<AnomalyTimelineProps> = React.memo(
                     tooltipService={tooltipService}
                   />
                 )}
-              </MlTooltipComponent>{' '}
+              </MlTooltipComponent>
               <EuiSpacer size="m" />
             </>
           ) : null}
diff --git a/x-pack/plugins/ml/public/application/explorer/swimlane_annotation_container.tsx b/x-pack/plugins/ml/public/application/explorer/swimlane_annotation_container.tsx
index 0efd5eabbf8df..1f72e6ee8c7ff 100644
--- a/x-pack/plugins/ml/public/application/explorer/swimlane_annotation_container.tsx
+++ b/x-pack/plugins/ml/public/application/explorer/swimlane_annotation_container.tsx
@@ -83,18 +83,23 @@ export const SwimlaneAnnotationContainer: FC<SwimlaneAnnotationContainerProps> =
 
       // Add annotation marker
       annotationsData.forEach((d) => {
-        const annotationWidth = d.end_timestamp
-          ? xScale(Math.min(d.end_timestamp, domain.max)) -
-            Math.max(xScale(d.timestamp), startingXPos)
-          : 0;
-
+        const annotationWidth = Math.max(
+          d.end_timestamp
+            ? xScale(Math.min(d.end_timestamp, domain.max)) -
+                Math.max(xScale(d.timestamp), startingXPos)
+            : 0,
+          ANNOTATION_MIN_WIDTH
+        );
+
+        const xPos = d.timestamp >= domain.min ? xScale(d.timestamp) : startingXPos;
         svg
           .append('rect')
           .classed('mlAnnotationRect', true)
-          .attr('x', d.timestamp >= domain.min ? xScale(d.timestamp) : startingXPos)
+          // If annotation is at the end, prevent overflow by shifting it back
+          .attr('x', xPos + annotationWidth >= endingXPos ? endingXPos - annotationWidth : xPos)
           .attr('y', 0)
           .attr('height', ANNOTATION_CONTAINER_HEIGHT)
-          .attr('width', Math.max(annotationWidth, ANNOTATION_MIN_WIDTH))
+          .attr('width', annotationWidth)
           .on('mouseover', function () {
             const startingTime = formatHumanReadableDateTimeSeconds(d.timestamp);
             const endingTime =
diff --git a/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx b/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx
index 1d49ffef9698b..c58ced33b277d 100644
--- a/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx
+++ b/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx
@@ -323,9 +323,6 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
         },
         fontSize: 12,
       },
-      overflow: {
-        rightOverflow: 50,
-      },
       xAxisLabel: {
         visible: true,
         // eui color subdued