From 395f67c398dc3cc4cfe1c63556c1f3cbdb57d51d Mon Sep 17 00:00:00 2001
From: Chitlange Sahas <chitlangesahas@gmail.com>
Date: Mon, 29 Mar 2021 12:05:59 -0700
Subject: [PATCH] fix: make annotation target better clickable (#517)

This PR makes the annotation click target better clickable and also improves the UX by making the hover state of the line to change opacity, indicating that it's a clickable target.
---
 giraffe/package.json                          |  2 +-
 giraffe/src/components/AnnotationLine.scss    | 12 ++++++
 .../src/components/AnnotationLine.scss.d.ts   |  7 ++++
 giraffe/src/components/AnnotationLine.tsx     | 39 +++++++++++--------
 giraffe/src/components/AnnotationTooltip.tsx  |  2 +-
 5 files changed, 43 insertions(+), 19 deletions(-)
 create mode 100644 giraffe/src/components/AnnotationLine.scss
 create mode 100644 giraffe/src/components/AnnotationLine.scss.d.ts

diff --git a/giraffe/package.json b/giraffe/package.json
index f24b596d..38ee9e9c 100644
--- a/giraffe/package.json
+++ b/giraffe/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/giraffe",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "main": "dist/index.js",
   "module": "src/index.js",
   "license": "MIT",
diff --git a/giraffe/src/components/AnnotationLine.scss b/giraffe/src/components/AnnotationLine.scss
new file mode 100644
index 00000000..1d943797
--- /dev/null
+++ b/giraffe/src/components/AnnotationLine.scss
@@ -0,0 +1,12 @@
+/*
+  Annotation Line Styles
+  ------------------------------------------------------------------------------
+*/
+
+.giraffe-annotation-hover{
+  cursor: pointer;
+  &:hover {
+    opacity: 80%;
+    transition: opacity 0.25s ease;
+  }
+}
diff --git a/giraffe/src/components/AnnotationLine.scss.d.ts b/giraffe/src/components/AnnotationLine.scss.d.ts
new file mode 100644
index 00000000..00600cbc
--- /dev/null
+++ b/giraffe/src/components/AnnotationLine.scss.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'giraffe-annotation-hover': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/giraffe/src/components/AnnotationLine.tsx b/giraffe/src/components/AnnotationLine.tsx
index 5df839ee..5f78c926 100644
--- a/giraffe/src/components/AnnotationLine.tsx
+++ b/giraffe/src/components/AnnotationLine.tsx
@@ -1,6 +1,8 @@
 import React, {FunctionComponent, createElement} from 'react'
 import {AnnotationDimension, AnnotationPinType} from '../types'
 
+import styles from './AnnotationLine.scss'
+
 interface AnnotationLineProps {
   dimension: AnnotationDimension
   color: string
@@ -29,6 +31,16 @@ export const AnnotationLine: FunctionComponent<AnnotationLineProps> = props => {
   if (dimension === 'y') {
     return (
       <>
+        <line
+          x1="0"
+          x2={length}
+          y1={clampedStart}
+          y2={clampedStart}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          id={props.id}
+          className={`${styles['giraffe-annotation-hover']} giraffe-annotation-line`}
+        />
         {pin === 'circle' &&
           createElement('circle', {
             r: PIN_CIRCLE_RADIUS,
@@ -53,20 +65,22 @@ export const AnnotationLine: FunctionComponent<AnnotationLineProps> = props => {
               PIN_TRIANGLE_WIDTH} ${length}, ${clampedStart}`,
             fill: color,
           })}
-        <line
-          x1="0"
-          x2={length}
-          y1={clampedStart}
-          y2={clampedStart}
-          stroke={color}
-          strokeWidth={strokeWidth}
-        />
       </>
     )
   }
 
   return (
     <>
+      <line
+        x1={clampedStart}
+        x2={clampedStart}
+        y1="0"
+        y2={length}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        id={props.id}
+        className={`${styles['giraffe-annotation-hover']} giraffe-annotation-line`}
+      />
       {pin === 'circle' &&
         createElement('circle', {
           r: PIN_CIRCLE_RADIUS,
@@ -91,15 +105,6 @@ export const AnnotationLine: FunctionComponent<AnnotationLineProps> = props => {
             2} ${clampedStart}, ${PIN_TRIANGLE_HEIGHT}`,
           fill: color,
         })}
-      <line
-        x1={clampedStart}
-        x2={clampedStart}
-        y1="0"
-        y2={length}
-        stroke={color}
-        strokeWidth={strokeWidth}
-        className="giraffe-annotation-line"
-      />
     </>
   )
 }
diff --git a/giraffe/src/components/AnnotationTooltip.tsx b/giraffe/src/components/AnnotationTooltip.tsx
index 21bc50c4..e9e84366 100644
--- a/giraffe/src/components/AnnotationTooltip.tsx
+++ b/giraffe/src/components/AnnotationTooltip.tsx
@@ -51,7 +51,7 @@ export const AnnotationTooltip: FunctionComponent<Props> = props => {
 
   let tooltipCaretStyle: CSSProperties = {
     position: 'absolute',
-    borderWidth: '10px',
+    borderWidth: '7px',
     borderStyle: 'solid',
     borderColor: 'transparent',
     zIndex: 2,