Fix diff mutation bug, simplify resetZoom trigger

ui/src/shared/components/Dygraph.js

@@ -1,8 +1,8 @@
 /* eslint-disable no-magic-numbers */
 import React, {PropTypes} from 'react'
+import shallowCompare from 'react-addons-shallow-compare'
 
 import _ from 'lodash'
-import {deepDiffByKeys} from 'utils/deepDiff.js'
 
 import Dygraph from '../../external/dygraph'
 import getRange from 'src/shared/parsing/getRangeForDygraph'
@@ -160,18 +160,17 @@ export default React.createClass({
   // If only timeRange has changed, only reset the zoom.
   // TODO: possibly try to use dateWindow and a zoomCallback to updateOptions
   // in comonentDidUpdate so that zoom and redraw happen at the same time
-  shouldComponentUpdate(nextProps) {
+  shouldComponentUpdate(nextProps, nextState) {
-    const changedProps = deepDiffByKeys(this.props, nextProps)
+    const timeRangeChanged = !_.isEqual(
-    const testProps = ['lower', 'upper']
+      nextProps.timeRange,
-
+      this.props.timeRange
-    const timeRangeChanged = !!_.intersection(changedProps, testProps).length
+    )
-    const shouldUpdate = !!_.difference(changedProps, testProps).length
 
     if (this.dygraph.isZoomed() && timeRangeChanged) {
       this.dygraph.resetZoom()
     }
 
-    return shouldUpdate
+    return shallowCompare(this, nextProps, nextState)
   },
 
   componentDidUpdate() {

ui/src/utils/deepDiff.js

@@ -1,18 +0,0 @@
-import _ from 'lodash'
-
-export const deepDiffByKeys = (sourceObj, comparatorObj) => {
-  const keysWithDiffValues = []
-
-  // perform a deep diff on props objects to see what keys have changed
-  // from https://stackoverflow.com/questions/8572826/generic-deep-diff-between-two-objects
-  _.mergeWith(sourceObj, comparatorObj, (objectValue, sourceValue, key) => {
-    if (
-      !_.isEqual(objectValue, sourceValue) &&
-      Object(objectValue) !== objectValue
-    ) {
-      keysWithDiffValues.push(key)
-    }
-  })
-
-  return keysWithDiffValues
-}