Refactor: deepDiff into utils file and cleaner logic

ui/src/shared/components/Dygraph.js

@@ -1,6 +1,9 @@
 /* eslint-disable no-magic-numbers */
 import React, {PropTypes} from 'react'
+
 import _ from 'lodash'
+import {deepDiffByKeys} from 'utils/deepDiff.js'
+
 import Dygraph from '../../external/dygraph'
 import getRange from 'src/shared/parsing/getRangeForDygraph'
 
@@ -158,34 +161,17 @@ export default React.createClass({
   // 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) {
-    const timeRangeChanged =
+    const changedProps = deepDiffByKeys(this.props, nextProps)
-      nextProps.timeRange.lower !== this.props.timeRange.lower ||
+    const testProps = ['lower', 'upper']
-      nextProps.timeRange.upper !== this.props.timeRange.upper
+
+    const timeRangeChanged = !!_.intersection(changedProps, testProps).length
+    const shouldUpdate = !!_.difference(changedProps, testProps).length
 
     if (this.dygraph.isZoomed() && timeRangeChanged) {
       this.dygraph.resetZoom()
     }
 
-    const propsChanged = []
+    return shouldUpdate
-
-    // 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(this.props, nextProps, (objectValue, sourceValue, key) => {
-      if (
-        !_.isEqual(objectValue, sourceValue) &&
-        Object(objectValue) !== objectValue
-      ) {
-        propsChanged.push(key)
-      }
-    })
-
-    const propsChangedWithoutTimeRange = _.without(
-      propsChanged,
-      'lower',
-      'upper'
-    )
-
-    return propsChangedWithoutTimeRange.length
   },
 
   componentDidUpdate() {

ui/src/utils/deepDiff.js

@@ -0,0 +1,18 @@
+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
+}