eng-1144: DiscourseContext UI disappears (#602)

* eng-1144 do not hard refresh on initial load, remove loadInBackground.

Author: maparent

apps/roam/src/components/DiscourseContext.tsx

@@ -228,7 +228,7 @@ const ContextTab = ({
   r: DiscourseContextResults[number];
   groupByTarget: boolean;
   setGroupByTarget: (b: boolean) => void;
-  onRefresh: () => void;
+  onRefresh: (ignoreCache?: boolean) => void;
 }) => {
   const [subTabId, setSubTabId] = useState(0);
 
@@ -343,22 +343,25 @@ export const ContextContent = ({ uid, results }: Props) => {
     }));
   }, []);
 
-  const onRefresh = useCallback(() => {
-    setRawQueryResults({});
-    getDiscourseContextResults({
-      uid,
-      onResult: addLabels,
-      ignoreCache: true,
-    }).finally(() => setLoading(false));
-  }, [uid, setRawQueryResults, setLoading, addLabels]);
+  const onRefresh = useCallback(
+    (ignoreCache = true) => {
+      setRawQueryResults({});
+      void getDiscourseContextResults({
+        uid,
+        onResult: addLabels,
+        ignoreCache,
+      }).finally(() => setLoading(false));
+    },
+    [uid, setRawQueryResults, setLoading, addLabels],
+  );
 
   const delayedRefresh = () => {
     window.setTimeout(onRefresh, 250);
   };
 
   useEffect(() => {
     if (!results) {
-      onRefresh();
+      onRefresh(false);
     } else {
       results.forEach(addLabels);
       setLoading(false);

apps/roam/src/components/QueryBuilder.tsx

@@ -65,44 +65,41 @@ const QueryBuilder = ({ pageUid, isEditBlock, showAlias }: Props) => {
   const [columns, setColumns] = useState<Column[]>([]);
   const [results, setResults] = useState<Result[]>([]);
   const containerRef = useRef<HTMLDivElement>(null);
-  const onRefresh = useCallback(
-    (loadInBackground = false) => {
-      setError("");
-      setLoading(!loadInBackground);
-      const args = parseQuery(pageUid);
-      const { inputs } = parseResultSettings(pageUid, args.columns);
-      const transformedInputs = Object.fromEntries(
-        inputs.map(({ key, inputValue }) => [key, inputValue]),
-      );
-      setTimeout(() => {
-        fireQuery({ ...args, inputs: transformedInputs })
-          .then((results) => {
-            setColumns(args.columns);
-            setResults(results);
-          })
-          .catch(() => {
-            setError(
-              `Query failed to run. Try running a new query from the editor.`,
-            );
-          })
-          .finally(() => {
-            const tree = getBasicTreeByParentUid(pageUid);
-            const node = getSubTree({ tree, key: "results" });
-            return (
-              node.uid
-                ? Promise.resolve(node.uid)
-                : createBlock({
-                    parentUid: pageUid,
-                    node: { text: "results" },
-                  })
-            ).then(() => {
-              setLoading(false);
-            });
+  const onRefresh = useCallback(() => {
+    setError("");
+    setLoading(true);
+    const args = parseQuery(pageUid);
+    const { inputs } = parseResultSettings(pageUid, args.columns);
+    const transformedInputs = Object.fromEntries(
+      inputs.map(({ key, inputValue }) => [key, inputValue]),
+    );
+    setTimeout(() => {
+      fireQuery({ ...args, inputs: transformedInputs })
+        .then((results) => {
+          setColumns(args.columns);
+          setResults(results);
+        })
+        .catch(() => {
+          setError(
+            `Query failed to run. Try running a new query from the editor.`,
+          );
+        })
+        .finally(() => {
+          const tree = getBasicTreeByParentUid(pageUid);
+          const node = getSubTree({ tree, key: "results" });
+          void (
+            node.uid
+              ? Promise.resolve(node.uid)
+              : createBlock({
+                  parentUid: pageUid,
+                  node: { text: "results" },
+                })
+          ).then(() => {
+            setLoading(false);
           });
-      }, 1);
-    },
-    [setResults, pageUid, setLoading, setColumns],
-  );
+        });
+    }, 1);
+  }, [setResults, pageUid, setLoading, setColumns]);
   useEffect(() => {
     if (!isEdit) {
       if (hasResults) {

apps/roam/src/components/results-view/ResultsTable.tsx

@@ -191,7 +191,7 @@ type ResultRowProps = {
   parentUid: string;
   ctrlClick?: (e: Result) => void;
   views: { column: string; mode: string; value: string }[];
-  onRefresh: () => void;
+  onRefresh: (ignoreCache?: boolean) => void;
 };
 
 const ResultRow = ({
@@ -455,7 +455,7 @@ const ResultsTable = ({
   setFilters: (f: FilterData) => void;
   preventSavingSettings?: boolean;
   views: Views;
-  onRefresh: () => void;
+  onRefresh: (ignoreCache?: boolean) => void;
   allResults: Result[];
   showInterface?: boolean;
 }) => {

apps/roam/src/components/results-view/ResultsView.tsx

@@ -38,7 +38,7 @@ import Charts from "./Charts";
 import Timeline from "./Timeline";
 import Kanban from "./Kanban";
 import MenuItemSelect from "roamjs-components/components/MenuItemSelect";
-import { RoamBasicNode } from "roamjs-components/types";
+import type { RoamBasicNode } from "roamjs-components/types/native";
 import { render as renderToast } from "roamjs-components/components/Toast";
 import { Column, Result } from "~/utils/types";
 import updateBlock from "roamjs-components/writes/updateBlock";
@@ -239,7 +239,7 @@ type ResultsViewComponent = (props: {
   preventSavingSettings?: boolean;
   onEdit?: () => void;
   onDeleteQuery?: () => void;
-  onRefresh: (loadInBackground?: boolean) => void;
+  onRefresh: (ignoreCache?: boolean) => void;
   globalFiltersData?: Record<string, Filters>;
   globalPageSize?: number;
   isEditBlock?: boolean;
@@ -1386,7 +1386,7 @@ const ResultsView: ResultsViewComponent = ({
                 <Kanban
                   data={allProcessedResults}
                   layout={layout}
-                  onQuery={() => onRefresh(true)}
+                  onQuery={() => onRefresh()}
                   resultKeys={columns}
                   parentUid={parentUid}
                   views={views}

apps/roam/src/utils/getDiscourseContextResults.ts

@@ -13,7 +13,7 @@ const CACHE_TIMEOUT = 1000 * 60 * 5;
 
 type BuildQueryConfig = {
   args: {
-    ignoreCache?: true;
+    ignoreCache?: boolean;
   };
   targetUid: string;
   fireQueryContext: {
@@ -177,7 +177,7 @@ const getDiscourseContextResults = async ({
   uid: string;
   nodes?: ReturnType<typeof getDiscourseNodes>;
   relations?: ReturnType<typeof getDiscourseRelations>;
-  ignoreCache?: true;
+  ignoreCache?: boolean;
   onResult?: onResult;
 }) => {
   const args = { ignoreCache };