Improve UX/UI for dragging / adding annotation

ui/src/shared/components/AnnotationPoint.js

@@ -93,9 +93,9 @@ class AnnotationPoint extends React.Component {
     const {isDragging} = this.state
 
     const flagClass = isDragging
-      ? 'annotation-point--flag dragging'
+      ? 'annotation-point--flag__dragging'
       : 'annotation-point--flag'
-
+    const markerClass = isDragging ? 'annotation dragging' : 'annotation'
     const clickClass = isEditing
       ? 'annotation--click-area editing'
       : 'annotation--click-area'
@@ -104,7 +104,7 @@ class AnnotationPoint extends React.Component {
 
     return (
       <div
-        className="annotation"
+        className={markerClass}
         style={{left}}
         data-time-ms={annotation.startTime}
         data-time-local={humanTime}

ui/src/shared/components/AnnotationSpan.js

@@ -99,7 +99,7 @@ class AnnotationSpan extends React.Component {
     const flagClass = isDragging
       ? 'annotation-span--left-flag dragging'
       : 'annotation-span--left-flag'
-
+    const markerClass = isDragging ? 'annotation dragging' : 'annotation'
     const clickClass = isEditing
       ? 'annotation--click-area editing'
       : 'annotation--click-area'
@@ -113,7 +113,7 @@ class AnnotationSpan extends React.Component {
 
     return (
       <div
-        className="annotation"
+        className={markerClass}
         style={{left: `${left}px`}}
         data-time-ms={startTime}
         data-time-local={humanTime}
@@ -148,15 +148,21 @@ class AnnotationSpan extends React.Component {
     const flagClass = isDragging
       ? 'annotation-span--right-flag dragging'
       : 'annotation-span--right-flag'
+    const markerClass = isDragging ? 'annotation dragging' : 'annotation'
     const clickClass = isEditing
       ? 'annotation--click-area editing'
       : 'annotation--click-area'
 
+    const rightBound = dygraph.xAxisRange()[1]
+    if (rightBound < endTime) {
+      return null
+    }
+
     const left = `${dygraph.toDomXCoord(endTime) + 16}px`
 
     return (
       <div
-        className="annotation"
+        className={markerClass}
         style={{left}}
         data-time-ms={endTime}
         data-time-local={humanTime}

ui/src/shared/components/NewAnnotation.js

@@ -95,6 +95,19 @@ class NewAnnotation extends Component {
     }
   }
 
+  renderTimestamp(time) {
+    const timestamp = `${new Date(+time)}`
+
+    return (
+      <div className="new-annotation-tooltip">
+        <span className="new-annotation-helper">Click to Annotate</span>
+        <span className="new-annotation-timestamp">
+          {timestamp}
+        </span>
+      </div>
+    )
+  }
+
   render() {
     const {
       dygraph,
@@ -103,8 +116,6 @@ class NewAnnotation extends Component {
       tempAnnotation: {startTime, endTime},
     } = this.props
 
-    const timestamp = `${new Date(+startTime)}`
-
     const crosshairOne = dygraph.toDomXCoord(startTime)
     const crosshairTwo = dygraph.toDomXCoord(endTime)
 
@@ -123,12 +134,6 @@ class NewAnnotation extends Component {
       <div>
         {isDragging &&
           <AnnotationWindow annotation={tempAnnotation} dygraph={dygraph} />}
-        <div className="new-annotation-tooltip">
-          <span className="new-annotation-helper">Click to Annotate</span>
-          <span className="new-annotation-timestamp">
-            {timestamp}
-          </span>
-        </div>
         <div
           className={classnames('new-annotation', {
             hover: isTempHovering,
@@ -145,12 +150,14 @@ class NewAnnotation extends Component {
               className="new-annotation--crosshair"
               style={{left: crosshairTwo}}
             >
+              {this.renderTimestamp(tempAnnotation.endTime)}
               <div className={flagTwoClass} />
             </div>}
           <div
             className="new-annotation--crosshair"
             style={{left: crosshairOne}}
           >
+            {isDragging || this.renderTimestamp(tempAnnotation.startTime)}
             <div className={isDragging ? flagOneClass : pointFlagClass} />
           </div>
         </div>

ui/src/style/components/annotations.scss

@@ -9,6 +9,23 @@ $window35: rgba($annotation-color,0.35);
 $timestamp-font-size: 14px;
 $timestamp-font-weight: 600;
 
+.annotation {
+  position: absolute;
+  top: 8px;
+  z-index: 3;
+  background-color: $annotation-color;
+  height: calc(100% - 36px);
+  width: 2px;
+  transform: translateX(-1px); // translate should always be half with width to horizontally center the annotation pos  
+  transition: background-color 0.25s ease;
+  visibility: visible;
+
+  &.dragging {
+    background-color: $annotation-color__drag;
+    z-index: 4;
+  }
+}
+
 .annotation-point--flag {
   position: absolute;
   z-index: 2;
@@ -171,24 +188,6 @@ $timestamp-font-weight: 600;
   margin-left: 2px;
 }
 
-
-.annotation {
-  position: absolute;
-  top: 8px;
-  z-index: 3;
-  background-color: $annotation-color;
-  height: calc(100% - 36px);
-  width: 2px;
-  transform: translateX(-1px); // translate should always be half with width to horizontally center the annotation pos  
-  transition: background-color 0.25s ease;
-  visibility: visible;
-
-  &.dragging {
-    background-color: $annotation-color__drag;
-    z-index: 4;
-  }
-}
-
 .annotation--click-area {
   position: absolute;
   top: -8px;
@@ -248,7 +247,7 @@ $timestamp-font-weight: 600;
 }
 
 .new-annotation-tooltip {
-  display: none;
+  display: flex;
   flex-direction: column;
   align-items: center;
   background: linear-gradient(to bottom, $c-pool 0%,$c-ocean 100%);
@@ -260,9 +259,6 @@ $timestamp-font-weight: 600;
   transform: translateX(-50%);
   z-index: 10;
 }
-.new-annotation.hover .new-annotation-tooltip {
-  display: flex;
-}
 
 .new-annotation-helper {
   white-space: nowrap;