Skip to content

Commit 48c1da5

Browse files
itsdiy0itsdiy0
committed
feat: added an advanced button toggle to show advanced workflow parameters + small style modifications
1 parent f8e5fec commit 48c1da5

3 files changed

Lines changed: 83 additions & 55 deletions

File tree

‎frontend/src/workflow/ParameterSweepForm.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ export default function ParameterSweepForm({
2020
(key: keyof SweepValues) =>
2121
(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
2222
const raw = e.target.value;
23-
// allow empty string while typing, coerce later via AJV
2423
const parsed = raw === '' ? '' : Number(raw);
2524
onChange({ ...values, [key]: Number.isNaN(parsed) ? '' : parsed });
2625
};
@@ -34,7 +33,7 @@ export default function ParameterSweepForm({
3433
onChange={handleNum('start')}
3534
disabled={disabled}
3635
fullWidth
37-
inputProps={{ 'data-testid': 'sweep-start' }}
36+
size='small'
3837
/>
3938
<TextField
4039
label="Stop"
@@ -43,7 +42,7 @@ export default function ParameterSweepForm({
4342
onChange={handleNum('stop')}
4443
disabled={disabled}
4544
fullWidth
46-
inputProps={{ 'data-testid': 'sweep-stop' }}
45+
size='small'
4746
/>
4847
<TextField
4948
label="Step"
@@ -52,7 +51,7 @@ export default function ParameterSweepForm({
5251
onChange={handleNum('step')}
5352
disabled={disabled}
5453
fullWidth
55-
inputProps={{ 'data-testid': 'sweep-step' }}
54+
size='small'
5655
/>
5756
</Stack>
5857
);

‎frontend/src/workflow/SubmissionFormCOR.tsx‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,7 @@ const SubmissionFormCOR = (props: {
224224
props.onSubmit(visit, finalParams, (workflowName: string) => {
225225
setSubmittedWorkflowName(workflowName);
226226
setSubmittedVisit(visit);
227+
setErrorMessages([]);
227228
});
228229
};
229230

@@ -244,6 +245,17 @@ const SubmissionFormCOR = (props: {
244245

245246
<Divider />
246247
<Loader />
248+
249+
{errorMessages.length > 0 && (
250+
<Alert severity="error">
251+
<strong>Validation failed:</strong>
252+
<ul style={{ marginTop: 8 }}>
253+
{errorMessages.map((m, i) => (
254+
<li key={i} style={{ marginLeft: 16 }}>{m}</li>
255+
))}
256+
</ul>
257+
</Alert>
258+
)}
247259

248260
{submittedWorkflowName && submittedVisit && (
249261
<WorkflowStatus
@@ -287,21 +299,12 @@ const SubmissionFormCOR = (props: {
287299
onChange={setWfValues}
288300
/>
289301

290-
{/* Validation errors (shown only if submit fails) */}
291-
{errorMessages.length > 0 && (
292-
<Alert severity="error">
293-
<strong>Validation failed:</strong>
294-
<ul style={{ marginTop: 8 }}>
295-
{errorMessages.map((m, i) => (
296-
<li key={i} style={{ marginLeft: 16 }}>{m}</li>
297-
))}
298-
</ul>
299-
</Alert>
300-
)}
302+
303+
301304

302305
<Divider />
303306

304-
{/* Visit & Submit */}
307+
305308
<VisitInput
306309
visit={props.visit}
307310
onSubmit={doSubmit}

‎frontend/src/workflow/WorkflowParametersForm.tsx‎

Lines changed: 65 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
import React from 'react';
2-
import { Stack, TextField } from '@mui/material';
1+
import React, { useState } from 'react';
2+
import { Stack, TextField, Button, IconButton } from '@mui/material';
3+
import CloseIcon from '@mui/icons-material/Close'; // Import the close icon
4+
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; // Import the expand icon
35

46
export interface WorkflowParamsValues {
57
input: string;
@@ -18,61 +20,85 @@ export default function WorkflowParametersForm({
1820
onChange: (next: WorkflowParamsValues) => void;
1921
disabled?: boolean;
2022
}) {
23+
const [showAdvanced, setShowAdvanced] = useState(false);
24+
2125
return (
2226
<Stack direction="column" spacing={2}>
23-
<Stack direction="row" spacing={2}>
27+
<Stack direction="row" spacing={2} alignItems="center">
2428
<TextField
2529
label="Input Path"
2630
value={values.input ?? ''}
2731
onChange={e => onChange({ ...values, input: e.target.value })}
2832
disabled={disabled}
2933
fullWidth
30-
inputProps={{ 'data-testid': 'wf-input' }}
34+
size='small'
3135
/>
3236
<TextField
3337
label="Output Path"
3438
value={values.output ?? ''}
3539
onChange={e => onChange({ ...values, output: e.target.value })}
3640
disabled={disabled}
3741
fullWidth
38-
inputProps={{ 'data-testid': 'wf-output' }}
42+
size='small'
3943
/>
44+
{!showAdvanced ? (
45+
<Button
46+
variant="outlined"
47+
onClick={() => setShowAdvanced(true)}
48+
data-testid="wf-advanced-toggle"
49+
sx={{ flexShrink: 0, minWidth: '120px' }}
50+
startIcon={<ExpandMoreIcon />}
51+
>
52+
Advanced
53+
</Button>
54+
) : (
55+
<IconButton
56+
onClick={() => setShowAdvanced(false)}
57+
data-testid="wf-close-advanced"
58+
sx={{ flexShrink: 0, minWidth: '40px' }}
59+
>
60+
<CloseIcon />
61+
</IconButton>
62+
)}
4063
</Stack>
4164

42-
<Stack direction="row" spacing={2}>
43-
<TextField
44-
label="Number of Processes"
45-
type="number"
46-
value={values.nprocs}
47-
onChange={e =>
48-
onChange({
49-
...values,
50-
nprocs: e.target.value === '' ? '' : Number(e.target.value),
51-
})
52-
}
53-
disabled={disabled}
54-
fullWidth
55-
inputProps={{ min: 1, 'data-testid': 'wf-nprocs' }}
56-
/>
57-
<TextField
58-
label="Memory (e.g. 20Gi)"
59-
value={values.memory ?? ''}
60-
onChange={e => onChange({ ...values, memory: e.target.value })}
61-
disabled={disabled}
62-
fullWidth
63-
inputProps={{ 'data-testid': 'wf-memory' }}
64-
/>
65-
<TextField
66-
label="HTTomo Output Directory"
67-
value={values.httomo_outdir_name ?? ''}
68-
onChange={e =>
69-
onChange({ ...values, httomo_outdir_name: e.target.value })
70-
}
71-
disabled={disabled}
72-
fullWidth
73-
inputProps={{ 'data-testid': 'wf-outdir' }}
74-
/>
75-
</Stack>
65+
{/* Second Stack (Advanced Fields) */}
66+
{showAdvanced && (
67+
<Stack direction="row" spacing={2}>
68+
<TextField
69+
label="Number of Processes"
70+
type="number"
71+
value={values.nprocs}
72+
onChange={e =>
73+
onChange({
74+
...values,
75+
nprocs: e.target.value === '' ? '' : Number(e.target.value),
76+
})
77+
}
78+
disabled={disabled}
79+
fullWidth
80+
size='small'
81+
/>
82+
<TextField
83+
label="Memory"
84+
value={values.memory ?? ''}
85+
onChange={e => onChange({ ...values, memory: e.target.value })}
86+
disabled={disabled}
87+
fullWidth
88+
size='small'
89+
/>
90+
<TextField
91+
label="Output Directory Name"
92+
value={values.httomo_outdir_name ?? ''}
93+
onChange={e =>
94+
onChange({ ...values, httomo_outdir_name: e.target.value })
95+
}
96+
disabled={disabled}
97+
fullWidth
98+
size='small'
99+
/>
100+
</Stack>
101+
)}
76102
</Stack>
77103
);
78104
}

0 commit comments

Comments
 (0)