Optional result counting in Search (#718)

Co-authored-by: Paweł Srokosz <pawel.srokosz@cert.pl>
Co-authored-by: krzysztof.wielocha@nask.pl <krzysztof.wielocha@nask.pl>

Author: 3 people

mwdb/web/src/components/RecentView/RecentView.js

@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useContext } from "react";
+import React, { useCallback, useContext, useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 
 import { APIContext } from "@mwdb-web/commons/api/context";
-import { multiFromHashes, addFieldToQuery } from "@mwdb-web/commons/helpers";
+import { addFieldToQuery, multiFromHashes } from "@mwdb-web/commons/helpers";
 import { View } from "@mwdb-web/commons/ui";
 
 import RecentViewList from "./RecentViewList";
@@ -31,61 +31,108 @@ export default function RecentView(props) {
     // Query error shown under the query bar
     const [queryError, setQueryError] = useState(null);
     const [objectCount, setObjectCount] = useState(null);
-
+    // const [countingEnabled, setCountingEnabled] = useState(true);
+    const countingEnabled = searchParams.get("count") === "1" ? 1 : 0;
     const isLocked = !queryError && submittedQuery !== currentQuery;
 
     function resetErrors() {
         setError(null);
         setQueryError(null);
     }
 
-    function setCurrentQuery(query) {
-        // If query is already submitted: do nothing
-        if (query === submittedQuery) return;
-        // Optionally convert query if only hash or hashes were provided
-        query = multiFromHashes(query);
-        // Set query in URL (currentQuery)
-        setSearchParams({ q: query });
-    }
+    const setCurrentQuery = useCallback(
+        ({ query, enableCounting = countingEnabled }) => {
+            // Optionally convert query if only hash or hashes were provided
+            query = multiFromHashes(query);
+            // Set query in URL (currentQuery, countingEnabled)
+            setSearchParams({ q: query, count: enableCounting });
+        },
+        [countingEnabled, setSearchParams]
+    );
 
-    const addToQuery = (field, value) => {
-        return setCurrentQuery(addFieldToQuery(submittedQuery, field, value));
-    };
+    const addToQuery = useCallback(
+        (field, value) => {
+            return setCurrentQuery({
+                query: addFieldToQuery(submittedQuery, field, value),
+            });
+        },
+        [submittedQuery, setCurrentQuery]
+    );
 
     // Synchronize input if currentQuery was changed
     useEffect(() => {
         setQueryInput(currentQuery);
         resetErrors();
     }, [currentQuery]);
 
-    // Submit query if currentQuery was changed
-    useEffect(() => {
-        let cancelled = false;
-        // If query is already submitted: do nothing
-        if (submittedQuery === currentQuery) return;
-        // If query is empty, submit immediately
-        if (!currentQuery) setSubmittedQuery("");
-        else {
+    const submitQueryWithoutCount = useCallback(
+        (query) => {
+            let cancelled = false;
+            // Only check if query is correct
+            api.getObjectList(props.type, "", query)
+                .then(() => {
+                    if (cancelled) return;
+                    // If ok: commit query
+                    setSubmittedQuery(query);
+                })
+                .catch((error) => {
+                    if (cancelled) return;
+                    setQueryError(error);
+                });
+            return () => {
+                cancelled = true;
+            };
+        },
+        [api, props.type]
+    );
+
+    const submitQueryWithCount = useCallback(
+        (query) => {
+            let cancelled = false;
             // Make preflight query to get count of results
             // and check if query is correct
-            api.getObjectCount(props.type, currentQuery)
+            // First nullify the current count
+            setObjectCount(null);
+            api.getObjectCount(props.type, query)
                 .then((response) => {
                     if (cancelled) return;
                     // If ok: commit query
-                    setSubmittedQuery(currentQuery);
+                    setSubmittedQuery(query);
                     setObjectCount(response.data["count"]);
                 })
                 .catch((error) => {
                     if (cancelled) return;
                     setQueryError(error);
                 });
-        }
-        return () => {
-            // Cancel pending requests after unmount/remount
-            cancelled = true;
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [currentQuery]);
+
+            return () => {
+                cancelled = true;
+            };
+        },
+        [api, props.type]
+    );
+
+    const submitQuery = useCallback(
+        (query) => {
+            setCurrentQuery({
+                query,
+            });
+            return countingEnabled
+                ? submitQueryWithCount(query)
+                : submitQueryWithoutCount(query);
+        },
+        [
+            countingEnabled,
+            setCurrentQuery,
+            submitQueryWithCount,
+            submitQueryWithoutCount,
+        ]
+    );
+
+    useEffect(() => {
+        if (!currentQuery) setSubmittedQuery("");
+        return submitQuery(currentQuery);
+    }, [currentQuery, submitQuery]);
 
     const canAddQuickQuery =
         queryInput && !isLocked && queryInput === submittedQuery;
@@ -100,23 +147,30 @@ export default function RecentView(props) {
         []
     );
 
-    const objectCountMessage =
-        submittedQuery && objectCount !== null ? (
-            <div className="form-hint">
-                {objectCount}
-                {" results found"}
-            </div>
-        ) : (
-            []
-        );
+    let objectCountMessage = [];
+    if (submittedQuery && countingEnabled) {
+        if (objectCount === null) {
+            objectCountMessage = <div className="form-hint">Counting...</div>;
+        } else {
+            objectCountMessage = (
+                <div className="form-hint">
+                    {objectCount}
+                    {" results found"}
+                </div>
+            );
+        }
+    }
+
     return (
         <View fluid ident="recentObjects" error={error}>
             <div className="table-responsive">
                 <form
                     className="searchForm"
                     onSubmit={(ev) => {
                         ev.preventDefault();
-                        setCurrentQuery(queryInput);
+                        setCurrentQuery({
+                            query: queryInput,
+                        });
                     }}
                 >
                     <div className="input-group">
@@ -127,7 +181,9 @@ export default function RecentView(props) {
                                 value="X"
                                 onClick={(ev) => {
                                     ev.preventDefault();
-                                    setCurrentQuery("");
+                                    setCurrentQuery({
+                                        query: "",
+                                    });
                                 }}
                             />
                         </div>
@@ -140,11 +196,31 @@ export default function RecentView(props) {
                             onChange={(evt) => setQueryInput(evt.target.value)}
                         />
                         <div className="input-group-append">
-                            <input
-                                className="btn btn-outline-success"
-                                type="submit"
-                                value="Search"
-                            />
+                            <div className="btn-group">
+                                <input
+                                    className="btn btn-outline-success rounded-0"
+                                    type="submit"
+                                    value="Search"
+                                />
+                            </div>
+                            <div className="btn-group">
+                                <input
+                                    type="submit"
+                                    className={`btn btn-outline-info rounded-0 ${
+                                        searchParams.get("count") === "1"
+                                            ? "active"
+                                            : ""
+                                    }`}
+                                    value="Count"
+                                    onClick={() => {
+                                        setSearchParams({
+                                            q: currentQuery,
+                                            count: countingEnabled ? "0" : "1",
+                                        });
+                                    }}
+                                />
+                            </div>
+
                             <a
                                 href="https://mwdb.readthedocs.io/en/latest/user-guide/7-Lucene-search.html"
                                 className="btn btn-outline-primary"
@@ -159,7 +235,11 @@ export default function RecentView(props) {
                             type={props.type}
                             query={submittedQuery}
                             canAddQuickQuery={canAddQuickQuery}
-                            submitQuery={(q) => setCurrentQuery(q)}
+                            submitQuery={(query) =>
+                                setCurrentQuery({
+                                    query,
+                                })
+                            }
                             addToQuery={addToQuery}
                             setQueryError={setQueryError}
                         />
@@ -173,6 +253,7 @@ export default function RecentView(props) {
                     locked={isLocked}
                     disallowEmpty={props.disallowEmpty}
                     setError={setError}
+                    setQueryError={setQueryError}
                     addToQuery={addToQuery}
                 />
             </div>

mwdb/web/src/components/RecentView/RecentViewList.js

@@ -79,7 +79,7 @@ export default function RecentViewList(props) {
             })
             .catch((error) => {
                 if (cancelled) return;
-                props.setError(error);
+                props.setQueryError(error);
                 listDispatch({
                     type: "pageLoaded",
                     elements: [],