RecipeMetadata and prefetching optimizations

src/components/PackingInput/index.tsx

@@ -3,7 +3,6 @@ import { Tabs } from "antd";
 
 import {
     useSelectedRecipeId,
-    useIsLoading,
     useSelectRecipe,
     useStartPacking,
     useLoadAllRecipes,
@@ -29,7 +28,6 @@ const PackingInput = (props: PackingInputProps): JSX.Element => {
     const selectedRecipeId = useSelectedRecipeId();
     const recipeObj = useCurrentRecipeObject();
     const inputOptions = useInputOptions();
-    const isLoading = useIsLoading();
 
     const loadInputOptions = useLoadInputOptions();
     const loadAllRecipes = useLoadAllRecipes();
@@ -50,8 +48,11 @@ const PackingInput = (props: PackingInputProps): JSX.Element => {
         await storeStartPacking(startPacking);
     };
 
-    if (isLoading) {
-        return <div>Loading...</div>;
+    const loadingText = <div className="recipe-select">Loading...</div>;
+
+    // No recipe or dropdown options to load
+    if (!recipeObj && !inputOptions[selectedRecipeId]) {
+        return loadingText;
     }
 
     return (
@@ -65,17 +66,19 @@ const PackingInput = (props: PackingInputProps): JSX.Element => {
                     onChange={selectRecipe}
                 />
             </div>
-            <Tabs defaultActiveKey="1" className="recipe-content">
-                <Tabs.TabPane tab="Edit" key="1">
-                    <RecipeForm onStartPacking={handleStartPacking} />
-                </Tabs.TabPane>
-                <Tabs.TabPane tab="Full Recipe" key="2">
-                    <JSONViewer
-                        title="Recipe"
-                        content={recipeObj}
-                    />
-                </Tabs.TabPane>
-            </Tabs>
+            {/* Options menu loaded, but no recipe to load yet */}
+            {!recipeObj ? (
+                loadingText
+            ) : (
+                <Tabs defaultActiveKey="1" className="recipe-content">
+                    <Tabs.TabPane tab="Edit" key="1">
+                        <RecipeForm onStartPacking={handleStartPacking} />
+                    </Tabs.TabPane>
+                    <Tabs.TabPane tab="Full Recipe" key="2">
+                        <JSONViewer title="Recipe" content={recipeObj} />
+                    </Tabs.TabPane>
+                </Tabs>
+            )}
         </>
     );
 };

src/state/store.ts

@@ -1,9 +1,12 @@
 import { create } from "zustand";
 import { subscribeWithSelector } from "zustand/middleware";
-import { isEqual, get as lodashGet } from "lodash-es";
+import { isEmpty, isEqual, get as lodashGet } from "lodash-es";
 import { PackingResult, RecipeData, RecipeManifest } from "../types";
 import { jsonToString } from "../utils/recipeLoader";
-import { getRecipeDataFromFirebase, getRecipesFromFirebase } from "../utils/firebase";
+import {
+    getRecipeDataFromFirebase,
+    getRecipeManifestFromFirebase,
+} from "../utils/firebase";
 import { EMPTY_PACKING_RESULT } from "./constants";
 import { applyChangesToNestedObject } from "./utils";
 
@@ -15,7 +18,6 @@ export interface RecipeState {
 }
 
 export interface UIState {
-    isLoading: boolean;
     isPacking: boolean;
 }
 
@@ -24,7 +26,11 @@ type Actions = {
     loadRecipe: (recipeId: string) => Promise<void>;
     loadAllRecipes: () => Promise<void>;
     selectRecipe: (recipeId: string) => Promise<void>;
-    editRecipe: (recipeID: string, path: string, value: string | number) => void;
+    editRecipe: (
+        recipeID: string,
+        path: string,
+        value: string | number
+    ) => void;
     restoreRecipeDefault: (recipeId: string) => void;
     getCurrentValue: (path: string) => string | number | undefined;
     getOriginalValue: (path: string) => string | number | undefined;
@@ -48,7 +54,6 @@ const initialState: RecipeState & UIState = {
     selectedRecipeId: INITIAL_RECIPE_ID,
     inputOptions: {},
     recipes: {},
-    isLoading: false,
     isPacking: false,
     packingResults: { [INITIAL_RECIPE_ID]: EMPTY_PACKING_RESULT },
 };
@@ -58,49 +63,51 @@ export const useRecipeStore = create<RecipeStore>()(
         ...initialState,
 
         loadInputOptions: async () => {
-            set({ isLoading: true });
-            try {
-                const inputOptions = await getRecipesFromFirebase();
-                set({ inputOptions });
-            } finally {
-                set({ isLoading: false });
-            }
+            // Early return to prevent re-querying after options have loaded
+            if (!isEmpty(get().inputOptions)) return;
+            const inputOptions = await getRecipeManifestFromFirebase();
+            set({ inputOptions });
         },
 
         loadRecipe: async (recipeId) => {
-            if (get().recipes[recipeId]) return;
-            const rec = await getRecipeDataFromFirebase(recipeId);
+            const { recipes, inputOptions } = get();
+            if (recipes[recipeId]) return;
+            const editableFieldIds = inputOptions[recipeId].editableFieldIds;
+            const rec = await getRecipeDataFromFirebase(
+                recipeId,
+                editableFieldIds
+            );
             set((s) => ({
                 recipes: {
                     ...s.recipes,
-                    [recipeId]: rec
+                    [recipeId]: rec,
                 },
             }));
         },
 
         loadAllRecipes: async () => {
-            const { inputOptions, recipes, loadRecipe } = get();
+            const { inputOptions, loadRecipe } = get();
 
-            const ids = new Set<string>();
-            Object.values(inputOptions).forEach((opt) => {
-                if (opt?.recipeId) ids.add(opt.recipeId);
-            });
-            const recipesToLoad = [...ids].filter((id) => !recipes[id]);
-            if (!recipesToLoad.length) return;
-            set({ isLoading: true });
-            try {
-                await Promise.all(recipesToLoad.map((id) => loadRecipe(id)));
-            } finally {
-                set({ isLoading: false });
-            }
-            let recipeToLoad = INITIAL_RECIPE_ID;
-            if (!get().recipes[INITIAL_RECIPE_ID]) {
-                console.warn(
-                    `Initial recipe ID ${INITIAL_RECIPE_ID} not found, selecting first available recipe.`
-                );
-                recipeToLoad = Object.keys(get().recipes)[0];
-            }
-            get().selectRecipe(recipeToLoad);
+            const optionList = Object.values(inputOptions || {});
+            if (optionList.length === 0) return;
+
+            const recipeIds = optionList
+                .map((o) => o?.recipeId)
+                .filter((id) => id && !get().recipes[id]);
+
+            // Make sure our default initial is in the options we queried
+            const initialIdToLoad = recipeIds.includes(INITIAL_RECIPE_ID)
+                ? INITIAL_RECIPE_ID
+                : recipeIds[0];
+
+            // Ensure the bootstrap recipe is loaded & selected
+            await loadRecipe(initialIdToLoad);
+
+            // Load remaining recipes in the background (don’t block)
+            const remainingRecipesToLoad = recipeIds.filter(
+                (id) => id !== initialIdToLoad
+            );
+            Promise.all(remainingRecipesToLoad.map((id) => loadRecipe(id)));
         },
 
         selectRecipe: async (recipeId) => {
@@ -152,14 +159,13 @@ export const useRecipeStore = create<RecipeStore>()(
             });
         },
 
-
         editRecipe: (recipeId, path, value) => {
             const rec = get().recipes[recipeId];
             if (!rec) return;
 
             const newEdits = { ...rec.edits };
 
-            const defaultValue = lodashGet(rec.defaultRecipeData, path);
+            const defaultValue = lodashGet(rec.defaultRecipe, path);
             if (isEqual(defaultValue, value)) {
                 delete newEdits[path]; // no longer different from default
             } else {
@@ -171,13 +177,12 @@ export const useRecipeStore = create<RecipeStore>()(
                     ...state.recipes,
                     [recipeId]: {
                         ...rec,
-                        edits: newEdits
+                        edits: newEdits,
                     },
                 },
             }));
         },
 
-
         getCurrentValue: (path) => {
             const { selectedRecipeId, recipes } = get();
             const rec = recipes[selectedRecipeId];
@@ -186,15 +191,21 @@ export const useRecipeStore = create<RecipeStore>()(
             // First check if an edited value exists at this path
             const editedValue = lodashGet(rec.edits, path);
             if (editedValue !== undefined) {
-                if (typeof editedValue === "string" || typeof editedValue === "number") {
+                if (
+                    typeof editedValue === "string" ||
+                    typeof editedValue === "number"
+                ) {
                     return editedValue;
                 }
                 return undefined;
             }
 
             // Otherwise, fall back to the default recipe
-            const defaultValue = lodashGet(rec.defaultRecipeData, path);
-            if (typeof defaultValue === "string" || typeof defaultValue === "number") {
+            const defaultValue = lodashGet(rec.defaultRecipe, path);
+            if (
+                typeof defaultValue === "string" ||
+                typeof defaultValue === "number"
+            ) {
                 return defaultValue;
             }
 
@@ -203,18 +214,23 @@ export const useRecipeStore = create<RecipeStore>()(
 
         getOriginalValue: (path) => {
             const { selectedRecipeId, recipes } = get();
-            const rec = recipes[selectedRecipeId]?.defaultRecipeData;
+            const rec = recipes[selectedRecipeId]?.defaultRecipe;
             if (!rec) return undefined;
             const v = lodashGet(rec, path);
-            return (typeof v === "string" || typeof v === "number") ? v : undefined;
+            return typeof v === "string" || typeof v === "number"
+                ? v
+                : undefined;
         },
 
         startPacking: async (callback) => {
             const s = get();
             const input = s.inputOptions[s.selectedRecipeId];
             const configId = input?.configId ?? "";
-            const { defaultRecipeData, edits } = s.recipes[s.selectedRecipeId];
-            const recipeObject = applyChangesToNestedObject(defaultRecipeData, edits);
+            const { defaultRecipe, edits } = s.recipes[s.selectedRecipeId];
+            const recipeObject = applyChangesToNestedObject(
+                defaultRecipe,
+                edits
+            );
             if (!recipeObject) return;
             const recipeString = jsonToString(recipeObject);
             set({ isPacking: true });
@@ -226,7 +242,7 @@ export const useRecipeStore = create<RecipeStore>()(
         },
 
         restoreRecipeDefault: (recipeId) => {
-            set(state => {
+            set((state) => {
                 const rec = state.recipes[recipeId];
                 if (!rec) return {};
                 return {
@@ -240,25 +256,25 @@ export const useRecipeStore = create<RecipeStore>()(
                 };
             });
         },
-
     }))
 );
 
-
 // Basic selectors
-export const useSelectedRecipeId = () => useRecipeStore(s => s.selectedRecipeId);
+export const useSelectedRecipeId = () =>
+    useRecipeStore((s) => s.selectedRecipeId);
 export const useInputOptions = () => useRecipeStore((s) => s.inputOptions);
-export const useIsLoading = () => useRecipeStore(s => s.isLoading);
-export const useIsPacking = () => useRecipeStore(s => s.isPacking);
+export const useIsPacking = () => useRecipeStore((s) => s.isPacking);
 export const useFieldsToDisplay = () =>
-    useRecipeStore((s) => s.inputOptions[s.selectedRecipeId]?.editableFields);
-export const useRecipes = () => useRecipeStore(s => s.recipes)
-export const usePackingResults = () => useRecipeStore(s => s.packingResults);
+    useRecipeStore((s) => s.recipes[s.selectedRecipeId]?.editableFields);
+export const useRecipes = () => useRecipeStore((s) => s.recipes);
+export const usePackingResults = () => useRecipeStore((s) => s.packingResults);
 
 export const useCurrentRecipeObject = () => {
     const recipe = useCurrentRecipeData();
-    return recipe ? applyChangesToNestedObject(recipe.defaultRecipeData, recipe.edits) : undefined;
-}
+    return recipe
+        ? applyChangesToNestedObject(recipe.defaultRecipe, recipe.edits)
+        : undefined;
+};
 
 const useCurrentRecipeManifest = () => {
     const selectedRecipeId = useSelectedRecipeId();
@@ -271,19 +287,21 @@ export const useCurrentRecipeData = () => {
     const selectedRecipeId = useSelectedRecipeId();
     const recipes = useRecipes();
     return recipes[selectedRecipeId] || undefined;
-}
+};
 
 const useCurrentPackingResult = () => {
     const selectedRecipeId = useSelectedRecipeId();
     const packingResults = usePackingResults();
-    return (
-        packingResults[selectedRecipeId] || EMPTY_PACKING_RESULT
-    );
+    return packingResults[selectedRecipeId] || EMPTY_PACKING_RESULT;
 };
 
-const useDefaultResultPath = () => {
+export const useDefaultResultPath = () => {
     const manifest = useCurrentRecipeManifest();
-    return manifest?.defaultResultPath || "";
+    // the default URL is stored in the manifest which loads before
+    // the recipe is queried, using both data here prevents the viewer
+    // loading ahead of the recipe
+    const recipe = useCurrentRecipeData();
+    return (recipe && manifest?.defaultResultPath) || "";
 };
 
 export const useRunTime = () => {
@@ -324,7 +342,7 @@ export const useLoadInputOptions = () =>
     useRecipeStore((s) => s.loadInputOptions);
 export const useLoadAllRecipes = () => useRecipeStore((s) => s.loadAllRecipes);
 export const useSelectRecipe = () => useRecipeStore((s) => s.selectRecipe);
-export const useEditRecipe = () => useRecipeStore(s => s.editRecipe);
+export const useEditRecipe = () => useRecipeStore((s) => s.editRecipe);
 export const useRestoreRecipeDefault = () =>
     useRecipeStore((s) => s.restoreRecipeDefault);
 export const useStartPacking = () => useRecipeStore((s) => s.startPacking);

src/types/index.ts

@@ -16,26 +16,24 @@ export interface Dictionary<T> {
     [Key: string]: T;
 }
 
-// TODO further refine difference between data and metadata, decide how
-// to store them, and when to load them.
-
-export interface RecipeData {
-    recipeId: string;
-    defaultRecipeData: ViewableRecipe;
-    edits: Record<string, string | number>;
-}
-
+// The fields in RecipeManifest are available immediately when we run
+// getAllDocsFromCollection
 export interface RecipeManifest {
     recipeId: string;
     configId: string;
     displayName: string;
+    editableFieldIds: string[];
+    defaultResultPath?: string;
+}
+
+export interface RecipeData {
+    recipeId: string;
+    defaultRecipe: ViewableRecipe;
     editableFields: EditableField[];
     defaultResultPath?: string;
-    defaultRecipeData: ViewableRecipe;
     edits: Record<string, string | number>;
 }
 
-
 export type JobStatusObject = {
     status: string;
     error_message: string;