Skip to content

Commit a036919

Browse files
rhit-windsorsrhit-windsors
committed
change dispatch step
1 parent a574df8 commit a036919

File tree

12 files changed

+390
-202
lines changed

12 files changed

+390
-202
lines changed

‎apps/backend/app.py

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,8 +102,8 @@ def check_mongo():
102102
@flaskApp.get("/downloadExpFile")
103103
def download_exp_file():
104104
try:
105-
experiment_id = request.args.get('expId', default='', type=str)
106-
file_data = download_experiment_file(experiment_id, mongoClient)
105+
file_id = request.args.get('fileId', default='', type=str)
106+
file_data = download_experiment_file(file_id, mongoClient)
107107
file_stream = io.BytesIO(file_data)
108108
return send_file(file_stream, as_attachment=True, download_name="experiment_file", mimetype="application/octet-stream")
109109
except Exception:

‎apps/backend/modules/mongo.py

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,12 +70,12 @@ def insertExperiments():
7070
# keep trying
7171
check_insert_default_experiments(mongoClient)
7272

73-
def download_experiment_file(expId: str, mongoClient: pymongo.MongoClient):
73+
def download_experiment_file(file_id: str, mongoClient: pymongo.MongoClient):
7474
# we are going to have to get the binary data from mongo here
7575
# setup the bucket
7676
db = mongoClient["gladosdb"]
7777
bucket = GridFSBucket(db, bucket_name='fileBucket')
78-
files = bucket.find({"metadata.expId": expId}).to_list()
78+
files = bucket.find({"_id": ObjectId(file_id)}).to_list() # type: ignore
7979
num_files = 0
8080
file_name = ""
8181
for file in files:

