[ML] Fix alignment if some annotations overflow

elastic · Jul 14, 2021 · 3151364 · 3151364
1 parent 348273e
commit 3151364
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 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
@@ -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
@@ -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
@@ -323,9 +323,6 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
         },
         fontSize: 12,
       },
-      overflow: {
-        rightOverflow: 50,
-      },
       xAxisLabel: {
         visible: true,
         // eui color subdued