Workflow Editor Activity Bar #18729

ElectronicBlueberry · 2024-08-22T20:17:36Z

This PR brings the activity bar to the workflow editor, providing various workflow-related activities and tools. Key changes and features include:

Support for undo/redo stack UI.
Add workflows activity item to explore in detail and select workflows to add/copy steps from.
Redesign expandable tool attributes panel
More logic and UI improvements

Screen.Recording.2024-11-15.at.19.35.34-2.mov

Chnages

changes (undo redo stack ui)
workflows (to insert like tools)

Ideas for additional activities, but unsure about:

workflow specific utility tools
workflow attributes
this would free up the right panel to serve a single purpose
step list
subworkflows (in this workflow)
invocations of this workflow
run with simplified run form
edit report

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. Open the worklfow editore and play around

License

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

ahmedhamidawan · 2024-08-27T14:57:24Z

This might tie in nicely with the ideas in #18166?

bgruening · 2024-09-29T09:52:51Z

The first round of feedback:

separate "inputs" from tools, inputs are imho equivalent to "Upload"
An easy way to exit is missing imho, "save and exit" instead of "save" might be an option, especially since we now have the "changes" option
if there are no "workflows" then a hint should be shown like "Here are all workflows listed that you can include as sub-workflows"
Q: is it useful to list the self-workflow? Is that even possible to include them in a workflow? Recursion?
Should Ctrl+S save the workflow?
if you click on tools, the focus should be on the search-box

Thanks @ElectronicBlueberry!

bgruening · 2024-11-05T00:05:22Z

Thanks a lot, Laila. Here is a small review from Wolfgang and me from the Biohackathon:

If I click tools, my cursor should be in the search field
If I click on " Input dataset: Missing a label and annotation " in the best-practise panel, its not clear which node is selected and I should probably see the left-side panel?
if I save the "changes" disappear, this makes somehow sense, but its a bit confusing as the "changes" panel is then empty. Should we indicate the "versions" also in the changes panel?
- if we move the version into the "changes" panel we could rename "Attributes" to Description?
I'm not convinced "auto-layout", "upgrade" and "download" deserves its own panel item
- separate them with another horizontal bar?
- should auto-layout be part of the "annotation toolbar"
1. make sure the left panel is not shown, 2) move some boxes, 3) click the arrows (upper, left corner) to revert changes -> the left panel will open, which I think is wrong
should "Inputs" in the tool panel be its own activity bar item?
Best Practices Review is not scrollable
The Run option should be moved to just above Save&Exit
Downloads triggers a "leave page" warning - but we do not leave the page
we propose: tools, workflows on top, a horizontal bar and then the rest of the items which are more "metadata inspection items"
auto-layout can not be undone

ahmedhamidawan · 2024-11-13T20:50:27Z

These are wonderful changes @ElectronicBlueberry !!

One minuscule thing I've noticed is this:
As soon as you click Create a new workflow, and you land on a fresh editor, if you click Run, this happens:

Screen.Recording.2024-11-13.at.3.45.34.PM.mov

An empty workflow is created, which i think it shouldn't since the button should maybe be disabled?

davelopez

I have played around with this and I love it!

Amazing work!

The tests would require some massaging to make them happy though... 😅

client/src/components/Workflow/List/useWorkflowActions.ts

client/src/components/ActivityBar/ActivityBar.vue

itisAliRH · 2024-11-15T13:40:49Z

The workflow bookmarking is broken and you can not unbookmark a workflow. So the API seems to be working fine but the client side is broken and needs to be fixed. I put the PR into a draft and working on it.

itisAliRH

@ElectronicBlueberry Great work, Laila!

I’ve played and reviewed it and have addressed some issues and also made some improvements.

Thank you so much!

itisAliRH · 2024-11-15T20:15:01Z

This changes also fixes errors like below in the activity bar:

client/src/components/Markdown/MarkdownEditor.vue

