Feature/show precomputed results tweaks

src/App.tsx

@@ -5,7 +5,7 @@ import { getJobStatus, addRecipe } from "./utils/firebase";
 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 { useSetPackingResults } from "./state/store";
 import PackingInput from "./components/PackingInput";
 import Viewer from "./components/Viewer";
 import StatusBar from "./components/StatusBar";
@@ -18,9 +18,9 @@ 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 setPackingResults = useSetPackingResults();
 
     let start = 0;
 
@@ -32,7 +32,13 @@ function App() {
         setJobId("");
         setJobStatus("");
         setJobLogs("");
-        setResultUrl("");
+        setPackingResults({
+            jobId: "",
+            jobLogs: "",
+            resultUrl: "",
+            runTime: 0,
+            outputDir: "",
+        });
         setRunTime(0);
     };
 
@@ -136,7 +142,13 @@ function App() {
         const range = (Date.now() - start) / 1000;
         setRunTime(range);
         if (localJobStatus.status == JOB_STATUS.DONE) {
-            setResultUrl(SIMULARIUM_EMBED_URL + localJobStatus.result_path);
+            setPackingResults({
+                jobId: id,
+                jobLogs: "",
+                resultUrl: localJobStatus.result_path,
+                runTime: range,
+                outputDir: localJobStatus.outputs_directory,
+            });
             setOutputDir(localJobStatus.outputs_directory);
         } else if (localJobStatus.status == JOB_STATUS.FAILED) {
             setJobLogs(localJobStatus.error_message);
@@ -162,7 +174,7 @@ function App() {
                     <PackingInput startPacking={startPacking} />
                 </Sider>
                 <Content className="content-container">
-                    <Viewer resultUrl={resultUrl} />
+                    <Viewer />
                 </Content>
             </Layout>
             <Footer className="footer">

src/components/Dropdown/index.tsx

@@ -1,11 +1,11 @@
 import { Select } from "antd";
 import { map } from "lodash-es";
-import { Dictionary, PackingInputs } from "../../types";
+import { Dictionary, RecipeManifest } from "../../types";
 
 interface DropdownProps {
     placeholder: string;
     defaultValue?: string;
-    options: Dictionary<PackingInputs>;
+    options: Dictionary<RecipeManifest>;
     onChange: (value: string) => void;
 }
 

src/components/RecipeForm/index.tsx

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

src/components/Viewer/index.tsx

@@ -1,16 +1,17 @@
+import { SIMULARIUM_EMBED_URL } from "../../constants/urls";
+import { useResultUrl } from "../../state/store";
 import "./style.css";
 
-interface ViewerProps {
-    resultUrl: string;
-}
-
-const Viewer = (props: ViewerProps): JSX.Element => {
-    const { resultUrl } = props;
+const Viewer = (): JSX.Element => {
+    const resultUrl = useResultUrl();
     return (
         <div className="viewer-container">
-            <iframe className="simularium-embed" src={resultUrl} />
+            <iframe
+                className="simularium-embed"
+                src={`${SIMULARIUM_EMBED_URL}${resultUrl}`}
+            />
         </div>
     );
 };
 
-export default Viewer;
+export default Viewer;

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

@@ -1,7 +1,7 @@
 import { create } from "zustand";
 import { subscribeWithSelector } from "zustand/middleware";
 import { get as lodashGet, set as lodashSet } from "lodash-es";
-import { PackingInputs } from "../types";
+import { PackingResults, RecipeManifest } from "../types";
 import { getFirebaseRecipe, jsonToString } from "../utils/recipeLoader";
 import { getPackingInputsDict } from "../utils/firebase";
 
@@ -14,8 +14,10 @@ export interface RecipeData {
 
 export interface RecipeState {
     selectedRecipeId: string;
-    inputOptions: Record<string, PackingInputs>;
+    resultUrl: string;
+    inputOptions: Record<string, RecipeManifest>;
     recipes: Record<string, RecipeData>;
+    packingResults?: PackingResults;
 }
 
 export interface UIState {
@@ -43,6 +45,7 @@ type Actions = {
             recipeString: string
         ) => Promise<void>
     ) => Promise<void>;
+    setPackingResults: (results: PackingResults) => 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,
@@ -126,6 +130,10 @@ export const useRecipeStore = create<RecipeStore>()(
             }
         },
 
+        setPackingResults: (results: PackingResults) => {
+            set({ packingResults: results });
+        },
+
         updateRecipeString: (recipeId, newString) => {
             set((s) => {
                 const rec = s.recipes[recipeId];
@@ -216,12 +224,13 @@ export const useRecipeStore = create<RecipeStore>()(
     }))
 );
 
-// tiny helpers/selectors (all derived — not stored)
+// simple selectors
 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);
 export const useFieldsToDisplay = () =>
@@ -231,6 +240,32 @@ export const useIsCurrentRecipeModified = () =>
 export const useGetOriginalValue = () =>
     useRecipeStore((s) => s.getOriginalValue);
 
+// compound selectors
+
+const useCurrentRecipeManifest = () => {
+    const selectedRecipeId = useSelectedRecipeId();
+    const inputOptions = useInputOptions();
+    if (!selectedRecipeId) return undefined;
+    return inputOptions[selectedRecipeId];
+};
+const useDefaultResultPath = () => {
+    const manifest = useCurrentRecipeManifest();
+    return manifest?.defaultResultPath || "";
+};
+
+export const useResultUrl = () => {
+    let path = "";
+    const results = useRecipeStore.getState().packingResults;
+    const currentRecipeId = useRecipeStore.getState().selectedRecipeId;
+    const defaultResultPath = useDefaultResultPath();
+    if (results) {
+        path = results.resultUrl;
+    } else if (currentRecipeId) {
+        path = defaultResultPath;
+    }
+    return path;
+};
+
 // action selectors (stable identities)
 export const useLoadInputOptions = () =>
     useRecipeStore((s) => s.loadInputOptions);
@@ -245,3 +280,5 @@ export const useRestoreRecipeDefault = () =>
 export const useStartPacking = () => useRecipeStore((s) => s.startPacking);
 export const useGetCurrentValue = () =>
     useRecipeStore((s) => s.getCurrentValue);
+export const useSetPackingResults = () =>
+    useRecipeStore((s) => s.setPackingResults);

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 & {
@@ -15,10 +16,11 @@ export interface Dictionary<T> {
     [Key: string]: T;
 }
 
-export type PackingInputs = {
+export type RecipeManifest = {
     name?: string;
     config: string;
     recipe: string;
+    defaultResultPath?: string;
     editable_fields?: EditableField[];
 };
 
@@ -29,6 +31,14 @@ export type JobStatusObject = {
     result_path: string;
 };
 
+export type PackingResults = {
+    jobId: string;
+    jobLogs: string;
+    resultUrl: string;
+    runTime: number;
+    outputDir: string;
+};
+
 export type EditableField = {
     id: string;
     name: string;

src/utils/firebase.ts

@@ -21,7 +21,7 @@ import {
 } from "../constants/firebase";
 import {
     FirestoreDoc,
-    PackingInputs,
+    RecipeManifest,
     Dictionary,
     EditableField,
     JobStatusObject,
@@ -163,24 +163,26 @@ const getEditableFieldsList = async (
     return docs;
 };
 
-const getPackingInputsDict = async (): Promise<Dictionary<PackingInputs>> => {
+const getPackingInputsDict = async (): Promise<Dictionary<RecipeManifest>> => {
     const docs = await getAllDocsFromCollection(
         FIRESTORE_COLLECTIONS.PACKING_INPUTS
     );
-    const inputsDict: Dictionary<PackingInputs> = {};
+    const inputsDict: Dictionary<RecipeManifest> = {};
     for (const doc of docs) {
         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] || []
         );
+        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,
+                defaultResultPath: result,
             };
         }
     }