From ae1bad673a9c0361aec33a5068b11556f25ef33a Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Tue, 19 Dec 2023 12:13:44 -0500
Subject: [PATCH] Handle implicit collection mapping in Markdown's IO streams
 directives

---
 .../components/Markdown/Elements/ToolStd.vue  | 68 ++++++++++++++-----
 client/src/components/Markdown/Markdown.vue   |  3 -
 .../components/Markdown/MarkdownContainer.vue |  8 +--
 client/src/stores/jobStore.ts                 |  2 +
 4 files changed, 56 insertions(+), 25 deletions(-)

diff --git a/client/src/components/Markdown/Elements/ToolStd.vue b/client/src/components/Markdown/Elements/ToolStd.vue
index 522d9709ba1e..dc266416f53d 100644
--- a/client/src/components/Markdown/Elements/ToolStd.vue
+++ b/client/src/components/Markdown/Elements/ToolStd.vue
@@ -1,34 +1,70 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, toRef, watch } from "vue";
 
-interface Job {
-    tool_stdout?: string;
-    tool_stderr?: string;
-}
+import { useJobStore } from "@/stores/jobStore";
+
+import { useMappingJobs } from "./handlesMappingJobs";
 
-type JobsMap = {
-    [key: string]: Job;
-};
+import JobSelection from "./JobSelection.vue";
 
 interface ToolStdProps {
-    jobId: string;
+    jobId?: string;
+    implicitCollectionJobsId?: string;
     name: "tool_stderr" | "tool_stdout";
-    jobs: JobsMap;
 }
 
-const props = defineProps<ToolStdProps>();
+const props = withDefaults(defineProps<ToolStdProps>(), {
+    jobId: null,
+    implicitCollectionJobsId: null,
+});
+
+const jobStore = useJobStore();
+
+const jobIdRef = toRef(props, "jobId");
+const implicitCollectionJobsIdRef = toRef(props, "implicitCollectionJobsId");
+
+const { selectJobOptions, selectedJob, targetJobId } = useMappingJobs(jobIdRef, implicitCollectionJobsIdRef);
+
+async function init() {
+    if (targetJobId.value) {
+        jobStore.fetchJob(targetJobId.value);
+    }
+}
+
+watch(
+    targetJobId,
+    () => {
+        init();
+    },
+    { immediate: true }
+);
 
 const jobContent = computed(() => {
-    const job = props.jobs[props.jobId];
-    return job && job[props.name];
+    let content: string | undefined;
+    if (targetJobId.value) {
+        const job = jobStore.getJob(targetJobId.value);
+        content = job && job[props.name];
+    }
+    if (!content && props.name == "tool_stdout") {
+        content = "*No Standard Output Available*";
+    } else if (!content) {
+        content = "*No Standard Error Available*";
+    }
+    return content;
 });
 </script>
 
 <template>
     <b-card nobody class="content-height">
-        <div :class="name" :job_id="jobId">
-            <pre><code class="word-wrap-normal">{{ jobContent }}</code></pre>
-        </div>
+        <JobSelection
+            v-model="selectedJob"
+            :job-id="jobId"
+            :implicit-collection-jobs-id="implicitCollectionJobsId"
+            :select-job-options="selectJobOptions">
+            <div :class="name" :job_id="targetJobId">
+                <pre><code class="word-wrap-normal">{{ jobContent }}</code></pre>
+            </div>
+        </JobSelection>
     </b-card>
 </template>
 
diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index 2d84435e7db5..7fdbf5b15f71 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -54,7 +54,6 @@
                     :collections="collections"
                     :histories="histories"
                     :invocations="invocations"
-                    :jobs="jobs"
                     :time="time"
                     :version="version"
                     :workflows="workflows" />
@@ -134,7 +133,6 @@ export default {
             histories: {},
             collections: {},
             workflows: {},
-            jobs: {},
             invocations: {},
             loading: true,
             workflowID: "",
@@ -193,7 +191,6 @@ export default {
                 this.histories = config.histories || {};
                 this.collections = config.history_dataset_collections || {};
                 this.workflows = config.workflows || {};
-                this.jobs = config.jobs || {};
                 this.invocations = config.invocations || {};
                 this.loading = false;
                 this.workflowID = Object.keys(this.markdownConfig.workflows)[0];
diff --git a/client/src/components/Markdown/MarkdownContainer.vue b/client/src/components/Markdown/MarkdownContainer.vue
index 93db33c4a2df..72f487deb26e 100644
--- a/client/src/components/Markdown/MarkdownContainer.vue
+++ b/client/src/components/Markdown/MarkdownContainer.vue
@@ -49,10 +49,6 @@ const props = defineProps({
         type: Object,
         default: null,
     },
-    jobs: {
-        type: Object,
-        default: null,
-    },
     time: {
         type: String,
         default: null,
@@ -174,8 +170,8 @@ function argToBoolean(args, name, booleanDefault) {
             <ToolStd
                 v-else-if="['tool_stdout', 'tool_stderr'].includes(name)"
                 :job-id="args.job_id"
-                :name="name"
-                :jobs="jobs" />
+                :implicit-collection-jobs-id="args.implicit_collection_jobs_id"
+                :name="name" />
             <HistoryDatasetDisplay
                 v-else-if="['history_dataset_embedded', 'history_dataset_display'].includes(name)"
                 :args="args"
diff --git a/client/src/stores/jobStore.ts b/client/src/stores/jobStore.ts
index 0de68bde3507..bbae01bdf6f4 100644
--- a/client/src/stores/jobStore.ts
+++ b/client/src/stores/jobStore.ts
@@ -14,6 +14,8 @@ interface Job {
     id: string;
     tool_id: string;
     tool_version: string;
+    tool_stdout: string;
+    tool_stderr: string;
 }
 interface JobDef {
     tool_id: string;