Workflow Invocation view improvements #18615

ahmedhamidawan · 2024-07-29T21:14:46Z

Following discussions at GCC 2024 and this roadmap by @nekrut: https://hackmd.io/@nekrut/HkinoEh8A

Overall Change to the component

Before	After

Steps show on the right, the progress bars are within the `Overview` tab	Only the currently active step shows below, leaving full width for graph, progress bars in the Header

Changes to an actively running workflow

Changes made to WorkflowRunSuccess:

Before

After

Other Changes

Changes from the roadmap and other changes that improve the UX:

- Steps moved to a separate tab, show clicked/active step below instead of job

This removes the steps from the overview and the graph is filling the center as the default view, and instead of clicking a step and then viewing a job below, the active/clicked step is shown below in its entirety:

invocation_graph_steps_removed.mp4

- Improved Workflow Invocation Step component

Before	After

- Inputs shown in Graph

Before	After

- Invocation Panel toggles out on `mouseleave`

The first commit tackles point A in the roadmap: List of invocations is now not visible continously, it goes away after you settle on one invocation and mouseleave the panel area:

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-10-01T16:49:29Z

The client unit and selenium tests failures look related ?

mvdbeek · 2024-11-05T15:35:38Z

We walked through this in the last IWC and it really feels great! I guess one thing that's kind of odd is that a random-ish step is auto-expanded ? Could we make it so that a step needs to be selected in order to be expanded ?

ahmedhamidawan · 2024-11-05T15:43:37Z

Thank you @mvdbeek and everyone who had a look (sorry I missed the message in the iwc chat for that meeting... 😞)

The random step being highlighted was done in the initial implementation when you had steps next to the graph, and it would (for terminal invocations) when you landed on the view, highlight the first failed step (which was requested).
But maybe now it makes sense to only highlight a step when the user clicks on it. I will add this here

The only other reason I've not finished this up entirely is PR 17708 where I was so far, rebasing and adjusting against dev, and planning to get that in first. But now I realize that I'll be in another painful rebase if that gets merged first?

So, I'll just get this in before that.

xref galaxyproject#18615 (comment)

ahmedhamidawan · 2024-11-05T18:10:45Z

This is good to be merged!

This first commit tackles point A in the roadmap: List of invocations is now not visible continously, it goes away after you settle on one invocation and `mouseleave` the panel area. Roadmap: https://hackmd.io/@nekrut/HkinoEh8A

- Instead of showing steps right next to the invocation graph, moves steps (back) into a separate tab - To make this work, adds a `graphStepsByStoreId` to the `invocationStore` that helps access the graph steps in multiple components (TODO: improve how this is done) - Instead of clicking on a node/step in the graph and showing the job for the step that the user clicks, now we show the whole expanded step below

add gap between step header buttons

remove `JobStepTabs.vue`

- The progress bars are in `WorkflowInvocationHeader` now, giving more space to the step header being visible below the graph - `WorkflowRunSuccess` is a one line header (refactored), and it uses `GridInvocation` to show batch invocations.

For the current history, we show a title saying "This is your current history", therefore, a mock is added here for `historyStore.currentHistoryId` to always return `current-history-id` regardless of which history you mount. This is done so that we can test the case when the history is current, and not.

xref galaxyproject#18615 (comment)

- Adjust props - Remove the return to invocation list jest, we will be removing that button soon

mvdbeek · 2024-11-07T10:06:51Z

client/src/components/WorkflowInvocationState/WorkflowInvocationJob.vue

+        <div class="d-flex justify-content-between pb-1 pr-1">
+            <i>
+                <FontAwesomeIcon :icon="faRegClock" class="mr-1" />run
+                <UtcDate :date="props.job.create_time" mode="elapsed" />


This isn't the duration you would think it is, it's the entire time from scheduling to last to last update. Can you remove this ? Once the job is terminal you could get this from the wallclock job metric, but I would include that directly in the job info page.

