Annotation and Title detail #18762

hujambo-dunia · 2024-09-03T13:59:26Z

Addresses #18711. Visually, there are numerous ambiguous ways to solve this issue.

Version 3 takes into account Marius' comment for simplicity but maintaining consistency with Workflows Landing Page design_.

v3: Expandable Portlet component with site consistency for Workflows Landing Page

Version 2 takes into account Ahmed's comment for consistency with Tool Form page header design.

v2: Expandable Portlet component with site consistency

Version 1 is illustrated below as an "expandable portlet" solution. Other ideas/possibilities: "Mouse Hover Overlay-Menu", "Mouse Click Overlay-Menu", "Only Display Description", and so forth. After general solution is agreed, will complete "code clean-up" and test script fix process. Constructive ideas/comments welcome.

v1: Expandable Portlet component

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.

hujambo-dunia · 2024-09-03T15:21:11Z

@ElectronicBlueberry this commit will have negative downstream effects?

ahmedhamidawan · 2024-09-03T17:48:27Z

I know this is WIP, but one tiny styling improvement could be made by placing the run and cog button in the same line as the wf name:

as opposed to:

One way to achieve this would be a <slot> for workflow-run-settings (and the run button) maybe?

On a somewhat related note, I always felt that using the same styled header as a `ToolCard` for workflows could also look nice?:

Kind of like:

client/src/components/Workflow/Run/WorkflowRunName.vue

davelopez · 2024-09-10T15:16:17Z

client/src/components/Workflow/Run/WorkflowRunName.vue

