From 5291b6996085032204c76282c42f1ffa725283a7 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Thu, 9 Nov 2023 13:51:38 -0500
Subject: [PATCH] Refactor workflow step toward TS & reuse.

---
 .../Elements/Workflow/WorkflowDisplay.vue     | 10 ++-
 .../WorkflowInvocationStep.vue                | 72 +++++-------------
 .../WorkflowStepIcon.vue                      | 22 ++++++
 .../WorkflowStepTitle.vue                     | 76 +++++++++++++++++++
 lib/galaxy/managers/workflows.py              |  1 +
 5 files changed, 126 insertions(+), 55 deletions(-)
 create mode 100644 client/src/components/WorkflowInvocationState/WorkflowStepIcon.vue
 create mode 100644 client/src/components/WorkflowInvocationState/WorkflowStepTitle.vue

diff --git a/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue b/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue
index 329af572b8a0..df9fe146d59f 100644
--- a/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue
+++ b/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue
@@ -7,6 +7,8 @@ import { isEmpty } from "@/utils/utils";
 
 import WorkflowTree from "./WorkflowTree.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
+import WorkflowStepIcon from "@/components/WorkflowInvocationState/WorkflowStepIcon.vue";
+import WorkflowStepTitle from "@/components/WorkflowInvocationState/WorkflowStepTitle.vue";
 
 interface WorkflowDisplayProps {
     workflowId: string;
@@ -102,7 +104,13 @@ onMounted(async () => {
                 </b-alert>
                 <div v-if="itemContent !== null">
                     <div v-for="step in itemContent?.steps" :key="step.order_index" class="mb-2">
-                        <div>Step {{ step.order_index + 1 }}: {{ step.label }}</div>
+                        <WorkflowStepIcon v-if="step.type" :step-type="step.type" />
+                        <WorkflowStepTitle
+                            :step-tool-id="step.tool_id"
+                            :step-subworkflow-id="step.subworkflow_id"
+                            :step-label="step.label"
+                            :step-type="step.type"
+                            :step-index="step.order_index" />
                         <WorkflowTree :input="step" :skip-head="true" />
                     </div>
                 </div>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
index ea5da90e8b45..ed5ed99c6c90 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
@@ -2,9 +2,11 @@
     <div class="d-flex" :data-step="workflowStep.id">
         <div class="ui-portlet-section" style="width: 100%">
             <div class="portlet-header portlet-title portlet-operations cursor-pointer" @click="toggleStep">
-                <i :class="'portlet-title-icon fa mr-1 ' + stepIcon"></i>
+                <WorkflowStepIcon :class="portlet - title - icon" :step-type="workflowStepType" />
                 <span class="portlet-title-text">
-                    <u class="step-title">{{ stepLabel }}</u>
+                    <u class="step-title">
+                        <WorkflowStepTitle v-bind="titleProps(workflowStep.id)" />
+                    </u>
                 </span>
                 <FontAwesomeIcon class="float-right" :icon="expanded ? 'fa-chevron-up' : 'fa-chevron-down'" />
             </div>
@@ -61,7 +63,7 @@
                                             <li
                                                 v-for="stepInput in Object.values(workflowStep.input_steps)"
                                                 :key="stepInput.source_step">
-                                                {{ labelForWorkflowStep(stepInput.source_step) }}
+                                                <WorkflowStepTitle v-bind="titleProps(stepInput.source_step)" />
                                             </li>
                                         </ul>
                                     </div>
@@ -91,14 +93,12 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import GenericHistoryItem from "components/History/Content/GenericItem";
 import LoadingSpan from "components/LoadingSpan";
 import { InvocationStepProvider } from "components/providers";
-import WorkflowIcons from "components/Workflow/icons";
-import { mapActions, mapState } from "pinia";
-import { useToolStore } from "stores/toolStore";
-import { useWorkflowStore } from "stores/workflowStore";
 import { mapActions as vuexMapActions, mapGetters } from "vuex";
 
 import JobStep from "./JobStep";
 import ParameterStep from "./ParameterStep";
+import WorkflowStepIcon from "./WorkflowStepIcon";
+import WorkflowStepTitle from "./WorkflowStepTitle";
 
 library.add(faChevronUp, faChevronDown);
 
@@ -110,6 +110,8 @@ export default {
         ParameterStep,
         InvocationStepProvider,
         GenericHistoryItem,
+        WorkflowStepIcon,
+        WorkflowStepTitle,
         WorkflowInvocationState: () => import("components/WorkflowInvocationState/WorkflowInvocationState"),
     },
     props: {
@@ -124,8 +126,6 @@ export default {
         };
     },
     computed: {
-        ...mapState(useWorkflowStore, ["getStoredWorkflowByInstanceId"]),
-        ...mapState(useToolStore, ["getToolForId", "getToolNameById"]),
         ...mapGetters(["getInvocationStepById"]),
         isReady() {
             return this.invocation.steps.length > 0;
@@ -142,59 +142,23 @@ export default {
         isDataStep() {
             return ["data_input", "data_collection_input"].includes(this.workflowStepType);
         },
-        stepIcon() {
-            return WorkflowIcons[this.workflowStepType];
-        },
-        stepLabel() {
-            return this.labelForWorkflowStep(this.workflowStep.id);
-        },
-    },
-    created() {
-        this.fetchTool();
-        this.fetchSubworkflow();
     },
     methods: {
-        ...mapActions(useWorkflowStore, ["fetchWorkflowForInstanceId"]),
-        ...mapActions(useToolStore, ["fetchToolForId"]),
         ...vuexMapActions(["fetchInvocationStepById"]),
-        fetchTool() {
-            if (this.workflowStep.tool_id && !this.getToolForId(this.workflowStep.tool_id)) {
-                this.fetchToolForId(this.workflowStep.tool_id);
-            }
-        },
-        fetchSubworkflow() {
-            if (this.workflowStep.workflow_id) {
-                this.fetchWorkflowForInstanceId(this.workflowStep.workflow_id);
-            }
-        },
         toggleStep() {
             this.expanded = !this.expanded;
         },
-        labelForWorkflowStep(stepIndex) {
+        titleProps(stepIndex) {
             const invocationStep = this.invocation.steps[stepIndex];
             const workflowStep = this.workflow.steps[stepIndex];
-            const oneBasedStepIndex = stepIndex + 1;
-            if (invocationStep && invocationStep.workflow_step_label) {
-                return `Step ${oneBasedStepIndex}: ${invocationStep.workflow_step_label}`;
-            }
-            const workflowStepType = workflowStep.type;
-            switch (workflowStepType) {
-                case "tool":
-                    return `Step ${oneBasedStepIndex}: ${this.getToolNameById(workflowStep.tool_id)}`;
-                case "subworkflow": {
-                    const subworkflow = this.getStoredWorkflowByInstanceId(workflowStep.workflow_id);
-                    const label = subworkflow ? subworkflow.name : "Subworkflow";
-                    return `Step ${oneBasedStepIndex}: ${label}`;
-                }
-                case "parameter_input":
-                    return `Step ${oneBasedStepIndex}: Parameter input`;
-                case "data_input":
-                    return `Step ${oneBasedStepIndex}: Data input`;
-                case "data_collection_input":
-                    return `Step ${oneBasedStepIndex}: Data collection input`;
-                default:
-                    return `Step ${oneBasedStepIndex}: Unknown step type '${workflowStepType}'`;
-            }
+            const rval = {
+                stepIndex: stepIndex,
+                stepLabel: invocationStep && invocationStep.workflow_step_label,
+                stepType: workflowStep.type,
+                stepToolId: workflowStep.tool_id,
+                stepSubworkflowId: workflowStep.workflow_id,
+            };
+            return rval;
         },
     },
 };
diff --git a/client/src/components/WorkflowInvocationState/WorkflowStepIcon.vue b/client/src/components/WorkflowInvocationState/WorkflowStepIcon.vue
new file mode 100644
index 000000000000..08c64b37faf6
--- /dev/null
+++ b/client/src/components/WorkflowInvocationState/WorkflowStepIcon.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+
+import WorkflowIcons from "@/components/Workflow/icons";
+
+interface WorkflowStepIconProps {
+    stepType: "tool" | "data_input" | "data_collection_input" | "subworkflow" | "parameter_input" | "pause";
+}
+
+const props = defineProps<WorkflowStepIconProps>();
+
+const stepIcon = computed(() => {
+    return WorkflowIcons[props.stepType];
+});
+const cssClasses = computed(() => {
+    return ["fa", "mr-1", stepIcon.value];
+});
+</script>
+
+<template>
+    <i :class="cssClasses"></i>
+</template>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowStepTitle.vue b/client/src/components/WorkflowInvocationState/WorkflowStepTitle.vue
new file mode 100644
index 000000000000..8a79ae16c420
--- /dev/null
+++ b/client/src/components/WorkflowInvocationState/WorkflowStepTitle.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed, watch } from "vue";
+
+import { useToolStore } from "@/stores/toolStore";
+import { useWorkflowStore } from "@/stores/workflowStore";
+
+interface WorkflowInvocationStepTitleProps {
+    stepIndex: number;
+    stepLabel?: string;
+    stepType: string;
+    stepToolId?: string;
+    stepSubworkflowId?: string;
+}
+
+const props = defineProps<WorkflowInvocationStepTitleProps>();
+
+const workflowStore = useWorkflowStore();
+const toolStore = useToolStore();
+
+const subWorkflow = computed(() => {
+    if (props.stepSubworkflowId) {
+        return workflowStore.getStoredWorkflowByInstanceId(props.stepSubworkflowId);
+    }
+    return null;
+});
+const toolName = computed(() => {
+    if (props.stepToolId) {
+        return toolStore.getToolNameById(props.stepToolId);
+    }
+    return "";
+});
+
+const title = computed(() => {
+    const oneBasedStepIndex = props.stepIndex + 1;
+    if (props.stepLabel) {
+        return `Step ${oneBasedStepIndex}: ${props.stepLabel}`;
+    }
+    const workflowStepType = props.stepType;
+    switch (workflowStepType) {
+        case "tool":
+            return `Step ${oneBasedStepIndex}: ${toolName.value}`;
+        case "subworkflow": {
+            const subworkflow = subWorkflow.value;
+            const label = subworkflow ? subworkflow.name : "Subworkflow";
+            return `Step ${oneBasedStepIndex}: ${label}`;
+        }
+        case "parameter_input":
+            return `Step ${oneBasedStepIndex}: Parameter input`;
+        case "data_input":
+            return `Step ${oneBasedStepIndex}: Data input`;
+        case "data_collection_input":
+            return `Step ${oneBasedStepIndex}: Data collection input`;
+        default:
+            return `Step ${oneBasedStepIndex}: Unknown step type '${workflowStepType}'`;
+    }
+});
+
+function initStores() {
+    if (props.stepToolId && !toolStore.getToolForId(props.stepToolId)) {
+        toolStore.fetchToolForId(props.stepToolId);
+    }
+
+    if (props.stepSubworkflowId) {
+        workflowStore.fetchWorkflowForInstanceId(props.stepSubworkflowId);
+    }
+}
+
+watch(props, () => {
+    initStores();
+});
+initStores();
+</script>
+
+<template>
+    <span>{{ title }}</span>
+</template>
diff --git a/lib/galaxy/managers/workflows.py b/lib/galaxy/managers/workflows.py
index 357ec0deae7c..a0e07f4c6694 100644
--- a/lib/galaxy/managers/workflows.py
+++ b/lib/galaxy/managers/workflows.py
@@ -1123,6 +1123,7 @@ def do_inputs(inputs, values, prefix, step, other_values=None):
         for step in workflow.steps:
             step_dict = {}
             step_dict["order_index"] = step.order_index
+            step_dict["type"] = step.type
             if step.annotations:
                 step_dict["annotation"] = step.annotations[0].annotation
             try: