Skip to content

Commit

Permalink
change dispatch step
Browse files Browse the repository at this point in the history
  • Loading branch information
@rhit-windsors
rhit-windsors committed Nov 18, 2024
1 parent a574df8 commit a036919
Show file tree
Hide file tree
Showing 12 changed files with 390 additions and 202 deletions.
4 changes: 2 additions & 2 deletions apps/backend/app.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,8 +102,8 @@ def check_mongo():
@flaskApp.get("/downloadExpFile")
def download_exp_file():
try:
experiment_id = request.args.get('expId', default='', type=str)
file_data = download_experiment_file(experiment_id, mongoClient)
file_id = request.args.get('fileId', default='', type=str)
file_data = download_experiment_file(file_id, mongoClient)
file_stream = io.BytesIO(file_data)
return send_file(file_stream, as_attachment=True, download_name="experiment_file", mimetype="application/octet-stream")
except Exception:
Expand Down
4 changes: 2 additions & 2 deletions apps/backend/modules/mongo.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,12 +70,12 @@ def insertExperiments():
# keep trying
check_insert_default_experiments(mongoClient)

def download_experiment_file(expId: str, mongoClient: pymongo.MongoClient):
def download_experiment_file(file_id: str, mongoClient: pymongo.MongoClient):
# we are going to have to get the binary data from mongo here
# setup the bucket
db = mongoClient["gladosdb"]
bucket = GridFSBucket(db, bucket_name='fileBucket')
files = bucket.find({"metadata.expId": expId}).to_list()
files = bucket.find({"_id": ObjectId(file_id)}).to_list() # type: ignore
num_files = 0
file_name = ""
for file in files:
Expand Down
2 changes: 2 additions & 0 deletions apps/frontend/app/components/auth/SignUpModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,8 @@ export const SignUpModal = ({ afterSignUp }) => {
{/* For dev testing!!! */}
{/* <button onClick={() => {signIn("keycloak", {redirectTo: "/dashboard"})}}>Keycloak</button> */}
</div>
{/* For dev testing!!! */}
<button onClick={() => {signIn("keycloak", {redirectTo: "/dashboard"})}}>Keycloak</button>
</div>
</div>
<div className='px-4 py-6 bg-gray-50 border-t-2 border-gray-200 sm:px-10'>
Expand Down
257 changes: 147 additions & 110 deletions apps/frontend/app/components/flows/AddExperiment/NewExperiment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,11 @@ import { ParamStep } from './stepComponents/ParamStep';
import { PostProcessStep } from './stepComponents/PostProcessStep';
import { ConfirmationStep } from './stepComponents/ConfirmationStep';
import { DumbTextArea } from './stepComponents/DumbTextAreaStep';
import { DB_COLLECTION_EXPERIMENTS } from '../../../../lib/db';
import { DB_COLLECTION_EXPERIMENTS, submitExperiment } from '../../../../lib/db';

import { getDocumentFromId } from '../../../../lib/mongodb_funcs';
import { useSession } from 'next-auth/react';
import toast, { Toaster } from 'react-hot-toast';

const DEFAULT_TRIAL_TIMEOUT_SECONDS = 5 * 60 * 60; // 5 hours in seconds

Expand Down Expand Up @@ -63,6 +65,8 @@ const Steps = ({ steps }) => {


const NewExperiment = ({ formState, setFormState, copyID, setCopyId, ...rest }) => {
const { data: session } = useSession();

const form = useForm({
// TODO make this follow the schema as closely as we can
initialValues: {
Expand Down Expand Up @@ -130,6 +134,8 @@ const NewExperiment = ({ formState, setFormState, copyID, setCopyId, ...rest })
setStatus(FormStates.Info);
};

const [fileId, setFileId] = useState(null);

useLayoutEffect(() => {
if (formState === FormStates.Info) {
setOpen(false);
Expand All @@ -141,124 +147,155 @@ const NewExperiment = ({ formState, setFormState, copyID, setCopyId, ...rest })
}
}, [formState]); // TODO adding 'form' causes an update loop

useEffect(() => {
console.log("FileID", fileId);
}, [fileId]);

return (
<Transition.Root show={open} as={Fragment}>
<Dialog
as='div'
className='fixed inset-0 overflow-hidden'
onClose={() => setFormState(0)}
>
<div className='absolute inset-0 overflow-hidden'>
<Dialog.Overlay className='absolute inset-0' />
<div>
<Toaster />
<Transition.Root show={open} as={Fragment}>
<Dialog
as='div'
className='fixed inset-0 overflow-hidden'
onClose={() => setFormState(0)}
>
<div className='absolute inset-0 overflow-hidden'>
<Dialog.Overlay className='absolute inset-0' />

<div className='pointer-events-none fixed inset-y-0 right-0 flex pl-20 sm:pl-16'>
<Transition.Child
as={Fragment}
enter='transform transition ease-in-out duration-500 sm:duration-700'
enterFrom='translate-x-full'
enterTo='translate-x-0'
leave='transform transition ease-in-out duration-500 sm:duration-700'
leaveFrom='translate-x-0'
leaveTo='translate-x-full'
>
<div className='pointer-events-auto w-screen max-w-5xl'>
<form
className='flex h-full flex-col bg-white shadow-xl'
onSubmit={form.onSubmit((values) => {
})}
>
<div className='flex flex-col'>
<div className='bg-gray-50 px-4 py-6 sm:px-6'>
<div className='flex items-center align-center justify-between space-x-3'>
<Steps
steps={['Information', 'Parameters', 'User Defined Constants', 'Post Process', 'Confirmation', 'Dispatch'].map(
(step, idx) => {
return {
id: idx + 1,
name: step,
status: status < idx ? 'upcoming' : 'complete',
};
}
)}
/>
<div className='pointer-events-none fixed inset-y-0 right-0 flex pl-20 sm:pl-16'>
<Transition.Child
as={Fragment}
enter='transform transition ease-in-out duration-500 sm:duration-700'
enterFrom='translate-x-full'
enterTo='translate-x-0'
leave='transform transition ease-in-out duration-500 sm:duration-700'
leaveFrom='translate-x-0'
leaveTo='translate-x-full'
>
<div className='pointer-events-auto w-screen max-w-5xl'>
<form
className='flex h-full flex-col bg-white shadow-xl'
onSubmit={form.onSubmit((values) => {
})}
>
<div className='flex flex-col'>
<div className='bg-gray-50 px-4 py-6 sm:px-6'>
<div className='flex items-center align-center justify-between space-x-3'>
<Steps
steps={['Information', 'Parameters', 'User Defined Constants', 'Post Process', 'Confirmation', 'Dispatch'].map(
(step, idx) => {
return {
id: idx + 1,
name: step,
status: status < idx ? 'upcoming' : 'complete',
};
}
)}
/>
</div>
</div>
</div>
</div>

{/* <div className='h-full flex flex-col space-y-6 py-6 sm:space-y-0 sm:divide-y sm:divide-gray-200 sm:py-0'> */}
{status === FormStates.Info ? (
<InformationStep form={form}></InformationStep>
) : status === FormStates.DumbTextArea ? (
<DumbTextArea form={form}></DumbTextArea>
) : status === FormStates.Params ? (
<ParamStep form={form} confirmedValues={confirmedValues} setConfirmedValues={setConfirmedValues}>{fields}</ParamStep>
) : status === FormStates.ProcessStep ? (
<PostProcessStep form={form}>{fields}</PostProcessStep>
) : status === FormStates.Confirmation ? (
<ConfirmationStep form={form} />
) : (
<DispatchStep form={form} id={id} onDropComplete={onDropComplete}/>
)}
{/* <div className='h-full flex flex-col space-y-6 py-6 sm:space-y-0 sm:divide-y sm:divide-gray-200 sm:py-0'> */}
{status === FormStates.Info ? (
<InformationStep form={form}></InformationStep>
) : status === FormStates.DumbTextArea ? (
<DumbTextArea form={form}></DumbTextArea>
) : status === FormStates.Params ? (
<ParamStep form={form} confirmedValues={confirmedValues} setConfirmedValues={setConfirmedValues}>{fields}</ParamStep>
) : status === FormStates.ProcessStep ? (
<PostProcessStep form={form}>{fields}</PostProcessStep>
) : status === FormStates.Confirmation ? (
<ConfirmationStep form={form} />
) : (
<DispatchStep form={form} id={id} updateId={setFileId} onDropComplete={onDropComplete}/>
)}

<div className='flex-shrink-0 border-t border-gray-200 px-4 py-5 sm:px-6'>
<div className='flex justify-end space-x-3'>
<div className='flex space-x-3 flex-1'>
<input
type='number'
placeholder={'Number of Workers'}
className='rounded-md border-gray-300 shadow-sm focus:border-blue-500 sm:text-sm'
required
{...form.getInputProps('workers')}
/>
<Toggle
label={'Verbose?'}
onChange={() => {
form.setFieldValue('verbose', !form.values.verbose);
}}
/>
</div>
<button
type='button'
className='rounded-md border w-1/6 border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2'
onClick={
status === FormStates.Info ?
() => {
localStorage.removeItem('ID');
setFormState(-1);
<div className='flex-shrink-0 border-t border-gray-200 px-4 py-5 sm:px-6'>
<div className='flex justify-end space-x-3'>
<div className='flex space-x-3 flex-1'>
<input
type='number'
placeholder={'Number of Workers'}
className='rounded-md border-gray-300 shadow-sm focus:border-blue-500 sm:text-sm'
required
{...form.getInputProps('workers')}
/>
<Toggle
label={'Verbose?'}
onChange={() => {
form.setFieldValue('verbose', !form.values.verbose);
}}
/>
</div>
<button
type='button'
className='rounded-md border w-1/6 border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2'
onClick={
status === FormStates.Info ?
() => {
localStorage.removeItem('ID');
setFormState(-1);
} :
() => {
setStatus(status - 1);
}
}
>
{status === FormStates.Info ? 'Cancel' : 'Back'}
</button>
<button
className='rounded-md w-1/6 border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2'
{...(status === FormStates.Dispatch ?
{
type: 'submit', onClick: () => {
if (fileId) {
setFormState(-1);
localStorage.removeItem('ID');
setStatus(FormStates.Info);
console.log("ID WAS!");
console.log(id);
submitExperiment(form.values as any, session?.user?.id as string, fileId).then(async (json) => {
const expId = json['id'];
const response = await fetch(`/api/experiments/start/${expId}`, {
method: 'POST',
headers: new Headers({ 'Content-Type': 'application/json' }),
credentials: 'same-origin',
body: JSON.stringify({ id: expId }),
});
if(response.ok){
console.log(`experiment ${expId} started!`);
toast.success("Started experiment!", {duration: 1500});
}
else
{
toast.error("Failed to start experiment!", {duration: 1500});
}
})
}
else {
toast.error("No file selected!", {duration: 1500})
}
}
} :
() => {
setStatus(status - 1);
}
}
>
{status === FormStates.Info ? 'Cancel' : 'Back'}
</button>
{!(status === FormStates.Dispatch) && <button
className='rounded-md w-1/6 border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2'
{...(status === FormStates.Dispatch ?
{
type: 'submit', onClick: () => {
setFormState(-1);
localStorage.removeItem('ID');
setStatus(FormStates.Info);
}
} :
{
type: 'button',
onClick: () => setStatus(status + 1),
})}
>
{status === FormStates.Dispatch ? 'Dispatch' : 'Next'}
</button>}
{
type: 'button',
onClick: () => setStatus(status + 1),
})}
>
{status === FormStates.Dispatch ? 'Dispatch' : 'Next'}
</button>
</div>
</div>
</div>
</form>
</div>
</Transition.Child>
</form>
</div>
</Transition.Child>
</div>
</div>
</div>
</Dialog>
</Transition.Root>
</Dialog>
</Transition.Root>
</div>
);
};

Expand Down
Loading

0 comments on commit a036919

Please sign in to comment.