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;
 
@@ -136,7 +138,7 @@ function App() {
         const range = (Date.now() - start) / 1000;
         setRunTime(range);
         if (localJobStatus.status == JOB_STATUS.DONE) {
-            setResultUrl(SIMULARIUM_EMBED_URL + localJobStatus.result_path);
+            setResultUrl(localJobStatus.result_path);
             setOutputDir(localJobStatus.outputs_directory);
         } else if (localJobStatus.status == JOB_STATUS.FAILED) {
             setJobLogs(localJobStatus.error_message);
@@ -162,7 +164,7 @@ function App() {
                     <PackingInput startPacking={startPacking} />
                 </Sider>
                 <Content className="content-container">
-                    <Viewer resultUrl={resultUrl} />
+                    <Viewer resultUrl={resultUrl ? SIMULARIUM_EMBED_URL + resultUrl : ""} />
                 </Content>
             </Layout>
             <Footer className="footer">

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

@@ -43,6 +43,7 @@ type Actions = {
             recipeString: string
         ) => Promise<void>
     ) => Promise<void>;
+    setResultUrl: (url: string) => void;
 };
 
 export type RecipeStore = RecipeState & UIState & Actions;
@@ -126,6 +127,23 @@ export const useRecipeStore = create<RecipeStore>()(
             }
         },
 
+
+        setResultUrl: (url: string) => {
+            const { inputOptions, selectedRecipeId } = get();
+            const sel = inputOptions[selectedRecipeId];
+            if (!sel) return;
+            set({
+                inputOptions: {
+                    ...get().inputOptions,
+                    [selectedRecipeId]: {
+                        ...sel,
+                        result_path: url,
+                    },
+                },
+            });
+        },
+
+
         updateRecipeString: (recipeId, newString) => {
             set((s) => {
                 const rec = s.recipes[recipeId];
@@ -230,6 +248,8 @@ export const useIsCurrentRecipeModified = () =>
     useRecipeStore((s) => s.recipes[s.selectedRecipeId]?.isModified ?? false);
 export const useGetOriginalValue = () =>
     useRecipeStore((s) => s.getOriginalValue);
+export const useResultUrl = () =>
+    useRecipeStore((s) => s.inputOptions[s.selectedRecipeId]?.result_path);
 
 // action selectors (stable identities)
 export const useLoadInputOptions = () =>
@@ -245,3 +265,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,
             };
         }
     }