From 5064afe09b429f34c2a51916d85107815182b5fa Mon Sep 17 00:00:00 2001 From: Ruge Li Date: Fri, 9 Jan 2026 12:26:47 -0800 Subject: [PATCH 1/4] initial share modal --- src/App.tsx | 32 ++++++++++++++++++++++----- src/components/ShareModal/index.tsx | 34 +++++++++++++++++++++++++++++ 2 files changed, 60 insertions(+), 6 deletions(-) create mode 100644 src/components/ShareModal/index.tsx diff --git a/src/App.tsx b/src/App.tsx index c330ada3..253d08a4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,16 +5,19 @@ 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_VIEWER_URL } from "./constants/urls"; import { useJobId, useJobLogs, useOutputsDirectory, + useResultUrl, useRunTime, useSetJobId, useSetJobLogs, useSetPackingResults, } from "./state/store"; import PackingInput from "./components/PackingInput"; +import ShareModal from "./components/ShareModal"; import Viewer from "./components/Viewer"; import StatusBar from "./components/StatusBar"; @@ -25,6 +28,7 @@ const { Link } = Typography; function App() { const [jobStatus, setJobStatus] = useState(""); + const [isShareModalOpen, setIsShareModalOpen] = useState(false); const setJobLogs = useSetJobLogs(); const jobLogs = useJobLogs(); @@ -33,6 +37,8 @@ function App() { const setPackingResults = useSetPackingResults(); const runTime = useRunTime(); const outputDir = useOutputsDirectory(); + const resultUrl = useResultUrl(); + const shareUrl = resultUrl ? `${SIMULARIUM_VIEWER_URL}${resultUrl}` : ""; let start = 0; @@ -163,13 +169,27 @@ function App() { style={{ justifyContent: "space-between" }} >

cellPACK Studio

- - GitHub - +
+ setIsShareModalOpen(true)} + className="header-link" + disabled={!shareUrl} + > + Share + + + GitHub + +
+ setIsShareModalOpen(false)} + shareUrl={shareUrl} + /> diff --git a/src/components/ShareModal/index.tsx b/src/components/ShareModal/index.tsx new file mode 100644 index 00000000..97ec0ee2 --- /dev/null +++ b/src/components/ShareModal/index.tsx @@ -0,0 +1,34 @@ +import { Button, Input, Modal, Space } from "antd"; + +interface ShareModalProps { + open: boolean; + onClose: () => void; + shareUrl: string; +} + +const ShareModal = ({ open, onClose, shareUrl }: ShareModalProps) => { + return ( + + + + + + + ); +}; + +export default ShareModal; From 312884616b34e85420d4cdfe9d44c8f593247139 Mon Sep 17 00:00:00 2001 From: Ruge Li Date: Mon, 9 Feb 2026 13:49:20 -0800 Subject: [PATCH 2/4] add svg --- src/assets/download.svg | 1 + src/assets/share.svg | 1 + 2 files changed, 2 insertions(+) create mode 100644 src/assets/download.svg create mode 100644 src/assets/share.svg diff --git a/src/assets/download.svg b/src/assets/download.svg new file mode 100644 index 00000000..c79fa79c --- /dev/null +++ b/src/assets/download.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/share.svg b/src/assets/share.svg new file mode 100644 index 00000000..054dbade --- /dev/null +++ b/src/assets/share.svg @@ -0,0 +1 @@ + \ No newline at end of file From 6708902b6c0366a3479a6107a98b596314ed869c Mon Sep 17 00:00:00 2001 From: Ruge Li Date: Mon, 9 Feb 2026 13:50:25 -0800 Subject: [PATCH 3/4] sentence case --- src/components/ShareModal/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ShareModal/index.tsx b/src/components/ShareModal/index.tsx index 97ec0ee2..12600416 100644 --- a/src/components/ShareModal/index.tsx +++ b/src/components/ShareModal/index.tsx @@ -9,7 +9,7 @@ interface ShareModalProps { const ShareModal = ({ open, onClose, shareUrl }: ShareModalProps) => { return ( Date: Mon, 9 Feb 2026 15:12:41 -0800 Subject: [PATCH 4/4] add share button to status bar --- src/App.tsx | 9 ++------ src/components/StatusBar/index.tsx | 37 ++++++++++++++++++++++++++---- src/components/StatusBar/style.css | 8 ++++--- 3 files changed, 39 insertions(+), 15 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 4826ad8e..57dcbcf7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -169,13 +169,6 @@ function App() { >

cellPACK Studio

- setIsShareModalOpen(true)} - className="header-link" - disabled={!shareUrl} - > - Share - setIsShareModalOpen(true)} /> diff --git a/src/components/StatusBar/index.tsx b/src/components/StatusBar/index.tsx index 1d09a445..34e69968 100644 --- a/src/components/StatusBar/index.tsx +++ b/src/components/StatusBar/index.tsx @@ -5,16 +5,31 @@ import { JOB_STATUS } from "../../constants/aws"; import "./style.css"; import ErrorLogs from "../ErrorLogs"; +const DownloadIcon = () => ( + + + +); + +const ShareIcon = () => ( + + + + +); + interface StatusBarProps { jobStatus: string; runTime: number; jobId: string; outputDir: string; errorLogs: string; + shareUrl: string; + onShareClick: () => void; } const StatusBar = (props: StatusBarProps): JSX.Element => { - const { jobStatus, runTime, jobId, errorLogs, outputDir } = props; + const { jobStatus, runTime, jobId, errorLogs, outputDir, shareUrl, onShareClick } = props; const [isDownloading, setIsDownloading] = useState(false); @@ -38,17 +53,29 @@ const StatusBar = (props: StatusBarProps): JSX.Element => {
)} - {jobSucceeded && ( +
+ - )} +
{errorLogs && } ); diff --git a/src/components/StatusBar/style.css b/src/components/StatusBar/style.css index a4c477ef..ac33b884 100644 --- a/src/components/StatusBar/style.css +++ b/src/components/StatusBar/style.css @@ -12,7 +12,9 @@ align-items: center; } -.download-button { - height: auto; - min-height: 48px; +.status-bar-actions { + display: flex; + flex-direction: row; + gap: 12px; + align-items: center; }