From 4543836ec0f247905c080c2e706686d78e11d8b3 Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Thu, 23 Jun 2022 13:15:39 +0200
Subject: [PATCH] feat(ui): render annotation window/point with color

---
 ui/src/shared/components/AnnotationPoint.tsx | 10 +++++++++-
 ui/src/shared/components/AnnotationSpan.tsx  | 14 +++++++++++---
 ui/src/types/annotations.ts                  |  1 +
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/ui/src/shared/components/AnnotationPoint.tsx b/ui/src/shared/components/AnnotationPoint.tsx
index 867853183..09922fd24 100644
--- a/ui/src/shared/components/AnnotationPoint.tsx
+++ b/ui/src/shared/components/AnnotationPoint.tsx
@@ -54,7 +54,7 @@ class AnnotationPoint extends Component<Props, State> {
           onMouseEnter={this.handleMouseEnter}
           onMouseLeave={this.handleMouseLeave}
         />
-        <div className={this.flagClass} />
+        <div className={this.flagClass} style={this.flagStyle} />
         <AnnotationTooltip
           timestamp={annotation.startTime}
           annotation={annotation}
@@ -151,9 +151,17 @@ class AnnotationPoint extends Component<Props, State> {
       DYGRAPH_CONTAINER_V_MARGIN * 2
     }px)`
 
+    const backgroundColor = annotation.color || undefined
     return {
       left,
       height,
+      backgroundColor,
+    }
+  }
+
+  private get flagStyle(): CSSProperties {
+    return {
+      backgroundColor: this.props.annotation.color || undefined,
     }
   }
 
diff --git a/ui/src/shared/components/AnnotationSpan.tsx b/ui/src/shared/components/AnnotationSpan.tsx
index d07d6ad2b..79f05eeb0 100644
--- a/ui/src/shared/components/AnnotationSpan.tsx
+++ b/ui/src/shared/components/AnnotationSpan.tsx
@@ -1,4 +1,4 @@
-import React, {Component, MouseEvent, DragEvent} from 'react'
+import React, {Component, MouseEvent, DragEvent, CSSProperties} from 'react'
 import {connect} from 'react-redux'
 
 import {
@@ -146,6 +146,9 @@ class AnnotationSpan extends Component<Props, State> {
     const flagClass = isDragging
       ? 'annotation-span--left-flag dragging'
       : 'annotation-span--left-flag'
+    const flagStyle: CSSProperties = {
+      borderLeftColor: annotation.color || undefined,
+    }
     const markerClass = isDragging ? 'annotation dragging' : 'annotation'
     const clickClass = isEditing
       ? 'annotation--click-area editing'
@@ -159,6 +162,7 @@ class AnnotationSpan extends Component<Props, State> {
 
     const markerStyles = {
       left: `${dygraph.toDomXCoord(startTime) + DYGRAPH_CONTAINER_H_MARGIN}px`,
+      backgroundColor: annotation.color || undefined,
       height: `calc(100% - ${
         staticLegendHeight +
         DYGRAPH_CONTAINER_XLABEL_MARGIN +
@@ -185,7 +189,7 @@ class AnnotationSpan extends Component<Props, State> {
           onMouseEnter={this.handleMouseEnter('left')}
           onMouseLeave={this.handleMouseLeave}
         />
-        <div className={flagClass} />
+        <div className={flagClass} style={flagStyle} />
       </div>
     )
   }
@@ -201,6 +205,9 @@ class AnnotationSpan extends Component<Props, State> {
     const flagClass = isDragging
       ? 'annotation-span--right-flag dragging'
       : 'annotation-span--right-flag'
+    const flagStyle: CSSProperties = {
+      borderRightColor: annotation.color || undefined,
+    }
     const markerClass = isDragging ? 'annotation dragging' : 'annotation'
     const clickClass = isEditing
       ? 'annotation--click-area editing'
@@ -214,6 +221,7 @@ class AnnotationSpan extends Component<Props, State> {
 
     const markerStyles = {
       left: `${dygraph.toDomXCoord(endTime) + DYGRAPH_CONTAINER_H_MARGIN}px`,
+      backgroundColor: annotation.color || undefined,
       height: `calc(100% - ${
         staticLegendHeight +
         DYGRAPH_CONTAINER_XLABEL_MARGIN +
@@ -240,7 +248,7 @@ class AnnotationSpan extends Component<Props, State> {
           onMouseEnter={this.handleMouseEnter('right')}
           onMouseLeave={this.handleMouseLeave}
         />
-        <div className={flagClass} />
+        <div className={flagClass} style={flagStyle} />
       </div>
     )
   }
diff --git a/ui/src/types/annotations.ts b/ui/src/types/annotations.ts
index 23e781409..9543fc5de 100644
--- a/ui/src/types/annotations.ts
+++ b/ui/src/types/annotations.ts
@@ -3,6 +3,7 @@ export interface Annotation {
   startTime: number
   endTime: number
   text: string
+  color?: string
   tags?: AnnotationTags
   links: {self: string}
 }