Feature/show precomputed results tweaks

src/App.tsx

@@ -5,7 +5,15 @@ 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 {
+    useJobId,
+    useJobLogs,
+    useOutputsDirectory,
+    useRunTime,
+    useSetJobId,
+    useSetJobLogs,
+    useSetPackingResults,
+} from "./state/store";
 import PackingInput from "./components/PackingInput";
 import Viewer from "./components/Viewer";
 import StatusBar from "./components/StatusBar";
@@ -15,12 +23,14 @@ const { Header, Content, Sider, Footer } = Layout;
 const { Link } = Typography;
 
 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 [jobStatus, setJobStatus] = useState<string>("");
+    const setJobLogs = useSetJobLogs();
+    const jobLogs = useJobLogs();
+    const setJobId = useSetJobId();
+    const jobId = useJobId();
+    const setPackingResults = useSetPackingResults();
+    const runTime = useRunTime();
+    const outputDir = useOutputsDirectory();
 
     let start = 0;
 
@@ -29,11 +39,13 @@ function App() {
     }
 
     const resetState = () => {
-        setJobId("");
-        setJobStatus("");
-        setJobLogs("");
-        setResultUrl("");
-        setRunTime(0);
+        setPackingResults({
+            jobId: "",
+            jobLogs: "",
+            resultUrl: "",
+            runTime: 0,
+            outputDir: "",
+        });
     };
 
     const recipeHasChanged = async (
@@ -134,12 +146,24 @@ function App() {
             }
         }
         const range = (Date.now() - start) / 1000;
-        setRunTime(range);
         if (localJobStatus.status == JOB_STATUS.DONE) {
-            setResultUrl(SIMULARIUM_EMBED_URL + localJobStatus.result_path);
-            setOutputDir(localJobStatus.outputs_directory);
+            setPackingResults({
+                jobId: id,
+                jobLogs: "",
+                resultUrl: localJobStatus.result_path,
+                runTime: range,
+                outputDir: localJobStatus.outputs_directory,
+            });
         } else if (localJobStatus.status == JOB_STATUS.FAILED) {
-            setJobLogs(localJobStatus.error_message);
+            setPackingResults({
+                jobId: id,
+                jobLogs:
+                    "Packing job failed. Check AWS Batch logs for details. " +
+                    localJobStatus.error_message,
+                resultUrl: "",
+                runTime: range,
+                outputDir: "",
+            });
         }
     };
 
@@ -162,7 +186,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/constants.ts

@@ -0,0 +1,12 @@
+import { EditableField, PackingResults } from "../types";
+
+// stable/frozen empty array to prevent re-renders
+export const EMPTY_FIELDS: readonly EditableField[] = Object.freeze([]);
+export const EMPTY_PACKING_RESULTS: PackingResults = Object.freeze({
+    jobId: "",
+    jobStatus: "",
+    jobLogs: "",
+    resultUrl: "",
+    runTime: -1,
+    outputDir: "",
+});

src/state/store.ts

@@ -1,9 +1,10 @@
 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";
+import { EMPTY_PACKING_RESULTS } from "./constants";
 
 export interface RecipeData {
     id: string;
@@ -14,8 +15,9 @@ export interface RecipeData {
 
 export interface RecipeState {
     selectedRecipeId: string;
-    inputOptions: Record<string, PackingInputs>;
+    inputOptions: Record<string, RecipeManifest>;
     recipes: Record<string, RecipeData>;
+    packingResults: PackingResults;
 }
 
 export interface UIState {
@@ -43,6 +45,9 @@ type Actions = {
             recipeString: string
         ) => Promise<void>
     ) => Promise<void>;
+    setPackingResults: (results: PackingResults) => void;
+    setJobLogs: (logs: string) => void;
+    setJobId: (jobId: string) => void;
 };
 
 export type RecipeStore = RecipeState & UIState & Actions;
@@ -55,6 +60,7 @@ const initialState: RecipeState & UIState = {
     recipes: {},
     isLoading: false,
     isPacking: false,
+    packingResults: { ...EMPTY_PACKING_RESULTS },
 };
 
 export const useRecipeStore = create<RecipeStore>()(
@@ -114,6 +120,9 @@ export const useRecipeStore = create<RecipeStore>()(
         },
 
         selectRecipe: async (recipeId) => {
+            set({
+                packingResults: { ...EMPTY_PACKING_RESULTS },
+            });
             const sel = get().inputOptions[recipeId];
             if (!sel) return;
 
@@ -126,6 +135,27 @@ export const useRecipeStore = create<RecipeStore>()(
             }
         },
 
+        setPackingResults: (results: PackingResults) => {
+            set({ packingResults: results });
+        },
+
+        setJobLogs: (logs: string) => {
+            set({
+                packingResults: {
+                    ...(get().packingResults as PackingResults),
+                    jobLogs: logs,
+                },
+            });
+        },
+        setJobId: (jobId: string) => {
+            set({
+                packingResults: {
+                    ...(get().packingResults as PackingResults),
+                    jobId: jobId,
+                },
+            });
+        },
+
         updateRecipeString: (recipeId, newString) => {
             set((s) => {
                 const rec = s.recipes[recipeId];
@@ -216,12 +246,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 = () =>
@@ -230,6 +261,53 @@ export const useIsCurrentRecipeModified = () =>
     useRecipeStore((s) => s.recipes[s.selectedRecipeId]?.isModified ?? false);
 export const useGetOriginalValue = () =>
     useRecipeStore((s) => s.getOriginalValue);
+const usePackingResults = () => useRecipeStore((s) => s.packingResults);
+
+// 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 useRunTime = () => {
+    const results = usePackingResults();
+    return results ? results.runTime : 0;
+};
+
+export const useJobLogs = () => {
+    const results = usePackingResults();
+    return results ? results.jobLogs : "";
+};
+
+export const useJobId = () => {
+    const results = usePackingResults();
+    return results ? results.jobId : "";
+};
+
+export const useOutputsDirectory = () => {
+    const results = usePackingResults();
+    return results ? results.outputDir : "";
+};
+
+export const useResultUrl = () => {
+    let path = "";
+    const results = usePackingResults();
+    const currentRecipeId = useSelectedRecipeId();
+    const defaultResultPath = useDefaultResultPath();
+    if (results.resultUrl) {
+        path = results.resultUrl;
+    } else if (currentRecipeId) {
+        path = defaultResultPath;
+    }
+    return path;
+};
 
 // action selectors (stable identities)
 export const useLoadInputOptions = () =>
@@ -245,3 +323,7 @@ export const useRestoreRecipeDefault = () =>
 export const useStartPacking = () => useRecipeStore((s) => s.startPacking);
 export const useGetCurrentValue = () =>
     useRecipeStore((s) => s.getCurrentValue);
+export const useSetPackingResults = () =>
+    useRecipeStore((s) => s.setPackingResults);
+export const useSetJobLogs = () => useRecipeStore((s) => s.setJobLogs);
+export const useSetJobId = () => useRecipeStore((s) => s.setJobId);

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,
             };
         }
     }