optimize SqlpadTauChart.componentDidUpdate

rickbergfalk · rickbergfalk · commit 84aae812da4b · 2016-09-16T09:11:55.000-05:00
Turns out deep-equal on a collection of 5000+ rows is pretty slow.
TauCharts still struggles with large amounts of data, but there’s no
way around that since it is svg based. Maybe limit dataset user is
allowed to visualize?
diff --git a/client-js/SqlpadTauChart.js b/client-js/SqlpadTauChart.js
@@ -3,12 +3,13 @@ var _ = require('_')
 var chartDefinitions = require('./ChartDefinitions.js')
 var SpinKitCube = require('./SpinKitCube.js')
 var tauCharts = require('tauCharts')
-var deepEqual = require('deep-equal')
 var Alert = require('react-s-alert').default
 
 var SqlpadTauChart = React.createClass({
   componentDidUpdate: function (prevProps) {
-    if (!deepEqual(prevProps.queryResult, this.props.queryResult)) {
+    var prevResultId = (prevProps.queryResult ? prevProps.queryResult.id : null)
+    var currentResultId = (this.props.queryResult ? this.props.queryResult.id : null)
+    if (prevResultId !== currentResultId) {
       console.log('rendering because queryResults changed')
       this.renderChart()
     }
diff --git a/models/QueryResult.js b/models/QueryResult.js
@@ -6,12 +6,14 @@
     should expect the data to be in this format
 */
 var _ = require('lodash')
+var uuid = require('uuid')
 
 function isNumberLike (n) {
   return (!isNaN(parseFloat(n)) && isFinite(n))
 }
 
 function QueryResult () {
+  this.id = uuid.v1()       // each result has unique id. used to determine whether results changed in React
   this.startTime
   this.stopTime
   this.queryRunTime