Removes redundant prefix from activity item IDs for consistency Changes notification item ID to 'notifications' for clarity

Adds an ID attribute to the toolbox panel. Updates the tool opening logic in the workflow editor to open the toolbox panel using the activity bar before selecting tool

Introduces an ID for the auto-layout button in the toolbar component. Updates navigation configuration and Selenium tests to use the new button ID for auto-layout functionality.

…MarkdownEditor Introduces hidePanel prop to conditionally hide the side panel in ActivityBar. Integrates MarkdownToolBox into MarkdownEditor temporary to have MarkdownToolBox in the page editor too.

Renames WorkflowAttributes.test.js to WorkflowAttributes.test.ts Replaces createLocalVue with getLocalVue and adds Pinia setup Mocks userTagsStore methods and updates test assertions

Updates imports to use TypeScript-compatible paths and extensions Adjusts mock configuration and type assertions for TypeScript

Renames toolbox panel selector for consistency Adds new selector for workflow editor tools activity Modifies logic to handle toolbox panel visibility and search functionality

Includes a new selector for the 'Save As' option in the navigation configuration. Updates the Selenium test to handle the 'Save As' option visibility and interaction. Improves user experience by ensuring the 'Save As' option is accessible and testable.

… node inspector

github-actions bot added the area/UI-UX label Aug 22, 2024

ElectronicBlueberry mentioned this pull request Aug 28, 2024

move workflow editor actions out of the toolform #18166

Open

ElectronicBlueberry force-pushed the workflow-editor-activity-bar branch from aace313 to c0f98fa Compare September 2, 2024 13:34

ElectronicBlueberry force-pushed the workflow-editor-activity-bar branch from 0b346aa to 8d4be70 Compare October 8, 2024 12:04

ElectronicBlueberry mentioned this pull request Oct 21, 2024

searching in workflow editor does not find your workflows as possible results #19032

Open

ElectronicBlueberry force-pushed the workflow-editor-activity-bar branch from 7258f47 to be0d6d5 Compare October 25, 2024 14:06

mvdbeek mentioned this pull request Oct 28, 2024

[24.1] Fix very slow workflow editor loading #19068

Merged

4 tasks

ElectronicBlueberry force-pushed the workflow-editor-activity-bar branch from 87fc317 to 7f4b0b8 Compare October 31, 2024 16:02

ahmedhamidawan linked an issue Nov 3, 2024 that may be closed by this pull request

move workflow editor actions out of the toolform #18166

Open

dannon added this to the 24.2 milestone Nov 12, 2024

dannon marked this pull request as ready for review November 12, 2024 15:58

itisAliRH self-requested a review November 13, 2024 14:48

ElectronicBlueberry force-pushed the workflow-editor-activity-bar branch from 1125fb5 to 152b756 Compare November 13, 2024 19:57

davelopez reviewed Nov 14, 2024

View reviewed changes

client/src/components/Workflow/List/useWorkflowActions.ts Outdated Show resolved Hide resolved

itisAliRH reviewed Nov 15, 2024

View reviewed changes

client/src/components/ActivityBar/ActivityBar.vue Outdated Show resolved Hide resolved

itisAliRH marked this pull request as draft November 15, 2024 13:40

itisAliRH force-pushed the workflow-editor-activity-bar branch 2 times, most recently from dce254d to 85074ce Compare November 15, 2024 14:18

itisAliRH marked this pull request as ready for review November 15, 2024 18:08

itisAliRH approved these changes Nov 15, 2024

View reviewed changes

itisAliRH marked this pull request as draft November 18, 2024 12:35

guerler reviewed Nov 18, 2024

View reviewed changes

client/src/components/Markdown/MarkdownEditor.vue Show resolved Hide resolved

itisAliRH force-pushed the workflow-editor-activity-bar branch from 38756ab to 83dbab2 Compare November 18, 2024 13:48

jmchilton mentioned this pull request Nov 19, 2024

