Got layout and simplification of query filters working.

src/groupingbox.js

@@ -1,67 +0,0 @@
-import React from 'react';
-
-import Box from '@material-ui/core/Box';
-
-import { makeStyles } from '@material-ui/core/styles';
-
-const GroupBoxContext = React.createContext();
-
-const groupingBoxProps = {
-    bgcolor: 'background.paper',
-    borderColor: 'text.primary',
-    borderRadius: 'borderRadius',
-    m: 1,
-    border: 1,
-};
-
-const useStyles = makeStyles(theme => ({
-    groupingboxtitle: {
-
-    },
-}));
-
-export function GroupingBoxTitle(props) {
-    const { children } = props;
-    return children;
-}
-
-export function GroupingBoxItem(props) {
-    const { children } = props;
-    return children;
-}
-
-export function GroupingBox(props) {
-    const classes = useStyles();
-    const { children } = props;
-
-    var title_elem = false;
-    var content_elems = [];
-
-    children.forEach(child => {
-        if (child.type == GroupingBoxItem) {
-            content_elems.push(child);
-        } else if (child.type == GroupingBoxTitle) {
-            if (title_elem) {
-                throw new Error("A GroupingBox may only have one GroupingBoxTitle child.");
-            }
-            title_elem = child;
-        }
-    });
-
-    if (!title_elem) {
-        throw new Error("A GroupingBox must have at least one GroupingBoxTitle.");
-    }
-
-    return (
-        <GroupBoxContext.Provider>
-            <Box>
-                <Box {...groupingBoxProps}>
-                    <Box className={classes.groupingboxtitle}>
-                        {title_elem}
-                    </Box>
-                    {content_elems}
-                </Box>
-            </Box>
-        </GroupBoxContext.Provider>
-    )
-}

src/queries.js

@@ -84,6 +84,9 @@ export class ResultFilter {
     result_type = ResultTypeEnum.IMAGE;
 
     to_sql_where() { return "(1=1)"; }
+    is_true() { return false; }
+    is_false() { return false; }
+    simplify() { return this; }
 }
 
 export class ConstFilter extends ResultFilter {
@@ -93,6 +96,10 @@ export class ConstFilter extends ResultFilter {
     to_sql_where() {
         return this.constval ? "(1=1)" : "(1=0)";
     }
+    
+    is_true() { return this.constval; }
+    is_false() { return !this.constval; }
+    simplify() { return this; }
 }
 
 export class MatchingFilter extends ResultFilter {
@@ -134,6 +141,7 @@ export class MatchingFilter extends ResultFilter {
 
         return "(" + (this.negate ? "NOT " : "") + match_against + match_type_str + match_from + ")";
     }
+    simplify() { return this; }
 }
 
 export const LogicalOperatorEnum = {
@@ -160,6 +168,29 @@ export class LogicalOperatorFilter extends ResultFilter {
         }
         return "(" + where1 + operator_str + where2 + ")";
     }
+
+    simplify() {
+        var a = this.sub_filter_a.simplify();
+        var b = this.sub_filter_b.simplify();
+
+        if(this.operator == LogicalOperatorEnum.OR) {
+            if(a.is_true() || b.is_true()) {
+                return new ConstFilter(this.return_type, true);
+            }
+            if(a.is_false()) { return b; }
+            if(b.is_false()) { return a; }
+        }
+
+        if(this.operator == LogicalOperatorEnum.AND) {
+            if(a.is_false() || b.is_false()) {
+                return new ConstFilter(this.return_type, false);
+            }
+            if(a.is_true()) { return b; }
+            if(b.is_true()) { return a; }
+        }
+
+        return this;
+    }
 }
 
 export class UserQuery {
@@ -263,7 +294,7 @@ function filter_from_text_segment(result_type, segment) {
         filter = name_filter;
     }
 
-    return filter;
+    return filter.simplify();
 }
 
 export function user_query_from_search_string(search_string) {
@@ -277,11 +308,11 @@ export function user_query_from_search_string(search_string) {
 
     texts.forEach(text => {
         r.image_filter = new LogicalOperatorFilter(ResultTypeEnum.IMAGE, r.image_filter,
-            filter_from_text_segment(ResultTypeEnum.IMAGE, text), LogicalOperatorEnum.AND);
+            filter_from_text_segment(ResultTypeEnum.IMAGE, text), LogicalOperatorEnum.AND).simplify();
         r.album_filter = new LogicalOperatorFilter(ResultTypeEnum.ALBUM, r.album_filter,
-            filter_from_text_segment(ResultTypeEnum.ALBUM, text), LogicalOperatorEnum.AND);
+            filter_from_text_segment(ResultTypeEnum.ALBUM, text), LogicalOperatorEnum.AND).simplify();
         r.tag_filter = new LogicalOperatorFilter(ResultTypeEnum.TAG, r.tag_filter,
-            filter_from_text_segment(ResultTypeEnum.TAG, text), LogicalOperatorEnum.AND);
+            filter_from_text_segment(ResultTypeEnum.TAG, text), LogicalOperatorEnum.AND).simplify();
     });
 
     return r;
