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 @@
{{ title }}
+
+
+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(), {
+const props = withDefaults(defineProps(), {
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 }
+);
{{ title }}
+
+
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 () => {
-
+
+
+
+
+import { computed, watch } from "vue";
+
+import { useToolStore } from "@/stores/toolStore";
+
+const toolStore = useToolStore();
+
+interface ToolLinkProps {
+ toolId: string;
+ toolVersion: string;
+}
+
+const props = defineProps();
+
+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 }
+);
+
+
+
+
+ {{ toolName || toolId }} (Galaxy Version {{ toolVersion }})
+
+
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 @@
+
+
+
+
+ Tool:
+
+
+
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 @@