+        workflowInfoData.value = await workflowInfoDataPromise;
+    } catch (e) {
+        const error = e as AxiosError<{ err_msg?: string }>;
+        messageVariant.value = "danger";


Looks like messageVariant will only be used for "danger" when there is an error, so you can fix the variant to danger and safely remove the redundant ref.

@davelopez very helpful comment - change made.

mvdbeek

Really cool, thank you! But please don't embed the published card there. Just a simple expand would be brilliant.

mvdbeek · 2024-09-11T14:06:22Z

client/src/components/Workflow/Run/WorkflowRunName.vue

+const expandAnnotations = ref(true);
+const workflowInfoData = ref(null);
+
+onMounted(() => {


onMounted runs after initial rendering and creation of the DOM. You don't need to wait for that.

mvdbeek · 2024-09-11T14:17:13Z

client/src/components/Workflow/Run/WorkflowRunName.vue

+    loading.value = true;
+
+    try {
+        const workflowInfoDataPromise = getWorkflowInfo(props.model.runData.id);


This bypasses all stores and fetches the workflow even if we already have it. Can you use useWorkflowInstance instead ?

An even better alternative is to serialize the workflow annotation for the run request. This would be as simple as

diff --git a/lib/galaxy/managers/workflows.py b/lib/galaxy/managers/workflows.py index 0d970de242..5921ad74f4 100644 --- a/lib/galaxy/managers/workflows.py +++ b/lib/galaxy/managers/workflows.py @@ -1051,6 +1051,7 @@ class WorkflowContentsManager(UsesAnnotations): step_models.append(step_model) return { "id": trans.app.security.encode_id(stored.id), + "annotation": stored.annotation, "history_id": trans.app.security.encode_id(history.id) if history else None, "name": stored.name, "owner": stored.user.username,

we only use the run endpoint here in the workflow run component, so if we always need the attribute I don't see a reason not to just serialize that as well.

You would then have this available in the runData object here.

Follow-up questions related to the existing _workflow_to_dict_run() method in Workflows.py (eg. maybe some refactoring needed as a separate ticket).

(1) Blocker: I am assuming the purpose of @mvdbeek 's code suggestions is to not make an additional database call, correct? However, using the VSCode Debugger to find already-available values, I have not yet been able to find the following variables for the WorkflowInformation.vue component to be fully displayed. Specifically, creator, email_hash. and license. Although, the License may not be appearing because there is no value for it in my dev-qa use-case, but email_hash should display (since there is an avatar selected) and creator should always have a value. I am assuming that Email Hash can be created from the non-hashed email string parameter: stored.annotations[0].stored_workflow.user.email? I was able to find/serialize the other values (including Workflow Tags).
(2) Side note: calling stored.annotation (singular) fails with the error: 'StoredWorkflow' object has no attribute 'annotation'. The plural value can be accessed using stored.annotations ; however, it lacks parameters like the Workflow Tags. Instead, I used stored.annotations[0].stored_workflow to get the Workflow Tags - if that is an unreliable value, please let me know.
(3) Side note: using useWorkflowInstance pulls up an entirely different Workflow when using the Encoded Workflow ID (that appears in the URL). Tried also with the literal Workflow ID number (as a string) and failed. Perhaps this works only for Invocations since that is where I see useWorkflowInstance used in the codebase currently...? The method seemed to be able to used successfully in WorkflowInvocationHeader.vue so hopefully @ahmedhamidawan can please advise on this question?
(4) Question: Not a blocker, but I was surprised the following element didn't contain Workflow Annotation data within the same method: workflow.annotation returns null instead of any actual Workflow Annotation data. If that is not expected, then this line is broken. If "null" is expected, how can this be -is the variable misnamed? This code block is pretty old, but perhaps last editors have some thoughts: @guerler @nsoranzo @dannon ?

useWorkflowInstance takes the stored workflow_id as parameter, not the encoded_workflow_id we have here from the run data. The stored id is essentially the id for the specific workflow (for the given version; latest in this case) retrieved here:

galaxy/lib/galaxy/managers/workflows.py

Line 916 in aa25743

workflow = stored.get_internal_version(version)

Once we have that id, the whole loadAnnotation method could be replaced by a:

const { workflow, loading, error } = useWorkflowInstance(stored_workflow_id);

@ahmedhamidawan Thank you so much for this helpful comment. The latest iteration of this (v3) doesn't need this additional data right now, but I may need to know this helpful piece of information in the future.

client/src/components/Workflow/Run/WorkflowRunForm.vue

client/src/components/Workflow/Run/WorkflowRunName.vue

hujambo-dunia · 2024-09-19T14:41:26Z

lib/galaxy/managers/workflows.py

            if step.annotations:
                step_model["annotation"] = step.annotations[0].annotation
            if step.upgrade_messages:
                step_model["messages"] = step.upgrade_messages
            step_models.append(step_model)
        return {
            "id": trans.app.security.encode_id(stored.id),
+            "annotation": annotations_dict,


@mvdbeek Please let me know if it would be even better to serialize these SQLAlchemy objects in stored.annotations in some other way, happy to replace.

hujambo-dunia · 2024-09-19T14:43:53Z

client/src/components/Workflow/Run/WorkflowRunName.vue

+        name: props.model.runData.name,
+        owner: props.model.runData.owner,
+        tags: props.model.runData.annotation.tags.map((t: { user_tname: string }) => t.user_tname),
+        annotations: [props.model.runData.annotation.annotation],


@itisAliRH for this line annotations: [props.model.runData.annotation.annotation], is ok to only use the first annotation record (ie. annotation[0])? Or are other annotation records need to be included/consolidated somehow?

hujambo-dunia · 2024-09-19T14:49:52Z

@itisAliRH Wanted your review on changes to the WorkflowCard.vue file in this commit modifies your component to include a show-actions Boolean props

lib/galaxy/managers/workflows.py

mvdbeek · 2024-09-25T10:12:35Z

lib/galaxy/managers/workflows.py

            if step.annotations:
                step_model["annotation"] = step.annotations[0].annotation
            if step.upgrade_messages:
                step_model["messages"] = step.upgrade_messages
            step_models.append(step_model)
        return {
            "id": trans.app.security.encode_id(stored.id),
+            "annotation": annotations_dict,


You're including properties here that are not part of the annotation model.
This is a good attempt that goes in the right direction, I'll try to find some time to rework this.

Sure - any insights & examples are appreciated too.

… duplicate on same page

…design

Co-authored-by: Ahmed Hamid Awan <qe66653@umbc.edu>

…m.vue

…kflows Landing Page (instead of design consistency with Workflows Annotation History Panel). Added 'show-actions' Boolean parameter to focus user on running the workflow as consistent with their intended behavior from the prior step; when 'show-actions' equals False, all actions are hidden (note: not same terminology as technical 'read-only' as 'show-actions' also prohibits Share/Favorite which are separate from being able to Edit a workflow).

hujambo-dunia · 2024-10-23T20:24:04Z

Ahmed: Minor change requests

~~Backend change in managers/workflow.py: workflow_id: trans.app.security.encode_id(workflow.id)~~ COMPLETE
Create new frontend component based on following but only pull in last 4/right-most actions: WorkflowInvocationHeader.vue
After expandable header, add 2nd secondary component for README.md (check out 3rd party dependency)

Co-authored-by: Marius van den Beek <m.vandenbeek@gmail.com>

github-actions bot added the area/UI-UX label Sep 3, 2024

hujambo-dunia changed the title ~~New component for Title and Annotation detail~~ Annotation and Title detail Sep 3, 2024

hujambo-dunia requested review from dannon, mvdbeek, ElectronicBlueberry and ahmedhamidawan September 3, 2024 15:19

hujambo-dunia marked this pull request as ready for review September 10, 2024 14:56

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

davelopez reviewed Sep 10, 2024

View reviewed changes

hujambo-dunia requested a review from davelopez September 10, 2024 21:03

mvdbeek reviewed Sep 11, 2024

View reviewed changes

client/src/components/Workflow/Run/WorkflowRunForm.vue Outdated Show resolved Hide resolved

ahmedhamidawan reviewed Sep 12, 2024

View reviewed changes

client/src/components/Workflow/Run/WorkflowRunName.vue Outdated Show resolved Hide resolved

hujambo-dunia commented Sep 19, 2024

View reviewed changes

hujambo-dunia requested review from itisAliRH, mvdbeek and ahmedhamidawan September 19, 2024 14:44

mvdbeek reviewed Sep 25, 2024

View reviewed changes

lib/galaxy/managers/workflows.py Outdated Show resolved Hide resolved

mvdbeek reviewed Sep 25, 2024

View reviewed changes

lib/galaxy/managers/workflows.py Outdated Show resolved Hide resolved

mvdbeek reviewed Sep 25, 2024

View reviewed changes

hujambo-dunia added 6 commits October 22, 2024 13:23

New component for Title and Annotation detail

9858c9e

Added expand/collapse for Annotation detail

cb40238

Hide Workflow Annotation component's Workflow Name value so as to not…

d19c2b0

… duplicate on same page

Component upgrade, minor styling changes, code cleanup

6c4ae65

Cleaner error handling

7301278

Added Workflow header 'gray bar' for consistency with Tool Form page …

e30bb91

…design

hujambo-dunia and others added 5 commits October 22, 2024 13:23

Linting prettier

6194f1a

Update client/src/components/Workflow/Run/WorkflowRunName.vue

99693ae

Co-authored-by: Ahmed Hamid Awan <qe66653@umbc.edu>

Reverted changes to client/src/components/Workflow/Run/WorkflowRunFor…

4c08baa

…m.vue

Backend code formatting

2b5f1ac

hujambo-dunia force-pushed the enhance-workflow-detail branch from 09a4eae to 2b5f1ac Compare October 22, 2024 17:25

hujambo-dunia requested a review from mvdbeek October 22, 2024 17:25

hujambo-dunia and others added 3 commits October 25, 2024 14:37

Update lib/galaxy/managers/workflows.py

dac0113

Co-authored-by: Marius van den Beek <m.vandenbeek@gmail.com>

Update lib/galaxy/managers/workflows.py

7b2c719

Co-authored-by: Marius van den Beek <m.vandenbeek@gmail.com>

Coding convention update

08b7f0d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Annotation and Title detail #18762

Annotation and Title detail #18762

hujambo-dunia commented Sep 3, 2024 •

edited

Loading

hujambo-dunia commented Sep 3, 2024

ahmedhamidawan commented Sep 3, 2024 •

edited

Loading

davelopez Sep 10, 2024

hujambo-dunia Sep 10, 2024

mvdbeek left a comment •

edited

Loading

mvdbeek Sep 11, 2024

mvdbeek Sep 11, 2024

hujambo-dunia Sep 17, 2024

ahmedhamidawan Sep 18, 2024

hujambo-dunia Sep 19, 2024

hujambo-dunia Sep 19, 2024

hujambo-dunia Sep 19, 2024

hujambo-dunia commented Sep 19, 2024

mvdbeek Sep 25, 2024

hujambo-dunia Sep 25, 2024

hujambo-dunia commented Oct 23, 2024 •

edited

Loading

Annotation and Title detail #18762

Are you sure you want to change the base?

Annotation and Title detail #18762

Conversation

hujambo-dunia commented Sep 3, 2024 • edited Loading

How to test the changes?

License

hujambo-dunia commented Sep 3, 2024

ahmedhamidawan commented Sep 3, 2024 • edited Loading

On a somewhat related note, I always felt that using the same styled header as a ToolCard for workflows could also look nice?:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mvdbeek left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hujambo-dunia commented Sep 19, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hujambo-dunia commented Oct 23, 2024 • edited Loading

hujambo-dunia commented Sep 3, 2024 •

edited

Loading

ahmedhamidawan commented Sep 3, 2024 •

edited

Loading

On a somewhat related note, I always felt that using the same styled header as a `ToolCard` for workflows could also look nice?:

mvdbeek left a comment •

edited

Loading

hujambo-dunia commented Oct 23, 2024 •

edited

Loading