So, this is the create_time; I thought it is the time that the job was created?
In this <i> we show Job was run 18 minutes ago (e.g.)

Are you still talking about this being the entire time from scheduling to last to last update?

Isn't that the time in the next <i>, conditionally rendered for v-if="!NON_TERMINAL_STATES.includes(props.job.state)"?

which itself is calculated as galaxy/client/src/components/JobInformation/utilities.ts:

galaxy/client/src/components/JobInformation/utilities.ts

Lines 1 to 7 in 8f6c955

import { formatDuration, intervalToDuration } from "date-fns";

import type { JobBaseModel } from "@/api/jobs";

export function getJobDuration(job: JobBaseModel): string {

return formatDuration(intervalToDuration({ start: new Date(job.create_time), end: new Date(job.update_time) }));

}

?

For that one, I can look at the wallclock job metric instead?

Here are the two different times shown here:

This is when the job was scheduled and first written to the database, that has nothing to do with what you'd call duration in a realistic production setup. duration would be wallclock time.

I see.
So should we remove either of these times from here?
If not, I understand the (terminal) one on the right is incorrect, and so do we still keep the one on the left?
And do we then place the job metric wallclock time here?

So, I've removed both times from this view, and instead just simply used the JobDetails component that in turn uses the existing JobMetrics component in this latest commit 0c50efc

Screen.Recording.2024-11-11.at.4.33.15.PM.mov

Let me know if this works, since this is just a reuse of the existing job details view we see when we click on a ContentItem's info option.

No need for the `WorkflowInvocationJob` component added in this PR because `JobDetails` has all we need.

ahmedhamidawan added kind/enhancement area/UI-UX labels Jul 29, 2024

ahmedhamidawan force-pushed the invocation_view_improvements branch from b4cdf6b to feb4bf9 Compare August 1, 2024 16:01

ahmedhamidawan force-pushed the invocation_view_improvements branch from feb4bf9 to ea4fcb4 Compare August 15, 2024 15:59

ahmedhamidawan force-pushed the invocation_view_improvements branch from be8f9b6 to b7a0424 Compare August 25, 2024 20:28

ahmedhamidawan force-pushed the invocation_view_improvements branch from d5ac101 to 0841ef9 Compare September 4, 2024 00:00

ahmedhamidawan changed the title ~~[WIP]: Workflow Invocation view improvements~~ Workflow Invocation view improvements Sep 20, 2024

ahmedhamidawan marked this pull request as ready for review September 20, 2024 23:07

github-actions bot added this to the 24.2 milestone Sep 20, 2024

mvdbeek self-requested a review October 1, 2024 14:43

ahmedhamidawan force-pushed the invocation_view_improvements branch 2 times, most recently from 9367b99 to 1962645 Compare October 1, 2024 23:03

ahmedhamidawan force-pushed the invocation_view_improvements branch from 5dd4b4b to 312669c Compare October 18, 2024 01:21

ahmedhamidawan mentioned this pull request Oct 24, 2024

Place invocation state in list #17708

Draft

2 tasks

ahmedhamidawan force-pushed the invocation_view_improvements branch from 312669c to 16f9640 Compare November 5, 2024 18:09

ahmedhamidawan added a commit to ahmedhamidawan/galaxy that referenced this pull request Nov 5, 2024

do not auto-activate step on invocation view load

105c633

xref galaxyproject#18615 (comment)

ahmedhamidawan added 10 commits November 6, 2024 19:14

Workflow Invocation view improvements

b877fa3

This first commit tackles point A in the roadmap: List of invocations is now not visible continously, it goes away after you settle on one invocation and `mouseleave` the panel area. Roadmap: https://hackmd.io/@nekrut/HkinoEh8A

add workflow input indicator to WorkflowInvocationStepHeader

8028bd7

decrease step header size in InvocationGraph to "sm"

964e6e1

add gap between step header buttons

add a tab view for jobs under a step in invocation view

6a4b3b5

use openapi-fetch for fetching job

f1b0a74

