Fix static legend state loop

ui/src/shared/components/Crosshair.tsx

@@ -16,7 +16,7 @@ interface Props {
 class Crosshair extends PureComponent<Props> {
   public render() {
     if (!this.isVisible) {
-      return null
+      return <div className="crosshair-container" />
     }
 
     return (
@@ -26,7 +26,6 @@ class Crosshair extends PureComponent<Props> {
           style={{
             left: this.crosshairLeft,
             height: this.crosshairHeight,
-            width: '1px',
           }}
         />
       </div>
@@ -47,10 +46,10 @@ class Crosshair extends PureComponent<Props> {
     return isValidHoverTime && hoverTime !== 0 && _.isFinite(hoverTime)
   }
 
-  private get crosshairLeft(): number {
+  private get crosshairLeft(): string {
     const {dygraph, hoverTime} = this.props
     const cursorOffset = 16
-    return dygraph.toDomXCoord(hoverTime) + cursorOffset
+    return `${dygraph.toDomXCoord(hoverTime) + cursorOffset}px`
   }
 
   private get crosshairHeight(): string {

ui/src/shared/components/Dygraph.tsx

@@ -261,7 +261,7 @@ class Dygraph extends Component<Props, State> {
             />
             <Crosshair
               dygraph={this.dygraph}
-              stasticLegendHeight={staticLegendHeight}
+              staticLegendHeight={staticLegendHeight}
             />
           </div>
         )}
@@ -270,9 +270,8 @@ class Dygraph extends Component<Props, State> {
           <StaticLegend
             dygraphSeries={this.colorDygraphSeries}
             dygraph={this.dygraph}
-            handleReceiveStaticLegendHeight={
-              this.handleReceiveStaticLegendHeight
-            }
+            height={staticLegendHeight}
+            onUpdateHeight={this.handleUpdateStaticLegendHeight}
           />
         )}
         {this.nestedGraph &&
@@ -456,7 +455,7 @@ class Dygraph extends Component<Props, State> {
     return nanoDate.toISOString()
   }
 
-  private handleReceiveStaticLegendHeight = (staticLegendHeight: number) => {
+  private handleUpdateStaticLegendHeight = (staticLegendHeight: number) => {
     this.setState({staticLegendHeight})
   }
 }

ui/src/shared/components/StaticLegend.js

@@ -29,16 +29,21 @@ class StaticLegend extends Component {
 
   componentDidMount = () => {
     const {height} = this.staticLegendRef.getBoundingClientRect()
-    this.props.handleReceiveStaticLegendHeight(height)
+    this.props.onUpdateHeight(height)
   }
 
-  componentDidUpdate = () => {
+  componentDidUpdate = prevProps => {
     const {height} = this.staticLegendRef.getBoundingClientRect()
-    this.props.handleReceiveStaticLegendHeight(height)
+
+    if (prevProps.height === height) {
+      return
+    }
+
+    this.props.onUpdateHeight(height)
   }
 
   componentWillUnmount = () => {
-    this.props.handleReceiveStaticLegendHeight(null)
+    this.props.onUpdateHeight(0)
   }
 
   handleClick = i => e => {
@@ -96,12 +101,13 @@ class StaticLegend extends Component {
   }
 }
 
-const {shape, func} = PropTypes
+const {shape, func, number} = PropTypes
 
 StaticLegend.propTypes = {
   dygraphSeries: shape({}),
   dygraph: shape({}),
-  handleReceiveStaticLegendHeight: func.isRequired,
+  height: number.isRequired,
+  onUpdateHeight: func.isRequired,
 }
 
 export default StaticLegend

ui/src/style/components/crosshairs.scss

@@ -3,17 +3,12 @@
   ------------------------------------------------------------------------------
 */
 
-%crosshair-styles {
-  position: absolute;
-  cursor: pointer;
-}
-
 .crosshair {
-  @extend %crosshair-styles;
   top: 0;
-  height: calc(100% - 20px);
-  width: 0.5px;
-  background-color: $g14-chromium;
-  pointer-events: none;
+  position: absolute;
+  width: 1px;
   z-index: 3;
+  background: linear-gradient(to bottom, fade-out($g14-chromium, 1) 0%,$g14-chromium 7%,$g14-chromium 93%,fade-out($g14-chromium, 1) 100%);
+  pointer-events: none;
+  min-height: 20px;
 }