WIP legened wont render on initial render

ui/src/shared/components/Dygraph.js

@@ -97,24 +97,12 @@ class Dygraph extends Component {
   }
 
   shouldComponentUpdate(nextProps, nextState) {
-    const timeRangeChanged = !_.isEqual(
-      nextProps.timeRange,
-      this.props.timeRange
-    )
-
-    if (this.dygraph.isZoomed() && timeRangeChanged) {
-      this.dygraph.resetZoom()
-    }
-
     const arePropsEqual = _.isEqual(this.props, nextProps)
     const areStatesEqual = _.isEqual(this.state, nextState)
-
-    const shouldUpdate = !arePropsEqual || !areStatesEqual
-
-    return shouldUpdate
+    return !arePropsEqual || !areStatesEqual
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
     const {labels, axes: {y, y2}, options, isBarGraph} = this.props
 
     const dygraph = this.dygraph
@@ -127,6 +115,15 @@ class Dygraph extends Component {
 
     const timeSeries = this.timeSeries
 
+    const timeRangeChanged = !_.isEqual(
+      prevProps.timeRange,
+      this.props.timeRange
+    )
+
+    if (this.dygraph.isZoomed() && timeRangeChanged) {
+      this.dygraph.resetZoom()
+    }
+
     const updateOptions = {
       ...options,
       labels,

ui/src/shared/components/DygraphLegend.js

@@ -9,7 +9,16 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 
 @ErrorHandling
 class DygraphLegend extends Component {
-  state = {
+  constructor(props) {
+    super(props)
+
+    this.props.dygraph.updateOptions({
+      legendFormatter: this.legendFormatter,
+      highlightCallback: this.highlightCallback,
+      unhighlightCallback: this.unhighlightCallback,
+    })
+
+    this.state = {
       legend: {
         x: null,
         series: [],
@@ -22,13 +31,6 @@ class DygraphLegend extends Component {
       legendStyles: {},
       pageX: null,
     }
-
-  componentDidMount() {
-    this.props.dygraph.updateOptions({
-      legendFormatter: this.legendFormatter,
-      highlightCallback: this.highlightCallback,
-      unhighlightCallback: this.unhighlightCallback,
-    })
   }
 
   componentWillUnmount() {
@@ -40,6 +42,53 @@ class DygraphLegend extends Component {
     }
   }
 
+  highlightCallback = e => {
+    console.log('callback firing: ', this, e, e.target)
+    this.setState({pageX: e.pageX})
+    this.props.onShow(e)
+  }
+
+  legendFormatter = legend => {
+    if (!legend.x) {
+      return ''
+    }
+
+    const {legend: prevLegend} = this.state
+    const highlighted = legend.series.find(s => s.isHighlighted)
+    const prevHighlighted = prevLegend.series.find(s => s.isHighlighted)
+
+    const yVal = highlighted && highlighted.y
+    const prevY = prevHighlighted && prevHighlighted.y
+
+    if (legend.x === prevLegend.x && yVal === prevY) {
+      return ''
+    }
+
+    this.legend = this.setState({legend})
+    return ''
+  }
+
+  unhighlightCallback = e => {
+    const {
+      top,
+      bottom,
+      left,
+      right,
+    } = this.legendNodeRef.getBoundingClientRect()
+
+    const mouseY = e.clientY
+    const mouseX = e.clientX
+
+    const mouseBuffer = 5
+    const mouseInLegendY = mouseY <= bottom && mouseY >= top - mouseBuffer
+    const mouseInLegendX = mouseX <= right && mouseX >= left
+    const isMouseHoveringLegend = mouseInLegendY && mouseInLegendX
+
+    if (!isMouseHoveringLegend) {
+      this.props.onHide()
+    }
+  }
+
   handleToggleFilter = () => {
     this.setState({
       isFilterVisible: !this.state.isFilterVisible,
@@ -71,52 +120,6 @@ class DygraphLegend extends Component {
     this.setState({sortType, isAscending: !this.state.isAscending})
   }
 
-  unhighlightCallback = e => {
-    const {
-      top,
-      bottom,
-      left,
-      right,
-    } = this.legendNodeRef.getBoundingClientRect()
-
-    const mouseY = e.clientY
-    const mouseX = e.clientX
-
-    const mouseBuffer = 5
-    const mouseInLegendY = mouseY <= bottom && mouseY >= top - mouseBuffer
-    const mouseInLegendX = mouseX <= right && mouseX >= left
-    const isMouseHoveringLegend = mouseInLegendY && mouseInLegendX
-
-    if (!isMouseHoveringLegend) {
-      this.props.onHide()
-    }
-  }
-
-  highlightCallback = e => {
-    this.setState({pageX: e.pageX})
-    this.props.onShow(e)
-  }
-
-  legendFormatter = legend => {
-    if (!legend.x) {
-      return ''
-    }
-
-    const {legend: prevLegend} = this.state
-    const highlighted = legend.series.find(s => s.isHighlighted)
-    const prevHighlighted = prevLegend.series.find(s => s.isHighlighted)
-
-    const yVal = highlighted && highlighted.y
-    const prevY = prevHighlighted && prevHighlighted.y
-
-    if (legend.x === prevLegend.x && yVal === prevY) {
-      return ''
-    }
-
-    this.legend = this.setState({legend})
-    return ''
-  }
-
   render() {
     const {dygraph, onHide, isHidden} = this.props
 

ui/src/shared/components/LineGraph.js

@@ -15,10 +15,6 @@ class LineGraph extends Component {
     super(props)
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState)
-  }
-
   componentWillMount() {
     const {data, isInDataExplorer} = this.props
     this._timeSeries = timeSeriesToDygraph(data, isInDataExplorer)