From 3f6a0c975911ac9b515c26b08f76b95a643058d5 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Mon, 6 Nov 2023 10:16:04 -0500
Subject: [PATCH 1/7] Implement Galaxy Markdown tag history_dataset_as_table.

---
 .../Elements/HistoryDatasetAsTable.vue        | 126 ++++++++++++++++++
 .../components/Markdown/MarkdownContainer.vue |  19 +++
 .../components/Markdown/MarkdownToolBox.vue   |   5 +
 lib/galaxy/managers/markdown_parse.py         |  10 ++
 lib/galaxy/managers/markdown_util.py          |  19 +++
 5 files changed, 179 insertions(+)
 create mode 100644 client/src/components/Markdown/Elements/HistoryDatasetAsTable.vue

diff --git a/client/src/components/Markdown/Elements/HistoryDatasetAsTable.vue b/client/src/components/Markdown/Elements/HistoryDatasetAsTable.vue
new file mode 100644
index 000000000000..dd74936ca879
--- /dev/null
+++ b/client/src/components/Markdown/Elements/HistoryDatasetAsTable.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { UrlDataProvider } from "@/components/providers/UrlDataProvider.js";
+
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+interface HistoryDatasetAsTableProps {
+    historyDatasetId: string;
+    compact: boolean;
+    showColumnHeaders: boolean;
+    title?: string;
+    footer?: string;
+}
+
+const props = withDefaults(defineProps<HistoryDatasetAsTableProps>(), {
+    compact: false,
+    showColumnHeaders: true,
+    title: undefined,
+    footer: undefined,
+});
+
+const itemUrl = computed(() => {
+    return `/api/datasets/${props.historyDatasetId}/get_content_as_text`;
+});
+
+const metaUrl = computed(() => {
+    return `/api/datasets/${props.historyDatasetId}`;
+});
+
+const expanded = false;
+
+const contentClass = computed(() => {
+    if (expanded) {
+        return "embedded-dataset-expanded";
+    } else {
+        return "embedded-dataset";
+    }
+});
+
+function getFields(metaData: any) {
+    const fields = [];
+    const columnNames = metaData.metadata_column_names || [];
+    const columnCount = metaData.metadata_columns;
+    for (let i = 0; i < columnCount; i++) {
+        fields.push({
+            key: `${i}`,
+            label: columnNames[i] || i,
+            sortable: true,
+        });
+    }
+    return fields;
+}
+
+function getItems(textData: any, metaData: any) {
+    const tableData: object[] = [];
+    const delimiter: string = metaData.metadata_delimiter || "\t";
+    const comments: number = metaData.metadata_comment_lines || 0;
+    const lines = textData.split("\n");
+    lines.forEach((line: string, i: number) => {
+        if (i >= comments) {
+            const tabs = line.split(delimiter);
+            const rowData: string[] = [];
+            let hasData = false;
+            tabs.forEach((cellData: string, j: number) => {
+                const cellDataTrimmed = cellData.trim();
+                if (cellDataTrimmed) {
+                    hasData = true;
+                }
+                rowData[j] = cellDataTrimmed;
+            });
+            if (hasData) {
+                tableData.push(rowData);
+            }
+        }
+    });
+    return tableData;
+}
+</script>
+
+<template>
+    <b-card :no-body="props.compact">
+        <b-card-title v-if="title">
+            <b>{{ title }}</b>
+        </b-card-title>
+        <UrlDataProvider v-slot="{ result: itemContent, loading, error }" :url="itemUrl">
+            <LoadingSpan v-if="loading" message="Loading Dataset" />
+            <div v-else-if="error">{{ error }}</div>
+            <div v-else :class="contentClass">
+                <div v-if="itemContent.item_data">
+                    <div>
+                        <UrlDataProvider
+                            v-slot="{ result: metaData, loading: metaLoading, error: metaError }"
+                            :url="metaUrl">
+                            <LoadingSpan v-if="metaLoading" message="Loading Metadata" />
+                            <div v-else-if="metaError">{{ metaError }}</div>
+                            <b-table
+                                v-else
+                                :thead-class="props.showColumnHeaders ? '' : 'd-none'"
+                                striped
+                                hover
+                                :fields="getFields(metaData)"
+                                :items="getItems(itemContent.item_data, metaData)" />
+                        </UrlDataProvider>
+                    </div>
+                </div>
+                <div v-else>No content found.</div>
+                <b-link v-if="itemContent.truncated" :href="itemContent.item_url"> Show More... </b-link>
+            </div>
+        </UrlDataProvider>
+        <b-card-footer v-if="footer">
+            {{ footer }}
+        </b-card-footer>
+    </b-card>
+</template>
+
+<style scoped>
+.embedded-dataset {
+    max-height: 20rem;
+    overflow-y: auto;
+}
+.embedded-dataset-expanded {
+    max-height: 40rem;
+    overflow-y: auto;
+}
+</style>
diff --git a/client/src/components/Markdown/MarkdownContainer.vue b/client/src/components/Markdown/MarkdownContainer.vue
index c338743a39e2..13806a855da4 100644
--- a/client/src/components/Markdown/MarkdownContainer.vue
+++ b/client/src/components/Markdown/MarkdownContainer.vue
@@ -4,6 +4,7 @@ import { computed, ref } from "vue";
 import { useConfig } from "@/composables/config";
 
 import HistoryDatasetAsImage from "./Elements/HistoryDatasetAsImage.vue";
