Render Useful Markdown Components for Mapped Over Steps

client/src/api/schema/schema.ts

@@ -5495,6 +5495,11 @@ export interface components {
              * @example 0123456789ABCDEF
              */
             id: string;
+            /**
+             * Implicit Collection Jobs Id
+             * @description Encoded ID for the ICJ object describing the collection of jobs corresponding to this collection
+             */
+            implicit_collection_jobs_id?: string | null;
             /**
              * Job Source ID
              * @description The encoded ID of the Job that produced this dataset collection. Used to track the state of the job.
@@ -16846,6 +16851,7 @@ export interface operations {
             /** @description Limit listing of jobs to those that match the history_id. If none, jobs from any history may be returned. */
             /** @description Limit listing of jobs to those that match the specified workflow ID. If none, jobs from any workflow (or from no workflows) may be returned. */
             /** @description Limit listing of jobs to those that match the specified workflow invocation ID. If none, jobs from any workflow invocation (or from no workflows) may be returned. */
+            /** @description Limit listing of jobs to those that match the specified implicit collection job ID. If none, jobs from any implicit collection execution (or from no implicit collection execution) may be returned. */
             /** @description Sort results by specified field. */
             /**
              * @description A mix of free text and GitHub-style tags used to filter the index operation.
@@ -16897,6 +16903,7 @@ export interface operations {
                 history_id?: string | null;
                 workflow_id?: string | null;
                 invocation_id?: string | null;
+                implicit_collection_jobs_id?: string | null;
                 order_by?: components["schemas"]["JobIndexSortByEnum"];
                 search?: string | null;
                 limit?: number;

client/src/components/JobMetrics/JobMetrics.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, unref } from "vue";
+import { computed, ref, unref, watch } from "vue";
 
 import { useJobMetricsStore } from "@/stores/jobMetricsStore";
 
@@ -60,7 +60,14 @@ async function getJobMetrics() {
         await jobMetricsStore.fetchJobMetricsForDatasetId(props.datasetId, props.datasetType);
     }
 }
-getJobMetrics();
+
+watch(
+    props,
+    () => {
+        getJobMetrics();
+    },
+    { immediate: true }
+);
 
 const ec2Instances = ref<EC2[]>();
 import("./awsEc2ReferenceData.js").then((data) => (ec2Instances.value = data.ec2Instances));

client/src/components/JobParameters/JobParameters.vue

@@ -108,17 +108,25 @@ export default {
             return parameter ? parameter.value : `Parameter "${this.param}" is not found!`;
         },
     },
+    watch: {
+        jobId: function (newValue) {
+            this.initJob();
+        },
+    },
     created: function () {
-        let url;
-        if (this.jobId) {
-            url = `${getAppRoot()}api/jobs/${this.jobId}/parameters_display`;
-        } else {
-            url = `${getAppRoot()}api/datasets/${this.datasetId}/parameters_display?hda_ldda=${this.datasetType}`;
-        }
-        this.ajaxCall(url);
-        this.isSingleParam = this.param !== undefined && this.param !== "undefined";
+        this.initJob();
     },
     methods: {
+        initJob() {
+            let url;
+            if (this.jobId) {
+                url = `${getAppRoot()}api/jobs/${this.jobId}/parameters_display`;
+            } else {
+                url = `${getAppRoot()}api/datasets/${this.datasetId}/parameters_display?hda_ldda=${this.datasetType}`;
+            }
+            this.ajaxCall(url);
+            this.isSingleParam = this.param !== undefined && this.param !== "undefined";
+        },
         appRoot: function () {
             return getAppRoot();
         },

client/src/components/Markdown/Elements/JobMetrics.vue

@@ -1,35 +1,57 @@
 <script setup lang="ts">
-import { computed, watch } from "vue";
+import { computed, toRef, watch } from "vue";
 
 import { useJobStore } from "@/stores/jobStore";
 
+import { useMappingJobs } from "./handlesMappingJobs";
+
+import JobSelection from "./JobSelection.vue";
 import JobMetrics from "@/components/JobMetrics/JobMetrics.vue";
 import ToolLinkPopover from "@/components/Tool/ToolLinkPopover.vue";
 
 interface JobMetricsProps {
-    jobId: string;
+    jobId?: string;
+    implicitCollectionJobsId?: string;
     title?: string;
     footer?: string;
 }
 
 const props = withDefaults(defineProps<JobMetricsProps>(), {
+    jobId: undefined,
+    implicitCollectionJobsId: undefined,
     title: undefined,
     footer: undefined,
 });
 
 const jobStore = useJobStore();
 
 const toolId = computed(() => {
-    return jobStore.getJob(props.jobId)?.tool_id;
+    if (targetJobId.value) {
+        return jobStore.getJob(targetJobId.value)?.tool_id;
+    }
+    return undefined;
 });
 const toolVersion = computed(() => {
-    return jobStore.getJob(props.jobId)?.tool_version;
+    if (targetJobId.value) {
+        return jobStore.getJob(targetJobId.value)?.tool_version;
+    }
+    return undefined;
 });
+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(
-    props,
+    targetJobId,
     () => {
-        jobStore.fetchJob(props.jobId);
+        init();
     },
     { immediate: true }
 );
@@ -42,12 +64,19 @@ watch(
             <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"
+        <JobSelection
+            v-model="selectedJob"
             :job-id="jobId"
-            :should-show-aws-estimate="false"
-            :should-show-carbon-emissions-estimates="false"
-            :include-title="false" />
+            :implicit-collection-jobs-id="implicitCollectionJobsId"
+            :select-job-options="selectJobOptions">
+            <JobMetrics
+                v-if="targetJobId"
+                class="job-metrics"
+                :job-id="targetJobId"
+                :should-show-aws-estimate="false"
+                :should-show-carbon-emissions-estimates="false"
+                :include-title="false" />
+        </JobSelection>
         <b-card-footer v-if="footer">
             {{ footer }}
         </b-card-footer>

client/src/components/Markdown/Elements/JobParameters.vue

@@ -1,19 +1,25 @@
 <script setup lang="ts">
-import { computed, watch } from "vue";
+import { computed, toRef, watch } from "vue";
 
 import { useJobStore } from "@/stores/jobStore";
 
+import { useMappingJobs } from "./handlesMappingJobs";
+
+import JobSelection from "./JobSelection.vue";
 import JobParameters from "@/components/JobParameters/JobParameters.vue";
 import ToolLinkPopover from "@/components/Tool/ToolLinkPopover.vue";
 
 interface JobParametersProps {
-    jobId: string;
+    jobId?: string;
+    implicitCollectionJobsId?: string;
     param?: string;
     title?: string;
     footer?: string;
 }
 
 const props = withDefaults(defineProps<JobParametersProps>(), {
+    jobId: undefined,
+    implicitCollectionJobsId: undefined,
     param: undefined,
     title: undefined,
     footer: undefined,
@@ -22,16 +28,32 @@ const props = withDefaults(defineProps<JobParametersProps>(), {
 const jobStore = useJobStore();
 
 const toolId = computed(() => {
-    return jobStore.getJob(props.jobId)?.tool_id;
+    if (targetJobId.value) {
+        return jobStore.getJob(targetJobId.value)?.tool_id;
+    }
+    return undefined;
 });
 const toolVersion = computed(() => {
-    return jobStore.getJob(props.jobId)?.tool_version;
+    if (targetJobId.value) {
+        return jobStore.getJob(targetJobId.value)?.tool_version;
+    }
+    return undefined;
 });
+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(
-    props,
+    targetJobId,
     () => {
-        jobStore.fetchJob(props.jobId);
+        init();
     },
     { immediate: true }
 );
@@ -44,7 +66,14 @@ watch(
             <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" />
+        <JobSelection
+            v-model="selectedJob"
+            :job-id="jobId"
+            :implicit-collection-jobs-id="implicitCollectionJobsId"
+            :select-job-options="selectJobOptions">
+            <JobParameters class="job-parameters" :job-id="targetJobId" :param="param" :include-title="false" />
+            {{ targetJobId }}
+        </JobSelection>
         <b-card-footer v-if="footer">
             {{ footer }}
         </b-card-footer>

client/src/components/Markdown/Elements/JobSelection.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { SelectOption } from "./handlesMappingJobs";
+
+interface JobSelectionProps {
+    jobId?: string;
+    implicitCollectionJobsId?: string;
+    selectJobOptions: SelectOption[];
+    value?: String | undefined;
+}
+
+const emit = defineEmits<{
+    (e: "input", id: string | undefined): void;
+}>();
+
+function handleInput(value: string | undefined) {
+    emit("input", value);
+}
+defineProps<JobSelectionProps>();
+</script>
+
+<template>
+    <div>
+        <slot v-if="jobId"> </slot>
+        <div v-else>
+            <b-navbar>
+                <b-collapse id="nav-text-collapse" is-nav>
+                    <b-navbar-nav>
+                        <b-nav-text>Select Job</b-nav-text>
+                    </b-navbar-nav>
+                    <b-nav-form>
+                        <b-input-group size="sm">
+                            <b-form-select
+                                :value="value"
+                                class="text-right"
+                                :options="selectJobOptions"
+                                @input="handleInput"></b-form-select>
+                        </b-input-group>
+                    </b-nav-form>
+                </b-collapse>
+            </b-navbar>
+            <slot />
+        </div>
+    </div>
+</template>