Cleanup Jest Test Output (Part 1) #19164

Closed

4 tasks

itisAliRH and others added 29 commits November 22, 2024 17:24

Simplifies activity item IDs

c1db082

Removes redundant prefix from activity item IDs for consistency Changes notification item ID to 'notifications' for clarity

Fix activity item upload progress background

d48ae9a

Adds ID to toolbox panel

12ea436

Adds an ID attribute to the toolbox panel. Updates the tool opening logic in the workflow editor to open the toolbox panel using the activity bar before selecting tool

Adds auto-layout button ID in workflow toolbar

ac9f5c0

Introduces an ID for the auto-layout button in the toolbar component. Updates navigation configuration and Selenium tests to use the new button ID for auto-layout functionality.

Adds hidePanel prop to ActivityBar and integrates MarkdownToolBox in …

18ca35e

…MarkdownEditor Introduces hidePanel prop to conditionally hide the side panel in ActivityBar. Integrates MarkdownToolBox into MarkdownEditor temporary to have MarkdownToolBox in the page editor too.

remove wait for absent element

3e2ab0e

fix add_input

45ad0c5

fix inserting steps

b18aa4d

fix tool menu container occurrences

5554b99

Migrates WorkflowAttributes test to TypeScript and updates dependencies

0a3eb68

Renames WorkflowAttributes.test.js to WorkflowAttributes.test.ts Replaces createLocalVue with getLocalVue and adds Pinia setup Mocks userTagsStore methods and updates test assertions

fix workflows activity id

ae6b69b

Migrates ToolPanel test to TypeScript

38b4f87

Updates imports to use TypeScript-compatible paths and extensions Adjusts mock configuration and type assertions for TypeScript

Updates toolbox panel selectors and workflow editor logic

c1328a2

Renames toolbox panel selector for consistency Adds new selector for workflow editor tools activity Modifies logic to handle toolbox panel visibility and search functionality

Adds 'Save As' functionality to workflow editor

abb4cef

fix basics test

9ec9dd2

revert shortening of ids

d713d8c

fix test save as

deb5aba

add more wait time for search

e746c0c

re-add confirm dialog

8c7ce88

remove double id prepending

60f3376

redo add subworkflow

9d5d60d

fix save as selector

557246a

move selection options to the left, so they do not interfere with the…

ed71585

… node inspector

remove collapse buttons from basics test

2246e8f

wait for save to complete

42e4b86

remove test for removed feature

83e494e

remove invalid check in insert steps

fc89cc7

remove test for removed component

033a6b3

ElectronicBlueberry force-pushed the workflow-editor-activity-bar branch from 13a84ed to 033a6b3 Compare November 22, 2024 16:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Workflow Editor Activity Bar #18729

Workflow Editor Activity Bar #18729

ElectronicBlueberry commented Aug 22, 2024 •

edited by itisAliRH

Loading

ahmedhamidawan commented Aug 27, 2024

bgruening commented Sep 29, 2024

bgruening commented Nov 5, 2024

ahmedhamidawan commented Nov 13, 2024

davelopez left a comment

itisAliRH commented Nov 15, 2024

itisAliRH left a comment

itisAliRH commented Nov 15, 2024

Workflow Editor Activity Bar #18729

Are you sure you want to change the base?

Workflow Editor Activity Bar #18729

Conversation

ElectronicBlueberry commented Aug 22, 2024 • edited by itisAliRH Loading

How to test the changes?

License

ahmedhamidawan commented Aug 27, 2024

bgruening commented Sep 29, 2024

bgruening commented Nov 5, 2024

ahmedhamidawan commented Nov 13, 2024

davelopez left a comment

Choose a reason for hiding this comment

itisAliRH commented Nov 15, 2024

itisAliRH left a comment

Choose a reason for hiding this comment

itisAliRH commented Nov 15, 2024

ElectronicBlueberry commented Aug 22, 2024 •

edited by itisAliRH

Loading