[WIP] Workflow Run Form Enhancements #19294

ahmedhamidawan · 2024-12-09T20:54:57Z

Description from commit f77b387

This drastically changes the styling of FormElements as they have badges (or full colored headers) along with title sections, indicating current status of a step. Each step is in a card like style.

The variant for what type of FormData option it currently is has text now, letting the user clearly know whether they are selecting a single dataset, multiple etc.

After a "browse section" in the FormData component, we have a tabs section which shows the users the current selected file(s), as well as providing options for uploading/creating collections etc in other tabs.

Note: Towards the end of this I show an alternate implementation for each step header, where we have a badge instead of the whole header being colored:

simplified_wf_run_2.mp4

Initial version screencast which showcases the graph view for the run form:

simplified_wf_run.mp4

How to test the changes?

(Select all options that apply)

I've included appropriate automated tests.
This is a refactoring of components with existing test coverage.
Instructions for manual testing are as follows:
1. [add testing steps and prerequisites here if you didn't write automated tests covering all your changes]

License

I agree to license these and all my past contributions to the core galaxy codebase under the MIT license.

mvdbeek · 2024-12-10T11:43:57Z

I don't think the split view is a good idea. This will never work for production-sized workflows and makes the whole submission harder to understand. If there is a side-panel control option (one that hides the activity bar and history) I would split that out as its own enhancement, and one that we'd probably want to be able to set via the landing request API as well.

ahmedhamidawan · 2025-01-20T23:59:12Z

Some updates made here, a screencast has been added to the main description

ahmedhamidawan · 2025-01-21T01:48:06Z

There is also this version where it is a top down + graph view, where you fill each input one by one:

simplified_wf_run_top_down.mp4

mvdbeek · 2025-01-21T14:18:28Z

The wizard like fill in menu is great, the graph however is not useful and should only be shown to advanced users on the click of a button or a toggle. For a good workflow the graph should never be needed, and if you're debugging an existing workflow I think you want the entire available screen estate.

ahmedhamidawan · 2025-01-21T15:25:14Z

Thanks for taking a look! Yes, the graph is only viewable with a toggle if needed. And I see the point about not needing the graph for context for a very good workflow.

A minor point:

Do we like this badge styling for current step status?: (👍 to +1 this)

Or these fully colored headers?: (🚀 to +1 this)

bgruening · 2025-01-21T16:19:49Z

Humans are often not very pragmatic but often like to see nice, coloful things and get an overview that looks awesome. If we link to this run-page from BRC and similar sites, I think it is a very nice feature to show the workflow by default - even if its just bling bling. We can still hide it with a button and safe this user-choice imho.

mvdbeek · 2025-01-21T16:48:25Z

this run-page from BRC and similar sites, I think it is a very nice feature to show the workflow by default -

I don't mind making this an option, but BRC is a good example where this should definitely not be shown.

ahmedhamidawan · 2025-01-21T16:51:31Z

Right now, ONLY IF hide_panels=true is in the route query, we do initialize the run form with showGraph = true by default, since we know we have the space for both the inputs and the graph, but for ALL other cases, the graph is hidden and there is a toggle at the top which allows you to show/hide it and IF shown, allows for an additional toggle for top-down vs side by side view.

mvdbeek · 2025-01-21T17:23:51Z

That's an unfortunate coupling, we don't need panel or graph in BRC. I would much prefer if the graph is never shown by default, this just makes running the workflow much more complex than it needs to be.

ahmedhamidawan · 2025-01-23T22:58:44Z

README in Run Form:

In the latest commit I've added a README section only for dockstore workflows from IWC like so:

simplified_wf_run_READMEs.mp4

just syncs the active node id with the graph for now

The input values are synced with the graph

- We show the appropriate, typed step description for unpopulated or errored steps on the `WorkflowRunGraph` - Changed the `stepValidations` object to an array of `[index, msg]` since we can use the return of `validateInputs` as is, and hence, track only the latest received error message.

in `FormDisplay`

- This drastically changes the styling of `FormElement`s as they have badges (or full colored headers) along with title sections, indicating current status of a step. Each step is in a card like style. - The variant for what type of `FormData` option it currently is has text now, letting the user clearly know whether they are selecting a single dataset, multiple etc. - After a "browse section" in the `FormData` component, we have a tabs section which shows the users the current selected file(s), as well as providing options for uploading/creating collections etc in other tabs.

and improve styling and positioning of the side by side graph view

Fixes galaxyproject#18815 ... at least, as far as being able to drag and drop to individual workflow steps in the run form is concerned.

The function wasn't considering case where `eventStore.multipleDragData === true`.

ahmedhamidawan · 2025-02-04T16:44:46Z

From UI/UX meeting:

Move accepted formats to header
Make step header shorter in height
Revert to badge styling for step state
By default, hide FormDataWorkflowRunTabs
- Change it from tabs to just the uploader/creator
- IMO, move current value outside of it (above it)
- Put a toggle (on the right of the form selector?) to expand the uploader/creator below
Break PR down into smaller iterations...

When you switch from singular to multiple variant, the `currentValue` variable can get the same dataset/collection/value twice

ahmedhamidawan added planning area/UI-UX area/workflows status/needs feedback labels Dec 9, 2024

ahmedhamidawan force-pushed the simplified_wf_run branch from 1554aa1 to 9cade22 Compare January 14, 2025 17:42

ahmedhamidawan linked an issue Jan 23, 2025 that may be closed by this pull request

Enable dropping files into data and collection inputs #18815

Open

ahmedhamidawan force-pushed the simplified_wf_run branch from 569625b to a25fad2 Compare January 29, 2025 18:26

ahmedhamidawan added 13 commits January 30, 2025 20:09

draft for simplified workflow run

a72e636

just syncs the active node id with the graph for now

have a functioning side by side inputs w/graph run form

dd0a7ff

The input values are synced with the graph

add color step NodeInvocationText

8834ba9

improve scroll behavior and add scrolling for activeNodeId

5f72b38

in `FormDisplay`

improve alert in FormNumber and disallow non number/float input

8c35c83

allow notModal option for collection creator

be36694

improve step description for run graph

9f3a1b8

change fixedHeight prop in WorkflowGraph to a number

6bdd998

add/adjust view simplified vs advanced workflow run form

32499df

add a topDown version of workflow run graph

b2ec421

and improve styling and positioning of the side by side graph view

add drag and drop to FormData inputs

298793f

Fixes galaxyproject#18815 ... at least, as far as being able to drag and drop to individual workflow steps in the run form is concerned.

ahmedhamidawan added 7 commits January 30, 2025 20:10

if dockstore imported IWC workflow, show README in run form

78eeef0

refactor STEP_DESCRIPTIONS into a const, add SelectToolParameter

3803b60

remove temporary option for a badge header vs no badge; keeping no badge

cabc07d

add popover option for FormDataExtensions

710dab6

add box-shadow to workflow run form element

3bd366d

fix onDragEnter for FormData

914e30c

The function wasn't considering case where `eventStore.multipleDragData === true`.

add uploadConfigurations composable, return upload to FormData

7622468

ahmedhamidawan force-pushed the simplified_wf_run branch from a25fad2 to 7622468 Compare January 31, 2025 02:11

prevent currentValue from having duplicate items in FormData

198f158

When you switch from singular to multiple variant, the `currentValue` variable can get the same dataset/collection/value twice

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Workflow Run Form Enhancements #19294

[WIP] Workflow Run Form Enhancements #19294

ahmedhamidawan commented Dec 9, 2024 •

edited

Loading

mvdbeek commented Dec 10, 2024 •

edited

Loading

ahmedhamidawan commented Jan 20, 2025

ahmedhamidawan commented Jan 21, 2025

mvdbeek commented Jan 21, 2025

ahmedhamidawan commented Jan 21, 2025 •

edited

Loading

bgruening commented Jan 21, 2025

mvdbeek commented Jan 21, 2025

ahmedhamidawan commented Jan 21, 2025

mvdbeek commented Jan 21, 2025

ahmedhamidawan commented Jan 23, 2025

ahmedhamidawan commented Feb 4, 2025

[WIP] Workflow Run Form Enhancements #19294

Are you sure you want to change the base?

[WIP] Workflow Run Form Enhancements #19294

Conversation

ahmedhamidawan commented Dec 9, 2024 • edited Loading

Initial version screencast which showcases the graph view for the run form:

How to test the changes?

License

mvdbeek commented Dec 10, 2024 • edited Loading

ahmedhamidawan commented Jan 20, 2025

ahmedhamidawan commented Jan 21, 2025

mvdbeek commented Jan 21, 2025

ahmedhamidawan commented Jan 21, 2025 • edited Loading

bgruening commented Jan 21, 2025

mvdbeek commented Jan 21, 2025

ahmedhamidawan commented Jan 21, 2025

mvdbeek commented Jan 21, 2025

ahmedhamidawan commented Jan 23, 2025

README in Run Form:

ahmedhamidawan commented Feb 4, 2025

ahmedhamidawan commented Dec 9, 2024 •

edited

Loading

mvdbeek commented Dec 10, 2024 •

edited

Loading

ahmedhamidawan commented Jan 21, 2025 •

edited

Loading