From 05c0cc1bacc0d6415808352b5a84db7f7c47bff5 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Wed, 29 Nov 2023 12:38:50 -0500
Subject: [PATCH] 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 75ead210505c..0cb0460f57a4 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 as vuexMapActions, mapGetters } from "vuex";
 
 import JobStep from "./JobStep";
@@ -110,6 +114,7 @@ export default {
         ParameterStep,
         InvocationStepProvider,
         GenericHistoryItem,
+        ToolLinkPopover,
         WorkflowStepIcon,
         WorkflowStepTitle,
         WorkflowInvocationState: () => import("components/WorkflowInvocationState/WorkflowInvocationState"),
@@ -148,6 +153,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.