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

@@ -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",

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;
+ }
+}

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;

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"
- />
  </>
  )
 }

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,