Bring direct manipulation prototype up to date

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

@@ -279,7 +279,7 @@ CardControllers.controller('CardDetail', [
                     return false;
                 }
             },
-            cellClickedFn: function(rowIndex, columnIndex) {
+            cellClickedFn: function(rowIndex, columnIndex, filter) {
                 if (!queryResult) return false;
 
                 // lookup the coldef and cell value of the cell we are taking action on
@@ -310,7 +310,11 @@ CardControllers.controller('CardDetail', [
 
                     // run it
                     runQuery(card.dataset_query);
-                }
+                } else {
+                    Query.addFilter(card.dataset_query.query);
+                    Query.updateFilter(card.dataset_query.query, card.dataset_query.query.filter.length - 1, [filter, coldef.id, value]);
+                    runQuery(card.dataset_query);
+                 }
             },
             followForeignKeyFn: function(fk) {
                 if (!queryResult || !fk) return false;

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

@@ -3,6 +3,7 @@
 
 import FixedDataTable from 'fixed-data-table';
 import Icon from './icon.react';
+import Popover from './popover.react';
 
 var cx = React.addons.classSet;
 var Table = FixedDataTable.Table;
@@ -34,7 +35,8 @@ export default React.createClass({
             width: 0,
             height: 0,
             columnWidths: [],
-            colDefs: null
+            colDefs: null,
+            popover: null
         };
     },
 
@@ -125,8 +127,32 @@ export default React.createClass({
         this.props.cellClickedFn(rowIndex, columnIndex);
     },
 
+    popoverFilterClicked: function(rowIndex, columnIndex, operator) {
+        this.props.cellClickedFn(rowIndex, columnIndex, operator);
+        this.setState({ popover: null });
+    },
+
     rowGetter: function(rowIndex) {
-        return this.props.data.rows[rowIndex];
+        var row = {
+            hasPopover: this.state.popover && this.state.popover.rowIndex === rowIndex || false
+        };
+        for (var i = 0; i < this.props.data.rows[rowIndex].length; i++) {
+            row[i] = this.props.data.rows[rowIndex][i];
+        }
+        return row;
+    },
+
+    showPopover: function(rowIndex, cellDataKey) {
+        this.setState({
+            popover: {
+                rowIndex: rowIndex,
+                cellDataKey: cellDataKey
+            }
+        });
+    },
+
+    handleClickOutside: function() {
+        this.setState({ popover: null });
     },
 
     cellRenderer: function(cellData, cellDataKey, rowData, rowIndex, columnData, width) {
@@ -137,7 +163,32 @@ export default React.createClass({
         if (this.props.cellIsClickableFn(rowIndex, cellDataKey)) {
             return (<a key={key} className="link" href="#" onClick={this.cellClicked.bind(null, rowIndex, cellDataKey)}>{cellData}</a>);
         } else {
-            return (<div key={key}>{cellData}</div>);
+            var popover = null;
+            if (this.state.popover && this.state.popover.rowIndex === rowIndex && this.state.popover.cellDataKey === cellDataKey) {
+                var tetherOptions = {
+                    targetAttachment: "middle center",
+                    attachment: "middle center"
+                };
+                var operators = ["<", "=", "≠", ">"].map(function(operator) {
+                    return (<li key={operator} className="p2 text-brand-hover" onClick={this.popoverFilterClicked.bind(null, rowIndex, cellDataKey, operator)}>{operator}</li>);
+                }, this);
+                popover = (
+                    <Popover
+                        tetherOptions={tetherOptions}
+                        handleClickOutside={this.handleClickOutside}
+                    >
+                        <div className="bg-white bordered shadowed p1">
+                            <ul className="h1 flex align-center">{operators}</ul>
+                        </div>
+                    </Popover>
+                );
+            }
+            return (
+                <div key={key}>
+                    <div onClick={this.showPopover.bind(null, rowIndex, cellDataKey)}>{cellData}</div>
+                    {popover}
+                </div>
+            );
         }
     },