remove redundant props/emits for invocation steps

6b764b8

convert ProgressBar.vue to composition API + ts

ac7428e

do not include Steps tab for subworkflows

161ee58

add getContentItemState function

c8534bc

ahmedhamidawan added 13 commits November 6, 2024 19:15

add job duration, WorkflowInvocationJob component

83ec705

remove `JobStepTabs.vue`

check activeNodeId for null (it can be 0 as well)

992319a

show workflow input value on graph

d5228a5

do not auto scroll to the clicked step

940b3c2

add force prop to WorkflowRunButton for routing

f71af2f

remove jest since buttons have moved to parent

9756a6a

add a jest for JobStep

33d97f1

adjust seleniums for changes in JobStep and invocations in general

7dda944

do not auto-activate step on invocation view load

0463441

xref galaxyproject#18615 (comment)

on a repetition of the step clicked, scroll to the step

6cff8d6

fix failing WorkflowInvocationHeader jest

8f6c955

- Adjust props - Remove the return to invocation list jest, we will be removing that button soon

ahmedhamidawan force-pushed the invocation_view_improvements branch from 16f9640 to 8f6c955 Compare November 7, 2024 01:17

mvdbeek reviewed Nov 7, 2024

View reviewed changes

show JobMetrics in workflow invocation job by just using JobDetails

0c50efc

No need for the `WorkflowInvocationJob` component added in this PR because `JobDetails` has all we need.

mvdbeek merged commit 723004e into galaxyproject:dev Nov 12, 2024
55 of 56 checks passed

ahmedhamidawan deleted the invocation_view_improvements branch November 18, 2024 15:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Workflow Invocation view improvements #18615

Workflow Invocation view improvements #18615

ahmedhamidawan commented Jul 29, 2024 •

edited

Loading

mvdbeek commented Oct 1, 2024

mvdbeek commented Nov 5, 2024

ahmedhamidawan commented Nov 5, 2024

ahmedhamidawan commented Nov 5, 2024

mvdbeek Nov 7, 2024 •

edited

Loading

ahmedhamidawan Nov 7, 2024 •

edited

Loading

mvdbeek Nov 8, 2024 •

edited

Loading

ahmedhamidawan Nov 8, 2024

ahmedhamidawan Nov 11, 2024

	import { formatDuration, intervalToDuration } from "date-fns";

	import type { JobBaseModel } from "@/api/jobs";

	export function getJobDuration(job: JobBaseModel): string {
	return formatDuration(intervalToDuration({ start: new Date(job.create_time), end: new Date(job.update_time) }));
	}

Workflow Invocation view improvements #18615

Workflow Invocation view improvements #18615

Conversation

ahmedhamidawan commented Jul 29, 2024 • edited Loading

Overall Change to the component

Changes to an actively running workflow

Other Changes

- Steps moved to a separate tab, show clicked/active step below instead of job

- Improved Workflow Invocation Step component

- Inputs shown in Graph

- Invocation Panel toggles out on mouseleave

How to test the changes?

License

mvdbeek commented Oct 1, 2024

mvdbeek commented Nov 5, 2024

ahmedhamidawan commented Nov 5, 2024

ahmedhamidawan commented Nov 5, 2024

mvdbeek Nov 7, 2024 • edited Loading

Choose a reason for hiding this comment

ahmedhamidawan Nov 7, 2024 • edited Loading

Choose a reason for hiding this comment

mvdbeek Nov 8, 2024 • edited Loading

Choose a reason for hiding this comment

ahmedhamidawan Nov 8, 2024

Choose a reason for hiding this comment

ahmedhamidawan Nov 11, 2024

Choose a reason for hiding this comment

ahmedhamidawan commented Jul 29, 2024 •

edited

Loading

- Invocation Panel toggles out on `mouseleave`

mvdbeek Nov 7, 2024 •

edited

Loading

ahmedhamidawan Nov 7, 2024 •

edited

Loading

mvdbeek Nov 8, 2024 •

edited

Loading