Can now AND and OR interactively.

src/userquerywidget.js

@@ -245,11 +245,21 @@ export function LogicalOperatorFilterExpressionControl(props) {
 
     var _ = require('lodash');
     const handleAChanged = (new_a) => {
+        if (new_a == null) {
+            onChange(expr.sub_filter_b);
+            return;
+        }
+
         var new_me = _.cloneDeep(expr);
         new_me.sub_filter_a = new_a;
         onChange(new_me);
     }
     const handleBChanged = (new_b) => {
+        if (new_b == null) {
+            onChange(expr.sub_filter_a);
+            return;
+        }
+
         var new_me = _.cloneDeep(expr);
         new_me.sub_filter_b = new_b;
         onChange(new_me);
@@ -261,12 +271,12 @@ export function LogicalOperatorFilterExpressionControl(props) {
                 <Box className={classes.logic_op_sbs}>
                     <Box>
                         <Box className={classes.logic_op_subexpr}>
-                            <FilterExpressionControl expr={expr.sub_filter_a} onChange={handleAChanged} />
+                            <FilterExpressionControl expr={expr.sub_filter_a} onChange={handleAChanged} isRoot={false} />
                         </Box>
                     </Box>
                     <Box>
                         <Box className={classes.logic_op_subexpr}>
-                            <FilterExpressionControl expr={expr.sub_filter_b} onChange={handleBChanged} />
+                            <FilterExpressionControl expr={expr.sub_filter_b} onChange={handleBChanged} isRoot={false} />
                         </Box>
                     </Box>
                 </Box>
@@ -300,9 +310,16 @@ export function ConstFilterExpressionControl(props) {
 }
 
 export function FilterExpressionControl(props) {
-    const { expr, onChange } = props;
+    const { expr, onChange, isRoot } = props;
     const [anchorEl, setAnchorEl] = React.useState(null);
     const [editDialogOpen, setEditDialogOpen] = React.useState(false);
+    const [combineDialogOpen, setCombineDialogOpen] = React.useState(false);
+    const [combineExpr, setCombineExpr] = React.useState(new LogicalOperatorFilter(
+        expr.result_type,
+        expr,
+        new ConstFilter(expr.result_type, true),
+        LogicalOperatorEnum.AND)
+    );
 
     var _ = require('lodash');
     const menu_id = _.uniqueId("filter_menu_");
@@ -322,9 +339,40 @@ export function FilterExpressionControl(props) {
 
     const handleCloseEditFilterDialog = (filter) => {
         setEditDialogOpen(false);
-        onChange(filter);
+        onChange(filter.simplify());
     };
 
+    const handleRemove = () => {
+        onChange(null);
+    }
+
+    const handleCloseCombineDialog = (filter) => {
+        setCombineDialogOpen(false);
+        var new_filter = _.cloneDeep(combineExpr);
+        new_filter.sub_filter_b = filter;
+        onChange(new_filter.simplify());
+    }
+
+    const handleAnd = () => {
+        handleCloseMenu();
+        setCombineExpr(new LogicalOperatorFilter(
+            expr.result_type,
+            expr,
+            new ConstFilter(expr.result_type, true), LogicalOperatorEnum.AND
+        ));
+        setCombineDialogOpen(true);
+    }
+
+    const handleOr = () => {
+        handleCloseMenu();
+        setCombineExpr(new LogicalOperatorFilter(
+            expr.result_type,
+            expr,
+            new ConstFilter(expr.result_type, true), LogicalOperatorEnum.OR
+        ));
+        setCombineDialogOpen(true);
+    }
+
     var filter_elem = false;
     if (expr instanceof ConstFilter) {
         filter_elem = <ConstFilterExpressionControl {...props} onClick={handleClick} />
@@ -346,13 +394,21 @@ export function FilterExpressionControl(props) {
                 open={Boolean(anchorEl)}
                 onClose={handleCloseMenu}
             >
-                <MenuItem onClick={handleOpenEditDialog}>Edit</MenuItem>
+                <MenuItem onClick={handleOpenEditDialog}>Edit...</MenuItem>
+                <MenuItem onClick={handleAnd}>And...</MenuItem>
+                <MenuItem onClick={handleOr}>Or...</MenuItem>
+                {!isRoot && <MenuItem onClick={handleRemove}>Remove</MenuItem>}
             </Menu>
             <EditFilterExpressionDialog
                 onClose={handleCloseEditFilterDialog}
                 startingFilter={expr}
                 open={editDialogOpen}
             />
+            <EditFilterExpressionDialog
+                onClose={handleCloseCombineDialog}
+                startingFilter={combineExpr.sub_filter_b}
+                open={combineDialogOpen}
+            />
         </>
     );
 }
@@ -385,7 +441,7 @@ export function FilterControl(props) {
                     }
                     label={resultTypeString + ':'}
                 />
-                <FilterExpressionControl expr={filter} onChange={onChange} />
+                <FilterExpressionControl expr={filter} onChange={onChange} isRoot={true} />
             </Box>
         </>
     );