Display Pre-Computed Result on Recipe Selection

src/App.tsx

@@ -6,6 +6,7 @@ import { getFirebaseRecipe, jsonToString } from "./utils/recipeLoader";
 import { getSubmitPackingUrl, JOB_STATUS } from "./constants/aws";
 import { FIRESTORE_FIELDS } from "./constants/firebase";
 import { SIMULARIUM_EMBED_URL } from "./constants/urls";
+import { useResultUrl, useSetResultUrl } from "./state/store";
 import PackingInput from "./components/PackingInput";
 import Viewer from "./components/Viewer";
 import StatusBar from "./components/StatusBar";
@@ -18,9 +19,10 @@ function App() {
     const [jobId, setJobId] = useState("");
     const [jobStatus, setJobStatus] = useState("");
     const [jobLogs, setJobLogs] = useState<string>("");
-    const [resultUrl, setResultUrl] = useState<string>("");
     const [outputDir, setOutputDir] = useState<string>("");
     const [runTime, setRunTime] = useState<number>(0);
+    const resultUrl = useResultUrl();
+    const setResultUrl = useSetResultUrl();
 
     let start = 0;
 

src/components/RecipeForm/index.tsx

@@ -46,7 +46,7 @@ const RecipeForm = ({ onStartPacking }: RecipeFormProps) => {
                     disabled={isPacking}
                     style={{ width: "100%" }}
                 >
-                    Pack!
+                    Re-run
                 </Button>
             )}
         </div>

src/constants/firebase.ts

@@ -38,6 +38,7 @@ export const FIRESTORE_FIELDS = {
     RECIPE: "recipe",
     CONFIG: "config",
     EDITABLE_FIELDS: "editable_fields",
+    RESULT_PATH: "result_path",
 } as const;
 
 export const RETENTION_POLICY = {

src/state/store.ts

@@ -4,6 +4,7 @@ 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";
+import { SIMULARIUM_EMBED_URL } from "../constants/urls";
 
 export interface RecipeData {
     id: string;
@@ -14,6 +15,7 @@ export interface RecipeData {
 
 export interface RecipeState {
     selectedRecipeId: string;
+    resultUrl: string;
     inputOptions: Record<string, PackingInputs>;
     recipes: Record<string, RecipeData>;
 }
@@ -43,6 +45,7 @@ type Actions = {
             recipeString: string
         ) => Promise<void>
     ) => Promise<void>;
+    setResultUrl: (url: string) => void;
 };
 
 export type RecipeStore = RecipeState & UIState & Actions;
@@ -51,6 +54,7 @@ const INITIAL_RECIPE_ID = "peroxisome_v_gradient_packing";
 
 const initialState: RecipeState & UIState = {
     selectedRecipeId: INITIAL_RECIPE_ID,
+    resultUrl: "",
     inputOptions: {},
     recipes: {},
     isLoading: false,
@@ -119,13 +123,20 @@ export const useRecipeStore = create<RecipeStore>()(
 
             set({
                 selectedRecipeId: recipeId,
+                resultUrl: SIMULARIUM_EMBED_URL + (sel.result_path ?? ""),
             });
 
             if (sel.recipe && !get().recipes[sel.recipe]) {
                 await get().loadRecipe(sel.recipe);
             }
         },
 
+
+        setResultUrl: (url: string) => {
+            set({ resultUrl: url });
+        },
+
+
         updateRecipeString: (recipeId, newString) => {
             set((s) => {
                 const rec = s.recipes[recipeId];
@@ -230,6 +241,7 @@ export const useIsCurrentRecipeModified = () =>
     useRecipeStore((s) => s.recipes[s.selectedRecipeId]?.isModified ?? false);
 export const useGetOriginalValue = () =>
     useRecipeStore((s) => s.getOriginalValue);
+export const useResultUrl = () => useRecipeStore((s) => s.resultUrl);
 
 // action selectors (stable identities)
 export const useLoadInputOptions = () =>
@@ -245,3 +257,4 @@ export const useRestoreRecipeDefault = () =>
 export const useStartPacking = () => useRecipeStore((s) => s.startPacking);
 export const useGetCurrentValue = () =>
     useRecipeStore((s) => s.getCurrentValue);
+export const useSetResultUrl = () => useRecipeStore((s) => s.setResultUrl);

src/types/index.ts

@@ -5,6 +5,7 @@ export interface Document {
     recipe?: string;
     config?: string;
     editable_fields?: string[];
+    result_path?: string;
 }
 
 export type FirestoreDoc = Document & {
@@ -19,6 +20,7 @@ export type PackingInputs = {
     name?: string;
     config: string;
     recipe: string;
+    result_path?: string;
     editable_fields?: EditableField[];
 };
 

src/utils/firebase.ts

@@ -175,12 +175,14 @@ const getPackingInputsDict = async (): Promise<Dictionary<PackingInputs>> => {
         const editableFields = await getEditableFieldsList(
             doc[FIRESTORE_FIELDS.EDITABLE_FIELDS] || []
         );
+        const result = doc[FIRESTORE_FIELDS.RESULT_PATH] || "";
         if (config && recipe) {
             inputsDict[recipe] = {
                 [FIRESTORE_FIELDS.NAME]: displayName,
                 [FIRESTORE_FIELDS.CONFIG]: config,
                 [FIRESTORE_FIELDS.RECIPE]: recipe,
                 [FIRESTORE_FIELDS.EDITABLE_FIELDS]: editableFields,
+                [FIRESTORE_FIELDS.RESULT_PATH]: result,
             };
         }
     }