Better query change handling.

src/main.js

@@ -48,6 +48,8 @@ export function LoadedMainPage(props) {
     const [tags, setTags] = React.useState([]);
     const { database, photos_dir, thumbs_dir } = props;
 
+    var _ = require('lodash');
+
     useEffect(() => {
         // Single-fire effect to start retrieving the albums and tags lists.
         var blank_user_query = new UserQuery();
@@ -66,11 +68,18 @@ export function LoadedMainPage(props) {
     }, [database]);
 
     useEffect(() => {
-        var sql_image_query = maybe_image_query(gallery_user_query);
-        var sql_album_query = maybe_album_query(gallery_user_query);
-        var sql_tag_query = maybe_tag_query(gallery_user_query);
+        updateAllResults(gallery_user_query);
+    }, [database, photos_dir, thumbs_dir]);
+
+    function updateAllResults(q) {
+        updateTags(q);
+        updateAlbums(q);
+        updatePhotos(q);
+    }
+
+    function updatePhotos(q) {
+        var sql_image_query = maybe_image_query(q);
         setPhotos(false);
-        setAlbums(false);
         do_image_query(sql_image_query, database, photos_dir, thumbs_dir)
             .then(got_photos => {
                 // Make each photo fetch its thumbnail size before proceeding
@@ -83,31 +92,52 @@ export function LoadedMainPage(props) {
                         setPhotos(got_photos);
                     });
             });
-        do_album_query(sql_album_query, database)
-            .then(albums => {
-                setAlbums(albums);
-            });
+    }
+
+    function updateTags(q) {
+        var sql_tag_query = maybe_tag_query(q);
+        setTags(false);
         do_tag_query(sql_tag_query, database)
             .then(tags => {
                 setTags(tags);
             });
-    }, [gallery_user_query, database, photos_dir, thumbs_dir]);
+    }
+
+    function updateAlbums(q) {
+        var sql_album_query = maybe_album_query(q);
+        setAlbums(false);
+        do_album_query(sql_album_query, database)
+            .then(albums => {
+                setAlbums(albums);
+            });
+    }
+
+    function onNewQuery(q) {
+        console.log(q.image_filter, " ?= ", gallery_user_query.image_filter);
+        var do_update_photos = !_.isEqual(q.image_filter, gallery_user_query.image_filter);
+        var do_update_albums = !_.isEqual(q.album_filter, gallery_user_query.album_filter);
+        var do_update_tags = !_.isEqual(q.tag_filter, gallery_user_query.tag_filter);
+        setGalleryUserQuery(q);
+        if(do_update_photos) { updatePhotos(q); }
+        if(do_update_albums) { updateAlbums(q); }
+        if(do_update_tags) { updateTags(q); }
+    }
 
     function onSearch(q) {
         var query = user_query_from_search_string(q);
-        setGalleryUserQuery(query);
+        onNewQuery(query);
     }
 
     return (
         <>
             <Box className={classes.root}>
                 <Box className={classes.navigator}>
-                    <Box className={classes.margined}>{albums && <Browser albums={allAlbums} tags={allTags} onNewQuery={setGalleryUserQuery} />}</Box>
+                    <Box className={classes.margined}>{albums && <Browser albums={allAlbums} tags={allTags} onNewQuery={onNewQuery} />}</Box>
                 </Box>
                 <Box className={classes.searchandview}>
                     <Box className={classes.margined}><SearchBar onSubmit={onSearch} /></Box>
-                    <Box className={classes.margined}><UserQueryWidget userQuery={gallery_user_query} onChange={setGalleryUserQuery} /></Box>
-                    <Box className={classes.margined}>{photos && <ResultsView photos={photos} albums={albums} tags={tags}/>}</Box>
+                    <Box className={classes.margined}><UserQueryWidget userQuery={gallery_user_query} onChange={onNewQuery} /></Box>
+                    <Box className={classes.margined}>{photos && <ResultsView photos={photos ? photos : []} albums={albums ? albums : []} tags={tags ? tags : []} />}</Box>
                 </Box>
             </Box>
         </>

src/queries.js

@@ -349,6 +349,7 @@ export function user_query_from_browsed_album(album_path) {
         MatchTypeEnum.MATCH_ALBUM_EQUALS_OR_CHILD,
         false).simplify();
     r.album_filter = new ConstFilter(ResultTypeEnum.ALBUM, false).simplify();
+    r.tag_filter = new ConstFilter(ResultTypeEnum.TAG, false).simplify();
 
     return r;
 }