From e9e7314c3b23c4cf2574af907fb9464e6d28eec4 Mon Sep 17 00:00:00 2001
From: Quynh Nguyen <43350163+qn895@users.noreply.github.com>
Date: Mon, 10 May 2021 13:18:40 -0500
Subject: [PATCH] [ML] Make swimlane annotation markers look less like a 0
 (#99592)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../explorer/swimlane_annotation_container.tsx         | 10 +++-------
 .../components/timeseries_chart/timeseries_chart.js    |  2 --
 .../timeseries_chart/timeseries_chart_annotations.ts   |  7 +------
 3 files changed, 4 insertions(+), 15 deletions(-)

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 f106aed84aa7..859e18c29f45 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
@@ -17,9 +17,7 @@ export const Y_AXIS_LABEL_WIDTH = 170;
 export const Y_AXIS_LABEL_PADDING = 8;
 export const Y_AXIS_LABEL_FONT_COLOR = '#6a717d';
 const ANNOTATION_CONTAINER_HEIGHT = 12;
-const ANNOTATION_MARGIN = 2;
-const ANNOTATION_MIN_WIDTH = 5;
-const ANNOTATION_HEIGHT = ANNOTATION_CONTAINER_HEIGHT - 2 * ANNOTATION_MARGIN;
+const ANNOTATION_MIN_WIDTH = 8;
 
 interface SwimlaneAnnotationContainerProps {
   chartWidth: number;
@@ -93,11 +91,9 @@ export const SwimlaneAnnotationContainer: FC<SwimlaneAnnotationContainerProps> =
           .append('rect')
           .classed('mlAnnotationRect', true)
           .attr('x', d.timestamp >= domain.min ? xScale(d.timestamp) : startingXPos)
-          .attr('y', ANNOTATION_MARGIN)
-          .attr('height', ANNOTATION_HEIGHT)
+          .attr('y', 0)
+          .attr('height', ANNOTATION_CONTAINER_HEIGHT)
           .attr('width', Math.max(annotationWidth, ANNOTATION_MIN_WIDTH))
-          .attr('rx', ANNOTATION_MARGIN)
-          .attr('ry', ANNOTATION_MARGIN)
           .on('mouseover', function () {
             const startingTime = formatHumanReadableDateTimeSeconds(d.timestamp);
             const endingTime =
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
index 23fe648a6759..73c5f58fb80d 100644
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
@@ -1108,8 +1108,6 @@ class TimeseriesChartIntl extends Component {
     ctxAnnotationRects
       .enter()
       .append('rect')
-      .attr('rx', ctxAnnotationMargin)
-      .attr('ry', ctxAnnotationMargin)
       .on('mouseover', function (d) {
         showFocusChartTooltip(d, this);
       })
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart_annotations.ts b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart_annotations.ts
index 7a44a0ccdec4..ac5d15f1695d 100644
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart_annotations.ts
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart_annotations.ts
@@ -92,8 +92,7 @@ const ANNOTATION_DEFAULT_LEVEL = 1;
 const ANNOTATION_LEVEL_HEIGHT = 28;
 const ANNOTATION_UPPER_RECT_MARGIN = 0;
 const ANNOTATION_UPPER_TEXT_MARGIN = -7;
-export const ANNOTATION_MIN_WIDTH = 2;
-const ANNOTATION_RECT_BORDER_RADIUS = 2;
+export const ANNOTATION_MIN_WIDTH = 8;
 const ANNOTATION_TEXT_VERTICAL_OFFSET = 26;
 const ANNOTATION_TEXT_RECT_VERTICAL_OFFSET = 12;
 const ANNOTATION_TEXT_RECT_WIDTH = 24;
@@ -157,8 +156,6 @@ export function renderAnnotations(
   rects
     .enter()
     .append('rect')
-    .attr('rx', ANNOTATION_RECT_BORDER_RADIUS)
-    .attr('ry', ANNOTATION_RECT_BORDER_RADIUS)
     .classed('mlAnnotationRect', true)
     .attr('mask', `url(#${ANNOTATION_MASK_ID})`)
     .on('mouseover', onAnnotationMouseOver)
@@ -199,8 +196,6 @@ export function renderAnnotations(
     .classed('mlAnnotationTextRect', true)
     .attr('width', ANNOTATION_TEXT_RECT_WIDTH)
     .attr('height', ANNOTATION_TEXT_RECT_HEIGHT)
-    .attr('rx', ANNOTATION_RECT_BORDER_RADIUS)
-    .attr('ry', ANNOTATION_RECT_BORDER_RADIUS)
     .on('mouseover', onAnnotationMouseOver)
     .on('mouseout', hideFocusChartTooltip)
     .on('click', onAnnotationClick);