Change tabs in the table when builder changes tabs

ui/src/data_explorer/components/MultiTable.js

@@ -19,26 +19,18 @@ const MultiTable = React.createClass({
     })),
     height: number,
     onEditRawStatus: func.isRequired,
-  },
-
-  getInitialState() {
-    return {
-      activeQueryId: null,
-    }
+    activeQueryIndex: number,
+    onSetActiveQueryIndex: func.isRequired,
   },
 
   getActiveQuery() {
-    const {queries} = this.props
-    const activeQuery = queries.find((query) => query.id === this.state.activeQueryId)
+    const {queries, activeQueryIndex} = this.props
+    const activeQuery = queries[activeQueryIndex]
     const defaultQuery = queries[0]
 
     return activeQuery || defaultQuery
   },
 
-  handleSetActiveTable(query) {
-    this.setState({activeQueryId: query.id})
-  },
-
   render() {
     return (
       <div>
@@ -60,16 +52,16 @@ const MultiTable = React.createClass({
   },
 
   renderTabs() {
-    const {queries} = this.props
+    const {queries, onSetActiveQueryIndex} = this.props
     return (
       <div className="multi-table__tabs">
-        {queries.map((q) => {
+        {queries.map((q, i) => {
           return (
             <TabItem
               isActive={this.getActiveQuery().id === q.id}
               key={q.id}
               query={q}
-              onSelect={this.handleSetActiveTable}
+              onSelect={() => onSetActiveQueryIndex(i)}
             />
           )
         })}
@@ -89,14 +81,10 @@ const TabItem = React.createClass({
     isActive: bool.isRequired,
   },
 
-  handleSelect() {
-    this.props.onSelect(this.props.query)
-  },
-
   render() {
-    const {isActive} = this.props
+    const {isActive, onSelect} = this.props
     return (
-      <div className={classNames("multi-table__tab", {active: isActive})} onClick={this.handleSelect}>
+      <div className={classNames("multi-table__tab", {active: isActive})} onClick={onSelect}>
         {"Query"}
       </div>
     )

ui/src/data_explorer/components/Visualization.js

@@ -36,6 +36,7 @@ const Visualization = React.createClass({
     height: string,
     heightPixels: number,
     onEditRawStatus: func.isRequired,
+    onSetActiveQueryIndex: func.isRequired,
   },
 
   contextTypes: {
@@ -69,8 +70,6 @@ const Visualization = React.createClass({
     if (activeQuery && activeQuery.rawText) {
       return this.setState({view: TABLE})
     }
-
-    this.setState({view: GRAPH})
   },
 
   handleToggleView(view) {
@@ -78,7 +77,7 @@ const Visualization = React.createClass({
   },
 
   render() {
-    const {queryConfigs, timeRange, height, heightPixels, onEditRawStatus} = this.props
+    const {queryConfigs, timeRange, height, heightPixels, onEditRawStatus, activeQueryIndex, onSetActiveQueryIndex} = this.props
     const {source} = this.context
     const proxyLink = source.links.proxy
     const {view} = this.state
@@ -95,18 +94,24 @@ const Visualization = React.createClass({
       <div className={classNames("graph", {active: true})} style={{height}}>
         <VisHeader views={VIEWS} view={view} onToggleView={this.handleToggleView} name={name || 'Graph'}/>
         <div className={classNames({"graph-container": view === GRAPH, "table-container": view === TABLE})}>
-          {this.renderVisualization(view, queries, heightPixels, onEditRawStatus)}
+          {this.renderVisualization(view, queries, heightPixels, onEditRawStatus, activeQueryIndex, onSetActiveQueryIndex)}
         </div>
       </div>
     )
   },
 
-  renderVisualization(view, queries, heightPixels, onEditRawStatus) {
+  renderVisualization(view, queries, heightPixels, onEditRawStatus, activeQueryIndex, onSetActiveQueryIndex) {
     switch (view) {
       case GRAPH:
         return this.renderGraph(queries)
       case TABLE:
-        return <MultiTable queries={queries} height={heightPixels} onEditRawStatus={onEditRawStatus} />
+        return (<MultiTable
+          queries={queries}
+          height={heightPixels}
+          onEditRawStatus={onEditRawStatus}
+          activeQueryIndex={activeQueryIndex}
+          onSetActiveQueryIndex={onSetActiveQueryIndex}
+        />)
       default:
         this.renderGraph(queries)
     }

ui/src/data_explorer/containers/DataExplorer.js

@@ -89,6 +89,7 @@ const DataExplorer = React.createClass({
             queryConfigs={queryConfigs}
             activeQueryIndex={activeQueryIndex}
             onEditRawStatus={queryConfigActions.editRawQueryStatus}
+            onSetActiveQueryIndex={this.handleSetActiveQueryIndex}
           />
           <ResizeBottom>
             <QueryBuilder