DRAFT: Feature/ssot

src/App.tsx

@@ -1,11 +1,4 @@
-import { useState } from "react";
-import { v4 as uuidv4 } from "uuid";
 import { Layout, Typography } from "antd";
-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 PackingInput from "./components/PackingInput";
 import Viewer from "./components/Viewer";
 import StatusBar from "./components/StatusBar";
@@ -15,133 +8,6 @@ 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);
-
-    let start = 0;
-
-    async function sleep(ms: number): Promise<void> {
-        return new Promise((resolve) => setTimeout(resolve, ms));
-    }
-
-    const resetState = () => {
-        setJobId("");
-        setJobStatus("");
-        setJobLogs("");
-        setResultUrl("");
-        setRunTime(0);
-    };
-
-    const recipeHasChanged = async (
-        recipeId: string,
-        recipeString: string
-    ): Promise<boolean> => {
-        const originalRecipe = await getFirebaseRecipe(recipeId);
-        return !(jsonToString(originalRecipe) == recipeString);
-    };
-
-    const recipeToFirebase = (
-        recipe: string,
-        path: string,
-        id: string
-    ): object => {
-        const recipeJson = JSON.parse(recipe);
-        if (recipeJson.bounding_box) {
-            const flattened_array = Object.assign({}, recipeJson.bounding_box);
-            recipeJson.bounding_box = flattened_array;
-        }
-        recipeJson[FIRESTORE_FIELDS.RECIPE_PATH] = path;
-        recipeJson[FIRESTORE_FIELDS.NAME] = id;
-        recipeJson[FIRESTORE_FIELDS.TIMESTAMP] = Date.now();
-        return recipeJson;
-    };
-
-    const submitRecipe = async (
-        recipeId: string,
-        configId: string,
-        recipeString: string
-    ) => {
-        resetState();
-        let firebaseRecipe = "firebase:recipes/" + recipeId;
-        const firebaseConfig = configId
-            ? "firebase:configs/" + configId
-            : undefined;
-        const recipeChanged: boolean = await recipeHasChanged(
-            recipeId,
-            recipeString
-        );
-        if (recipeChanged) {
-            const recipeId = uuidv4();
-            firebaseRecipe = "firebase:recipes_edited/" + recipeId;
-            const recipeJson = recipeToFirebase(
-                recipeString,
-                firebaseRecipe,
-                recipeId
-            );
-            try {
-                await addRecipe(recipeId, recipeJson);
-            } catch (e) {
-                setJobStatus(JOB_STATUS.FAILED);
-                setJobLogs(String(e));
-                return;
-            }
-        }
-        const url = getSubmitPackingUrl(firebaseRecipe, firebaseConfig);
-        const request: RequestInfo = new Request(url, { method: "POST" });
-        start = Date.now();
-        const response = await fetch(request);
-        setJobStatus(JOB_STATUS.SUBMITTED);
-        const data = await response.json();
-        if (response.ok) {
-            setJobId(data.jobId);
-            setJobStatus(JOB_STATUS.STARTING);
-            return data.jobId;
-        } else {
-            setJobStatus(JOB_STATUS.FAILED);
-            setJobLogs(JSON.stringify(data));
-        }
-    };
-
-    const startPacking = async (
-        recipeId: string,
-        configId: string,
-        recipeString: string
-    ) => {
-        await submitRecipe(recipeId, configId, recipeString).then(
-            (jobIdFromSubmit) => checkStatus(jobIdFromSubmit)
-        );
-    };
-
-    const checkStatus = async (jobIdFromSubmit: string) => {
-        const id = jobIdFromSubmit || jobId;
-        let localJobStatus = await getJobStatus(id);
-        while (
-            localJobStatus?.status !== JOB_STATUS.DONE &&
-            localJobStatus?.status !== JOB_STATUS.FAILED
-        ) {
-            await sleep(500);
-            const newJobStatus = await getJobStatus(id);
-            if (
-                newJobStatus &&
-                localJobStatus?.status !== newJobStatus.status
-            ) {
-                localJobStatus = newJobStatus;
-                setJobStatus(newJobStatus.status);
-            }
-        }
-        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);
-        } else if (localJobStatus.status == JOB_STATUS.FAILED) {
-            setJobLogs(localJobStatus.error_message);
-        }
-    };
 
     return (
         <Layout className="app-container">
@@ -159,20 +25,14 @@ function App() {
             </Header>
             <Layout>
                 <Sider width="35%" theme="light" className="sider">
-                    <PackingInput startPacking={startPacking} />
+                    <PackingInput />
                 </Sider>
                 <Content className="content-container">
-                    <Viewer resultUrl={resultUrl} />
+                    <Viewer />
                 </Content>
             </Layout>
             <Footer className="footer">
-                <StatusBar
-                    jobStatus={jobStatus}
-                    runTime={runTime}
-                    jobId={jobId}
-                    errorLogs={jobLogs}
-                    outputDir={outputDir}
-                />
+                <StatusBar />
             </Footer>
         </Layout>
     );

src/components/Dropdown/index.tsx

@@ -1,24 +1,24 @@
 import { Select } from "antd";
-import { Dictionary, PackingInputs } from "../../types";
+import { map } from "lodash-es";
+import { Dictionary, RecipeManifest } from "../../types";
 
 interface DropdownProps {
     placeholder: string;
-    options: Dictionary<PackingInputs>;
+    options: Dictionary<RecipeManifest>;
+    defaultValue?: string;
     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 = map(options, (opt, key) => ({
+            label: opt.displayName || key,
+            value: opt.recipeId,
+        }));
 
     return (
         <Select
-            defaultValue={undefined}
+            defaultValue={defaultValue}
             onChange={onChange}
             placeholder={placeholder}
             options={selectOptions}

src/components/ErrorLogs/index.tsx

@@ -1,19 +1,21 @@
 import { useState } from "react";
 import { Button, Drawer } from "antd";
+import { usePackingResults } from "../../state/store";
+import { JOB_STATUS } from "../../constants/aws";
 import "./style.css";
 
-interface ErrorLogsProps {
-    errorLogs: string;
-}
-
-const ErrorLogs = (props: ErrorLogsProps): JSX.Element => {
-    const { errorLogs } = props;
+const ErrorLogs = (): JSX.Element => {
     const [viewErrorLogs, setViewErrorLogs] = useState<boolean>(true);
+    const {jobStatus, jobLogs: errorLogs} = usePackingResults();
 
     const toggleLogs = () => {
         setViewErrorLogs(!viewErrorLogs);
     };
 
+    if (jobStatus !== JOB_STATUS.FAILED) {
+        return <></>
+    };
+
     return (
         <>
             <Button color="primary" variant="filled" onClick={toggleLogs}>

src/components/GradientInput/index.tsx

@@ -2,9 +2,8 @@ import { Select, Slider, InputNumber } from "antd";
 import { GradientOption } from "../../types";
 import {
     useSelectedRecipeId,
-    useUpdateRecipeObj,
+    useEditRecipe,
     useGetCurrentValue,
-    useCurrentRecipeString,
 } from "../../state/store";
 import { getSelectedGradient, deriveGradientStrength, round2, toStore } from "../../utils/gradient";
 import "./style.css";
@@ -19,10 +18,8 @@ interface GradientInputProps {
 const GradientInput = (props: GradientInputProps): JSX.Element => {
     const { displayName, description, gradientOptions, defaultValue } = props;
     const selectedRecipeId = useSelectedRecipeId();
-    const updateRecipeObj = useUpdateRecipeObj();
+    const editRecipe = useEditRecipe();
     const getCurrentValue = useGetCurrentValue();
-    // Force re-render after restore/navigation
-    useCurrentRecipeString();
 
     const { currentGradient, selectedOption } = getSelectedGradient(
         gradientOptions,
@@ -42,14 +39,14 @@ const GradientInput = (props: GradientInputProps): JSX.Element => {
         if (selectedOption.packing_mode && selectedOption.packing_mode_path) {
             changes[selectedOption.packing_mode_path] = selectedOption.packing_mode;
         }
-        updateRecipeObj(selectedRecipeId, changes);
+        editRecipe(selectedRecipeId, changes);
     };
 
     const handleStrengthChange = (val: number | null) => {
         if (val == null || !selectedRecipeId || !gradientStrengthData) return;
         const uiVal = round2(val);
         const storeVal = toStore(uiVal);
-        updateRecipeObj(selectedRecipeId, { [gradientStrengthData.path]: storeVal });
+        editRecipe(selectedRecipeId, { [gradientStrengthData.path]: storeVal });
     };
 
     const selectOptions = gradientOptions.map((option) => ({

src/components/InputSwitch/index.tsx

@@ -3,9 +3,9 @@ import { Input, InputNumber, Select, Slider } from "antd";
 import { GradientOption } from "../../types";
 import {
     useSelectedRecipeId,
-    useUpdateRecipeObj,
+    useEditRecipe,
     useGetCurrentValue,
-    useCurrentRecipeString,
+    useRecipes,
 } from "../../state/store";
 import GradientInput from "../GradientInput";
 import "./style.css";
@@ -25,12 +25,24 @@ interface InputSwitchProps {
 }
 
 const InputSwitch = (props: InputSwitchProps): JSX.Element => {
-    const { displayName, inputType, dataType, description, min, max, options, id, gradientOptions, conversionFactor, unit } = props;
+    const {
+        displayName,
+        inputType,
+        dataType,
+        description,
+        min,
+        max,
+        options,
+        id,
+        gradientOptions,
+        conversionFactor,
+        unit
+    } = props;
 
     const selectedRecipeId = useSelectedRecipeId();
-    const updateRecipeObj = useUpdateRecipeObj();
+    const editRecipe = useEditRecipe();
     const getCurrentValue = useGetCurrentValue();
-    const recipeVersion = useCurrentRecipeString();
+    const recipes = useRecipes();
 
     // Conversion factor for numeric inputs where we want to display a
     // different unit in the UI than is stored in the recipe
@@ -59,16 +71,12 @@ const InputSwitch = (props: InputSwitchProps): JSX.Element => {
     // Reset local state when store value (or recipe) changes
     useEffect(() => {
         setValue(getCurrentValueMemo());
-    }, [getCurrentValueMemo, recipeVersion]);
+    }, [getCurrentValueMemo, recipes]);
 
     const handleInputChange = (value: string | number | null) => {
         if (value == null || !selectedRecipeId) return;
         setValue(value);
-        if (typeof value === "number") {
-            // Convert back to original units for updating recipe object
-            value = value / conversion;
-        }
-        updateRecipeObj(selectedRecipeId, { [id]: value });
+        editRecipe(selectedRecipeId, { [id]: value });
     };
 
     switch (inputType) {

src/components/JSONViewer/index.tsx

@@ -7,22 +7,19 @@ import {
     returnOneElement,
 } from "./formattingUtils";
 import "./style.css";
+import { useCurrentRecipeManifest,
+    //  useRecipes, useSelectedRecipeId
+     } from "../../state/store";
+import { buildCurrentRecipeObject } from "../../state/utils";
 
-interface JSONViewerProps {
-    title: string;
-    content: string;
-    isEditable: boolean;
-    onChange: (value: string) => void;
-}
+const JSONViewer = (): JSX.Element | null => {
+    const currentRecipe = useCurrentRecipeManifest();
 
-const JSONViewer = (props: JSONViewerProps): JSX.Element | null => {
-    const { content } = props;
-
-    if (!content) {
+    if (!currentRecipe) {
         return null;
     }
 
-    const contentAsObj = JSON.parse(content);
+    const contentAsObj = buildCurrentRecipeObject(currentRecipe);
 
     // descriptions for top level key-value pairs
     const descriptions: DescriptionsItemProps[] = [];