@@ -292,8 +323,8 @@ export function user_query_from_browsed_album(album_path) {
     var match_type = MatchTypeEnum.MATCH_REGEXP_CASEINSENSITIVE;
     var match_text = '"' + escape_regex(album_path) + '(\/[^\/]+)*' + '"';
     var match_against = "Albums.relativePath";
-    r.image_filter = new MatchingFilter(ResultTypeEnum.IMAGE, match_against, match_text, match_type, false);
+    r.image_filter = new MatchingFilter(ResultTypeEnum.IMAGE, match_against, match_text, match_type, false).simplify();
-    r.album_filter = new ConstFilter(ResultTypeEnum.ALBUM, false);
+    r.album_filter = new ConstFilter(ResultTypeEnum.ALBUM, false).simplify();
 
     return r;
 }
@@ -303,9 +334,9 @@ export function user_query_from_browsed_tag(name) {
     var match_type = MatchTypeEnum.MATCH_EQUALS;
     var match_text = '"' + name + '"';
     var match_against = "Tags.name";
-    r.image_filter = new MatchingFilter(ResultTypeEnum.IMAGE, match_against, match_text, match_type, false);
+    r.image_filter = new MatchingFilter(ResultTypeEnum.IMAGE, match_against, match_text, match_type, false).simplify();
-    r.album_filter = new ConstFilter(ResultTypeEnum.ALBUM, false);
+    r.album_filter = new ConstFilter(ResultTypeEnum.ALBUM, false).simplify();
-    r.tag_filter = new ConstFilter(ResultTypeEnum.TAG, false);
+    r.tag_filter = new ConstFilter(ResultTypeEnum.TAG, false).simplify();
 
     return r;
 }

src/userquerywidget.js

@@ -9,8 +9,6 @@ import Button from '@material-ui/core/Button';
 
 import { makeStyles } from '@material-ui/core/styles';
 
-import { GroupingBox, GroupingBoxItem, GroupingBoxTitle } from './groupingbox.js';
-
 import {
     filter_is_const_false, ConstFilter, LogicalOperatorFilter, MatchingFilter,
     ResultTypeEnum, LogicalOperatorEnum, MatchTypeEnum
@@ -18,12 +16,15 @@ import {
 
 const useStyles = makeStyles(theme => ({
     root: {},
-    treebox: {
+    filterexpcontrol: {},
-        display: "block",
+    logic_op_outer: {
-        margin: "auto",
+        display: "flex",
+    },
+    logic_op_sbs: {
+        "box-sizing": "border-box",
     },
-    filterexpcontrol: {
+    logic_op_subexpr: {
-        margin: "10px",
+        float: "right",
     },
 }));
 
@@ -59,19 +60,27 @@ export function LogicalOperatorFilterExpressionControl(props) {
     }
 
     return (
-        <GroupingBox>
+        <>
-            <GroupingBoxTitle>
+            <Box className={classes.logic_op_outer}>
-                <Button variant="outlined" className={classes.filterexpcontrol}>
+                <Box className={classes.logic_op_sbs}>
+                    <Box>
+                        <Box className={classes.logic_op_subexpr}>
+                            <FilterExpressionControl expr={expr.sub_filter_a} />
+                        </Box>
+                    </Box>
+                    <Box>
+                        <Box className={classes.logic_op_subexpr}>
+                            <FilterExpressionControl expr={expr.sub_filter_b} />
+                        </Box>
+                    </Box>
+                </Box>
+                <Button
+                    variant="outlined"
+                    className={classes.filterexpcontrol + " " + classes.logic_op_sbs}>
                     {opstring}
                 </Button>
-            </GroupingBoxTitle>
+            </Box>
-            <GroupingBoxItem>
+        </>
-                <FilterExpressionControl expr={expr.sub_filter_a} />
-            </GroupingBoxItem>
-            <GroupingBoxItem>
-                <FilterExpressionControl expr={expr.sub_filter_b} />
-            </GroupingBoxItem>
-        </GroupingBox>
     )
 }