Fix some React warnings and add back in . when toggling data reference

resources/frontend_client/app/card/card.controllers.js

@@ -601,6 +601,7 @@ CardControllers.controller('CardDetail', [
 
         function toggleDataReference() {
             $scope.isShowingDataReference = !$scope.isShowingDataReference;
+            $scope.$digest();
             renderAll();
             // render again after 500ms to wait for animation to complete
             window.setTimeout(renderAll, 500);

resources/frontend_client/app/query_builder/data_reference_field.react.js

@@ -104,7 +104,7 @@ export default React.createClass({
             var validBreakout = this.state.table && this.state.table.breakout_options.fields.filter((f) => f[0] === this.props.field.id).length > 0;
             var useForCurrentQuestionArray = [];
             useForCurrentQuestionArray.push(
-                <li className="mt1">
+                <li key="filter-by" className="mt1">
                     <a className="Button Button--white text-default no-decoration" href="#" onClick={this.filterBy}>
                         <Icon className="mr1" name="add" width="12px" height="12px"/> Filter by {name}
                         </a>
@@ -112,7 +112,7 @@ export default React.createClass({
             );
             if (validBreakout) {
                 useForCurrentQuestionArray.push(
-                    <li className="mt1">
+                    <li key="group-by" className="mt1">
                         <a className="Button Button--white text-default no-decoration" href="#" onClick={this.groupBy}>
                             <Icon className="mr2" name="add" width="12px" height="12px" /> Group by {name}
                         </a>
@@ -129,12 +129,12 @@ export default React.createClass({
 
         var usefulQuestions = [];
         if (this.props.field.special_type === "number") {
-            usefulQuestions.push(<li><DataReferenceQueryButton icon="illustration-icon-scalar" text={"Sum of all values of " + fieldName} onClick={this.setQuerySum} /></li>);
+            usefulQuestions.push(<li key="sum"><DataReferenceQueryButton icon="illustration-icon-scalar" text={"Sum of all values of " + fieldName} onClick={this.setQuerySum} /></li>);
         }
-        usefulQuestions.push(<li><DataReferenceQueryButton icon="illustration-icon-table" text={"All distinct values of " + fieldName} onClick={this.setQueryDistinct} /></li>);
+        usefulQuestions.push(<li key="distinct-values"><DataReferenceQueryButton icon="illustration-icon-table" text={"All distinct values of " + fieldName} onClick={this.setQueryDistinct} /></li>);
         var queryCountGroupedByText = "Number of " + inflection.pluralize(tableName) + " grouped by " + fieldName;
-        usefulQuestions.push(<li><DataReferenceQueryButton icon="illustration-icon-bars" text={queryCountGroupedByText} onClick={this.setQueryCountGroupedBy.bind(null, "bar")} /></li>);
-        usefulQuestions.push(<li><DataReferenceQueryButton icon="illustration-icon-pie" text={queryCountGroupedByText} onClick={this.setQueryCountGroupedBy.bind(null, "pie")} /></li>);
+        usefulQuestions.push(<li key="count-bar"><DataReferenceQueryButton icon="illustration-icon-bars" text={queryCountGroupedByText} onClick={this.setQueryCountGroupedBy.bind(null, "bar")} /></li>);
+        usefulQuestions.push(<li key="count-pie"><DataReferenceQueryButton icon="illustration-icon-pie" text={queryCountGroupedByText} onClick={this.setQueryCountGroupedBy.bind(null, "pie")} /></li>);
 
         return (
             <div>

resources/frontend_client/app/query_builder/data_reference_main.react.js

@@ -44,14 +44,14 @@ export default React.createClass({
                             'border-bottom': index !== dbTables.length - 1
                         })
                         return (
-                            <li className={classes}>
+                            <li key={table.id} className={classes}>
                                 <a className="text-brand no-decoration" href="#" onClick={this.props.showTable.bind(null, table)}>{tableName}</a>
                             </li>
                         );
                     });
                 }
                 return (
-                    <li>
+                    <li key={database.id}>
                         <div className="my2">
                             <h2 className="inline-block">{database.name}</h2>
                             <span className="ml1">{tableCount}</span>

resources/frontend_client/app/query_builder/filter_widget.react.js

@@ -280,7 +280,7 @@ export default React.createClass({
             }
 
             filterValueInputs[i] = (
-                <div className="FilterSection">
+                <div key={i} className="FilterSection">
                     {valueHtml}
                 </div>
             );

resources/frontend_client/app/query_builder/gui_query_editor.react.js

@@ -290,6 +290,7 @@ export default React.createClass({
                 if(index > 0) {
                     return (
                         <FilterWidget
+                            key={filter[1]}
                             placeholder="Item"
                             filter={filter}
                             filterFieldList={filterFieldList}

resources/frontend_client/app/query_builder/header.react.js

@@ -243,7 +243,6 @@ export default React.createClass({
             )
         }
 
-        console.log(this.props);
         var dataReferenceButtonClasses = cx({
             'mx1': true,
             'transition-color': true,