‎apps/frontend/app/components/auth/SignUpModal.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,8 @@ export const SignUpModal = ({ afterSignUp }) => {
7070
{/* For dev testing!!! */}
7171
{/* <button onClick={() => {signIn("keycloak", {redirectTo: "/dashboard"})}}>Keycloak</button> */}
7272
</div>
73+
{/* For dev testing!!! */}
74+
<button onClick={() => {signIn("keycloak", {redirectTo: "/dashboard"})}}>Keycloak</button>
7375
</div>
7476
</div>
7577
<div className='px-4 py-6 bg-gray-50 border-t-2 border-gray-200 sm:px-10'>

‎apps/frontend/app/components/flows/AddExperiment/NewExperiment.tsx

Lines changed: 147 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,11 @@ import { ParamStep } from './stepComponents/ParamStep';
1111
import { PostProcessStep } from './stepComponents/PostProcessStep';
1212
import { ConfirmationStep } from './stepComponents/ConfirmationStep';
1313
import { DumbTextArea } from './stepComponents/DumbTextAreaStep';
14-
import { DB_COLLECTION_EXPERIMENTS } from '../../../../lib/db';
14+
import { DB_COLLECTION_EXPERIMENTS, submitExperiment } from '../../../../lib/db';
1515

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

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

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

6466

6567
const NewExperiment = ({ formState, setFormState, copyID, setCopyId, ...rest }) => {
68+
const { data: session } = useSession();
69+
6670
const form = useForm({
6771
// TODO make this follow the schema as closely as we can
6872
initialValues: {
@@ -130,6 +134,8 @@ const NewExperiment = ({ formState, setFormState, copyID, setCopyId, ...rest })
130134
setStatus(FormStates.Info);
131135
};
132136

137+
const [fileId, setFileId] = useState(null);
138+
133139
useLayoutEffect(() => {
134140
if (formState === FormStates.Info) {
135141
setOpen(false);
@@ -141,124 +147,155 @@ const NewExperiment = ({ formState, setFormState, copyID, setCopyId, ...rest })
141147
}
142148
}, [formState]); // TODO adding 'form' causes an update loop
143149

150+
useEffect(() => {
151+
console.log("FileID", fileId);
152+
}, [fileId]);
153+
144154
return (
145-
<Transition.Root show={open} as={Fragment}>
146-
<Dialog
147-
as='div'
148-
className='fixed inset-0 overflow-hidden'
149-
onClose={() => setFormState(0)}
150-
>
151-
<div className='absolute inset-0 overflow-hidden'>
152-
<Dialog.Overlay className='absolute inset-0' />
155+
<div>
156+
<Toaster />
157+
<Transition.Root show={open} as={Fragment}>
158+
<Dialog
159+
as='div'
160+
className='fixed inset-0 overflow-hidden'
161+
onClose={() => setFormState(0)}
162+
>
163+
<div className='absolute inset-0 overflow-hidden'>
164+
<Dialog.Overlay className='absolute inset-0' />
153165

154-
<div className='pointer-events-none fixed inset-y-0 right-0 flex pl-20 sm:pl-16'>
155-
<Transition.Child
156-
as={Fragment}
157-
enter='transform transition ease-in-out duration-500 sm:duration-700'
158-
enterFrom='translate-x-full'
159-
enterTo='translate-x-0'
160-
leave='transform transition ease-in-out duration-500 sm:duration-700'
161-
leaveFrom='translate-x-0'
162-
leaveTo='translate-x-full'
163-
>
164-
<div className='pointer-events-auto w-screen max-w-5xl'>
165-
<form
166-
className='flex h-full flex-col bg-white shadow-xl'
167-
onSubmit={form.onSubmit((values) => {
168-
})}
169-
>
170-
<div className='flex flex-col'>
171-
<div className='bg-gray-50 px-4 py-6 sm:px-6'>
172-
<div className='flex items-center align-center justify-between space-x-3'>
173-
<Steps
174-
steps={['Information', 'Parameters', 'User Defined Constants', 'Post Process', 'Confirmation', 'Dispatch'].map(
175-
(step, idx) => {
176-
return {
177-
id: idx + 1,
178-
name: step,
179-
status: status < idx ? 'upcoming' : 'complete',
180-
};
181-
}
182-
)}
183-
/>
166+
<div className='pointer-events-none fixed inset-y-0 right-0 flex pl-20 sm:pl-16'>
167+
<Transition.Child
168+
as={Fragment}
169+
enter='transform transition ease-in-out duration-500 sm:duration-700'
170+
enterFrom='translate-x-full'
171+
enterTo='translate-x-0'
172+
leave='transform transition ease-in-out duration-500 sm:duration-700'
173+
leaveFrom='translate-x-0'
174+
leaveTo='translate-x-full'
175+
>
176+
<div className='pointer-events-auto w-screen max-w-5xl'>
177+
<form
178+
className='flex h-full flex-col bg-white shadow-xl'
179+
onSubmit={form.onSubmit((values) => {
180+
})}
181+
>
182+
<div className='flex flex-col'>
183+
<div className='bg-gray-50 px-4 py-6 sm:px-6'>
184+
<div className='flex items-center align-center justify-between space-x-3'>
185+
<Steps
186+
steps={['Information', 'Parameters', 'User Defined Constants', 'Post Process', 'Confirmation', 'Dispatch'].map(
187+
(step, idx) => {
188+
return {
189+
id: idx + 1,
190+
name: step,
191+
status: status < idx ? 'upcoming' : 'complete',
192+
};
193+
}
194+
)}
195+
/>
196+
</div>
184197
</div>
185198
</div>
186-
</div>
187199

188-
{/* <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'> */}
189-
{status === FormStates.Info ? (
190-
<InformationStep form={form}></InformationStep>
191-
) : status === FormStates.DumbTextArea ? (
192-
<DumbTextArea form={form}></DumbTextArea>
193-
) : status === FormStates.Params ? (
194-
<ParamStep form={form} confirmedValues={confirmedValues} setConfirmedValues={setConfirmedValues}>{fields}</ParamStep>
195-
) : status === FormStates.ProcessStep ? (
196-
<PostProcessStep form={form}>{fields}</PostProcessStep>
197-
) : status === FormStates.Confirmation ? (
198-
<ConfirmationStep form={form} />
199-
) : (
200-
<DispatchStep form={form} id={id} onDropComplete={onDropComplete}/>
201-
)}
200+
{/* <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'> */}
201+
{status === FormStates.Info ? (
202+
<InformationStep form={form}></InformationStep>
203+
) : status === FormStates.DumbTextArea ? (
204+
<DumbTextArea form={form}></DumbTextArea>
205+
) : status === FormStates.Params ? (
206+
<ParamStep form={form} confirmedValues={confirmedValues} setConfirmedValues={setConfirmedValues}>{fields}</ParamStep>
207+
) : status === FormStates.ProcessStep ? (
208+
<PostProcessStep form={form}>{fields}</PostProcessStep>
209+
) : status === FormStates.Confirmation ? (
210+
<ConfirmationStep form={form} />
211+
) : (
212+
<DispatchStep form={form} id={id} updateId={setFileId} onDropComplete={onDropComplete}/>
213+
)}
202214

203-
<div className='flex-shrink-0 border-t border-gray-200 px-4 py-5 sm:px-6'>
204-
<div className='flex justify-end space-x-3'>
205-
<div className='flex space-x-3 flex-1'>
206-
<input
207-
type='number'
208-
placeholder={'Number of Workers'}
209-
className='rounded-md border-gray-300 shadow-sm focus:border-blue-500 sm:text-sm'
210-
required
211-
{...form.getInputProps('workers')}
212-
/>
213-
<Toggle
214-
label={'Verbose?'}
215-
onChange={() => {
216-
form.setFieldValue('verbose', !form.values.verbose);
217-
}}
218-
/>
219-
</div>
220-
<button
221-
type='button'
222-
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'
223-
onClick={
224-
status === FormStates.Info ?
225-
() => {
226-
localStorage.removeItem('ID');
227-
setFormState(-1);
215+
<div className='flex-shrink-0 border-t border-gray-200 px-4 py-5 sm:px-6'>
216+
<div className='flex justify-end space-x-3'>
217+
<div className='flex space-x-3 flex-1'>
218+
<input
219+
type='number'
220+
placeholder={'Number of Workers'}
221+
className='rounded-md border-gray-300 shadow-sm focus:border-blue-500 sm:text-sm'
222+
required
223+
{...form.getInputProps('workers')}
224+
/>
225+
<Toggle
226+
label={'Verbose?'}
227+
onChange={() => {
228+
form.setFieldValue('verbose', !form.values.verbose);
229+
}}
230+
/>
231+
</div>
232+
<button
233+
type='button'
234+
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'
235+
onClick={
236+
status === FormStates.Info ?
237+
() => {
238+
localStorage.removeItem('ID');
239+
setFormState(-1);
240+
} :
241+
() => {
242+
setStatus(status - 1);
243+
}
244+
}
245+
>
246+
{status === FormStates.Info ? 'Cancel' : 'Back'}
247+
</button>
248+
<button
249+
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'
250+
{...(status === FormStates.Dispatch ?
251+
{
252+
type: 'submit', onClick: () => {
253+
if (fileId) {
254+
setFormState(-1);
255+
localStorage.removeItem('ID');
256+
setStatus(FormStates.Info);
257+
console.log("ID WAS!");
258+
console.log(id);
259+
submitExperiment(form.values as any, session?.user?.id as string, fileId).then(async (json) => {
260+
const expId = json['id'];
261+
const response = await fetch(`/api/experiments/start/${expId}`, {
262+
method: 'POST',
263+
headers: new Headers({ 'Content-Type': 'application/json' }),
264+
credentials: 'same-origin',
265+
body: JSON.stringify({ id: expId }),
266+
});
267+
if(response.ok){
268+
console.log(`experiment ${expId} started!`);
269+
toast.success("Started experiment!", {duration: 1500});
270+
}
271+
else
272+
{
273+
toast.error("Failed to start experiment!", {duration: 1500});
274+
}
275+
})
276+
}
277+
else {
278+
toast.error("No file selected!", {duration: 1500})
279+
}
280+
}
228281
} :
229-
() => {
230-
setStatus(status - 1);
231-
}
232-
}
233-
>
234-
{status === FormStates.Info ? 'Cancel' : 'Back'}
235-
</button>
236-
{!(status === FormStates.Dispatch) && <button
237-
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'
238-
{...(status === FormStates.Dispatch ?
239-
{
240-
type: 'submit', onClick: () => {
241-
setFormState(-1);
242-
localStorage.removeItem('ID');
243-
setStatus(FormStates.Info);
244-
}
245-
} :
246-
{
247-
type: 'button',
248-
onClick: () => setStatus(status + 1),
249-
})}
250-
>
251-
{status === FormStates.Dispatch ? 'Dispatch' : 'Next'}
252-
</button>}
282+
{
283+
type: 'button',
284+
onClick: () => setStatus(status + 1),
285+
})}
286+
>
287+
{status === FormStates.Dispatch ? 'Dispatch' : 'Next'}
288+
</button>
289+
</div>
253290
</div>
254-
</div>
255-
</form>
256-
</div>
257-
</Transition.Child>
291+
</form>
292+
</div>
293+
</Transition.Child>
294+
</div>
258295
</div>
259-
</div>
260-
</Dialog>
261-
</Transition.Root>
296+
</Dialog>
297+
</Transition.Root>
298+
</div>
262299
);
263300
};
264301

0 commit comments

Comments
 (0)