From 14a894c161888d199ae1bf23fc4e53987ce0ae68 Mon Sep 17 00:00:00 2001
From: ascibisz <alli.scibisz@alleninstitute.org>
Date: Thu, 8 Jan 2026 09:43:25 -0800
Subject: [PATCH 1/5] basic upload recipe from local device modal

---
 src/App.css                          |  4 ++
 src/App.tsx                          | 36 ++++++++++---
 src/components/LocalRecipe/index.tsx | 29 +++++++++++
 src/components/UploadModal/index.tsx | 77 ++++++++++++++++++++++++++++
 4 files changed, 138 insertions(+), 8 deletions(-)
 create mode 100644 src/components/LocalRecipe/index.tsx
 create mode 100644 src/components/UploadModal/index.tsx

diff --git a/src/App.css b/src/App.css
index f03baa79..9507d94d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -26,6 +26,10 @@
     padding: 0 40px;
 }
 
+.load-button {
+    margin-right: 20px;
+}
+
 .footer {
     display: flex;
     flex-direction: row;
diff --git a/src/App.tsx b/src/App.tsx
index c330ada3..105b3fed 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { v4 as uuidv4 } from "uuid";
-import { Layout, Typography } from "antd";
+import { Button, Layout, Typography } from "antd";
 import { getJobStatus, addRecipe } from "./utils/firebase";
 import { getFirebaseRecipe, jsonToString } from "./utils/recipeLoader";
 import { getSubmitPackingUrl, JOB_STATUS } from "./constants/aws";
@@ -15,6 +15,7 @@ import {
     useSetPackingResults,
 } from "./state/store";
 import PackingInput from "./components/PackingInput";
+import UploadModal from "./components/UploadModal";
 import Viewer from "./components/Viewer";
 import StatusBar from "./components/StatusBar";
 
@@ -25,6 +26,8 @@ const { Link } = Typography;
 
 function App() {
     const [jobStatus, setJobStatus] = useState<string>("");
+    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+    const [localFile, setLocalFile] = useState<string | null>(null);
 
     const setJobLogs = useSetJobLogs();
     const jobLogs = useJobLogs();
@@ -44,6 +47,9 @@ function App() {
         recipeId: string,
         recipeString: string
     ): Promise<boolean> => {
+        if (!recipeId) {
+            return true;
+        }
         const originalRecipe = await getFirebaseRecipe(recipeId);
         return !(jsonToString(originalRecipe) == recipeString);
     };
@@ -156,6 +162,14 @@ function App() {
         }
     };
 
+    const showUploadDialog = () => {
+        setIsModalOpen(true);
+    };
+
+    const handleModalClose = () => {
+        setIsModalOpen(false);
+    };
+
     return (
         <Layout className="app-container">
             <Header
@@ -163,16 +177,22 @@ function App() {
                 style={{ justifyContent: "space-between" }}
             >
                 <h2 className="header-title">cellPACK Studio</h2>
-                <Link
-                    href="https://github.com/mesoscope/cellpack"
-                    className="header-link"
-                >
-                    GitHub
-                </Link>
+                <div className="header-buttons">
+                    <Button className="load-button" color="primary" variant="filled" onClick={showUploadDialog}>
+                        Load My Own Recipe
+                    </Button>
+                    <Link
+                        href="https://github.com/mesoscope/cellpack"
+                        className="header-link"
+                    >
+                        GitHub
+                    </Link>
+                </div>
             </Header>
+            <UploadModal isOpen={isModalOpen} onClose={handleModalClose} selectRecipe={setLocalFile} />
             <Layout>
                 <Sider width="35%" theme="light" className="sider">
-                    <PackingInput startPacking={startPacking} />
+                    <PackingInput startPacking={startPacking} recipeString={localFile} />
                 </Sider>
                 <Content className="content-container">
                     <Viewer />
diff --git a/src/components/LocalRecipe/index.tsx b/src/components/LocalRecipe/index.tsx
new file mode 100644
index 00000000..b42f22ce
--- /dev/null
+++ b/src/components/LocalRecipe/index.tsx
@@ -0,0 +1,29 @@
+import { Button, Input } from 'antd';
+
+const { TextArea } = Input;
+
+interface LocalRecipeProps {
+    recipeString: string;
+    startPacking: (recipeId: string, configId: string, recipeString: string) => Promise<void>;
+    maxHeight?: number;
+}
+
+const LocalRecipe: React.FC<LocalRecipeProps> = ({ recipeString, startPacking, maxHeight }) => {
+    return (
+        <div className="local-recipe">
+            <h3>Uploaded Recipe</h3>
+            <TextArea value={recipeString} disabled style={{ height: maxHeight }} />
+            <Button
+                className="packing-button"
+                color="primary"
+                variant="filled"
+                style={{ width: "100%", minHeight: 38, marginTop: 6 }}
+                onClick={() => startPacking("", "", recipeString)}
+            >
+               <strong>Run Packing</strong>
+            </Button>
+        </div>
+    );
+};
+
+export default LocalRecipe;
diff --git a/src/components/UploadModal/index.tsx b/src/components/UploadModal/index.tsx
new file mode 100644
index 00000000..7b5eae0b
--- /dev/null
+++ b/src/components/UploadModal/index.tsx
@@ -0,0 +1,77 @@
+import { Button, message, Modal, Upload } from "antd";
+import type { UploadProps } from 'antd';
+import { useState } from "react";
+
+
+interface UploadModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    selectRecipe: (recipeContent: string | null) => void;
+}
+
+const UploadModal = (props: UploadModalProps): JSX.Element => {
+    const { isOpen, onClose, selectRecipe } = props;
+    const [selectedFile, setSelectedFile] = useState<File | null>(null);
+
+    const uploadProps: UploadProps = {
+        name: 'file',
+        multiple: false,
+        accept: ".json",
+        fileList: [],
+        beforeUpload: (file) => handleUpload(file),
+    };
+
+    const handleUpload = (file: File) => {
+        message.success(`${file.name} file uploaded successfully`);
+        setSelectedFile(file);
+        return false; // Prevent automatic upload
+    };
+
+    const handleSubmit = () => {
+        if (selectedFile) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const content = e.target?.result;
+                selectRecipe(content as string);
+                console.log("File content:");
+                console.log(content);
+                // Handle the loaded content here
+            };
+            reader.readAsText(selectedFile);
+        }
+        handleCancel();
+    };
+
+    const handleCancel = () => {
+        setSelectedFile(null);
+        selectRecipe(null);
+        onClose();
+    }
+
+    return (
+        <Modal
+            title="Choose a Recipe JSON File to Load"
+            open={isOpen}
+            onCancel={onClose}
+            footer={[
+                <Button onClick={handleCancel}>
+                    Cancel
+                </Button>,
+                <Button onClick={handleSubmit} color="primary" variant="filled">
+                    Load
+                </Button>
+            ]}
+        >
+            <Upload {...uploadProps}>
+                <Button type="primary">Select a File</Button>
+            </Upload>
+            {selectedFile && (
+                <div>
+                    <p>{selectedFile.name}</p>
+                </div>
+            )}
+        </Modal>
+    );
+};
+
+export default UploadModal;
\ No newline at end of file

