Merge remote-tracking branch 'upstream/release_24.2' into dev

Author: ahmedhamidawan

client/src/api/index.ts

@@ -207,7 +207,7 @@ export function isHDA(entry?: HistoryItemSummary): entry is HDASummary {
 /**
  * Returns true if the given entry is a top level HDCA and false for sub-collections.
  */
-export function isHDCA(entry?: CollectionEntry): entry is HDCASummary {
+export function isHDCA(entry?: HistoryItemSummary | CollectionEntry): entry is HDCASummary {
     return (
         entry !== undefined && "history_content_type" in entry && entry.history_content_type === "dataset_collection"
     );

client/src/components/Form/Elements/FormData/FormData.vue

@@ -4,7 +4,16 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BFormCheckbox } from "bootstrap-vue";
 import { computed, onMounted, type Ref, ref, watch } from "vue";
 
-import { isDatasetElement, isDCE } from "@/api";
+import {
+    type DCESummary,
+    type HDAObject,
+    type HistoryItemSummary,
+    isDatasetElement,
+    isDCE,
+    isHDCA,
+    isHistoryItem,
+} from "@/api";
+import type { HistoryContentType } from "@/api/datasets";
 import { getGalaxyInstance } from "@/app";
 import type { CollectionType } from "@/components/History/adapters/buildCollectionModal";
 import { useDatatypesMapper } from "@/composables/datatypesMapper";
@@ -27,6 +36,8 @@ type SelectOption = {
     value: DataOption | null;
 };
 
+type HistoryOrCollectionItem = HistoryItemSummary | DCESummary;
+
 const props = withDefaults(
     defineProps<{
         loading?: boolean;
@@ -51,7 +62,7 @@ const props = withDefaults(
         value: undefined,
         extensions: () => [],
         type: "data",
-        collectionTypes: undefined,
+        collectionTypes: () => [],
         flavor: undefined,
         tag: undefined,
         userDefinedTitle: undefined,
@@ -73,7 +84,7 @@ const currentField = ref(0);
 const currentHighlighting: Ref<string | null> = ref(null);
 
 // Drag/Drop related values
-const dragData: Ref<EventData | null> = ref(null);
+const dragData: Ref<EventData[]> = ref([]);
 const dragTarget: Ref<EventTarget | null> = ref(null);
 
 const workflowTab = ref("");
@@ -339,35 +350,50 @@ function getSourceType(val: DataOption) {
 }
 
 /** Add values from drag/drop or data dialog sources */
-function handleIncoming(incoming: Record<string, unknown>, partial = true) {
+function handleIncoming(incoming: Record<string, unknown> | Record<string, unknown>[], partial = true) {
     if (incoming) {
         const values = Array.isArray(incoming) ? incoming : [incoming];
-        const extensions = values.map((v) => v.extension || v.elements_datatypes).filter((v) => (v ? true : false));
+
+        // ensure all incoming values are isHistoryOrCollectionItem
+        if (!values.every(isHistoryOrCollectionItem)) {
+            return false;
+        }
+
+        const extensions = Array.from(
+            new Set(
+                values
+                    .map(getExtensionsForItem)
+                    .flat()
+                    .filter((v) => v !== null && v !== undefined)
+            )
+        ) as string[];
+
         if (!canAcceptDatatype(extensions)) {
             return false;
         }
-        if (values.some((v) => !canAcceptSrc(v.history_content_type, v.collection_type))) {
+        if (
+            values.some((v) => {
+                const { historyContentType } = getSrcAndContentType(v);
+                const collectionType = "collection_type" in v && v.collection_type ? v.collection_type : undefined;
+                return !canAcceptSrc(historyContentType, collectionType);
+            })
+        ) {
             return false;
         }
         if (values.length > 0) {
             const incomingValues: Array<DataOption> = [];
-            values.forEach((v) => {
+            values.forEach((currVal) => {
                 // Map incoming objects to data option values
-                let newSrc;
-                if (isDCE(v)) {
-                    if (isDatasetElement(v)) {
-                        newSrc = SOURCE.DATASET;
-                        v = v.object;
-                    } else {
-                        newSrc = SOURCE.COLLECTION_ELEMENT;
-                    }
+                const { newSrc, datasetCollectionDataset } = getSrcAndContentType(currVal);
+                let v: HistoryOrCollectionItem | HDAObject;
+                if (datasetCollectionDataset) {
+                    v = datasetCollectionDataset;
                 } else {
-                    newSrc =
-                        v.src || (v.history_content_type === "dataset_collection" ? SOURCE.COLLECTION : SOURCE.DATASET);
+                    v = currVal;
                 }
-                const newHid = v.hid;
+                const newHid = isHistoryItem(v) ? v.hid : undefined;
                 const newId = v.id;
-                const newName = v.name ? v.name : newId;
+                const newName = isHistoryItem(v) && v.name ? v.name : newId;
                 const newValue: DataOption = {
                     id: newId,
                     src: newSrc,
@@ -378,10 +404,11 @@ function handleIncoming(incoming: Record<string, unknown>, partial = true) {
                     keep: true,
                     tags: [],
                 };
-                if (v.collection_type && props.collectionTypes?.length > 0) {
-                    if (!props.collectionTypes.includes(v.collection_type)) {
+                if (isHistoryItem(v) && isHDCA(v) && props.collectionTypes?.length > 0) {
+                    const itemCollectionType = v.collection_type;
+                    if (!props.collectionTypes.includes(itemCollectionType as CollectionType)) {
                         const mapOverType = props.collectionTypes.find((collectionType) =>
-                            v.collection_type.endsWith(collectionType)
+                            itemCollectionType.endsWith(collectionType)
                         );
                         if (!mapOverType) {
                             return false;
@@ -445,6 +472,9 @@ function onBrowse() {
 }
 
 function canAcceptDatatype(itemDatatypes: string | Array<string>) {
+    // TODO: Shouldn't we enforce a datatype (at least "data") because of the case:
+    // What if the drop item is a `DCESummary`, then it has no extension (?) and we
+    // pass it as a valid item regardless of its elements' datatypes.
     if (!(props.extensions?.length > 0) || props.extensions.includes("data")) {
         return true;
     }
@@ -463,7 +493,40 @@ function canAcceptDatatype(itemDatatypes: string | Array<string>) {
     return true;
 }
 
-function canAcceptSrc(historyContentType: "dataset" | "dataset_collection", collectionType?: CollectionType) {
+/**
+ * Given an element, determine the source and content type.
+ * Also returns the collection element dataset object if it exists.
+ */
+function getSrcAndContentType(element: HistoryOrCollectionItem): {
+    historyContentType: HistoryContentType;
+    newSrc: string;
+    datasetCollectionDataset: HDAObject | undefined;
+} {
+    let historyContentType: HistoryContentType;
+    let newSrc: string;
+    let datasetCollectionDataset: HDAObject | undefined;
+    if (isDCE(element)) {
+        if (isDatasetElement(element)) {
+            historyContentType = "dataset";
+            newSrc = SOURCE.DATASET;
+            datasetCollectionDataset = element.object;
+        } else {
+            historyContentType = "dataset_collection";
+            newSrc = SOURCE.COLLECTION_ELEMENT;
+        }
+    } else {
+        historyContentType = element.history_content_type;
+        newSrc =
+            "src" in element && typeof element.src === "string"
+                ? element.src
+                : historyContentType === "dataset_collection"
+                ? SOURCE.COLLECTION
+                : SOURCE.DATASET;
+    }
+    return { historyContentType, newSrc, datasetCollectionDataset };
+}
+
+function canAcceptSrc(historyContentType: "dataset" | "dataset_collection", collectionType?: string) {
     if (historyContentType === "dataset") {
         // HDA can only be fed into data parameters, not collection parameters
         if (props.type === "data") {
@@ -485,7 +548,7 @@ function canAcceptSrc(historyContentType: "dataset" | "dataset_collection", coll
             // if no collection_type is set all collections are valid
             return true;
         } else {
-            if (props.collectionTypes.includes(collectionType)) {
+            if (props.collectionTypes.includes(collectionType as CollectionType)) {
                 return true;
             }
             if (props.collectionTypes.some((element) => collectionType.endsWith(element))) {
@@ -511,31 +574,37 @@ const effectiveCollectionTypes = props.collectionTypes?.filter((collectionType)
 );
 const currentCollectionTypeTab = ref(effectiveCollectionTypes?.[0]);
 
+/**
+ * Get the extension(s) for a given item
+ */
+function getExtensionsForItem(item: HistoryOrCollectionItem): string | string[] | null {
+    return "extension" in item ? item.extension : "elements_datatypes" in item ? item.elements_datatypes : null;
+}
+
+function isHistoryOrCollectionItem(item: EventData): item is HistoryOrCollectionItem {
+    return isHistoryItem(item) || isDCE(item);
+}
+
 // Drag/Drop event handlers
 function onDragEnter(evt: DragEvent) {
-    const eventData = eventStore.getDragData();
-    if (eventData) {
-        let eventFiles: any[];
-        if (eventStore.multipleDragData) {
-            eventFiles = Object.values(eventData);
-        } else {
-            eventFiles = [eventData];
-        }
+    const eventData = eventStore.getDragItems();
 
+    if (eventData?.length) {
         let highlightingState = "success";
-        for (const eventFile of eventFiles) {
-            const extensions = (eventFile.extension as string) || (eventFile.elements_datatypes as Array<string>);
-            if (!canAcceptDatatype(extensions)) {
-                highlightingState = "warning";
-                $emit("alert", `${extensions} is not an acceptable format for this parameter.`);
-            } else if (
-                !canAcceptSrc(
-                    eventFile.history_content_type as "dataset" | "dataset_collection",
-                    eventFile.collection_type as CollectionType
-                )
-            ) {
-                highlightingState = "warning";
-                $emit("alert", `${eventFile.history_content_type} is not an acceptable input type for this parameter.`);
+        for (const item of eventData) {
+            if (isHistoryOrCollectionItem(item)) {
+                const extensions = getExtensionsForItem(item);
+                const { historyContentType } = getSrcAndContentType(item);
+                const collectionType =
+                    "collection_type" in item && item.collection_type ? item.collection_type : undefined;
+
+                if (extensions && !canAcceptDatatype(extensions)) {
+                    highlightingState = "warning";
+                    $emit("alert", `${extensions} is not an acceptable format for this parameter.`);
+                } else if (!canAcceptSrc(historyContentType, collectionType)) {
+                    highlightingState = "warning";
+                    $emit("alert", `${historyContentType} is not an acceptable input type for this parameter.`);
+                }
             }
         }
         currentHighlighting.value = highlightingState;
@@ -568,14 +637,8 @@ function onDragLeave(evt: DragEvent) {
 }
 
 function onDrop(e: DragEvent) {
-    if (dragData.value) {
-        let accept = false;
-        if (eventStore.multipleDragData) {
-            accept = handleIncoming(Object.values(dragData.value) as any, false);
-        } else {
-            accept = handleIncoming(dragData.value);
-        }
-        if (accept) {
+    if (dragData.value.length) {
+        if (handleIncoming(dragData.value, dragData.value.length === 1)) {
             currentHighlighting.value = "success";
             if (props.workflowRun) {
                 workflowTab.value = "view";
@@ -584,11 +647,11 @@ function onDrop(e: DragEvent) {
             currentHighlighting.value = "warning";
         }
         $emit("alert", undefined);
-        dragData.value = null;
+        dragData.value = [];
         clearHighlighting();
     } else if (props.workflowRun && e.dataTransfer?.files?.length) {
         $emit("alert", undefined);
-        dragData.value = null;
+        dragData.value = [];
         clearHighlighting();
     }
 }

client/src/components/Form/Elements/FormData/types.ts

@@ -1,6 +1,6 @@
 export type DataOption = {
     id: string;
-    hid: number;
+    hid?: number;
     is_dataset?: boolean;
     keep: boolean;
     batch: boolean;

client/src/components/JobInformation/JobDetails.vue

@@ -1,6 +1,7 @@
 <template>
     <b-card>
         <JobInformation :job_id="id" :include-times="true">
+            <!-- only needed for admin job component -->
             <tr v-if="hasTraceback">
                 <td>Traceback</td>
                 <td>

client/src/components/WorkflowInvocationState/JobStep.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BTab, BTabs } from "bootstrap-vue";
-import Vue, { computed, ref, watch } from "vue";
+import { computed } from "vue";
 
-import { GalaxyApi } from "@/api";
-import { type JobBaseModel, type JobDetails } from "@/api/jobs";
+import { type JobBaseModel } from "@/api/jobs";
 import { getHeaderClass, iconClasses } from "@/composables/useInvocationGraph";
-import { rethrowSimple } from "@/utils/simple-error";
 
 import JobDetailsDisplayed from "../JobInformation/JobDetails.vue";
-import LoadingSpan from "../LoadingSpan.vue";
 
 interface Props {
     jobs: JobBaseModel[];
@@ -19,42 +16,14 @@ const props = withDefaults(defineProps<Props>(), {
     jobs: () => [],
 });
 
-const loading = ref(true);
-const initialLoading = ref(true);
-const jobsDetails = ref<{ [key: string]: JobDetails }>({});
+const firstJob = computed(() => props.jobs[0]);
+const jobCount = computed(() => props.jobs.length);
 
-watch(
-    () => props.jobs,
-    async (propJobs: JobBaseModel[]) => {
-        loading.value = true;
-        for (const job of propJobs) {
-            const { data, error } = await GalaxyApi().GET("/api/jobs/{job_id}", {
-                params: {
-                    path: { job_id: job.id },
-                    query: { full: true },
-                },
-            });
-            Vue.set(jobsDetails.value, job.id, data);
-            if (error) {
-                rethrowSimple(error);
-            }
-        }
-        if (initialLoading.value) {
-            initialLoading.value = false;
-        }
-        loading.value = false;
-    },
-    { immediate: true }
-);
-
-const firstJob = computed(() => Object.values(jobsDetails.value)[0]);
-const jobCount = computed(() => Object.keys(jobsDetails.value).length);
-
-function getIcon(job: JobDetails) {
+function getIcon(job: JobBaseModel) {
     return iconClasses[job.state];
 }
 
-function getTabClass(job: JobDetails) {
+function getTabClass(job: JobBaseModel) {
     return {
         ...getHeaderClass(job.state),
         "d-flex": true,
@@ -64,16 +33,13 @@ function getTabClass(job: JobDetails) {
 </script>
 
 <template>
-    <BAlert v-if="initialLoading" variant="info" show>
-        <LoadingSpan message="Loading Jobs" />
-    </BAlert>
-    <BAlert v-else-if="!jobsDetails || !jobCount" variant="info" show> No jobs found for this step. </BAlert>
+    <BAlert v-if="!jobCount" variant="info" show> No jobs found for this step. </BAlert>
     <div v-else-if="jobCount === 1 && firstJob">
-        <JobDetailsDisplayed :job="firstJob" />
+        <JobDetailsDisplayed :job-id="firstJob.id" />
     </div>
-    <BTabs v-else vertical pills card nav-class="p-0" active-tab-class="p-0">
+    <BTabs v-else lazy vertical pills card nav-class="p-0" active-tab-class="p-0">
         <BTab
-            v-for="job in jobsDetails"
+            v-for="job in jobs"
             :key="job.id"
             data-description="workflow invocation job"
             :title-item-class="getTabClass(job)"
@@ -87,7 +53,7 @@ function getTabClass(job: JobDetails) {
                     :spin="getIcon(job)?.spin" />
             </template>
             <div>
-                <JobDetailsDisplayed :job="job" />
+                <JobDetailsDisplayed :job-id="job.id" />
             </div>
         </BTab>
     </BTabs>