+import HistoryDatasetAsTable from "./Elements/HistoryDatasetAsTable.vue";
 import HistoryDatasetCollectionDisplay from "./Elements/HistoryDatasetCollection/CollectionDisplay.vue";
 import HistoryDatasetDetails from "./Elements/HistoryDatasetDetails.vue";
 import HistoryDatasetDisplay from "./Elements/HistoryDatasetDisplay.vue";
@@ -68,6 +69,17 @@ const props = defineProps({
 
 const isCollapsible = computed(() => props.args.collapse !== undefined);
 const isVisible = computed(() => !isCollapsible.value || toggle.value);
+
+function argToBoolean(args, name, booleanDefault) {
+    const valueAsString = args[name];
+    if (valueAsString == "true") {
+        return true;
+    } else if (valueAsString == "false") {
+        return false;
+    } else {
+        return booleanDefault;
+    }
+}
 </script>
 
 <template>
@@ -126,6 +138,13 @@ const isVisible = computed(() => !isCollapsible.value || toggle.value);
             </InstanceUrl>
             <HistoryLink v-else-if="name == 'history_link'" :args="args" :histories="histories" />
             <HistoryDatasetAsImage v-else-if="name == 'history_dataset_as_image'" :args="args" />
+            <HistoryDatasetAsTable
+                v-else-if="name == 'history_dataset_as_table'"
+                :history-dataset-id="args.history_dataset_id"
+                :compact="argToBoolean(args, 'compact', false)"
+                :show-column-headers="argToBoolean(args, 'show_column_headers', true)"
+                :title="args.title"
+                :footer="args.footer" />
             <HistoryDatasetLink v-else-if="name == 'history_dataset_link'" :args="args" />
             <HistoryDatasetIndex v-else-if="name == 'history_dataset_index'" :args="args" />
             <InvocationTime v-else-if="name == 'invocation_time'" :args="args" :invocations="invocations" />
diff --git a/client/src/components/Markdown/MarkdownToolBox.vue b/client/src/components/Markdown/MarkdownToolBox.vue
index cad2605a50f5..e7f2d7c6b1ca 100644
--- a/client/src/components/Markdown/MarkdownToolBox.vue
+++ b/client/src/components/Markdown/MarkdownToolBox.vue
@@ -77,6 +77,11 @@ const historySharedElements = [
         name: "Embedded Dataset",
         emitter: "onHistoryDatasetId",
     },
+    {
+        id: "history_dataset_as_table",
+        name: "Embedded Dataset (as table)",
+        emitter: "onHistoryDatasetId",
+    },
     {
         id: "history_dataset_type",
         name: "Dataset Type",
diff --git a/lib/galaxy/managers/markdown_parse.py b/lib/galaxy/managers/markdown_parse.py
index ae70de230f91..4d0f20b5d2ca 100644
--- a/lib/galaxy/managers/markdown_parse.py
+++ b/lib/galaxy/managers/markdown_parse.py
@@ -30,6 +30,16 @@ class DynamicArguments:
     "history_dataset_display": ["input", "output", "history_dataset_id"],
     "history_dataset_embedded": ["input", "output", "history_dataset_id"],
     "history_dataset_as_image": ["input", "output", "history_dataset_id", "path"],
+    "history_dataset_as_table": [
+        "input",
+        "output",
+        "history_dataset_id",
+        "path",
+        "title",
+        "footer",
+        "show_column_headers",
+        "compact",
+    ],
     "history_dataset_peek": ["input", "output", "history_dataset_id"],
     "history_dataset_info": ["input", "output", "history_dataset_id"],
     "history_dataset_link": ["input", "output", "history_dataset_id", "path", "label"],
diff --git a/lib/galaxy/managers/markdown_util.py b/lib/galaxy/managers/markdown_util.py
index 3523031283cf..9ef57141375e 100644
--- a/lib/galaxy/managers/markdown_util.py
+++ b/lib/galaxy/managers/markdown_util.py
@@ -137,6 +137,10 @@ def _remap(container, line):
                 _check_object(object_id, line)
                 hda = hda_manager.get_accessible(object_id, trans.user)
                 rval = self.handle_dataset_as_image(line, hda)
+            elif container == "history_dataset_as_table":
+                _check_object(object_id, line)
+                hda = hda_manager.get_accessible(object_id, trans.user)
+                rval = self.handle_dataset_as_table(line, hda)
             elif container == "history_dataset_peek":
                 _check_object(object_id, line)
                 hda = hda_manager.get_accessible(object_id, trans.user)
@@ -251,6 +255,10 @@ def handle_dataset_display(self, line, hda):
     def handle_dataset_as_image(self, line, hda):
         pass
 
+    @abc.abstractmethod
+    def handle_dataset_as_table(self, line, hda):
+        pass
+
     @abc.abstractmethod
     def handle_dataset_peek(self, line, hda):
         pass
@@ -411,6 +419,9 @@ def handle_history_link(self, line, history):
     def handle_dataset_as_image(self, line, hda):
         pass
 
+    def handle_dataset_as_table(self, line, hda):
+        pass
+
     def handle_job_metrics(self, line, job):
         pass
 
@@ -538,6 +549,14 @@ def _embed_image(self, name: str, image_type: str, image_data: bytes):
         base64_image_data = base64.b64encode(image_data).decode("utf-8")
         return f"![{name}](data:image/{image_type};base64,{base64_image_data})"
 
+    def handle_dataset_as_table(self, line, hda):
+        # TODO: this form of the rendering doesn't do anything special with advanced
+        # options yet but could easily be modified in the future. show_column_headers,
+        # compact, title, and footer should be handled in here to bring the PDF and the
+        # web rendering closer.
+        rval = self.handle_dataset_embedded(line, hda)
+        return rval
+
     def handle_history_link(self, line, history):
         if history:
             content = literal_via_fence(history.name)

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

---
 .../Elements/Workflow/WorkflowDisplay.vue     | 10 ++-
 .../WorkflowInvocationStep.vue                | 55 +++++---------
 .../WorkflowStepIcon.vue                      | 22 ++++++
 .../WorkflowStepTitle.vue                     | 76 +++++++++++++++++++
 lib/galaxy/managers/workflows.py              |  1 +
 5 files changed, 126 insertions(+), 38 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 d37e6fa1580b..725091be75bd 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,13 +93,14 @@ 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 JobStep from "./JobStep";
 import ParameterStep from "./ParameterStep";
+import WorkflowStepIcon from "./WorkflowStepIcon";
+import WorkflowStepTitle from "./WorkflowStepTitle";
 
 library.add(faChevronUp, faChevronDown);
 
@@ -109,6 +112,8 @@ export default {
         ParameterStep,
         InvocationStepProvider,
         GenericHistoryItem,
+        WorkflowStepIcon,
+        WorkflowStepTitle,
         WorkflowInvocationState: () => import("components/WorkflowInvocationState/WorkflowInvocationState"),
     },
     props: {
@@ -140,16 +145,6 @@ 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"]),
@@ -167,31 +162,17 @@ export default {
         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 8bbc703056b0..07c230893438 100644
--- a/lib/galaxy/managers/workflows.py
+++ b/lib/galaxy/managers/workflows.py
@@ -1129,6 +1129,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:

From 44a9d3b5d84019789741afe5468c131f7f3307e2 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Wed, 22 Nov 2023 11:29:29 -0500
Subject: [PATCH 3/7] Refine workflow step icons..

---
 client/src/components/Workflow/icons.js              | 12 +++++++++---
 .../WorkflowInvocationState/WorkflowStepIcon.vue     |  6 ++----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Workflow/icons.js b/client/src/components/Workflow/icons.js
index 69401bcd581f..fda447092b49 100644
--- a/client/src/components/Workflow/icons.js
+++ b/client/src/components/Workflow/icons.js
@@ -1,8 +1,14 @@
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faFile } from "@fortawesome/free-regular-svg-icons";
+import { faFolderOpen, faPause, faPencilAlt, faSitemap, faWrench } from "@fortawesome/free-solid-svg-icons";
+
+library.add(faWrench, faFile, faSitemap, faPencilAlt, faPause, faFolderOpen);
+
 export default {
     tool: "fa-wrench",
-    data_input: "fa-file-o",
-    data_collection_input: "fa-folder-o",
+    data_input: "fa-file-o fa-file", // fa-file-o for older FontAwesome, fa-file is the only thing I could find newer font awesome
+    data_collection_input: "fa-folder-o fa-folder-open",
     subworkflow: "fa-sitemap fa-rotate-270",
-    parameter_input: "fa-pencil",
+    parameter_input: "fa-pencil-alt", // fa-pencil for older FontAwesome, fa-pencil-alt for newer
     pause: "fa-pause",
 };
diff --git a/client/src/components/WorkflowInvocationState/WorkflowStepIcon.vue b/client/src/components/WorkflowInvocationState/WorkflowStepIcon.vue
index 08c64b37faf6..7b103f3d27cd 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowStepIcon.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowStepIcon.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed } from "vue";
 
 import WorkflowIcons from "@/components/Workflow/icons";
@@ -12,11 +13,8 @@ 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>
+    <FontAwesomeIcon class="mr-1" :icon="stepIcon" />
 </template>

From f43e36025251ccc5898f174a078127302318a0c3 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Wed, 22 Nov 2023 11:29:48 -0500
Subject: [PATCH 4/7] Cool simplification thanks to Laila

---
 .../WorkflowInvocationState/WorkflowStepTitle.vue     | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowStepTitle.vue b/client/src/components/WorkflowInvocationState/WorkflowStepTitle.vue
index 8a79ae16c420..1253d73e3e40 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowStepTitle.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowStepTitle.vue
@@ -65,10 +65,13 @@ function initStores() {
     }
 }
 
-watch(props, () => {
-    initStores();
-});
-initStores();
+watch(
+    props,
+    () => {
+        initStores();
+    },
+    { immediate: true }
+);
 </script>
 
 <template>

From 8b7a51a226dac28f9e4bc5736f3cf9be18f56ff9 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Mon, 27 Nov 2023 18:07:05 -0500
Subject: [PATCH 5/7] Add title/footer component to job metrics and parameters.

---
 .../Markdown/Elements/JobMetrics.vue          | 39 ++++++++++--------
 .../Markdown/Elements/JobParameters.vue       | 41 +++++++++++--------
 .../components/Markdown/MarkdownContainer.vue | 13 +++++-
 3 files changed, 57 insertions(+), 36 deletions(-)

diff --git a/client/src/components/Markdown/Elements/JobMetrics.vue b/client/src/components/Markdown/Elements/JobMetrics.vue
index 03aab3ffa538..e350e3ac11c1 100644
--- a/client/src/components/Markdown/Elements/JobMetrics.vue
+++ b/client/src/components/Markdown/Elements/JobMetrics.vue
@@ -1,26 +1,31 @@
+<script setup lang="ts">
+import JobMetrics from "@/components/JobMetrics/JobMetrics.vue";
+
+interface JobMetricsProps {
+    jobId: string;
+    title?: string;
+    footer?: string;
+}
+
+withDefaults(defineProps<JobMetricsProps>(), {
+    title: null,
+    footer: null,
+});
+</script>
+
 <template>
     <b-card nobody>
+        <b-card-title v-if="title">
+            <b>{{ title }}</b>
+        </b-card-title>
         <JobMetrics
             class="job-metrics"
-            :job-id="args.job_id"
+            :job-id="jobId"
             :should-show-aws-estimate="false"
             :should-show-carbon-emissions-estimates="false"
             :include-title="false" />
+        <b-card-footer v-if="footer">
+            {{ footer }}
+        </b-card-footer>
     </b-card>
 </template>
-
-<script>
-import JobMetrics from "components/JobMetrics/JobMetrics";
-
-export default {
-    components: {
-        JobMetrics,
-    },
-    props: {
-        args: {
-            type: Object,
-            default: null,
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Markdown/Elements/JobParameters.vue b/client/src/components/Markdown/Elements/JobParameters.vue
index 2b19ab0e9594..049b68757183 100644
--- a/client/src/components/Markdown/Elements/JobParameters.vue
+++ b/client/src/components/Markdown/Elements/JobParameters.vue
@@ -1,21 +1,28 @@
+<script setup lang="ts">
+import JobParameters from "@/components/JobParameters/JobParameters.vue";
+
+interface JobParametersProps {
+    jobId: string;
+    param?: string;
+    title?: string;
+    footer?: string;
+}
+
+withDefaults(defineProps<JobParametersProps>(), {
+    param: undefined,
+    title: null,
+    footer: null,
+});
+</script>
+
 <template>
     <b-card nobody>
-        <JobParameters class="job-parameters" :job-id="args.job_id" :param="args.param" :include-title="false" />
+        <b-card-title v-if="title">
+            <b>{{ title }}</b>
+        </b-card-title>
+        <JobParameters class="job-parameters" :job-id="jobId" :param="param" :include-title="false" />
+        <b-card-footer v-if="footer">
+            {{ footer }}
+        </b-card-footer>
     </b-card>
 </template>
-
-<script>
-import JobParameters from "components/JobParameters/JobParameters";
-
-export default {
-    components: {
-        JobParameters,
-    },
-    props: {
-        args: {
-            type: Object,
-            default: null,
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Markdown/MarkdownContainer.vue b/client/src/components/Markdown/MarkdownContainer.vue
index 13806a855da4..a76c465c10d0 100644
--- a/client/src/components/Markdown/MarkdownContainer.vue
+++ b/client/src/components/Markdown/MarkdownContainer.vue
@@ -148,8 +148,17 @@ function argToBoolean(args, name, booleanDefault) {
             <HistoryDatasetLink v-else-if="name == 'history_dataset_link'" :args="args" />
             <HistoryDatasetIndex v-else-if="name == 'history_dataset_index'" :args="args" />
             <InvocationTime v-else-if="name == 'invocation_time'" :args="args" :invocations="invocations" />
-            <JobMetrics v-else-if="name == 'job_metrics'" :args="args" />
-            <JobParameters v-else-if="name == 'job_parameters'" :args="args" />
+            <JobMetrics
+                v-else-if="name == 'job_metrics'"
+                :job-id="args.job_id"
+                :title="args.title"
+                :footer="args.footer" />
+            <JobParameters
+                v-else-if="name == 'job_parameters'"
+                :job-id="args.job_id"
+                :param="args.param || undefined"
+                :title="args.title"
+                :footer="args.footer" />
             <WorkflowDisplay
                 v-else-if="name == 'workflow_display'"
                 :workflow-id="args.workflow_id"

From 9951577b061305a538de80fe5b94e1845cd8f2ba Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Wed, 29 Nov 2023 12:38:50 -0500
Subject: [PATCH 6/7] Expose more tool information / navigability in UI.

We had a specific request that job parameter displays that "For: Job parameters as table. The output doesn't show what tool was used, it would be good if it did." I don't want to populate the widget directly with information because it might disrupt the flow of the report but I agree it should be navigable.

So I have augmented the widget such that is a title is added - a little info icon will appear in the title span that will show a link to the tool and render the name as it would appear in the tool form. This information should be available in other places for the same reason IMO. So this popover is now used in the job metrics table the same way as well as in the workflow step display Markdown component and in the invocation step display component.
---
 .../Markdown/Elements/JobMetrics.vue          | 30 ++++++++++++--
 .../Markdown/Elements/JobParameters.vue       | 30 ++++++++++++--
 .../Elements/Workflow/WorkflowDisplay.vue     | 10 ++++-
 client/src/components/Tool/ToolLink.vue       | 41 +++++++++++++++++++
 .../src/components/Tool/ToolLinkPopover.vue   | 24 +++++++++++
 .../WorkflowInvocationStep.vue                | 14 ++++++-
 client/src/stores/jobStore.ts                 |  2 +
 lib/galaxy/managers/workflows.py              |  2 +
 lib/galaxy/model/__init__.py                  |  1 +
 9 files changed, 146 insertions(+), 8 deletions(-)
 create mode 100644 client/src/components/Tool/ToolLink.vue
 create mode 100644 client/src/components/Tool/ToolLinkPopover.vue

diff --git a/client/src/components/Markdown/Elements/JobMetrics.vue b/client/src/components/Markdown/Elements/JobMetrics.vue
index e350e3ac11c1..1f6bd4e66d5c 100644
--- a/client/src/components/Markdown/Elements/JobMetrics.vue
+++ b/client/src/components/Markdown/Elements/JobMetrics.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
+import { computed, watch } from "vue";
+
+import { useJobStore } from "@/stores/jobStore";
+
 import JobMetrics from "@/components/JobMetrics/JobMetrics.vue";
+import ToolLinkPopover from "@/components/Tool/ToolLinkPopover.vue";
 
 interface JobMetricsProps {
     jobId: string;
@@ -7,16 +12,35 @@ interface JobMetricsProps {
     footer?: string;
 }
 
-withDefaults(defineProps<JobMetricsProps>(), {
-    title: null,
-    footer: null,
+const props = withDefaults(defineProps<JobMetricsProps>(), {
+    title: undefined,
+    footer: undefined,
 });
+
+const jobStore = useJobStore();
+
+const toolId = computed(() => {
+    return jobStore.getJob(props.jobId)?.tool_id;
+});
+const toolVersion = computed(() => {
+    return jobStore.getJob(props.jobId)?.tool_version;
+});
+
+watch(
+    props,
+    () => {
+        jobStore.fetchJob(props.jobId);
+    },
+    { immediate: true }
+);
 </script>
 
 <template>
     <b-card nobody>
         <b-card-title v-if="title">
             <b>{{ title }}</b>
+            <icon ref="info" icon="info-circle" size="sm" />
+            <ToolLinkPopover :target="() => $refs.info" :tool-id="toolId" :tool-version="toolVersion" />
         </b-card-title>
         <JobMetrics
             class="job-metrics"
diff --git a/client/src/components/Markdown/Elements/JobParameters.vue b/client/src/components/Markdown/Elements/JobParameters.vue
index 049b68757183..804671429f44 100644
--- a/client/src/components/Markdown/Elements/JobParameters.vue
+++ b/client/src/components/Markdown/Elements/JobParameters.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
+import { computed, watch } from "vue";
+
+import { useJobStore } from "@/stores/jobStore";
+
 import JobParameters from "@/components/JobParameters/JobParameters.vue";
+import ToolLinkPopover from "@/components/Tool/ToolLinkPopover.vue";
 
 interface JobParametersProps {
     jobId: string;
@@ -8,17 +13,36 @@ interface JobParametersProps {
     footer?: string;
 }
 
-withDefaults(defineProps<JobParametersProps>(), {
+const props = withDefaults(defineProps<JobParametersProps>(), {
     param: undefined,
-    title: null,
-    footer: null,
+    title: undefined,
+    footer: undefined,
 });
+
+const jobStore = useJobStore();
+
+const toolId = computed(() => {
+    return jobStore.getJob(props.jobId)?.tool_id;
+});
+const toolVersion = computed(() => {
+    return jobStore.getJob(props.jobId)?.tool_version;
+});
+
+watch(
+    props,
+    () => {
+        jobStore.fetchJob(props.jobId);
+    },
+    { immediate: true }
+);
 </script>
 
 <template>
     <b-card nobody>
         <b-card-title v-if="title">
             <b>{{ title }}</b>
+            <icon ref="info" icon="info-circle" size="sm" />
+            <ToolLinkPopover :target="() => $refs.info" :tool-id="toolId" :tool-version="toolVersion" />
         </b-card-title>
         <JobParameters class="job-parameters" :job-id="jobId" :param="param" :include-title="false" />
         <b-card-footer v-if="footer">
diff --git a/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue b/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue
index df9fe146d59f..9a6db0d60771 100644
--- a/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue
+++ b/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue
@@ -7,6 +7,7 @@ import { isEmpty } from "@/utils/utils";
 
 import WorkflowTree from "./WorkflowTree.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
+import ToolLinkPopover from "@/components/Tool/ToolLinkPopover.vue";
 import WorkflowStepIcon from "@/components/WorkflowInvocationState/WorkflowStepIcon.vue";
 import WorkflowStepTitle from "@/components/WorkflowInvocationState/WorkflowStepTitle.vue";
 
@@ -104,7 +105,14 @@ onMounted(async () => {
                 </b-alert>
                 <div v-if="itemContent !== null">
                     <div v-for="step in itemContent?.steps" :key="step.order_index" class="mb-2">
-                        <WorkflowStepIcon v-if="step.type" :step-type="step.type" />
+                        <span :id="`step-icon-${step.order_index}`">
+                            <WorkflowStepIcon v-if="step.type" :step-type="step.type" />
+                        </span>
+                        <ToolLinkPopover
+                            v-if="step.type == 'tool'"
+                            :target="`step-icon-${step.order_index}`"
+                            :tool-id="step.tool_id"
+                            :tool-version="step.tool_version" />
                         <WorkflowStepTitle
                             :step-tool-id="step.tool_id"
                             :step-subworkflow-id="step.subworkflow_id"
diff --git a/client/src/components/Tool/ToolLink.vue b/client/src/components/Tool/ToolLink.vue
new file mode 100644
index 000000000000..f50104dd4cb3
--- /dev/null
+++ b/client/src/components/Tool/ToolLink.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed, watch } from "vue";
+
+import { useToolStore } from "@/stores/toolStore";
+
+const toolStore = useToolStore();
+
+interface ToolLinkProps {
+    toolId: string;
+    toolVersion: string;
+}
+
+const props = defineProps<ToolLinkProps>();
+
+const toolName = computed(() => {
+    if (props.toolId) {
+        return toolStore.getToolNameById(props.toolId);
+    }
+    return "";
+});
+
+const toolLink = computed(() => {
+    return `/root?tool_id=${props.toolId}&tool_version=${props.toolVersion}`;
+});
+
+watch(
+    props,
+    () => {
+        if (props.toolId && !toolStore.getToolForId(props.toolId)) {
+            toolStore.fetchToolForId(props.toolId);
+        }
+    },
+    { immediate: true }
+);
+</script>
+
+<template>
+    <router-link :to="toolLink">
+        <b>{{ toolName || toolId }}</b> (Galaxy Version {{ toolVersion }})
+    </router-link>
+</template>
diff --git a/client/src/components/Tool/ToolLinkPopover.vue b/client/src/components/Tool/ToolLinkPopover.vue
new file mode 100644
index 000000000000..8e05516c27b0
--- /dev/null
+++ b/client/src/components/Tool/ToolLinkPopover.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import ToolLink from "./ToolLink.vue";
+
+interface ToolLinkPopoverProps {
+    target: string | Function;
+    toolId?: string;
+    toolVersion?: string;
+}
+
+withDefaults(defineProps<ToolLinkPopoverProps>(), {
+    toolId: null,
+    toolVersion: null,
+});
+
+// default boundary of scrollParent doesn't work well at all in the workflow display list
+const boundary = "window";
+</script>
+
+<template>
+    <b-popover v-if="toolId" :boundary="boundary" :target="target" triggers="hover">
+        Tool:
+        <ToolLink :tool-id="toolId" :tool-version="toolVersion || 'latest'" />
+    </b-popover>
+</template>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
index 725091be75bd..bab804b2d879 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
@@ -2,7 +2,10 @@
     <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">
-                <WorkflowStepIcon class="portlet-title-icon" :step-type="workflowStepType" />
+                <span :id="`step-icon-${workflowStep.id}`">
+                    <WorkflowStepIcon class="portlet-title-icon" :step-type="workflowStepType" />
+                </span>
+                <ToolLinkPopover :target="`step-icon-${workflowStep.id}`" v-bind="toolProps(workflowStep.id)" />
                 <span class="portlet-title-text">
                     <u class="step-title">
                         <WorkflowStepTitle v-bind="titleProps(workflowStep.id)" />
@@ -93,6 +96,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import GenericHistoryItem from "components/History/Content/GenericItem";
 import LoadingSpan from "components/LoadingSpan";
 import { InvocationStepProvider } from "components/providers";
+import ToolLinkPopover from "components/Tool/ToolLinkPopover";
 import { mapActions, mapState } from "pinia";
 import { useToolStore } from "stores/toolStore";
 import { useWorkflowStore } from "stores/workflowStore";
@@ -112,6 +116,7 @@ export default {
         ParameterStep,
         InvocationStepProvider,
         GenericHistoryItem,
+        ToolLinkPopover,
         WorkflowStepIcon,
         WorkflowStepTitle,
         WorkflowInvocationState: () => import("components/WorkflowInvocationState/WorkflowInvocationState"),
@@ -162,6 +167,13 @@ export default {
         toggleStep() {
             this.expanded = !this.expanded;
         },
+        toolProps(stepIndex) {
+            const workflowStep = this.workflow.steps[stepIndex];
+            return {
+                toolId: workflowStep.tool_id,
+                toolVersion: workflowStep.tool_version,
+            };
+        },
         titleProps(stepIndex) {
             const invocationStep = this.invocation.steps[stepIndex];
             const workflowStep = this.workflow.steps[stepIndex];
diff --git a/client/src/stores/jobStore.ts b/client/src/stores/jobStore.ts
index 8cb0dc3317b7..0de68bde3507 100644
--- a/client/src/stores/jobStore.ts
+++ b/client/src/stores/jobStore.ts
@@ -12,6 +12,8 @@ import { getAppRoot } from "@/onload/loadConfig";
 /* interfaces */
 interface Job {
     id: string;
+    tool_id: string;
+    tool_version: string;
 }
 interface JobDef {
     tool_id: string;
diff --git a/lib/galaxy/managers/workflows.py b/lib/galaxy/managers/workflows.py
index 07c230893438..e882f424c214 100644
--- a/lib/galaxy/managers/workflows.py
+++ b/lib/galaxy/managers/workflows.py
@@ -1140,6 +1140,8 @@ def do_inputs(inputs, values, prefix, step, other_values=None):
                 continue
             if step.type == "tool":
                 tool = trans.app.toolbox.get_tool(step.tool_id, step.tool_version)
+                step_dict["tool_id"] = step.tool_id
+                step_dict["tool_version"] = step.tool_version
                 step_dict["label"] = step.label or tool.name
                 step_dict["inputs"] = do_inputs(tool.inputs, step.state.inputs, "", step)
             elif step.type == "subworkflow":
diff --git a/lib/galaxy/model/__init__.py b/lib/galaxy/model/__init__.py
index 8a90c78ffb11..f341dd308073 100644
--- a/lib/galaxy/model/__init__.py
+++ b/lib/galaxy/model/__init__.py
@@ -1822,6 +1822,7 @@ def to_dict(self, view="collection", system_details=False):
         else:
             rval = super().to_dict(view=view)
         rval["tool_id"] = self.tool_id
+        rval["tool_version"] = self.tool_version
         rval["history_id"] = self.history_id
         if system_details or view == "admin_job_list":
             # System level details that only admins should have.

From debd68e92bea82b3521ddf62374b1a3ed1b8b535 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Fri, 22 Dec 2023 17:25:49 -0500
Subject: [PATCH 7/7] Update client/src/components/Tool/ToolLinkPopover.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: David López <46503462+davelopez@users.noreply.github.com>
---
 client/src/components/Tool/ToolLinkPopover.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Tool/ToolLinkPopover.vue b/client/src/components/Tool/ToolLinkPopover.vue
index 8e05516c27b0..f14d5f94d744 100644
--- a/client/src/components/Tool/ToolLinkPopover.vue
+++ b/client/src/components/Tool/ToolLinkPopover.vue
@@ -8,8 +8,8 @@ interface ToolLinkPopoverProps {
 }
 
 withDefaults(defineProps<ToolLinkPopoverProps>(), {
-    toolId: null,
-    toolVersion: null,
+    toolId: undefined,
+    toolVersion: undefined,
 });
 
 // default boundary of scrollParent doesn't work well at all in the workflow display list