Skip to content

Commit 3349f34

Browse files
zonia3000zonia3000
committed
Improved run workflow modal layout
1 parent c566bdf commit 3349f34

File tree

1 file changed

+93
-105
lines changed

1 file changed

+93
-105
lines changed

‎src/lib/components/v2/workflow/RunWorkflowModal.svelte‎

Lines changed: 93 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -406,7 +406,7 @@
406406
});
407407
</script>
408408
409-
<Modal id="runWorkflowModal" centered={true} bind:this={modal} fullscreen={true} scrollable={true}>
409+
<Modal id="runWorkflowModal" centered={true} bind:this={modal} size="xl" scrollable={true}>
410410
<svelte:fragment slot="header">
411411
<h5 class="modal-title">
412412
{#if mode === 'run'}
@@ -481,117 +481,49 @@
481481
</span>
482482
</div>
483483
{/if}
484-
<div class="mb-3 has-validation">
485-
<label for="firstTaskIndex" class="form-label">
486-
{#if mode === 'continue'}
487-
First task (Required)
488-
{:else}
489-
First task (Optional)
490-
{/if}
491-
</label>
492-
<select
493-
name="firstTaskIndex"
494-
id="firstTaskIndex"
495-
class="form-select"
496-
disabled={checkingConfiguration}
497-
bind:value={firstTaskIndex}
498-
on:change={firstTaskIndexChanged}
499-
class:is-invalid={mode === 'continue' && firstTaskIndex === undefined}
500-
>
501-
<option value={undefined}>Select first task</option>
502-
{#each workflow.task_list as wft}
503-
<option value={wft.order}>{wft.task.name}</option>
504-
{/each}
505-
</select>
506-
<span class="invalid-feedback"> The first task is required </span>
507-
</div>
508-
<div class="mb-3">
509-
<label for="lastTaskIndex" class="form-label">Last task (Optional)</label>
510-
<select
511-
name="lastTaskIndex"
512-
id="lastTaskIndex"
513-
class="form-select"
514-
disabled={checkingConfiguration}
515-
bind:value={lastTaskIndex}
516-
>
517-
<option value={undefined}>Select last task</option>
518-
{#each workflow.task_list as wft}
519-
{#if firstTaskIndex === undefined || wft.order >= firstTaskIndex}
484+
<div class="row mb-3">
485+
<div class="col has-validation">
486+
<label for="firstTaskIndex" class="form-label"> Start workflow at </label>
487+
<select
488+
name="firstTaskIndex"
489+
id="firstTaskIndex"
490+
class="form-select"
491+
disabled={checkingConfiguration}
492+
bind:value={firstTaskIndex}
493+
on:change={firstTaskIndexChanged}
494+
class:is-invalid={mode === 'continue' && firstTaskIndex === undefined}
495+
>
496+
<option value={undefined}>Select first task</option>
497+
{#each workflow.task_list as wft}
520498
<option value={wft.order}>{wft.task.name}</option>
521-
{/if}
522-
{/each}
523-
</select>
524-
</div>
525-
<div class="accordion" id="accordion-run-workflow">
526-
<div class="accordion-item">
527-
<h2 class="accordion-header">
528-
<button
529-
class="accordion-button collapsed"
530-
type="button"
531-
data-bs-toggle="collapse"
532-
data-bs-target="#collapse-workflow-advanced-options"
533-
aria-expanded="false"
534-
aria-controls="collapse-workflow-advanced-options"
535-
>
536-
Advanced options
537-
</button>
538-
</h2>
539-
<div
540-
id="collapse-workflow-advanced-options"
541-
class="accordion-collapse collapse"
542-
data-bs-parent="#accordion-run-workflow"
499+
{/each}
500+
</select>
501+
<span class="invalid-feedback"> The first task is required </span>
502+
</div>
503+
<div class="col">
504+
<label for="lastTaskIndex" class="form-label">(Optional) Stop workflow early</label>
505+
<select
506+
name="lastTaskIndex"
507+
id="lastTaskIndex"
508+
class="form-select"
509+
disabled={checkingConfiguration}
510+
bind:value={lastTaskIndex}
543511
>
544-
<div class="accordion-body">
545-
<div class="mb-3">
546-
<label for="workerInit" class="form-label">Worker initialization (Optional)</label>
547-
<textarea
548-
name="workerInit"
549-
id="workerInit"
550-
class="form-control font-monospace"
551-
rows="5"
552-
disabled={checkingConfiguration}
553-
bind:value={workerInitControl}
554-
/>
555-
</div>
556-
{#if slurmAccounts.length > 0}
557-
<div class="mb-3">
558-
<div class="form-check">
559-
<input
560-
class="form-check-input"
561-
type="checkbox"
562-
id="setSlurmAccount"
563-
bind:checked={setSlurmAccount}
564-
/>
565-
<label class="form-check-label" for="setSlurmAccount">
566-
Set SLURM account
567-
</label>
568-
</div>
569-
</div>
570-
{#if setSlurmAccount}
571-
<div class="mb-3">
572-
<label for="slurmAccount" class="form-label">SLURM account</label>
573-
<select
574-
name="slurmAccount"
575-
id="slurmAccount"
576-
class="form-select"
577-
disabled={checkingConfiguration}
578-
bind:value={slurmAccount}
579-
>
580-
{#each slurmAccounts as account}
581-
<option>{account}</option>
582-
{/each}
583-
</select>
584-
</div>
585-
{/if}
512+
<option value={undefined}>Select last task</option>
513+
{#each workflow.task_list as wft}
514+
{#if firstTaskIndex === undefined || wft.order >= firstTaskIndex}
515+
<option value={wft.order}>{wft.task.name}</option>
586516
{/if}
587-
</div>
588-
</div>
517+
{/each}
518+
</select>
589519
</div>
520+
</div>
521+
<div class="accordion mb-2" id="accordion-run-workflow">
590522
{#if imagePage && selectedDataset && showImageList}
591523
<div class="accordion-item">
592524
<h2 class="accordion-header">
593525
<button
594-
class="accordion-button collapsed"
526+
class="accordion-button"
595527
type="button"
596528
data-bs-toggle="collapse"
597529
data-bs-target="#collapse-workflow-image-list"
@@ -603,7 +535,7 @@
603535
</h2>
604536
<div
605537
id="collapse-workflow-image-list"
606-
class="accordion-collapse collapse"
538+
class="accordion-collapse collapse show"
607539
data-bs-parent="#accordion-run-workflow"
608540
>
609541
<div class="accordion-body">
@@ -642,6 +574,62 @@
642574
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" />
643575
{/if}
644576
</div>
577+
<div class="clearfix mb-1">
578+
<button
579+
class="btn btn-light float-end"
580+
type="button"
581+
data-bs-toggle="collapse"
582+
data-bs-target="#collapseAdvancedOptions"
583+
aria-expanded="false"
584+
aria-controls="collapseAdvancedOptions"
585+
>
586+
Advanced options
587+
</button>
588+
</div>
589+
<div class="collapse clearfix" id="collapseAdvancedOptions">
590+
<div class="card card-body">
591+
<div class="mb-3">
592+
<label for="workerInit" class="form-label">Worker initialization (Optional)</label>
593+
<textarea
594+
name="workerInit"
595+
id="workerInit"
596+
class="form-control font-monospace"
597+
rows="5"
598+
disabled={checkingConfiguration}
599+
bind:value={workerInitControl}
600+
/>
601+
</div>
602+
{#if slurmAccounts.length > 0}
603+
<div class="mb-3">
604+
<div class="form-check">
605+
<input
606+
class="form-check-input"
607+
type="checkbox"
608+
id="setSlurmAccount"
609+
bind:checked={setSlurmAccount}
610+
/>
611+
<label class="form-check-label" for="setSlurmAccount"> Set SLURM account </label>
612+
</div>
613+
</div>
614+
{#if setSlurmAccount}
615+
<div class="mb-3">
616+
<label for="slurmAccount" class="form-label">SLURM account</label>
617+
<select
618+
name="slurmAccount"
619+
id="slurmAccount"
620+
class="form-select"
621+
disabled={checkingConfiguration}
622+
bind:value={slurmAccount}
623+
>
624+
{#each slurmAccounts as account}
625+
<option>{account}</option>
626+
{/each}
627+
</select>
628+
</div>
629+
{/if}
630+
{/if}
631+
</div>
632+
</div>
645633
{#if checkingConfiguration}
646634
<hr />
647635
<h6 class="mt-3">Applied filters</h6>

0 commit comments

Comments
 (0)