From 0f72474e4e87618c698c9ed34109a9f38d13e91c Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 30 Jun 2022 10:26:28 +0100
Subject: [PATCH] Annotations: Use point marker for short time range
 annotations (#51520) (#51617)

* Use point annotation marker for short time range annotations

* Properly align small region marker

(cherry picked from commit d429cac27ba5c82697a3d464eed097befb715b90)

Co-authored-by: Kyle Cunningham <codeincarnate@users.noreply.github.com>
---
 .../timeseries/plugins/AnnotationsPlugin.tsx   |  6 +++---
 .../plugins/annotations/AnnotationMarker.tsx   | 18 ++++++++++++++----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin.tsx b/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin.tsx
index 8073bb61d38..8b65c8208ae 100644
--- a/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin.tsx
@@ -113,7 +113,7 @@ export const AnnotationsPlugin: React.FC<AnnotationsPluginProps> = ({ annotation
 
   const renderMarker = useCallback(
     (frame: DataFrame, dataFrameFieldIndex: DataFrameFieldIndex) => {
-      let markerStyle;
+      let width = 0;
       const view = new DataFrameView<AnnotationsDataFrameViewDTO>(frame);
       const annotation = view.get(dataFrameFieldIndex.fieldIndex);
       const isRegionAnnotation = Boolean(annotation.isRegion);
@@ -130,10 +130,10 @@ export const AnnotationsPlugin: React.FC<AnnotationsPluginProps> = ({ annotation
         if (x1 > plotInstance.current.bbox.width / window.devicePixelRatio) {
           x1 = plotInstance.current.bbox.width / window.devicePixelRatio;
         }
-        markerStyle = { width: `${x1 - x0}px` };
+        width = x1 - x0;
       }
 
-      return <AnnotationMarker annotation={annotation} timeZone={timeZone} style={markerStyle} />;
+      return <AnnotationMarker annotation={annotation} timeZone={timeZone} width={width} />;
     },
     [timeZone]
   );
diff --git a/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationMarker.tsx b/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationMarker.tsx
index dd354bf4df4..58e6cda794f 100644
--- a/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationMarker.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationMarker.tsx
@@ -14,8 +14,11 @@ import { AnnotationTooltip } from './AnnotationTooltip';
 interface Props extends HTMLAttributes<HTMLDivElement> {
   timeZone: TimeZone;
   annotation: AnnotationsDataFrameViewDTO;
+  width: number;
 }
 
+const MIN_REGION_ANNOTATION_WIDTH = 6;
+
 const POPPER_CONFIG = {
   modifiers: [
     { name: 'arrow', enabled: false },
@@ -29,7 +32,7 @@ const POPPER_CONFIG = {
   ],
 };
 
-export function AnnotationMarker({ annotation, timeZone, style }: Props) {
+export function AnnotationMarker({ annotation, timeZone, width }: Props) {
   const { canAddAnnotations, canEditAnnotations, canDeleteAnnotations, ...panelCtx } = usePanelContext();
   const commonStyles = useStyles2(getCommonAnnotationStyles);
   const styles = useStyles2(getStyles);
@@ -98,15 +101,22 @@ export function AnnotationMarker({ annotation, timeZone, style }: Props) {
     );
   }, [canEditAnnotations, canDeleteAnnotations, onAnnotationDelete, onAnnotationEdit, timeFormatter, annotation]);
 
-  const isRegionAnnotation = Boolean(annotation.isRegion);
+  const isRegionAnnotation = Boolean(annotation.isRegion) && width > MIN_REGION_ANNOTATION_WIDTH;
 
+  let left = `${width / 2}px`;
   let marker = (
-    <div className={commonStyles(annotation).markerTriangle} style={{ transform: 'translate3d(-100%,-50%, 0)' }} />
+    <div
+      className={commonStyles(annotation).markerTriangle}
+      style={{ left, position: 'relative', transform: 'translate3d(-100%,-50%, 0)' }}
+    />
   );
 
   if (isRegionAnnotation) {
     marker = (
-      <div className={commonStyles(annotation).markerBar} style={{ ...style, transform: 'translate3d(0,-50%, 0)' }} />
+      <div
+        className={commonStyles(annotation).markerBar}
+        style={{ width: `${width}px`, transform: 'translate3d(0,-50%, 0)' }}
+      />
     );
   }
   return (