Skip to content

DRAFT: Feature/ssot #134

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
interim17 wants to merge 13 commits into from
Closed

DRAFT: Feature/ssot #134

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
17f7a63
use JS object instead of string as single source of truth in store
interim17 Oct 21, 2025
154a1bb
tests for store
interim17 Oct 21, 2025
f944bf7
use RecipeManifest single source of truth in store
interim17 Oct 29, 2025
ec478fe
pull packing data into store and utils and stop using recipe strings …
interim17 Nov 5, 2025
15ce497
update tests
interim17 Nov 5, 2025
d6afb28
wip branch bring in line with main pre-merge
interim17 Nov 5, 2025
02f3145
use object in json viewer, and clean up on types and utils
interim17 Nov 5, 2025
77ee8cd
Merge branch 'main' of https://github.com/mesoscope/cellpack-client i…
interim17 Nov 5, 2025
1acdf30
put logs in store on failed jobs
interim17 Nov 5, 2025
23e1986
make dropdown component in line with main
interim17 Nov 6, 2025
6f9aa8c
rename recipeVersion variable
interim17 Nov 6, 2025
e264325
use packing results type and add defaultResultPath to RecipeManifest
interim17 Nov 7, 2025
f229c30
update tests
interim17 Nov 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 3 additions & 143 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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">
Expand All @@ -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>
);
Expand Down
13 changes: 7 additions & 6 deletions src/components/Dropdown/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,25 @@
import { Select } from "antd";
import { Dictionary, PackingInputs } from "../../types";
import { Dictionary, RecipeManifest } from "../../types";

interface DropdownProps {
placeholder: string;
options: Dictionary<PackingInputs>;
options: Dictionary<RecipeManifest>;
value?: string;
onChange: (value: string) => void;
}

const Dropdown = (props: DropdownProps): JSX.Element => {
const { placeholder, options, onChange } = props;
const selectOptions = Object.entries(options).map(([key]) => (
const { placeholder, options, value, onChange } = props;
const selectOptions = Object.entries(options).map(([key, value]) => (
{
label: <span>{key}</span>,
label: <span>{value.displayName}</span>,
value: key,
}
));

return (
<Select
defaultValue={undefined}
value={value}
Copy link
Contributor

@meganrm meganrm Nov 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm pretty sure default value is sufficient here. Try using my changes for this file other than your name change from inputs to manifest

Copy link
Contributor Author

@interim17 interim17 Nov 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changing it match your version

onChange={onChange}
placeholder={placeholder}
options={selectOptions}
Expand Down
14 changes: 8 additions & 6 deletions src/components/ErrorLogs/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
import { useState } from "react";
import { Button, Drawer } from "antd";
import { usePackingData } from "../../state/store";
Copy link
Contributor

@meganrm meganrm Nov 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is still too imprecise for me. is it user changes, or the recipe settings or the results?

Copy link
Contributor

@meganrm meganrm Nov 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wrote this as I was reading, now understand what it is, but that was my first impression

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} = usePackingData();
Copy link
Contributor

@meganrm meganrm Nov 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

based on this I would say it's resultsMetadata?


const toggleLogs = () => {
setViewErrorLogs(!viewErrorLogs);
};

if (jobStatus !== JOB_STATUS.FAILED) {
return <></>
};

return (
<>
<Button color="primary" variant="filled" onClick={toggleLogs}>
Expand Down
11 changes: 4 additions & 7 deletions src/components/GradientInput/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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,
Expand All @@ -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) => ({
Expand Down
28 changes: 18 additions & 10 deletions src/components/InputSwitch/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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 recipeVersion = useRecipes();
Copy link
Contributor

@meganrm meganrm Nov 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is a little confusing to me. I expect the recipeVersion to be a field in the recipe. and useRecipes() to give you every available recipe

Copy link
Contributor Author

@interim17 interim17 Nov 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is just a holdover naming wise, recipes useRecipes does return all available recipes. I'll rename the local variable.


// Conversion factor for numeric inputs where we want to display a
// different unit in the UI than is stored in the recipe
Expand Down Expand Up @@ -64,11 +76,7 @@ const InputSwitch = (props: InputSwitchProps): JSX.Element => {
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) {
Expand Down
18 changes: 8 additions & 10 deletions src/components/JSONViewer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,20 @@ import {
returnOneElement,
} from "./formattingUtils";
import "./style.css";
import { 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 selectedRecipeId = useSelectedRecipeId();
const recipes = useRecipes();

const JSONViewer = (props: JSONViewerProps): JSX.Element | null => {
const { content } = props;
const currentRecipe = recipes[selectedRecipeId];
Copy link
Contributor

@meganrm meganrm Nov 5, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should be a selector in state the returns the recipe data. This component should just get the recipe obj either as a prop or as a useCurrentRecipeData hook


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[] = [];
Expand Down
Loading