From 26318f94fef888a4b54a022bbbd44f269cfbf9b3 Mon Sep 17 00:00:00 2001
From: vera-liu <vera.liu@airbnb.com>
Date: Tue, 1 Nov 2016 19:40:09 -0700
Subject: [PATCH] Moved queriesArray from render() to local state (#1505)

* Moved queriesArray from render() to local state, so that QueriesArray
is only reloaded only during switching tabs or queries object is updated.

* Changed object comparison function to take length into consideration
---
 .../SqlLab/components/TabbedSqlEditors.jsx    | 24 +++++++++++++------
 caravel/assets/javascripts/reduxUtils.js      | 18 ++++++++++++++
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx b/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx
index 0a722cb22c3..d22ebc7cd4f 100644
--- a/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx
+++ b/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx
@@ -6,6 +6,7 @@ import * as Actions from '../actions';
 import SqlEditor from './SqlEditor';
 import { getParamFromQuery } from '../../../utils/common';
 import CopyQueryTabUrl from './CopyQueryTabUrl';
+import { areObjectsEqual } from '../../reduxUtils';
 
 const propTypes = {
   actions: React.PropTypes.object.isRequired,
@@ -34,6 +35,7 @@ class TabbedSqlEditors extends React.PureComponent {
       uri,
       cleanUri,
       query,
+      queriesArray: [],
     };
   }
   componentWillMount() {
@@ -51,6 +53,19 @@ class TabbedSqlEditors extends React.PureComponent {
       window.history.replaceState({}, document.title, this.state.cleanUri);
     }
   }
+  componentWillReceiveProps(nextProps) {
+    const activeQeId = this.props.tabHistory[this.props.tabHistory.length - 1];
+    const newActiveQeId = nextProps.tabHistory[nextProps.tabHistory.length - 1];
+    if (activeQeId !== newActiveQeId || !areObjectsEqual(this.props.queries, nextProps.queries)) {
+      const queriesArray = [];
+      for (const id in this.props.queries) {
+        if (this.props.queries[id].sqlEditorId === newActiveQeId) {
+          queriesArray.push(this.props.queries[id]);
+        }
+      }
+      this.setState({ queriesArray });
+    }
+  }
   renameTab(qe) {
     /* eslint no-alert: 0 */
     const newTitle = prompt('Enter a new title for the tab');
@@ -93,12 +108,7 @@ class TabbedSqlEditors extends React.PureComponent {
   render() {
     const editors = this.props.queryEditors.map((qe, i) => {
       const isSelected = (qe.id === this.activeQueryEditor().id);
-      const queriesArray = [];
-      for (const id in this.props.queries) {
-        if (this.props.queries[id].sqlEditorId === qe.id) {
-          queriesArray.push(this.props.queries[id]);
-        }
-      }
+
       let latestQuery;
       if (qe.latestQueryId) {
         latestQuery = this.props.queries[qe.latestQueryId];
@@ -142,7 +152,7 @@ class TabbedSqlEditors extends React.PureComponent {
                 <SqlEditor
                   tables={this.props.tables.filter((t) => (t.queryEditorId === qe.id))}
                   queryEditor={qe}
-                  queries={queriesArray}
+                  queries={this.state.queriesArray}
                   latestQuery={latestQuery}
                   database={database}
                   actions={this.props.actions}
diff --git a/caravel/assets/javascripts/reduxUtils.js b/caravel/assets/javascripts/reduxUtils.js
index c642c3d1018..75c9f7660c8 100644
--- a/caravel/assets/javascripts/reduxUtils.js
+++ b/caravel/assets/javascripts/reduxUtils.js
@@ -94,3 +94,21 @@ export function areArraysShallowEqual(arr1, arr2) {
   }
   return true;
 }
+
+export function areObjectsEqual(obj1, obj2) {
+  if (!obj1 || !obj2) {
+    return false;
+  }
+  if (! Object.keys(obj1).length !== Object.keys(obj2).length) {
+    return false;
+  }
+  for (const id in obj1) {
+    if (!obj2.hasOwnProperty(id)) {
+      return false;
+    }
+    if (obj1[id] !== obj2[id]) {
+      return false;
+    }
+  }
+  return true;
+}