From 53eb35ecddfaa032a105348c89cd43a9c45e0365 Mon Sep 17 00:00:00 2001
From: ascibisz <alli.scibisz@alleninstitute.org>
Date: Thu, 8 Jan 2026 09:43:54 -0800
Subject: [PATCH 2/5] changes to packing input

---
 src/components/PackingInput/index.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/PackingInput/index.tsx b/src/components/PackingInput/index.tsx
index a2de51da..104f49b9 100644
--- a/src/components/PackingInput/index.tsx
+++ b/src/components/PackingInput/index.tsx
@@ -14,6 +14,7 @@ import Dropdown from "../Dropdown";
 import JSONViewer from "../JSONViewer";
 import RecipeForm from "../RecipeForm";
 import ExpandableText from "../ExpandableText";
+import LocalRecipe from "../LocalRecipe";
 import "./style.css";
 import { useSiderHeight } from "../../hooks/useSiderHeight";
 import {
@@ -29,10 +30,11 @@ interface PackingInputProps {
         configId: string,
         recipeString: string
     ) => Promise<void>;
+    recipeString: string | null;
 }
 
 const PackingInput = (props: PackingInputProps): JSX.Element => {
-    const { startPacking } = props;
+    const { startPacking, recipeString } = props;
     const selectedRecipeId = useSelectedRecipeId();
     const recipeObj = useCurrentRecipeObject();
     const inputOptions = useInputOptions();
@@ -77,6 +79,17 @@ const PackingInput = (props: PackingInputProps): JSX.Element => {
         return loadingText;
     }
 
+    // Local recipe loaded
+    if (recipeString) {
+        return (
+            <LocalRecipe
+                recipeString={recipeString}
+                startPacking={startPacking}
+                maxHeight={availableRecipeHeight}
+            />
+        )
+    }
+
     return (
         <>
             <div className="recipe-select">

From db4fa7dcbe502c77b56ed93d66a447a2f8bc1020 Mon Sep 17 00:00:00 2001
From: ascibisz <alli.scibisz@alleninstitute.org>
Date: Thu, 8 Jan 2026 11:21:31 -0800
Subject: [PATCH 3/5] use store for state management of locally uploaded recipe
 file

---
 src/App.tsx                           |  5 ++---
 src/components/LocalRecipe/index.tsx  | 26 +++++++++++++++++++++-----
 src/components/LocalRecipe/style.css  |  6 ++++++
 src/components/PackingInput/index.tsx | 22 +++++++++++-----------
 src/components/UploadModal/index.tsx  | 19 +++++++++----------
 src/state/store.ts                    | 26 ++++++++++++++++++++++++++
 6 files changed, 75 insertions(+), 29 deletions(-)
 create mode 100644 src/components/LocalRecipe/style.css

diff --git a/src/App.tsx b/src/App.tsx
index 105b3fed..8e161eff 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -27,7 +27,6 @@ const { Link } = Typography;
 function App() {
     const [jobStatus, setJobStatus] = useState<string>("");
     const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
-    const [localFile, setLocalFile] = useState<string | null>(null);
 
     const setJobLogs = useSetJobLogs();
     const jobLogs = useJobLogs();
@@ -189,10 +188,10 @@ function App() {
                     </Link>
                 </div>
             </Header>
-            <UploadModal isOpen={isModalOpen} onClose={handleModalClose} selectRecipe={setLocalFile} />
+            <UploadModal isOpen={isModalOpen} onClose={handleModalClose} />
             <Layout>
                 <Sider width="35%" theme="light" className="sider">
-                    <PackingInput startPacking={startPacking} recipeString={localFile} />
+                    <PackingInput startPacking={startPacking} />
                 </Sider>
                 <Content className="content-container">
                     <Viewer />
diff --git a/src/components/LocalRecipe/index.tsx b/src/components/LocalRecipe/index.tsx
index b42f22ce..0cad6f13 100644
--- a/src/components/LocalRecipe/index.tsx
+++ b/src/components/LocalRecipe/index.tsx
@@ -1,24 +1,40 @@
 import { Button, Input } from 'antd';
+import { CloseOutlined } from '@ant-design/icons'
+import { useLocalRecipeString, useSetLocalRecipe } from '../../state/store';
+
+import "./style.css";
 
 const { TextArea } = Input;
 
 interface LocalRecipeProps {
-    recipeString: string;
     startPacking: (recipeId: string, configId: string, recipeString: string) => Promise<void>;
     maxHeight?: number;
 }
 
-const LocalRecipe: React.FC<LocalRecipeProps> = ({ recipeString, startPacking, maxHeight }) => {
+const LocalRecipe: React.FC<LocalRecipeProps> = ({ startPacking, maxHeight }) => {
+    const localRecipeString = useLocalRecipeString();
+    const setLocalRecipe = useSetLocalRecipe();
+
+    const closeLocalRecipe = () => {
+        setLocalRecipe(undefined);
+    };
+
+    if (!localRecipeString) {
+        return <div>No local recipe loaded.</div>;
+    }
     return (
         <div className="local-recipe">
-            <h3>Uploaded Recipe</h3>
-            <TextArea value={recipeString} disabled style={{ height: maxHeight }} />
+            <div className="upload-recipe-header">
+                <h3>Uploaded Recipe</h3>
+                <Button icon={<CloseOutlined />} onClick={closeLocalRecipe} color="default" variant="text"/>
+            </div>
+            <TextArea value={localRecipeString} disabled style={{ height: maxHeight }} />
             <Button
                 className="packing-button"
                 color="primary"
                 variant="filled"
                 style={{ width: "100%", minHeight: 38, marginTop: 6 }}
-                onClick={() => startPacking("", "", recipeString)}
+                onClick={() => startPacking("", "", localRecipeString)}
             >
                <strong>Run Packing</strong>
             </Button>
diff --git a/src/components/LocalRecipe/style.css b/src/components/LocalRecipe/style.css
new file mode 100644
index 00000000..78065364
--- /dev/null
+++ b/src/components/LocalRecipe/style.css
@@ -0,0 +1,6 @@
+.upload-recipe-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
diff --git a/src/components/PackingInput/index.tsx b/src/components/PackingInput/index.tsx
index 104f49b9..d30b2d00 100644
--- a/src/components/PackingInput/index.tsx
+++ b/src/components/PackingInput/index.tsx
@@ -9,6 +9,7 @@ import {
     useCurrentRecipeObject,
     useInputOptions,
     useLoadInputOptions,
+    useLocalRecipeString,
 } from "../../state/store";
 import Dropdown from "../Dropdown";
 import JSONViewer from "../JSONViewer";
@@ -30,14 +31,14 @@ interface PackingInputProps {
         configId: string,
         recipeString: string
     ) => Promise<void>;
-    recipeString: string | null;
 }
 
 const PackingInput = (props: PackingInputProps): JSX.Element => {
-    const { startPacking, recipeString } = props;
+    const { startPacking } = props;
     const selectedRecipeId = useSelectedRecipeId();
     const recipeObj = useCurrentRecipeObject();
     const inputOptions = useInputOptions();
+    const localRecipeString = useLocalRecipeString();
 
     const loadInputOptions = useLoadInputOptions();
     const loadAllRecipes = useLoadAllRecipes();
@@ -72,24 +73,23 @@ const PackingInput = (props: PackingInputProps): JSX.Element => {
         await storeStartPacking(startPacking);
     };
 
-    const loadingText = <div className="recipe-select">Loading...</div>;
-
-    // No recipe or dropdown options to load
-    if (!recipeObj && !inputOptions[selectedRecipeId]) {
-        return loadingText;
-    }
-
     // Local recipe loaded
-    if (recipeString) {
+    if (localRecipeString) {
         return (
             <LocalRecipe
-                recipeString={recipeString}
                 startPacking={startPacking}
                 maxHeight={availableRecipeHeight}
             />
         )
     }
 
+    const loadingText = <div className="recipe-select">Loading...</div>;
+
+    // No recipe or dropdown options to load
+    if (!recipeObj && !inputOptions[selectedRecipeId]) {
+        return loadingText;
+    }
+
     return (
         <>
             <div className="recipe-select">
diff --git a/src/components/UploadModal/index.tsx b/src/components/UploadModal/index.tsx
index 7b5eae0b..01f06ceb 100644
--- a/src/components/UploadModal/index.tsx
+++ b/src/components/UploadModal/index.tsx
@@ -1,17 +1,18 @@
-import { Button, message, Modal, Upload } from "antd";
+import { Button, Divider, message, Modal, Upload } from "antd";
 import type { UploadProps } from 'antd';
 import { useState } from "react";
+import { useSetLocalRecipe } from "../../state/store";
 
 
 interface UploadModalProps {
     isOpen: boolean;
     onClose: () => void;
-    selectRecipe: (recipeContent: string | null) => void;
 }
 
 const UploadModal = (props: UploadModalProps): JSX.Element => {
-    const { isOpen, onClose, selectRecipe } = props;
+    const { isOpen, onClose } = props;
     const [selectedFile, setSelectedFile] = useState<File | null>(null);
+    const setLocalRecipe = useSetLocalRecipe();
 
     const uploadProps: UploadProps = {
         name: 'file',
@@ -32,10 +33,7 @@ const UploadModal = (props: UploadModalProps): JSX.Element => {
             const reader = new FileReader();
             reader.onload = (e) => {
                 const content = e.target?.result;
-                selectRecipe(content as string);
-                console.log("File content:");
-                console.log(content);
-                // Handle the loaded content here
+                setLocalRecipe(content as string);
             };
             reader.readAsText(selectedFile);
         }
@@ -44,7 +42,7 @@ const UploadModal = (props: UploadModalProps): JSX.Element => {
 
     const handleCancel = () => {
         setSelectedFile(null);
-        selectRecipe(null);
+        setLocalRecipe(undefined);
         onClose();
     }
 
@@ -57,13 +55,14 @@ const UploadModal = (props: UploadModalProps): JSX.Element => {
                 <Button onClick={handleCancel}>
                     Cancel
                 </Button>,
-                <Button onClick={handleSubmit} color="primary" variant="filled">
+                <Button onClick={handleSubmit} color="primary" variant="filled" disabled={!selectedFile}>
                     Load
                 </Button>
             ]}
         >
+            <Divider size="small" />
             <Upload {...uploadProps}>
-                <Button type="primary">Select a File</Button>
+                <Button color="primary" variant="filled">Select a File</Button>
             </Upload>
             {selectedFile && (
                 <div>
diff --git a/src/state/store.ts b/src/state/store.ts
index 48382aed..895c0097 100644
--- a/src/state/store.ts
+++ b/src/state/store.ts
@@ -19,6 +19,7 @@ export interface RecipeState {
 
 export interface UIState {
     isPacking: boolean;
+    localRecipeString?: string;
 }
 
 type Actions = {
@@ -44,17 +45,20 @@ type Actions = {
     setPackingResults: (results: PackingResult) => void;
     setJobLogs: (logs: string) => void;
     setJobId: (jobId: string) => void;
+    setLocalRecipe: (recipeString?: string) => void;
 };
 
 export type RecipeStore = RecipeState & UIState & Actions;
 
 export const INITIAL_RECIPE_ID = "peroxisome_v_gradient_packing";
+export const LOCAL_RECIPE_ID = "LOCAL_RECIPE";
 
 const initialState: RecipeState & UIState = {
     selectedRecipeId: INITIAL_RECIPE_ID,
     inputOptions: {},
     recipes: {},
     isPacking: false,
+    localRecipeString: undefined,
     packingResults: { [INITIAL_RECIPE_ID]: EMPTY_PACKING_RESULT },
 };
 
@@ -127,6 +131,26 @@ export const useRecipeStore = create<RecipeStore>()(
             }
         },
 
+        setLocalRecipe: (recipeString?: string) => {
+            if (recipeString) {
+                set({
+                    localRecipeString: recipeString,
+                    selectedRecipeId: LOCAL_RECIPE_ID
+                });
+            } else {
+                // Clear local recipe
+                set({
+                    localRecipeString: undefined,
+                    selectedRecipeId: INITIAL_RECIPE_ID,
+                    packingResults: {
+                        ...get().packingResults,
+                        [LOCAL_RECIPE_ID]: EMPTY_PACKING_RESULT,
+                    },
+                });
+            }
+
+        },
+
         setPackingResults: (results: PackingResult) => {
             const currentRecipeId = get().selectedRecipeId;
             set({
@@ -272,6 +296,7 @@ export const useFieldsToDisplay = () =>
     useRecipeStore((s) => s.recipes[s.selectedRecipeId]?.editableFields);
 export const useRecipes = () => useRecipeStore((s) => s.recipes);
 export const usePackingResults = () => useRecipeStore((s) => s.packingResults);
+export const useLocalRecipeString = () => useRecipeStore((s) => s.localRecipeString);
 
 export const useCurrentRecipeObject = () => {
     const recipe = useCurrentRecipeData();
@@ -364,3 +389,4 @@ export const useSetPackingResults = () =>
     useRecipeStore((s) => s.setPackingResults);
 export const useSetJobLogs = () => useRecipeStore((s) => s.setJobLogs);
 export const useSetJobId = () => useRecipeStore((s) => s.setJobId);
+export const useSetLocalRecipe = () => useRecipeStore((s) => s.setLocalRecipe);

From 31a999022f811bd9a4041fe2db521d305bf17c07 Mon Sep 17 00:00:00 2001
From: ascibisz <alli.scibisz@alleninstitute.org>
Date: Thu, 8 Jan 2026 13:17:34 -0800
Subject: [PATCH 4/5] don't set local recipe to undefined ever from modal

---
 src/components/UploadModal/index.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/UploadModal/index.tsx b/src/components/UploadModal/index.tsx
index 01f06ceb..b0bb3d03 100644
--- a/src/components/UploadModal/index.tsx
+++ b/src/components/UploadModal/index.tsx
@@ -37,12 +37,11 @@ const UploadModal = (props: UploadModalProps): JSX.Element => {
             };
             reader.readAsText(selectedFile);
         }
-        handleCancel();
+        handleClose();
     };
 
-    const handleCancel = () => {
+    const handleClose = () => {
         setSelectedFile(null);
-        setLocalRecipe(undefined);
         onClose();
     }
 
@@ -52,7 +51,7 @@ const UploadModal = (props: UploadModalProps): JSX.Element => {
             open={isOpen}
             onCancel={onClose}
             footer={[
-                <Button onClick={handleCancel}>
+                <Button onClick={handleClose}>
                     Cancel
                 </Button>,
                 <Button onClick={handleSubmit} color="primary" variant="filled" disabled={!selectedFile}>

From e1d0985332b301cc27fc0ba752b976772cc8fcbf Mon Sep 17 00:00:00 2001
From: ascibisz <alli.scibisz@alleninstitute.org>
Date: Thu, 8 Jan 2026 13:20:06 -0800
Subject: [PATCH 5/5] change function name to match new functionality

---
 src/App.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 8e161eff..f9535e72 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -42,7 +42,7 @@ function App() {
         return new Promise((resolve) => setTimeout(resolve, ms));
     }
 
-    const recipeHasChanged = async (
+    const isUploadNeeded = async (
         recipeId: string,
         recipeString: string
     ): Promise<boolean> => {
@@ -78,11 +78,11 @@ function App() {
         const firebaseConfig = configId
             ? "firebase:configs/" + configId
             : undefined;
-        const recipeChanged: boolean = await recipeHasChanged(
+        const uploadNeeded: boolean = await isUploadNeeded(
             recipeId,
             recipeString
         );
-        if (recipeChanged) {
+        if (uploadNeeded) {
             const recipeId = uuidv4();
             firebaseRecipe = "firebase:recipes_edited/" + recipeId;
             const recipeJson = recipeToFirebase(