Skip to content

Commit 54f3b32

Browse files
authored
Merge pull request #481 from fractal-analytics-platform/improve-wft-form
Improved FormBuilder component and dataset history modal
2 parents 6aaf089 + bfe96dd commit 54f3b32

19 files changed

+917
-573
lines changed

CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
*Note: Numbers like (\#123) point to closed Pull Requests on the fractal-web repository.*
22

3+
# Unreleased
4+
5+
* Improved form builder used in workflow tasks without JSON Schema and in Meta properties tab (\#481).
6+
* Used collapsible sections in dataset history modal (\#481).
7+
38
# 1.0.3
49

510
* fixed issue in task version update when no arguments fix is needed (\#477).

playwright.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default defineConfig({
4747

4848
webServer: [
4949
{
50-
command: './tests/start-test-server.sh 2.0.0',
50+
command: './tests/start-test-server.sh 2.0.5',
5151
port: 8000,
5252
waitForPort: true,
5353
stdout: 'pipe',

src/lib/components/v2/projects/datasets/DatasetHistoryModal.svelte

Lines changed: 32 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -52,24 +52,39 @@
5252
<h5 class="modal-title">Dataset history</h5>
5353
</svelte:fragment>
5454
<svelte:fragment slot="body">
55-
<ul class="list-group">
56-
{#if dataset.history && Object.keys(dataset.history).length > 0}
57-
{#each Object.entries(dataset.history) as [_, value]}
58-
<li class="list-group-item text-bg-light">
59-
<span>
60-
Task "{value.workflowtask.is_legacy_task
61-
? value.workflowtask.task_legacy.name
62-
: value.workflowtask.task.name}", status "{value.status}"
63-
</span>
64-
</li>
65-
<li class="list-group-item text-break">
66-
<code><pre>{formatDatasetHistory(value)}</pre></code>
67-
</li>
55+
{#if dataset.history && Object.keys(dataset.history).length > 0}
56+
<div class="accordion" id="accordion-dataset-history">
57+
{#each Object.entries(dataset.history) as [index, value]}
58+
<div class="accordion-item">
59+
<h2 class="accordion-header">
60+
<button
61+
class="accordion-button collapsed"
62+
type="button"
63+
data-bs-toggle="collapse"
64+
data-bs-target="#collapse-dataset-history-{index}"
65+
aria-expanded="false"
66+
aria-controls="collapse-dataset-history-{index}"
67+
>
68+
Task "{value.workflowtask.is_legacy_task
69+
? value.workflowtask.task_legacy.name
70+
: value.workflowtask.task.name}", status "{value.status}"
71+
</button>
72+
</h2>
73+
<div
74+
id="collapse-dataset-history-{index}"
75+
class="accordion-collapse collapse"
76+
data-bs-parent="#accordion-dataset-history"
77+
>
78+
<div class="accordion-body">
79+
<code><pre>{formatDatasetHistory(value)}</pre></code>
80+
</div>
81+
</div>
82+
</div>
6883
{/each}
69-
{:else}
70-
<p>No history</p>
71-
{/if}
72-
</ul>
84+
</div>
85+
{:else}
86+
<p>No history</p>
87+
{/if}
7388
</svelte:fragment>
7489
</Modal>
7590

src/lib/components/v2/tasks/TaskInfoModal.svelte

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@
129129
aria-expanded="false"
130130
aria-controls="collapse-meta-non-parallel"
131131
>
132-
Meta non parallel
132+
Initialisation Meta
133133
</button>
134134
</h2>
135135
<div
@@ -147,7 +147,7 @@
147147
</div>
148148
{:else}
149149
<li class="list-group-item list-group-item-light fw-bold">
150-
Meta non parallel
150+
Initialisation Meta
151151
</li>
152152
<li class="list-group-item">-</li>
153153
{/if}
@@ -172,7 +172,7 @@
172172
aria-expanded="false"
173173
aria-controls="collapse-meta-parallel"
174174
>
175-
Meta parallel
175+
Compute Meta
176176
</button>
177177
</h2>
178178
<div
@@ -190,7 +190,7 @@
190190
</div>
191191
{:else}
192192
<li class="list-group-item list-group-item-light fw-bold">
193-
Meta parallel
193+
Compute Meta
194194
</li>
195195
<li class="list-group-item">-</li>
196196
{/if}

src/lib/components/v2/workflow/ArgumentsSchema.svelte

Lines changed: 54 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
import { page } from '$app/stores';
33
import JSchema from '$lib/components/v2/workflow/JSchema.svelte';
44
import { displayStandardErrorAlert } from '$lib/common/errors';
5-
import FormBuilder from './FormBuilder.svelte';
65
import ImportExportArgs from './ImportExportArgs.svelte';
76
import {
87
stripNullAndEmptyObjectsAndArrays,
98
stripSchemaProperties
109
} from '$lib/components/common/jschema/schema_management';
10+
import FormBuilder from './FormBuilder.svelte';
1111
1212
const SUPPORTED_SCHEMA_VERSIONS = ['pydantic_v1'];
1313
@@ -22,9 +22,21 @@
2222
let parallelSchemaComponent;
2323
let unsavedChangesParallel = false;
2424
let unsavedChangesNonParallel = false;
25+
26+
/** @type {FormBuilder|undefined} */
27+
let nonParallelFormBuilderComponent;
28+
/** @type {FormBuilder|undefined} */
29+
let parallelFormBuilderComponent;
30+
let unsavedChangesFormBuilderParallel = false;
31+
let unsavedChangesFormBuilderNonParallel = false;
32+
2533
let savingChanges = false;
2634
27-
$: unsavedChanges = unsavedChangesParallel || unsavedChangesNonParallel;
35+
$: unsavedChanges =
36+
unsavedChangesParallel ||
37+
unsavedChangesNonParallel ||
38+
unsavedChangesFormBuilderParallel ||
39+
unsavedChangesFormBuilderNonParallel;
2840
2941
$: isSchemaValid = argsSchemaVersionValid(
3042
workflowTask.is_legacy_task
@@ -36,6 +48,10 @@
3648
workflowTask.task_type === 'non_parallel' || workflowTask.task_type === 'compound';
3749
$: hasParallel = workflowTask.task_type === 'parallel' || workflowTask.task_type === 'compound';
3850
51+
$: argsSchemaNonParallel = workflowTask.is_legacy_task
52+
? null
53+
: workflowTask.task.args_schema_non_parallel;
54+
3955
$: argsSchemaParallel = workflowTask.is_legacy_task
4056
? workflowTask.task_legacy.args_schema
4157
: workflowTask.task.args_schema_parallel;
@@ -49,37 +65,40 @@
4965
nonParallelSchemaComponent?.validateArguments();
5066
parallelSchemaComponent?.validateArguments();
5167
} catch (err) {
52-
console.log(err);
53-
displayStandardErrorAlert(err, 'json-schema-validation-errors');
68+
console.error(err);
69+
displayStandardErrorAlert(err, 'task-args-validation-errors');
70+
return;
71+
}
72+
const invalidFormBuilderNonParallel =
73+
nonParallelFormBuilderComponent && !nonParallelFormBuilderComponent.validateArguments();
74+
const invalidFormBuilderParallel =
75+
parallelFormBuilderComponent && !parallelFormBuilderComponent.validateArguments();
76+
if (invalidFormBuilderNonParallel || invalidFormBuilderParallel) {
5477
return;
5578
}
5679
const payload = {};
5780
if (hasNonParallel) {
58-
payload.args_non_parallel = nonParallelSchemaComponent?.getArguments();
81+
if (nonParallelSchemaComponent) {
82+
payload.args_non_parallel = nonParallelSchemaComponent.getArguments();
83+
} else if (nonParallelFormBuilderComponent) {
84+
payload.args_non_parallel = nonParallelFormBuilderComponent.getArguments();
85+
}
5986
}
6087
if (hasParallel) {
61-
payload.args_parallel = parallelSchemaComponent?.getArguments();
88+
if (parallelSchemaComponent) {
89+
payload.args_parallel = parallelSchemaComponent.getArguments();
90+
} else if (parallelFormBuilderComponent) {
91+
payload.args_parallel = parallelFormBuilderComponent.getArguments();
92+
}
6293
}
6394
await handleSaveChanges(payload);
6495
}
6596
6697
export function discardChanges() {
6798
nonParallelSchemaComponent?.discardChanges(workflowTask.args_non_parallel);
6899
parallelSchemaComponent?.discardChanges(workflowTask.args_parallel);
69-
}
70-
71-
/**
72-
* @param {object} updatedEntry
73-
*/
74-
async function saveGenericFormEntryNonParallel(updatedEntry) {
75-
await handleSaveChanges({ args_non_parallel: updatedEntry });
76-
}
77-
78-
/**
79-
* @param {object} updatedEntry
80-
*/
81-
async function saveGenericFormEntryParallel(updatedEntry) {
82-
await handleSaveChanges({ args_parallel: updatedEntry });
100+
nonParallelFormBuilderComponent?.discardChanges(workflowTask.args_non_parallel);
101+
parallelFormBuilderComponent?.discardChanges(workflowTask.args_parallel);
83102
}
84103
85104
/**
@@ -121,7 +140,7 @@
121140
}
122141
onWorkflowTaskUpdated(result);
123142
} else {
124-
displayStandardErrorAlert(await result, 'json-schema-validation-errors');
143+
displayStandardErrorAlert(await result, 'task-args-validation-errors');
125144
}
126145
savingChanges = false;
127146
}
@@ -159,10 +178,10 @@
159178
</script>
160179
161180
<div id="workflow-arguments-schema-panel">
162-
<div id="json-schema-validation-errors" />
181+
<div id="task-args-validation-errors" />
163182
{#if workflowTask.task_type === 'non_parallel' || workflowTask.task_type === 'compound'}
164-
{#if hasNonParallelArgs && hasParallelArgs}
165-
<h5 class="ps-2 mt-3">Initialisation Parameters</h5>
183+
{#if (hasNonParallelArgs && hasParallelArgs) || (workflowTask.task_type === 'compound' && !workflowTask.is_legacy_task && !workflowTask.task.args_schema_non_parallel)}
184+
<h5 class="ps-2 mt-3">Initialisation Arguments</h5>
166185
{/if}
167186
{#if !workflowTask.is_legacy_task && workflowTask.task.args_schema_non_parallel && isSchemaValid}
168187
<div class="args-list">
@@ -176,20 +195,20 @@
176195
</div>
177196
{:else}
178197
<div>
179-
<span id="argsPropertiesFormError" />
180198
<FormBuilder
181-
entry={workflowTask.args_non_parallel}
182-
updateEntry={saveGenericFormEntryNonParallel}
199+
args={workflowTask.args_non_parallel}
200+
bind:this={nonParallelFormBuilderComponent}
201+
bind:unsavedChanges={unsavedChangesFormBuilderNonParallel}
183202
/>
184203
</div>
185204
{/if}
186205
{/if}
187-
{#if hasNonParallelArgs && hasParallelArgs}
206+
{#if (hasNonParallelArgs && hasParallelArgs) || (workflowTask.task_type === 'compound' && !argsSchemaParallel && !workflowTask.is_legacy_task && !workflowTask.task.args_schema_non_parallel)}
188207
<hr />
189208
{/if}
190209
{#if workflowTask.task_type === 'parallel' || workflowTask.task_type === 'compound'}
191-
{#if hasParallelArgs && hasNonParallelArgs}
192-
<h5 class="ps-2 mt-3">Compute Parameters</h5>
210+
{#if (hasParallelArgs && hasNonParallelArgs) || (workflowTask.task_type === 'compound' && !argsSchemaParallel)}
211+
<h5 class="ps-2 mt-3">Compute Arguments</h5>
193212
{/if}
194213
{#if argsSchemaParallel && isSchemaValid}
195214
<div class="args-list">
@@ -203,15 +222,15 @@
203222
</div>
204223
{:else}
205224
<div class="mb-3">
206-
<span id="argsPropertiesFormError" />
207225
<FormBuilder
208-
entry={workflowTask.args_parallel}
209-
updateEntry={saveGenericFormEntryParallel}
226+
args={workflowTask.args_parallel}
227+
bind:this={parallelFormBuilderComponent}
228+
bind:unsavedChanges={unsavedChangesFormBuilderParallel}
210229
/>
211230
</div>
212231
{/if}
213232
{/if}
214-
{#if !hasNonParallelArgs && !hasParallelArgs}
233+
{#if !hasNonParallelArgs && !hasParallelArgs && (argsSchemaParallel || argsSchemaNonParallel)}
215234
<p class="mt-3 ps-3">No arguments</p>
216235
{/if}
217236
<div class="d-flex jschema-controls-bar p-3">
@@ -220,7 +239,7 @@
220239
onImport={handleSaveChanges}
221240
exportDisabled={unsavedChanges || savingChanges}
222241
/>
223-
{#if ((!workflowTask.is_legacy_task && workflowTask.task.args_schema_non_parallel) || argsSchemaParallel) && isSchemaValid}
242+
{#if isSchemaValid || nonParallelFormBuilderComponent || parallelFormBuilderComponent}
224243
<div>
225244
<button
226245
class="btn btn-warning"

0 commit comments

Comments
 (0)