Simplify filter presentation.

src/database.js

@@ -16,6 +16,7 @@ export function alasql_async_queries(alasql_object, queries) {
   var p = Promise.resolve(null);
   for (let i = 0; i < queries.length; i++) {
     p = p.then(() => {
+      console.log(queries[i]);
       return alasql_object.promise(queries[i]);
     });
   }

src/queries.js

@@ -143,7 +143,7 @@ export class MatchingFilter extends ResultFilter {
         } else if (this.match_type == MatchTypeEnum.MATCH_IMAGE_NAME_NATURAL) {
             return '(LOWER(Images.name) REGEXP LOWER(".*'
                 + escape_regex(this.match_from)
-                + ')).*"';
+                + '.*"))';
         } else if (this.match_type == MatchTypeEnum.MATCH_ALBUM_EQUALS) {
             return '(Albums.relativePath = "' + this.match_from + '")';
         } else if (this.match_type == MatchTypeEnum.MATCH_ALBUM_EQUALS_OR_CHILD) {
@@ -153,9 +153,10 @@ export class MatchingFilter extends ResultFilter {
         } else if (this.match_type == MatchTypeEnum.MATCH_ALBUM_NATURAL) {
             throw new Error("Natural matching on album names is not yet supported.");
         } else if (this.match_type == MatchTypeEnum.MATCH_ALBUM_NAME_EQUALS) {
-            return '(Albums.relativePath REGEXP "\/(.*\/)*'
+            console.log('(Albums.relativePath REGEXP "\/(.*\/)*'
-                + escape_regex(this.match_from)
+                + escape_regex(this.match_from) + '")');
-                + '(\/[^\/]+)*")';
+            return '(Albums.relativePath REGEXP "' + escape_regex(this.match_from) + '")';
+            //+ '(\/[^\/]+)*")';
         } else if (this.match_type == MatchTypeEnum.MATCH_TAG_EQUALS) {
             return '(Tags.name="' + this.match_from + '")';
         }
@@ -309,7 +310,7 @@ function filter_from_text_segment(result_type, segment) {
         name_filter = new MatchingFilter(
             result_type,
             segment['text'],
-            MatchTypeEnum.MATCH_TAG_NAME_EQUALS
+            MatchTypeEnum.MATCH_TAG_EQUALS
         );
         filter = name_filter;
         if (segment['negated']) {

src/userquerywidget.js

@@ -3,10 +3,12 @@ import React from 'react';
 import Switch from '@material-ui/core/Switch';
 import Box from '@material-ui/core/Box';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
-import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import LabelIcon from '@material-ui/icons/Label';
+import ImportContactsIcon from '@material-ui/icons/ImportContacts';
+import PhotoIcon from '@material-ui/icons/Photo';
+import SearchIcon from '@material-ui/icons/Search';
 
 import { makeStyles } from '@material-ui/core/styles';
 
@@ -32,49 +34,87 @@ const useStyles = makeStyles(theme => ({
 export function TagEqualsExpressionControl(props) {
     const classes = useStyles();
     const { name } = props;
-
-    var pretty_name = name
-    .replace(/^"/g, '')
-    .replace(/"$/g, '');
-
     return (
         <>
             <Button
                 variant="outlined"
                 className={classes.filterexpcontrol}
                 startIcon={<LabelIcon />}>
-            {pretty_name}
+                {name}
             </Button>
         </>
     );
 }
 
-export function MatchingFilterExpressionControl(props) {
+export function AlbumEqualsExpressionControl(props) {
     const classes = useStyles();
-    const { expr } = props;
+    const { name } = props;
-
+    return (
-    if(expr.match_type === MatchTypeEnum.MATCH_EQUALS &&
+        <>
-       expr.match_against === "Tags.name") {
+            <Button
-           // This is an exact tag match.
+                variant="outlined"
-           return <TagEqualsExpressionControl name={expr.match_from} />
+                className={classes.filterexpcontrol}
+                startIcon={<ImportContactsIcon />}>
+                {name}
+            </Button>
+        </>
+    );
 }
 
-    var opstr = "";
+export function ImageNameEqualsExpressionControl(props) {
-    if (expr.match_type === MatchTypeEnum.MATCH_EQUALS) {
+    const classes = useStyles();
-        opstr = " = ";
+    const { name } = props;
-    } else if (expr.match_type === MatchTypeEnum.MATCH_REGEXP_CASEINSENSITIVE) {
+    return (
-        opstr = " ≈ ";
+        <>
+            <Button
+                variant="outlined"
+                className={classes.filterexpcontrol}
+                startIcon={<PhotoIcon />}>
+                {name}
+            </Button>
+        </>
+    );
 }
 
-    var negstr = expr.negate ? "!" : "";
+export function ImageNameNaturalMatchExpressionControl(props) {
-
+    const classes = useStyles();
+    const { name } = props;
     return (
-        <Button variant="outlined" className={classes.filterexpcontrol}>
+        <>
-            {negstr + expr.match_against + opstr + expr.match_from}
+            <Button
+                variant="outlined"
+                className={classes.filterexpcontrol}
+                startIcon={<><PhotoIcon /><SearchIcon /></>}>
+                {name}
             </Button>
+        </>
     );
 }
 
+export function MatchingFilterExpressionControl(props) {
+    const classes = useStyles();
+    const { expr } = props;
+
+    var pretty_name = expr.match_from
+        .replace(/^"/g, '')
+        .replace(/"$/g, '');
+    if (expr.match_type === MatchTypeEnum.MATCH_TAG_EQUALS) {
+        return <TagEqualsExpressionControl name={pretty_name} />
+    } else if (expr.match_type === MatchTypeEnum.MATCH_ALBUM_EQUALS) {
+        return <AlbumEqualsExpressionControl name={pretty_name} />
+    } else if (expr.match_type === MatchTypeEnum.MATCH_ALBUM_EQUALS_OR_CHILD) {
+        return <AlbumEqualsExpressionControl name={pretty_name + '(/...)'} />
+    } else if (expr.match_type === MatchTypeEnum.MATCH_IMAGE_NAME_EQUALS) {
+        return <ImageNameEqualsExpressionControl name={pretty_name} />
+    } else if (expr.match_type === MatchTypeEnum.MATCH_IMAGE_NAME_NATURAL) {
+        return <ImageNameNaturalMatchExpressionControl name={pretty_name} />
+    } else if (expr.match_type === MatchTypeEnum.MATCH_ALBUM_NAME_EQUALS) {
+        return <AlbumEqualsExpressionControl name={'(.../)' + pretty_name + '(/...)'} />
+    }
+
+    throw new Error('Cannot render matching filter control: unsupported type.');
+}
+
 export function LogicalOperatorFilterExpressionControl(props) {
     const classes = useStyles();
     const { expr } = props;
@@ -160,14 +200,10 @@ export function FilterControl(props) {
                             color="primary"
                         />
                     }
-                    label={resultTypeString}
+                    label={resultTypeString + ':'}
                 />
-                <Box>
-                    <Typography>Filters:</Typography>
-                    <AddCircleOutlineIcon />
                 <FilterExpressionControl expr={filter} />
             </Box>
-            </Box>
         </>
     );
 }