From c34e78e1bd420ec115f47387e73b9401bdf7f40f Mon Sep 17 00:00:00 2001
From: meganrm <meganrm@gmail.com>
Date: Tue, 4 Nov 2025 10:56:12 -0800
Subject: [PATCH 1/5] recipe is selected but the id is displaying

---
 src/components/Dropdown/index.tsx     |  17 ++--
 src/components/PackingInput/index.tsx |   7 +-
 src/state/store.ts                    | 115 +++++++++++++++-----------
 3 files changed, 79 insertions(+), 60 deletions(-)

diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
index c252220b..d503acf4 100644
--- a/src/components/Dropdown/index.tsx
+++ b/src/components/Dropdown/index.tsx
@@ -3,22 +3,21 @@ import { Dictionary, PackingInputs } from "../../types";
 
 interface DropdownProps {
     placeholder: string;
+    defaultValue?: string;
     options: Dictionary<PackingInputs>;
     onChange: (value: string) => void;
 }
 
 const Dropdown = (props: DropdownProps): JSX.Element => {
-    const { placeholder, options, onChange } = props;
-    const selectOptions = Object.entries(options).map(([key]) => (
-        {
-            label: <span>{key}</span>,
-            value: key,
-        }
-    ));
+    const { placeholder, options, onChange, defaultValue } = props;
+    const selectOptions = Object.entries(options).map(([key]) => ({
+        label: <span>{key}</span>,
+        value: key,
+    }));
 
     return (
         <Select
-            defaultValue={undefined}
+            defaultValue={defaultValue}
             onChange={onChange}
             placeholder={placeholder}
             options={selectOptions}
@@ -27,4 +26,4 @@ const Dropdown = (props: DropdownProps): JSX.Element => {
     );
 };
 
-export default Dropdown;
\ No newline at end of file
+export default Dropdown;
diff --git a/src/components/PackingInput/index.tsx b/src/components/PackingInput/index.tsx
index fdcfd1f0..4bcce8ed 100644
--- a/src/components/PackingInput/index.tsx
+++ b/src/components/PackingInput/index.tsx
@@ -8,7 +8,7 @@ import {
     useInputOptions,
     useIsLoading,
     useLoadInputOptions,
-    useSelectInput,
+    useSelectRecipe,
     useUpdateRecipeString,
     useStartPacking,
     useLoadAllRecipes,
@@ -36,7 +36,7 @@ const PackingInput = (props: PackingInputProps): JSX.Element => {
 
     const loadInputOptions = useLoadInputOptions();
     const loadAllRecipes = useLoadAllRecipes();
-    const selectInput = useSelectInput();
+    const selectRecipe = useSelectRecipe();
     const updateRecipeString = useUpdateRecipeString();
     const storeStartPacking = useStartPacking();
 
@@ -69,9 +69,10 @@ const PackingInput = (props: PackingInputProps): JSX.Element => {
             <div className="recipe-select">
                 <div>Choose Recipe</div>
                 <Dropdown
+                    defaultValue={selectedRecipeId}
                     placeholder="Select an option"
                     options={inputOptions}
-                    onChange={selectInput}
+                    onChange={selectRecipe}
                 />
             </div>
             <Tabs defaultActiveKey="1" className="recipe-content">
diff --git a/src/state/store.ts b/src/state/store.ts
index fd015af6..bc7ef741 100644
--- a/src/state/store.ts
+++ b/src/state/store.ts
@@ -1,6 +1,6 @@
 import { create } from "zustand";
 import { subscribeWithSelector } from "zustand/middleware";
-import { get as lodashGet, set as lodashSet } from 'lodash-es';
+import { get as lodashGet, set as lodashSet } from "lodash-es";
 import { PackingInputs } from "../types";
 import { getFirebaseRecipe, jsonToString } from "../utils/recipeLoader";
 import { getPackingInputsDict } from "../utils/firebase";
@@ -13,7 +13,7 @@ export interface RecipeData {
 }
 
 export interface RecipeState {
-    selectedInputName: string;
+    selectedRecipeName: string;
     selectedRecipeId: string;
     inputOptions: Record<string, PackingInputs>;
     recipes: Record<string, RecipeData>;
@@ -27,22 +27,29 @@ export interface UIState {
 type Actions = {
     loadInputOptions: () => Promise<void>;
     loadAllRecipes: () => Promise<void>;
-    selectInput: (inputName: string) => Promise<void>;
+    selectRecipe: (inputName: string) => Promise<void>;
     loadRecipe: (recipeId: string) => Promise<void>;
     updateRecipeString: (recipeId: string, newString: string) => void;
-    updateRecipeObj: (recipeId: string, updates: Record<string, string | number>) => void;
+    updateRecipeObj: (
+        recipeId: string,
+        updates: Record<string, string | number>
+    ) => void;
     restoreRecipeDefault: (recipeId: string) => void;
     getCurrentValue: (path: string) => string | number | undefined;
     getOriginalValue: (path: string) => string | number | undefined;
     startPacking: (
-        callback: (recipeId: string, configId: string, recipeString: string) => Promise<void>
+        callback: (
+            recipeId: string,
+            configId: string,
+            recipeString: string
+        ) => Promise<void>
     ) => Promise<void>;
 };
 
 export type RecipeStore = RecipeState & UIState & Actions;
 
 const initialState: RecipeState & UIState = {
-    selectedInputName: "",
+    selectedRecipeName: "Peroxisome",
     selectedRecipeId: "",
     inputOptions: {},
     recipes: {},
@@ -64,12 +71,11 @@ export const useRecipeStore = create<RecipeStore>()(
             }
         },
 
-
         loadRecipe: async (recipeId) => {
             if (get().recipes[recipeId]) return;
             const recJson = await getFirebaseRecipe(recipeId);
             const recStr = jsonToString(recJson);
-            set(s => ({
+            set((s) => ({
                 recipes: {
                     ...s.recipes,
                     [recipeId]: {
@@ -80,31 +86,34 @@ export const useRecipeStore = create<RecipeStore>()(
                     },
                 },
             }));
-
         },
 
         loadAllRecipes: async () => {
             const { inputOptions, recipes, loadRecipe } = get();
 
             const ids = new Set<string>();
-            Object.values(inputOptions).forEach(opt => { if (opt?.recipe) ids.add(opt.recipe); });
-            const missing = [...ids].filter(id => !recipes[id]);
+            Object.values(inputOptions).forEach((opt) => {
+                if (opt?.recipe) ids.add(opt.recipe);
+            });
+            const missing = [...ids].filter((id) => !recipes[id]);
             if (!missing.length) return;
 
             set({ isLoading: true });
             try {
-                await Promise.all(missing.map(id => loadRecipe(id)));
+                await Promise.all(missing.map((id) => loadRecipe(id)));
             } finally {
                 set({ isLoading: false });
             }
+            get().selectRecipe("Peroxisome");
         },
 
-        selectInput: async (inputName) => {
-            const sel = get().inputOptions[inputName];
+        selectRecipe: async (recipeDisplayName) => {
+            console.log("Selecting recipe:", recipeDisplayName);
+            const sel = get().inputOptions[recipeDisplayName];
             if (!sel) return;
 
             set({
-                selectedInputName: inputName,
+                selectedRecipeName: recipeDisplayName,
                 selectedRecipeId: sel.recipe ?? "",
             });
 
@@ -113,9 +122,8 @@ export const useRecipeStore = create<RecipeStore>()(
             }
         },
 
-
         updateRecipeString: (recipeId, newString) => {
-            set(s => {
+            set((s) => {
                 const rec = s.recipes[recipeId];
                 if (!rec) return s;
                 return {
@@ -141,10 +149,13 @@ export const useRecipeStore = create<RecipeStore>()(
                 for (const [path, value] of Object.entries(updates)) {
                     lodashSet(obj, path, value);
                 }
-                get().updateRecipeString(recipeId, JSON.stringify(obj, null, 2));
+                get().updateRecipeString(
+                    recipeId,
+                    JSON.stringify(obj, null, 2)
+                );
             } catch {
                 // TODO: better error handling
-                console.warn("Failed to update recipe object")
+                console.warn("Failed to update recipe object");
             }
         },
 
@@ -153,7 +164,6 @@ export const useRecipeStore = create<RecipeStore>()(
             if (rec) get().updateRecipeString(recipeId, rec.originalString);
         },
 
-
         getCurrentValue: (path) => {
             const { selectedRecipeId, recipes } = get();
             const str = recipes[selectedRecipeId]?.currentString;
@@ -161,20 +171,21 @@ export const useRecipeStore = create<RecipeStore>()(
             try {
                 const obj = JSON.parse(str);
                 const v = lodashGet(obj, path);
-                return typeof v === "string" || typeof v === "number" ? v : undefined;
+                return typeof v === "string" || typeof v === "number"
+                    ? v
+                    : undefined;
             } catch {
-                console.warn("Failed to retrieve value.")
+                console.warn("Failed to retrieve value.");
                 return undefined;
             }
         },
 
-
-
         startPacking: async (callback) => {
             const s = get();
-            const input = s.inputOptions[s.selectedInputName];
+            const input = s.inputOptions[s.selectedRecipeName];
             const configId = input?.config ?? "";
-            const recipeString = s.recipes[s.selectedRecipeId]?.currentString ?? "";
+            const recipeString =
+                s.recipes[s.selectedRecipeId]?.currentString ?? "";
             set({ isPacking: true });
             try {
                 await callback(s.selectedRecipeId, configId, recipeString);
@@ -190,37 +201,45 @@ export const useRecipeStore = create<RecipeStore>()(
             try {
                 const obj = JSON.parse(str);
                 const v = lodashGet(obj, path);
-                return typeof v === "string" || typeof v === "number" ? v : undefined;
+                return typeof v === "string" || typeof v === "number"
+                    ? v
+                    : undefined;
             } catch {
-                console.warn("Failed to retrieve default value.")
+                console.warn("Failed to retrieve default value.");
                 return undefined;
             }
         },
-
-    })),
-
-
+    }))
 );
 
 // tiny helpers/selectors (all derived — not stored)
-export const useSelectedRecipeId = () => useRecipeStore(s => s.selectedRecipeId);
+export const useSelectedRecipeId = () =>
+    useRecipeStore((s) => s.selectedRecipeId);
 export const useCurrentRecipeString = () =>
-    useRecipeStore(s => s.recipes[s.selectedRecipeId]?.currentString ?? "");
-export const useInputOptions = () => useRecipeStore(s => s.inputOptions);
-export const useIsLoading = () => useRecipeStore(s => s.isLoading);
-export const useIsPacking = () => useRecipeStore(s => s.isPacking);
+    useRecipeStore((s) => s.recipes[s.selectedRecipeId]?.currentString ?? "");
+export const useInputOptions = () => useRecipeStore((s) => s.inputOptions);
+export const useIsLoading = () => useRecipeStore((s) => s.isLoading);
+export const useIsPacking = () => useRecipeStore((s) => s.isPacking);
 export const useFieldsToDisplay = () =>
-    useRecipeStore(s => s.inputOptions[s.selectedInputName]?.editable_fields);
+    useRecipeStore(
+        (s) => s.inputOptions[s.selectedRecipeName]?.editable_fields
+    );
 export const useIsCurrentRecipeModified = () =>
-    useRecipeStore(s => s.recipes[s.selectedRecipeId]?.isModified ?? false);
-export const useGetOriginalValue = () => useRecipeStore(s => s.getOriginalValue);
+    useRecipeStore((s) => s.recipes[s.selectedRecipeId]?.isModified ?? false);
+export const useGetOriginalValue = () =>
+    useRecipeStore((s) => s.getOriginalValue);
 
 // action selectors (stable identities)
-export const useLoadInputOptions = () => useRecipeStore(s => s.loadInputOptions);
-export const useLoadAllRecipes = () => useRecipeStore(s => s.loadAllRecipes);
-export const useSelectInput = () => useRecipeStore(s => s.selectInput);
-export const useUpdateRecipeObj = () => useRecipeStore(s => s.updateRecipeObj);
-export const useUpdateRecipeString = () => useRecipeStore(s => s.updateRecipeString);
-export const useRestoreRecipeDefault = () => useRecipeStore(s => s.restoreRecipeDefault);
-export const useStartPacking = () => useRecipeStore(s => s.startPacking);
-export const useGetCurrentValue = () => useRecipeStore(s => s.getCurrentValue);
\ No newline at end of file
+export const useLoadInputOptions = () =>
+    useRecipeStore((s) => s.loadInputOptions);
+export const useLoadAllRecipes = () => useRecipeStore((s) => s.loadAllRecipes);
+export const useSelectRecipe = () => useRecipeStore((s) => s.selectRecipe);
+export const useUpdateRecipeObj = () =>
+    useRecipeStore((s) => s.updateRecipeObj);
+export const useUpdateRecipeString = () =>
+    useRecipeStore((s) => s.updateRecipeString);
+export const useRestoreRecipeDefault = () =>
+    useRecipeStore((s) => s.restoreRecipeDefault);
+export const useStartPacking = () => useRecipeStore((s) => s.startPacking);
+export const useGetCurrentValue = () =>
+    useRecipeStore((s) => s.getCurrentValue);

From 7f22d95a139aed26a3bd975b6fc3a41d881e84ac Mon Sep 17 00:00:00 2001
From: meganrm <meganrm@gmail.com>
Date: Tue, 4 Nov 2025 11:10:15 -0800
Subject: [PATCH 2/5] successfully select recipe

---
 src/components/Dropdown/index.tsx |   7 ++-
 src/state/store.ts                |  18 ++----
 src/types/index.ts                |  34 +++++-----
 src/utils/firebase.ts             | 101 ++++++++++++++++++++++--------
 4 files changed, 103 insertions(+), 57 deletions(-)

diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
index d503acf4..eed78839 100644
--- a/src/components/Dropdown/index.tsx
+++ b/src/components/Dropdown/index.tsx
@@ -1,5 +1,6 @@
 import { Select } from "antd";
 import { Dictionary, PackingInputs } from "../../types";
+import { map } from "lodash-es";
 
 interface DropdownProps {
     placeholder: string;
@@ -10,9 +11,9 @@ interface DropdownProps {
 
 const Dropdown = (props: DropdownProps): JSX.Element => {
     const { placeholder, options, onChange, defaultValue } = props;
-    const selectOptions = Object.entries(options).map(([key]) => ({
-        label: <span>{key}</span>,
-        value: key,
+    const selectOptions = map(options, (opt, key) => ({
+        label: opt.name || key,
+        value: opt.recipe,
     }));
 
     return (
diff --git a/src/state/store.ts b/src/state/store.ts
index bc7ef741..eaf16517 100644
--- a/src/state/store.ts
+++ b/src/state/store.ts
@@ -13,7 +13,6 @@ export interface RecipeData {
 }
 
 export interface RecipeState {
-    selectedRecipeName: string;
     selectedRecipeId: string;
     inputOptions: Record<string, PackingInputs>;
     recipes: Record<string, RecipeData>;
@@ -49,8 +48,7 @@ type Actions = {
 export type RecipeStore = RecipeState & UIState & Actions;
 
 const initialState: RecipeState & UIState = {
-    selectedRecipeName: "Peroxisome",
-    selectedRecipeId: "",
+    selectedRecipeId: "peroxisome_v_gradient_packing",
     inputOptions: {},
     recipes: {},
     isLoading: false,
@@ -107,14 +105,12 @@ export const useRecipeStore = create<RecipeStore>()(
             get().selectRecipe("Peroxisome");
         },
 
-        selectRecipe: async (recipeDisplayName) => {
-            console.log("Selecting recipe:", recipeDisplayName);
-            const sel = get().inputOptions[recipeDisplayName];
+        selectRecipe: async (recipeId) => {
+            const sel = get().inputOptions[recipeId];
             if (!sel) return;
 
             set({
-                selectedRecipeName: recipeDisplayName,
-                selectedRecipeId: sel.recipe ?? "",
+                selectedRecipeId: recipeId,
             });
 
             if (sel.recipe && !get().recipes[sel.recipe]) {
@@ -182,7 +178,7 @@ export const useRecipeStore = create<RecipeStore>()(
 
         startPacking: async (callback) => {
             const s = get();
-            const input = s.inputOptions[s.selectedRecipeName];
+            const input = s.inputOptions[s.selectedRecipeId];
             const configId = input?.config ?? "";
             const recipeString =
                 s.recipes[s.selectedRecipeId]?.currentString ?? "";
@@ -221,9 +217,7 @@ export const useInputOptions = () => useRecipeStore((s) => s.inputOptions);
 export const useIsLoading = () => useRecipeStore((s) => s.isLoading);
 export const useIsPacking = () => useRecipeStore((s) => s.isPacking);
 export const useFieldsToDisplay = () =>
-    useRecipeStore(
-        (s) => s.inputOptions[s.selectedRecipeName]?.editable_fields
-    );
+    useRecipeStore((s) => s.inputOptions[s.selectedRecipeId]?.editable_fields);
 export const useIsCurrentRecipeModified = () =>
     useRecipeStore((s) => s.recipes[s.selectedRecipeId]?.isModified ?? false);
 export const useGetOriginalValue = () =>
diff --git a/src/types/index.ts b/src/types/index.ts
index 0c8666e2..73f47721 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -5,7 +5,7 @@ export interface Document {
     recipe?: string;
     config?: string;
     editable_fields?: string[];
-};
+}
 
 export type FirestoreDoc = Document & {
     id: string;
@@ -13,9 +13,10 @@ export type FirestoreDoc = Document & {
 
 export interface Dictionary<T> {
     [Key: string]: T;
-};
+}
 
 export type PackingInputs = {
+    name?: string;
     config: string;
     recipe: string;
     editable_fields?: EditableField[];
@@ -41,7 +42,7 @@ export type EditableField = {
     gradient_options?: GradientOption[];
     conversion_factor?: number;
     unit?: string;
-}
+};
 
 export type GradientOption = {
     display_name: string;
@@ -62,7 +63,7 @@ export interface RefsByCollection {
     composition: Dictionary<FirebaseComposition>;
     objects: Dictionary<FirebaseObject>;
     gradients: Dictionary<FirebaseGradient>;
-};
+}
 
 export interface FirebaseObject {
     name: string;
@@ -98,7 +99,7 @@ export interface FirebaseObject {
     rejection_threshold?: number;
     rotation_axis?: Array<number>;
     rotation_range?: number;
-};
+}
 
 export interface FirebaseGradient {
     name: string;
@@ -112,7 +113,7 @@ export interface FirebaseGradient {
     pick_mode?: string;
     reversed?: boolean;
     invert?: string;
-};
+}
 
 export type RegionObject = {
     count: number;
@@ -128,12 +129,12 @@ export interface FirebaseComposition {
     object?: string;
     inherit?: string;
     regions?: {
-        interior?: Array<string|RegionObject>;
-        surface?: Array<string|RegionObject>;
-        outer_leaflet?: Array<string|RegionObject>;
-        inner_leaflet?: Array<string|RegionObject>;
-    }
-};
+        interior?: Array<string | RegionObject>;
+        surface?: Array<string | RegionObject>;
+        outer_leaflet?: Array<string | RegionObject>;
+        inner_leaflet?: Array<string | RegionObject>;
+    };
+}
 
 export interface FirebaseRecipe {
     name: string;
@@ -149,9 +150,12 @@ export interface FirebaseRecipe {
     objects?: Dictionary<FirebaseObject>;
     gradients?: Dictionary<FirebaseGradient>;
     optional_gradients?: string[];
-};
+}
 
-export type Viewable<T extends { id: string; dedup_hash: string }> = Omit<T, "id" | "dedup_hash">;
+export type Viewable<T extends { id: string; dedup_hash: string }> = Omit<
+    T,
+    "id" | "dedup_hash"
+>;
 
 export type ViewableComposition = Viewable<FirebaseComposition>;
 export type ViewableObject = Viewable<FirebaseObject>;
@@ -167,4 +171,4 @@ export type ViewableRecipe = {
     composition?: Dictionary<ViewableComposition>;
     objects?: Dictionary<ViewableObject>;
     gradients?: Dictionary<ViewableGradient>;
-};
\ No newline at end of file
+};
diff --git a/src/utils/firebase.ts b/src/utils/firebase.ts
index f8ce4c63..78180d13 100644
--- a/src/utils/firebase.ts
+++ b/src/utils/firebase.ts
@@ -75,7 +75,12 @@ const queryAllDocuments = async (collectionName: string) => {
     return await getDocs(q);
 };
 
-const queryDocumentsByTime = async (collectionName: string, field: string, operator: "<" | "<=" | "==" | "!=" | ">=" | ">" , value: Timestamp) => {
+const queryDocumentsByTime = async (
+    collectionName: string,
+    field: string,
+    operator: "<" | "<=" | "==" | "!=" | ">=" | ">",
+    value: Timestamp
+) => {
     const q = query(
         collection(db, collectionName),
         where(field, operator, value)
@@ -90,7 +95,10 @@ const mapQuerySnapshotToDocs = (querySnapshot: QuerySnapshot<DocumentData>) => {
     })) as FirestoreDoc[];
 };
 
-const extractSingleDocumentData = (querySnapshot: QuerySnapshot<DocumentData>, field?: string) => {
+const extractSingleDocumentData = (
+    querySnapshot: QuerySnapshot<DocumentData>,
+    field?: string
+) => {
     let result = "";
     querySnapshot.forEach((doc) => {
         result = field ? doc.data()[field] : doc.data();
@@ -99,8 +107,13 @@ const extractSingleDocumentData = (querySnapshot: QuerySnapshot<DocumentData>, f
 };
 
 // Query functions for our use case using generic functions
-const getJobStatus = async (jobId: string): Promise<JobStatusObject|undefined> => {
-    const querySnapshot = await queryDocumentById(FIRESTORE_COLLECTIONS.JOB_STATUS, jobId);
+const getJobStatus = async (
+    jobId: string
+): Promise<JobStatusObject | undefined> => {
+    const querySnapshot = await queryDocumentById(
+        FIRESTORE_COLLECTIONS.JOB_STATUS,
+        jobId
+    );
     const docs = querySnapshot.docs.map((doc) => ({
         status: doc.data().status,
         error_message: doc.data().error_message,
@@ -111,20 +124,28 @@ const getJobStatus = async (jobId: string): Promise<JobStatusObject|undefined> =
 };
 
 const getOutputsDirectory = async (jobId: string) => {
-    const querySnapshot = await queryDocumentById(FIRESTORE_COLLECTIONS.JOB_STATUS, jobId);
+    const querySnapshot = await queryDocumentById(
+        FIRESTORE_COLLECTIONS.JOB_STATUS,
+        jobId
+    );
     return extractSingleDocumentData(querySnapshot, "outputs_directory");
-}
+};
 
 const getAllDocsFromCollection = async (collectionName: string) => {
     const querySnapshot = await queryAllDocuments(collectionName);
     return mapQuerySnapshotToDocs(querySnapshot);
 };
 
-const getEditableFieldsList = async (editable_field_ids: string[]): Promise<EditableField[]|undefined> => {
+const getEditableFieldsList = async (
+    editable_field_ids: string[]
+): Promise<EditableField[] | undefined> => {
     if (editable_field_ids.length === 0) {
         return undefined;
     }
-    const querySnapshot = await queryDocumentsByIds(FIRESTORE_COLLECTIONS.EDITABLE_FIELDS, editable_field_ids);
+    const querySnapshot = await queryDocumentsByIds(
+        FIRESTORE_COLLECTIONS.EDITABLE_FIELDS,
+        editable_field_ids
+    );
     const docs = querySnapshot.docs.map((doc) => ({
         id: doc.id,
         name: doc.data().name,
@@ -143,23 +164,28 @@ const getEditableFieldsList = async (editable_field_ids: string[]): Promise<Edit
 };
 
 const getPackingInputsDict = async (): Promise<Dictionary<PackingInputs>> => {
-    const docs = await getAllDocsFromCollection(FIRESTORE_COLLECTIONS.PACKING_INPUTS);
+    const docs = await getAllDocsFromCollection(
+        FIRESTORE_COLLECTIONS.PACKING_INPUTS
+    );
     const inputsDict: Dictionary<PackingInputs> = {};
     for (const doc of docs) {
-        const name = doc[FIRESTORE_FIELDS.NAME];
+        const displayName = doc[FIRESTORE_FIELDS.NAME];
         const config = doc[FIRESTORE_FIELDS.CONFIG];
         const recipe = doc[FIRESTORE_FIELDS.RECIPE];
-        const editableFields = await getEditableFieldsList(doc[FIRESTORE_FIELDS.EDITABLE_FIELDS] || []);
-        if (name && config && recipe) {
-            inputsDict[name] = {
+        const editableFields = await getEditableFieldsList(
+            doc[FIRESTORE_FIELDS.EDITABLE_FIELDS] || []
+        );
+        if (config && recipe) {
+            inputsDict[recipe] = {
+                [FIRESTORE_FIELDS.NAME]: displayName,
                 [FIRESTORE_FIELDS.CONFIG]: config,
                 [FIRESTORE_FIELDS.RECIPE]: recipe,
-                [FIRESTORE_FIELDS.EDITABLE_FIELDS]: editableFields
+                [FIRESTORE_FIELDS.EDITABLE_FIELDS]: editableFields,
             };
         }
     }
     return inputsDict;
-}
+};
 
 const getDocsByIds = async (coll: string, ids: string[]) => {
     const querySnapshot = await queryDocumentsByIds(coll, ids);
@@ -170,36 +196,57 @@ const getDocsByIds = async (coll: string, ids: string[]) => {
         ...doc.data(),
     }));
     return docs;
-}
+};
 
 const addRecipe = async (id: string, data: object) => {
     await setDoc(doc(db, FIRESTORE_COLLECTIONS.EDITED_RECIPES, id), data);
-}
+};
 
 const docCleanup = async () => {
     const now = Date.now();
     const collectionsToClean = [
-        { name: FIRESTORE_COLLECTIONS.EDITED_RECIPES, retention: RETENTION_POLICY.RETENTION_PERIODS.RECIPES_EDITED },
-        { name: FIRESTORE_COLLECTIONS.JOB_STATUS, retention: RETENTION_POLICY.RETENTION_PERIODS.JOB_STATUS }
+        {
+            name: FIRESTORE_COLLECTIONS.EDITED_RECIPES,
+            retention: RETENTION_POLICY.RETENTION_PERIODS.RECIPES_EDITED,
+        },
+        {
+            name: FIRESTORE_COLLECTIONS.JOB_STATUS,
+            retention: RETENTION_POLICY.RETENTION_PERIODS.JOB_STATUS,
+        },
     ];
 
     for (const collectionConfig of collectionsToClean) {
-        const cutoffTime = Timestamp.fromMillis(now - collectionConfig.retention);
+        const cutoffTime = Timestamp.fromMillis(
+            now - collectionConfig.retention
+        );
         const querySnapshot = await queryDocumentsByTime(
             collectionConfig.name,
             RETENTION_POLICY.TIMESTAMP_FIELD,
             "<",
             cutoffTime
         );
-        
+
         const deletePromises: Promise<void>[] = [];
-        
+
         querySnapshot.forEach((document) => {
-            deletePromises.push(deleteDoc(doc(db, collectionConfig.name, document.id)));
+            deletePromises.push(
+                deleteDoc(doc(db, collectionConfig.name, document.id))
+            );
         });
-        
+
         await Promise.all(deletePromises);
-        console.log(`Cleaned up ${deletePromises.length} documents from ${collectionConfig.name}`);
+        console.log(
+            `Cleaned up ${deletePromises.length} documents from ${collectionConfig.name}`
+        );
     }
-}
-export { db, queryDocumentById, getDocsByIds, getJobStatus, addRecipe, docCleanup, getPackingInputsDict, getOutputsDirectory };
+};
+export {
+    db,
+    queryDocumentById,
+    getDocsByIds,
+    getJobStatus,
+    addRecipe,
+    docCleanup,
+    getPackingInputsDict,
+    getOutputsDirectory,
+};

From b22f6a811e43689644871a9b401af2aab6ee4f48 Mon Sep 17 00:00:00 2001
From: meganrm <meganrm@gmail.com>
Date: Tue, 4 Nov 2025 11:19:01 -0800
Subject: [PATCH 3/5] use a constant

---
 src/state/store.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/state/store.ts b/src/state/store.ts
index eaf16517..8dea97af 100644
--- a/src/state/store.ts
+++ b/src/state/store.ts
@@ -47,8 +47,10 @@ type Actions = {
 
 export type RecipeStore = RecipeState & UIState & Actions;
 
+const INITIAL_RECIPE_ID = "peroxisome_v_gradient_packing";
+
 const initialState: RecipeState & UIState = {
-    selectedRecipeId: "peroxisome_v_gradient_packing",
+    selectedRecipeId: INITIAL_RECIPE_ID,
     inputOptions: {},
     recipes: {},
     isLoading: false,
@@ -102,7 +104,7 @@ export const useRecipeStore = create<RecipeStore>()(
             } finally {
                 set({ isLoading: false });
             }
-            get().selectRecipe("Peroxisome");
+            get().selectRecipe(INITIAL_RECIPE_ID);
         },
 
         selectRecipe: async (recipeId) => {

From f071dd55ff0bfb825ed2af232bbada9734395109 Mon Sep 17 00:00:00 2001
From: meganrm <meganrm@gmail.com>
Date: Tue, 4 Nov 2025 11:30:38 -0800
Subject: [PATCH 4/5] check to make sure recipe exists

---
 src/state/store.ts | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/state/store.ts b/src/state/store.ts
index 8dea97af..d7b388d1 100644
--- a/src/state/store.ts
+++ b/src/state/store.ts
@@ -95,16 +95,22 @@ export const useRecipeStore = create<RecipeStore>()(
             Object.values(inputOptions).forEach((opt) => {
                 if (opt?.recipe) ids.add(opt.recipe);
             });
-            const missing = [...ids].filter((id) => !recipes[id]);
-            if (!missing.length) return;
-
+            const recipesToLoad = [...ids].filter((id) => !recipes[id]);
+            if (!recipesToLoad.length) return;
             set({ isLoading: true });
             try {
-                await Promise.all(missing.map((id) => loadRecipe(id)));
+                await Promise.all(recipesToLoad.map((id) => loadRecipe(id)));
             } finally {
                 set({ isLoading: false });
             }
-            get().selectRecipe(INITIAL_RECIPE_ID);
+            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);
         },
 
         selectRecipe: async (recipeId) => {

From 15b43a6ee71b065f22a5d23ea75e705511b23f9f Mon Sep 17 00:00:00 2001
From: meganrm <meganrm@gmail.com>
Date: Tue, 4 Nov 2025 11:37:33 -0800
Subject: [PATCH 5/5] order import

---
 src/components/Dropdown/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
index eed78839..98e90612 100644
--- a/src/components/Dropdown/index.tsx
+++ b/src/components/Dropdown/index.tsx
@@ -1,6 +1,6 @@
 import { Select } from "antd";
-import { Dictionary, PackingInputs } from "../../types";
 import { map } from "lodash-es";
+import { Dictionary, PackingInputs } from "../../types";
 
 interface DropdownProps {
     placeholder: string;