From b48687f5bb7ceac33854e2a13e91c513659ccdb2 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 11 Jun 2023 10:03:11 +0200
Subject: [PATCH 01/86] Initial commit, prep FormData component placeholder and
 connect to FormElement

---
 .../Form/Elements/FormData/FormData.vue         |  7 +++++++
 client/src/components/Form/FormElement.vue      | 17 ++++++++++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/Form/Elements/FormData/FormData.vue

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
new file mode 100644
index 000000000000..5d707e0f000b
--- /dev/null
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import FormSelect from "@/components/Form/Elements/FormSelect.vue";
+</script>
+
+<template>
+    <div>placeholder</div>
+</template>
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index bebef6ffb639..634e60e01b4a 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -10,6 +10,7 @@ import type { FormParameterAttributes, FormParameterTypes, FormParameterValue }
 
 import FormBoolean from "./Elements/FormBoolean.vue";
 import FormColor from "./Elements/FormColor.vue";
+import FormData from "./Elements/FormData/FormData.vue";
 import FormDataDialog from "./Elements/FormDataDialog.vue";
 import FormDirectory from "./Elements/FormDirectory.vue";
 import FormDrilldown from "./Elements/FormDrilldown/FormDrilldown.vue";
@@ -205,9 +206,9 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
                     <label :for="props.id">{{ props.title }}</label>
                 </span>
             </span>
-            <span v-else-if="props.title" class="ui-form-title-text"
-                ><label :for="props.id">{{ props.title }}</label></span
-            >
+            <span v-else-if="props.title" class="ui-form-title-text">
+                <label :for="props.id">{{ props.title }}</label>
+            </span>
 
             <span
                 v-if="isRequired && isRequiredType && props.title"
@@ -273,6 +274,16 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
                 :options="attrs.options"
                 :optional="attrs.optional"
                 :multiple="attrs.multiple" />
+            <FormData
+                v-else-if="['data', 'data_collection'].includes(props.type)"
+                v-model="currentValue"
+                :id="id"
+                :extension="attrs.extension"
+                :flavor="attrs.flavor"
+                :multiple="attrs.multiple"
+                :optional="attrs.optional"
+                :options="attrs.options"
+                :tag="attrs.tag" />
             <FormDrilldown
                 v-else-if="props.type === 'drill_down'"
                 :id="id"

From dae798c2ac5189a21cc705fa1e197f2e31960404 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 28 Jun 2023 18:21:09 +0200
Subject: [PATCH 02/86] Sketch out required props

---
 .../Form/Elements/FormData/FormData.vue       | 24 +++++++++++++++++++
 client/src/components/Form/FormElement.vue    |  3 ++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 5d707e0f000b..f41a2ac07288 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -1,5 +1,29 @@
 <script setup lang="ts">
 import FormSelect from "@/components/Form/Elements/FormSelect.vue";
+
+const $emit = defineEmits(["input"]);
+
+const props = withDefaults(
+    defineProps<{
+        multiple?: boolean;
+        optional?: boolean;
+        options: Array<[string, string]>;
+        value?: Array<string> | string;
+        extensions?: Array<string>;
+        type?: string;
+        flavor?: string;
+        tag?: string;
+    }>(),
+    {
+        multiple: false,
+        optional: false,
+        value: null,
+        extensions: () => [],
+        type: null,
+        flavor: null,
+        tag: null,
+    }
+);
 </script>
 
 <template>
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index 634e60e01b4a..8b21afb9e3e3 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -283,7 +283,8 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
                 :multiple="attrs.multiple"
                 :optional="attrs.optional"
                 :options="attrs.options"
-                :tag="attrs.tag" />
+                :tag="attrs.tag"
+                :type="props.type" />
             <FormDrilldown
                 v-else-if="props.type === 'drill_down'"
                 :id="id"

From 9c6cb95632839a7d7a4c9d25e98326891f51576f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 28 Jun 2023 19:43:29 +0200
Subject: [PATCH 03/86] Prep form data prop typing

---
 .../Form/Elements/FormData/FormData.vue       | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index f41a2ac07288..b4f594384122 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -3,12 +3,26 @@ import FormSelect from "@/components/Form/Elements/FormSelect.vue";
 
 const $emit = defineEmits(["input"]);
 
+interface DataOption {
+    id: string;
+    keep: boolean;
+    hid: string;
+    name: string;
+    src: string;
+    tags: Array<string>;
+}
+
+interface DataOptions {
+    hda: Array<[string, DataOption]>;
+    hdca: Array<[string, DataOption]>;
+}
+
 const props = withDefaults(
     defineProps<{
         multiple?: boolean;
         optional?: boolean;
-        options: Array<[string, string]>;
-        value?: Array<string> | string;
+        options: DataOptions;
+        value?: Array<DataOption>;
         extensions?: Array<string>;
         type?: string;
         flavor?: string;
@@ -19,7 +33,7 @@ const props = withDefaults(
         optional: false,
         value: null,
         extensions: () => [],
-        type: null,
+        type: "data",
         flavor: null,
         tag: null,
     }

From e5252dbe77ee1b5d67395387140c86220b5f5bea Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 30 Jun 2023 14:38:57 +0200
Subject: [PATCH 04/86] Draft data input elements

---
 .../Form/Elements/FormData/FormData.vue       |  33 +-
 .../Form/Elements/FormData/FormDataSelect.vue | 168 ++++++
 .../Form/Elements/FormData/types.ts           |  17 +
 .../Form/Elements/FormData/utilities.js       | 502 ++++++++++++++++++
 .../Form/Elements/FormData/variants.js        | 114 ++++
 .../components/Form/Elements/FormSelect.vue   |   8 +-
 6 files changed, 821 insertions(+), 21 deletions(-)
 create mode 100644 client/src/components/Form/Elements/FormData/FormDataSelect.vue
 create mode 100644 client/src/components/Form/Elements/FormData/types.ts
 create mode 100644 client/src/components/Form/Elements/FormData/utilities.js
 create mode 100644 client/src/components/Form/Elements/FormData/variants.js

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index b4f594384122..3b4607717d1d 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -1,28 +1,16 @@
 <script setup lang="ts">
-import FormSelect from "@/components/Form/Elements/FormSelect.vue";
+import { computed } from "vue";
+import FormSelect from "./FormDataSelect.vue";
+import type { DataOption, DataOptions, DataValue } from "./types";
 
 const $emit = defineEmits(["input"]);
 
-interface DataOption {
-    id: string;
-    keep: boolean;
-    hid: string;
-    name: string;
-    src: string;
-    tags: Array<string>;
-}
-
-interface DataOptions {
-    hda: Array<[string, DataOption]>;
-    hdca: Array<[string, DataOption]>;
-}
-
 const props = withDefaults(
     defineProps<{
         multiple?: boolean;
         optional?: boolean;
         options: DataOptions;
-        value?: Array<DataOption>;
+        value?: DataValue;
         extensions?: Array<string>;
         type?: string;
         flavor?: string;
@@ -38,8 +26,19 @@ const props = withDefaults(
         tag: null,
     }
 );
+
+const currentValue = computed({
+    get: () => {
+        console.log("in", props.value.values);
+        return props.value.values;
+    },
+    set: (val) => {
+        console.log("out", val);
+        $emit("input", val);
+    },
+});
 </script>
 
 <template>
-    <div>placeholder</div>
+    <form-select v-model="currentValue" :multiple="multiple" :optional="optional" :options="options.hda" />
 </template>
diff --git a/client/src/components/Form/Elements/FormData/FormDataSelect.vue b/client/src/components/Form/Elements/FormData/FormDataSelect.vue
new file mode 100644
index 000000000000..0e28c2da3fe7
--- /dev/null
+++ b/client/src/components/Form/Elements/FormData/FormDataSelect.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { computed, type ComputedRef, onMounted, watch } from "vue";
+import Multiselect from "vue-multiselect";
+
+import { useMultiselect } from "@/composables/useMultiselect";
+import { uid } from "@/utils/utils";
+
+import type { DataOption, DataValue } from "./types";
+
+type SelectValue = DataOption | null;
+const { ariaExpanded, onOpen, onClose } = useMultiselect();
+
+interface SelectOption {
+    label: string;
+    value: SelectValue;
+}
+
+const props = withDefaults(
+    defineProps<{
+        id?: string;
+        multiple?: boolean;
+        optional?: boolean;
+        options: Array<DataOption>;
+        value?: Array<DataOption>;
+    }>(),
+    {
+        id: `form-select-${uid()}`,
+        multiple: false,
+        optional: false,
+        value: null,
+    }
+);
+
+const emit = defineEmits<{
+    (e: "input", value: SelectValue | Array<SelectValue>): void;
+}>();
+
+/**
+ * Determine dom wrapper class
+ */
+const cls: ComputedRef<string> = computed(() => {
+    return props.multiple ? "form-select-multiple" : "form-select-single";
+});
+
+/**
+ * Configure deselect label
+ */
+const deselectLabel: ComputedRef<string> = computed(() => {
+    return props.multiple ? "Click to remove" : "";
+});
+
+/**
+ * Translates input options for consumption by the
+ * select component into an array of objects
+ */
+const formattedOptions: ComputedRef<Array<SelectOption>> = computed(() => {
+    const result: Array<SelectOption> = props.options.map((option) => ({
+        label: option.name,
+        value: option,
+    }));
+    if (props.optional && !props.multiple) {
+        result.unshift({
+            label: "Nothing selected",
+            value: null,
+        });
+    }
+    return result;
+});
+
+/**
+ * Tracks if the select field has options
+ */
+const hasOptions: ComputedRef<Boolean> = computed(() => {
+    return formattedOptions.value.length > 0;
+});
+
+/**
+ * Provides initial value if necessary
+ */
+const initialValue: ComputedRef<SelectValue> = computed(() => {
+    if (props.value === null && !props.optional && hasOptions.value) {
+        const v = formattedOptions.value[0];
+        if (v) {
+            return v.value;
+        }
+    }
+    return null;
+});
+
+/**
+ * Configure selected label
+ */
+const selectedLabel: ComputedRef<string> = computed(() => {
+    return props.multiple ? "Selected" : "";
+});
+
+/**
+ * Tracks selected values
+ */
+const selectedValues: ComputedRef<Array<SelectValue>> = computed(() => {
+    return Array.isArray(props.value) ? props.value : [props.value];
+});
+
+/**
+ * Tracks current value and emits changes
+ */
+const currentValue = computed({
+    get: () => formattedOptions.value.filter((option: SelectOption) => selectedValues.value.includes(option.value)),
+    set: (val: Array<SelectOption> | SelectOption): void => {
+        if (Array.isArray(val)) {
+            if (val.length > 0) {
+                const values: Array<SelectValue> = val.map((v: SelectOption) => v.value);
+                emit("input", values);
+            } else {
+                emit("input", null);
+            }
+        } else {
+            emit("input", val ? val.value : null);
+        }
+    },
+});
+
+/**
+ * Ensures that an initial value is selected for non-optional inputs
+ */
+function setInitialValue(): void {
+    if (initialValue.value) {
+        emit("input", initialValue.value);
+    }
+}
+
+/**
+ * Watches changes in select options and adjusts initial value if necessary
+ */
+watch(
+    () => props.options,
+    () => setInitialValue()
+);
+
+/**
+ * Sets initial value if necessary
+ */
+onMounted(() => {
+    setInitialValue();
+});
+</script>
+
+<template>
+    <Multiselect
+        v-if="hasOptions"
+        :id="id"
+        v-model="currentValue"
+        :allow-empty="true"
+        :aria-expanded="ariaExpanded"
+        :class="['form-select', cls]"
+        :close-on-select="!multiple"
+        :deselect-label="deselectLabel"
+        label="label"
+        :multiple="multiple"
+        :options="formattedOptions"
+        placeholder="Select value"
+        :selected-label="selectedLabel"
+        select-label="Click to select"
+        track-by="value"
+        @open="onOpen"
+        @close="onClose" />
+    <b-alert v-else v-localize variant="warning" show> No options available. </b-alert>
+</template>
diff --git a/client/src/components/Form/Elements/FormData/types.ts b/client/src/components/Form/Elements/FormData/types.ts
new file mode 100644
index 000000000000..d2503bf2d211
--- /dev/null
+++ b/client/src/components/Form/Elements/FormData/types.ts
@@ -0,0 +1,17 @@
+export interface DataOption {
+    id: string;
+    keep: boolean;
+    hid: string;
+    name: string;
+    src: string;
+    tags: Array<string>;
+}
+
+export interface DataOptions {
+    hda: Array<DataOption>;
+    hdca: Array<DataOption>;
+}
+
+export interface DataValue {
+    values: Array<DataOption>;
+}
diff --git a/client/src/components/Form/Elements/FormData/utilities.js b/client/src/components/Form/Elements/FormData/utilities.js
new file mode 100644
index 000000000000..3538bff328aa
--- /dev/null
+++ b/client/src/components/Form/Elements/FormData/utilities.js
@@ -0,0 +1,502 @@
+/** View for hda and dce content selector ui elements */
+const View = Backbone.View.extend({
+    initialize: function (options) {
+        const self = this;
+        this.model =
+            (options && options.model) ||
+            new Backbone.Model({
+                src_labels: { hda: "dataset", hdca: "dataset collection" },
+                pagelimit: 100,
+                statustimer: 1000,
+            }).set(options);
+        this.setElement($("<div/>").addClass("ui-select-content"));
+        this.button_product = new Ui.RadioButton.View({
+            value: "false",
+            data: [
+                {
+                    icon: "fa fa-chain",
+                    value: "false",
+                    tooltip:
+                        "Linked inputs will be run in matched order with other datasets e.g. use this for matching forward and reverse reads.",
+                },
+                {
+                    icon: "fa fa-chain-broken",
+                    value: "true",
+                    tooltip: "Unlinked dataset inputs will be run against *all* other inputs.",
+                },
+            ],
+        });
+        this.$batch = {
+            linked: $(this._templateBatch()).clone(),
+            enabled: $(this._templateBatch()).clone().append(this.button_product.$el),
+        };
+
+        // add drag-drop event handlers
+        const element = this.$el.get(0);
+        element.addEventListener("dragenter", (e) => {
+            this.lastenter = e.target;
+            self.$el.addClass("ui-dragover");
+        });
+        element.addEventListener("dragover", (e) => {
+            e.preventDefault();
+        });
+        element.addEventListener("dragleave", (e) => {
+            this.lastenter === e.target && self.$el.removeClass("ui-dragover");
+        });
+        element.addEventListener("drop", (e) => {
+            e.preventDefault();
+            try {
+                const drop_data = JSON.parse(e.dataTransfer.getData("text"))[0];
+                this._handleDropValues(drop_data);
+            } catch (e) {
+                this._handleDropStatus("danger");
+            }
+        });
+
+        // track current cache elements
+        this.cache = {};
+
+        // add listeners
+        this.listenTo(this.model, "change:data", this._changeData, this);
+        this.listenTo(this.model, "change:wait", this._changeWait, this);
+        this.listenTo(this.model, "change:current", this._changeCurrent, this);
+        this.listenTo(this.model, "change:value", this._changeValue, this);
+        this.listenTo(
+            this.model,
+            "change:type change:optional change:multiple change:extensions",
+            this._changeType,
+            this
+        );
+        this.render();
+
+        // add change event
+        this.on("change", () => {
+            options.onchange && options.onchange(self.value());
+        });
+    },
+
+    render: function () {
+        this._changeType();
+        this._changeValue();
+        this._changeWait();
+    },
+
+    /** Indicate that select fields are being updated */
+    wait: function () {
+        this.model.set("wait", true);
+    },
+
+    /** Indicate that the options update has been completed */
+    unwait: function () {
+        this.model.set("wait", false);
+    },
+
+    /** Update data representing selectable options */
+    update: function (input_def) {
+        this.model.set("data", input_def.options);
+    },
+
+    /** Return the currently selected dataset values */
+    value: function (new_value) {
+        if (new_value) {
+            this._patchValue(new_value);
+            const result = this._batch(this._pickValue(new_value));
+            this.model.set("value", result);
+        }
+        const current = this.model.get("current");
+        if (this.config[current]) {
+            let id_list = this.fields[current].value();
+            if (id_list !== null) {
+                id_list = Array.isArray(id_list) ? id_list : [id_list];
+                if (id_list.length > 0) {
+                    const result = this._batch({ values: [] });
+                    for (const i in id_list) {
+                        const details = this.cache[`${id_list[i]}_${this.config[current].src}`];
+                        if (details) {
+                            const unpatchedValue = this._unpatchValue(details);
+                            result.values.push(unpatchedValue);
+                        } else {
+                            console.debug(
+                                "ui-select-content::value()",
+                                `Requested details not found for '${id_list[i]}'.`
+                            );
+                            return null;
+                        }
+                    }
+                    result.values.sort((a, b) => a.hid - b.hid);
+                    return this._pickValue(result);
+                }
+            }
+        } else {
+            console.debug("ui-select-content::value()", `Invalid value/source '${new_value}'.`);
+        }
+        return null;
+    },
+
+    /** Change of current select field */
+    _changeCurrent: function () {
+        _.each(this.fields, (field, i) => {
+            const cnf = this.config[i];
+            if (this.model.get("current") == i) {
+                field.$el.show();
+                _.each(this.$batch, ($batchfield, batchmode) => {
+                    if (cnf.batch == batchmode) {
+                        $batchfield.show();
+                    } else {
+                        $batchfield.hide();
+                    }
+                });
+                if (cnf.src == "hda") {
+                    this.button_dialog.show();
+                    this.upload_dialog.show();
+                } else {
+                    this.button_dialog.hide();
+                    this.upload_dialog.hide();
+                }
+                this.button_type.value(i);
+            } else {
+                field.$el.hide();
+            }
+        });
+        if (this.fields.length > 1) {
+            this.button_type.show();
+        } else {
+            this.button_type.hide();
+        }
+    },
+
+    /** Change of type */
+    _changeType: function () {
+        const self = this;
+        const galaxy = getGalaxyInstance();
+
+        // identify selector type identifier i.e. [ flavor ]_[ type ]_[ multiple ]
+        const config_id =
+            (this.model.get("flavor") ? `${this.model.get("flavor")}_` : "") +
+            String(this.model.get("type")) +
+            (this.model.get("multiple") ? "_multiple" : "");
+        if (Configurations[config_id]) {
+            this.config = Configurations[config_id];
+        } else {
+            this.config = Configurations["data"];
+            console.debug("ui-select-content::_changeType()", `Invalid configuration/type id '${config_id}'.`);
+        }
+
+        // prepare extension component of error message
+        const data = self.model.get("data");
+        const formats = this.model.get("extensions");
+        const extensions = Array.isArray(formats) ? Utils.textify(formats) : "";
+        const src_labels = this.model.get("src_labels");
+
+        // build radio button for data selectors
+        this.fields = [];
+        this.button_data = [];
+        _.each(this.config, (c, i) => {
+            self.button_data.push({
+                value: i,
+                icon: c.icon,
+                tooltip: c.tooltip,
+            });
+            self.fields.push(
+                new Select.View({
+                    optional: self.model.get("optional"),
+                    multiple: c.multiple,
+                    searchable:
+                        !c.multiple || (data && data[c.src] && data[c.src].length > self.model.get("pagelimit")),
+                    individual: true,
+                    error_text: `No ${extensions ? `${extensions} ` : ""}${src_labels[c.src] || "content"} available.`,
+                    onchange: function () {
+                        self.trigger("change");
+                    },
+                })
+            );
+        });
+        this.button_type = new Ui.RadioButton.View({
+            value: this.model.get("current"),
+            data: this.button_data,
+            cls: "pr-lg-2",
+            onchange: function (value) {
+                self.model.set("current", value);
+                self.trigger("change");
+            },
+        });
+
+        // build data dialog button
+        this.button_dialog = new Ui.Button({
+            icon: "fa-folder-open-o",
+            tooltip: "Browse Datasets",
+            onclick: () => {
+                const current = this.model.get("current");
+                const cnf = this.config[current];
+                galaxy.data.dialog(
+                    (response) => {
+                        this._handleDropValues(response, false);
+                    },
+                    {
+                        multiple: cnf.multiple,
+                        library: !!cnf.library,
+                        format: null,
+                        allowUpload: true,
+                    }
+                );
+            },
+        });
+
+        // build data dialog button
+        this.upload_dialog = new Ui.Button({
+            icon: "fa-upload",
+            tooltip: "Upload Dataset",
+            onclick: () => {
+                const current = this.model.get("current");
+                const cnf = this.config[current];
+                // model doesn't have format yet unfortunately, need to get through to here.
+                galaxy.data.dialog(
+                    (response) => {
+                        this._handleDropValues(response, false);
+                    },
+                    {
+                        multiple: cnf.multiple,
+                        formats: formats,
+                        new: true,
+                    }
+                );
+            },
+        });
+
+        // append views
+        const $fields = $("<div/>").addClass("overflow-auto w-100 py-2 py-lg-0 pr-lg-2 ");
+        this.$el
+            .empty()
+            .addClass("d-flex flex-row flex-wrap flex-lg-nowrap")
+            .append($("<div/>").append(this.button_type.$el))
+            .append($fields);
+        if (galaxy.config.upload_from_form_button == "always-on") {
+            this.$el.append($("<div style='margin-right: 5px;' />").append(this.upload_dialog.$el));
+        }
+        this.$el.append($("<div/>").append(this.button_dialog.$el));
+        _.each(this.fields, (field) => {
+            $fields.append(field.$el);
+        });
+        _.each(this.$batch, ($batchfield, batchmode) => {
+            $fields.append($batchfield);
+        });
+        this.model.set("current", 0);
+        this._changeCurrent();
+        this._changeData();
+    },
+
+    /** Change of wait flag */
+    _changeWait: function () {
+        const self = this;
+        _.each(this.fields, (field) => {
+            field[self.model.get("wait") ? "wait" : "unwait"]();
+        });
+    },
+
+    /** Change of available options */
+    _changeData: function () {
+        const options = this.model.get("data");
+        const self = this;
+        const select_options = { hda: [], hdca: [] };
+        _.each(options, (items, src) => {
+            _.each(items, (item) => {
+                self._patchValue(item, src);
+                const current_src = item.src || src;
+                const addOption = !this.model.attributes.tag || item.tags.includes(this.model.attributes.tag);
+                if (addOption) {
+                    select_options[current_src].push({
+                        hid: item.hid || Infinity, // if we got no hid we have a "Selected" item
+                        keep: item.keep,
+                        label: `${item.hid || "Selected"}: ${item.name}`,
+                        value: item.id,
+                        origin: item.origin,
+                        tags: item.tags,
+                    });
+                }
+                self.cache[`${item.id}_${current_src}`] = item;
+            });
+        });
+        _.each(this.config, (c, i) => {
+            select_options[c.src] && self.fields[i].add(select_options[c.src], (a, b) => b.hid - a.hid);
+        });
+    },
+
+    /** Change of incoming value */
+    _changeValue: function () {
+        const new_value = this.model.get("value");
+        if (new_value && new_value.values && new_value.values.length > 0) {
+            // sniff first suitable field type from config list
+            let src = new_value.values[0].src;
+            if (src === "dce") {
+                src =
+                    this.cache[`dce${new_value.values[0].id}_hda`]?.src ||
+                    this.cache[`dce${new_value.values[0].id}_hdca`]?.src;
+            }
+            this._patchValue(new_value, src);
+            // create list with content ids
+            const list = [];
+            _.each(new_value.values, (value) => {
+                list.push(value.id);
+            });
+            const multiple = new_value.values.length > 1;
+            for (let i = 0; i < this.config.length; i++) {
+                const field = this.fields[i];
+                const c = this.config[i];
+                if (c.src == src && [multiple, true].indexOf(c.multiple) !== -1) {
+                    this.model.set("current", i);
+                    field.value(list);
+                    break;
+                }
+            }
+        } else {
+            _.each(this.fields, (field) => {
+                field.value(null);
+            });
+        }
+    },
+
+    /** Source helper matches history_content_types to source types */
+    _getSource: function (v) {
+        return v.history_content_type == "dataset_collection" ? "hdca" : "hda";
+    },
+
+    /** Only utilize id, source and map_over_type when specifiying input value **/
+    _pickValue: function (v) {
+        if (v && v.values) {
+            v.values = v.values.map((entry) => ({
+                id: entry.id,
+                src: entry.src,
+                map_over_type: entry.map_over_type,
+            }));
+        }
+        return v;
+    },
+
+    /** Library datasets are displayed and selected together with history datasets,
+        Dataset collection elements are displayed together with history dataset collections **/
+    _patchValue: function (v, src) {
+        const patchTo = { ldda: "hda", dce: src };
+        if (v.values) {
+            _.each(v.values, (v) => {
+                this._patchValue(v, src);
+            });
+        } else if (patchTo[v.src]) {
+            v.origin = v.src;
+            v.src = patchTo[v.src];
+            v.id = `${v.origin}${v.id}`;
+        }
+    },
+
+    /** Restores original value e.g. after patching library datasets **/
+    _unpatchValue: function (v) {
+        if (v.origin) {
+            const d = Object.assign({}, v);
+            d.id = d.id.substr(d.origin.length);
+            d.src = d.origin;
+            return d;
+        }
+        return v;
+    },
+
+    /** Add values from drag/drop */
+    _handleDropValues: function (drop_data, drop_partial = true) {
+        const self = this;
+        const data = this.model.get("data");
+        const current = this.model.get("current");
+        const config = this.config[current];
+        const field = this.fields[current];
+        if (data) {
+            const values = Array.isArray(drop_data) ? drop_data : [drop_data];
+            if (values.length > 0) {
+                let data_changed = false;
+                _.each(values, (v) => {
+                    // element_id deals with override in old backbone code,
+                    // can remove when old history is deprecated
+                    v.id = v.element_id || v.id;
+                    self._patchValue(v);
+                    const new_id = v.id;
+                    const new_src = (v.src = this._getSource(v));
+                    const new_value = { id: new_id, src: new_src };
+                    if (!_.findWhere(data[new_src], new_value)) {
+                        data_changed = true;
+                        data[new_src].push({
+                            id: new_id,
+                            src: new_src,
+                            hid: v.hid || "Selected",
+                            name: v.name ? v.name : new_id,
+                            origin: v.origin,
+                            keep: true,
+                            tags: [],
+                        });
+                    }
+                });
+                if (data_changed) {
+                    this._changeData();
+                }
+                const first_id = values[0].id;
+                const first_src = values[0].src;
+                if (config.src == first_src && drop_partial) {
+                    let current_value = field.value();
+                    if (current_value && config.multiple) {
+                        _.each(values, (v) => {
+                            if (current_value.indexOf(v.id) == -1) {
+                                current_value.push(v.id);
+                            }
+                        });
+                    } else {
+                        current_value = first_id;
+                    }
+                    field.value(current_value);
+                } else {
+                    this.model.set("value", { values: values });
+                    this.model.trigger("change:value");
+                }
+                this.trigger("change");
+            }
+        }
+        this._handleDropStatus("success");
+    },
+
+    /** Highlight drag result */
+    _handleDropStatus: function (status) {
+        const self = this;
+        this.$el.removeClass("ui-dragover").addClass(`ui-dragover-${status}`);
+        setTimeout(() => {
+            self.$el.removeClass(`ui-dragover-${status}`);
+        }, this.model.get("statustimer"));
+    },
+
+    /** Assists in identifying the batch mode */
+    _batch: function (result) {
+        result["batch"] = false;
+        const current = this.model.get("current");
+        const config = this.config[current];
+        if (config.src == "dce" || config.src == "hdca") {
+            const element = this.cache[`${this.fields[current].value()}_${config.src}`];
+            if (element && element.map_over_type) {
+                result["batch"] = true;
+            }
+        }
+        if (config.batch == Batch.LINKED || config.batch == Batch.ENABLED) {
+            result["batch"] = true;
+            if (config.batch == Batch.ENABLED && this.button_product.value() === "true") {
+                result["product"] = true;
+            }
+        }
+        return result;
+    },
+
+    /** Template for batch mode execution options */
+    _templateBatch: function () {
+        return `<div class="form-text text-muted" style="clear: both;">
+                    <i class="fa fa-sitemap"/>
+                    <span>
+                        This is a batch mode input field. Separate jobs will be triggered for each dataset selection.
+                    </span>
+                </div>`;
+    },
+});
+
+export default {
+    View: View,
+};
diff --git a/client/src/components/Form/Elements/FormData/variants.js b/client/src/components/Form/Elements/FormData/variants.js
new file mode 100644
index 000000000000..788b0ffef7f6
--- /dev/null
+++ b/client/src/components/Form/Elements/FormData/variants.js
@@ -0,0 +1,114 @@
+/** Batch mode variations */
+export const Batch = { DISABLED: "disabled", ENABLED: "enabled", LINKED: "linked" };
+
+/** List of available content selectors options */
+export const Configurations = {
+    data: [
+        {
+            src: "hda",
+            icon: "fa-file-o",
+            tooltip: _l("Single dataset"),
+            library: true,
+            multiple: false,
+            batch: Batch.DISABLED,
+        },
+        {
+            src: "hda",
+            icon: "fa-files-o",
+            tooltip: _l("Multiple datasets"),
+            multiple: true,
+            batch: Batch.LINKED,
+        },
+        {
+            src: "hdca",
+            icon: "fa-folder-o",
+            tooltip: _l("Dataset collection"),
+            multiple: false,
+            batch: Batch.LINKED,
+        },
+    ],
+    data_multiple: [
+        {
+            src: "hda",
+            icon: "fa-files-o",
+            tooltip: _l("Multiple datasets"),
+            multiple: true,
+            batch: Batch.DISABLED,
+        },
+        {
+            src: "hdca",
+            icon: "fa-folder-o",
+            tooltip: _l("Dataset collections"),
+            multiple: true,
+            batch: Batch.DISABLED,
+        },
+    ],
+    data_collection: [
+        {
+            src: "hdca",
+            icon: "fa-folder-o",
+            tooltip: _l("Dataset collection"),
+            multiple: false,
+            batch: Batch.DISABLED,
+        },
+    ],
+    workflow_data: [
+        {
+            src: "hda",
+            icon: "fa-file-o",
+            tooltip: _l("Single dataset"),
+            multiple: false,
+            batch: Batch.DISABLED,
+        },
+    ],
+    workflow_data_multiple: [
+        {
+            src: "hda",
+            icon: "fa-files-o",
+            tooltip: _l("Multiple datasets"),
+            multiple: true,
+            batch: Batch.DISABLED,
+        },
+    ],
+    workflow_data_collection: [
+        {
+            src: "hdca",
+            icon: "fa-folder-o",
+            tooltip: _l("Dataset collection"),
+            multiple: false,
+            batch: Batch.DISABLED,
+        },
+    ],
+    module_data: [
+        {
+            src: "hda",
+            icon: "fa-file-o",
+            tooltip: _l("Single dataset"),
+            multiple: false,
+            batch: Batch.DISABLED,
+        },
+        {
+            src: "hda",
+            icon: "fa-files-o",
+            tooltip: _l("Multiple datasets"),
+            multiple: true,
+            batch: Batch.ENABLED,
+        },
+    ],
+    module_data_collection: [
+        {
+            src: "hdca",
+            icon: "fa-folder-o",
+            tooltip: _l("Dataset collection"),
+            multiple: false,
+            batch: Batch.DISABLED,
+        },
+        {
+            src: "hdca",
+            icon: "fa-folder",
+            tooltip: _l("Multiple collections"),
+            multiple: true,
+            batch: Batch.ENABLED,
+        },
+    ],
+};
diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index 73782749de61..13f25a7535b8 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -149,17 +149,17 @@ onMounted(() => {
         :id="id"
         v-model="currentValue"
         :allow-empty="true"
+        :aria-expanded="ariaExpanded"
         :class="['form-select', cls]"
         :close-on-select="!multiple"
         :deselect-label="deselectLabel"
-        :options="formattedOptions"
+        label="label"
         :multiple="multiple"
-        :selected-label="selectedLabel"
-        :aria-expanded="ariaExpanded"
+        :options="formattedOptions"
         placeholder="Select value"
+        :selected-label="selectedLabel"
         select-label="Click to select"
         track-by="value"
-        label="label"
         @open="onOpen"
         @close="onClose" />
     <b-alert v-else v-localize variant="warning" show> No options available. </b-alert>

From 1a8d9c392e764deb4fddacea446012868890b2c0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 16 Aug 2023 08:29:10 +0200
Subject: [PATCH 05/86] Add variante loop to input element

---
 .../Form/Elements/FormData/FormData.vue       | 31 ++++++++++++++--
 .../Form/Elements/FormData/types.ts           |  5 ---
 .../FormData/{variants.js => variants.ts}     | 37 ++++++++++++-------
 client/src/components/Form/FormElement.vue    |  2 +-
 4 files changed, 51 insertions(+), 24 deletions(-)
 rename client/src/components/Form/Elements/FormData/{variants.js => variants.ts} (75%)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 3b4607717d1d..8aa5aff09e95 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -1,9 +1,15 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import FormSelect from "./FormDataSelect.vue";
-import type { DataOption, DataOptions, DataValue } from "./types";
 
-const $emit = defineEmits(["input"]);
+import type { DataOption, DataValue } from "./types";
+import { Variants } from "./variants";
+
+import FormDataSelect from "./FormDataSelect.vue";
+
+interface DataOptions {
+    hda: Array<DataOption>;
+    hdca: Array<DataOption>;
+}
 
 const props = withDefaults(
     defineProps<{
@@ -27,6 +33,8 @@ const props = withDefaults(
     }
 );
 
+const $emit = defineEmits(["input"]);
+
 const currentValue = computed({
     get: () => {
         console.log("in", props.value.values);
@@ -37,8 +45,23 @@ const currentValue = computed({
         $emit("input", val);
     },
 });
+
+const variants = computed(() => {
+    const flavorKey = props.flavor ? `${props.flavor}_` : "";
+    const multipleKey = props.multiple ? `_${props.multiple}` : "";
+    const variantKey = `${flavorKey}${props.type}${multipleKey}`;
+    return Variants[variantKey];
+});
 </script>
 
 <template>
-    <form-select v-model="currentValue" :multiple="multiple" :optional="optional" :options="options.hda" />
+    <div>
+        <div v-for="(v, index) of variants" :key="index">
+            <FormDataSelect
+                v-model="currentValue"
+                :multiple="v.multiple"
+                :optional="optional"
+                :options="options[v.src]" />
+        </div>
+    </div>
 </template>
diff --git a/client/src/components/Form/Elements/FormData/types.ts b/client/src/components/Form/Elements/FormData/types.ts
index d2503bf2d211..7f127c26b3a5 100644
--- a/client/src/components/Form/Elements/FormData/types.ts
+++ b/client/src/components/Form/Elements/FormData/types.ts
@@ -7,11 +7,6 @@ export interface DataOption {
     tags: Array<string>;
 }
 
-export interface DataOptions {
-    hda: Array<DataOption>;
-    hdca: Array<DataOption>;
-}
-
 export interface DataValue {
     values: Array<DataOption>;
 }
diff --git a/client/src/components/Form/Elements/FormData/variants.js b/client/src/components/Form/Elements/FormData/variants.ts
similarity index 75%
rename from client/src/components/Form/Elements/FormData/variants.js
rename to client/src/components/Form/Elements/FormData/variants.ts
index 788b0ffef7f6..76101ce202ce 100644
--- a/client/src/components/Form/Elements/FormData/variants.js
+++ b/client/src/components/Form/Elements/FormData/variants.ts
@@ -1,13 +1,22 @@
 /** Batch mode variations */
 export const Batch = { DISABLED: "disabled", ENABLED: "enabled", LINKED: "linked" };
 
+interface VariantInterface {
+    batch: string;
+    icon: string;
+    library?: boolean;
+    multiple: boolean;
+    src: string;
+    tooltip: string;
+}
+
 /** List of available content selectors options */
-export const Configurations = {
+export const Variants: Record<string, Array<VariantInterface>> = {
     data: [
         {
             src: "hda",
             icon: "fa-file-o",
-            tooltip: _l("Single dataset"),
+            tooltip: "Single dataset",
             library: true,
             multiple: false,
             batch: Batch.DISABLED,
@@ -15,14 +24,14 @@ export const Configurations = {
         {
             src: "hda",
             icon: "fa-files-o",
-            tooltip: _l("Multiple datasets"),
+            tooltip: "Multiple datasets",
             multiple: true,
             batch: Batch.LINKED,
         },
         {
             src: "hdca",
             icon: "fa-folder-o",
-            tooltip: _l("Dataset collection"),
+            tooltip: "Dataset collection",
             multiple: false,
             batch: Batch.LINKED,
         },
@@ -31,14 +40,14 @@ export const Configurations = {
         {
             src: "hda",
             icon: "fa-files-o",
-            tooltip: _l("Multiple datasets"),
+            tooltip: "Multiple datasets",
             multiple: true,
             batch: Batch.DISABLED,
         },
         {
             src: "hdca",
             icon: "fa-folder-o",
-            tooltip: _l("Dataset collections"),
+            tooltip: "Dataset collections",
             multiple: true,
             batch: Batch.DISABLED,
         },
@@ -47,7 +56,7 @@ export const Configurations = {
         {
             src: "hdca",
             icon: "fa-folder-o",
-            tooltip: _l("Dataset collection"),
+            tooltip: "Dataset collection",
             multiple: false,
             batch: Batch.DISABLED,
         },
@@ -56,7 +65,7 @@ export const Configurations = {
         {
             src: "hda",
             icon: "fa-file-o",
-            tooltip: _l("Single dataset"),
+            tooltip: "Single dataset",
             multiple: false,
             batch: Batch.DISABLED,
         },
@@ -65,7 +74,7 @@ export const Configurations = {
         {
             src: "hda",
             icon: "fa-files-o",
-            tooltip: _l("Multiple datasets"),
+            tooltip: "Multiple datasets",
             multiple: true,
             batch: Batch.DISABLED,
         },
@@ -74,7 +83,7 @@ export const Configurations = {
         {
             src: "hdca",
             icon: "fa-folder-o",
-            tooltip: _l("Dataset collection"),
+            tooltip: "Dataset collection",
             multiple: false,
             batch: Batch.DISABLED,
         },
@@ -83,14 +92,14 @@ export const Configurations = {
         {
             src: "hda",
             icon: "fa-file-o",
-            tooltip: _l("Single dataset"),
+            tooltip: "Single dataset",
             multiple: false,
             batch: Batch.DISABLED,
         },
         {
             src: "hda",
             icon: "fa-files-o",
-            tooltip: _l("Multiple datasets"),
+            tooltip: "Multiple datasets",
             multiple: true,
             batch: Batch.ENABLED,
         },
@@ -99,14 +108,14 @@ export const Configurations = {
         {
             src: "hdca",
             icon: "fa-folder-o",
-            tooltip: _l("Dataset collection"),
+            tooltip: "Dataset collection",
             multiple: false,
             batch: Batch.DISABLED,
         },
         {
             src: "hdca",
             icon: "fa-folder",
-            tooltip: _l("Multiple collections"),
+            tooltip: "Multiple collections",
             multiple: true,
             batch: Batch.ENABLED,
         },
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index 8b21afb9e3e3..67751d579f07 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -276,8 +276,8 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
                 :multiple="attrs.multiple" />
             <FormData
                 v-else-if="['data', 'data_collection'].includes(props.type)"
-                v-model="currentValue"
                 :id="id"
+                v-model="currentValue"
                 :extension="attrs.extension"
                 :flavor="attrs.flavor"
                 :multiple="attrs.multiple"

From bbfbdfa9f6882089b7e7568b273acc0c5a804fd4 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 16 Aug 2023 09:57:35 +0200
Subject: [PATCH 06/86] Draft button group for input selector

---
 .../Form/Elements/FormData/FormData.vue       | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 8aa5aff09e95..900de8458cd2 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref } from "vue";
 
 import type { DataOption, DataValue } from "./types";
 import { Variants } from "./variants";
@@ -35,6 +35,8 @@ const props = withDefaults(
 
 const $emit = defineEmits(["input"]);
 
+const currentField = ref(0);
+
 const currentValue = computed({
     get: () => {
         console.log("in", props.value.values);
@@ -46,6 +48,14 @@ const currentValue = computed({
     },
 });
 
+const currentVariant = computed(() => {
+    if (variants.value && currentField.value < variants.value.length) {
+        return variants.value[currentField.value];
+    } else {
+        return null;
+    }
+});
+
 const variants = computed(() => {
     const flavorKey = props.flavor ? `${props.flavor}_` : "";
     const multipleKey = props.multiple ? `_${props.multiple}` : "";
@@ -55,13 +65,18 @@ const variants = computed(() => {
 </script>
 
 <template>
-    <div>
-        <div v-for="(v, index) of variants" :key="index">
-            <FormDataSelect
-                v-model="currentValue"
-                :multiple="v.multiple"
-                :optional="optional"
-                :options="options[v.src]" />
-        </div>
+    <div class="d-flex">
+        <b-form-radio-group v-model="currentField" buttons>
+            <b-form-radio v-for="(v, index) in variants" :key="index" :value="index">
+                <span :class="`fa ${v.icon}`" />
+            </b-form-radio>
+        </b-form-radio-group>
+        <FormDataSelect
+            v-if="currentVariant"
+            v-model="currentValue"
+            class="w-100"
+            :multiple="variants[currentField].multiple"
+            :optional="optional"
+            :options="options[variants[currentField].src]" />
     </div>
 </template>

From 26382f4f7b1ff6de7054d3cdf79519ad13e387ed Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 16 Aug 2023 10:08:00 +0200
Subject: [PATCH 07/86] Fix layout, use fontawesome and bootstrap components

---
 .../Form/Elements/FormData/FormData.vue       | 16 +++++++++----
 .../Form/Elements/FormData/variants.ts        | 24 +++++++++----------
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 900de8458cd2..6858d8a41ebe 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCopy, faFile, faFolder } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BFormRadio, BFormRadioGroup } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import type { DataOption, DataValue } from "./types";
@@ -6,6 +10,8 @@ import { Variants } from "./variants";
 
 import FormDataSelect from "./FormDataSelect.vue";
 
+library.add(faCopy, faFile, faFolder);
+
 interface DataOptions {
     hda: Array<DataOption>;
     hdca: Array<DataOption>;
@@ -66,11 +72,11 @@ const variants = computed(() => {
 
 <template>
     <div class="d-flex">
-        <b-form-radio-group v-model="currentField" buttons>
-            <b-form-radio v-for="(v, index) in variants" :key="index" :value="index">
-                <span :class="`fa ${v.icon}`" />
-            </b-form-radio>
-        </b-form-radio-group>
+        <BFormRadioGroup v-model="currentField" buttons class="align-self-start mr-2">
+            <BFormRadio v-for="(v, index) in variants" :key="index" :value="index">
+                <FontAwesomeIcon :icon="['far', v.icon]" />
+            </BFormRadio>
+        </BFormRadioGroup>
         <FormDataSelect
             v-if="currentVariant"
             v-model="currentValue"
diff --git a/client/src/components/Form/Elements/FormData/variants.ts b/client/src/components/Form/Elements/FormData/variants.ts
index 76101ce202ce..cbf5b3bd2c90 100644
--- a/client/src/components/Form/Elements/FormData/variants.ts
+++ b/client/src/components/Form/Elements/FormData/variants.ts
@@ -15,7 +15,7 @@ export const Variants: Record<string, Array<VariantInterface>> = {
     data: [
         {
             src: "hda",
-            icon: "fa-file-o",
+            icon: "fa-file",
             tooltip: "Single dataset",
             library: true,
             multiple: false,
@@ -23,14 +23,14 @@ export const Variants: Record<string, Array<VariantInterface>> = {
         },
         {
             src: "hda",
-            icon: "fa-files-o",
+            icon: "fa-copy",
             tooltip: "Multiple datasets",
             multiple: true,
             batch: Batch.LINKED,
         },
         {
             src: "hdca",
-            icon: "fa-folder-o",
+            icon: "fa-folder",
             tooltip: "Dataset collection",
             multiple: false,
             batch: Batch.LINKED,
@@ -39,14 +39,14 @@ export const Variants: Record<string, Array<VariantInterface>> = {
     data_multiple: [
         {
             src: "hda",
-            icon: "fa-files-o",
+            icon: "fa-copy",
             tooltip: "Multiple datasets",
             multiple: true,
             batch: Batch.DISABLED,
         },
         {
             src: "hdca",
-            icon: "fa-folder-o",
+            icon: "fa-folder",
             tooltip: "Dataset collections",
             multiple: true,
             batch: Batch.DISABLED,
@@ -55,7 +55,7 @@ export const Variants: Record<string, Array<VariantInterface>> = {
     data_collection: [
         {
             src: "hdca",
-            icon: "fa-folder-o",
+            icon: "fa-folder",
             tooltip: "Dataset collection",
             multiple: false,
             batch: Batch.DISABLED,
@@ -64,7 +64,7 @@ export const Variants: Record<string, Array<VariantInterface>> = {
     workflow_data: [
         {
             src: "hda",
-            icon: "fa-file-o",
+            icon: "fa-file",
             tooltip: "Single dataset",
             multiple: false,
             batch: Batch.DISABLED,
@@ -73,7 +73,7 @@ export const Variants: Record<string, Array<VariantInterface>> = {
     workflow_data_multiple: [
         {
             src: "hda",
-            icon: "fa-files-o",
+            icon: "fa-copy",
             tooltip: "Multiple datasets",
             multiple: true,
             batch: Batch.DISABLED,
@@ -82,7 +82,7 @@ export const Variants: Record<string, Array<VariantInterface>> = {
     workflow_data_collection: [
         {
             src: "hdca",
-            icon: "fa-folder-o",
+            icon: "fa-folder",
             tooltip: "Dataset collection",
             multiple: false,
             batch: Batch.DISABLED,
@@ -91,14 +91,14 @@ export const Variants: Record<string, Array<VariantInterface>> = {
     module_data: [
         {
             src: "hda",
-            icon: "fa-file-o",
+            icon: "fa-file",
             tooltip: "Single dataset",
             multiple: false,
             batch: Batch.DISABLED,
         },
         {
             src: "hda",
-            icon: "fa-files-o",
+            icon: "fa-copy",
             tooltip: "Multiple datasets",
             multiple: true,
             batch: Batch.ENABLED,
@@ -107,7 +107,7 @@ export const Variants: Record<string, Array<VariantInterface>> = {
     module_data_collection: [
         {
             src: "hdca",
-            icon: "fa-folder-o",
+            icon: "fa-folder",
             tooltip: "Dataset collection",
             multiple: false,
             batch: Batch.DISABLED,

From 872e62e7905671e7d0353077f435609a38131c17 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 16 Aug 2023 13:23:38 +0200
Subject: [PATCH 08/86] Add the batch mode switch option to data input selector

---
 .../Form/Elements/FormData/FormData.vue       | 69 +++++++++++++------
 .../Form/Elements/FormData/variants.ts        | 30 ++++----
 2 files changed, 64 insertions(+), 35 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 6858d8a41ebe..43c764a9397e 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCopy, faFile, faFolder } from "@fortawesome/free-regular-svg-icons";
+import { faExclamation, faLink, faUnlink } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BFormRadio, BFormRadioGroup } from "bootstrap-vue";
+import { BFormCheckbox, BFormRadio, BFormRadioGroup } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import type { DataOption, DataValue } from "./types";
-import { Variants } from "./variants";
+import { BATCH, VARIANTS } from "./variants";
 
 import FormDataSelect from "./FormDataSelect.vue";
 
-library.add(faCopy, faFile, faFolder);
+library.add(faCopy, faExclamation, faFile, faFolder, faLink, faUnlink);
 
 interface DataOptions {
     hda: Array<DataOption>;
@@ -41,6 +42,8 @@ const props = withDefaults(
 
 const $emit = defineEmits(["input"]);
 
+const currentBatch = ref(true);
+
 const currentField = ref(0);
 
 const currentValue = computed({
@@ -55,34 +58,60 @@ const currentValue = computed({
 });
 
 const currentVariant = computed(() => {
-    if (variants.value && currentField.value < variants.value.length) {
-        return variants.value[currentField.value];
+    if (variant.value && currentField.value < variant.value.length) {
+        return variant.value[currentField.value];
     } else {
         return null;
     }
 });
 
-const variants = computed(() => {
+const variant = computed(() => {
     const flavorKey = props.flavor ? `${props.flavor}_` : "";
     const multipleKey = props.multiple ? `_${props.multiple}` : "";
     const variantKey = `${flavorKey}${props.type}${multipleKey}`;
-    return Variants[variantKey];
+    return VARIANTS[variantKey];
 });
 </script>
 
 <template>
-    <div class="d-flex">
-        <BFormRadioGroup v-model="currentField" buttons class="align-self-start mr-2">
-            <BFormRadio v-for="(v, index) in variants" :key="index" :value="index">
-                <FontAwesomeIcon :icon="['far', v.icon]" />
-            </BFormRadio>
-        </BFormRadioGroup>
-        <FormDataSelect
-            v-if="currentVariant"
-            v-model="currentValue"
-            class="w-100"
-            :multiple="variants[currentField].multiple"
-            :optional="optional"
-            :options="options[variants[currentField].src]" />
+    <div>
+        <div class="d-flex">
+            <BFormRadioGroup v-model="currentField" buttons class="align-self-start mr-2">
+                <BFormRadio v-for="(v, index) in variant" :key="index" :value="index">
+                    <FontAwesomeIcon :icon="['far', v.icon]" />
+                </BFormRadio>
+            </BFormRadioGroup>
+            <FormDataSelect
+                v-if="currentVariant"
+                v-model="currentValue"
+                class="w-100"
+                :multiple="currentVariant.multiple"
+                :optional="optional"
+                :options="options[currentVariant.src]" />
+        </div>
+        <div v-if="currentVariant.batch !== BATCH.DISABLED">
+            <BFormCheckbox
+                v-if="currentVariant.batch === BATCH.ENABLED"
+                v-model="currentBatch"
+                class="no-highlight my-2"
+                switch>
+                <div v-if="currentBatch">
+                    <FontAwesomeIcon icon="fa-link" />
+                    <b v-localize class="mr-1">Linked:</b>
+                    <span v-localize>Datasets will be run in matched order with other datasets.</span>
+                </div>
+                <span v-else>
+                    <FontAwesomeIcon icon="fa-unlink" />
+                    <b v-localize class="mr-1">Unlinked:</b>
+                    <span v-localize>Dataset will be run against *all* other datasets.</span>
+                </span>
+            </BFormCheckbox>
+            <div class="text-info my-2">
+                <FontAwesomeIcon icon="fa-exclamation" />
+                <span v-localize class="ml-1">
+                    This is a batch mode input field. Individual jobs will be triggered for each dataset.
+                </span>
+            </div>
+        </div>
     </div>
 </template>
diff --git a/client/src/components/Form/Elements/FormData/variants.ts b/client/src/components/Form/Elements/FormData/variants.ts
index cbf5b3bd2c90..df942da1e01e 100644
--- a/client/src/components/Form/Elements/FormData/variants.ts
+++ b/client/src/components/Form/Elements/FormData/variants.ts
@@ -1,5 +1,5 @@
 /** Batch mode variations */
-export const Batch = { DISABLED: "disabled", ENABLED: "enabled", LINKED: "linked" };
+export const BATCH = { DISABLED: "disabled", ENABLED: "enabled", LINKED: "linked" };
 
 interface VariantInterface {
     batch: string;
@@ -11,7 +11,7 @@ interface VariantInterface {
 }
 
 /** List of available content selectors options */
-export const Variants: Record<string, Array<VariantInterface>> = {
+export const VARIANTS: Record<string, Array<VariantInterface>> = {
     data: [
         {
             src: "hda",
@@ -19,21 +19,21 @@ export const Variants: Record<string, Array<VariantInterface>> = {
             tooltip: "Single dataset",
             library: true,
             multiple: false,
-            batch: Batch.DISABLED,
+            batch: BATCH.DISABLED,
         },
         {
             src: "hda",
             icon: "fa-copy",
             tooltip: "Multiple datasets",
             multiple: true,
-            batch: Batch.LINKED,
+            batch: BATCH.LINKED,
         },
         {
             src: "hdca",
             icon: "fa-folder",
             tooltip: "Dataset collection",
             multiple: false,
-            batch: Batch.LINKED,
+            batch: BATCH.LINKED,
         },
     ],
     data_multiple: [
@@ -42,14 +42,14 @@ export const Variants: Record<string, Array<VariantInterface>> = {
             icon: "fa-copy",
             tooltip: "Multiple datasets",
             multiple: true,
-            batch: Batch.DISABLED,
+            batch: BATCH.DISABLED,
         },
         {
             src: "hdca",
             icon: "fa-folder",
             tooltip: "Dataset collections",
             multiple: true,
-            batch: Batch.DISABLED,
+            batch: BATCH.DISABLED,
         },
     ],
     data_collection: [
@@ -58,7 +58,7 @@ export const Variants: Record<string, Array<VariantInterface>> = {
             icon: "fa-folder",
             tooltip: "Dataset collection",
             multiple: false,
-            batch: Batch.DISABLED,
+            batch: BATCH.DISABLED,
         },
     ],
     workflow_data: [
@@ -67,7 +67,7 @@ export const Variants: Record<string, Array<VariantInterface>> = {
             icon: "fa-file",
             tooltip: "Single dataset",
             multiple: false,
-            batch: Batch.DISABLED,
+            batch: BATCH.DISABLED,
         },
     ],
     workflow_data_multiple: [
@@ -76,7 +76,7 @@ export const Variants: Record<string, Array<VariantInterface>> = {
             icon: "fa-copy",
             tooltip: "Multiple datasets",
             multiple: true,
-            batch: Batch.DISABLED,
+            batch: BATCH.DISABLED,
         },
     ],
     workflow_data_collection: [
@@ -85,7 +85,7 @@ export const Variants: Record<string, Array<VariantInterface>> = {
             icon: "fa-folder",
             tooltip: "Dataset collection",
             multiple: false,
-            batch: Batch.DISABLED,
+            batch: BATCH.DISABLED,
         },
     ],
     module_data: [
@@ -94,14 +94,14 @@ export const Variants: Record<string, Array<VariantInterface>> = {
             icon: "fa-file",
             tooltip: "Single dataset",
             multiple: false,
-            batch: Batch.DISABLED,
+            batch: BATCH.DISABLED,
         },
         {
             src: "hda",
             icon: "fa-copy",
             tooltip: "Multiple datasets",
             multiple: true,
-            batch: Batch.ENABLED,
+            batch: BATCH.ENABLED,
         },
     ],
     module_data_collection: [
@@ -110,14 +110,14 @@ export const Variants: Record<string, Array<VariantInterface>> = {
             icon: "fa-folder",
             tooltip: "Dataset collection",
             multiple: false,
-            batch: Batch.DISABLED,
+            batch: BATCH.DISABLED,
         },
         {
             src: "hdca",
             icon: "fa-folder",
             tooltip: "Multiple collections",
             multiple: true,
-            batch: Batch.ENABLED,
+            batch: BATCH.ENABLED,
         },
     ],
 };

From b4dbd824503f4c303bc80a65b80b10c392b62111 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 16 Aug 2023 13:27:23 +0200
Subject: [PATCH 09/86] Hide button group if there is only a single variant
 defined

---
 client/src/components/Form/Elements/FormData/FormData.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 43c764a9397e..94d7e56d4252 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -76,7 +76,7 @@ const variant = computed(() => {
 <template>
     <div>
         <div class="d-flex">
-            <BFormRadioGroup v-model="currentField" buttons class="align-self-start mr-2">
+            <BFormRadioGroup v-if="variant.length > 1" v-model="currentField" buttons class="align-self-start mr-2">
                 <BFormRadio v-for="(v, index) in variant" :key="index" :value="index">
                     <FontAwesomeIcon :icon="['far', v.icon]" />
                 </BFormRadio>

From 5ee21d563e4db1e4afce4eef6f7bf24541bffa1a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 16 Aug 2023 14:46:06 +0200
Subject: [PATCH 10/86] Add type guard, re-use existing form select component

---
 .../Form/Elements/FormData/FormData.vue       |   4 +-
 .../Form/Elements/FormData/FormDataSelect.vue | 168 ------
 .../Form/Elements/FormData/utilities.js       | 502 ------------------
 .../components/Form/Elements/FormSelect.vue   |  19 +-
 4 files changed, 14 insertions(+), 679 deletions(-)
 delete mode 100644 client/src/components/Form/Elements/FormData/FormDataSelect.vue
 delete mode 100644 client/src/components/Form/Elements/FormData/utilities.js

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 94d7e56d4252..5fd4b1b41dd5 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -9,7 +9,7 @@ import { computed, ref } from "vue";
 import type { DataOption, DataValue } from "./types";
 import { BATCH, VARIANTS } from "./variants";
 
-import FormDataSelect from "./FormDataSelect.vue";
+import FormSelect from "@/components/Form/Elements/FormSelect.vue";
 
 library.add(faCopy, faExclamation, faFile, faFolder, faLink, faUnlink);
 
@@ -81,7 +81,7 @@ const variant = computed(() => {
                     <FontAwesomeIcon :icon="['far', v.icon]" />
                 </BFormRadio>
             </BFormRadioGroup>
-            <FormDataSelect
+            <FormSelect
                 v-if="currentVariant"
                 v-model="currentValue"
                 class="w-100"
diff --git a/client/src/components/Form/Elements/FormData/FormDataSelect.vue b/client/src/components/Form/Elements/FormData/FormDataSelect.vue
deleted file mode 100644
index 0e28c2da3fe7..000000000000
--- a/client/src/components/Form/Elements/FormData/FormDataSelect.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<script setup lang="ts">
-import { computed, type ComputedRef, onMounted, watch } from "vue";
-import Multiselect from "vue-multiselect";
-
-import { useMultiselect } from "@/composables/useMultiselect";
-import { uid } from "@/utils/utils";
-
-import type { DataOption, DataValue } from "./types";
-
-type SelectValue = DataOption | null;
-const { ariaExpanded, onOpen, onClose } = useMultiselect();
-
-interface SelectOption {
-    label: string;
-    value: SelectValue;
-}
-
-const props = withDefaults(
-    defineProps<{
-        id?: string;
-        multiple?: boolean;
-        optional?: boolean;
-        options: Array<DataOption>;
-        value?: Array<DataOption>;
-    }>(),
-    {
-        id: `form-select-${uid()}`,
-        multiple: false,
-        optional: false,
-        value: null,
-    }
-);
-
-const emit = defineEmits<{
-    (e: "input", value: SelectValue | Array<SelectValue>): void;
-}>();
-
-/**
- * Determine dom wrapper class
- */
-const cls: ComputedRef<string> = computed(() => {
-    return props.multiple ? "form-select-multiple" : "form-select-single";
-});
-
-/**
- * Configure deselect label
- */
-const deselectLabel: ComputedRef<string> = computed(() => {
-    return props.multiple ? "Click to remove" : "";
-});
-
-/**
- * Translates input options for consumption by the
- * select component into an array of objects
- */
-const formattedOptions: ComputedRef<Array<SelectOption>> = computed(() => {
-    const result: Array<SelectOption> = props.options.map((option) => ({
-        label: option.name,
-        value: option,
-    }));
-    if (props.optional && !props.multiple) {
-        result.unshift({
-            label: "Nothing selected",
-            value: null,
-        });
-    }
-    return result;
-});
-
-/**
- * Tracks if the select field has options
- */
-const hasOptions: ComputedRef<Boolean> = computed(() => {
-    return formattedOptions.value.length > 0;
-});
-
-/**
- * Provides initial value if necessary
- */
-const initialValue: ComputedRef<SelectValue> = computed(() => {
-    if (props.value === null && !props.optional && hasOptions.value) {
-        const v = formattedOptions.value[0];
-        if (v) {
-            return v.value;
-        }
-    }
-    return null;
-});
-
-/**
- * Configure selected label
- */
-const selectedLabel: ComputedRef<string> = computed(() => {
-    return props.multiple ? "Selected" : "";
-});
-
-/**
- * Tracks selected values
- */
-const selectedValues: ComputedRef<Array<SelectValue>> = computed(() => {
-    return Array.isArray(props.value) ? props.value : [props.value];
-});
-
-/**
- * Tracks current value and emits changes
- */
-const currentValue = computed({
-    get: () => formattedOptions.value.filter((option: SelectOption) => selectedValues.value.includes(option.value)),
-    set: (val: Array<SelectOption> | SelectOption): void => {
-        if (Array.isArray(val)) {
-            if (val.length > 0) {
-                const values: Array<SelectValue> = val.map((v: SelectOption) => v.value);
-                emit("input", values);
-            } else {
-                emit("input", null);
-            }
-        } else {
-            emit("input", val ? val.value : null);
-        }
-    },
-});
-
-/**
- * Ensures that an initial value is selected for non-optional inputs
- */
-function setInitialValue(): void {
-    if (initialValue.value) {
-        emit("input", initialValue.value);
-    }
-}
-
-/**
- * Watches changes in select options and adjusts initial value if necessary
- */
-watch(
-    () => props.options,
-    () => setInitialValue()
-);
-
-/**
- * Sets initial value if necessary
- */
-onMounted(() => {
-    setInitialValue();
-});
-</script>
-
-<template>
-    <Multiselect
-        v-if="hasOptions"
-        :id="id"
-        v-model="currentValue"
-        :allow-empty="true"
-        :aria-expanded="ariaExpanded"
-        :class="['form-select', cls]"
-        :close-on-select="!multiple"
-        :deselect-label="deselectLabel"
-        label="label"
-        :multiple="multiple"
-        :options="formattedOptions"
-        placeholder="Select value"
-        :selected-label="selectedLabel"
-        select-label="Click to select"
-        track-by="value"
-        @open="onOpen"
-        @close="onClose" />
-    <b-alert v-else v-localize variant="warning" show> No options available. </b-alert>
-</template>
diff --git a/client/src/components/Form/Elements/FormData/utilities.js b/client/src/components/Form/Elements/FormData/utilities.js
deleted file mode 100644
index 3538bff328aa..000000000000
--- a/client/src/components/Form/Elements/FormData/utilities.js
+++ /dev/null
@@ -1,502 +0,0 @@
-/** View for hda and dce content selector ui elements */
-const View = Backbone.View.extend({
-    initialize: function (options) {
-        const self = this;
-        this.model =
-            (options && options.model) ||
-            new Backbone.Model({
-                src_labels: { hda: "dataset", hdca: "dataset collection" },
-                pagelimit: 100,
-                statustimer: 1000,
-            }).set(options);
-        this.setElement($("<div/>").addClass("ui-select-content"));
-        this.button_product = new Ui.RadioButton.View({
-            value: "false",
-            data: [
-                {
-                    icon: "fa fa-chain",
-                    value: "false",
-                    tooltip:
-                        "Linked inputs will be run in matched order with other datasets e.g. use this for matching forward and reverse reads.",
-                },
-                {
-                    icon: "fa fa-chain-broken",
-                    value: "true",
-                    tooltip: "Unlinked dataset inputs will be run against *all* other inputs.",
-                },
-            ],
-        });
-        this.$batch = {
-            linked: $(this._templateBatch()).clone(),
-            enabled: $(this._templateBatch()).clone().append(this.button_product.$el),
-        };
-
-        // add drag-drop event handlers
-        const element = this.$el.get(0);
-        element.addEventListener("dragenter", (e) => {
-            this.lastenter = e.target;
-            self.$el.addClass("ui-dragover");
-        });
-        element.addEventListener("dragover", (e) => {
-            e.preventDefault();
-        });
-        element.addEventListener("dragleave", (e) => {
-            this.lastenter === e.target && self.$el.removeClass("ui-dragover");
-        });
-        element.addEventListener("drop", (e) => {
-            e.preventDefault();
-            try {
-                const drop_data = JSON.parse(e.dataTransfer.getData("text"))[0];
-                this._handleDropValues(drop_data);
-            } catch (e) {
-                this._handleDropStatus("danger");
-            }
-        });
-
-        // track current cache elements
-        this.cache = {};
-
-        // add listeners
-        this.listenTo(this.model, "change:data", this._changeData, this);
-        this.listenTo(this.model, "change:wait", this._changeWait, this);
-        this.listenTo(this.model, "change:current", this._changeCurrent, this);
-        this.listenTo(this.model, "change:value", this._changeValue, this);
-        this.listenTo(
-            this.model,
-            "change:type change:optional change:multiple change:extensions",
-            this._changeType,
-            this
-        );
-        this.render();
-
-        // add change event
-        this.on("change", () => {
-            options.onchange && options.onchange(self.value());
-        });
-    },
-
-    render: function () {
-        this._changeType();
-        this._changeValue();
-        this._changeWait();
-    },
-
-    /** Indicate that select fields are being updated */
-    wait: function () {
-        this.model.set("wait", true);
-    },
-
-    /** Indicate that the options update has been completed */
-    unwait: function () {
-        this.model.set("wait", false);
-    },
-
-    /** Update data representing selectable options */
-    update: function (input_def) {
-        this.model.set("data", input_def.options);
-    },
-
-    /** Return the currently selected dataset values */
-    value: function (new_value) {
-        if (new_value) {
-            this._patchValue(new_value);
-            const result = this._batch(this._pickValue(new_value));
-            this.model.set("value", result);
-        }
-        const current = this.model.get("current");
-        if (this.config[current]) {
-            let id_list = this.fields[current].value();
-            if (id_list !== null) {
-                id_list = Array.isArray(id_list) ? id_list : [id_list];
-                if (id_list.length > 0) {
-                    const result = this._batch({ values: [] });
-                    for (const i in id_list) {
-                        const details = this.cache[`${id_list[i]}_${this.config[current].src}`];
-                        if (details) {
-                            const unpatchedValue = this._unpatchValue(details);
-                            result.values.push(unpatchedValue);
-                        } else {
-                            console.debug(
-                                "ui-select-content::value()",
-                                `Requested details not found for '${id_list[i]}'.`
-                            );
-                            return null;
-                        }
-                    }
-                    result.values.sort((a, b) => a.hid - b.hid);
-                    return this._pickValue(result);
-                }
-            }
-        } else {
-            console.debug("ui-select-content::value()", `Invalid value/source '${new_value}'.`);
-        }
-        return null;
-    },
-
-    /** Change of current select field */
-    _changeCurrent: function () {
-        _.each(this.fields, (field, i) => {
-            const cnf = this.config[i];
-            if (this.model.get("current") == i) {
-                field.$el.show();
-                _.each(this.$batch, ($batchfield, batchmode) => {
-                    if (cnf.batch == batchmode) {
-                        $batchfield.show();
-                    } else {
-                        $batchfield.hide();
-                    }
-                });
-                if (cnf.src == "hda") {
-                    this.button_dialog.show();
-                    this.upload_dialog.show();
-                } else {
-                    this.button_dialog.hide();
-                    this.upload_dialog.hide();
-                }
-                this.button_type.value(i);
-            } else {
-                field.$el.hide();
-            }
-        });
-        if (this.fields.length > 1) {
-            this.button_type.show();
-        } else {
-            this.button_type.hide();
-        }
-    },
-
-    /** Change of type */
-    _changeType: function () {
-        const self = this;
-        const galaxy = getGalaxyInstance();
-
-        // identify selector type identifier i.e. [ flavor ]_[ type ]_[ multiple ]
-        const config_id =
-            (this.model.get("flavor") ? `${this.model.get("flavor")}_` : "") +
-            String(this.model.get("type")) +
-            (this.model.get("multiple") ? "_multiple" : "");
-        if (Configurations[config_id]) {
-            this.config = Configurations[config_id];
-        } else {
-            this.config = Configurations["data"];
-            console.debug("ui-select-content::_changeType()", `Invalid configuration/type id '${config_id}'.`);
-        }
-
-        // prepare extension component of error message
-        const data = self.model.get("data");
-        const formats = this.model.get("extensions");
-        const extensions = Array.isArray(formats) ? Utils.textify(formats) : "";
-        const src_labels = this.model.get("src_labels");
-
-        // build radio button for data selectors
-        this.fields = [];
-        this.button_data = [];
-        _.each(this.config, (c, i) => {
-            self.button_data.push({
-                value: i,
-                icon: c.icon,
-                tooltip: c.tooltip,
-            });
-            self.fields.push(
-                new Select.View({
-                    optional: self.model.get("optional"),
-                    multiple: c.multiple,
-                    searchable:
-                        !c.multiple || (data && data[c.src] && data[c.src].length > self.model.get("pagelimit")),
-                    individual: true,
-                    error_text: `No ${extensions ? `${extensions} ` : ""}${src_labels[c.src] || "content"} available.`,
-                    onchange: function () {
-                        self.trigger("change");
-                    },
-                })
-            );
-        });
-        this.button_type = new Ui.RadioButton.View({
-            value: this.model.get("current"),
-            data: this.button_data,
-            cls: "pr-lg-2",
-            onchange: function (value) {
-                self.model.set("current", value);
-                self.trigger("change");
-            },
-        });
-
-        // build data dialog button
-        this.button_dialog = new Ui.Button({
-            icon: "fa-folder-open-o",
-            tooltip: "Browse Datasets",
-            onclick: () => {
-                const current = this.model.get("current");
-                const cnf = this.config[current];
-                galaxy.data.dialog(
-                    (response) => {
-                        this._handleDropValues(response, false);
-                    },
-                    {
-                        multiple: cnf.multiple,
-                        library: !!cnf.library,
-                        format: null,
-                        allowUpload: true,
-                    }
-                );
-            },
-        });
-
-        // build data dialog button
-        this.upload_dialog = new Ui.Button({
-            icon: "fa-upload",
-            tooltip: "Upload Dataset",
-            onclick: () => {
-                const current = this.model.get("current");
-                const cnf = this.config[current];
-                // model doesn't have format yet unfortunately, need to get through to here.
-                galaxy.data.dialog(
-                    (response) => {
-                        this._handleDropValues(response, false);
-                    },
-                    {
-                        multiple: cnf.multiple,
-                        formats: formats,
-                        new: true,
-                    }
-                );
-            },
-        });
-
-        // append views
-        const $fields = $("<div/>").addClass("overflow-auto w-100 py-2 py-lg-0 pr-lg-2 ");
-        this.$el
-            .empty()
-            .addClass("d-flex flex-row flex-wrap flex-lg-nowrap")
-            .append($("<div/>").append(this.button_type.$el))
-            .append($fields);
-        if (galaxy.config.upload_from_form_button == "always-on") {
-            this.$el.append($("<div style='margin-right: 5px;' />").append(this.upload_dialog.$el));
-        }
-        this.$el.append($("<div/>").append(this.button_dialog.$el));
-        _.each(this.fields, (field) => {
-            $fields.append(field.$el);
-        });
-        _.each(this.$batch, ($batchfield, batchmode) => {
-            $fields.append($batchfield);
-        });
-        this.model.set("current", 0);
-        this._changeCurrent();
-        this._changeData();
-    },
-
-    /** Change of wait flag */
-    _changeWait: function () {
-        const self = this;
-        _.each(this.fields, (field) => {
-            field[self.model.get("wait") ? "wait" : "unwait"]();
-        });
-    },
-
-    /** Change of available options */
-    _changeData: function () {
-        const options = this.model.get("data");
-        const self = this;
-        const select_options = { hda: [], hdca: [] };
-        _.each(options, (items, src) => {
-            _.each(items, (item) => {
-                self._patchValue(item, src);
-                const current_src = item.src || src;
-                const addOption = !this.model.attributes.tag || item.tags.includes(this.model.attributes.tag);
-                if (addOption) {
-                    select_options[current_src].push({
-                        hid: item.hid || Infinity, // if we got no hid we have a "Selected" item
-                        keep: item.keep,
-                        label: `${item.hid || "Selected"}: ${item.name}`,
-                        value: item.id,
-                        origin: item.origin,
-                        tags: item.tags,
-                    });
-                }
-                self.cache[`${item.id}_${current_src}`] = item;
-            });
-        });
-        _.each(this.config, (c, i) => {
-            select_options[c.src] && self.fields[i].add(select_options[c.src], (a, b) => b.hid - a.hid);
-        });
-    },
-
-    /** Change of incoming value */
-    _changeValue: function () {
-        const new_value = this.model.get("value");
-        if (new_value && new_value.values && new_value.values.length > 0) {
-            // sniff first suitable field type from config list
-            let src = new_value.values[0].src;
-            if (src === "dce") {
-                src =
-                    this.cache[`dce${new_value.values[0].id}_hda`]?.src ||
-                    this.cache[`dce${new_value.values[0].id}_hdca`]?.src;
-            }
-            this._patchValue(new_value, src);
-            // create list with content ids
-            const list = [];
-            _.each(new_value.values, (value) => {
-                list.push(value.id);
-            });
-            const multiple = new_value.values.length > 1;
-            for (let i = 0; i < this.config.length; i++) {
-                const field = this.fields[i];
-                const c = this.config[i];
-                if (c.src == src && [multiple, true].indexOf(c.multiple) !== -1) {
-                    this.model.set("current", i);
-                    field.value(list);
-                    break;
-                }
-            }
-        } else {
-            _.each(this.fields, (field) => {
-                field.value(null);
-            });
-        }
-    },
-
-    /** Source helper matches history_content_types to source types */
-    _getSource: function (v) {
-        return v.history_content_type == "dataset_collection" ? "hdca" : "hda";
-    },
-
-    /** Only utilize id, source and map_over_type when specifiying input value **/
-    _pickValue: function (v) {
-        if (v && v.values) {
-            v.values = v.values.map((entry) => ({
-                id: entry.id,
-                src: entry.src,
-                map_over_type: entry.map_over_type,
-            }));
-        }
-        return v;
-    },
-
-    /** Library datasets are displayed and selected together with history datasets,
-        Dataset collection elements are displayed together with history dataset collections **/
-    _patchValue: function (v, src) {
-        const patchTo = { ldda: "hda", dce: src };
-        if (v.values) {
-            _.each(v.values, (v) => {
-                this._patchValue(v, src);
-            });
-        } else if (patchTo[v.src]) {
-            v.origin = v.src;
-            v.src = patchTo[v.src];
-            v.id = `${v.origin}${v.id}`;
-        }
-    },
-
-    /** Restores original value e.g. after patching library datasets **/
-    _unpatchValue: function (v) {
-        if (v.origin) {
-            const d = Object.assign({}, v);
-            d.id = d.id.substr(d.origin.length);
-            d.src = d.origin;
-            return d;
-        }
-        return v;
-    },
-
-    /** Add values from drag/drop */
-    _handleDropValues: function (drop_data, drop_partial = true) {
-        const self = this;
-        const data = this.model.get("data");
-        const current = this.model.get("current");
-        const config = this.config[current];
-        const field = this.fields[current];
-        if (data) {
-            const values = Array.isArray(drop_data) ? drop_data : [drop_data];
-            if (values.length > 0) {
-                let data_changed = false;
-                _.each(values, (v) => {
-                    // element_id deals with override in old backbone code,
-                    // can remove when old history is deprecated
-                    v.id = v.element_id || v.id;
-                    self._patchValue(v);
-                    const new_id = v.id;
-                    const new_src = (v.src = this._getSource(v));
-                    const new_value = { id: new_id, src: new_src };
-                    if (!_.findWhere(data[new_src], new_value)) {
-                        data_changed = true;
-                        data[new_src].push({
-                            id: new_id,
-                            src: new_src,
-                            hid: v.hid || "Selected",
-                            name: v.name ? v.name : new_id,
-                            origin: v.origin,
-                            keep: true,
-                            tags: [],
-                        });
-                    }
-                });
-                if (data_changed) {
-                    this._changeData();
-                }
-                const first_id = values[0].id;
-                const first_src = values[0].src;
-                if (config.src == first_src && drop_partial) {
-                    let current_value = field.value();
-                    if (current_value && config.multiple) {
-                        _.each(values, (v) => {
-                            if (current_value.indexOf(v.id) == -1) {
-                                current_value.push(v.id);
-                            }
-                        });
-                    } else {
-                        current_value = first_id;
-                    }
-                    field.value(current_value);
-                } else {
-                    this.model.set("value", { values: values });
-                    this.model.trigger("change:value");
-                }
-                this.trigger("change");
-            }
-        }
-        this._handleDropStatus("success");
-    },
-
-    /** Highlight drag result */
-    _handleDropStatus: function (status) {
-        const self = this;
-        this.$el.removeClass("ui-dragover").addClass(`ui-dragover-${status}`);
-        setTimeout(() => {
-            self.$el.removeClass(`ui-dragover-${status}`);
-        }, this.model.get("statustimer"));
-    },
-
-    /** Assists in identifying the batch mode */
-    _batch: function (result) {
-        result["batch"] = false;
-        const current = this.model.get("current");
-        const config = this.config[current];
-        if (config.src == "dce" || config.src == "hdca") {
-            const element = this.cache[`${this.fields[current].value()}_${config.src}`];
-            if (element && element.map_over_type) {
-                result["batch"] = true;
-            }
-        }
-        if (config.batch == Batch.LINKED || config.batch == Batch.ENABLED) {
-            result["batch"] = true;
-            if (config.batch == Batch.ENABLED && this.button_product.value() === "true") {
-                result["product"] = true;
-            }
-        }
-        return result;
-    },
-
-    /** Template for batch mode execution options */
-    _templateBatch: function () {
-        return `<div class="form-text text-muted" style="clear: both;">
-                    <i class="fa fa-sitemap"/>
-                    <span>
-                        This is a batch mode input field. Separate jobs will be triggered for each dataset selection.
-                    </span>
-                </div>`;
-    },
-});
-
-export default {
-    View: View,
-};
diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index 13f25a7535b8..cf30c84c6ff5 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -5,7 +5,9 @@ import Multiselect from "vue-multiselect";
 import { useMultiselect } from "@/composables/useMultiselect";
 import { uid } from "@/utils/utils";
 
-type SelectValue = string | number | null;
+import type { DataOption, DataValue } from "./FormData/types";
+
+type SelectValue = DataOption | string | number | null;
 const { ariaExpanded, onOpen, onClose } = useMultiselect();
 
 interface SelectOption {
@@ -18,8 +20,8 @@ const props = withDefaults(
         id?: string;
         multiple?: boolean;
         optional?: boolean;
-        options: Array<[string, SelectValue]>;
-        value?: Array<SelectValue> | string | number;
+        options: Array<DataOption> | Array<[string, SelectValue]>;
+        value?: Array<DataOption> | Array<SelectValue> | string | number;
     }>(),
     {
         id: `form-select-${uid()}`,
@@ -52,10 +54,13 @@ const deselectLabel: ComputedRef<string> = computed(() => {
  * select component into an array of objects
  */
 const formattedOptions: ComputedRef<Array<SelectOption>> = computed(() => {
-    const result: Array<SelectOption> = props.options.map((option) => ({
-        label: option[0],
-        value: option[1],
-    }));
+    const result: Array<SelectOption> = props.options.map((option) => {
+        const hasName = "name" in option;
+        return {
+            label: hasName ? option.name : option[0],
+            value: hasName ? option : option[1],
+        };
+    });
     if (props.optional && !props.multiple) {
         result.unshift({
             label: "Nothing selected",

From f4117fa72be87577dc7c4a02ffd61fcc5f834f48 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 16 Aug 2023 15:28:11 +0200
Subject: [PATCH 11/86] Match incoming data input value to available options

---
 .../Form/Elements/FormData/FormData.vue       | 22 +++++++++++--------
 .../Form/Elements/FormData/variants.ts        | 12 ++++++----
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 5fd4b1b41dd5..9cc24b85b46c 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -7,22 +7,17 @@ import { BFormCheckbox, BFormRadio, BFormRadioGroup } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import type { DataOption, DataValue } from "./types";
-import { BATCH, VARIANTS } from "./variants";
+import { BATCH, SOURCE, VARIANTS } from "./variants";
 
 import FormSelect from "@/components/Form/Elements/FormSelect.vue";
 
 library.add(faCopy, faExclamation, faFile, faFolder, faLink, faUnlink);
 
-interface DataOptions {
-    hda: Array<DataOption>;
-    hdca: Array<DataOption>;
-}
-
 const props = withDefaults(
     defineProps<{
         multiple?: boolean;
         optional?: boolean;
-        options: DataOptions;
+        options: Record<string, Array<DataOption>>;
         value?: DataValue;
         extensions?: Array<string>;
         type?: string;
@@ -48,8 +43,17 @@ const currentField = ref(0);
 
 const currentValue = computed({
     get: () => {
-        console.log("in", props.value.values);
-        return props.value.values;
+        const value: Array<DataOption> = [];
+        props.value.values.forEach((v) => {
+            const sourceOptions = props.options[v.src];
+            if (sourceOptions) {
+                const foundEntry = sourceOptions.find((entry) => entry.id === v.id);
+                if (foundEntry) {
+                    value.push(foundEntry);
+                }
+            }
+        });
+        return value;
     },
     set: (val) => {
         console.log("out", val);
diff --git a/client/src/components/Form/Elements/FormData/variants.ts b/client/src/components/Form/Elements/FormData/variants.ts
index df942da1e01e..9f8ee11b197e 100644
--- a/client/src/components/Form/Elements/FormData/variants.ts
+++ b/client/src/components/Form/Elements/FormData/variants.ts
@@ -1,6 +1,4 @@
-/** Batch mode variations */
-export const BATCH = { DISABLED: "disabled", ENABLED: "enabled", LINKED: "linked" };
-
+/** Data input variations interface */
 interface VariantInterface {
     batch: string;
     icon: string;
@@ -10,7 +8,13 @@ interface VariantInterface {
     tooltip: string;
 }
 
-/** List of available content selectors options */
+/** Batch mode variations */
+export const BATCH = { DISABLED: "disabled", ENABLED: "enabled", LINKED: "linked" };
+
+/** Data source variations */
+export const SOURCE = { DATASET: "hda", COLLECTION: "hdca" };
+
+/** List of available data input variations */
 export const VARIANTS: Record<string, Array<VariantInterface>> = {
     data: [
         {

From 4d0e59bf2a10f8354cb64dfa990096b98c6c8146 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 16 Aug 2023 21:32:26 +0200
Subject: [PATCH 12/86] Draft input value handling

---
 .../Form/Elements/FormData/FormData.vue       | 40 ++++++++++++++-----
 .../Form/Elements/FormData/types.ts           |  1 +
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 9cc24b85b46c..cc7eb73a2d9e 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -44,20 +44,38 @@ const currentField = ref(0);
 const currentValue = computed({
     get: () => {
         const value: Array<DataOption> = [];
-        props.value.values.forEach((v) => {
-            const sourceOptions = props.options[v.src];
-            if (sourceOptions) {
-                const foundEntry = sourceOptions.find((entry) => entry.id === v.id);
-                if (foundEntry) {
-                    value.push(foundEntry);
+        if (props.value) {
+            console.log("get", props.value);
+            props.value.values.forEach((v) => {
+                const sourceOptions = props.options[v.src];
+                if (sourceOptions) {
+                    const foundEntry = sourceOptions.find((entry) => entry.id === v.id);
+                    if (foundEntry) {
+                        value.push(foundEntry);
+                    }
                 }
-            }
-        });
-        return value;
+            });
+            return value;
+        } else {
+            return null;
+        }
     },
     set: (val) => {
-        console.log("out", val);
-        $emit("input", val);
+        const batchMode = currentVariant.value && currentVariant.value.batch;
+        if (val) {
+            const values = Array.isArray(val) ? val : [val];
+            $emit("input", {
+                batch: batchMode !== BATCH.DISABLED,
+                product: batchMode === BATCH.ENABLED && !currentBatch.value,
+                values: values.map((entry) => ({
+                    id: entry.id,
+                    src: entry.src,
+                    map_over_type: entry.map_over_type,
+                })),
+            });
+        } else {
+            $emit("input", null);
+        }
     },
 });
 
diff --git a/client/src/components/Form/Elements/FormData/types.ts b/client/src/components/Form/Elements/FormData/types.ts
index 7f127c26b3a5..7e64f22ed973 100644
--- a/client/src/components/Form/Elements/FormData/types.ts
+++ b/client/src/components/Form/Elements/FormData/types.ts
@@ -2,6 +2,7 @@ export interface DataOption {
     id: string;
     keep: boolean;
     hid: string;
+    map_over_type?: string;
     name: string;
     src: string;
     tags: Array<string>;

From e1b783911de8f534901b93d892f55d4b23991bb3 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 17 Aug 2023 08:28:34 +0200
Subject: [PATCH 13/86] Add type guard, properly handle dataset labels

---
 .../Form/Elements/FormData/FormData.vue       |  1 -
 .../Form/Elements/FormData/types.ts           |  4 +++
 .../components/Form/Elements/FormSelect.vue   | 27 ++++++++++++-------
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index cc7eb73a2d9e..f9664f42ac3c 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -45,7 +45,6 @@ const currentValue = computed({
     get: () => {
         const value: Array<DataOption> = [];
         if (props.value) {
-            console.log("get", props.value);
             props.value.values.forEach((v) => {
                 const sourceOptions = props.options[v.src];
                 if (sourceOptions) {
diff --git a/client/src/components/Form/Elements/FormData/types.ts b/client/src/components/Form/Elements/FormData/types.ts
index 7e64f22ed973..398ab6d2ac1b 100644
--- a/client/src/components/Form/Elements/FormData/types.ts
+++ b/client/src/components/Form/Elements/FormData/types.ts
@@ -11,3 +11,7 @@ export interface DataOption {
 export interface DataValue {
     values: Array<DataOption>;
 }
+
+export function isDataOption(obj: unknown): obj is DataOption {
+    return obj instanceof Object && "hid" in obj && "name" in obj;
+}
diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index cf30c84c6ff5..c4ef0d5efb86 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -2,14 +2,15 @@
 import { computed, type ComputedRef, onMounted, watch } from "vue";
 import Multiselect from "vue-multiselect";
 
+import { type DataOption, type DataValue, isDataOption } from "@/components/Form/Elements/FormData/types";
 import { useMultiselect } from "@/composables/useMultiselect";
 import { uid } from "@/utils/utils";
 
-import type { DataOption, DataValue } from "./FormData/types";
-
-type SelectValue = DataOption | string | number | null;
 const { ariaExpanded, onOpen, onClose } = useMultiselect();
 
+type SelectBasic = string | number | null;
+type SelectValue = DataOption | SelectBasic;
+
 interface SelectOption {
     label: string;
     value: SelectValue;
@@ -20,8 +21,8 @@ const props = withDefaults(
         id?: string;
         multiple?: boolean;
         optional?: boolean;
-        options: Array<DataOption> | Array<[string, SelectValue]>;
-        value?: Array<DataOption> | Array<SelectValue> | string | number;
+        options: Array<DataOption> | Array<[string, SelectBasic]>;
+        value?: Array<SelectValue> | string | number;
     }>(),
     {
         id: `form-select-${uid()}`,
@@ -55,11 +56,17 @@ const deselectLabel: ComputedRef<string> = computed(() => {
  */
 const formattedOptions: ComputedRef<Array<SelectOption>> = computed(() => {
     const result: Array<SelectOption> = props.options.map((option) => {
-        const hasName = "name" in option;
-        return {
-            label: hasName ? option.name : option[0],
-            value: hasName ? option : option[1],
-        };
+        if (isDataOption(option)) {
+            return {
+                label: `${option.hid}: ${option.name}`,
+                value: option,
+            };
+        } else {
+            return {
+                label: option[0],
+                value: option[1],
+            };
+        }
     });
     if (props.optional && !props.multiple) {
         result.unshift({

From bb71e85aa05e189ca537a2674f7c54446de7d9bd Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 17 Aug 2023 16:31:06 +0200
Subject: [PATCH 14/86] Preserve data option tagged as keep

---
 .../components/Form/Elements/FormSelect.vue    | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index c4ef0d5efb86..73e34b3c0109 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -36,6 +36,9 @@ const emit = defineEmits<{
     (e: "input", value: SelectValue | Array<SelectValue>): void;
 }>();
 
+/** Store options which need to be preserved **/
+const keepOptions: Record<string, SelectOption> = {};
+
 /**
  * Determine dom wrapper class
  */
@@ -55,12 +58,18 @@ const deselectLabel: ComputedRef<string> = computed(() => {
  * select component into an array of objects
  */
 const formattedOptions: ComputedRef<Array<SelectOption>> = computed(() => {
+    const keepSet = new Set();
     const result: Array<SelectOption> = props.options.map((option) => {
         if (isDataOption(option)) {
-            return {
+            const newOption: SelectOption = {
                 label: `${option.hid}: ${option.name}`,
-                value: option,
+                value: option || null,
             };
+            if (option.keep) {
+                keepOptions[option.id] = newOption;
+                keepSet.add(option.id);
+            }
+            return newOption;
         } else {
             return {
                 label: option[0],
@@ -68,6 +77,11 @@ const formattedOptions: ComputedRef<Array<SelectOption>> = computed(() => {
             };
         }
     });
+    Object.entries(keepOptions).forEach(([key, value]) => {
+        if (!keepSet.has(key)) {
+            result.unshift(value);
+        }
+    });
     if (props.optional && !props.multiple) {
         result.unshift({
             label: "Nothing selected",

From d96e74c6f4c5190d34cbfd231ccfba54f8b844f0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 18 Aug 2023 01:11:12 +0200
Subject: [PATCH 15/86] Refactor select field handling, move type specific prep
 to parent components

---
 .../Form/Elements/FormData/FormData.vue       | 53 +++++++++++++++++-
 .../Form/Elements/FormData/types.ts           |  8 ---
 .../components/Form/Elements/FormSelect.vue   | 56 +++----------------
 .../Form/Elements/FormSelection.vue           | 26 +++++++--
 client/src/components/Form/FormDisplay.vue    |  1 +
 5 files changed, 81 insertions(+), 63 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index f9664f42ac3c..e88c1589f569 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -6,13 +6,25 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BFormCheckbox, BFormRadio, BFormRadioGroup } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
-import type { DataOption, DataValue } from "./types";
+import type { DataOption } from "./types";
 import { BATCH, SOURCE, VARIANTS } from "./variants";
 
 import FormSelect from "@/components/Form/Elements/FormSelect.vue";
 
 library.add(faCopy, faExclamation, faFile, faFolder, faLink, faUnlink);
 
+interface DataValue {
+    values: Array<DataOption>;
+}
+
+interface SelectOption {
+    label: string;
+    value: DataOption | null;
+}
+
+/** Store options which need to be preserved **/
+const keepOptions: Record<string, SelectOption> = {};
+
 const props = withDefaults(
     defineProps<{
         multiple?: boolean;
@@ -41,6 +53,16 @@ const currentBatch = ref(true);
 
 const currentField = ref(0);
 
+const currentOptions = computed(() => {
+    if (currentSource.value && currentSource.value in props.options) {
+        return (props.options && props.options[currentSource.value]) || [];
+    } else {
+        return [];
+    }
+});
+
+const currentSource = computed(() => (currentVariant.value && currentVariant.value.src) || null);
+
 const currentValue = computed({
     get: () => {
         const value: Array<DataOption> = [];
@@ -86,6 +108,33 @@ const currentVariant = computed(() => {
     }
 });
 
+const formattedOptions = computed(() => {
+    const keepSet = new Set();
+    const result: Array<SelectOption> = currentOptions.value.map((option) => {
+        const newOption = {
+            label: `${option.hid}: ${option.name}`,
+            value: option || null,
+        };
+        if (option.keep) {
+            keepOptions[option.id] = newOption;
+            keepSet.add(option.id);
+        }
+        return newOption;
+    });
+    Object.entries(keepOptions).forEach(([key, option]) => {
+        if (!keepSet.has(key)) {
+            result.unshift(option);
+        }
+    });
+    if (props.optional && !props.multiple) {
+        result.unshift({
+            label: "Nothing selected",
+            value: null,
+        });
+    }
+    return result;
+});
+
 const variant = computed(() => {
     const flavorKey = props.flavor ? `${props.flavor}_` : "";
     const multipleKey = props.multiple ? `_${props.multiple}` : "";
@@ -108,7 +157,7 @@ const variant = computed(() => {
                 class="w-100"
                 :multiple="currentVariant.multiple"
                 :optional="optional"
-                :options="options[currentVariant.src]" />
+                :options="formattedOptions" />
         </div>
         <div v-if="currentVariant.batch !== BATCH.DISABLED">
             <BFormCheckbox
diff --git a/client/src/components/Form/Elements/FormData/types.ts b/client/src/components/Form/Elements/FormData/types.ts
index 398ab6d2ac1b..140c36bd08c9 100644
--- a/client/src/components/Form/Elements/FormData/types.ts
+++ b/client/src/components/Form/Elements/FormData/types.ts
@@ -7,11 +7,3 @@ export interface DataOption {
     src: string;
     tags: Array<string>;
 }
-
-export interface DataValue {
-    values: Array<DataOption>;
-}
-
-export function isDataOption(obj: unknown): obj is DataOption {
-    return obj instanceof Object && "hid" in obj && "name" in obj;
-}
diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index 73e34b3c0109..e3c69cff56fb 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -2,14 +2,13 @@
 import { computed, type ComputedRef, onMounted, watch } from "vue";
 import Multiselect from "vue-multiselect";
 
-import { type DataOption, type DataValue, isDataOption } from "@/components/Form/Elements/FormData/types";
+import { type DataOption } from "@/components/Form/Elements/FormData/types";
 import { useMultiselect } from "@/composables/useMultiselect";
 import { uid } from "@/utils/utils";
 
 const { ariaExpanded, onOpen, onClose } = useMultiselect();
 
-type SelectBasic = string | number | null;
-type SelectValue = DataOption | SelectBasic;
+type SelectValue = DataOption | string | number | null;
 
 interface SelectOption {
     label: string;
@@ -21,7 +20,7 @@ const props = withDefaults(
         id?: string;
         multiple?: boolean;
         optional?: boolean;
-        options: Array<DataOption> | Array<[string, SelectBasic]>;
+        options: Array<SelectOption>;
         value?: Array<SelectValue> | string | number;
     }>(),
     {
@@ -36,9 +35,6 @@ const emit = defineEmits<{
     (e: "input", value: SelectValue | Array<SelectValue>): void;
 }>();
 
-/** Store options which need to be preserved **/
-const keepOptions: Record<string, SelectOption> = {};
-
 /**
  * Determine dom wrapper class
  */
@@ -53,49 +49,11 @@ const deselectLabel: ComputedRef<string> = computed(() => {
     return props.multiple ? "Click to remove" : "";
 });
 
-/**
- * Translates input options for consumption by the
- * select component into an array of objects
- */
-const formattedOptions: ComputedRef<Array<SelectOption>> = computed(() => {
-    const keepSet = new Set();
-    const result: Array<SelectOption> = props.options.map((option) => {
-        if (isDataOption(option)) {
-            const newOption: SelectOption = {
-                label: `${option.hid}: ${option.name}`,
-                value: option || null,
-            };
-            if (option.keep) {
-                keepOptions[option.id] = newOption;
-                keepSet.add(option.id);
-            }
-            return newOption;
-        } else {
-            return {
-                label: option[0],
-                value: option[1],
-            };
-        }
-    });
-    Object.entries(keepOptions).forEach(([key, value]) => {
-        if (!keepSet.has(key)) {
-            result.unshift(value);
-        }
-    });
-    if (props.optional && !props.multiple) {
-        result.unshift({
-            label: "Nothing selected",
-            value: null,
-        });
-    }
-    return result;
-});
-
 /**
  * Tracks if the select field has options
  */
 const hasOptions: ComputedRef<Boolean> = computed(() => {
-    return formattedOptions.value.length > 0;
+    return props.options.length > 0;
 });
 
 /**
@@ -103,7 +61,7 @@ const hasOptions: ComputedRef<Boolean> = computed(() => {
  */
 const initialValue: ComputedRef<SelectValue> = computed(() => {
     if (props.value === null && !props.optional && hasOptions.value) {
-        const v = formattedOptions.value[0];
+        const v = props.options[0];
         if (v) {
             return v.value;
         }
@@ -129,7 +87,7 @@ const selectedValues: ComputedRef<Array<SelectValue>> = computed(() => {
  * Tracks current value and emits changes
  */
 const currentValue = computed({
-    get: () => formattedOptions.value.filter((option: SelectOption) => selectedValues.value.includes(option.value)),
+    get: () => props.options.filter((option: SelectOption) => selectedValues.value.includes(option.value)),
     set: (val: Array<SelectOption> | SelectOption): void => {
         if (Array.isArray(val)) {
             if (val.length > 0) {
@@ -181,7 +139,7 @@ onMounted(() => {
         :deselect-label="deselectLabel"
         label="label"
         :multiple="multiple"
-        :options="formattedOptions"
+        :options="props.options"
         placeholder="Select value"
         :selected-label="selectedLabel"
         select-label="Click to select"
diff --git a/client/src/components/Form/Elements/FormSelection.vue b/client/src/components/Form/Elements/FormSelection.vue
index 306a3a15686c..b846e3280ffd 100644
--- a/client/src/components/Form/Elements/FormSelection.vue
+++ b/client/src/components/Form/Elements/FormSelection.vue
@@ -1,9 +1,9 @@
 <script setup>
 import { computed } from "vue";
 
-import FormCheck from "./FormCheck";
-import FormRadio from "./FormRadio";
-import FormSelect from "./FormSelect";
+import FormCheck from "./FormCheck.vue";
+import FormRadio from "./FormRadio.vue";
+import FormSelect from "./FormSelect.vue";
 
 const $emit = defineEmits(["input"]);
 const props = defineProps({
@@ -54,10 +54,28 @@ const currentOptions = computed(() => {
     }
     return [];
 });
+
+/**
+ * Translates input options for consumption by the
+ * select component into an array of objects
+ */
+const selectOptions = computed(() => {
+    const result = currentOptions.value.map((option) => ({
+        label: option[0],
+        value: option[1],
+    }));
+    if (props.optional && !props.multiple) {
+        result.unshift({
+            label: "Nothing selected",
+            value: null,
+        });
+    }
+    return result;
+});
 </script>
 
 <template>
     <FormCheck v-if="display === 'checkboxes'" v-model="currentValue" :options="currentOptions" />
     <FormRadio v-else-if="display === 'radio'" v-model="currentValue" :options="currentOptions" />
-    <FormSelect v-else v-model="currentValue" :multiple="multiple" :optional="optional" :options="currentOptions" />
+    <FormSelect v-else v-model="currentValue" :multiple="multiple" :optional="optional" :options="selectOptions" />
 </template>
diff --git a/client/src/components/Form/FormDisplay.vue b/client/src/components/Form/FormDisplay.vue
index f6e22c76fb7c..f7c7d5a3d3dc 100644
--- a/client/src/components/Form/FormDisplay.vue
+++ b/client/src/components/Form/FormDisplay.vue
@@ -165,6 +165,7 @@ export default {
             });
         },
         onChangeForm() {
+            this.formInputs = JSON.parse(JSON.stringify(this.formInputs));
             this.onChange(true);
         },
         onCloneInputs() {

From e7ff4c478984ac1eae468136c4e268fcb04348ac Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 18 Aug 2023 01:57:20 +0200
Subject: [PATCH 16/86] Consolidate option formatting

---
 .../Form/Elements/FormCheck.test.js           |  8 +++----
 .../components/Form/Elements/FormCheck.vue    | 13 +++++++----
 .../Form/Elements/FormData/FormData.vue       |  4 ++--
 .../Form/Elements/FormRadio.test.js           |  2 +-
 .../components/Form/Elements/FormRadio.vue    |  4 ++--
 .../components/Form/Elements/FormSelect.vue   |  2 +-
 .../Form/Elements/FormSelection.vue           | 23 ++++---------------
 7 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/client/src/components/Form/Elements/FormCheck.test.js b/client/src/components/Form/Elements/FormCheck.test.js
index 59e6bf6d3dc0..99a83267b89d 100644
--- a/client/src/components/Form/Elements/FormCheck.test.js
+++ b/client/src/components/Form/Elements/FormCheck.test.js
@@ -24,7 +24,7 @@ describe("FormCheck", () => {
         const n = 3;
         const options = [];
         for (let i = 0; i < n; i++) {
-            options.push([`label_${i}`, `value_${i}`]);
+            options.push({ label: `label_${i}`, value: `value_${i}` });
         }
         await wrapper.setProps({ options });
         const inputs = wrapper.findAll("[type='checkbox']");
@@ -52,7 +52,7 @@ describe("FormCheck", () => {
         const emptyValues = [0, null, false, true, undefined];
         const options = [];
         for (let i = 0; i < emptyValues.length; i++) {
-            options.push([`label_${i}`, emptyValues[i]]);
+            options.push({ label: `label_${i}`, value: emptyValues[i] });
         }
         await wrapper.setProps({ options });
         const inputs = wrapper.findAll("[type='checkbox']");
@@ -70,7 +70,7 @@ describe("FormCheck", () => {
         const n = 3;
         const options = [];
         for (let i = 0; i < n; i++) {
-            options.push([`label_${i}`, `value_${i}`]);
+            options.push({ label: `label_${i}`, value: `value_${i}` });
         }
         await wrapper.setProps({ options });
         const inputs = wrapper.findAll("[type='checkbox']");
@@ -84,7 +84,7 @@ describe("FormCheck", () => {
         await inputs.at(0).setChecked();
         expect(inputs.at(0).element.checked).toBeTruthy();
         /* ...confirm corresponding options checked */
-        const values = options.map((option) => option[1]);
+        const values = options.map((option) => option.value);
         expect(wrapper.emitted()["input"][0][0]).toStrictEqual(values);
         /* 2 - confirm select-all option UNchecked */
         await inputs.at(0).setChecked(false);
diff --git a/client/src/components/Form/Elements/FormCheck.vue b/client/src/components/Form/Elements/FormCheck.vue
index de8dad4f92c4..879b4411dd2a 100644
--- a/client/src/components/Form/Elements/FormCheck.vue
+++ b/client/src/components/Form/Elements/FormCheck.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
+interface CheckOption {
+    label: string;
+    value: string;
+}
+
 export interface FormCheckProps {
     value?: string | string[];
-    options: Array<[string, string]>;
+    options: Array<CheckOption>;
 }
 
 const props = defineProps<FormCheckProps>();
@@ -32,7 +37,7 @@ const selectAll = computed(() => currentValue.value.length === props.options.len
 
 function onSelectAll(selected: boolean): void {
     if (selected) {
-        const allValues = props.options.map((option) => option[1]);
+        const allValues = props.options.map((option) => option.value);
         emit("input", allValues);
     } else {
         emit("input", null);
@@ -51,8 +56,8 @@ function onSelectAll(selected: boolean): void {
             Select / Deselect all
         </b-form-checkbox>
         <b-form-checkbox-group v-model="currentValue" stacked class="pl-3">
-            <b-form-checkbox v-for="(option, index) in options" :key="index" :value="option[1]">
-                {{ option[0] }}
+            <b-form-checkbox v-for="(option, index) in options" :key="index" :value="option.value">
+                {{ option.label }}
             </b-form-checkbox>
         </b-form-checkbox-group>
     </div>
diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index e88c1589f569..ab8ec7790145 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -55,13 +55,13 @@ const currentField = ref(0);
 
 const currentOptions = computed(() => {
     if (currentSource.value && currentSource.value in props.options) {
-        return (props.options && props.options[currentSource.value]) || [];
+        return props.options[currentSource.value] || [];
     } else {
         return [];
     }
 });
 
-const currentSource = computed(() => (currentVariant.value && currentVariant.value.src) || null);
+const currentSource = computed(() => currentVariant.value && currentVariant.value.src);
 
 const currentValue = computed({
     get: () => {
diff --git a/client/src/components/Form/Elements/FormRadio.test.js b/client/src/components/Form/Elements/FormRadio.test.js
index 1735456a4a9f..9328055ec30e 100644
--- a/client/src/components/Form/Elements/FormRadio.test.js
+++ b/client/src/components/Form/Elements/FormRadio.test.js
@@ -24,7 +24,7 @@ describe("FormRadio", () => {
         const n = 3;
         const options = [];
         for (let i = 0; i < n; i++) {
-            options.push([`label_${i}`, `value_${i}`]);
+            options.push({ label: `label_${i}`, value: `value_${i}` });
         }
         await wrapper.setProps({ options });
         const inputs = wrapper.findAll("[type='radio']");
diff --git a/client/src/components/Form/Elements/FormRadio.vue b/client/src/components/Form/Elements/FormRadio.vue
index ec133dfe3f14..561870f3e44a 100644
--- a/client/src/components/Form/Elements/FormRadio.vue
+++ b/client/src/components/Form/Elements/FormRadio.vue
@@ -28,8 +28,8 @@ const hasOptions = computed(() => {
 
 <template>
     <b-form-radio-group v-if="hasOptions" v-model="currentValue" stacked>
-        <b-form-radio v-for="(option, index) in options" :key="index" :value="option[1]">
-            {{ option[0] }}
+        <b-form-radio v-for="(option, index) in options" :key="index" :value="option.value">
+            {{ option.label }}
         </b-form-radio>
     </b-form-radio-group>
     <b-alert v-else v-localize variant="warning" show> No options available. </b-alert>
diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index e3c69cff56fb..7e416bde7124 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -132,7 +132,7 @@ onMounted(() => {
         v-if="hasOptions"
         :id="id"
         v-model="currentValue"
-        :allow-empty="true"
+        :allow-empty="multiple"
         :aria-expanded="ariaExpanded"
         :class="['form-select', cls]"
         :close-on-select="!multiple"
diff --git a/client/src/components/Form/Elements/FormSelection.vue b/client/src/components/Form/Elements/FormSelection.vue
index b846e3280ffd..42d5a762e0d6 100644
--- a/client/src/components/Form/Elements/FormSelection.vue
+++ b/client/src/components/Form/Elements/FormSelection.vue
@@ -43,28 +43,15 @@ const currentValue = computed({
 
 /** Provides formatted select options. */
 const currentOptions = computed(() => {
+    let result = [];
     const data = props.data;
     const options = props.options;
     if (options && options.length > 0) {
-        return options;
+        result = options.map((option) => ({ label: option[0], value: option[1] }));
     } else if (data && data.length > 0) {
-        return data.map((option) => {
-            return [option.label, option.value];
-        });
+        result = data;
     }
-    return [];
-});
-
-/**
- * Translates input options for consumption by the
- * select component into an array of objects
- */
-const selectOptions = computed(() => {
-    const result = currentOptions.value.map((option) => ({
-        label: option[0],
-        value: option[1],
-    }));
-    if (props.optional && !props.multiple) {
+    if (!props.display && !props.multiple && props.optional) {
         result.unshift({
             label: "Nothing selected",
             value: null,
@@ -77,5 +64,5 @@ const selectOptions = computed(() => {
 <template>
     <FormCheck v-if="display === 'checkboxes'" v-model="currentValue" :options="currentOptions" />
     <FormRadio v-else-if="display === 'radio'" v-model="currentValue" :options="currentOptions" />
-    <FormSelect v-else v-model="currentValue" :multiple="multiple" :optional="optional" :options="selectOptions" />
+    <FormSelect v-else v-model="currentValue" :multiple="multiple" :optional="optional" :options="currentOptions" />
 </template>

From 131905430bef788d285966459e65fe93c1296752 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 18 Aug 2023 10:14:48 +0200
Subject: [PATCH 17/86] Ensure correct mapping of keep-state entries

---
 client/src/components/Form/Elements/FormData/FormData.vue | 7 ++++---
 client/src/components/Form/Elements/FormSelect.vue        | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index ab8ec7790145..a4febdd4ab6d 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -116,13 +116,14 @@ const formattedOptions = computed(() => {
             value: option || null,
         };
         if (option.keep) {
-            keepOptions[option.id] = newOption;
-            keepSet.add(option.id);
+            const keepKey = `${option.id}_${option.src}`;
+            keepOptions[keepKey] = newOption;
+            keepSet.add(keepKey);
         }
         return newOption;
     });
     Object.entries(keepOptions).forEach(([key, option]) => {
-        if (!keepSet.has(key)) {
+        if (!keepSet.has(key) && option.value?.src === currentSource.value) {
             result.unshift(option);
         }
     });
diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index 7e416bde7124..258110cfc876 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -132,7 +132,7 @@ onMounted(() => {
         v-if="hasOptions"
         :id="id"
         v-model="currentValue"
-        :allow-empty="multiple"
+        :allow-empty="multiple && optional"
         :aria-expanded="ariaExpanded"
         :class="['form-select', cls]"
         :close-on-select="!multiple"

From 587ac0c877ccef2cdf176d65ee9ee682360b3f57 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 18 Aug 2023 14:39:12 +0200
Subject: [PATCH 18/86] Add comments and trigger set value when switching
 between select field types

---
 .../Form/Elements/FormData/FormData.vue       | 143 ++++++++++--------
 .../components/Form/Elements/FormSelect.vue   |   4 +-
 2 files changed, 84 insertions(+), 63 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index a4febdd4ab6d..f7f0087e7c5a 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -4,7 +4,7 @@ import { faCopy, faFile, faFolder } from "@fortawesome/free-regular-svg-icons";
 import { faExclamation, faLink, faUnlink } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BFormCheckbox, BFormRadio, BFormRadioGroup } from "bootstrap-vue";
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 
 import type { DataOption } from "./types";
 import { BATCH, SOURCE, VARIANTS } from "./variants";
@@ -13,24 +13,19 @@ import FormSelect from "@/components/Form/Elements/FormSelect.vue";
 
 library.add(faCopy, faExclamation, faFile, faFolder, faLink, faUnlink);
 
-interface DataValue {
-    values: Array<DataOption>;
-}
-
 interface SelectOption {
     label: string;
     value: DataOption | null;
 }
 
-/** Store options which need to be preserved **/
-const keepOptions: Record<string, SelectOption> = {};
-
 const props = withDefaults(
     defineProps<{
         multiple?: boolean;
         optional?: boolean;
         options: Record<string, Array<DataOption>>;
-        value?: DataValue;
+        value?: {
+            values: Array<DataOption>;
+        };
         extensions?: Array<string>;
         type?: string;
         flavor?: string;
@@ -49,57 +44,49 @@ const props = withDefaults(
 
 const $emit = defineEmits(["input"]);
 
+// Determines wether values should be processed as linked or unlinked
 const currentBatch = ref(true);
 
+// Indicates which of the select field from the set of variants is currently shown
 const currentField = ref(0);
 
-const currentOptions = computed(() => {
-    if (currentSource.value && currentSource.value in props.options) {
-        return props.options[currentSource.value] || [];
-    } else {
-        return [];
-    }
-});
+/** Store options which need to be preserved **/
+const keepOptions: Record<string, SelectOption> = {};
 
+/**
+ * Provides the currently shown source type
+ */
 const currentSource = computed(() => currentVariant.value && currentVariant.value.src);
 
+/**
+ * Interface between incoming input value and select field value
+ */
 const currentValue = computed({
     get: () => {
         const value: Array<DataOption> = [];
         if (props.value) {
-            props.value.values.forEach((v) => {
-                const sourceOptions = props.options[v.src];
-                if (sourceOptions) {
-                    const foundEntry = sourceOptions.find((entry) => entry.id === v.id);
-                    if (foundEntry) {
-                        value.push(foundEntry);
+            for (const v of props.value.values) {
+                const foundEntry = formattedOptions.value.find((entry) => entry.value?.id === v.id);
+                if (foundEntry && foundEntry.value) {
+                    value.push(foundEntry.value);
+                    if (!currentVariant.value?.multiple) {
+                        break;
                     }
                 }
-            });
+            }
             return value;
         } else {
             return null;
         }
     },
     set: (val) => {
-        const batchMode = currentVariant.value && currentVariant.value.batch;
-        if (val) {
-            const values = Array.isArray(val) ? val : [val];
-            $emit("input", {
-                batch: batchMode !== BATCH.DISABLED,
-                product: batchMode === BATCH.ENABLED && !currentBatch.value,
-                values: values.map((entry) => ({
-                    id: entry.id,
-                    src: entry.src,
-                    map_over_type: entry.map_over_type,
-                })),
-            });
-        } else {
-            $emit("input", null);
-        }
+        setValue(val);
     },
 });
 
+/**
+ * Returns the variant i.e. attributes, of the shown select field.
+ */
 const currentVariant = computed(() => {
     if (variant.value && currentField.value < variant.value.length) {
         return variant.value[currentField.value];
@@ -108,40 +95,76 @@ const currentVariant = computed(() => {
     }
 });
 
+/**
+ * Converts and populates options for the shown select field
+ */
 const formattedOptions = computed(() => {
     const keepSet = new Set();
-    const result: Array<SelectOption> = currentOptions.value.map((option) => {
-        const newOption = {
-            label: `${option.hid}: ${option.name}`,
-            value: option || null,
-        };
-        if (option.keep) {
-            const keepKey = `${option.id}_${option.src}`;
-            keepOptions[keepKey] = newOption;
-            keepSet.add(keepKey);
-        }
-        return newOption;
-    });
-    Object.entries(keepOptions).forEach(([key, option]) => {
-        if (!keepSet.has(key) && option.value?.src === currentSource.value) {
-            result.unshift(option);
-        }
-    });
-    if (props.optional && !props.multiple) {
-        result.unshift({
-            label: "Nothing selected",
-            value: null,
+    if (currentSource.value && currentSource.value in props.options) {
+        const options = props.options[currentSource.value] || [];
+        const result: Array<SelectOption> = options.map((option) => {
+            const newOption = {
+                label: `${option.hid}: ${option.name}`,
+                value: option || null,
+            };
+            if (option.keep) {
+                const keepKey = `${option.id}_${option.src}`;
+                keepOptions[keepKey] = newOption;
+                keepSet.add(keepKey);
+            }
+            return newOption;
         });
+        Object.entries(keepOptions).forEach(([key, option]) => {
+            if (!keepSet.has(key) && option.value?.src === currentSource.value) {
+                result.unshift(option);
+            }
+        });
+        return result;
+    } else {
+        return [];
     }
-    return result;
 });
 
+/**
+ * Provides the array of available variants associated with a specific form data type
+ */
 const variant = computed(() => {
     const flavorKey = props.flavor ? `${props.flavor}_` : "";
     const multipleKey = props.multiple ? `_${props.multiple}` : "";
     const variantKey = `${flavorKey}${props.type}${multipleKey}`;
     return VARIANTS[variantKey];
 });
+
+/**
+ * Processes and submits values from the select field
+ */
+function setValue(val: Array<DataOption> | DataOption | null) {
+    const batchMode = currentVariant.value && currentVariant.value.batch;
+    if (val) {
+        const values = Array.isArray(val) ? val : [val];
+        $emit("input", {
+            batch: batchMode !== BATCH.DISABLED,
+            product: batchMode === BATCH.ENABLED && !currentBatch.value,
+            values: values.map((entry) => ({
+                id: entry.id,
+                src: entry.src,
+                map_over_type: entry.map_over_type,
+            })),
+        });
+    } else {
+        $emit("input", null);
+    }
+}
+
+/**
+ * Watch and set current value if user switches to a different select field
+ */
+watch(
+    () => currentVariant.value,
+    () => {
+        setValue(currentValue.value);
+    }
+);
 </script>
 
 <template>
diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index 258110cfc876..3f07d85fe47f 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -79,9 +79,7 @@ const selectedLabel: ComputedRef<string> = computed(() => {
 /**
  * Tracks selected values
  */
-const selectedValues: ComputedRef<Array<SelectValue>> = computed(() => {
-    return Array.isArray(props.value) ? props.value : [props.value];
-});
+const selectedValues = computed(() => (Array.isArray(props.value) ? props.value : [props.value]));
 
 /**
  * Tracks current value and emits changes

From 4507db9cf99f89400033a8125be1476b46db9b9b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 18 Aug 2023 14:49:23 +0200
Subject: [PATCH 19/86] Add select field tooltip

---
 client/src/components/Form/Elements/FormData/FormData.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index f7f0087e7c5a..74d2a9b2d676 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -171,7 +171,12 @@ watch(
     <div>
         <div class="d-flex">
             <BFormRadioGroup v-if="variant.length > 1" v-model="currentField" buttons class="align-self-start mr-2">
-                <BFormRadio v-for="(v, index) in variant" :key="index" :value="index">
+                <BFormRadio
+                    v-for="(v, index) in variant"
+                    v-b-tooltip.hover.bottom
+                    :key="index"
+                    :title="v.tooltip"
+                    :value="index">
                     <FontAwesomeIcon :icon="['far', v.icon]" />
                 </BFormRadio>
             </BFormRadioGroup>

From 761e4b679508eb564c082271f235275b6576bf71 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 18 Aug 2023 15:44:18 +0200
Subject: [PATCH 20/86] Fix value matching condition

---
 .../components/Form/Elements/FormData/FormData.vue    | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 74d2a9b2d676..569b8f24dfa2 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -66,7 +66,9 @@ const currentValue = computed({
         const value: Array<DataOption> = [];
         if (props.value) {
             for (const v of props.value.values) {
-                const foundEntry = formattedOptions.value.find((entry) => entry.value?.id === v.id);
+                const foundEntry = formattedOptions.value.find(
+                    (entry) => entry.value && entry.value.id === v.id && entry.value.src === v.src
+                );
                 if (foundEntry && foundEntry.value) {
                     value.push(foundEntry.value);
                     if (!currentVariant.value?.multiple) {
@@ -74,10 +76,11 @@ const currentValue = computed({
                     }
                 }
             }
-            return value;
-        } else {
-            return null;
+            if (value.length > 0) {
+                return value;
+            }
         }
+        return null;
     },
     set: (val) => {
         setValue(val);

From 2bfd34dd0f72474e9b141e6badbcd7382e331a52 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 19 Aug 2023 10:00:16 +0200
Subject: [PATCH 21/86] Add sorting by hid for now

---
 .../components/Form/Elements/FormData/FormData.vue   | 12 ++++++++++++
 .../src/components/Form/Elements/FormData/types.ts   |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 569b8f24dfa2..a8c7084aa55b 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -104,6 +104,7 @@ const currentVariant = computed(() => {
 const formattedOptions = computed(() => {
     const keepSet = new Set();
     if (currentSource.value && currentSource.value in props.options) {
+        // Map incoming values to available options
         const options = props.options[currentSource.value] || [];
         const result: Array<SelectOption> = options.map((option) => {
             const newOption = {
@@ -117,11 +118,22 @@ const formattedOptions = computed(() => {
             }
             return newOption;
         });
+        // Populate keep-options from cache
         Object.entries(keepOptions).forEach(([key, option]) => {
             if (!keepSet.has(key) && option.value?.src === currentSource.value) {
                 result.unshift(option);
             }
         });
+        // Sort entries by hid (might be unnecessary)
+        result.sort((a, b) => {
+            const aHid = a.value && a.value.hid;
+            const bHid = b.value && b.value.hid;
+            if (aHid && bHid) {
+                return bHid - aHid;
+            } else {
+                return 0;
+            }
+        });
         return result;
     } else {
         return [];
diff --git a/client/src/components/Form/Elements/FormData/types.ts b/client/src/components/Form/Elements/FormData/types.ts
index 140c36bd08c9..a271c0bba13f 100644
--- a/client/src/components/Form/Elements/FormData/types.ts
+++ b/client/src/components/Form/Elements/FormData/types.ts
@@ -1,7 +1,7 @@
 export interface DataOption {
     id: string;
     keep: boolean;
-    hid: string;
+    hid: number;
     map_over_type?: string;
     name: string;
     src: string;

From 7f6c5721348f1bcab215c19b270ab0317abd33ed Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 19 Aug 2023 10:19:42 +0200
Subject: [PATCH 22/86] Avoid overwriting cached options, indication of an
 issue with the backends dataset matcher

---
 client/src/components/Form/Elements/FormData/FormData.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index a8c7084aa55b..acd64cf4a7b4 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -113,8 +113,10 @@ const formattedOptions = computed(() => {
             };
             if (option.keep) {
                 const keepKey = `${option.id}_${option.src}`;
-                keepOptions[keepKey] = newOption;
-                keepSet.add(keepKey);
+                if (!(keepKey in keepOptions)) {
+                    keepOptions[keepKey] = newOption;
+                    keepSet.add(keepKey);
+                }
             }
             return newOption;
         });
@@ -124,7 +126,7 @@ const formattedOptions = computed(() => {
                 result.unshift(option);
             }
         });
-        // Sort entries by hid (might be unnecessary)
+        // Sort entries by hid
         result.sort((a, b) => {
             const aHid = a.value && a.value.hid;
             const bHid = b.value && b.value.hid;

From a2906964f399634b96abb70801513314eb65309e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 19 Aug 2023 11:52:22 +0200
Subject: [PATCH 23/86] Add placholder

---
 client/src/components/Form/Elements/FormData/FormData.vue | 8 +++++++-
 client/src/components/Form/Elements/FormSelect.vue        | 4 +++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index acd64cf4a7b4..5e14679a8856 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -142,6 +142,11 @@ const formattedOptions = computed(() => {
     }
 });
 
+/**
+ * Provides placeholder label for select field
+ */
+const placeholder = computed(() => (currentSource.value === "hda" ? "dataset" : "dataset collection"));
+
 /**
  * Provides the array of available variants associated with a specific form data type
  */
@@ -203,7 +208,8 @@ watch(
                 class="w-100"
                 :multiple="currentVariant.multiple"
                 :optional="optional"
-                :options="formattedOptions" />
+                :options="formattedOptions"
+                :placeholder="`Select a ${placeholder}`" />
         </div>
         <div v-if="currentVariant.batch !== BATCH.DISABLED">
             <BFormCheckbox
diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index 3f07d85fe47f..ef0db345484d 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -21,12 +21,14 @@ const props = withDefaults(
         multiple?: boolean;
         optional?: boolean;
         options: Array<SelectOption>;
+        placeholder?: string;
         value?: Array<SelectValue> | string | number;
     }>(),
     {
         id: `form-select-${uid()}`,
         multiple: false,
         optional: false,
+        placeholder: "Select value",
         value: null,
     }
 );
@@ -138,7 +140,7 @@ onMounted(() => {
         label="label"
         :multiple="multiple"
         :options="props.options"
-        placeholder="Select value"
+        :placeholder="placeholder"
         :selected-label="selectedLabel"
         select-label="Click to select"
         track-by="value"

From 51c82825631d6a38daaaaa629ae1d45cf3179eb0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 19 Aug 2023 12:38:40 +0200
Subject: [PATCH 24/86] Add drag/drop event handler and highlighting

---
 .../Form/Elements/FormData/FormData.vue       | 54 +++++++++++++++++--
 1 file changed, 51 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 5e14679a8856..cfbdc231fdd3 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -4,7 +4,9 @@ import { faCopy, faFile, faFolder } from "@fortawesome/free-regular-svg-icons";
 import { faExclamation, faLink, faUnlink } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BFormCheckbox, BFormRadio, BFormRadioGroup } from "bootstrap-vue";
-import { computed, ref, watch } from "vue";
+import { computed, type Ref, ref, watch } from "vue";
+
+import { type EventData, useEventStore } from "@/stores/eventStore";
 
 import type { DataOption } from "./types";
 import { BATCH, SOURCE, VARIANTS } from "./variants";
@@ -42,6 +44,8 @@ const props = withDefaults(
     }
 );
 
+const eventStore = useEventStore();
+
 const $emit = defineEmits(["input"]);
 
 // Determines wether values should be processed as linked or unlinked
@@ -50,6 +54,13 @@ const currentBatch = ref(true);
 // Indicates which of the select field from the set of variants is currently shown
 const currentField = ref(0);
 
+// Field highlighting status
+const currentHighlighting = ref(false);
+
+// Drag/Drop related values
+const dragData: Ref<EventData | null> = ref(null);
+const dragTarget: Ref<EventTarget | null> = ref(null);
+
 /** Store options which need to be preserved **/
 const keepOptions: Record<string, SelectOption> = {};
 
@@ -157,6 +168,38 @@ const variant = computed(() => {
     return VARIANTS[variantKey];
 });
 
+/**
+ * Drag/Drop event handlers
+ */
+function onDragEnter(evt: MouseEvent) {
+    const eventData = eventStore.getDragData();
+    if (eventData) {
+        dragTarget.value = evt.target;
+        dragData.value = eventData;
+    }
+}
+
+function onDragLeave(evt: MouseEvent) {
+    if (dragTarget.value === evt.target) {
+        currentHighlighting.value = false;
+    }
+}
+
+function onDragOver() {
+    if (dragData.value !== null) {
+        currentHighlighting.value = true;
+    }
+}
+
+/**
+ * Insert the dragged item into the activities list
+ */
+function onDrop(evt: MouseEvent) {
+    console.log("DROPPED", dragData.value);
+    currentHighlighting.value = false;
+    dragData.value = null;
+}
+
 /**
  * Processes and submits values from the select field
  */
@@ -190,13 +233,18 @@ watch(
 </script>
 
 <template>
-    <div>
+    <div
+        :class="{ 'ui-dragover': currentHighlighting }"
+        @dragenter.prevent="onDragEnter"
+        @dragleave.prevent="onDragLeave"
+        @dragover.prevent="onDragOver"
+        @drop.prevent="onDrop">
         <div class="d-flex">
             <BFormRadioGroup v-if="variant.length > 1" v-model="currentField" buttons class="align-self-start mr-2">
                 <BFormRadio
                     v-for="(v, index) in variant"
-                    v-b-tooltip.hover.bottom
                     :key="index"
+                    v-b-tooltip.hover.bottom
                     :title="v.tooltip"
                     :value="index">
                     <FontAwesomeIcon :icon="['far', v.icon]" />

From 8a1828a55361f98bd4f39e419bcdc0a39430cf06 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 19 Aug 2023 15:23:54 +0200
Subject: [PATCH 25/86] Generalize drop highlighting, enable success and danger
 styles

---
 .../Form/Elements/FormData/FormData.vue       | 20 ++++++++++++++-----
 client/src/style/scss/ui.scss                 | 16 ++++++++-------
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index cfbdc231fdd3..ddec675691e4 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -55,7 +55,7 @@ const currentBatch = ref(true);
 const currentField = ref(0);
 
 // Field highlighting status
-const currentHighlighting = ref(false);
+const currentHighlighting: Ref<string | null> = ref(null);
 
 // Drag/Drop related values
 const dragData: Ref<EventData | null> = ref(null);
@@ -168,6 +168,15 @@ const variant = computed(() => {
     return VARIANTS[variantKey];
 });
 
+/**
+ * Clears highlighting with delay
+ */
+function clearHighlighting(timeout = 1000) {
+    setTimeout(() => {
+        currentHighlighting.value = null;
+    }, timeout);
+}
+
 /**
  * Drag/Drop event handlers
  */
@@ -181,13 +190,13 @@ function onDragEnter(evt: MouseEvent) {
 
 function onDragLeave(evt: MouseEvent) {
     if (dragTarget.value === evt.target) {
-        currentHighlighting.value = false;
+        currentHighlighting.value = null;
     }
 }
 
 function onDragOver() {
     if (dragData.value !== null) {
-        currentHighlighting.value = true;
+        currentHighlighting.value = "warning";
     }
 }
 
@@ -196,8 +205,9 @@ function onDragOver() {
  */
 function onDrop(evt: MouseEvent) {
     console.log("DROPPED", dragData.value);
-    currentHighlighting.value = false;
+    currentHighlighting.value = "success";
     dragData.value = null;
+    clearHighlighting();
 }
 
 /**
@@ -234,7 +244,7 @@ watch(
 
 <template>
     <div
-        :class="{ 'ui-dragover': currentHighlighting }"
+        :class="currentHighlighting && `ui-dragover-${currentHighlighting}`"
         @dragenter.prevent="onDragEnter"
         @dragleave.prevent="onDragLeave"
         @dragover.prevent="onDragOver"
diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index 4c4ac1be0c8e..c45fd5b9876c 100644
--- a/client/src/style/scss/ui.scss
+++ b/client/src/style/scss/ui.scss
@@ -353,23 +353,25 @@ $ui-margin-horizontal-large: $margin-v * 2;
     }
 }
 
-.ui-dragover {
+.ui-dragover-warning {
+    @extend .rounded;
     @extend .p-1;
-    border-radius: $border-radius-base;
-    border: 2px solid $state-warning-bg;
     background: lighten($state-warning-bg, 10%);
+    border: 2px solid $state-warning-bg;
 }
 
 .ui-dragover-danger {
-    @extend .ui-dragover;
-    border: 2px solid $state-danger-bg;
+    @extend .rounded;
+    @extend .p-1;
     background: lighten($state-danger-bg, 10%);
+    border: 2px solid $state-danger-bg;
 }
 
 .ui-dragover-success {
-    @extend .ui-dragover;
-    border: 2px solid $state-success-bg;
+    @extend .rounded;
+    @extend .p-1;
     background: lighten($state-success-bg, 10%);
+    border: 2px solid $state-success-bg;
 }
 
 /* Used for tree in tool recommendations */

From bfdd133e1685577f3c32113abfccacb2afff07fe Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 20 Aug 2023 07:37:26 +0200
Subject: [PATCH 26/86] Add incoming value handler for drop and data dialog
 events

---
 .../Form/Elements/FormData/FormData.vue       | 83 +++++++++++++++----
 1 file changed, 69 insertions(+), 14 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index ddec675691e4..5290079c040b 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -62,7 +62,7 @@ const dragData: Ref<EventData | null> = ref(null);
 const dragTarget: Ref<EventTarget | null> = ref(null);
 
 /** Store options which need to be preserved **/
-const keepOptions: Record<string, SelectOption> = {};
+const keepOptions: Ref<Record<string, SelectOption>> = ref({});
 
 /**
  * Provides the currently shown source type
@@ -113,27 +113,25 @@ const currentVariant = computed(() => {
  * Converts and populates options for the shown select field
  */
 const formattedOptions = computed(() => {
-    const keepSet = new Set();
     if (currentSource.value && currentSource.value in props.options) {
         // Map incoming values to available options
         const options = props.options[currentSource.value] || [];
-        const result: Array<SelectOption> = options.map((option) => {
+        const result: Array<SelectOption> = [];
+        options.forEach((option) => {
             const newOption = {
                 label: `${option.hid}: ${option.name}`,
                 value: option || null,
             };
             if (option.keep) {
                 const keepKey = `${option.id}_${option.src}`;
-                if (!(keepKey in keepOptions)) {
-                    keepOptions[keepKey] = newOption;
-                    keepSet.add(keepKey);
-                }
+                keepOptions.value[keepKey] = newOption;
+            } else {
+                result.push(newOption);
             }
-            return newOption;
         });
         // Populate keep-options from cache
-        Object.entries(keepOptions).forEach(([key, option]) => {
-            if (!keepSet.has(key) && option.value?.src === currentSource.value) {
+        Object.entries(keepOptions.value).forEach(([key, option]) => {
+            if (option.value?.src === currentSource.value) {
                 result.unshift(option);
             }
         });
@@ -177,6 +175,61 @@ function clearHighlighting(timeout = 1000) {
     }, timeout);
 }
 
+/** Add values from drag/drop or data dialog sources */
+function handleIncoming(incoming: Record<string, unknown>, partial = true) {
+    if (incoming) {
+        const values = Array.isArray(incoming) ? incoming : [incoming];
+        if (values.length > 0) {
+            const incomingValues: Array<DataOption> = [];
+            values.forEach((v) => {
+                // Map incoming objects to data option values
+                v.id = v.element_id || v.id;
+                const newHid = v.hid;
+                const newId = v.id;
+                const newName = v.name ? v.name : newId;
+                const newSrc = v.history_content_type === "dataset_collection" ? "hdca" : "hda";
+                const newValue = {
+                    id: newId,
+                    src: newSrc,
+                    hid: newHid,
+                    name: newName,
+                    keep: true,
+                    tags: [],
+                };
+                // Verify that new value has corresponding option
+                const keepKey = `${newId}_${newSrc}`;
+                const existingOptions = props.options && props.options[newSrc];
+                const foundOption = existingOptions && existingOptions.find((option) => option.id === newId);
+                if (!foundOption && !(keepKey in keepOptions.value)) {
+                    keepOptions.value[keepKey] = { label: `${newHid || "Selected"}: ${newName}`, value: newValue };
+                }
+                // Add new value to list
+                incomingValues.push(newValue);
+            });
+            if (incomingValues.length > 0 && incomingValues[0]) {
+                // Set new value
+                const config = currentVariant.value;
+                const firstValue = incomingValues[0];
+                const firstId = firstValue.id;
+                const firstSrc = firstValue.src;
+                if (config && config.src == firstSrc && partial) {
+                    if (config.multiple) {
+                        const newValues = currentValue.value ? currentValue.value.slice() : [];
+                        incomingValues.forEach((v) => {
+                            newValues.push(v);
+                        });
+                        currentValue.value = newValues;
+                    } else {
+                        currentValue.value = [firstValue];
+                    }
+                } else {
+                    currentValue.value = incomingValues;
+                }
+            }
+        }
+    }
+}
+
 /**
  * Drag/Drop event handlers
  */
@@ -204,10 +257,12 @@ function onDragOver() {
  * Insert the dragged item into the activities list
  */
 function onDrop(evt: MouseEvent) {
-    console.log("DROPPED", dragData.value);
-    currentHighlighting.value = "success";
-    dragData.value = null;
-    clearHighlighting();
+    if (dragData.value) {
+        handleIncoming(dragData.value);
+        currentHighlighting.value = "success";
+        dragData.value = null;
+        clearHighlighting();
+    }
 }
 
 /**

From 710c2ce62d86cf9a99554fc52085b872510459c2 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 20 Aug 2023 08:46:31 +0200
Subject: [PATCH 27/86] Add file dialog button

---
 .../Form/Elements/FormData/FormData.vue       | 37 ++++++++++++++++---
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 5290079c040b..280b5f3e2083 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -3,9 +3,10 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCopy, faFile, faFolder } from "@fortawesome/free-regular-svg-icons";
 import { faExclamation, faLink, faUnlink } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BFormCheckbox, BFormRadio, BFormRadioGroup } from "bootstrap-vue";
+import { BButton, BButtonGroup, BFormCheckbox } from "bootstrap-vue";
 import { computed, type Ref, ref, watch } from "vue";
 
+import { getGalaxyInstance } from "@/app";
 import { type EventData, useEventStore } from "@/stores/eventStore";
 
 import type { DataOption } from "./types";
@@ -166,6 +167,26 @@ const variant = computed(() => {
     return VARIANTS[variantKey];
 });
 
+/**
+ * Open file dialog
+ */
+function onBrowse() {
+    if (currentVariant.value) {
+        const Galaxy = getGalaxyInstance();
+        Galaxy.data.dialog(
+            (response: Record<string, unknown>) => {
+                handleIncoming(response, false);
+            },
+            {
+                multiple: currentVariant.value.multiple,
+                library: !!currentVariant.value.library,
+                format: null,
+                allowUpload: true,
+            }
+        );
+    }
+}
+
 /**
  * Clears highlighting with delay
  */
@@ -305,16 +326,20 @@ watch(
         @dragover.prevent="onDragOver"
         @drop.prevent="onDrop">
         <div class="d-flex">
-            <BFormRadioGroup v-if="variant.length > 1" v-model="currentField" buttons class="align-self-start mr-2">
-                <BFormRadio
+            <BButtonGroup v-if="variant.length > 1" buttons class="align-self-start mr-2">
+                <BButton
                     v-for="(v, index) in variant"
                     :key="index"
                     v-b-tooltip.hover.bottom
+                    :pressed="currentField === index"
                     :title="v.tooltip"
-                    :value="index">
+                    @click="currentField = index">
                     <FontAwesomeIcon :icon="['far', v.icon]" />
-                </BFormRadio>
-            </BFormRadioGroup>
+                </BButton>
+                <BButton v-b-tooltip.hover.bottom title="Browse or Upload Datasets" @click="onBrowse">
+                    <span class="font-weight-bold">...</span>
+                </BButton>
+            </BButtonGroup>
             <FormSelect
                 v-if="currentVariant"
                 v-model="currentValue"

From 1433f19bafff07b4befe42a8d7b22311094987e2 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 20 Aug 2023 08:52:10 +0200
Subject: [PATCH 28/86] Remove backbone data selector from code base

---
 .../components/Form/Elements/parameters.js    |  18 -
 client/src/mvc/ui/ui-select-content.js        | 626 ------------------
 2 files changed, 644 deletions(-)
 delete mode 100644 client/src/mvc/ui/ui-select-content.js

diff --git a/client/src/components/Form/Elements/parameters.js b/client/src/components/Form/Elements/parameters.js
index 39761634e9d3..e84b31071a44 100644
--- a/client/src/components/Form/Elements/parameters.js
+++ b/client/src/components/Form/Elements/parameters.js
@@ -5,7 +5,6 @@ import { getGalaxyInstance } from "app";
 import Backbone from "backbone";
 import DataPicker from "mvc/ui/ui-data-picker";
 import Ui from "mvc/ui/ui-misc";
-import SelectContent from "mvc/ui/ui-select-content";
 import SelectFtp from "mvc/ui/ui-select-ftp";
 import SelectLibrary from "mvc/ui/ui-select-library";
 import Utils from "utils/utils";
@@ -17,8 +16,6 @@ export default Backbone.View.extend({
         select: "_fieldSelect",
         data_column: "_fieldSelect",
         genomebuild: "_fieldSelect",
-        data: "_fieldData",
-        data_collection: "_fieldData",
         group_tag: "_fieldSelect",
         library_data: "_fieldLibrary",
         ftpfile: "_fieldFtp",
@@ -47,21 +44,6 @@ export default Backbone.View.extend({
         this.$el.append(this.field.$el);
     },
 
-    /** Data input field */
-    _fieldData: function (input_def) {
-        return new SelectContent.View({
-            id: input_def.id,
-            extensions: input_def.extensions,
-            optional: input_def.optional,
-            multiple: input_def.multiple,
-            type: input_def.type,
-            flavor: input_def.flavor,
-            data: input_def.options,
-            tag: input_def.tag,
-            onchange: input_def.onchange,
-        });
-    },
-
     /** Select/Checkbox/Radio options field */
     _fieldSelect: function (input_def) {
         // show text field e.g. in workflow editor
diff --git a/client/src/mvc/ui/ui-select-content.js b/client/src/mvc/ui/ui-select-content.js
deleted file mode 100644
index 3162bf6eaa56..000000000000
--- a/client/src/mvc/ui/ui-select-content.js
+++ /dev/null
@@ -1,626 +0,0 @@
-import { getGalaxyInstance } from "app";
-import Backbone from "backbone";
-import $ from "jquery";
-import Ui from "mvc/ui/ui-misc";
-import Select from "mvc/ui/ui-select-default";
-import _ from "underscore";
-import _l from "utils/localization";
-import Utils from "utils/utils";
-
-/** Batch mode variations */
-const Batch = { DISABLED: "disabled", ENABLED: "enabled", LINKED: "linked" };
-
-/** List of available content selectors options */
-const Configurations = {
-    data: [
-        {
-            src: "hda",
-            icon: "fa-file-o",
-            tooltip: _l("Single dataset"),
-            library: true,
-            multiple: false,
-            batch: Batch.DISABLED,
-        },
-        {
-            src: "hda",
-            icon: "fa-files-o",
-            tooltip: _l("Multiple datasets"),
-            multiple: true,
-            batch: Batch.LINKED,
-        },
-        {
-            src: "hdca",
-            icon: "fa-folder-o",
-            tooltip: _l("Dataset collection"),
-            multiple: false,
-            batch: Batch.LINKED,
-        },
-    ],
-    data_multiple: [
-        {
-            src: "hda",
-            icon: "fa-files-o",
-            tooltip: _l("Multiple datasets"),
-            multiple: true,
-            batch: Batch.DISABLED,
-        },
-        {
-            src: "hdca",
-            icon: "fa-folder-o",
-            tooltip: _l("Dataset collections"),
-            multiple: true,
-            batch: Batch.DISABLED,
-        },
-    ],
-    data_collection: [
-        {
-            src: "hdca",
-            icon: "fa-folder-o",
-            tooltip: _l("Dataset collection"),
-            multiple: false,
-            batch: Batch.DISABLED,
-        },
-    ],
-    workflow_data: [
-        {
-            src: "hda",
-            icon: "fa-file-o",
-            tooltip: _l("Single dataset"),
-            multiple: false,
-            batch: Batch.DISABLED,
-        },
-    ],
-    workflow_data_multiple: [
-        {
-            src: "hda",
-            icon: "fa-files-o",
-            tooltip: _l("Multiple datasets"),
-            multiple: true,
-            batch: Batch.DISABLED,
-        },
-    ],
-    workflow_data_collection: [
-        {
-            src: "hdca",
-            icon: "fa-folder-o",
-            tooltip: _l("Dataset collection"),
-            multiple: false,
-            batch: Batch.DISABLED,
-        },
-    ],
-    module_data: [
-        {
-            src: "hda",
-            icon: "fa-file-o",
-            tooltip: _l("Single dataset"),
-            multiple: false,
-            batch: Batch.DISABLED,
-        },
-        {
-            src: "hda",
-            icon: "fa-files-o",
-            tooltip: _l("Multiple datasets"),
-            multiple: true,
-            batch: Batch.ENABLED,
-        },
-    ],
-    module_data_collection: [
-        {
-            src: "hdca",
-            icon: "fa-folder-o",
-            tooltip: _l("Dataset collection"),
-            multiple: false,
-            batch: Batch.DISABLED,
-        },
-        {
-            src: "hdca",
-            icon: "fa-folder",
-            tooltip: _l("Multiple collections"),
-            multiple: true,
-            batch: Batch.ENABLED,
-        },
-    ],
-};
-
-/** View for hda and dce content selector ui elements */
-const View = Backbone.View.extend({
-    initialize: function (options) {
-        const self = this;
-        this.model =
-            (options && options.model) ||
-            new Backbone.Model({
-                src_labels: { hda: "dataset", hdca: "dataset collection" },
-                pagelimit: 100,
-                statustimer: 1000,
-            }).set(options);
-        this.setElement($("<div/>").addClass("ui-select-content"));
-        this.button_product = new Ui.RadioButton.View({
-            value: "false",
-            data: [
-                {
-                    icon: "fa fa-chain",
-                    value: "false",
-                    tooltip:
-                        "Linked inputs will be run in matched order with other datasets e.g. use this for matching forward and reverse reads.",
-                },
-                {
-                    icon: "fa fa-chain-broken",
-                    value: "true",
-                    tooltip: "Unlinked dataset inputs will be run against *all* other inputs.",
-                },
-            ],
-        });
-        this.$batch = {
-            linked: $(this._templateBatch()).clone(),
-            enabled: $(this._templateBatch()).clone().append(this.button_product.$el),
-        };
-
-        // add drag-drop event handlers
-        const element = this.$el.get(0);
-        element.addEventListener("dragenter", (e) => {
-            this.lastenter = e.target;
-            self.$el.addClass("ui-dragover");
-        });
-        element.addEventListener("dragover", (e) => {
-            e.preventDefault();
-        });
-        element.addEventListener("dragleave", (e) => {
-            this.lastenter === e.target && self.$el.removeClass("ui-dragover");
-        });
-        element.addEventListener("drop", (e) => {
-            e.preventDefault();
-            try {
-                const drop_data = JSON.parse(e.dataTransfer.getData("text"))[0];
-                this._handleDropValues(drop_data);
-            } catch (e) {
-                this._handleDropStatus("danger");
-            }
-        });
-
-        // track current cache elements
-        this.cache = {};
-
-        // add listeners
-        this.listenTo(this.model, "change:data", this._changeData, this);
-        this.listenTo(this.model, "change:wait", this._changeWait, this);
-        this.listenTo(this.model, "change:current", this._changeCurrent, this);
-        this.listenTo(this.model, "change:value", this._changeValue, this);
-        this.listenTo(
-            this.model,
-            "change:type change:optional change:multiple change:extensions",
-            this._changeType,
-            this
-        );
-        this.render();
-
-        // add change event
-        this.on("change", () => {
-            options.onchange && options.onchange(self.value());
-        });
-    },
-
-    render: function () {
-        this._changeType();
-        this._changeValue();
-        this._changeWait();
-    },
-
-    /** Indicate that select fields are being updated */
-    wait: function () {
-        this.model.set("wait", true);
-    },
-
-    /** Indicate that the options update has been completed */
-    unwait: function () {
-        this.model.set("wait", false);
-    },
-
-    /** Update data representing selectable options */
-    update: function (input_def) {
-        this.model.set("data", input_def.options);
-    },
-
-    /** Return the currently selected dataset values */
-    value: function (new_value) {
-        if (new_value) {
-            this._patchValue(new_value);
-            const result = this._batch(this._pickValue(new_value));
-            this.model.set("value", result);
-        }
-        const current = this.model.get("current");
-        if (this.config[current]) {
-            let id_list = this.fields[current].value();
-            if (id_list !== null) {
-                id_list = Array.isArray(id_list) ? id_list : [id_list];
-                if (id_list.length > 0) {
-                    const result = this._batch({ values: [] });
-                    for (const i in id_list) {
-                        const details = this.cache[`${id_list[i]}_${this.config[current].src}`];
-                        if (details) {
-                            const unpatchedValue = this._unpatchValue(details);
-                            result.values.push(unpatchedValue);
-                        } else {
-                            console.debug(
-                                "ui-select-content::value()",
-                                `Requested details not found for '${id_list[i]}'.`
-                            );
-                            return null;
-                        }
-                    }
-                    result.values.sort((a, b) => a.hid - b.hid);
-                    return this._pickValue(result);
-                }
-            }
-        } else {
-            console.debug("ui-select-content::value()", `Invalid value/source '${new_value}'.`);
-        }
-        return null;
-    },
-
-    /** Change of current select field */
-    _changeCurrent: function () {
-        _.each(this.fields, (field, i) => {
-            const cnf = this.config[i];
-            if (this.model.get("current") == i) {
-                field.$el.show();
-                _.each(this.$batch, ($batchfield, batchmode) => {
-                    if (cnf.batch == batchmode) {
-                        $batchfield.show();
-                    } else {
-                        $batchfield.hide();
-                    }
-                });
-                if (cnf.src == "hda") {
-                    this.button_dialog.show();
-                    this.upload_dialog.show();
-                } else {
-                    this.button_dialog.hide();
-                    this.upload_dialog.hide();
-                }
-                this.button_type.value(i);
-            } else {
-                field.$el.hide();
-            }
-        });
-        if (this.fields.length > 1) {
-            this.button_type.show();
-        } else {
-            this.button_type.hide();
-        }
-    },
-
-    /** Change of type */
-    _changeType: function () {
-        const self = this;
-        const galaxy = getGalaxyInstance();
-
-        // identify selector type identifier i.e. [ flavor ]_[ type ]_[ multiple ]
-        const config_id =
-            (this.model.get("flavor") ? `${this.model.get("flavor")}_` : "") +
-            String(this.model.get("type")) +
-            (this.model.get("multiple") ? "_multiple" : "");
-        if (Configurations[config_id]) {
-            this.config = Configurations[config_id];
-        } else {
-            this.config = Configurations["data"];
-            console.debug("ui-select-content::_changeType()", `Invalid configuration/type id '${config_id}'.`);
-        }
-
-        // prepare extension component of error message
-        const data = self.model.get("data");
-        const formats = this.model.get("extensions");
-        const extensions = Array.isArray(formats) ? Utils.textify(formats) : "";
-        const src_labels = this.model.get("src_labels");
-
-        // build radio button for data selectors
-        this.fields = [];
-        this.button_data = [];
-        _.each(this.config, (c, i) => {
-            self.button_data.push({
-                value: i,
-                icon: c.icon,
-                tooltip: c.tooltip,
-            });
-            self.fields.push(
-                new Select.View({
-                    optional: self.model.get("optional"),
-                    multiple: c.multiple,
-                    searchable:
-                        !c.multiple || (data && data[c.src] && data[c.src].length > self.model.get("pagelimit")),
-                    individual: true,
-                    error_text: `No ${extensions ? `${extensions} ` : ""}${src_labels[c.src] || "content"} available.`,
-                    onchange: function () {
-                        self.trigger("change");
-                    },
-                })
-            );
-        });
-        this.button_type = new Ui.RadioButton.View({
-            value: this.model.get("current"),
-            data: this.button_data,
-            cls: "pr-lg-2",
-            onchange: function (value) {
-                self.model.set("current", value);
-                self.trigger("change");
-            },
-        });
-
-        // build data dialog button
-        this.button_dialog = new Ui.Button({
-            icon: "fa-folder-open-o",
-            tooltip: "Browse Datasets",
-            onclick: () => {
-                const current = this.model.get("current");
-                const cnf = this.config[current];
-                galaxy.data.dialog(
-                    (response) => {
-                        this._handleDropValues(response, false);
-                    },
-                    {
-                        multiple: cnf.multiple,
-                        library: !!cnf.library,
-                        format: null,
-                        allowUpload: true,
-                    }
-                );
-            },
-        });
-
-        // build data dialog button
-        this.upload_dialog = new Ui.Button({
-            icon: "fa-upload",
-            tooltip: "Upload Dataset",
-            onclick: () => {
-                const current = this.model.get("current");
-                const cnf = this.config[current];
-                // model doesn't have format yet unfortunately, need to get through to here.
-                galaxy.data.dialog(
-                    (response) => {
-                        this._handleDropValues(response, false);
-                    },
-                    {
-                        multiple: cnf.multiple,
-                        formats: formats,
-                        new: true,
-                    }
-                );
-            },
-        });
-
-        // append views
-        const $fields = $("<div/>").addClass("overflow-auto w-100 py-2 py-lg-0 pr-lg-2 ");
-        this.$el
-            .empty()
-            .addClass("d-flex flex-row flex-wrap flex-lg-nowrap")
-            .append($("<div/>").append(this.button_type.$el))
-            .append($fields);
-        if (galaxy.config.upload_from_form_button == "always-on") {
-            this.$el.append($("<div style='margin-right: 5px;' />").append(this.upload_dialog.$el));
-        }
-        this.$el.append($("<div/>").append(this.button_dialog.$el));
-        _.each(this.fields, (field) => {
-            $fields.append(field.$el);
-        });
-        _.each(this.$batch, ($batchfield, batchmode) => {
-            $fields.append($batchfield);
-        });
-        this.model.set("current", 0);
-        this._changeCurrent();
-        this._changeData();
-    },
-
-    /** Change of wait flag */
-    _changeWait: function () {
-        const self = this;
-        _.each(this.fields, (field) => {
-            field[self.model.get("wait") ? "wait" : "unwait"]();
-        });
-    },
-
-    /** Change of available options */
-    _changeData: function () {
-        const options = this.model.get("data");
-        const self = this;
-        const select_options = { hda: [], hdca: [] };
-        _.each(options, (items, src) => {
-            _.each(items, (item) => {
-                self._patchValue(item, src);
-                const current_src = item.src || src;
-                const addOption = !this.model.attributes.tag || item.tags.includes(this.model.attributes.tag);
-                if (addOption) {
-                    select_options[current_src].push({
-                        hid: item.hid || Infinity, // if we got no hid we have a "Selected" item
-                        keep: item.keep,
-                        label: `${item.hid || "Selected"}: ${item.name}`,
-                        value: item.id,
-                        origin: item.origin,
-                        tags: item.tags,
-                    });
-                }
-                self.cache[`${item.id}_${current_src}`] = item;
-            });
-        });
-        _.each(this.config, (c, i) => {
-            select_options[c.src] && self.fields[i].add(select_options[c.src], (a, b) => b.hid - a.hid);
-        });
-    },
-
-    /** Change of incoming value */
-    _changeValue: function () {
-        const new_value = this.model.get("value");
-        if (new_value && new_value.values && new_value.values.length > 0) {
-            // sniff first suitable field type from config list
-            let src = new_value.values[0].src;
-            if (src === "dce") {
-                src =
-                    this.cache[`dce${new_value.values[0].id}_hda`]?.src ||
-                    this.cache[`dce${new_value.values[0].id}_hdca`]?.src;
-            }
-            this._patchValue(new_value, src);
-            // create list with content ids
-            const list = [];
-            _.each(new_value.values, (value) => {
-                list.push(value.id);
-            });
-            const multiple = new_value.values.length > 1;
-            for (let i = 0; i < this.config.length; i++) {
-                const field = this.fields[i];
-                const c = this.config[i];
-                if (c.src == src && [multiple, true].indexOf(c.multiple) !== -1) {
-                    this.model.set("current", i);
-                    field.value(list);
-                    break;
-                }
-            }
-        } else {
-            _.each(this.fields, (field) => {
-                field.value(null);
-            });
-        }
-    },
-
-    /** Source helper matches history_content_types to source types */
-    _getSource: function (v) {
-        return v.history_content_type == "dataset_collection" ? "hdca" : "hda";
-    },
-
-    /** Only utilize id, source and map_over_type when specifiying input value **/
-    _pickValue: function (v) {
-        if (v && v.values) {
-            v.values = v.values.map((entry) => ({
-                id: entry.id,
-                src: entry.src,
-                map_over_type: entry.map_over_type,
-            }));
-        }
-        return v;
-    },
-
-    /** Library datasets are displayed and selected together with history datasets,
-        Dataset collection elements are displayed together with history dataset collections **/
-    _patchValue: function (v, src) {
-        const patchTo = { ldda: "hda", dce: src };
-        if (v.values) {
-            _.each(v.values, (v) => {
-                this._patchValue(v, src);
-            });
-        } else if (patchTo[v.src]) {
-            v.origin = v.src;
-            v.src = patchTo[v.src];
-            v.id = `${v.origin}${v.id}`;
-        }
-    },
-
-    /** Restores original value e.g. after patching library datasets **/
-    _unpatchValue: function (v) {
-        if (v.origin) {
-            const d = Object.assign({}, v);
-            d.id = d.id.substr(d.origin.length);
-            d.src = d.origin;
-            return d;
-        }
-        return v;
-    },
-
-    /** Add values from drag/drop */
-    _handleDropValues: function (drop_data, drop_partial = true) {
-        const self = this;
-        const data = this.model.get("data");
-        const current = this.model.get("current");
-        const config = this.config[current];
-        const field = this.fields[current];
-        if (data) {
-            const values = Array.isArray(drop_data) ? drop_data : [drop_data];
-            if (values.length > 0) {
-                let data_changed = false;
-                _.each(values, (v) => {
-                    // element_id deals with override in old backbone code,
-                    // can remove when old history is deprecated
-                    v.id = v.element_id || v.id;
-                    self._patchValue(v);
-                    const new_id = v.id;
-                    const new_src = (v.src = this._getSource(v));
-                    const new_value = { id: new_id, src: new_src };
-                    if (!_.findWhere(data[new_src], new_value)) {
-                        data_changed = true;
-                        data[new_src].push({
-                            id: new_id,
-                            src: new_src,
-                            hid: v.hid || "Selected",
-                            name: v.name ? v.name : new_id,
-                            origin: v.origin,
-                            keep: true,
-                            tags: [],
-                        });
-                    }
-                });
-                if (data_changed) {
-                    this._changeData();
-                }
-                const first_id = values[0].id;
-                const first_src = values[0].src;
-                if (config.src == first_src && drop_partial) {
-                    let current_value = field.value();
-                    if (current_value && config.multiple) {
-                        _.each(values, (v) => {
-                            if (current_value.indexOf(v.id) == -1) {
-                                current_value.push(v.id);
-                            }
-                        });
-                    } else {
-                        current_value = first_id;
-                    }
-                    field.value(current_value);
-                } else {
-                    this.model.set("value", { values: values });
-                    this.model.trigger("change:value");
-                }
-                this.trigger("change");
-            }
-        }
-        this._handleDropStatus("success");
-    },
-
-    /** Highlight drag result */
-    _handleDropStatus: function (status) {
-        const self = this;
-        this.$el.removeClass("ui-dragover").addClass(`ui-dragover-${status}`);
-        setTimeout(() => {
-            self.$el.removeClass(`ui-dragover-${status}`);
-        }, this.model.get("statustimer"));
-    },
-
-    /** Assists in identifying the batch mode */
-    _batch: function (result) {
-        result["batch"] = false;
-        const current = this.model.get("current");
-        const config = this.config[current];
-        if (config.src == "dce" || config.src == "hdca") {
-            const element = this.cache[`${this.fields[current].value()}_${config.src}`];
-            if (element && element.map_over_type) {
-                result["batch"] = true;
-            }
-        }
-        if (config.batch == Batch.LINKED || config.batch == Batch.ENABLED) {
-            result["batch"] = true;
-            if (config.batch == Batch.ENABLED && this.button_product.value() === "true") {
-                result["product"] = true;
-            }
-        }
-        return result;
-    },
-
-    /** Template for batch mode execution options */
-    _templateBatch: function () {
-        return `<div class="form-text text-muted" style="clear: both;">
-                    <i class="fa fa-sitemap"/>
-                    <span>
-                        This is a batch mode input field. Separate jobs will be triggered for each dataset selection.
-                    </span>
-                </div>`;
-    },
-});
-
-export default {
-    View: View,
-};

From edf067fefbc6fa43494354e90e7e3f46e104bc7a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 20 Aug 2023 09:14:32 +0200
Subject: [PATCH 29/86] Properly set file dialog attributes

---
 .../Form/Elements/FormData/FormData.vue       | 41 ++++++++++---------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 280b5f3e2083..3ef37648410f 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -167,26 +167,6 @@ const variant = computed(() => {
     return VARIANTS[variantKey];
 });
 
-/**
- * Open file dialog
- */
-function onBrowse() {
-    if (currentVariant.value) {
-        const Galaxy = getGalaxyInstance();
-        Galaxy.data.dialog(
-            (response: Record<string, unknown>) => {
-                handleIncoming(response, false);
-            },
-            {
-                multiple: currentVariant.value.multiple,
-                library: !!currentVariant.value.library,
-                format: null,
-                allowUpload: true,
-            }
-        );
-    }
-}
-
 /**
  * Clears highlighting with delay
  */
@@ -251,6 +231,27 @@ function handleIncoming(incoming: Record<string, unknown>, partial = true) {
     }
 }
 
+/**
+ * Open file dialog
+ */
+function onBrowse() {
+    if (variant.value) {
+        const library = variant.value.find((v) => v.library);
+        const multiple = variant.value.find((v) => v.multiple);
+        getGalaxyInstance().data.dialog(
+            (response: Record<string, unknown>) => {
+                handleIncoming(response, false);
+            },
+            {
+                allowUpload: true,
+                format: null,
+                library,
+                multiple,
+            }
+        );
+    }
+}
+
 /**
  * Drag/Drop event handlers
  */

From 98f64e63ba822223863fb81912e734abdf88f7fe Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 20 Aug 2023 10:15:25 +0200
Subject: [PATCH 30/86] Fix Form Select test case, and linting

---
 client/src/components/Form/Elements/FormData/FormData.vue | 6 ++----
 client/src/components/Form/Elements/FormSelect.test.js    | 5 +++--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 3ef37648410f..869c0054fa9b 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -10,7 +10,7 @@ import { getGalaxyInstance } from "@/app";
 import { type EventData, useEventStore } from "@/stores/eventStore";
 
 import type { DataOption } from "./types";
-import { BATCH, SOURCE, VARIANTS } from "./variants";
+import { BATCH, VARIANTS } from "./variants";
 
 import FormSelect from "@/components/Form/Elements/FormSelect.vue";
 
@@ -211,9 +211,7 @@ function handleIncoming(incoming: Record<string, unknown>, partial = true) {
                 // Set new value
                 const config = currentVariant.value;
                 const firstValue = incomingValues[0];
-                const firstId = firstValue.id;
-                const firstSrc = firstValue.src;
-                if (config && config.src == firstSrc && partial) {
+                if (config && config.src == firstValue.src && partial) {
                     if (config.multiple) {
                         const newValues = currentValue.value ? currentValue.value.slice() : [];
                         incomingValues.forEach((v) => {
diff --git a/client/src/components/Form/Elements/FormSelect.test.js b/client/src/components/Form/Elements/FormSelect.test.js
index d25b7d9ae837..ea2d62c68388 100644
--- a/client/src/components/Form/Elements/FormSelect.test.js
+++ b/client/src/components/Form/Elements/FormSelect.test.js
@@ -1,7 +1,7 @@
 import { mount } from "@vue/test-utils";
 import { getLocalVue } from "tests/jest/helpers";
 
-import MountTarget from "./FormSelect";
+import MountTarget from "./FormSelection.vue";
 
 const localVue = getLocalVue(true);
 
@@ -56,7 +56,7 @@ describe("FormSelect", () => {
         await wrapper.setProps({ value: "value_1" });
         const selectedValue = wrapper.find(".multiselect__option--selected");
         expect(selectedValue.text()).toBe("label_1");
-        selectedValue.trigger("click");
+        options.at(0).trigger("click");
         const nullValue = wrapper.emitted().input[0][0];
         expect(nullValue).toBe(null);
         await wrapper.setProps({ value: null });
@@ -67,6 +67,7 @@ describe("FormSelect", () => {
     it("multiple values", async () => {
         const wrapper = createTarget({
             multiple: true,
+            optional: true,
             options: defaultOptions,
             value: ["value_1", "", 99],
         });

From da534dc49e71d9de7958d0862e526c35178bfb36 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 20 Aug 2023 11:08:02 +0200
Subject: [PATCH 31/86] Add tag filter to options

---
 client/src/components/Form/Elements/FormData/FormData.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 869c0054fa9b..eaf1ec00d104 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -127,7 +127,10 @@ const formattedOptions = computed(() => {
                 const keepKey = `${option.id}_${option.src}`;
                 keepOptions.value[keepKey] = newOption;
             } else {
-                result.push(newOption);
+                const accepted = !props.tag || option.tags.includes(props.tag);
+                if (accepted) {
+                    result.push(newOption);
+                }
             }
         });
         // Populate keep-options from cache

From 9bb5b58aa60e53331645d4ee27edc1d8f530adfb Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 20 Aug 2023 11:30:01 +0200
Subject: [PATCH 32/86] Add wait indicator, add prop to disable select field

---
 .../components/Form/Elements/FormData/FormData.vue   | 12 +++++++++---
 client/src/components/Form/Elements/FormSelect.vue   |  3 +++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index eaf1ec00d104..368d196ee4e3 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -65,6 +65,9 @@ const dragTarget: Ref<EventTarget | null> = ref(null);
 /** Store options which need to be preserved **/
 const keepOptions: Ref<Record<string, SelectOption>> = ref({});
 
+/** Displays a wait indicator between setting a value and receiving an update */
+const waiting = ref(false);
+
 /**
  * Provides the currently shown source type
  */
@@ -75,6 +78,7 @@ const currentSource = computed(() => currentVariant.value && currentVariant.valu
  */
 const currentValue = computed({
     get: () => {
+        waiting.value = false;
         const value: Array<DataOption> = [];
         if (props.value) {
             for (const v of props.value.values) {
@@ -95,6 +99,7 @@ const currentValue = computed({
         return null;
     },
     set: (val) => {
+        waiting.value = true;
         setValue(val);
     },
 });
@@ -237,8 +242,8 @@ function handleIncoming(incoming: Record<string, unknown>, partial = true) {
  */
 function onBrowse() {
     if (variant.value) {
-        const library = variant.value.find((v) => v.library);
-        const multiple = variant.value.find((v) => v.multiple);
+        const library = !!variant.value.find((v) => v.library);
+        const multiple = !!variant.value.find((v) => v.multiple);
         getGalaxyInstance().data.dialog(
             (response: Record<string, unknown>) => {
                 handleIncoming(response, false);
@@ -339,7 +344,8 @@ watch(
                     <FontAwesomeIcon :icon="['far', v.icon]" />
                 </BButton>
                 <BButton v-b-tooltip.hover.bottom title="Browse or Upload Datasets" @click="onBrowse">
-                    <span class="font-weight-bold">...</span>
+                    <FontAwesomeIcon v-if="waiting" icon="fa-spinner" spin />
+                    <span v-else class="font-weight-bold">...</span>
                 </BButton>
             </BButtonGroup>
             <FormSelect
diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index ef0db345484d..d3605e087cfc 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -18,6 +18,7 @@ interface SelectOption {
 const props = withDefaults(
     defineProps<{
         id?: string;
+        disabled?: boolean;
         multiple?: boolean;
         optional?: boolean;
         options: Array<SelectOption>;
@@ -26,6 +27,7 @@ const props = withDefaults(
     }>(),
     {
         id: `form-select-${uid()}`,
+        disabled: false,
         multiple: false,
         optional: false,
         placeholder: "Select value",
@@ -136,6 +138,7 @@ onMounted(() => {
         :aria-expanded="ariaExpanded"
         :class="['form-select', cls]"
         :close-on-select="!multiple"
+        :disabled="disabled"
         :deselect-label="deselectLabel"
         label="label"
         :multiple="multiple"

From 88eac5da381d1dad0a1b304332447836f6a04c09 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 20 Aug 2023 17:21:21 +0200
Subject: [PATCH 33/86] Use eventbus to set waiting flag to avoid unexpected
 side effects?

---
 .../components/Form/Elements/FormData/FormData.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 368d196ee4e3..39a6c9f31232 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -4,7 +4,7 @@ import { faCopy, faFile, faFolder } from "@fortawesome/free-regular-svg-icons";
 import { faExclamation, faLink, faUnlink } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BButtonGroup, BFormCheckbox } from "bootstrap-vue";
-import { computed, type Ref, ref, watch } from "vue";
+import Vue, { computed, onMounted, type Ref, ref, watch } from "vue";
 
 import { getGalaxyInstance } from "@/app";
 import { type EventData, useEventStore } from "@/stores/eventStore";
@@ -45,6 +45,8 @@ const props = withDefaults(
     }
 );
 
+const eventHub = new Vue();
+
 const eventStore = useEventStore();
 
 const $emit = defineEmits(["input"]);
@@ -78,7 +80,7 @@ const currentSource = computed(() => currentVariant.value && currentVariant.valu
  */
 const currentValue = computed({
     get: () => {
-        waiting.value = false;
+        eventHub.$emit("waiting", false);
         const value: Array<DataOption> = [];
         if (props.value) {
             for (const v of props.value.values) {
@@ -99,7 +101,7 @@ const currentValue = computed({
         return null;
     },
     set: (val) => {
-        waiting.value = true;
+        eventHub.$emit("waiting", true);
         setValue(val);
     },
 });
@@ -314,6 +316,12 @@ function setValue(val: Array<DataOption> | DataOption | null) {
     }
 }
 
+onMounted(() => {
+    eventHub.$on("waiting", (value: boolean) => {
+        waiting.value = value;
+    });
+});
+
 /**
  * Watch and set current value if user switches to a different select field
  */

From 23e366c75cd799d7e06f479596870e5ce13cba7a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 20 Aug 2023 18:52:57 +0200
Subject: [PATCH 34/86] Add file dialog condition, fix variant key, use source
 constants, selenium adjustments

---
 .../Form/Elements/FormData/FormData.vue       | 26 ++++++++++++-------
 client/src/utils/navigation/navigation.yml    |  9 +++----
 lib/galaxy_test/selenium/test_tool_form.py    | 11 ++++----
 3 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 39a6c9f31232..77faa7ee9d1e 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -10,7 +10,7 @@ import { getGalaxyInstance } from "@/app";
 import { type EventData, useEventStore } from "@/stores/eventStore";
 
 import type { DataOption } from "./types";
-import { BATCH, VARIANTS } from "./variants";
+import { BATCH, SOURCE, VARIANTS } from "./variants";
 
 import FormSelect from "@/components/Form/Elements/FormSelect.vue";
 
@@ -52,7 +52,7 @@ const eventStore = useEventStore();
 const $emit = defineEmits(["input"]);
 
 // Determines wether values should be processed as linked or unlinked
-const currentBatch = ref(true);
+const currentLinked = ref(true);
 
 // Indicates which of the select field from the set of variants is currently shown
 const currentField = ref(0);
@@ -70,6 +70,11 @@ const keepOptions: Ref<Record<string, SelectOption>> = ref({});
 /** Displays a wait indicator between setting a value and receiving an update */
 const waiting = ref(false);
 
+/**
+ * Determine wether the file dialog can be used or not
+ */
+const canBrowse = computed(() => variant.value && !!variant.value.find((v) => v.src === SOURCE.DATASET));
+
 /**
  * Provides the currently shown source type
  */
@@ -165,14 +170,14 @@ const formattedOptions = computed(() => {
 /**
  * Provides placeholder label for select field
  */
-const placeholder = computed(() => (currentSource.value === "hda" ? "dataset" : "dataset collection"));
+const placeholder = computed(() => (currentSource.value === SOURCE.DATASET ? "dataset" : "dataset collection"));
 
 /**
  * Provides the array of available variants associated with a specific form data type
  */
 const variant = computed(() => {
     const flavorKey = props.flavor ? `${props.flavor}_` : "";
-    const multipleKey = props.multiple ? `_${props.multiple}` : "";
+    const multipleKey = props.multiple ? `_multiple` : "";
     const variantKey = `${flavorKey}${props.type}${multipleKey}`;
     return VARIANTS[variantKey];
 });
@@ -198,7 +203,7 @@ function handleIncoming(incoming: Record<string, unknown>, partial = true) {
                 const newHid = v.hid;
                 const newId = v.id;
                 const newName = v.name ? v.name : newId;
-                const newSrc = v.history_content_type === "dataset_collection" ? "hdca" : "hda";
+                const newSrc = v.history_content_type === "dataset_collection" ? SOURCE.COLLECTION : SOURCE.DATASET;
                 const newValue = {
                     id: newId,
                     src: newSrc,
@@ -302,9 +307,10 @@ function setValue(val: Array<DataOption> | DataOption | null) {
     const batchMode = currentVariant.value && currentVariant.value.batch;
     if (val) {
         const values = Array.isArray(val) ? val : [val];
+        const hasMapOverType = values.find((entry) => !!entry.map_over_type);
         $emit("input", {
-            batch: batchMode !== BATCH.DISABLED,
-            product: batchMode === BATCH.ENABLED && !currentBatch.value,
+            batch: batchMode !== BATCH.DISABLED || hasMapOverType,
+            product: batchMode === BATCH.ENABLED && !currentLinked.value,
             values: values.map((entry) => ({
                 id: entry.id,
                 src: entry.src,
@@ -351,7 +357,7 @@ watch(
                     @click="currentField = index">
                     <FontAwesomeIcon :icon="['far', v.icon]" />
                 </BButton>
-                <BButton v-b-tooltip.hover.bottom title="Browse or Upload Datasets" @click="onBrowse">
+                <BButton v-if="canBrowse" v-b-tooltip.hover.bottom title="Browse or Upload Datasets" @click="onBrowse">
                     <FontAwesomeIcon v-if="waiting" icon="fa-spinner" spin />
                     <span v-else class="font-weight-bold">...</span>
                 </BButton>
@@ -368,10 +374,10 @@ watch(
         <div v-if="currentVariant.batch !== BATCH.DISABLED">
             <BFormCheckbox
                 v-if="currentVariant.batch === BATCH.ENABLED"
-                v-model="currentBatch"
+                v-model="currentLinked"
                 class="no-highlight my-2"
                 switch>
-                <div v-if="currentBatch">
+                <div v-if="currentLinked">
                     <FontAwesomeIcon icon="fa-link" />
                     <b v-localize class="mr-1">Linked:</b>
                     <span v-localize>Datasets will be run in matched order with other datasets.</span>
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 874ee317fbaf..1dd616eca4e7 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -555,12 +555,9 @@ tool_form:
     parameter_checkbox: 'div.ui-form-element[id="form-element-${parameter}"] .ui-switch'
     parameter_input: 'div.ui-form-element[id="form-element-${parameter}"] .ui-input'
     parameter_textarea: 'div.ui-form-element[id="form-element-${parameter}"] textarea'
-    parameter_data_input_single:
-      type: xpath
-      selector: //div[@id='form-element-${parameter}']//i[contains(@class, 'fa-file-o')]/parent::label
-    parameter_batch_dataset_collection:
-      type: xpath
-      selector: //div[@id='form-element-${parameter}']//i[contains(@class, 'fa-folder-o')]/parent::label
+    parameter_data_input_single: 'div.ui-form-element[id="form-element-${parameter}"] button[title="Single dataset"]'
+    parameter_data_input_collection: 'div.ui-form-element[id="form-element-${parameter}"] button[title="Dataset collections"]'
+    parameter_data_select: 'div.ui-form-element[id="form-element-${parameter}"] .multiselect'
     data_option_value: option[value="${item_id}"]
 
     repeat_insert: '[data-description="repeat insert"]'
diff --git a/lib/galaxy_test/selenium/test_tool_form.py b/lib/galaxy_test/selenium/test_tool_form.py
index 2bc8f59b2ac2..7909bfc9a304 100644
--- a/lib/galaxy_test/selenium/test_tool_form.py
+++ b/lib/galaxy_test/selenium/test_tool_form.py
@@ -195,7 +195,7 @@ def test_rerun_deleted_dataset(self):
         )
         assert error_col.text == "parameter 'col': an invalid option ('3') was selected (valid options: 1)"
         # validate errors when inputs are missing
-        self.components.tool_form.parameter_batch_dataset_collection(parameter="input1").wait_for_and_click()
+        self.components.tool_form.parameter_data_input_collection(parameter="input1").wait_for_and_click()
         self.sleep_for(self.wait_types.UX_TRANSITION)
         error_input1 = self.components.tool_form.parameter_error(parameter="input1").wait_for_visible()
         error_col = self.components.tool_form.parameter_error(parameter="col").wait_for_visible()
@@ -223,15 +223,16 @@ def test_rerun_dataset_collection_element(self):
 
         history_id = self.current_history_id()
         # upload a nested collection
-        collection_id = self.dataset_collection_populator.create_list_of_list_in_history(
+        self.dataset_collection_populator.create_list_of_list_in_history(
             history_id,
             collection_type="list:list",
             wait=True,
         ).json()["id"]
         self.tool_open("identifier_multiple")
-        self.components.tool_form.parameter_batch_dataset_collection(parameter="input1").wait_for_and_click()
+        self.components.tool_form.parameter_data_input_collection(parameter="input1").wait_for_and_click()
         self.sleep_for(self.wait_types.UX_RENDER)
-        self.components.tool_form.data_option_value(item_id=collection_id).wait_for_and_click()
+        select_field = self.components.tool_form.parameter_data_select(parameter="input1")
+        self.select_set_value(select_field, "list:list")
         self.sleep_for(self.wait_types.UX_RENDER)
         self.tool_form_execute()
         self.history_panel_wait_for_hid_ok(7)
@@ -241,7 +242,7 @@ def test_rerun_dataset_collection_element(self):
         self.sleep_for(self.wait_types.UX_RENDER)
         self.hda_click_primary_action_button(1, "rerun")
         self.sleep_for(self.wait_types.UX_RENDER)
-        assert self.driver.find_element(By.CSS_SELECTOR, "option:checked").text == "Selected: test0"
+        # assert self.driver.find_element(By.CSS_SELECTOR, "option:checked").text == "Selected: test0"
         self.tool_form_execute()
         self.components.history_panel.collection_view.back_to_history.wait_for_and_click()
         self.history_panel_wait_for_hid_ok(9)

From c41267bdba372b4b292d97b021da3a72102015f4 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 21 Aug 2023 15:36:37 +0200
Subject: [PATCH 35/86] Add field type matcher

---
 .../Form/Elements/FormData/FormData.vue       | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 77faa7ee9d1e..be8120669677 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -45,7 +45,7 @@ const props = withDefaults(
     }
 );
 
-const eventHub = new Vue();
+const eventBus = new Vue();
 
 const eventStore = useEventStore();
 
@@ -85,7 +85,7 @@ const currentSource = computed(() => currentVariant.value && currentVariant.valu
  */
 const currentValue = computed({
     get: () => {
-        eventHub.$emit("waiting", false);
+        eventBus.$emit("waiting", false);
         const value: Array<DataOption> = [];
         if (props.value) {
             for (const v of props.value.values) {
@@ -106,7 +106,7 @@ const currentValue = computed({
         return null;
     },
     set: (val) => {
-        eventHub.$emit("waiting", true);
+        eventBus.$emit("waiting", true);
         setValue(val);
     },
 });
@@ -308,6 +308,17 @@ function setValue(val: Array<DataOption> | DataOption | null) {
     if (val) {
         const values = Array.isArray(val) ? val : [val];
         const hasMapOverType = values.find((entry) => !!entry.map_over_type);
+        // Match field type
+        if (currentVariant.value && variant.value && values.length > 0 && values[0]) {
+            const multiple = values.length > 1;
+            const src = values[0].src;
+            // Only match field type if source differs from current field
+            if (src !== currentVariant.value.src) {
+                const filteredVariant = variant.value.findIndex((v) => v.multiple === multiple && v.src === src);
+                currentField.value = Math.max(filteredVariant, 0);
+            }
+        }
+        // Emit new value
         $emit("input", {
             batch: batchMode !== BATCH.DISABLED || hasMapOverType,
             product: batchMode === BATCH.ENABLED && !currentLinked.value,
@@ -323,7 +334,7 @@ function setValue(val: Array<DataOption> | DataOption | null) {
 }
 
 onMounted(() => {
-    eventHub.$on("waiting", (value: boolean) => {
+    eventBus.$on("waiting", (value: boolean) => {
         waiting.value = value;
     });
 });

From 8ab0ebbd558daeb9b2a691c19ee7b7ad2e9bd3d7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 21 Aug 2023 18:55:19 +0200
Subject: [PATCH 36/86] Explore handling dce's separately

---
 .../Form/Elements/FormData/FormData.vue       | 114 +++++++++++-------
 .../Form/Elements/FormData/variants.ts        |   2 +-
 2 files changed, 69 insertions(+), 47 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index be8120669677..cca2ec0ad085 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -167,6 +167,17 @@ const formattedOptions = computed(() => {
     }
 });
 
+/**
+ * Dataset collection elements should be treated as plain values.
+ */
+const isDCE = computed(() => {
+    if (props.value) {
+        return props.value.values.findIndex((v) => v.src !== SOURCE.COLLECTION_ELEMENT) === -1;
+    } else {
+        return false;
+    }
+});
+
 /**
  * Provides placeholder label for select field
  */
@@ -357,53 +368,64 @@ watch(
         @dragleave.prevent="onDragLeave"
         @dragover.prevent="onDragOver"
         @drop.prevent="onDrop">
-        <div class="d-flex">
-            <BButtonGroup v-if="variant.length > 1" buttons class="align-self-start mr-2">
-                <BButton
-                    v-for="(v, index) in variant"
-                    :key="index"
-                    v-b-tooltip.hover.bottom
-                    :pressed="currentField === index"
-                    :title="v.tooltip"
-                    @click="currentField = index">
-                    <FontAwesomeIcon :icon="['far', v.icon]" />
-                </BButton>
-                <BButton v-if="canBrowse" v-b-tooltip.hover.bottom title="Browse or Upload Datasets" @click="onBrowse">
-                    <FontAwesomeIcon v-if="waiting" icon="fa-spinner" spin />
-                    <span v-else class="font-weight-bold">...</span>
-                </BButton>
-            </BButtonGroup>
-            <FormSelect
-                v-if="currentVariant"
-                v-model="currentValue"
-                class="w-100"
-                :multiple="currentVariant.multiple"
-                :optional="optional"
-                :options="formattedOptions"
-                :placeholder="`Select a ${placeholder}`" />
-        </div>
-        <div v-if="currentVariant.batch !== BATCH.DISABLED">
-            <BFormCheckbox
-                v-if="currentVariant.batch === BATCH.ENABLED"
-                v-model="currentLinked"
-                class="no-highlight my-2"
-                switch>
-                <div v-if="currentLinked">
-                    <FontAwesomeIcon icon="fa-link" />
-                    <b v-localize class="mr-1">Linked:</b>
-                    <span v-localize>Datasets will be run in matched order with other datasets.</span>
+        <b-alert v-if="isDCE" variant="info" show>
+            <div v-for="v of props.value.values" :key="v.id">
+                {{ v }}
+            </div>
+        </b-alert>
+        <div v-else>
+            <div class="d-flex">
+                <BButtonGroup v-if="variant.length > 1" buttons class="align-self-start mr-2">
+                    <BButton
+                        v-for="(v, index) in variant"
+                        :key="index"
+                        v-b-tooltip.hover.bottom
+                        :pressed="currentField === index"
+                        :title="v.tooltip"
+                        @click="currentField = index">
+                        <FontAwesomeIcon :icon="['far', v.icon]" />
+                    </BButton>
+                    <BButton
+                        v-if="canBrowse"
+                        v-b-tooltip.hover.bottom
+                        title="Browse or Upload Datasets"
+                        @click="onBrowse">
+                        <FontAwesomeIcon v-if="waiting" icon="fa-spinner" spin />
+                        <span v-else class="font-weight-bold">...</span>
+                    </BButton>
+                </BButtonGroup>
+                <FormSelect
+                    v-if="currentVariant"
+                    v-model="currentValue"
+                    class="w-100"
+                    :multiple="currentVariant.multiple"
+                    :optional="optional"
+                    :options="formattedOptions"
+                    :placeholder="`Select a ${placeholder}`" />
+            </div>
+            <div v-if="currentVariant.batch !== BATCH.DISABLED">
+                <BFormCheckbox
+                    v-if="currentVariant.batch === BATCH.ENABLED"
+                    v-model="currentLinked"
+                    class="no-highlight my-2"
+                    switch>
+                    <div v-if="currentLinked">
+                        <FontAwesomeIcon icon="fa-link" />
+                        <b v-localize class="mr-1">Linked:</b>
+                        <span v-localize>Datasets will be run in matched order with other datasets.</span>
+                    </div>
+                    <span v-else>
+                        <FontAwesomeIcon icon="fa-unlink" />
+                        <b v-localize class="mr-1">Unlinked:</b>
+                        <span v-localize>Dataset will be run against *all* other datasets.</span>
+                    </span>
+                </BFormCheckbox>
+                <div class="text-info my-2">
+                    <FontAwesomeIcon icon="fa-exclamation" />
+                    <span v-localize class="ml-1">
+                        This is a batch mode input field. Individual jobs will be triggered for each dataset.
+                    </span>
                 </div>
-                <span v-else>
-                    <FontAwesomeIcon icon="fa-unlink" />
-                    <b v-localize class="mr-1">Unlinked:</b>
-                    <span v-localize>Dataset will be run against *all* other datasets.</span>
-                </span>
-            </BFormCheckbox>
-            <div class="text-info my-2">
-                <FontAwesomeIcon icon="fa-exclamation" />
-                <span v-localize class="ml-1">
-                    This is a batch mode input field. Individual jobs will be triggered for each dataset.
-                </span>
             </div>
         </div>
     </div>
diff --git a/client/src/components/Form/Elements/FormData/variants.ts b/client/src/components/Form/Elements/FormData/variants.ts
index 9f8ee11b197e..4490bff3c9ea 100644
--- a/client/src/components/Form/Elements/FormData/variants.ts
+++ b/client/src/components/Form/Elements/FormData/variants.ts
@@ -12,7 +12,7 @@ interface VariantInterface {
 export const BATCH = { DISABLED: "disabled", ENABLED: "enabled", LINKED: "linked" };
 
 /** Data source variations */
-export const SOURCE = { DATASET: "hda", COLLECTION: "hdca" };
+export const SOURCE = { DATASET: "hda", COLLECTION: "hdca", COLLECTION_ELEMENT: "dce" };
 
 /** List of available data input variations */
 export const VARIANTS: Record<string, Array<VariantInterface>> = {

From db6f96724dddd49e49669e501327a3a8aa697dd4 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 21 Aug 2023 21:30:45 +0200
Subject: [PATCH 37/86] Avoid merging dce's into hda/hdca options, display
 without modification on re-run

---
 .../Form/Elements/FormData/FormData.vue       | 21 ++++++++++++++++---
 client/src/utils/navigation/navigation.yml    |  1 +
 lib/galaxy/tools/parameters/basic.py          | 11 +++-------
 lib/galaxy_test/selenium/test_tool_form.py    |  3 ++-
 4 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index cca2ec0ad085..ceaadf49a31c 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -255,6 +255,20 @@ function handleIncoming(incoming: Record<string, unknown>, partial = true) {
     }
 }
 
+/**
+ * Matches entries to available options
+ */
+function matchName(entry: DataOption) {
+    if ("src" in entry && entry.src) {
+        const options = props.options[entry.src] || [];
+        const option = options.find((v) => v.id === entry.id && v.src === entry.src);
+        if (option) {
+            return option.name;
+        }
+    }
+    return entry.id;
+}
+
 /**
  * Open file dialog
  */
@@ -368,9 +382,10 @@ watch(
         @dragleave.prevent="onDragLeave"
         @dragover.prevent="onDragOver"
         @drop.prevent="onDrop">
-        <b-alert v-if="isDCE" variant="info" show>
-            <div v-for="v of props.value.values" :key="v.id">
-                {{ v }}
+        <b-alert v-if="isDCE" variant="info" dismissible show @dismissed="currentValue = null">
+            <span v-localize class="font-weight-bold">Using the following datasets (dismiss to reset):</span>
+            <div v-for="(v, vIndex) of props.value.values" :key="vIndex">
+                <span class="form-data-entry-label ml-2">{{ vIndex + 1 }}. {{ matchName(v) || v.id }}</span>
             </div>
         </b-alert>
         <div v-else>
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 1dd616eca4e7..7dbd2f783c74 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -558,6 +558,7 @@ tool_form:
     parameter_data_input_single: 'div.ui-form-element[id="form-element-${parameter}"] button[title="Single dataset"]'
     parameter_data_input_collection: 'div.ui-form-element[id="form-element-${parameter}"] button[title="Dataset collections"]'
     parameter_data_select: 'div.ui-form-element[id="form-element-${parameter}"] .multiselect'
+    parameter_data_entry_label: 'div.ui-form-element[id="form-element-${parameter}"] .form-data-entry-label'
     data_option_value: option[value="${item_id}"]
 
     repeat_insert: '[data-description="repeat insert"]'
diff --git a/lib/galaxy/tools/parameters/basic.py b/lib/galaxy/tools/parameters/basic.py
index 6de845c6fd32..26bbe51a9487 100644
--- a/lib/galaxy/tools/parameters/basic.py
+++ b/lib/galaxy/tools/parameters/basic.py
@@ -2272,7 +2272,7 @@ def to_dict(self, trans, other_values=None):
             # For consistency, should these just always be in the dict?
             d["min"] = self.min
             d["max"] = self.max
-        d["options"] = {"hda": [], "hdca": []}
+        d["options"] = {"dce": [], "hda": [], "hdca": []}
         d["tag"] = self.tag
 
         # return dictionary without options if context is unavailable
@@ -2300,16 +2300,11 @@ def append(list, hda, name, src, keep=False, subcollection_type=None):
             return list.append(value)
 
         def append_dce(dce):
-            if dce.hda:
-                # well this isn't good, but what's the alternative ?
-                # we should be precise about what we're (re-)running here.
-                key = "hda"
-            else:
-                key = "hdca"
-            d["options"][key].append(
+            d["options"]["dce"].append(
                 {
                     "id": trans.security.encode_id(dce.id),
                     "name": dce.element_identifier,
+                    "hda": dce.hda,
                     "src": "dce",
                     "tags": [],
                     "keep": True,
diff --git a/lib/galaxy_test/selenium/test_tool_form.py b/lib/galaxy_test/selenium/test_tool_form.py
index 7909bfc9a304..8ace75711c39 100644
--- a/lib/galaxy_test/selenium/test_tool_form.py
+++ b/lib/galaxy_test/selenium/test_tool_form.py
@@ -242,7 +242,8 @@ def test_rerun_dataset_collection_element(self):
         self.sleep_for(self.wait_types.UX_RENDER)
         self.hda_click_primary_action_button(1, "rerun")
         self.sleep_for(self.wait_types.UX_RENDER)
-        # assert self.driver.find_element(By.CSS_SELECTOR, "option:checked").text == "Selected: test0"
+        entry_label = self.components.tool_form.parameter_data_entry_label(parameter="input1").wait_for_visible()
+        assert entry_label.text == "1. test0"
         self.tool_form_execute()
         self.components.history_panel.collection_view.back_to_history.wait_for_and_click()
         self.history_panel_wait_for_hid_ok(9)

From a6eed8e6972354263ec058445a606ac6613b08f4 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 22 Aug 2023 08:56:53 +0200
Subject: [PATCH 38/86] Minor formatting in simple run workflow form and
 ensuring that data value is emitted to emitted to parent

---
 .../Form/Elements/FormData/FormData.vue       |  3 +-
 .../Workflow/Run/WorkflowRunFormSimple.vue    | 43 ++++++++++---------
 2 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index ceaadf49a31c..02e12faaa107 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -345,7 +345,7 @@ function setValue(val: Array<DataOption> | DataOption | null) {
         }
         // Emit new value
         $emit("input", {
-            batch: batchMode !== BATCH.DISABLED || hasMapOverType,
+            batch: batchMode !== BATCH.DISABLED || !!hasMapOverType,
             product: batchMode === BATCH.ENABLED && !currentLinked.value,
             values: values.map((entry) => ({
                 id: entry.id,
@@ -362,6 +362,7 @@ onMounted(() => {
     eventBus.$on("waiting", (value: boolean) => {
         waiting.value = value;
     });
+    setValue(currentValue.value);
 });
 
 /**
diff --git a/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue b/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
index 719f44068ec8..77621c6d74de 100644
--- a/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
+++ b/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
@@ -15,20 +15,20 @@
                     <span class="fa fa-cog" />
                 </template>
                 <b-dropdown-form>
-                    <b-form-checkbox v-model="sendToNewHistory" class="workflow-run-settings-target"
-                        >Send results to a new history</b-form-checkbox
-                    >
+                    <b-form-checkbox v-model="sendToNewHistory" class="workflow-run-settings-target">
+                        Send results to a new history
+                    </b-form-checkbox>
                     <b-form-checkbox
                         v-if="reuseAllowed(currentUser)"
                         v-model="useCachedJobs"
-                        title="This may skip executing jobs that you have already run."
-                        >Attempt to re-use jobs with identical parameters?</b-form-checkbox
-                    >
+                        title="This may skip executing jobs that you have already run.">
+                        Attempt to re-use jobs with identical parameters?
+                    </b-form-checkbox>
                     <b-form-checkbox
                         v-if="isConfigLoaded && config.object_store_allows_id_selection"
-                        v-model="splitObjectStore"
-                        >Send outputs and intermediate to different object stores?</b-form-checkbox
-                    >
+                        v-model="splitObjectStore">
+                        Send outputs and intermediate to different object stores?
+                    </b-form-checkbox>
                     <WorkflowStorageConfiguration
                         v-if="isConfigLoaded && config.object_store_allows_id_selection"
                         :split-object-store="splitObjectStore"
@@ -109,18 +109,21 @@ export default {
             });
             // Add actual input modules.
             this.model.steps.forEach((step, i) => {
-                if (!isWorkflowInput(step.step_type)) {
-                    return;
+                if (isWorkflowInput(step.step_type)) {
+                    const stepName = new String(step.step_index);
+                    const stepLabel = step.step_label || new String(step.step_index + 1);
+                    const help = step.annotation;
+                    const longFormInput = step.inputs[0];
+                    const stepAsInput = Object.assign({}, longFormInput, {
+                        name: stepName,
+                        help: help,
+                        label: stepLabel,
+                    });
+                    // disable collection mapping...
+                    stepAsInput.flavor = "module";
+                    inputs.push(stepAsInput);
+                    this.inputTypes[stepName] = step.step_type;
                 }
-                const stepName = new String(step.step_index);
-                const stepLabel = step.step_label || new String(step.step_index + 1);
-                const help = step.annotation;
-                const longFormInput = step.inputs[0];
-                const stepAsInput = Object.assign({}, longFormInput, { name: stepName, help: help, label: stepLabel });
-                // disable collection mapping...
-                stepAsInput.flavor = "module";
-                inputs.push(stepAsInput);
-                this.inputTypes[stepName] = step.step_type;
             });
             return inputs;
         },

From d3790eb2bc7f96d963e41cc368d3ee482173d12c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 22 Aug 2023 10:00:35 +0200
Subject: [PATCH 39/86] Fix selenium test, add temporary render delay for
 simple workflow run form, should be fixed in component

---
 client/src/utils/navigation/navigation.yml | 2 +-
 lib/galaxy/selenium/navigates_galaxy.py    | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 7dbd2f783c74..b40c1d5c01cb 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -646,7 +646,7 @@ workflow_run:
   selectors:
     warning: ".ui-form-composite .alert-warning"
     input_div: "[step-label='${label}']"
-    input_data_div: "[step-label='${label}'] .select2-container"
+    input_data_div: "[step-label='${label}'] .multiselect"
     # TODO: put step labels in the DOM ideally
     subworkflow_step_icon: ".portlet-title-icon.fa-sitemap"
     run_workflow: "#run-workflow"
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index 1a2df7343b36..804da73c93d2 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -1486,12 +1486,13 @@ def workflow_run_with_name(self, name: str):
         self.workflow_index_open()
         self.workflow_index_search_for(name)
         self.workflow_click_option(".workflow-run")
+        self.sleep_for(self.wait_types.UX_RENDER)
 
     def workflow_run_specify_inputs(self, inputs: Dict[str, Any]):
         workflow_run = self.components.workflow_run
         for label, value in inputs.items():
             input_div_element = workflow_run.input_data_div(label=label).wait_for_visible()
-            self.select2_set_value(input_div_element, "%d: " % value["hid"])
+            self.select_set_value(input_div_element, "%d: " % value["hid"])
 
     def workflow_run_submit(self):
         self.components.workflow_run.run_workflow.wait_for_and_click()

From 6bf930cd6c03d247739db947451b7fc5a787da38 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 22 Aug 2023 10:50:38 +0200
Subject: [PATCH 40/86] Avoid resubmitting dce's for now, preserve existing
 value as is

---
 client/src/components/Form/Elements/FormData/FormData.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 02e12faaa107..848734682293 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -362,7 +362,7 @@ onMounted(() => {
     eventBus.$on("waiting", (value: boolean) => {
         waiting.value = value;
     });
-    setValue(currentValue.value);
+    !isDCE.value && setValue(currentValue.value);
 });
 
 /**

From ba481e52bffd08af3abb1740a553cc108b6c80c9 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 22 Aug 2023 12:40:25 +0200
Subject: [PATCH 41/86] Fix tool form input selector, remove unused navigation
 target

---
 client/src/utils/navigation/navigation.yml | 1 -
 lib/galaxy/selenium/navigates_galaxy.py    | 6 ++++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index b40c1d5c01cb..bc31609f6edb 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -559,7 +559,6 @@ tool_form:
     parameter_data_input_collection: 'div.ui-form-element[id="form-element-${parameter}"] button[title="Dataset collections"]'
     parameter_data_select: 'div.ui-form-element[id="form-element-${parameter}"] .multiselect'
     parameter_data_entry_label: 'div.ui-form-element[id="form-element-${parameter}"] .form-data-entry-label'
-    data_option_value: option[value="${item_id}"]
 
     repeat_insert: '[data-description="repeat insert"]'
     repeat_move_up: '#${parameter}_up'
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index 804da73c93d2..0d851ada8ea0 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -1590,8 +1590,10 @@ def tool_set_value(self, expanded_parameter_id, value, expected_type=None):
         div_element = self.tool_parameter_div(expanded_parameter_id)
         assert div_element
         if expected_type in ["select", "data", "data_collection"]:
-            div_selector = f"div.ui-form-element[id$='form-element-{expanded_parameter_id}']"
-            self.select2_set_value(div_selector, value)
+            select_field = self.components.tool_form.parameter_data_select(
+                parameter=expanded_parameter_id
+            ).wait_for_visible()
+            self.select_set_value(select_field, value)
         else:
             input_element = div_element.find_element(By.CSS_SELECTOR, "input")
             # Clear default value

From 31236623cbe0d7887c7c8e08229ca866b1a3a74a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 22 Aug 2023 13:12:47 +0200
Subject: [PATCH 42/86] Pick first entry if field is null, not optional but
 values are available

---
 client/src/components/Form/Elements/FormData/FormData.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 848734682293..16e03b5f7283 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -101,6 +101,12 @@ const currentValue = computed({
             }
             if (value.length > 0) {
                 return value;
+            } else if (!props.optional && formattedOptions.value.length > 0) {
+                const firstEntry = formattedOptions.value && formattedOptions.value[0];
+                if (firstEntry && firstEntry.value) {
+                    value.push(firstEntry.value);
+                    return value;
+                }
             }
         }
         return null;

From dd5f08d8be3cd20c8b70e9120936e0baba3dbe7b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 22 Aug 2023 15:22:13 +0200
Subject: [PATCH 43/86] Fix rerun error message selenium test

---
 client/src/components/Form/Elements/FormData/variants.ts | 2 +-
 client/src/utils/navigation/navigation.yml               | 2 +-
 lib/galaxy_test/selenium/test_tool_form.py               | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/variants.ts b/client/src/components/Form/Elements/FormData/variants.ts
index 4490bff3c9ea..dd46804fe8a7 100644
--- a/client/src/components/Form/Elements/FormData/variants.ts
+++ b/client/src/components/Form/Elements/FormData/variants.ts
@@ -51,7 +51,7 @@ export const VARIANTS: Record<string, Array<VariantInterface>> = {
         {
             src: "hdca",
             icon: "fa-folder",
-            tooltip: "Dataset collections",
+            tooltip: "Dataset collection",
             multiple: true,
             batch: BATCH.DISABLED,
         },
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index bc31609f6edb..7d05df6c09d7 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -556,7 +556,7 @@ tool_form:
     parameter_input: 'div.ui-form-element[id="form-element-${parameter}"] .ui-input'
     parameter_textarea: 'div.ui-form-element[id="form-element-${parameter}"] textarea'
     parameter_data_input_single: 'div.ui-form-element[id="form-element-${parameter}"] button[title="Single dataset"]'
-    parameter_data_input_collection: 'div.ui-form-element[id="form-element-${parameter}"] button[title="Dataset collections"]'
+    parameter_data_input_collection: 'div.ui-form-element[id="form-element-${parameter}"] button[title="Dataset collection"]'
     parameter_data_select: 'div.ui-form-element[id="form-element-${parameter}"] .multiselect'
     parameter_data_entry_label: 'div.ui-form-element[id="form-element-${parameter}"] .form-data-entry-label'
 
diff --git a/lib/galaxy_test/selenium/test_tool_form.py b/lib/galaxy_test/selenium/test_tool_form.py
index 8ace75711c39..cf526c3fbcd2 100644
--- a/lib/galaxy_test/selenium/test_tool_form.py
+++ b/lib/galaxy_test/selenium/test_tool_form.py
@@ -200,7 +200,7 @@ def test_rerun_deleted_dataset(self):
         error_input1 = self.components.tool_form.parameter_error(parameter="input1").wait_for_visible()
         error_col = self.components.tool_form.parameter_error(parameter="col").wait_for_visible()
         error_col_names = self.components.tool_form.parameter_error(parameter="col_names").wait_for_visible()
-        assert error_input1.text == "Please provide a value for this option."
+        assert error_input1.text == "parameter 'input1': specify a dataset of the required format / build for parameter"
         assert error_col.text == "parameter 'col': requires a value, but no legal values defined"
         assert error_col_names.text == "parameter 'col_names': requires a value, but no legal values defined"
         # validate warnings when inputs are restored

From 7a133e54d65b1d1dcb76adaa096ca8358b131e60 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 22 Aug 2023 16:30:25 +0200
Subject: [PATCH 44/86] Add entry for optional single dataset/collection input
 field

---
 client/src/components/Form/Elements/FormData/FormData.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 16e03b5f7283..b7c765fce432 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -167,6 +167,13 @@ const formattedOptions = computed(() => {
                 return 0;
             }
         });
+        // Add optional entry
+        if (!currentVariant.value?.multiple && props.optional) {
+            result.unshift({
+                label: "Nothing selected",
+                value: null,
+            });
+        }
         return result;
     } else {
         return [];

From 80b1651d56f5033339cd897283eeb1a5f19b77f3 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 22 Aug 2023 17:41:44 +0200
Subject: [PATCH 45/86] Allow for more detailed batch mode mapping,
 particularly for dce's

---
 .../Form/Elements/FormData/FormData.vue       | 81 +++++++++++++------
 .../Form/Elements/FormData/types.ts           |  1 +
 2 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index b7c765fce432..6451c92435c8 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -271,15 +271,23 @@ function handleIncoming(incoming: Record<string, unknown>, partial = true) {
 /**
  * Matches entries to available options
  */
-function matchName(entry: DataOption) {
+function matchOption(entry: DataOption) {
     if ("src" in entry && entry.src) {
         const options = props.options[entry.src] || [];
         const option = options.find((v) => v.id === entry.id && v.src === entry.src);
         if (option) {
-            return option.name;
+            return option;
         }
     }
-    return entry.id;
+    return null;
+}
+
+/**
+ * Matches entry name from available options
+ */
+function matchName(entry: DataOption) {
+    const option = matchOption(entry);
+    return option?.name || entry.id;
 }
 
 /**
@@ -342,30 +350,53 @@ function onDrop(evt: MouseEvent) {
  * Processes and submits values from the select field
  */
 function setValue(val: Array<DataOption> | DataOption | null) {
-    const batchMode = currentVariant.value && currentVariant.value.batch;
     if (val) {
         const values = Array.isArray(val) ? val : [val];
-        const hasMapOverType = values.find((entry) => !!entry.map_over_type);
-        // Match field type
-        if (currentVariant.value && variant.value && values.length > 0 && values[0]) {
+        if (variant.value && values.length > 0 && values[0]) {
             const multiple = values.length > 1;
-            const src = values[0].src;
-            // Only match field type if source differs from current field
-            if (src !== currentVariant.value.src) {
-                const filteredVariant = variant.value.findIndex((v) => v.multiple === multiple && v.src === src);
-                currentField.value = Math.max(filteredVariant, 0);
+
+            // Determine source to match variant and identify batch mode
+            let hasMapOverType: string | null = null;
+            let src: string | null = null;
+            if (isDCE.value) {
+                const option = matchOption(values[0]);
+                if (option) {
+                    hasMapOverType = option.map_over_type || null;
+                    src = option.hda ? "hda" : "hdca";
+                }
+            } else {
+                hasMapOverType = values[0].map_over_type || null;
+                src = values[0].src;
             }
+
+            // identify matching variant
+            const filteredVariant = variant.value.findIndex((v) => v.multiple === multiple && v.src === src);
+
+            // determine batch mode
+            let batch: string | null = null;
+            if (isDCE.value && variant.value[filteredVariant]) {
+                batch = variant.value[filteredVariant]?.batch || null;
+            } else {
+                // Switch to another field type if source differs from current field
+                if (currentVariant.value) {
+                    if (src !== currentVariant.value.src) {
+                        currentField.value = Math.max(filteredVariant, 0);
+                    }
+                }
+                batch = (currentVariant.value && currentVariant.value.batch) || null;
+            }
+
+            // Emit new value
+            $emit("input", {
+                batch: batch !== BATCH.DISABLED || !!hasMapOverType,
+                product: batch === BATCH.ENABLED && !currentLinked.value,
+                values: values.map((entry) => ({
+                    id: entry.id,
+                    src: entry.src,
+                    map_over_type: entry.map_over_type,
+                })),
+            });
         }
-        // Emit new value
-        $emit("input", {
-            batch: batchMode !== BATCH.DISABLED || !!hasMapOverType,
-            product: batchMode === BATCH.ENABLED && !currentLinked.value,
-            values: values.map((entry) => ({
-                id: entry.id,
-                src: entry.src,
-                map_over_type: entry.map_over_type,
-            })),
-        });
     } else {
         $emit("input", null);
     }
@@ -375,7 +406,11 @@ onMounted(() => {
     eventBus.$on("waiting", (value: boolean) => {
         waiting.value = value;
     });
-    !isDCE.value && setValue(currentValue.value);
+    if (isDCE.value && props.value && props.value.values) {
+        setValue(props.value.values);
+    } else {
+        setValue(currentValue.value);
+    }
 });
 
 /**
diff --git a/client/src/components/Form/Elements/FormData/types.ts b/client/src/components/Form/Elements/FormData/types.ts
index a271c0bba13f..05b68d4f78c6 100644
--- a/client/src/components/Form/Elements/FormData/types.ts
+++ b/client/src/components/Form/Elements/FormData/types.ts
@@ -2,6 +2,7 @@ export interface DataOption {
     id: string;
     keep: boolean;
     hid: number;
+    hda?: boolean;
     map_over_type?: string;
     name: string;
     src: string;

From f74e47367a805c7426643bbe8c9ad6c2cb98d310 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 23 Aug 2023 06:48:11 +0200
Subject: [PATCH 46/86] Remove select field type from legacy parameter factory

---
 .../components/Form/Elements/parameters.js    | 55 +------------------
 .../Form/Elements/parameters.test.js          | 13 -----
 2 files changed, 1 insertion(+), 67 deletions(-)

diff --git a/client/src/components/Form/Elements/parameters.js b/client/src/components/Form/Elements/parameters.js
index e84b31071a44..52976852d569 100644
--- a/client/src/components/Form/Elements/parameters.js
+++ b/client/src/components/Form/Elements/parameters.js
@@ -1,7 +1,6 @@
 /**
     This class creates input elements. New input parameter types should be added to the types dictionary.
 */
-import { getGalaxyInstance } from "app";
 import Backbone from "backbone";
 import DataPicker from "mvc/ui/ui-data-picker";
 import Ui from "mvc/ui/ui-misc";
@@ -13,10 +12,6 @@ import Utils from "utils/utils";
 export default Backbone.View.extend({
     /** Available parameter types */
     types: {
-        select: "_fieldSelect",
-        data_column: "_fieldSelect",
-        genomebuild: "_fieldSelect",
-        group_tag: "_fieldSelect",
         library_data: "_fieldLibrary",
         ftpfile: "_fieldFtp",
         rules: "_fieldRulesEdit",
@@ -33,7 +28,7 @@ export default Backbone.View.extend({
         var fieldClass = this.types[input_def.type];
         this.field = typeof this[fieldClass] === "function" ? this[fieldClass].call(this, input_def) : null;
         if (!this.field) {
-            this.field = input_def.options ? this._fieldSelect(input_def) : this._fieldText(input_def);
+            this.field = this._fieldText(input_def);
             console.debug("form-parameters::_addRow()", `Auto matched field type (${input_def.type}).`);
         }
         if (input_def.value === undefined) {
@@ -44,54 +39,6 @@ export default Backbone.View.extend({
         this.$el.append(this.field.$el);
     },
 
-    /** Select/Checkbox/Radio options field */
-    _fieldSelect: function (input_def) {
-        // show text field e.g. in workflow editor
-        if (input_def.is_workflow) {
-            return this._fieldText(input_def);
-        }
-        // customize properties
-        if (input_def.type == "data_column") {
-            input_def.error_text = "Missing columns in referenced dataset.";
-        }
-
-        // pick selection display
-        var classes = {
-            checkboxes: Ui.Checkbox,
-            radio: Ui.Radio,
-            radiobutton: Ui.RadioButton,
-        };
-        var SelectClass = classes[input_def.display] || Ui.Select;
-        // use Select2 fields or regular select fields in workflow launch form?
-        // check select_type_workflow_threshold option
-        const Galaxy = getGalaxyInstance();
-        var searchable = true;
-        if (input_def.flavor == "workflow") {
-            if (Galaxy.config.select_type_workflow_threshold == -1) {
-                searchable = false;
-            } else if (Galaxy.config.select_type_workflow_threshold == 0) {
-                searchable = true;
-            } else if (Galaxy.config.select_type_workflow_threshold < input_def.options.length) {
-                searchable = false;
-            }
-        }
-        return new Ui.TextSelect({
-            id: input_def.id,
-            data: input_def.data,
-            options: input_def.options,
-            display: input_def.display,
-            error_text: input_def.error_text || "No options available",
-            readonly: input_def.readonly,
-            multiple: input_def.multiple,
-            optional: input_def.optional,
-            onchange: input_def.onchange,
-            individual: input_def.individual,
-            searchable: searchable,
-            textable: input_def.textable,
-            SelectClass: SelectClass,
-        });
-    },
-
     /** Text input field */
     _fieldText: function (input_def) {
         // field replaces e.g. a select field
diff --git a/client/src/components/Form/Elements/parameters.test.js b/client/src/components/Form/Elements/parameters.test.js
index dc700bad1363..a5f8e245d1dc 100644
--- a/client/src/components/Form/Elements/parameters.test.js
+++ b/client/src/components/Form/Elements/parameters.test.js
@@ -28,17 +28,4 @@ describe("ParameterFactory", () => {
         expect(Ui.Input).toHaveBeenCalled();
         expect(Ui.TextSelect).not.toHaveBeenCalled();
     });
-
-    it("should create a SELECT parameter input when no type is specified and the input has options", async () => {
-        const input = {
-            id: "type-less parameter with options",
-            type: "",
-            value: "initial_value",
-            options: [("Option A", "a"), ("Option B", "b")],
-        };
-        const parameter = new ParameterFactory();
-        parameter.create(input);
-        expect(Ui.TextSelect).toHaveBeenCalled();
-        expect(Ui.Input).not.toHaveBeenCalled();
-    });
 });

From 5a6000ccc14acf06c135ec695ea3a345194d91fc Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 23 Aug 2023 09:11:39 +0200
Subject: [PATCH 47/86] Add unit test case

---
 .../Form/Elements/FormData/FormData.test.js   | 73 +++++++++++++++++++
 .../Form/Elements/FormData/FormData.vue       | 15 ++--
 2 files changed, 81 insertions(+), 7 deletions(-)
 create mode 100644 client/src/components/Form/Elements/FormData/FormData.test.js

diff --git a/client/src/components/Form/Elements/FormData/FormData.test.js b/client/src/components/Form/Elements/FormData/FormData.test.js
new file mode 100644
index 000000000000..cb861df394c9
--- /dev/null
+++ b/client/src/components/Form/Elements/FormData/FormData.test.js
@@ -0,0 +1,73 @@
+import { createTestingPinia } from "@pinia/testing";
+import { mount } from "@vue/test-utils";
+import { PiniaVuePlugin } from "pinia";
+import { getLocalVue } from "tests/jest/helpers";
+
+import MountTarget from "./FormData.vue";
+
+const localVue = getLocalVue();
+localVue.use(PiniaVuePlugin);
+
+function createTarget(propsData) {
+    const pinia = createTestingPinia({ stubActions: false });
+    return mount(MountTarget, {
+        localVue,
+        propsData,
+        pinia,
+        stubs: {
+            FontAwesomeIcon: true,
+        },
+    });
+}
+
+const defaultOptions = {
+    hda: [
+        { id: "hda1", hid: 1, name: "hdaName1", src: "hda" },
+        { id: "hda2", hid: 2, name: "hdaName2", src: "hda" },
+        { id: "hda3", hid: 3, name: "hdaName3", src: "hda" },
+    ],
+    hdca: [
+        { id: "hdca4", hid: 4, name: "hdcaName4", src: "hdca" },
+        { id: "hdca5", hid: 5, name: "hdcaName5", src: "hdca" },
+    ],
+};
+
+const SELECT_OPTIONS = ".multiselect__element";
+const SELECTED_VALUE = ".multiselect__option--selected span";
+
+describe("FormData", () => {
+    it("single dataset", async () => {
+        const wrapper = createTarget({
+            value: null,
+            options: defaultOptions,
+        });
+        const value_0 = {
+            batch: false,
+            product: false,
+            values: [{ id: "hda3", src: "hda", map_over_type: null }],
+        };
+        const value_1 = {
+            batch: false,
+            product: false,
+            values: [{ id: "hda1", src: "hda", map_over_type: null }],
+        };
+        const options = wrapper.find(".btn-group").findAll("button");
+        expect(options.length).toBe(4);
+        expect(options.at(0).classes()).toContain("active");
+        expect(options.at(0).attributes("title")).toBe("Single dataset");
+        expect(wrapper.emitted().input[0][0]).toEqual(value_0);
+        expect(wrapper.find(SELECTED_VALUE).text()).toEqual("3: hdaName3");
+        await wrapper.setProps({ value: value_0 });
+        expect(wrapper.emitted().input.length).toEqual(1);
+        await wrapper.setProps({ value: { values: [{ id: "hda2", src: "hda" }] } });
+        expect(wrapper.find(SELECTED_VALUE).text()).toEqual("2: hdaName2");
+        expect(wrapper.emitted().input.length).toEqual(1);
+        const elements_0 = wrapper.findAll(SELECT_OPTIONS);
+        expect(elements_0.length).toEqual(3);
+        await elements_0.at(2).find("span").trigger("click");
+        expect(wrapper.emitted().input.length).toEqual(2);
+        expect(wrapper.emitted().input[1][0]).toEqual(value_1);
+        await wrapper.setProps({ value: value_1 });
+        expect(wrapper.find(SELECTED_VALUE).text()).toEqual("1: hdaName1");
+    });
+});
diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 6451c92435c8..8a77552513b8 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -101,12 +101,13 @@ const currentValue = computed({
             }
             if (value.length > 0) {
                 return value;
-            } else if (!props.optional && formattedOptions.value.length > 0) {
-                const firstEntry = formattedOptions.value && formattedOptions.value[0];
-                if (firstEntry && firstEntry.value) {
-                    value.push(firstEntry.value);
-                    return value;
-                }
+            }
+        }
+        if (!props.optional && formattedOptions.value.length > 0) {
+            const firstEntry = formattedOptions.value && formattedOptions.value[0];
+            if (firstEntry && firstEntry.value) {
+                value.push(firstEntry.value);
+                return value;
             }
         }
         return null;
@@ -393,7 +394,7 @@ function setValue(val: Array<DataOption> | DataOption | null) {
                 values: values.map((entry) => ({
                     id: entry.id,
                     src: entry.src,
-                    map_over_type: entry.map_over_type,
+                    map_over_type: entry.map_over_type || null,
                 })),
             });
         }

From be7e2a724bf8cf4aae83e172338607efaa83f6b6 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 23 Aug 2023 10:05:32 +0200
Subject: [PATCH 48/86] Add unit test for multiple data selector

---
 .../Form/Elements/FormData/FormData.test.js   | 64 ++++++++++++++++++-
 1 file changed, 63 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.test.js b/client/src/components/Form/Elements/FormData/FormData.test.js
index cb861df394c9..7231b08fce7b 100644
--- a/client/src/components/Form/Elements/FormData/FormData.test.js
+++ b/client/src/components/Form/Elements/FormData/FormData.test.js
@@ -36,7 +36,7 @@ const SELECT_OPTIONS = ".multiselect__element";
 const SELECTED_VALUE = ".multiselect__option--selected span";
 
 describe("FormData", () => {
-    it("single dataset", async () => {
+    it("regular data", async () => {
         const wrapper = createTarget({
             value: null,
             options: defaultOptions,
@@ -70,4 +70,66 @@ describe("FormData", () => {
         await wrapper.setProps({ value: value_1 });
         expect(wrapper.find(SELECTED_VALUE).text()).toEqual("1: hdaName1");
     });
+
+    it("optional dataset", async () => {
+        const wrapper = createTarget({
+            value: null,
+            optional: true,
+            options: defaultOptions,
+        });
+        expect(wrapper.emitted().input[0][0]).toEqual(null);
+        expect(wrapper.emitted().input.length).toEqual(1);
+        expect(wrapper.find(SELECTED_VALUE).text()).toEqual("Nothing selected");
+        expect(wrapper.findAll(SELECT_OPTIONS).length).toBe(4);
+    });
+
+    it("multiple datasets", async () => {
+        const wrapper = createTarget({
+            value: {
+                values: [
+                    { id: "hda2", src: "hda" },
+                    { id: "hda3", src: "hda" },
+                ],
+            },
+            multiple: true,
+            optional: true,
+            options: defaultOptions,
+        });
+        const options = wrapper.find(".btn-group").findAll("button");
+        expect(options.length).toBe(3);
+        expect(options.at(0).classes()).toContain("active");
+        expect(options.at(0).attributes("title")).toBe("Multiple datasets");
+        expect(wrapper.emitted().input[0][0]).toEqual({
+            batch: false,
+            product: false,
+            values: [
+                { id: "hda2", map_over_type: null, src: "hda" },
+                { id: "hda3", map_over_type: null, src: "hda" },
+            ],
+        });
+        expect(wrapper.emitted().input.length).toEqual(1);
+        const selectedValues = wrapper.findAll(SELECTED_VALUE);
+        expect(selectedValues.length).toBe(2);
+        expect(selectedValues.at(0).text()).toBe("3: hdaName3");
+        expect(selectedValues.at(1).text()).toBe("2: hdaName2");
+        const value_0 = {
+            batch: false,
+            product: false,
+            values: [
+                { id: "hda2", map_over_type: null, src: "hda" },
+                { id: "hda3", map_over_type: null, src: "hda" },
+            ],
+        };
+        expect(wrapper.emitted().input[0][0]).toEqual(value_0);
+        await selectedValues.at(0).trigger("click");
+        const value_1 = { batch: false, product: false, values: [{ id: "hda2", map_over_type: null, src: "hda" }] };
+        expect(wrapper.emitted().input[1][0]).toEqual(value_1);
+        await wrapper.setProps({ value: value_1 });
+        await selectedValues.at(1).trigger("click");
+        const value_2 = { batch: false, product: false, values: [{ id: "hda2", map_over_type: null, src: "hda" }] };
+        expect(wrapper.emitted().input[1][0]).toEqual(value_2);
+        await wrapper.setProps({ value: value_2 });
+        expect(wrapper.emitted().input.length).toBe(3);
+        expect(wrapper.emitted().input[2][0]).toEqual(null);
+    });
 });

From b12477672415c2a6f78a205714e1a6da545d3ec1 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 23 Aug 2023 10:47:41 +0200
Subject: [PATCH 49/86] Generalize value handling, add dce test cases

---
 .../Form/Elements/FormData/FormData.test.js   | 40 ++++++++++++++
 .../Form/Elements/FormData/FormData.vue       | 53 ++++++++++---------
 2 files changed, 68 insertions(+), 25 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.test.js b/client/src/components/Form/Elements/FormData/FormData.test.js
index 7231b08fce7b..b2ce3cbaba2d 100644
--- a/client/src/components/Form/Elements/FormData/FormData.test.js
+++ b/client/src/components/Form/Elements/FormData/FormData.test.js
@@ -21,6 +21,11 @@ function createTarget(propsData) {
 }
 
 const defaultOptions = {
+    dce: [
+        { id: "dce1", name: "dceName1", src: "dce", hda: true },
+        { id: "dce2", name: "dceName2", src: "dce" },
+        { id: "dce3", name: "dceName3", src: "dce", map_over_type: "mapOverType" },
+    ],
     hda: [
         { id: "hda1", hid: 1, name: "hdaName1", src: "hda" },
         { id: "hda2", hid: 2, name: "hdaName2", src: "hda" },
@@ -132,4 +137,39 @@ describe("FormData", () => {
         expect(wrapper.emitted().input.length).toBe(3);
         expect(wrapper.emitted().input[2][0]).toEqual(null);
     });
+
+    it("dataset collection as hda", async () => {
+        const wrapper = createTarget({
+            value: { values: [{ id: "dce1", src: "dce" }] },
+            options: defaultOptions,
+        });
+        const value_0 = { batch: false, product: false, values: [{ id: "dce1", map_over_type: null, src: "dce" }] };
+        expect(wrapper.emitted().input[0][0]).toEqual(value_0);
+        expect(wrapper.emitted().input.length).toEqual(1);
+        const message = wrapper.findAll(".form-data-entry-label");
+        expect(message.length).toBe(1);
+        expect(message.at(0).text()).toBe("1. dceName1");
+    });
+
+    it("dataset collection as hdca", async () => {
+        const wrapper = createTarget({
+            value: { values: [{ id: "dce2", src: "dce" }] },
+            options: defaultOptions,
+        });
+        const value_0 = { batch: true, product: false, values: [{ id: "dce2", map_over_type: null, src: "dce" }] };
+        expect(wrapper.emitted().input[0][0]).toEqual(value_0);
+    });
+
+    it("dataset collection as hdca with map_over_type", async () => {
+        const wrapper = createTarget({
+            value: { values: [{ id: "dce3", src: "dce" }] },
+            options: defaultOptions,
+        });
+        const value_0 = {
+            batch: true,
+            product: false,
+            values: [{ id: "dce3", map_over_type: "mapOverType", src: "dce" }],
+        };
+        expect(wrapper.emitted().input[0][0]).toEqual(value_0);
+    });
 });
diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 8a77552513b8..af056d154927 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -185,7 +185,7 @@ const formattedOptions = computed(() => {
  * Dataset collection elements should be treated as plain values.
  */
 const isDCE = computed(() => {
-    if (props.value) {
+    if (props.value && props.value.values.length > 0) {
         return props.value.values.findIndex((v) => v.src !== SOURCE.COLLECTION_ELEMENT) === -1;
     } else {
         return false;
@@ -354,37 +354,33 @@ function setValue(val: Array<DataOption> | DataOption | null) {
     if (val) {
         const values = Array.isArray(val) ? val : [val];
         if (variant.value && values.length > 0 && values[0]) {
-            const multiple = values.length > 1;
+            const hasMapOverType = values.find((v) => !!v.map_over_type);
+            const isMultiple = values.length > 1;
 
-            // Determine source to match variant and identify batch mode
-            let hasMapOverType: string | null = null;
-            let src: string | null = null;
+            // Determine source representation
+            let sourceType: string | null = null;
             if (isDCE.value) {
-                const option = matchOption(values[0]);
-                if (option) {
-                    hasMapOverType = option.map_over_type || null;
-                    src = option.hda ? "hda" : "hdca";
-                }
+                sourceType = values[0].hda ? SOURCE.DATASET : SOURCE.COLLECTION;
             } else {
-                hasMapOverType = values[0].map_over_type || null;
-                src = values[0].src;
+                sourceType = values[0].src;
             }
 
-            // identify matching variant
-            const filteredVariant = variant.value.findIndex((v) => v.multiple === multiple && v.src === src);
+            // Identify matching variant
+            const variantIndex = variant.value.findIndex((v) => v.multiple === isMultiple && v.src === sourceType);
 
-            // determine batch mode
-            let batch: string | null = null;
-            if (isDCE.value && variant.value[filteredVariant]) {
-                batch = variant.value[filteredVariant]?.batch || null;
-            } else {
-                // Switch to another field type if source differs from current field
-                if (currentVariant.value) {
-                    if (src !== currentVariant.value.src) {
-                        currentField.value = Math.max(filteredVariant, 0);
+            // Determine batch mode
+            let batch: string = BATCH.DISABLED;
+            if (variantIndex >= 0) {
+                const variantDetails = variant.value[variantIndex];
+                if (isDCE.value && variantDetails && variantDetails.batch) {
+                    batch = variantDetails.batch;
+                } else {
+                    // Switch to another field type if source differs from current field
+                    if (currentVariant.value && currentVariant.value.src !== sourceType) {
+                        currentField.value = variantIndex;
                     }
+                    batch = (currentVariant.value && currentVariant.value.batch) || BATCH.DISABLED;
                 }
-                batch = (currentVariant.value && currentVariant.value.batch) || null;
             }
 
             // Emit new value
@@ -408,7 +404,14 @@ onMounted(() => {
         waiting.value = value;
     });
     if (isDCE.value && props.value && props.value.values) {
-        setValue(props.value.values);
+        const dceValues: Array<DataOption> = [];
+        props.value.values.forEach((val) => {
+            const matchedVal = matchOption(val);
+            if (matchedVal) {
+                dceValues.push(matchedVal);
+            }
+        });
+        setValue(dceValues);
     } else {
         setValue(currentValue.value);
     }

From 72f7a424d60be2f4808c6d2e2fd7a11c182ff6c2 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 23 Aug 2023 12:01:42 +0200
Subject: [PATCH 50/86] Add test case for multiple dataset collection element
 handling

---
 .../Form/Elements/FormData/FormData.test.js   | 26 ++++++++++++++++++-
 .../Form/Elements/FormData/FormData.vue       | 23 ++++++++++------
 2 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.test.js b/client/src/components/Form/Elements/FormData/FormData.test.js
index b2ce3cbaba2d..9301175cb4be 100644
--- a/client/src/components/Form/Elements/FormData/FormData.test.js
+++ b/client/src/components/Form/Elements/FormData/FormData.test.js
@@ -149,9 +149,12 @@ describe("FormData", () => {
         const message = wrapper.findAll(".form-data-entry-label");
         expect(message.length).toBe(1);
         expect(message.at(0).text()).toBe("1. dceName1");
+        const closeButton = wrapper.find(".alert .close");
+        await closeButton.trigger("click");
+        expect(wrapper.emitted().input[1][0]).toEqual(null);
     });
 
-    it("dataset collection as hdca", async () => {
+    it("dataset collection as hdca without map_over_type", async () => {
         const wrapper = createTarget({
             value: { values: [{ id: "dce2", src: "dce" }] },
             options: defaultOptions,
@@ -172,4 +175,25 @@ describe("FormData", () => {
         };
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
     });
+
+    it("multiple dataset collection values with varying map_over_type", async () => {
+        const wrapper = createTarget({
+            value: {
+                values: [
+                    { id: "dce2", src: "dce" },
+                    { id: "dce3", src: "dce" },
+                ],
+            },
+            options: defaultOptions,
+        });
+        const value_0 = {
+            batch: true,
+            product: false,
+            values: [
+                { id: "dce2", map_over_type: null, src: "dce" },
+                { id: "dce3", map_over_type: "mapOverType", src: "dce" },
+            ],
+        };
+        expect(wrapper.emitted().input[0][0]).toEqual(value_0);
+    });
 });
diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index af056d154927..a683adbef9c7 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -291,6 +291,20 @@ function matchName(entry: DataOption) {
     return option?.name || entry.id;
 }
 
+/**
+ * Matches an array of values to available options
+ */
+function matchValues(entries: Array<DataOption>) {
+    const values: Array<DataOption> = [];
+    entries.forEach((val) => {
+        const option = matchOption(val);
+        if (option) {
+            values.push(option);
+        }
+    });
+    return values;
+}
+
 /**
  * Open file dialog
  */
@@ -404,14 +418,7 @@ onMounted(() => {
         waiting.value = value;
     });
     if (isDCE.value && props.value && props.value.values) {
-        const dceValues: Array<DataOption> = [];
-        props.value.values.forEach((val) => {
-            const matchedVal = matchOption(val);
-            if (matchedVal) {
-                dceValues.push(matchedVal);
-            }
-        });
-        setValue(dceValues);
+        setValue(matchValues(props.value.values));
     } else {
         setValue(currentValue.value);
     }

From 578781d176205c40b09a730844cf4d87ad369257 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 23 Aug 2023 12:42:36 +0200
Subject: [PATCH 51/86] Add basic drag/drop tests, adjust file browser behavior

---
 .../ActivityBar/ActivityBar.test.js           | 10 ++-----
 .../Form/Elements/FormData/FormData.test.js   | 30 ++++++++++++++++++-
 .../Form/Elements/FormData/FormData.vue       | 12 +++-----
 client/tests/jest/helpers.js                  |  6 ++++
 4 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.test.js b/client/src/components/ActivityBar/ActivityBar.test.js
index 9f3e7e9b12b9..7dce1ce3fb29 100644
--- a/client/src/components/ActivityBar/ActivityBar.test.js
+++ b/client/src/components/ActivityBar/ActivityBar.test.js
@@ -1,7 +1,7 @@
 import { createTestingPinia } from "@pinia/testing";
 import { shallowMount } from "@vue/test-utils";
 import { PiniaVuePlugin } from "pinia";
-import { getLocalVue } from "tests/jest/helpers";
+import { dispatchEvent, getLocalVue } from "tests/jest/helpers";
 
 import { useConfig } from "@/composables/config";
 import { useActivityStore } from "@/stores/activityStore";
@@ -37,12 +37,6 @@ function testActivity(id, newOptions = {}) {
     return { ...defaultOptions, ...newOptions };
 }
 
-const createBubbledEvent = (type, props = {}) => {
-    const event = new Event(type, { bubbles: true });
-    Object.assign(event, props);
-    return event;
-};
-
 describe("ActivityBar", () => {
     let activityStore;
     let eventStore;
@@ -74,7 +68,7 @@ describe("ActivityBar", () => {
             name: "workflow-name",
         });
         const bar = wrapper.find("[data-description='activity bar']");
-        bar.element.dispatchEvent(createBubbledEvent("dragenter", { clientX: 0, clientY: 0 }));
+        dispatchEvent(bar, "dragenter");
         const emittedEvent = wrapper.emitted()["dragstart"][0][0];
         expect(emittedEvent.to).toBe("/workflows/run?id=workflow-id");
     });
diff --git a/client/src/components/Form/Elements/FormData/FormData.test.js b/client/src/components/Form/Elements/FormData/FormData.test.js
index 9301175cb4be..c77f3dd02682 100644
--- a/client/src/components/Form/Elements/FormData/FormData.test.js
+++ b/client/src/components/Form/Elements/FormData/FormData.test.js
@@ -1,15 +1,20 @@
 import { createTestingPinia } from "@pinia/testing";
 import { mount } from "@vue/test-utils";
 import { PiniaVuePlugin } from "pinia";
-import { getLocalVue } from "tests/jest/helpers";
+import { dispatchEvent, getLocalVue } from "tests/jest/helpers";
+
+import { useEventStore } from "@/stores/eventStore";
 
 import MountTarget from "./FormData.vue";
 
 const localVue = getLocalVue();
 localVue.use(PiniaVuePlugin);
 
+let eventStore;
+
 function createTarget(propsData) {
     const pinia = createTestingPinia({ stubActions: false });
+    eventStore = useEventStore();
     return mount(MountTarget, {
         localVue,
         propsData,
@@ -196,4 +201,27 @@ describe("FormData", () => {
         };
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
     });
+
+    it("dropping values", async () => {
+        const wrapper = createTarget({
+            value: null,
+            options: defaultOptions,
+        });
+        eventStore.setDragData({ id: "hdca4", history_content_type: "dataset_collection" });
+        dispatchEvent(wrapper, "dragenter");
+        dispatchEvent(wrapper, "drop");
+        expect(wrapper.emitted().input[1][0]).toEqual({
+            batch: true,
+            product: false,
+            values: [{ id: "hdca4", map_over_type: null, src: "hdca" }],
+        });
+        eventStore.setDragData({ id: "hda2", history_content_type: "dataset" });
+        dispatchEvent(wrapper, "dragenter");
+        dispatchEvent(wrapper, "drop");
+        expect(wrapper.emitted().input[2][0]).toEqual({
+            batch: false,
+            product: false,
+            values: [{ id: "hda2", map_over_type: null, src: "hda" }],
+        });
+    });
 });
diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index a683adbef9c7..234b68b5ef08 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -309,9 +309,9 @@ function matchValues(entries: Array<DataOption>) {
  * Open file dialog
  */
 function onBrowse() {
-    if (variant.value) {
-        const library = !!variant.value.find((v) => v.library);
-        const multiple = !!variant.value.find((v) => v.multiple);
+    if (currentVariant.value) {
+        const library = currentVariant.value.library;
+        const multiple = currentVariant.value.multiple;
         getGalaxyInstance().data.dialog(
             (response: Record<string, unknown>) => {
                 handleIncoming(response, false);
@@ -349,10 +349,7 @@ function onDragOver() {
     }
 }
 
-/**
- * Insert the dragged item into the activities list
- */
-function onDrop(evt: MouseEvent) {
+function onDrop() {
     if (dragData.value) {
         handleIncoming(dragData.value);
         currentHighlighting.value = "success";
@@ -472,7 +469,6 @@ watch(
                 <FormSelect
                     v-if="currentVariant"
                     v-model="currentValue"
-                    class="w-100"
                     :multiple="currentVariant.multiple"
                     :optional="optional"
                     :options="formattedOptions"
diff --git a/client/tests/jest/helpers.js b/client/tests/jest/helpers.js
index 927c2cb71b21..2396578fe7e5 100644
--- a/client/tests/jest/helpers.js
+++ b/client/tests/jest/helpers.js
@@ -15,6 +15,12 @@ import { PiniaVuePlugin } from "pinia";
 
 const defaultComparator = (a, b) => a == b;
 
+export function dispatchEvent(wrapper, type, props = {}) {
+    const event = new Event(type, { bubbles: true });
+    Object.assign(event, props);
+    wrapper.element.dispatchEvent(event);
+}
+
 export function findViaNavigation(wrapper, component) {
     return wrapper.find(component.selector);
 }

From 78d4e333bb2688a354d050b0d8855b00eebfc05c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 23 Aug 2023 13:38:25 +0200
Subject: [PATCH 52/86] Fix select field word break and overflow behavior

---
 client/src/components/Form/Elements/FormSelect.vue | 8 --------
 client/src/components/Upload/UploadSelect.vue      | 2 ++
 client/src/style/scss/multiselect.scss             | 6 ++++--
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index d3605e087cfc..622ed461a08a 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -39,13 +39,6 @@ const emit = defineEmits<{
     (e: "input", value: SelectValue | Array<SelectValue>): void;
 }>();
 
-/**
- * Determine dom wrapper class
- */
-const cls: ComputedRef<string> = computed(() => {
-    return props.multiple ? "form-select-multiple" : "form-select-single";
-});
-
 /**
  * Configure deselect label
  */
@@ -136,7 +129,6 @@ onMounted(() => {
         v-model="currentValue"
         :allow-empty="multiple && optional"
         :aria-expanded="ariaExpanded"
-        :class="['form-select', cls]"
         :close-on-select="!multiple"
         :disabled="disabled"
         :deselect-label="deselectLabel"
diff --git a/client/src/components/Upload/UploadSelect.vue b/client/src/components/Upload/UploadSelect.vue
index 36d36878f326..847fc160f4d0 100644
--- a/client/src/components/Upload/UploadSelect.vue
+++ b/client/src/components/Upload/UploadSelect.vue
@@ -97,6 +97,8 @@ const currentValue = computed({
         margin: 0px;
         padding: 0px;
         .multiselect__single {
+            text-overflow: ellipsis;
+            white-space: nowrap;
             width: 130px;
         }
     }
diff --git a/client/src/style/scss/multiselect.scss b/client/src/style/scss/multiselect.scss
index f24dcdce59bd..cafc6647eb9f 100644
--- a/client/src/style/scss/multiselect.scss
+++ b/client/src/style/scss/multiselect.scss
@@ -21,6 +21,8 @@
     }
     .multiselect__tag {
         min-height: 0;
+        white-space: normal;
+        word-break: break-all;
     }
     .multiselect__tags {
         background: transparent;
@@ -31,8 +33,8 @@
             color: $text-color;
             font-size: $font-size-base;
             overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+            white-space: normal;
+            word-break: break-all;
         }
     }
 }

From 26042352af65f4b4014c45d3cefc66c33175b022 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 23 Aug 2023 14:05:11 +0200
Subject: [PATCH 53/86] Fix and add test case for linked/unlinked batch mode
 selection

---
 .../Form/Elements/FormData/FormData.test.js   | 35 +++++++++++++++++++
 .../Form/Elements/FormData/FormData.vue       |  6 ++--
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.test.js b/client/src/components/Form/Elements/FormData/FormData.test.js
index c77f3dd02682..cb6254395305 100644
--- a/client/src/components/Form/Elements/FormData/FormData.test.js
+++ b/client/src/components/Form/Elements/FormData/FormData.test.js
@@ -224,4 +224,39 @@ describe("FormData", () => {
             values: [{ id: "hda2", map_over_type: null, src: "hda" }],
         });
     });
+
+    it("linked and unlinked batch mode handling", async () => {
+        const wrapper = createTarget({
+            value: null,
+            flavor: "module",
+            options: defaultOptions,
+        });
+        expect(wrapper.emitted().input[0][0]).toEqual({
+            batch: false,
+            product: false,
+            values: [{ id: "hda3", map_over_type: null, src: "hda" }],
+        });
+        const noCheckLinked = wrapper.find("input[type='checkbox']");
+        expect(noCheckLinked.exists()).toBeFalsy();
+        await wrapper.find("[title='Multiple datasets'").trigger("click");
+        expect(wrapper.emitted().input[1][0]).toEqual({
+            batch: true,
+            product: false,
+            values: [{ id: "hda3", map_over_type: null, src: "hda" }],
+        });
+        const checkLinked = wrapper.find("input[type='checkbox']");
+        expect(wrapper.find(".custom-switch span").text()).toBe(
+            "Linked: Datasets will be run in matched order with other datasets."
+        );
+        expect(checkLinked.element.checked).toBeTruthy();
+        await checkLinked.setChecked(false);
+        expect(wrapper.find(".custom-switch span").text()).toBe(
+            "Unlinked: Dataset will be run against *all* other datasets."
+        );
+        expect(wrapper.emitted().input[2][0]).toEqual({
+            batch: true,
+            product: true,
+            values: [{ id: "hda3", map_over_type: null, src: "hda" }],
+        });
+    });
 });
diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 234b68b5ef08..5234b6577d5b 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -425,7 +425,7 @@ onMounted(() => {
  * Watch and set current value if user switches to a different select field
  */
 watch(
-    () => currentVariant.value,
+    () => [currentLinked.value, currentVariant.value],
     () => {
         setValue(currentValue.value);
     }
@@ -480,11 +480,11 @@ watch(
                     v-model="currentLinked"
                     class="no-highlight my-2"
                     switch>
-                    <div v-if="currentLinked">
+                    <span v-if="currentLinked">
                         <FontAwesomeIcon icon="fa-link" />
                         <b v-localize class="mr-1">Linked:</b>
                         <span v-localize>Datasets will be run in matched order with other datasets.</span>
-                    </div>
+                    </span>
                     <span v-else>
                         <FontAwesomeIcon icon="fa-unlink" />
                         <b v-localize class="mr-1">Unlinked:</b>

From 4fa7a099d266d3d81184af0f30abf6a15774c9fa Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 23 Aug 2023 15:23:14 +0200
Subject: [PATCH 54/86] Add consistent support for ldda's, should probably
 re-consider this use case

---
 .../Form/Elements/FormData/FormData.test.js   |  2 +-
 .../Form/Elements/FormData/FormData.vue       | 29 +++++++++++++------
 .../Form/Elements/FormData/variants.ts        |  2 +-
 lib/galaxy/tools/parameters/basic.py          | 23 ++++++++++++++-
 lib/galaxy_test/selenium/test_tool_form.py    |  2 +-
 5 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.test.js b/client/src/components/Form/Elements/FormData/FormData.test.js
index cb6254395305..6a2d9ef8ce85 100644
--- a/client/src/components/Form/Elements/FormData/FormData.test.js
+++ b/client/src/components/Form/Elements/FormData/FormData.test.js
@@ -153,7 +153,7 @@ describe("FormData", () => {
         expect(wrapper.emitted().input.length).toEqual(1);
         const message = wrapper.findAll(".form-data-entry-label");
         expect(message.length).toBe(1);
-        expect(message.at(0).text()).toBe("1. dceName1");
+        expect(message.at(0).text()).toBe("1. dceName1 (dce)");
         const closeButton = wrapper.find(".alert .close");
         await closeButton.trigger("click");
         expect(wrapper.emitted().input[1][0]).toEqual(null);
diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 5234b6577d5b..821c49fd78e4 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -191,7 +191,13 @@ const isDCE = computed(() => {
         return false;
     }
 });
-
+const isLDDA = computed(() => {
+    if (props.value && props.value.values.length > 0) {
+        return props.value.values.findIndex((v) => v.src !== SOURCE.LIBRARY_DATASET) === -1;
+    } else {
+        return false;
+    }
+});
 /**
  * Provides placeholder label for select field
  */
@@ -228,7 +234,8 @@ function handleIncoming(incoming: Record<string, unknown>, partial = true) {
                 const newHid = v.hid;
                 const newId = v.id;
                 const newName = v.name ? v.name : newId;
-                const newSrc = v.history_content_type === "dataset_collection" ? SOURCE.COLLECTION : SOURCE.DATASET;
+                const newSrc =
+                    v.src || (v.history_content_type === "dataset_collection" ? SOURCE.COLLECTION : SOURCE.DATASET);
                 const newValue = {
                     id: newId,
                     src: newSrc,
@@ -288,7 +295,9 @@ function matchOption(entry: DataOption) {
  */
 function matchName(entry: DataOption) {
     const option = matchOption(entry);
-    return option?.name || entry.id;
+    const name = option?.name || entry.id;
+    const src = option?.src || "unknown";
+    return `${name} (${src})`;
 }
 
 /**
@@ -310,8 +319,8 @@ function matchValues(entries: Array<DataOption>) {
  */
 function onBrowse() {
     if (currentVariant.value) {
-        const library = currentVariant.value.library;
-        const multiple = currentVariant.value.multiple;
+        const library = !!currentVariant.value.library;
+        const multiple = !!currentVariant.value.multiple;
         getGalaxyInstance().data.dialog(
             (response: Record<string, unknown>) => {
                 handleIncoming(response, false);
@@ -372,6 +381,8 @@ function setValue(val: Array<DataOption> | DataOption | null) {
             let sourceType: string | null = null;
             if (isDCE.value) {
                 sourceType = values[0].hda ? SOURCE.DATASET : SOURCE.COLLECTION;
+            } else if (isLDDA.value) {
+                sourceType = SOURCE.DATASET;
             } else {
                 sourceType = values[0].src;
             }
@@ -383,7 +394,7 @@ function setValue(val: Array<DataOption> | DataOption | null) {
             let batch: string = BATCH.DISABLED;
             if (variantIndex >= 0) {
                 const variantDetails = variant.value[variantIndex];
-                if (isDCE.value && variantDetails && variantDetails.batch) {
+                if ((isLDDA.value || isDCE.value) && variantDetails && variantDetails.batch) {
                     batch = variantDetails.batch;
                 } else {
                     // Switch to another field type if source differs from current field
@@ -414,7 +425,7 @@ onMounted(() => {
     eventBus.$on("waiting", (value: boolean) => {
         waiting.value = value;
     });
-    if (isDCE.value && props.value && props.value.values) {
+    if ((isLDDA.value || isDCE.value) && props.value && props.value.values) {
         setValue(matchValues(props.value.values));
     } else {
         setValue(currentValue.value);
@@ -439,10 +450,10 @@ watch(
         @dragleave.prevent="onDragLeave"
         @dragover.prevent="onDragOver"
         @drop.prevent="onDrop">
-        <b-alert v-if="isDCE" variant="info" dismissible show @dismissed="currentValue = null">
+        <b-alert v-if="isDCE || isLDDA" variant="info" dismissible show @dismissed="$emit('input', null)">
             <span v-localize class="font-weight-bold">Using the following datasets (dismiss to reset):</span>
             <div v-for="(v, vIndex) of props.value.values" :key="vIndex">
-                <span class="form-data-entry-label ml-2">{{ vIndex + 1 }}. {{ matchName(v) || v.id }}</span>
+                <span class="form-data-entry-label ml-2">{{ vIndex + 1 }}. {{ matchName(v) }}</span>
             </div>
         </b-alert>
         <div v-else>
diff --git a/client/src/components/Form/Elements/FormData/variants.ts b/client/src/components/Form/Elements/FormData/variants.ts
index dd46804fe8a7..1b73712514fe 100644
--- a/client/src/components/Form/Elements/FormData/variants.ts
+++ b/client/src/components/Form/Elements/FormData/variants.ts
@@ -12,7 +12,7 @@ interface VariantInterface {
 export const BATCH = { DISABLED: "disabled", ENABLED: "enabled", LINKED: "linked" };
 
 /** Data source variations */
-export const SOURCE = { DATASET: "hda", COLLECTION: "hdca", COLLECTION_ELEMENT: "dce" };
+export const SOURCE = { DATASET: "hda", COLLECTION: "hdca", COLLECTION_ELEMENT: "dce", LIBRARY_DATASET: "ldda" };
 
 /** List of available data input variations */
 export const VARIANTS: Record<string, Array<VariantInterface>> = {
diff --git a/lib/galaxy/tools/parameters/basic.py b/lib/galaxy/tools/parameters/basic.py
index 26bbe51a9487..6fb7406c72d5 100644
--- a/lib/galaxy/tools/parameters/basic.py
+++ b/lib/galaxy/tools/parameters/basic.py
@@ -2137,6 +2137,9 @@ def from_json(self, value, trans, other_values=None):
         elif isinstance(value, (HistoryDatasetAssociation, LibraryDatasetDatasetAssociation)):
             rval.append(value)
         elif isinstance(value, dict) and "src" in value and "id" in value:
+            if value["src"] == "ldda":
+                decoded_id = trans.security.decode_id(value["id"])
+                rval.append(trans.sa_session.query(LibraryDatasetDatasetAssociation).get(decoded_id))
             if value["src"] == "hda":
                 decoded_id = trans.security.decode_id(value["id"])
                 rval.append(trans.sa_session.query(HistoryDatasetAssociation).get(decoded_id))
@@ -2272,7 +2275,7 @@ def to_dict(self, trans, other_values=None):
             # For consistency, should these just always be in the dict?
             d["min"] = self.min
             d["max"] = self.max
-        d["options"] = {"dce": [], "hda": [], "hdca": []}
+        d["options"] = {"dce": [], "ldda": [], "hda": [], "hdca": []}
         d["tag"] = self.tag
 
         # return dictionary without options if context is unavailable
@@ -2311,11 +2314,27 @@ def append_dce(dce):
                 }
             )
 
+        def append_ldda(ldda):
+            d["options"]["ldda"].append(
+                {
+                    "id": trans.security.encode_id(ldda.id),
+                    "name": ldda.name,
+                    "src": "ldda",
+                    "tags": [],
+                    "keep": True,
+                }
+            )
+
         # append DCE
         if isinstance(other_values.get(self.name), DatasetCollectionElement):
             dce = other_values[self.name]
             append_dce(dce)
 
+        # append LDDA
+        if isinstance(other_values.get(self.name), LibraryDatasetDatasetAssociation):
+            ldda = other_values[self.name]
+            append_ldda(ldda)
+
         # add datasets
         hda_list = util.listify(other_values.get(self.name))
         # Prefetch all at once, big list of visible, non-deleted datasets.
@@ -2337,6 +2356,8 @@ def append_dce(dce):
                 append(d["options"]["hda"], hda, f"({hda_state}) {hda.name}", "hda", True)
             elif isinstance(hda, DatasetCollectionElement):
                 append_dce(hda)
+            elif isinstance(hda, LibraryDatasetDatasetAssociation):
+                append_ldda(hda)
 
         # add dataset collections
         dataset_collection_matcher = dataset_matcher_factory.dataset_collection_matcher(dataset_matcher)
diff --git a/lib/galaxy_test/selenium/test_tool_form.py b/lib/galaxy_test/selenium/test_tool_form.py
index cf526c3fbcd2..091ef71f5b5e 100644
--- a/lib/galaxy_test/selenium/test_tool_form.py
+++ b/lib/galaxy_test/selenium/test_tool_form.py
@@ -243,7 +243,7 @@ def test_rerun_dataset_collection_element(self):
         self.hda_click_primary_action_button(1, "rerun")
         self.sleep_for(self.wait_types.UX_RENDER)
         entry_label = self.components.tool_form.parameter_data_entry_label(parameter="input1").wait_for_visible()
-        assert entry_label.text == "1. test0"
+        assert entry_label.text == "1. test0 (dce)"
         self.tool_form_execute()
         self.components.history_panel.collection_view.back_to_history.wait_for_and_click()
         self.history_panel_wait_for_hid_ok(9)

From c54328c5fe841583fdb17c083e37031d08954cb9 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 23 Aug 2023 19:12:29 +0200
Subject: [PATCH 55/86] Resize alert

---
 client/src/components/Form/Elements/FormSelect.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index 622ed461a08a..566b67a75e63 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -141,5 +141,5 @@ onMounted(() => {
         track-by="value"
         @open="onOpen"
         @close="onClose" />
-    <b-alert v-else v-localize variant="warning" show> No options available. </b-alert>
+    <b-alert v-else v-localize class="w-100" variant="warning" show> No options available. </b-alert>
 </template>

From 3a8a4f3c22242e5b6997ded4eac5faf8bc9ef6f0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 23 Aug 2023 19:37:20 +0200
Subject: [PATCH 56/86] Watch option changes

---
 .../Form/Elements/FormData/FormData.vue       | 21 ++++++++++++-------
 lib/galaxy_test/selenium/test_tool_form.py    |  2 +-
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 821c49fd78e4..d79052f8d82c 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -276,6 +276,17 @@ function handleIncoming(incoming: Record<string, unknown>, partial = true) {
     }
 }
 
+/**
+ * Set initial value
+ */
+function initialValue() {
+    if ((isLDDA.value || isDCE.value) && props.value && props.value.values) {
+        setValue(matchValues(props.value.values));
+    } else {
+        setValue(currentValue.value);
+    }
+}
+
 /**
  * Matches entries to available options
  */
@@ -425,20 +436,16 @@ onMounted(() => {
     eventBus.$on("waiting", (value: boolean) => {
         waiting.value = value;
     });
-    if ((isLDDA.value || isDCE.value) && props.value && props.value.values) {
-        setValue(matchValues(props.value.values));
-    } else {
-        setValue(currentValue.value);
-    }
+    initialValue();
 });
 
 /**
  * Watch and set current value if user switches to a different select field
  */
 watch(
-    () => [currentLinked.value, currentVariant.value],
+    () => [props.options, currentLinked.value, currentVariant.value],
     () => {
-        setValue(currentValue.value);
+        initialValue();
     }
 );
 </script>
diff --git a/lib/galaxy_test/selenium/test_tool_form.py b/lib/galaxy_test/selenium/test_tool_form.py
index 091ef71f5b5e..43f6f7f07b5c 100644
--- a/lib/galaxy_test/selenium/test_tool_form.py
+++ b/lib/galaxy_test/selenium/test_tool_form.py
@@ -200,7 +200,7 @@ def test_rerun_deleted_dataset(self):
         error_input1 = self.components.tool_form.parameter_error(parameter="input1").wait_for_visible()
         error_col = self.components.tool_form.parameter_error(parameter="col").wait_for_visible()
         error_col_names = self.components.tool_form.parameter_error(parameter="col_names").wait_for_visible()
-        assert error_input1.text == "parameter 'input1': specify a dataset of the required format / build for parameter"
+        assert error_input1.text == "Please provide a value for this option."
         assert error_col.text == "parameter 'col': requires a value, but no legal values defined"
         assert error_col_names.text == "parameter 'col_names': requires a value, but no legal values defined"
         # validate warnings when inputs are restored

From b8b70848a2837648ba0a581ceeef5bc6a9c49981 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 30 Aug 2023 08:38:20 +0300
Subject: [PATCH 57/86] Use boolean is_dataset for dce's instead of dce.hda

---
 client/src/components/Form/Elements/FormData/FormData.test.js | 2 +-
 client/src/components/Form/Elements/FormData/FormData.vue     | 2 +-
 client/src/components/Form/Elements/FormData/types.ts         | 2 +-
 lib/galaxy/tools/parameters/basic.py                          | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.test.js b/client/src/components/Form/Elements/FormData/FormData.test.js
index 6a2d9ef8ce85..397547fa60ec 100644
--- a/client/src/components/Form/Elements/FormData/FormData.test.js
+++ b/client/src/components/Form/Elements/FormData/FormData.test.js
@@ -27,7 +27,7 @@ function createTarget(propsData) {
 
 const defaultOptions = {
     dce: [
-        { id: "dce1", name: "dceName1", src: "dce", hda: true },
+        { id: "dce1", name: "dceName1", src: "dce", is_dataset: true },
         { id: "dce2", name: "dceName2", src: "dce" },
         { id: "dce3", name: "dceName3", src: "dce", map_over_type: "mapOverType" },
     ],
diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index d79052f8d82c..acbc39e65d84 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -391,7 +391,7 @@ function setValue(val: Array<DataOption> | DataOption | null) {
             // Determine source representation
             let sourceType: string | null = null;
             if (isDCE.value) {
-                sourceType = values[0].hda ? SOURCE.DATASET : SOURCE.COLLECTION;
+                sourceType = values[0].is_dataset ? SOURCE.DATASET : SOURCE.COLLECTION;
             } else if (isLDDA.value) {
                 sourceType = SOURCE.DATASET;
             } else {
diff --git a/client/src/components/Form/Elements/FormData/types.ts b/client/src/components/Form/Elements/FormData/types.ts
index 05b68d4f78c6..95a1c6b8002a 100644
--- a/client/src/components/Form/Elements/FormData/types.ts
+++ b/client/src/components/Form/Elements/FormData/types.ts
@@ -1,8 +1,8 @@
 export interface DataOption {
     id: string;
+    is_dataset?: boolean;
     keep: boolean;
     hid: number;
-    hda?: boolean;
     map_over_type?: string;
     name: string;
     src: string;
diff --git a/lib/galaxy/tools/parameters/basic.py b/lib/galaxy/tools/parameters/basic.py
index 6fb7406c72d5..ae0598d8acdf 100644
--- a/lib/galaxy/tools/parameters/basic.py
+++ b/lib/galaxy/tools/parameters/basic.py
@@ -2307,7 +2307,7 @@ def append_dce(dce):
                 {
                     "id": trans.security.encode_id(dce.id),
                     "name": dce.element_identifier,
-                    "hda": dce.hda,
+                    "is_dataset": dce.hda is not None,
                     "src": "dce",
                     "tags": [],
                     "keep": True,

From ea145081019ace628fc6a7f9855e9db23267da00 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 27 Aug 2023 10:56:29 +0200
Subject: [PATCH 58/86] Remove unused legacy input element variations

---
 .../components/Form/Elements/parameters.js    | 47 -------------------
 client/src/components/Form/FormElement.vue    |  6 +--
 client/src/components/Form/FormInputs.vue     |  2 -
 .../Workflow/Editor/Forms/FormOutput.vue      |  6 ---
 4 files changed, 2 insertions(+), 59 deletions(-)

diff --git a/client/src/components/Form/Elements/parameters.js b/client/src/components/Form/Elements/parameters.js
index 52976852d569..ce1e5c77306c 100644
--- a/client/src/components/Form/Elements/parameters.js
+++ b/client/src/components/Form/Elements/parameters.js
@@ -3,10 +3,8 @@
 */
 import Backbone from "backbone";
 import DataPicker from "mvc/ui/ui-data-picker";
-import Ui from "mvc/ui/ui-misc";
 import SelectFtp from "mvc/ui/ui-select-ftp";
 import SelectLibrary from "mvc/ui/ui-select-library";
-import Utils from "utils/utils";
 
 // create form view
 export default Backbone.View.extend({
@@ -14,7 +12,6 @@ export default Backbone.View.extend({
     types: {
         library_data: "_fieldLibrary",
         ftpfile: "_fieldFtp",
-        rules: "_fieldRulesEdit",
         data_dialog: "_fieldDialog",
     },
 
@@ -27,10 +24,6 @@ export default Backbone.View.extend({
     create: function (input_def) {
         var fieldClass = this.types[input_def.type];
         this.field = typeof this[fieldClass] === "function" ? this[fieldClass].call(this, input_def) : null;
-        if (!this.field) {
-            this.field = this._fieldText(input_def);
-            console.debug("form-parameters::_addRow()", `Auto matched field type (${input_def.type}).`);
-        }
         if (input_def.value === undefined) {
             input_def.value = null;
         }
@@ -39,46 +32,6 @@ export default Backbone.View.extend({
         this.$el.append(this.field.$el);
     },
 
-    /** Text input field */
-    _fieldText: function (input_def) {
-        // field replaces e.g. a select field
-        const inputClass = input_def.optional && input_def.type === "select" ? Ui.NullableText : Ui.Input;
-        if (
-            ["SelectTagParameter", "ColumnListParameter"].includes(input_def.model_class) ||
-            (input_def.options && input_def.data)
-        ) {
-            input_def.area = input_def.multiple;
-            if (Utils.isEmpty(input_def.value)) {
-                input_def.value = null;
-            } else {
-                if (Array.isArray(input_def.value)) {
-                    var str_value = "";
-                    for (var i in input_def.value) {
-                        str_value += String(input_def.value[i]);
-                        if (!input_def.multiple) {
-                            break;
-                        }
-                        str_value += "\n";
-                    }
-                    input_def.value = str_value;
-                }
-            }
-        }
-        // create input element
-        return new inputClass({
-            id: input_def.id,
-            type: input_def.type,
-            area: input_def.area,
-            readonly: input_def.readonly,
-            color: input_def.color,
-            style: input_def.style,
-            placeholder: input_def.placeholder,
-            datalist: input_def.datalist,
-            onchange: input_def.onchange,
-            value: input_def.value,
-        });
-    },
-
     /** Data dialog picker field */
     _fieldDialog: function (input_def) {
         return new DataPicker({
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index 67751d579f07..2d32b53bf682 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -34,7 +34,6 @@ interface FormElementProps {
     help?: string;
     error?: string;
     warning?: string;
-    backbonejs?: boolean;
     disabled?: boolean;
     attributes?: FormParameterAttributes;
     collapsedEnableText?: string;
@@ -51,7 +50,6 @@ interface FormElementProps {
 const props = withDefaults(defineProps<FormElementProps>(), {
     id: "identifier",
     refreshOnChange: false,
-    backbonejs: false,
     disabled: false,
     collapsedEnableText: "Enable",
     collapsedDisableText: "Disable",
@@ -301,11 +299,11 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
             <FormUpload v-else-if="props.type === 'upload'" v-model="currentValue" />
             <FormRulesEdit v-else-if="props.type == 'rules'" v-model="currentValue" :target="attrs.target" />
             <FormParameter
-                v-else-if="backbonejs"
+                v-else-if="['data_dialog', 'ftpfile', 'library_data'].includes(props.type)"
                 :id="props.id"
                 v-model="currentValue"
                 :data-label="props.title"
-                :type="props.type ?? (attrs.options ? 'select' : 'text')"
+                :type="props.type"
                 :attributes="attrs" />
             <FormTags
                 v-else-if="props.type === 'tags'"
diff --git a/client/src/components/Form/FormInputs.vue b/client/src/components/Form/FormInputs.vue
index 38767bc4ee74..5fabe26f0517 100644
--- a/client/src/components/Form/FormInputs.vue
+++ b/client/src/components/Form/FormInputs.vue
@@ -14,7 +14,6 @@
                         :refresh-on-change="false"
                         :disabled="sustainConditionals"
                         :attributes="input.test_param"
-                        :backbonejs="true"
                         @change="onChange" />
                     <div v-for="(caseDetails, caseId) in input.cases" :key="caseId">
                         <FormNode
@@ -54,7 +53,6 @@
                 :help="input.help"
                 :refresh-on-change="input.refresh_on_change"
                 :attributes="input.attributes || input"
-                :backbonejs="true"
                 :collapsed-enable-text="collapsedEnableText"
                 :collapsed-enable-icon="collapsedEnableIcon"
                 :collapsed-disable-text="collapsedDisableText"
diff --git a/client/src/components/Workflow/Editor/Forms/FormOutput.vue b/client/src/components/Workflow/Editor/Forms/FormOutput.vue
index 8d5bbf18cc83..a0e41c37eb40 100644
--- a/client/src/components/Workflow/Editor/Forms/FormOutput.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormOutput.vue
@@ -15,7 +15,6 @@
                 :attributes="{ options: datatypeExtensions }"
                 title="Change datatype"
                 type="select"
-                backbonejs
                 help="This action will change the datatype of the output to the indicated datatype."
                 @input="onDatatype" />
             <FormElement
@@ -41,7 +40,6 @@
                         :value="formData[actionNames.ColumnSetAction__chromCol]"
                         title="Chrom column"
                         type="integer"
-                        backbonejs
                         help="This action will set the chromosome column."
                         @input="onInput" />
                     <FormElement
@@ -49,7 +47,6 @@
                         :value="formData[actionNames.ColumnSetAction__startCol]"
                         title="Start column"
                         type="integer"
-                        backbonejs
                         help="This action will set the start column."
                         @input="onInput" />
                     <FormElement
@@ -57,7 +54,6 @@
                         :value="formData[actionNames.ColumnSetAction__endCol]"
                         title="End column"
                         type="integer"
-                        backbonejs
                         help="This action will set the end column."
                         @input="onInput" />
                     <FormElement
@@ -65,7 +61,6 @@
                         :value="formData[actionNames.ColumnSetAction__strandCol]"
                         title="Strand column"
                         type="integer"
-                        backbonejs
                         help="This action will set the strand column."
                         @input="onInput" />
                     <FormElement
@@ -73,7 +68,6 @@
                         :value="formData[actionNames.ColumnSetAction__nameCol]"
                         title="Name column"
                         type="integer"
-                        backbonejs
                         help="This action will set the name column."
                         @input="onInput" />
                 </template>

From 4cf435063f492b61ef0019b839e62e5249d6c035 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 27 Aug 2023 11:00:01 +0200
Subject: [PATCH 59/86] Remove legacy test, handled in vue component

---
 .../Form/Elements/parameters.test.js          | 31 -------------------
 1 file changed, 31 deletions(-)
 delete mode 100644 client/src/components/Form/Elements/parameters.test.js

diff --git a/client/src/components/Form/Elements/parameters.test.js b/client/src/components/Form/Elements/parameters.test.js
deleted file mode 100644
index a5f8e245d1dc..000000000000
--- a/client/src/components/Form/Elements/parameters.test.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import Ui from "mvc/ui/ui-misc";
-
-import ParameterFactory from "./parameters";
-
-jest.mock("app");
-jest.mock("mvc/ui/ui-misc", () => ({
-    TextSelect: jest.fn(() => {
-        return {
-            value: jest.fn(),
-        };
-    }),
-    Input: jest.fn(() => {
-        return {
-            value: jest.fn(),
-        };
-    }),
-}));
-
-describe("ParameterFactory", () => {
-    it("should create a TEXT parameter input when no type is specified", async () => {
-        const input = {
-            id: "type-less parameter",
-            type: "",
-            value: "initial_value",
-        };
-        const parameter = new ParameterFactory();
-        parameter.create(input);
-        expect(Ui.Input).toHaveBeenCalled();
-        expect(Ui.TextSelect).not.toHaveBeenCalled();
-    });
-});

From 2312c5d68c0aae04f369d8958be419cc78c9f146 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 27 Aug 2023 11:13:16 +0200
Subject: [PATCH 60/86] Remove backbone-based text input elements

---
 client/src/mvc/ui/ui-misc.js | 100 -----------------------------------
 1 file changed, 100 deletions(-)

diff --git a/client/src/mvc/ui/ui-misc.js b/client/src/mvc/ui/ui-misc.js
index 451c7f785973..64da9a93ceca 100644
--- a/client/src/mvc/ui/ui-misc.js
+++ b/client/src/mvc/ui/ui-misc.js
@@ -7,7 +7,6 @@ import Buttons from "mvc/ui/ui-buttons";
 import Modal from "mvc/ui/ui-modal";
 import Options from "mvc/ui/ui-options";
 import Select from "mvc/ui/ui-select-default";
-import Switch from "mvc/ui/ui-switch";
 import _ from "underscore";
 
 /** Displays messages used e.g. in the tool form */
@@ -124,103 +123,6 @@ export var Input = Backbone.View.extend({
     },
 });
 
-export var NullableText = Backbone.View.extend({
-    initialize: function (options) {
-        this.model = (options && options.model) || new Backbone.Model().set(options);
-
-        // Add text field
-        this.text_input = new Input(options);
-
-        // Add button that determines whether an optional value should be defined
-        this.optional_button = new Switch({
-            id: `optional-switch-${this.model.id}`,
-        });
-
-        // Create element
-        this.setElement("<div/>");
-        this.$el.append("<div>Set value for this optional select field?</div>");
-        this.$el.append(this.optional_button.$el);
-        this.$el.append(this.text_input.$el);
-
-        // Determine true/false value of button based on initial value
-        this.optional_button.model.set("value", this.text_input.model.get("value") === null ? "false" : "true");
-        this.toggleButton();
-        this.listenTo(this.optional_button.model, "change", this.toggleButton, this);
-    },
-    toggleButton: function () {
-        const setOptional = this.optional_button.model.get("value");
-        if (setOptional == "true") {
-            // Enable text field, set value to `""` if the value is falsy and trigger change
-            this.text_input.model.set("disabled", false);
-            if (!this.text_input.model.get("value")) {
-                this.text_input.model.set("value", "");
-                this.model.get("onchange") && this.model.get("onchange")("");
-            }
-        } else {
-            // Set text field to disabled, set model value to null and trigger change
-            this.text_input.model.set("disabled", true);
-            this.text_input.model.set("value", null);
-            this.model.get("onchange") && this.model.get("onchange")(null);
-        }
-    },
-    value: function (new_val) {
-        const setOptional = this.optional_button.model.get("value");
-        if (setOptional == "true") {
-            new_val !== undefined && this.model.set("value", typeof new_val == "string" ? new_val : "");
-        }
-        return this.text_input.model.get("value");
-    },
-});
-
-/** Creates an input element which switches between select and text field */
-export var TextSelect = Backbone.View.extend({
-    initialize: function (options) {
-        this.select = new options.SelectClass.View(options);
-        this.model = this.select.model;
-        const textInputClass = options.optional ? NullableText : Input;
-        this.text = new textInputClass({
-            onchange: this.model.get("onchange"),
-        });
-        this.on("change", () => {
-            if (this.model.get("onchange")) {
-                this.model.get("onchange")(this.value());
-            }
-        });
-        this.setElement($("<div/>").append(this.select.$el).append(this.text.$el));
-        this.update(options);
-    },
-    remove: function () {
-        this.select.remove();
-        this.text.remove();
-        Backbone.View.prototype.remove.call(this);
-    },
-    wait: function () {
-        this.select.wait();
-    },
-    unwait: function () {
-        this.select.unwait();
-    },
-    value: function (new_val) {
-        var element = this.textmode ? this.text : this.select;
-        return element.value(new_val);
-    },
-    update: function (input_def) {
-        var data = input_def.data;
-        if (!data) {
-            data = [];
-            _.each(input_def.options, (option) => {
-                data.push({ label: option[0], value: option[1] });
-            });
-        }
-        var v = this.value();
-        this.textmode = input_def.textable && (!Array.isArray(data) || data.length === 0);
-        this.text.$el[this.textmode ? "show" : "hide"]();
-        this.select.$el[this.textmode ? "hide" : "show"]();
-        this.select.update({ data: data });
-        this.value(v);
-    },
-});
-
 /* Make more Ui stuff directly available at this namespace (for backwards
  * compatibility).  We should eliminate this practice, though, and just require
  * what we need where we need it, allowing for better package optimization.
@@ -248,6 +150,4 @@ export default {
     Checkbox: Options.Checkbox,
     Radio: Options.Radio,
     Select: Select,
-    NullableText: NullableText,
-    TextSelect: TextSelect,
 };

From 3dfe0ff415b18b18ef1131cdff72146a3650840d Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 27 Aug 2023 11:29:27 +0200
Subject: [PATCH 61/86] Consolidate offset top handling for input element
 highlighting

---
 client/src/components/Form/FormDisplay.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Form/FormDisplay.vue b/client/src/components/Form/FormDisplay.vue
index f7c7d5a3d3dc..4ab57c878eb0 100644
--- a/client/src/components/Form/FormDisplay.vue
+++ b/client/src/components/Form/FormDisplay.vue
@@ -201,7 +201,7 @@ export default {
                 }
             }
         },
-        getOffsetTop(element, padding = 150) {
+        getOffsetTop(element, padding = 200) {
             let offsetTop = 0;
             while (element) {
                 offsetTop += element.offsetTop;
@@ -219,7 +219,7 @@ export default {
                     if (element) {
                         const centerPanel = document.querySelector("#center");
                         if (centerPanel) {
-                            centerPanel.scrollTo(0, this.getOffsetTop(element) - 50);
+                            centerPanel.scrollTo(0, this.getOffsetTop(element));
                         }
                     }
                 }

From c4e954e2d2655ae9eb7042521cf6cff505aae429 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 27 Aug 2023 15:05:34 +0200
Subject: [PATCH 62/86] Fix numeric input field style and size

---
 client/src/components/Form/Elements/FormNumber.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Form/Elements/FormNumber.vue b/client/src/components/Form/Elements/FormNumber.vue
index efdd9bfbd935..a616bd3d8706 100644
--- a/client/src/components/Form/Elements/FormNumber.vue
+++ b/client/src/components/Form/Elements/FormNumber.vue
@@ -8,16 +8,16 @@
                 <!-- regular dot and dot on numpad have different codes -->
                 <b-form-input
                     v-model="currentValue"
+                    class="ui-input"
                     :no-wheel="true"
                     :step="step"
-                    size="sm"
                     :type="fieldType"
                     @change="onInputChange"
                     @keydown.190.capture="onFloatInput"
                     @keydown.110.capture="onFloatInput" />
             </b-col>
             <b-col v-if="isRangeValid" class="pl-0">
-                <b-form-input v-model="currentValue" :min="min" :max="max" :step="step" type="range" />
+                <b-form-input v-model="currentValue" class="ui-input" :min="min" :max="max" :step="step" type="range" />
             </b-col>
         </b-row>
     </div>

From 2dc6f148b2e06997f07266c40a8d2f21dda39518 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 28 Aug 2023 00:45:56 +0200
Subject: [PATCH 63/86] Match on initialization

---
 .../Form/Elements/FormData/FormData.vue       | 21 +++++++------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index acbc39e65d84..205f2424ffc6 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -276,17 +276,6 @@ function handleIncoming(incoming: Record<string, unknown>, partial = true) {
     }
 }
 
-/**
- * Set initial value
- */
-function initialValue() {
-    if ((isLDDA.value || isDCE.value) && props.value && props.value.values) {
-        setValue(matchValues(props.value.values));
-    } else {
-        setValue(currentValue.value);
-    }
-}
-
 /**
  * Matches entries to available options
  */
@@ -436,7 +425,11 @@ onMounted(() => {
     eventBus.$on("waiting", (value: boolean) => {
         waiting.value = value;
     });
-    initialValue();
+    if (props.value && props.value.values) {
+        setValue(matchValues(props.value.values));
+    } else {
+        setValue(currentValue.value);
+    }
 });
 
 /**
@@ -445,7 +438,9 @@ onMounted(() => {
 watch(
     () => [props.options, currentLinked.value, currentVariant.value],
     () => {
-        initialValue();
+        if (!isLDDA.value && !isDCE.value) {
+            setValue(currentValue.value);
+        }
     }
 );
 </script>

From 356ead9135f4b07db7a820c5f5e67b7e68e4ea0a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 28 Aug 2023 01:32:28 +0200
Subject: [PATCH 64/86] Add test to validate initial matching process

---
 .../Form/Elements/FormData/FormData.test.js   | 24 +++++++++++++++++++
 .../Form/Elements/FormData/FormData.vue       |  4 +++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.test.js b/client/src/components/Form/Elements/FormData/FormData.test.js
index 397547fa60ec..04fae9d1b27f 100644
--- a/client/src/components/Form/Elements/FormData/FormData.test.js
+++ b/client/src/components/Form/Elements/FormData/FormData.test.js
@@ -259,4 +259,28 @@ describe("FormData", () => {
             values: [{ id: "hda3", map_over_type: null, src: "hda" }],
         });
     });
+
+    it("match variation on initial value", async () => {
+        const wrapper = createTarget({
+            value: {
+                values: [{ id: "hdca4", src: "hdca" }],
+            },
+            multiple: true,
+            options: defaultOptions,
+        });
+        await wrapper.vm.$nextTick();
+        const options = wrapper.find(".btn-group").findAll("button");
+        expect(options.length).toBe(3);
+        expect(options.at(1).classes()).toContain("active");
+        expect(options.at(1).attributes("title")).toBe("Dataset collection");
+        expect(wrapper.emitted().input[1][0]).toEqual({
+            batch: false,
+            product: false,
+            values: [{ id: "hdca4", map_over_type: null, src: "hdca" }],
+        });
+        expect(wrapper.emitted().input.length).toEqual(2);
+        const selectedValues = wrapper.findAll(SELECTED_VALUE);
+        expect(selectedValues.length).toBe(1);
+        expect(selectedValues.at(0).text()).toBe("4: hdcaName4");
+    });
 });
diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 205f2424ffc6..32e9e4b73cb6 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -388,7 +388,9 @@ function setValue(val: Array<DataOption> | DataOption | null) {
             }
 
             // Identify matching variant
-            const variantIndex = variant.value.findIndex((v) => v.multiple === isMultiple && v.src === sourceType);
+            const variantIndex = variant.value.findIndex(
+                (v) => (!isMultiple || v.multiple === isMultiple) && v.src === sourceType
+            );
 
             // Determine batch mode
             let batch: string = BATCH.DISABLED;

From 140c2964ec26e0948ab7855b24dc36cc3e9c2903 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 28 Aug 2023 01:37:34 +0200
Subject: [PATCH 65/86] Minor refactoring, move getter into separate function

---
 .../Form/Elements/FormData/FormData.vue       | 59 +++++++++++--------
 1 file changed, 33 insertions(+), 26 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 32e9e4b73cb6..3e73abbb2eb5 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -86,31 +86,7 @@ const currentSource = computed(() => currentVariant.value && currentVariant.valu
 const currentValue = computed({
     get: () => {
         eventBus.$emit("waiting", false);
-        const value: Array<DataOption> = [];
-        if (props.value) {
-            for (const v of props.value.values) {
-                const foundEntry = formattedOptions.value.find(
-                    (entry) => entry.value && entry.value.id === v.id && entry.value.src === v.src
-                );
-                if (foundEntry && foundEntry.value) {
-                    value.push(foundEntry.value);
-                    if (!currentVariant.value?.multiple) {
-                        break;
-                    }
-                }
-            }
-            if (value.length > 0) {
-                return value;
-            }
-        }
-        if (!props.optional && formattedOptions.value.length > 0) {
-            const firstEntry = formattedOptions.value && formattedOptions.value[0];
-            if (firstEntry && firstEntry.value) {
-                value.push(firstEntry.value);
-                return value;
-            }
-        }
-        return null;
+        return getValue();
     },
     set: (val) => {
         eventBus.$emit("waiting", true);
@@ -368,7 +344,38 @@ function onDrop() {
 }
 
 /**
- * Processes and submits values from the select field
+ * Parse incoming value for select field
+ */
+function getValue() {
+    const value: Array<DataOption> = [];
+    if (props.value) {
+        for (const v of props.value.values) {
+            const foundEntry = formattedOptions.value.find(
+                (entry) => entry.value && entry.value.id === v.id && entry.value.src === v.src
+            );
+            if (foundEntry && foundEntry.value) {
+                value.push(foundEntry.value);
+                if (!currentVariant.value?.multiple) {
+                    break;
+                }
+            }
+        }
+        if (value.length > 0) {
+            return value;
+        }
+    }
+    if (!props.optional && formattedOptions.value.length > 0) {
+        const firstEntry = formattedOptions.value && formattedOptions.value[0];
+        if (firstEntry && firstEntry.value) {
+            value.push(firstEntry.value);
+            return value;
+        }
+    }
+    return null;
+}
+
+/**
+ * Process and emit value for select field
  */
 function setValue(val: Array<DataOption> | DataOption | null) {
     if (val) {

From 2965fc31dcc22d5c2564cbd81259a8f21e56e495 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 27 Aug 2023 14:48:17 +0200
Subject: [PATCH 66/86] Do not reconstruct repeat blocks on every value change?

---
 client/src/components/Form/FormRepeat.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/client/src/components/Form/FormRepeat.vue b/client/src/components/Form/FormRepeat.vue
index b2cf51a3b384..88617f1864cd 100644
--- a/client/src/components/Form/FormRepeat.vue
+++ b/client/src/components/Form/FormRepeat.vue
@@ -4,8 +4,6 @@ import { faCaretDown, faCaretUp, faPlus, faTrashAlt } from "@fortawesome/free-so
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { defineAsyncComponent, nextTick, type PropType } from "vue";
 
-import { useKeyedObjects } from "@/composables/keyedObjects";
-
 import FormCard from "./FormCard.vue";
 
 const FormNode = defineAsyncComponent(() => import("./FormInputs.vue"));
@@ -84,8 +82,6 @@ function getButtonId(index: number, direction: "up" | "down") {
     const prefix = getPrefix(index);
     return `${prefix}_${direction}`;
 }
-
-const { keyObject } = useKeyedObjects();
 </script>
 
 <template>
@@ -97,7 +93,7 @@ const { keyObject } = useKeyedObjects();
 
         <FormCard
             v-for="(cache, cacheId) in props.input.cache"
-            :key="keyObject(cache)"
+            :key="cacheId"
             data-description="repeat block"
             class="card"
             :title="getTitle(cacheId)">

From ae1ee5fbf7abe23239941e1e904efb2243b524a5 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 28 Aug 2023 10:22:39 +0200
Subject: [PATCH 67/86] Add additional tests for form data input element

---
 .../Form/Elements/FormData/FormData.test.js   | 27 +++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.test.js b/client/src/components/Form/Elements/FormData/FormData.test.js
index 04fae9d1b27f..2e00ef968286 100644
--- a/client/src/components/Form/Elements/FormData/FormData.test.js
+++ b/client/src/components/Form/Elements/FormData/FormData.test.js
@@ -154,9 +154,15 @@ describe("FormData", () => {
         const message = wrapper.findAll(".form-data-entry-label");
         expect(message.length).toBe(1);
         expect(message.at(0).text()).toBe("1. dceName1 (dce)");
+        expect(wrapper.find(".btn-group").exists()).toBeFalsy();
         const closeButton = wrapper.find(".alert .close");
         await closeButton.trigger("click");
         expect(wrapper.emitted().input[1][0]).toEqual(null);
+        expect(wrapper.find(".alert").exists()).toBeFalsy();
+        await wrapper.setProps({ value: null });
+        const options = wrapper.find(".btn-group").findAll("button");
+        expect(options.length).toBe(4);
+        expect(wrapper.emitted().input.length).toEqual(2);
     });
 
     it("dataset collection as hdca without map_over_type", async () => {
@@ -273,14 +279,25 @@ describe("FormData", () => {
         expect(options.length).toBe(3);
         expect(options.at(1).classes()).toContain("active");
         expect(options.at(1).attributes("title")).toBe("Dataset collection");
-        expect(wrapper.emitted().input[1][0]).toEqual({
-            batch: false,
-            product: false,
-            values: [{ id: "hdca4", map_over_type: null, src: "hdca" }],
-        });
+        for (const i of [0, 1]) {
+            expect(wrapper.emitted().input[i][0]).toEqual({
+                batch: false,
+                product: false,
+                values: [{ id: "hdca4", map_over_type: null, src: "hdca" }],
+            });
+        }
         expect(wrapper.emitted().input.length).toEqual(2);
         const selectedValues = wrapper.findAll(SELECTED_VALUE);
         expect(selectedValues.length).toBe(1);
         expect(selectedValues.at(0).text()).toBe("4: hdcaName4");
+        await wrapper.find("[title='Multiple datasets'").trigger("click");
+        expect(options.at(0).classes()).toContain("active");
+        expect(wrapper.emitted().input[2][0]).toEqual({
+            batch: false,
+            product: false,
+            values: [{ id: "hda3", map_over_type: null, src: "hda" }],
+        });
+        const newSelectedValues = wrapper.findAll(SELECTED_VALUE);
+        expect(newSelectedValues.at(0).text()).toBe("3: hdaName3");
     });
 });

From dcaea97ad3d8b3b45b152dd334da8aa1d39cbf71 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 30 Aug 2023 19:42:31 +0300
Subject: [PATCH 68/86] Remove input cloning, restore key object handling as in
 current dev (see #16602)

---
 client/src/components/Form/FormDisplay.vue | 1 -
 client/src/components/Form/FormRepeat.vue  | 6 +++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Form/FormDisplay.vue b/client/src/components/Form/FormDisplay.vue
index 4ab57c878eb0..200a5d32f669 100644
--- a/client/src/components/Form/FormDisplay.vue
+++ b/client/src/components/Form/FormDisplay.vue
@@ -165,7 +165,6 @@ export default {
             });
         },
         onChangeForm() {
-            this.formInputs = JSON.parse(JSON.stringify(this.formInputs));
             this.onChange(true);
         },
         onCloneInputs() {
diff --git a/client/src/components/Form/FormRepeat.vue b/client/src/components/Form/FormRepeat.vue
index 88617f1864cd..b2cf51a3b384 100644
--- a/client/src/components/Form/FormRepeat.vue
+++ b/client/src/components/Form/FormRepeat.vue
@@ -4,6 +4,8 @@ import { faCaretDown, faCaretUp, faPlus, faTrashAlt } from "@fortawesome/free-so
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { defineAsyncComponent, nextTick, type PropType } from "vue";
 
+import { useKeyedObjects } from "@/composables/keyedObjects";
+
 import FormCard from "./FormCard.vue";
 
 const FormNode = defineAsyncComponent(() => import("./FormInputs.vue"));
@@ -82,6 +84,8 @@ function getButtonId(index: number, direction: "up" | "down") {
     const prefix = getPrefix(index);
     return `${prefix}_${direction}`;
 }
+
+const { keyObject } = useKeyedObjects();
 </script>
 
 <template>
@@ -93,7 +97,7 @@ function getButtonId(index: number, direction: "up" | "down") {
 
         <FormCard
             v-for="(cache, cacheId) in props.input.cache"
-            :key="cacheId"
+            :key="keyObject(cache)"
             data-description="repeat block"
             class="card"
             :title="getTitle(cacheId)">

From b948c52538970b01c2e0e9801ba552a81363e82d Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 31 Aug 2023 00:47:08 +0300
Subject: [PATCH 69/86] Rename map_over_type to subcollection_type to avoid
 confusion

---
 .../Form/Elements/FormData/FormData.test.js   | 95 +++++++++++++------
 .../Form/Elements/FormData/FormData.vue       | 23 ++---
 .../Form/Elements/FormData/types.ts           |  4 +-
 lib/galaxy/tools/parameters/basic.py          |  6 +-
 lib/galaxy/tools/parameters/meta.py           |  2 +-
 lib/galaxy_test/api/test_tools.py             | 18 ++--
 .../selenium/test_workflow_editor.py          | 14 +--
 7 files changed, 102 insertions(+), 60 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.test.js b/client/src/components/Form/Elements/FormData/FormData.test.js
index 2e00ef968286..c414d01f5ac1 100644
--- a/client/src/components/Form/Elements/FormData/FormData.test.js
+++ b/client/src/components/Form/Elements/FormData/FormData.test.js
@@ -29,7 +29,8 @@ const defaultOptions = {
     dce: [
         { id: "dce1", name: "dceName1", src: "dce", is_dataset: true },
         { id: "dce2", name: "dceName2", src: "dce" },
-        { id: "dce3", name: "dceName3", src: "dce", map_over_type: "mapOverType" },
+        { id: "dce3", name: "dceName3", src: "dce", subcollection_type: "subcollectionType" },
+        { id: "dce4", name: "dceName4", src: "dce", is_dataset: true },
     ],
     hda: [
         { id: "hda1", hid: 1, name: "hdaName1", src: "hda" },
@@ -54,12 +55,12 @@ describe("FormData", () => {
         const value_0 = {
             batch: false,
             product: false,
-            values: [{ id: "hda3", src: "hda", map_over_type: null }],
+            values: [{ id: "hda3", src: "hda", subcollection_type: null }],
         };
         const value_1 = {
             batch: false,
             product: false,
-            values: [{ id: "hda1", src: "hda", map_over_type: null }],
+            values: [{ id: "hda1", src: "hda", subcollection_type: null }],
         };
         const options = wrapper.find(".btn-group").findAll("button");
         expect(options.length).toBe(4);
@@ -113,8 +114,8 @@ describe("FormData", () => {
             batch: false,
             product: false,
             values: [
-                { id: "hda2", map_over_type: null, src: "hda" },
-                { id: "hda3", map_over_type: null, src: "hda" },
+                { id: "hda2", subcollection_type: null, src: "hda" },
+                { id: "hda3", subcollection_type: null, src: "hda" },
             ],
         });
         expect(wrapper.emitted().input.length).toEqual(1);
@@ -126,17 +127,25 @@ describe("FormData", () => {
             batch: false,
             product: false,
             values: [
-                { id: "hda2", map_over_type: null, src: "hda" },
-                { id: "hda3", map_over_type: null, src: "hda" },
+                { id: "hda2", subcollection_type: null, src: "hda" },
+                { id: "hda3", subcollection_type: null, src: "hda" },
             ],
         };
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
         await selectedValues.at(0).trigger("click");
-        const value_1 = { batch: false, product: false, values: [{ id: "hda2", map_over_type: null, src: "hda" }] };
+        const value_1 = {
+            batch: false,
+            product: false,
+            values: [{ id: "hda2", subcollection_type: null, src: "hda" }],
+        };
         expect(wrapper.emitted().input[1][0]).toEqual(value_1);
         await wrapper.setProps({ value: value_1 });
         await selectedValues.at(1).trigger("click");
-        const value_2 = { batch: false, product: false, values: [{ id: "hda2", map_over_type: null, src: "hda" }] };
+        const value_2 = {
+            batch: false,
+            product: false,
+            values: [{ id: "hda2", subcollection_type: null, src: "hda" }],
+        };
         expect(wrapper.emitted().input[1][0]).toEqual(value_2);
         await wrapper.setProps({ value: value_2 });
         expect(wrapper.emitted().input.length).toBe(3);
@@ -148,7 +157,11 @@ describe("FormData", () => {
             value: { values: [{ id: "dce1", src: "dce" }] },
             options: defaultOptions,
         });
-        const value_0 = { batch: false, product: false, values: [{ id: "dce1", map_over_type: null, src: "dce" }] };
+        const value_0 = {
+            batch: false,
+            product: false,
+            values: [{ id: "dce1", subcollection_type: null, src: "dce" }],
+        };
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
         expect(wrapper.emitted().input.length).toEqual(1);
         const message = wrapper.findAll(".form-data-entry-label");
@@ -165,34 +178,62 @@ describe("FormData", () => {
         expect(wrapper.emitted().input.length).toEqual(2);
     });
 
-    it("dataset collection as hdca without map_over_type", async () => {
+    it("dataset collection element as hdca without subcollection_type", async () => {
         const wrapper = createTarget({
             value: { values: [{ id: "dce2", src: "dce" }] },
             options: defaultOptions,
         });
-        const value_0 = { batch: true, product: false, values: [{ id: "dce2", map_over_type: null, src: "dce" }] };
+        const value_0 = { batch: true, product: false, values: [{ id: "dce2", subcollection_type: null, src: "dce" }] };
+        expect(wrapper.emitted().input[0][0]).toEqual(value_0);
+    });
+
+    it("dataset collection element as hdca mapped to batch field", async () => {
+        const wrapper = createTarget({
+            value: { values: [{ id: "dce3", src: "dce" }] },
+            options: defaultOptions,
+        });
+        const value_0 = {
+            batch: true,
+            product: false,
+            values: [{ id: "dce3", subcollection_type: "subcollectionType", src: "dce" }],
+        };
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
     });
 
-    it("dataset collection as hdca with map_over_type", async () => {
+    it("dataset collection element as hdca mapped to non-batch field", async () => {
         const wrapper = createTarget({
+            type: "data_collection",
             value: { values: [{ id: "dce3", src: "dce" }] },
             options: defaultOptions,
         });
         const value_0 = {
             batch: true,
             product: false,
-            values: [{ id: "dce3", map_over_type: "mapOverType", src: "dce" }],
+            values: [{ id: "dce3", subcollection_type: "subcollectionType", src: "dce" }],
+        };
+        expect(wrapper.emitted().input[0][0]).toEqual(value_0);
+    });
+
+    it("dataset collection mapped to non-batch field", async () => {
+        const wrapper = createTarget({
+            type: "data_collection",
+            value: { values: [{ id: "hdca4", src: "hdca" }] },
+            options: defaultOptions,
+        });
+        const value_0 = {
+            batch: false,
+            product: false,
+            values: [{ id: "hdca4", subcollection_type: null, src: "hdca" }],
         };
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
     });
 
-    it("multiple dataset collection values with varying map_over_type", async () => {
+    it("multiple dataset collection elements (as hdas)", async () => {
         const wrapper = createTarget({
             value: {
                 values: [
-                    { id: "dce2", src: "dce" },
-                    { id: "dce3", src: "dce" },
+                    { id: "dce1", src: "dce" },
+                    { id: "dce4", src: "dce" },
                 ],
             },
             options: defaultOptions,
@@ -201,8 +242,8 @@ describe("FormData", () => {
             batch: true,
             product: false,
             values: [
-                { id: "dce2", map_over_type: null, src: "dce" },
-                { id: "dce3", map_over_type: "mapOverType", src: "dce" },
+                { id: "dce1", subcollection_type: null, src: "dce" },
+                { id: "dce4", subcollection_type: null, src: "dce" },
             ],
         };
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
@@ -219,7 +260,7 @@ describe("FormData", () => {
         expect(wrapper.emitted().input[1][0]).toEqual({
             batch: true,
             product: false,
-            values: [{ id: "hdca4", map_over_type: null, src: "hdca" }],
+            values: [{ id: "hdca4", subcollection_type: null, src: "hdca" }],
         });
         eventStore.setDragData({ id: "hda2", history_content_type: "dataset" });
         dispatchEvent(wrapper, "dragenter");
@@ -227,7 +268,7 @@ describe("FormData", () => {
         expect(wrapper.emitted().input[2][0]).toEqual({
             batch: false,
             product: false,
-            values: [{ id: "hda2", map_over_type: null, src: "hda" }],
+            values: [{ id: "hda2", subcollection_type: null, src: "hda" }],
         });
     });
 
@@ -240,7 +281,7 @@ describe("FormData", () => {
         expect(wrapper.emitted().input[0][0]).toEqual({
             batch: false,
             product: false,
-            values: [{ id: "hda3", map_over_type: null, src: "hda" }],
+            values: [{ id: "hda3", subcollection_type: null, src: "hda" }],
         });
         const noCheckLinked = wrapper.find("input[type='checkbox']");
         expect(noCheckLinked.exists()).toBeFalsy();
@@ -248,7 +289,7 @@ describe("FormData", () => {
         expect(wrapper.emitted().input[1][0]).toEqual({
             batch: true,
             product: false,
-            values: [{ id: "hda3", map_over_type: null, src: "hda" }],
+            values: [{ id: "hda3", subcollection_type: null, src: "hda" }],
         });
         const checkLinked = wrapper.find("input[type='checkbox']");
         expect(wrapper.find(".custom-switch span").text()).toBe(
@@ -262,11 +303,11 @@ describe("FormData", () => {
         expect(wrapper.emitted().input[2][0]).toEqual({
             batch: true,
             product: true,
-            values: [{ id: "hda3", map_over_type: null, src: "hda" }],
+            values: [{ id: "hda3", subcollection_type: null, src: "hda" }],
         });
     });
 
-    it("match variation on initial value", async () => {
+    it("match dataset collection on initial value", async () => {
         const wrapper = createTarget({
             value: {
                 values: [{ id: "hdca4", src: "hdca" }],
@@ -283,7 +324,7 @@ describe("FormData", () => {
             expect(wrapper.emitted().input[i][0]).toEqual({
                 batch: false,
                 product: false,
-                values: [{ id: "hdca4", map_over_type: null, src: "hdca" }],
+                values: [{ id: "hdca4", subcollection_type: null, src: "hdca" }],
             });
         }
         expect(wrapper.emitted().input.length).toEqual(2);
@@ -295,7 +336,7 @@ describe("FormData", () => {
         expect(wrapper.emitted().input[2][0]).toEqual({
             batch: false,
             product: false,
-            values: [{ id: "hda3", map_over_type: null, src: "hda" }],
+            values: [{ id: "hda3", subcollection_type: null, src: "hda" }],
         });
         const newSelectedValues = wrapper.findAll(SELECTED_VALUE);
         expect(newSelectedValues.at(0).text()).toBe("3: hdaName3");
diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 3e73abbb2eb5..2845140a8687 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -206,7 +206,6 @@ function handleIncoming(incoming: Record<string, unknown>, partial = true) {
             const incomingValues: Array<DataOption> = [];
             values.forEach((v) => {
                 // Map incoming objects to data option values
-                v.id = v.element_id || v.id;
                 const newHid = v.hid;
                 const newId = v.id;
                 const newName = v.name ? v.name : newId;
@@ -381,7 +380,7 @@ function setValue(val: Array<DataOption> | DataOption | null) {
     if (val) {
         const values = Array.isArray(val) ? val : [val];
         if (variant.value && values.length > 0 && values[0]) {
-            const hasMapOverType = values.find((v) => !!v.map_over_type);
+            const hasSubcollectionType = values.find((v) => !!v.subcollection_type);
             const isMultiple = values.length > 1;
 
             // Determine source representation
@@ -403,25 +402,27 @@ function setValue(val: Array<DataOption> | DataOption | null) {
             let batch: string = BATCH.DISABLED;
             if (variantIndex >= 0) {
                 const variantDetails = variant.value[variantIndex];
-                if ((isLDDA.value || isDCE.value) && variantDetails && variantDetails.batch) {
-                    batch = variantDetails.batch;
-                } else {
-                    // Switch to another field type if source differs from current field
-                    if (currentVariant.value && currentVariant.value.src !== sourceType) {
-                        currentField.value = variantIndex;
+                if (variantDetails) {
+                    if ((isLDDA.value || isDCE.value) && variantDetails.batch) {
+                        batch = variantDetails.batch;
+                    } else {
+                        // Switch to another field type if source differs from current field
+                        if (currentVariant.value && currentVariant.value.src !== sourceType) {
+                            currentField.value = variantIndex;
+                        }
+                        batch = (currentVariant.value && currentVariant.value.batch) || BATCH.DISABLED;
                     }
-                    batch = (currentVariant.value && currentVariant.value.batch) || BATCH.DISABLED;
                 }
             }
 
             // Emit new value
             $emit("input", {
-                batch: batch !== BATCH.DISABLED || !!hasMapOverType,
+                batch: batch !== BATCH.DISABLED || !!hasSubcollectionType,
                 product: batch === BATCH.ENABLED && !currentLinked.value,
                 values: values.map((entry) => ({
                     id: entry.id,
                     src: entry.src,
-                    map_over_type: entry.map_over_type || null,
+                    subcollection_type: entry.subcollection_type || null,
                 })),
             });
         }
diff --git a/client/src/components/Form/Elements/FormData/types.ts b/client/src/components/Form/Elements/FormData/types.ts
index 95a1c6b8002a..dcd0e4d679cf 100644
--- a/client/src/components/Form/Elements/FormData/types.ts
+++ b/client/src/components/Form/Elements/FormData/types.ts
@@ -1,10 +1,10 @@
 export interface DataOption {
     id: string;
+    hid: number;
     is_dataset?: boolean;
     keep: boolean;
-    hid: number;
-    map_over_type?: string;
     name: string;
     src: string;
+    subcollection_type?: string;
     tags: Array<string>;
 }
diff --git a/lib/galaxy/tools/parameters/basic.py b/lib/galaxy/tools/parameters/basic.py
index ae0598d8acdf..7f5b3a18a379 100644
--- a/lib/galaxy/tools/parameters/basic.py
+++ b/lib/galaxy/tools/parameters/basic.py
@@ -2299,7 +2299,7 @@ def append(list, hda, name, src, keep=False, subcollection_type=None):
                 "keep": keep,
             }
             if subcollection_type:
-                value["map_over_type"] = subcollection_type
+                value["subcollection_type"] = subcollection_type
             return list.append(value)
 
         def append_dce(dce):
@@ -2519,7 +2519,7 @@ def to_dict(self, trans, other_values=None):
         # append DCE
         if isinstance(other_values.get(self.name), DatasetCollectionElement):
             dce = other_values[self.name]
-            d["options"]["hdca"].append(
+            d["options"]["dce"].append(
                 {
                     "id": trans.security.encode_id(dce.id),
                     "hid": -1,
@@ -2553,11 +2553,11 @@ def to_dict(self, trans, other_values=None):
             d["options"]["hdca"].append(
                 {
                     "id": trans.security.encode_id(hdca.id),
+                    "subcollection_type": subcollection_type,
                     "hid": hdca.hid,
                     "name": name,
                     "src": "hdca",
                     "tags": [t.user_tname if not t.value else f"{t.user_tname}:{t.value}" for t in hdca.tags],
-                    "map_over_type": subcollection_type,
                 }
             )
 
diff --git a/lib/galaxy/tools/parameters/meta.py b/lib/galaxy/tools/parameters/meta.py
index a9f47ac0eae0..a0380f53a825 100644
--- a/lib/galaxy/tools/parameters/meta.py
+++ b/lib/galaxy/tools/parameters/meta.py
@@ -260,7 +260,7 @@ def __expand_collection_parameter(trans, input_key, incoming_val, collections_to
             if src != "hdca":
                 raise exceptions.ToolMetaParameterException(f"Invalid dataset collection source type {src}")
             encoded_hdc_id = incoming_val["id"]
-            subcollection_type = incoming_val.get("map_over_type", None)
+            subcollection_type = incoming_val.get("subcollection_type", None)
         except TypeError:
             encoded_hdc_id = incoming_val
             subcollection_type = None
diff --git a/lib/galaxy_test/api/test_tools.py b/lib/galaxy_test/api/test_tools.py
index 2b8620d964fa..402defd1d55f 100644
--- a/lib/galaxy_test/api/test_tools.py
+++ b/lib/galaxy_test/api/test_tools.py
@@ -609,7 +609,7 @@ def test_unzip_nested(self):
             inputs = {
                 "input": {
                     "batch": True,
-                    "values": [{"src": "hdca", "map_over_type": "paired", "id": hdca_id}],
+                    "values": [{"src": "hdca", "subcollection_type": "paired", "id": hdca_id}],
                 }
             }
             response = self._run("__UNZIP_COLLECTION__", history_id, inputs, assert_ok=True)
@@ -795,7 +795,7 @@ def _run_filter(self, history_id, failed_hdca_id, batch=False):
             inputs = {
                 "input": {
                     "batch": batch,
-                    "values": [{"map_over_type": "list:paired", "src": "hdca", "id": failed_hdca_id}],
+                    "values": [{"subcollection_type": "list:paired", "src": "hdca", "id": failed_hdca_id}],
                 },
             }
         else:
@@ -1691,7 +1691,7 @@ def test_map_over_with_output_format_actions(self, history_id):
     @skip_without_tool("output_action_change_format_paired")
     def test_map_over_with_nested_paired_output_format_actions(self, history_id):
         hdca_id = self.__build_nested_list(history_id)
-        inputs = {"input": {"batch": True, "values": [dict(map_over_type="paired", src="hdca", id=hdca_id)]}}
+        inputs = {"input": {"batch": True, "values": [dict(subcollection_type="paired", src="hdca", id=hdca_id)]}}
         create = self._run("output_action_change_format_paired", history_id, inputs).json()
         outputs = create["outputs"]
         jobs = create["jobs"]
@@ -2109,7 +2109,7 @@ def test_map_over_nested_collections(self, history_id):
     def test_paired_input_map_over_nested_collections(self, history_id):
         hdca_id = self.__build_nested_list(history_id)
         inputs = {
-            "input1": {"batch": True, "values": [dict(map_over_type="paired", src="hdca", id=hdca_id)]},
+            "input1": {"batch": True, "values": [dict(subcollection_type="paired", src="hdca", id=hdca_id)]},
         }
         self.dataset_populator.wait_for_history(history_id, assert_ok=True)
         create = self._run("collection_paired_structured_like", history_id, inputs, assert_ok=True)
@@ -2127,7 +2127,7 @@ def test_paired_input_conditional_map_over_nested_collections(self, history_id):
         hdca_id = self.__build_nested_list(history_id)
         inputs = {
             "cond|cond_param": "paired",
-            "cond|input1": {"batch": True, "values": [dict(map_over_type="paired", src="hdca", id=hdca_id)]},
+            "cond|input1": {"batch": True, "values": [dict(subcollection_type="paired", src="hdca", id=hdca_id)]},
         }
         self.dataset_populator.wait_for_history(history_id, assert_ok=True)
         create = self._run("collection_paired_conditional_structured_like", history_id, inputs, assert_ok=True)
@@ -2440,7 +2440,7 @@ def test_implicit_reduce_with_mapping(self):
                 "f1": {"src": "hdca", "id": hdca1_id},
                 "f2": {
                     "batch": True,
-                    "values": [{"src": "hdca", "map_over_type": "list", "id": hdca2_id}],
+                    "values": [{"src": "hdca", "subcollection_type": "list", "id": hdca2_id}],
                 },
             }
             create = self._run("multi_data_param", history_id, inputs, assert_ok=True)
@@ -2569,7 +2569,7 @@ def test_subcollection_mapping(self):
             inputs = {
                 "f1": {
                     "batch": True,
-                    "values": [{"src": "hdca", "map_over_type": "paired", "id": hdca_list_id}],
+                    "values": [{"src": "hdca", "subcollection_type": "paired", "id": hdca_list_id}],
                 }
             }
             self._check_simple_subcollection_mapping(history_id, inputs)
@@ -2598,7 +2598,7 @@ def test_combined_mapping_and_subcollection_mapping(self):
             inputs = {
                 "f1": {
                     "batch": True,
-                    "values": [{"src": "hdca", "map_over_type": "paired", "id": nested_list_id}],
+                    "values": [{"src": "hdca", "subcollection_type": "paired", "id": nested_list_id}],
                 },
                 "f2": {
                     "batch": True,
@@ -2975,7 +2975,7 @@ def test_deferred_map_over_nested_collections(self, history_id):
         dataset_collection = self.dataset_collection_populator.wait_for_fetched_collection(fetch_response)
         hdca_id = dataset_collection["id"]
         inputs = {
-            "input1": {"batch": True, "values": [dict(map_over_type="paired", src="hdca", id=hdca_id)]},
+            "input1": {"batch": True, "values": [dict(subcollection_type="paired", src="hdca", id=hdca_id)]},
         }
         self.dataset_populator.wait_for_history(history_id, assert_ok=True)
         create = self._run("collection_paired_structured_like", history_id, inputs, assert_ok=True)
diff --git a/lib/galaxy_test/selenium/test_workflow_editor.py b/lib/galaxy_test/selenium/test_workflow_editor.py
index 7156a33962fb..9d3edcbc79c4 100644
--- a/lib/galaxy_test/selenium/test_workflow_editor.py
+++ b/lib/galaxy_test/selenium/test_workflow_editor.py
@@ -1076,7 +1076,7 @@ def test_map_over_output_indicator(self):
         self.workflow_editor_destroy_connection("filter#how|filter_source")
         self.assert_node_output_is("filter#output_filtered", "list")
 
-    def assert_node_output_is(self, label: str, output_type: str, map_over_type: Optional[str] = None):
+    def assert_node_output_is(self, label: str, output_type: str, subcollection_type: Optional[str] = None):
         editor = self.components.workflow_editor
         node_label, output_name = label.split("#")
         node = editor.node._(label=node_label)
@@ -1085,18 +1085,18 @@ def assert_node_output_is(self, label: str, output_type: str, map_over_type: Opt
         self.hover_over(output_element)
         element = self.components._.tooltip_inner.wait_for_present()
         assert f"output is {output_type}" in element.text, element.text
-        if map_over_type is None:
+        if subcollection_type is None:
             assert "mapped-over" not in element.text
         else:
             fragment = " and mapped-over to produce a "
-            if map_over_type == "list:paired":
+            if subcollection_type == "list:paired":
                 fragment += "list of pairs dataset collection"
-            elif map_over_type == "list:list":
+            elif subcollection_type == "list:list":
                 fragment += "list of lists dataset collection"
-            elif map_over_type.count(":") > 1:
-                fragment += f"dataset collection with {map_over_type.count(':') + 1} levels of nesting"
+            elif subcollection_type.count(":") > 1:
+                fragment += f"dataset collection with {subcollection_type.count(':') + 1} levels of nesting"
             else:
-                fragment += f"{map_over_type}"
+                fragment += f"{subcollection_type}"
             assert fragment in element.text
         self.click_center()
 

From d947f12eac86d9f9e48c24e7910e11aa52056f74 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 31 Aug 2023 13:07:11 +0300
Subject: [PATCH 70/86] Adjust api tests for dces

---
 lib/galaxy_test/api/test_jobs.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/galaxy_test/api/test_jobs.py b/lib/galaxy_test/api/test_jobs.py
index c2e289bd435f..d59d79637e77 100644
--- a/lib/galaxy_test/api/test_jobs.py
+++ b/lib/galaxy_test/api/test_jobs.py
@@ -841,14 +841,14 @@ def test_search_with_hdca_list_pair_collection_mapped_over_pair_input(self, hist
         list_id_a = self.__history_with_ok_collection(collection_type="list:pair", history_id=history_id)
         inputs = json.dumps(
             {
-                "f1": {"batch": True, "values": [{"src": "hdca", "id": list_id_a, "map_over_type": "paired"}]},
+                "f1": {"batch": True, "values": [{"src": "hdca", "id": list_id_a, "subcollection_type": "paired"}]},
             }
         )
         self._job_search(tool_id="collection_paired_test", history_id=history_id, inputs=inputs)
 
     def _get_simple_rerun_params(self, history_id, private=False):
         list_id_a = self.__history_with_ok_collection(collection_type="list:pair", history_id=history_id)
-        inputs = {"f1": {"batch": True, "values": [{"src": "hdca", "id": list_id_a, "map_over_type": "paired"}]}}
+        inputs = {"f1": {"batch": True, "values": [{"src": "hdca", "id": list_id_a, "subcollection_type": "paired"}]}}
         run_response = self._run(
             history_id=history_id,
             tool_id="collection_paired_test",
@@ -907,7 +907,7 @@ def test_job_build_for_rerun_list_list(self, history_id):
         assert first_element["element_type"] == "dataset_collection"
         assert first_element["element_identifier"] == "test0"
         assert first_element["model_class"] == "DatasetCollectionElement"
-        inputs = {"input1": {"batch": True, "values": [{"src": "hdca", "id": list_list_id, "map_over_type": "list"}]}}
+        inputs = {"input1": {"batch": True, "values": [{"src": "hdca", "id": list_list_id, "subcollection_type": "list"}]}}
         run_response = self._run(
             history_id=history_id,
             tool_id="identifier_collection",

From 250fd2950644524c9a2673fa3284ebf0af2cceaf Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 31 Aug 2023 13:21:41 +0300
Subject: [PATCH 71/86] Move source type helper into reusable function

---
 .../Form/Elements/FormData/FormData.vue       | 24 ++++++++++++-------
 lib/galaxy_test/api/test_jobs.py              |  4 +++-
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 2845140a8687..7f9cd4b37f2e 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -342,6 +342,19 @@ function onDrop() {
     }
 }
 
+/**
+ * Determine source type of a given value
+ */
+function getSourceType(val: DataOption) {
+    if (isDCE.value) {
+        return val.is_dataset ? SOURCE.DATASET : SOURCE.COLLECTION;
+    } else if (isLDDA.value) {
+        return SOURCE.DATASET;
+    } else {
+        return val.src;
+    }
+}
+
 /**
  * Parse incoming value for select field
  */
@@ -383,15 +396,8 @@ function setValue(val: Array<DataOption> | DataOption | null) {
             const hasSubcollectionType = values.find((v) => !!v.subcollection_type);
             const isMultiple = values.length > 1;
 
-            // Determine source representation
-            let sourceType: string | null = null;
-            if (isDCE.value) {
-                sourceType = values[0].is_dataset ? SOURCE.DATASET : SOURCE.COLLECTION;
-            } else if (isLDDA.value) {
-                sourceType = SOURCE.DATASET;
-            } else {
-                sourceType = values[0].src;
-            }
+            // Determine source representation (uses only the initial value)
+            const sourceType = getSourceType(values[0]);
 
             // Identify matching variant
             const variantIndex = variant.value.findIndex(
diff --git a/lib/galaxy_test/api/test_jobs.py b/lib/galaxy_test/api/test_jobs.py
index d59d79637e77..a72333cb0602 100644
--- a/lib/galaxy_test/api/test_jobs.py
+++ b/lib/galaxy_test/api/test_jobs.py
@@ -907,7 +907,9 @@ def test_job_build_for_rerun_list_list(self, history_id):
         assert first_element["element_type"] == "dataset_collection"
         assert first_element["element_identifier"] == "test0"
         assert first_element["model_class"] == "DatasetCollectionElement"
-        inputs = {"input1": {"batch": True, "values": [{"src": "hdca", "id": list_list_id, "subcollection_type": "list"}]}}
+        inputs = {
+            "input1": {"batch": True, "values": [{"src": "hdca", "id": list_list_id, "subcollection_type": "list"}]}
+        }
         run_response = self._run(
             history_id=history_id,
             tool_id="identifier_collection",

From 99a50e89f51acf9cab855fc7b97223369a698266 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 31 Aug 2023 14:38:31 +0300
Subject: [PATCH 72/86] Add source type representation to dce label,
 consolidate matching operation

---
 .../Form/Elements/FormData/FormData.test.js   | 10 +++-
 .../Form/Elements/FormData/FormData.vue       | 59 ++++++++-----------
 client/src/utils/navigation/navigation.yml    |  2 +-
 lib/galaxy_test/selenium/test_tool_form.py    |  2 +-
 4 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.test.js b/client/src/components/Form/Elements/FormData/FormData.test.js
index c414d01f5ac1..170492558c31 100644
--- a/client/src/components/Form/Elements/FormData/FormData.test.js
+++ b/client/src/components/Form/Elements/FormData/FormData.test.js
@@ -164,9 +164,9 @@ describe("FormData", () => {
         };
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
         expect(wrapper.emitted().input.length).toEqual(1);
-        const message = wrapper.findAll(".form-data-entry-label");
+        const message = wrapper.findAll("[data-description='form data label']");
         expect(message.length).toBe(1);
-        expect(message.at(0).text()).toBe("1. dceName1 (dce)");
+        expect(message.at(0).text()).toBe("1. dceName1 (as dataset)");
         expect(wrapper.find(".btn-group").exists()).toBeFalsy();
         const closeButton = wrapper.find(".alert .close");
         await closeButton.trigger("click");
@@ -198,6 +198,12 @@ describe("FormData", () => {
             values: [{ id: "dce3", subcollection_type: "subcollectionType", src: "dce" }],
         };
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
+        const message = wrapper.findAll("[data-description='form data label']");
+        expect(message.length).toBe(1);
+        expect(message.at(0).text()).toBe("1. dceName3 (as dataset collection)");
+        const messageSubcollection = wrapper.findAll("[data-description='form data collection type']");
+        expect(messageSubcollection.length).toBe(1);
+        expect(messageSubcollection.at(0).text()).toBe("Batch mode input with collection type: subcollectionType.");
     });
 
     it("dataset collection element as hdca mapped to non-batch field", async () => {
diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 7f9cd4b37f2e..48712a01d0ad 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -71,14 +71,14 @@ const keepOptions: Ref<Record<string, SelectOption>> = ref({});
 const waiting = ref(false);
 
 /**
- * Determine wether the file dialog can be used or not
+ * Determine whether the file dialog can be used or not
  */
 const canBrowse = computed(() => variant.value && !!variant.value.find((v) => v.src === SOURCE.DATASET));
 
 /**
  * Provides the currently shown source type
  */
-const currentSource = computed(() => currentVariant.value && currentVariant.value.src);
+const currentSource = computed(() => (currentVariant.value ? currentVariant.value.src : null));
 
 /**
  * Interface between incoming input value and select field value
@@ -177,7 +177,7 @@ const isLDDA = computed(() => {
 /**
  * Provides placeholder label for select field
  */
-const placeholder = computed(() => (currentSource.value === SOURCE.DATASET ? "dataset" : "dataset collection"));
+const placeholder = computed(() => getSourceLabel(currentSource.value));
 
 /**
  * Provides the array of available variants associated with a specific form data type
@@ -251,39 +251,18 @@ function handleIncoming(incoming: Record<string, unknown>, partial = true) {
     }
 }
 
-/**
- * Matches entries to available options
- */
-function matchOption(entry: DataOption) {
-    if ("src" in entry && entry.src) {
-        const options = props.options[entry.src] || [];
-        const option = options.find((v) => v.id === entry.id && v.src === entry.src);
-        if (option) {
-            return option;
-        }
-    }
-    return null;
-}
-
-/**
- * Matches entry name from available options
- */
-function matchName(entry: DataOption) {
-    const option = matchOption(entry);
-    const name = option?.name || entry.id;
-    const src = option?.src || "unknown";
-    return `${name} (${src})`;
-}
-
 /**
  * Matches an array of values to available options
  */
 function matchValues(entries: Array<DataOption>) {
     const values: Array<DataOption> = [];
-    entries.forEach((val) => {
-        const option = matchOption(val);
-        if (option) {
-            values.push(option);
+    entries.forEach((entry) => {
+        if ("src" in entry && entry.src) {
+            const options = props.options[entry.src] || [];
+            const option = options.find((v) => v.id === entry.id && v.src === entry.src);
+            if (option) {
+                values.push({ ...option, name: option.name || entry.id });
+            }
         }
     });
     return values;
@@ -342,6 +321,13 @@ function onDrop() {
     }
 }
 
+/**
+ * Return user-friendly data source label
+ */
+function getSourceLabel(src: string | null) {
+    return src === SOURCE.DATASET ? "dataset" : "dataset collection";
+}
+
 /**
  * Determine source type of a given value
  */
@@ -470,8 +456,15 @@ watch(
         @drop.prevent="onDrop">
         <b-alert v-if="isDCE || isLDDA" variant="info" dismissible show @dismissed="$emit('input', null)">
             <span v-localize class="font-weight-bold">Using the following datasets (dismiss to reset):</span>
-            <div v-for="(v, vIndex) of props.value.values" :key="vIndex">
-                <span class="form-data-entry-label ml-2">{{ vIndex + 1 }}. {{ matchName(v) }}</span>
+            <div v-for="(v, vIndex) of matchValues(props.value.values)" :key="vIndex">
+                <span class="ml-2" data-description="form data label">
+                    <span>{{ vIndex + 1 }}.</span>
+                    <span>{{ v.name }}</span>
+                    <span>(as {{ getSourceLabel(getSourceType(v)) }})</span>
+                </span>
+                <small v-if="v.subcollection_type" class="ml-2" data-description="form data collection type">
+                    Batch mode input with collection type: {{ v.subcollection_type }}.
+                </small>
             </div>
         </b-alert>
         <div v-else>
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 7d05df6c09d7..a3843a3bc27f 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -558,7 +558,7 @@ tool_form:
     parameter_data_input_single: 'div.ui-form-element[id="form-element-${parameter}"] button[title="Single dataset"]'
     parameter_data_input_collection: 'div.ui-form-element[id="form-element-${parameter}"] button[title="Dataset collection"]'
     parameter_data_select: 'div.ui-form-element[id="form-element-${parameter}"] .multiselect'
-    parameter_data_entry_label: 'div.ui-form-element[id="form-element-${parameter}"] .form-data-entry-label'
+    parameter_data_entry_label: 'div.ui-form-element[id="form-element-${parameter}"] [data-description="form data label"]'
 
     repeat_insert: '[data-description="repeat insert"]'
     repeat_move_up: '#${parameter}_up'
diff --git a/lib/galaxy_test/selenium/test_tool_form.py b/lib/galaxy_test/selenium/test_tool_form.py
index 43f6f7f07b5c..d8e0261b5133 100644
--- a/lib/galaxy_test/selenium/test_tool_form.py
+++ b/lib/galaxy_test/selenium/test_tool_form.py
@@ -243,7 +243,7 @@ def test_rerun_dataset_collection_element(self):
         self.hda_click_primary_action_button(1, "rerun")
         self.sleep_for(self.wait_types.UX_RENDER)
         entry_label = self.components.tool_form.parameter_data_entry_label(parameter="input1").wait_for_visible()
-        assert entry_label.text == "1. test0 (dce)"
+        assert entry_label.text == "1. test0 (as dataset collection)"
         self.tool_form_execute()
         self.components.history_panel.collection_view.back_to_history.wait_for_and_click()
         self.history_panel_wait_for_hid_ok(9)

From d62b55de38b99af67e1ffcf561783c65c14660b6 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 1 Sep 2023 12:51:39 +0300
Subject: [PATCH 73/86] Refactoring and clean up, use matched values as
 computed value

---
 .../Form/Elements/FormData/FormData.vue       | 255 +++++++++---------
 client/src/utils/navigation/navigation.yml    |   2 +-
 lib/galaxy_test/selenium/test_tool_form.py    |   4 +-
 3 files changed, 132 insertions(+), 129 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 48712a01d0ad..4129cadb4bf1 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -90,7 +90,7 @@ const currentValue = computed({
     },
     set: (val) => {
         eventBus.$emit("waiting", true);
-        setValue(val);
+        $emit("input", createValue(val));
     },
 });
 
@@ -174,6 +174,26 @@ const isLDDA = computed(() => {
         return false;
     }
 });
+
+/**
+ * Matches an array of values to available options
+ */
+const matchedValues = computed(() => {
+    const values: Array<DataOption> = [];
+    if (props.value && props.value.values.length > 0) {
+        props.value.values.forEach((entry) => {
+            if ("src" in entry && entry.src) {
+                const options = props.options[entry.src] || [];
+                const option = options.find((v) => v.id === entry.id && v.src === entry.src);
+                if (option) {
+                    values.push({ ...option, name: option.name || entry.id });
+                }
+            }
+        });
+    }
+    return values;
+});
+
 /**
  * Provides placeholder label for select field
  */
@@ -198,6 +218,108 @@ function clearHighlighting(timeout = 1000) {
     }, timeout);
 }
 
+/**
+ * Create final input element value
+ */
+function createValue(val: Array<DataOption> | DataOption | null) {
+    if (val) {
+        const values = Array.isArray(val) ? val : [val];
+        if (variant.value && values.length > 0 && values[0]) {
+            const hasSubcollectionType = values.find((v) => !!v.subcollection_type);
+            const isMultiple = values.length > 1;
+
+            // Determine source representation (uses only the initial value)
+            const sourceType = getSourceType(values[0]);
+
+            // Identify matching variant
+            const variantIndex = variant.value.findIndex(
+                (v) => (!isMultiple || v.multiple === isMultiple) && v.src === sourceType
+            );
+
+            // Determine batch mode
+            let batch: string = BATCH.DISABLED;
+            if (variantIndex >= 0) {
+                const variantDetails = variant.value[variantIndex];
+                if (variantDetails) {
+                    if ((isLDDA.value || isDCE.value) && variantDetails.batch) {
+                        batch = variantDetails.batch;
+                    } else {
+                        // Switch to another field type if source differs from current field
+                        if (currentVariant.value && currentVariant.value.src !== sourceType) {
+                            currentField.value = variantIndex;
+                        }
+                        batch = (currentVariant.value && currentVariant.value.batch) || BATCH.DISABLED;
+                    }
+                }
+            }
+
+            // Emit new value
+            return {
+                batch: batch !== BATCH.DISABLED || !!hasSubcollectionType,
+                product: batch === BATCH.ENABLED && !currentLinked.value,
+                values: values.map((entry) => ({
+                    id: entry.id,
+                    src: entry.src,
+                    subcollection_type: entry.subcollection_type || null,
+                })),
+            };
+        }
+    } else {
+        return null;
+    }
+}
+
+/**
+ * Return user-friendly data source label
+ */
+function getSourceLabel(src: string | null) {
+    return src === SOURCE.DATASET ? "dataset" : "dataset collection";
+}
+
+/**
+ * Determine source type of a given value
+ */
+function getSourceType(val: DataOption) {
+    if (isDCE.value) {
+        return val.is_dataset ? SOURCE.DATASET : SOURCE.COLLECTION;
+    } else if (isLDDA.value) {
+        return SOURCE.DATASET;
+    } else {
+        return val.src;
+    }
+}
+
+/**
+ * Parse incoming value for select field
+ */
+function getValue() {
+    const value: Array<DataOption> = [];
+    if (props.value) {
+        for (const v of props.value.values) {
+            const foundEntry = formattedOptions.value.find(
+                (entry) => entry.value && entry.value.id === v.id && entry.value.src === v.src
+            );
+            if (foundEntry && foundEntry.value) {
+                value.push(foundEntry.value);
+                if (!currentVariant.value?.multiple) {
+                    break;
+                }
+            }
+        }
+        if (value.length > 0) {
+            return value;
+        }
+    }
+    if (!props.optional && formattedOptions.value.length > 0) {
+        const firstEntry = formattedOptions.value && formattedOptions.value[0];
+        if (firstEntry && firstEntry.value) {
+            value.push(firstEntry.value);
+            return value;
+        }
+    }
+    return null;
+}
+
 /** Add values from drag/drop or data dialog sources */
 function handleIncoming(incoming: Record<string, unknown>, partial = true) {
     if (incoming) {
@@ -251,23 +373,6 @@ function handleIncoming(incoming: Record<string, unknown>, partial = true) {
     }
 }
 
-/**
- * Matches an array of values to available options
- */
-function matchValues(entries: Array<DataOption>) {
-    const values: Array<DataOption> = [];
-    entries.forEach((entry) => {
-        if ("src" in entry && entry.src) {
-            const options = props.options[entry.src] || [];
-            const option = options.find((v) => v.id === entry.id && v.src === entry.src);
-            if (option) {
-                values.push({ ...option, name: option.name || entry.id });
-            }
-        }
-    });
-    return values;
-}
-
 /**
  * Open file dialog
  */
@@ -321,116 +426,14 @@ function onDrop() {
     }
 }
 
-/**
- * Return user-friendly data source label
- */
-function getSourceLabel(src: string | null) {
-    return src === SOURCE.DATASET ? "dataset" : "dataset collection";
-}
-
-/**
- * Determine source type of a given value
- */
-function getSourceType(val: DataOption) {
-    if (isDCE.value) {
-        return val.is_dataset ? SOURCE.DATASET : SOURCE.COLLECTION;
-    } else if (isLDDA.value) {
-        return SOURCE.DATASET;
-    } else {
-        return val.src;
-    }
-}
-
-/**
- * Parse incoming value for select field
- */
-function getValue() {
-    const value: Array<DataOption> = [];
-    if (props.value) {
-        for (const v of props.value.values) {
-            const foundEntry = formattedOptions.value.find(
-                (entry) => entry.value && entry.value.id === v.id && entry.value.src === v.src
-            );
-            if (foundEntry && foundEntry.value) {
-                value.push(foundEntry.value);
-                if (!currentVariant.value?.multiple) {
-                    break;
-                }
-            }
-        }
-        if (value.length > 0) {
-            return value;
-        }
-    }
-    if (!props.optional && formattedOptions.value.length > 0) {
-        const firstEntry = formattedOptions.value && formattedOptions.value[0];
-        if (firstEntry && firstEntry.value) {
-            value.push(firstEntry.value);
-            return value;
-        }
-    }
-    return null;
-}
-
-/**
- * Process and emit value for select field
- */
-function setValue(val: Array<DataOption> | DataOption | null) {
-    if (val) {
-        const values = Array.isArray(val) ? val : [val];
-        if (variant.value && values.length > 0 && values[0]) {
-            const hasSubcollectionType = values.find((v) => !!v.subcollection_type);
-            const isMultiple = values.length > 1;
-
-            // Determine source representation (uses only the initial value)
-            const sourceType = getSourceType(values[0]);
-
-            // Identify matching variant
-            const variantIndex = variant.value.findIndex(
-                (v) => (!isMultiple || v.multiple === isMultiple) && v.src === sourceType
-            );
-
-            // Determine batch mode
-            let batch: string = BATCH.DISABLED;
-            if (variantIndex >= 0) {
-                const variantDetails = variant.value[variantIndex];
-                if (variantDetails) {
-                    if ((isLDDA.value || isDCE.value) && variantDetails.batch) {
-                        batch = variantDetails.batch;
-                    } else {
-                        // Switch to another field type if source differs from current field
-                        if (currentVariant.value && currentVariant.value.src !== sourceType) {
-                            currentField.value = variantIndex;
-                        }
-                        batch = (currentVariant.value && currentVariant.value.batch) || BATCH.DISABLED;
-                    }
-                }
-            }
-
-            // Emit new value
-            $emit("input", {
-                batch: batch !== BATCH.DISABLED || !!hasSubcollectionType,
-                product: batch === BATCH.ENABLED && !currentLinked.value,
-                values: values.map((entry) => ({
-                    id: entry.id,
-                    src: entry.src,
-                    subcollection_type: entry.subcollection_type || null,
-                })),
-            });
-        }
-    } else {
-        $emit("input", null);
-    }
-}
-
 onMounted(() => {
     eventBus.$on("waiting", (value: boolean) => {
         waiting.value = value;
     });
     if (props.value && props.value.values) {
-        setValue(matchValues(props.value.values));
+        $emit("input", createValue(matchedValues.value));
     } else {
-        setValue(currentValue.value);
+        $emit("input", createValue(currentValue.value));
     }
 });
 
@@ -441,7 +444,7 @@ watch(
     () => [props.options, currentLinked.value, currentVariant.value],
     () => {
         if (!isLDDA.value && !isDCE.value) {
-            setValue(currentValue.value);
+            $emit("input", createValue(currentValue.value));
         }
     }
 );
@@ -456,12 +459,12 @@ watch(
         @drop.prevent="onDrop">
         <b-alert v-if="isDCE || isLDDA" variant="info" dismissible show @dismissed="$emit('input', null)">
             <span v-localize class="font-weight-bold">Using the following datasets (dismiss to reset):</span>
-            <div v-for="(v, vIndex) of matchValues(props.value.values)" :key="vIndex">
-                <span class="ml-2" data-description="form data label">
+            <div v-for="(v, vIndex) of matchedValues" :key="vIndex">
+                <div class="ml-2" data-description="form data label">
                     <span>{{ vIndex + 1 }}.</span>
                     <span>{{ v.name }}</span>
                     <span>(as {{ getSourceLabel(getSourceType(v)) }})</span>
-                </span>
+                </div>
                 <small v-if="v.subcollection_type" class="ml-2" data-description="form data collection type">
                     Batch mode input with collection type: {{ v.subcollection_type }}.
                 </small>
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index a3843a3bc27f..52cbbe2886bc 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -557,8 +557,8 @@ tool_form:
     parameter_textarea: 'div.ui-form-element[id="form-element-${parameter}"] textarea'
     parameter_data_input_single: 'div.ui-form-element[id="form-element-${parameter}"] button[title="Single dataset"]'
     parameter_data_input_collection: 'div.ui-form-element[id="form-element-${parameter}"] button[title="Dataset collection"]'
+    parameter_data_label: 'div.ui-form-element[id="form-element-${parameter}"] [data-description="form data label"]'
     parameter_data_select: 'div.ui-form-element[id="form-element-${parameter}"] .multiselect'
-    parameter_data_entry_label: 'div.ui-form-element[id="form-element-${parameter}"] [data-description="form data label"]'
 
     repeat_insert: '[data-description="repeat insert"]'
     repeat_move_up: '#${parameter}_up'
diff --git a/lib/galaxy_test/selenium/test_tool_form.py b/lib/galaxy_test/selenium/test_tool_form.py
index d8e0261b5133..4c80f83a50cf 100644
--- a/lib/galaxy_test/selenium/test_tool_form.py
+++ b/lib/galaxy_test/selenium/test_tool_form.py
@@ -242,8 +242,8 @@ def test_rerun_dataset_collection_element(self):
         self.sleep_for(self.wait_types.UX_RENDER)
         self.hda_click_primary_action_button(1, "rerun")
         self.sleep_for(self.wait_types.UX_RENDER)
-        entry_label = self.components.tool_form.parameter_data_entry_label(parameter="input1").wait_for_visible()
-        assert entry_label.text == "1. test0 (as dataset collection)"
+        data_label = self.components.tool_form.parameter_data_label(parameter="input1").wait_for_visible()
+        assert data_label.text == "1. test0 (as dataset collection)"
         self.tool_form_execute()
         self.components.history_panel.collection_view.back_to_history.wait_for_and_click()
         self.history_panel_wait_for_hid_ok(9)

From d3d5811646ef4fcc0e910d83fb242fa9c81465e7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 1 Sep 2023 15:02:39 +0300
Subject: [PATCH 74/86] Add batch mode info to dce data label

---
 .../Form/Elements/FormData/FormData.test.js   |  4 ++++
 .../Form/Elements/FormData/FormData.vue       | 23 +++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/client/src/components/Form/Elements/FormData/FormData.test.js b/client/src/components/Form/Elements/FormData/FormData.test.js
index 170492558c31..ef5c1971f8a0 100644
--- a/client/src/components/Form/Elements/FormData/FormData.test.js
+++ b/client/src/components/Form/Elements/FormData/FormData.test.js
@@ -167,6 +167,8 @@ describe("FormData", () => {
         const message = wrapper.findAll("[data-description='form data label']");
         expect(message.length).toBe(1);
         expect(message.at(0).text()).toBe("1. dceName1 (as dataset)");
+        const messageBatch = wrapper.find("[data-description='form data batch label']");
+        expect(messageBatch.exists()).toBeFalsy();
         expect(wrapper.find(".btn-group").exists()).toBeFalsy();
         const closeButton = wrapper.find(".alert .close");
         await closeButton.trigger("click");
@@ -185,6 +187,8 @@ describe("FormData", () => {
         });
         const value_0 = { batch: true, product: false, values: [{ id: "dce2", subcollection_type: null, src: "dce" }] };
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
+        const messageBatch = wrapper.find("[data-description='form data batch label']");
+        expect(messageBatch.text()).toBe("This data input will be submitted in batch mode.");
     });
 
     it("dataset collection element as hdca mapped to batch field", async () => {
diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 4129cadb4bf1..e22f7f0625cf 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -175,6 +175,25 @@ const isLDDA = computed(() => {
     }
 });
 
+/**
+ * Determines if matched values are to be submitted in batch mode
+ */
+const matchedBatchMode = computed(() => {
+    const values = matchedValues.value;
+    if (variant.value && values.length > 0 && values[0]) {
+        const hasSubcollectionType = values.find((v) => !!v.subcollection_type);
+        const isMultiple = values.length > 1;
+        const sourceType = getSourceType(values[0]);
+        const variantDetails = variant.value.find(
+            (v) => (!isMultiple || v.multiple === isMultiple) && v.src === sourceType
+        );
+        if (variantDetails) {
+            return variantDetails.batch !== BATCH.DISABLED || !!hasSubcollectionType;
+        }
+    }
+    return false;
+});
+
 /**
  * Matches an array of values to available options
  */
@@ -459,6 +478,10 @@ watch(
         @drop.prevent="onDrop">
         <b-alert v-if="isDCE || isLDDA" variant="info" dismissible show @dismissed="$emit('input', null)">
             <span v-localize class="font-weight-bold">Using the following datasets (dismiss to reset):</span>
+            <div v-if="matchedBatchMode" data-description="form data batch label">
+                <FontAwesomeIcon icon="fa-exclamation" />
+                <span v-localize class="ml-1"> This data input will be submitted in batch mode. </span>
+            </div>
             <div v-for="(v, vIndex) of matchedValues" :key="vIndex">
                 <div class="ml-2" data-description="form data label">
                     <span>{{ vIndex + 1 }}.</span>

From 7ac7c82920bf88836684c327057d8bf7ea36b49a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 1 Sep 2023 18:32:30 +0300
Subject: [PATCH 75/86] Skip input field matching to determine batch state if
 subcollection exists

---
 client/src/components/Form/Elements/FormData/FormData.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index e22f7f0625cf..384cee05dc15 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -182,13 +182,16 @@ const matchedBatchMode = computed(() => {
     const values = matchedValues.value;
     if (variant.value && values.length > 0 && values[0]) {
         const hasSubcollectionType = values.find((v) => !!v.subcollection_type);
+        if (hasSubcollectionType) {
+            return true;
+        }
         const isMultiple = values.length > 1;
         const sourceType = getSourceType(values[0]);
         const variantDetails = variant.value.find(
             (v) => (!isMultiple || v.multiple === isMultiple) && v.src === sourceType
         );
         if (variantDetails) {
-            return variantDetails.batch !== BATCH.DISABLED || !!hasSubcollectionType;
+            return variantDetails.batch !== BATCH.DISABLED;
         }
     }
     return false;

From 092c5c034ce7450a6824ec22a1f9f5b8f5dcc218 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 5 Sep 2023 19:15:29 +0300
Subject: [PATCH 76/86] Rename subcollection_type to map_over_type to avoid the
 need for an api depreciation

---
 .../Form/Elements/FormData/FormData.test.js   | 50 +++++++++----------
 .../Form/Elements/FormData/FormData.vue       | 14 +++---
 .../Form/Elements/FormData/types.ts           |  2 +-
 lib/galaxy/tools/parameters/basic.py          |  4 +-
 lib/galaxy/tools/parameters/meta.py           |  2 +-
 lib/galaxy_test/api/test_jobs.py              |  8 ++-
 lib/galaxy_test/api/test_tools.py             | 18 +++----
 7 files changed, 48 insertions(+), 50 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.test.js b/client/src/components/Form/Elements/FormData/FormData.test.js
index ef5c1971f8a0..a9b378067253 100644
--- a/client/src/components/Form/Elements/FormData/FormData.test.js
+++ b/client/src/components/Form/Elements/FormData/FormData.test.js
@@ -29,7 +29,7 @@ const defaultOptions = {
     dce: [
         { id: "dce1", name: "dceName1", src: "dce", is_dataset: true },
         { id: "dce2", name: "dceName2", src: "dce" },
-        { id: "dce3", name: "dceName3", src: "dce", subcollection_type: "subcollectionType" },
+        { id: "dce3", name: "dceName3", src: "dce", map_over_type: "mapOverType" },
         { id: "dce4", name: "dceName4", src: "dce", is_dataset: true },
     ],
     hda: [
@@ -55,12 +55,12 @@ describe("FormData", () => {
         const value_0 = {
             batch: false,
             product: false,
-            values: [{ id: "hda3", src: "hda", subcollection_type: null }],
+            values: [{ id: "hda3", src: "hda", map_over_type: null }],
         };
         const value_1 = {
             batch: false,
             product: false,
-            values: [{ id: "hda1", src: "hda", subcollection_type: null }],
+            values: [{ id: "hda1", src: "hda", map_over_type: null }],
         };
         const options = wrapper.find(".btn-group").findAll("button");
         expect(options.length).toBe(4);
@@ -114,8 +114,8 @@ describe("FormData", () => {
             batch: false,
             product: false,
             values: [
-                { id: "hda2", subcollection_type: null, src: "hda" },
-                { id: "hda3", subcollection_type: null, src: "hda" },
+                { id: "hda2", map_over_type: null, src: "hda" },
+                { id: "hda3", map_over_type: null, src: "hda" },
             ],
         });
         expect(wrapper.emitted().input.length).toEqual(1);
@@ -127,8 +127,8 @@ describe("FormData", () => {
             batch: false,
             product: false,
             values: [
-                { id: "hda2", subcollection_type: null, src: "hda" },
-                { id: "hda3", subcollection_type: null, src: "hda" },
+                { id: "hda2", map_over_type: null, src: "hda" },
+                { id: "hda3", map_over_type: null, src: "hda" },
             ],
         };
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
@@ -136,7 +136,7 @@ describe("FormData", () => {
         const value_1 = {
             batch: false,
             product: false,
-            values: [{ id: "hda2", subcollection_type: null, src: "hda" }],
+            values: [{ id: "hda2", map_over_type: null, src: "hda" }],
         };
         expect(wrapper.emitted().input[1][0]).toEqual(value_1);
         await wrapper.setProps({ value: value_1 });
@@ -144,7 +144,7 @@ describe("FormData", () => {
         const value_2 = {
             batch: false,
             product: false,
-            values: [{ id: "hda2", subcollection_type: null, src: "hda" }],
+            values: [{ id: "hda2", map_over_type: null, src: "hda" }],
         };
         expect(wrapper.emitted().input[1][0]).toEqual(value_2);
         await wrapper.setProps({ value: value_2 });
@@ -160,7 +160,7 @@ describe("FormData", () => {
         const value_0 = {
             batch: false,
             product: false,
-            values: [{ id: "dce1", subcollection_type: null, src: "dce" }],
+            values: [{ id: "dce1", map_over_type: null, src: "dce" }],
         };
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
         expect(wrapper.emitted().input.length).toEqual(1);
@@ -180,12 +180,12 @@ describe("FormData", () => {
         expect(wrapper.emitted().input.length).toEqual(2);
     });
 
-    it("dataset collection element as hdca without subcollection_type", async () => {
+    it("dataset collection element as hdca without map_over_type", async () => {
         const wrapper = createTarget({
             value: { values: [{ id: "dce2", src: "dce" }] },
             options: defaultOptions,
         });
-        const value_0 = { batch: true, product: false, values: [{ id: "dce2", subcollection_type: null, src: "dce" }] };
+        const value_0 = { batch: true, product: false, values: [{ id: "dce2", map_over_type: null, src: "dce" }] };
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
         const messageBatch = wrapper.find("[data-description='form data batch label']");
         expect(messageBatch.text()).toBe("This data input will be submitted in batch mode.");
@@ -199,7 +199,7 @@ describe("FormData", () => {
         const value_0 = {
             batch: true,
             product: false,
-            values: [{ id: "dce3", subcollection_type: "subcollectionType", src: "dce" }],
+            values: [{ id: "dce3", map_over_type: "mapOverType", src: "dce" }],
         };
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
         const message = wrapper.findAll("[data-description='form data label']");
@@ -207,7 +207,7 @@ describe("FormData", () => {
         expect(message.at(0).text()).toBe("1. dceName3 (as dataset collection)");
         const messageSubcollection = wrapper.findAll("[data-description='form data collection type']");
         expect(messageSubcollection.length).toBe(1);
-        expect(messageSubcollection.at(0).text()).toBe("Batch mode input with collection type: subcollectionType.");
+        expect(messageSubcollection.at(0).text()).toBe("Batch mode input with collection type: mapOverType.");
     });
 
     it("dataset collection element as hdca mapped to non-batch field", async () => {
@@ -219,7 +219,7 @@ describe("FormData", () => {
         const value_0 = {
             batch: true,
             product: false,
-            values: [{ id: "dce3", subcollection_type: "subcollectionType", src: "dce" }],
+            values: [{ id: "dce3", map_over_type: "mapOverType", src: "dce" }],
         };
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
     });
@@ -233,7 +233,7 @@ describe("FormData", () => {
         const value_0 = {
             batch: false,
             product: false,
-            values: [{ id: "hdca4", subcollection_type: null, src: "hdca" }],
+            values: [{ id: "hdca4", map_over_type: null, src: "hdca" }],
         };
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
     });
@@ -252,8 +252,8 @@ describe("FormData", () => {
             batch: true,
             product: false,
             values: [
-                { id: "dce1", subcollection_type: null, src: "dce" },
-                { id: "dce4", subcollection_type: null, src: "dce" },
+                { id: "dce1", map_over_type: null, src: "dce" },
+                { id: "dce4", map_over_type: null, src: "dce" },
             ],
         };
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
@@ -270,7 +270,7 @@ describe("FormData", () => {
         expect(wrapper.emitted().input[1][0]).toEqual({
             batch: true,
             product: false,
-            values: [{ id: "hdca4", subcollection_type: null, src: "hdca" }],
+            values: [{ id: "hdca4", map_over_type: null, src: "hdca" }],
         });
         eventStore.setDragData({ id: "hda2", history_content_type: "dataset" });
         dispatchEvent(wrapper, "dragenter");
@@ -278,7 +278,7 @@ describe("FormData", () => {
         expect(wrapper.emitted().input[2][0]).toEqual({
             batch: false,
             product: false,
-            values: [{ id: "hda2", subcollection_type: null, src: "hda" }],
+            values: [{ id: "hda2", map_over_type: null, src: "hda" }],
         });
     });
 
@@ -291,7 +291,7 @@ describe("FormData", () => {
         expect(wrapper.emitted().input[0][0]).toEqual({
             batch: false,
             product: false,
-            values: [{ id: "hda3", subcollection_type: null, src: "hda" }],
+            values: [{ id: "hda3", map_over_type: null, src: "hda" }],
         });
         const noCheckLinked = wrapper.find("input[type='checkbox']");
         expect(noCheckLinked.exists()).toBeFalsy();
@@ -299,7 +299,7 @@ describe("FormData", () => {
         expect(wrapper.emitted().input[1][0]).toEqual({
             batch: true,
             product: false,
-            values: [{ id: "hda3", subcollection_type: null, src: "hda" }],
+            values: [{ id: "hda3", map_over_type: null, src: "hda" }],
         });
         const checkLinked = wrapper.find("input[type='checkbox']");
         expect(wrapper.find(".custom-switch span").text()).toBe(
@@ -313,7 +313,7 @@ describe("FormData", () => {
         expect(wrapper.emitted().input[2][0]).toEqual({
             batch: true,
             product: true,
-            values: [{ id: "hda3", subcollection_type: null, src: "hda" }],
+            values: [{ id: "hda3", map_over_type: null, src: "hda" }],
         });
     });
 
@@ -334,7 +334,7 @@ describe("FormData", () => {
             expect(wrapper.emitted().input[i][0]).toEqual({
                 batch: false,
                 product: false,
-                values: [{ id: "hdca4", subcollection_type: null, src: "hdca" }],
+                values: [{ id: "hdca4", map_over_type: null, src: "hdca" }],
             });
         }
         expect(wrapper.emitted().input.length).toEqual(2);
@@ -346,7 +346,7 @@ describe("FormData", () => {
         expect(wrapper.emitted().input[2][0]).toEqual({
             batch: false,
             product: false,
-            values: [{ id: "hda3", subcollection_type: null, src: "hda" }],
+            values: [{ id: "hda3", map_over_type: null, src: "hda" }],
         });
         const newSelectedValues = wrapper.findAll(SELECTED_VALUE);
         expect(newSelectedValues.at(0).text()).toBe("3: hdaName3");
diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 384cee05dc15..1714cb27f4ae 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -181,8 +181,8 @@ const isLDDA = computed(() => {
 const matchedBatchMode = computed(() => {
     const values = matchedValues.value;
     if (variant.value && values.length > 0 && values[0]) {
-        const hasSubcollectionType = values.find((v) => !!v.subcollection_type);
-        if (hasSubcollectionType) {
+        const hasMapOverType = values.find((v) => !!v.map_over_type);
+        if (hasMapOverType) {
             return true;
         }
         const isMultiple = values.length > 1;
@@ -247,7 +247,7 @@ function createValue(val: Array<DataOption> | DataOption | null) {
     if (val) {
         const values = Array.isArray(val) ? val : [val];
         if (variant.value && values.length > 0 && values[0]) {
-            const hasSubcollectionType = values.find((v) => !!v.subcollection_type);
+            const hasMapOverType = values.find((v) => !!v.map_over_type);
             const isMultiple = values.length > 1;
 
             // Determine source representation (uses only the initial value)
@@ -277,12 +277,12 @@ function createValue(val: Array<DataOption> | DataOption | null) {
 
             // Emit new value
             return {
-                batch: batch !== BATCH.DISABLED || !!hasSubcollectionType,
+                batch: batch !== BATCH.DISABLED || !!hasMapOverType,
                 product: batch === BATCH.ENABLED && !currentLinked.value,
                 values: values.map((entry) => ({
                     id: entry.id,
                     src: entry.src,
-                    subcollection_type: entry.subcollection_type || null,
+                    map_over_type: entry.map_over_type || null,
                 })),
             };
         }
@@ -491,8 +491,8 @@ watch(
                     <span>{{ v.name }}</span>
                     <span>(as {{ getSourceLabel(getSourceType(v)) }})</span>
                 </div>
-                <small v-if="v.subcollection_type" class="ml-2" data-description="form data collection type">
-                    Batch mode input with collection type: {{ v.subcollection_type }}.
+                <small v-if="v.map_over_type" class="ml-2" data-description="form data collection type">
+                    Batch mode input with collection type: {{ v.map_over_type }}.
                 </small>
             </div>
         </b-alert>
diff --git a/client/src/components/Form/Elements/FormData/types.ts b/client/src/components/Form/Elements/FormData/types.ts
index dcd0e4d679cf..46929c8b876d 100644
--- a/client/src/components/Form/Elements/FormData/types.ts
+++ b/client/src/components/Form/Elements/FormData/types.ts
@@ -3,8 +3,8 @@ export interface DataOption {
     hid: number;
     is_dataset?: boolean;
     keep: boolean;
+    map_over_type?: string;
     name: string;
     src: string;
-    subcollection_type?: string;
     tags: Array<string>;
 }
diff --git a/lib/galaxy/tools/parameters/basic.py b/lib/galaxy/tools/parameters/basic.py
index 7f5b3a18a379..cd12d0b80ccd 100644
--- a/lib/galaxy/tools/parameters/basic.py
+++ b/lib/galaxy/tools/parameters/basic.py
@@ -2299,7 +2299,7 @@ def append(list, hda, name, src, keep=False, subcollection_type=None):
                 "keep": keep,
             }
             if subcollection_type:
-                value["subcollection_type"] = subcollection_type
+                value["map_over_type"] = subcollection_type
             return list.append(value)
 
         def append_dce(dce):
@@ -2553,8 +2553,8 @@ def to_dict(self, trans, other_values=None):
             d["options"]["hdca"].append(
                 {
                     "id": trans.security.encode_id(hdca.id),
-                    "subcollection_type": subcollection_type,
                     "hid": hdca.hid,
+                    "map_over_type": subcollection_type,
                     "name": name,
                     "src": "hdca",
                     "tags": [t.user_tname if not t.value else f"{t.user_tname}:{t.value}" for t in hdca.tags],
diff --git a/lib/galaxy/tools/parameters/meta.py b/lib/galaxy/tools/parameters/meta.py
index a0380f53a825..a9f47ac0eae0 100644
--- a/lib/galaxy/tools/parameters/meta.py
+++ b/lib/galaxy/tools/parameters/meta.py
@@ -260,7 +260,7 @@ def __expand_collection_parameter(trans, input_key, incoming_val, collections_to
             if src != "hdca":
                 raise exceptions.ToolMetaParameterException(f"Invalid dataset collection source type {src}")
             encoded_hdc_id = incoming_val["id"]
-            subcollection_type = incoming_val.get("subcollection_type", None)
+            subcollection_type = incoming_val.get("map_over_type", None)
         except TypeError:
             encoded_hdc_id = incoming_val
             subcollection_type = None
diff --git a/lib/galaxy_test/api/test_jobs.py b/lib/galaxy_test/api/test_jobs.py
index a72333cb0602..c2e289bd435f 100644
--- a/lib/galaxy_test/api/test_jobs.py
+++ b/lib/galaxy_test/api/test_jobs.py
@@ -841,14 +841,14 @@ def test_search_with_hdca_list_pair_collection_mapped_over_pair_input(self, hist
         list_id_a = self.__history_with_ok_collection(collection_type="list:pair", history_id=history_id)
         inputs = json.dumps(
             {
-                "f1": {"batch": True, "values": [{"src": "hdca", "id": list_id_a, "subcollection_type": "paired"}]},
+                "f1": {"batch": True, "values": [{"src": "hdca", "id": list_id_a, "map_over_type": "paired"}]},
             }
         )
         self._job_search(tool_id="collection_paired_test", history_id=history_id, inputs=inputs)
 
     def _get_simple_rerun_params(self, history_id, private=False):
         list_id_a = self.__history_with_ok_collection(collection_type="list:pair", history_id=history_id)
-        inputs = {"f1": {"batch": True, "values": [{"src": "hdca", "id": list_id_a, "subcollection_type": "paired"}]}}
+        inputs = {"f1": {"batch": True, "values": [{"src": "hdca", "id": list_id_a, "map_over_type": "paired"}]}}
         run_response = self._run(
             history_id=history_id,
             tool_id="collection_paired_test",
@@ -907,9 +907,7 @@ def test_job_build_for_rerun_list_list(self, history_id):
         assert first_element["element_type"] == "dataset_collection"
         assert first_element["element_identifier"] == "test0"
         assert first_element["model_class"] == "DatasetCollectionElement"
-        inputs = {
-            "input1": {"batch": True, "values": [{"src": "hdca", "id": list_list_id, "subcollection_type": "list"}]}
-        }
+        inputs = {"input1": {"batch": True, "values": [{"src": "hdca", "id": list_list_id, "map_over_type": "list"}]}}
         run_response = self._run(
             history_id=history_id,
             tool_id="identifier_collection",
diff --git a/lib/galaxy_test/api/test_tools.py b/lib/galaxy_test/api/test_tools.py
index 402defd1d55f..2b8620d964fa 100644
--- a/lib/galaxy_test/api/test_tools.py
+++ b/lib/galaxy_test/api/test_tools.py
@@ -609,7 +609,7 @@ def test_unzip_nested(self):
             inputs = {
                 "input": {
                     "batch": True,
-                    "values": [{"src": "hdca", "subcollection_type": "paired", "id": hdca_id}],
+                    "values": [{"src": "hdca", "map_over_type": "paired", "id": hdca_id}],
                 }
             }
             response = self._run("__UNZIP_COLLECTION__", history_id, inputs, assert_ok=True)
@@ -795,7 +795,7 @@ def _run_filter(self, history_id, failed_hdca_id, batch=False):
             inputs = {
                 "input": {
                     "batch": batch,
-                    "values": [{"subcollection_type": "list:paired", "src": "hdca", "id": failed_hdca_id}],
+                    "values": [{"map_over_type": "list:paired", "src": "hdca", "id": failed_hdca_id}],
                 },
             }
         else:
@@ -1691,7 +1691,7 @@ def test_map_over_with_output_format_actions(self, history_id):
     @skip_without_tool("output_action_change_format_paired")
     def test_map_over_with_nested_paired_output_format_actions(self, history_id):
         hdca_id = self.__build_nested_list(history_id)
-        inputs = {"input": {"batch": True, "values": [dict(subcollection_type="paired", src="hdca", id=hdca_id)]}}
+        inputs = {"input": {"batch": True, "values": [dict(map_over_type="paired", src="hdca", id=hdca_id)]}}
         create = self._run("output_action_change_format_paired", history_id, inputs).json()
         outputs = create["outputs"]
         jobs = create["jobs"]
@@ -2109,7 +2109,7 @@ def test_map_over_nested_collections(self, history_id):
     def test_paired_input_map_over_nested_collections(self, history_id):
         hdca_id = self.__build_nested_list(history_id)
         inputs = {
-            "input1": {"batch": True, "values": [dict(subcollection_type="paired", src="hdca", id=hdca_id)]},
+            "input1": {"batch": True, "values": [dict(map_over_type="paired", src="hdca", id=hdca_id)]},
         }
         self.dataset_populator.wait_for_history(history_id, assert_ok=True)
         create = self._run("collection_paired_structured_like", history_id, inputs, assert_ok=True)
@@ -2127,7 +2127,7 @@ def test_paired_input_conditional_map_over_nested_collections(self, history_id):
         hdca_id = self.__build_nested_list(history_id)
         inputs = {
             "cond|cond_param": "paired",
-            "cond|input1": {"batch": True, "values": [dict(subcollection_type="paired", src="hdca", id=hdca_id)]},
+            "cond|input1": {"batch": True, "values": [dict(map_over_type="paired", src="hdca", id=hdca_id)]},
         }
         self.dataset_populator.wait_for_history(history_id, assert_ok=True)
         create = self._run("collection_paired_conditional_structured_like", history_id, inputs, assert_ok=True)
@@ -2440,7 +2440,7 @@ def test_implicit_reduce_with_mapping(self):
                 "f1": {"src": "hdca", "id": hdca1_id},
                 "f2": {
                     "batch": True,
-                    "values": [{"src": "hdca", "subcollection_type": "list", "id": hdca2_id}],
+                    "values": [{"src": "hdca", "map_over_type": "list", "id": hdca2_id}],
                 },
             }
             create = self._run("multi_data_param", history_id, inputs, assert_ok=True)
@@ -2569,7 +2569,7 @@ def test_subcollection_mapping(self):
             inputs = {
                 "f1": {
                     "batch": True,
-                    "values": [{"src": "hdca", "subcollection_type": "paired", "id": hdca_list_id}],
+                    "values": [{"src": "hdca", "map_over_type": "paired", "id": hdca_list_id}],
                 }
             }
             self._check_simple_subcollection_mapping(history_id, inputs)
@@ -2598,7 +2598,7 @@ def test_combined_mapping_and_subcollection_mapping(self):
             inputs = {
                 "f1": {
                     "batch": True,
-                    "values": [{"src": "hdca", "subcollection_type": "paired", "id": nested_list_id}],
+                    "values": [{"src": "hdca", "map_over_type": "paired", "id": nested_list_id}],
                 },
                 "f2": {
                     "batch": True,
@@ -2975,7 +2975,7 @@ def test_deferred_map_over_nested_collections(self, history_id):
         dataset_collection = self.dataset_collection_populator.wait_for_fetched_collection(fetch_response)
         hdca_id = dataset_collection["id"]
         inputs = {
-            "input1": {"batch": True, "values": [dict(subcollection_type="paired", src="hdca", id=hdca_id)]},
+            "input1": {"batch": True, "values": [dict(map_over_type="paired", src="hdca", id=hdca_id)]},
         }
         self.dataset_populator.wait_for_history(history_id, assert_ok=True)
         create = self._run("collection_paired_structured_like", history_id, inputs, assert_ok=True)

From e8d2b2b5f85bd023423ff47f666f2683984e47be Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 8 Sep 2023 06:35:16 +0300
Subject: [PATCH 77/86] Remove dce/ldda alert section, prep for integration
 into existing select field options

---
 .../Form/Elements/FormData/FormData.vue       | 41 +------------------
 1 file changed, 1 insertion(+), 40 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 1714cb27f4ae..27f2e8b744de 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -175,28 +175,6 @@ const isLDDA = computed(() => {
     }
 });
 
-/**
- * Determines if matched values are to be submitted in batch mode
- */
-const matchedBatchMode = computed(() => {
-    const values = matchedValues.value;
-    if (variant.value && values.length > 0 && values[0]) {
-        const hasMapOverType = values.find((v) => !!v.map_over_type);
-        if (hasMapOverType) {
-            return true;
-        }
-        const isMultiple = values.length > 1;
-        const sourceType = getSourceType(values[0]);
-        const variantDetails = variant.value.find(
-            (v) => (!isMultiple || v.multiple === isMultiple) && v.src === sourceType
-        );
-        if (variantDetails) {
-            return variantDetails.batch !== BATCH.DISABLED;
-        }
-    }
-    return false;
-});
-
 /**
  * Matches an array of values to available options
  */
@@ -479,24 +457,7 @@ watch(
         @dragleave.prevent="onDragLeave"
         @dragover.prevent="onDragOver"
         @drop.prevent="onDrop">
-        <b-alert v-if="isDCE || isLDDA" variant="info" dismissible show @dismissed="$emit('input', null)">
-            <span v-localize class="font-weight-bold">Using the following datasets (dismiss to reset):</span>
-            <div v-if="matchedBatchMode" data-description="form data batch label">
-                <FontAwesomeIcon icon="fa-exclamation" />
-                <span v-localize class="ml-1"> This data input will be submitted in batch mode. </span>
-            </div>
-            <div v-for="(v, vIndex) of matchedValues" :key="vIndex">
-                <div class="ml-2" data-description="form data label">
-                    <span>{{ vIndex + 1 }}.</span>
-                    <span>{{ v.name }}</span>
-                    <span>(as {{ getSourceLabel(getSourceType(v)) }})</span>
-                </div>
-                <small v-if="v.map_over_type" class="ml-2" data-description="form data collection type">
-                    Batch mode input with collection type: {{ v.map_over_type }}.
-                </small>
-            </div>
-        </b-alert>
-        <div v-else>
+        <div>
             <div class="d-flex">
                 <BButtonGroup v-if="variant.length > 1" buttons class="align-self-start mr-2">
                     <BButton

From b2dcce374cb4dbc358271ce20e1635d84e99309d Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 8 Sep 2023 07:16:56 +0300
Subject: [PATCH 78/86] Remove entry duplication from data parameter options
 population

---
 lib/galaxy/tools/parameters/basic.py | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/lib/galaxy/tools/parameters/basic.py b/lib/galaxy/tools/parameters/basic.py
index cd12d0b80ccd..6e16f7fc597c 100644
--- a/lib/galaxy/tools/parameters/basic.py
+++ b/lib/galaxy/tools/parameters/basic.py
@@ -2325,16 +2325,6 @@ def append_ldda(ldda):
                 }
             )
 
-        # append DCE
-        if isinstance(other_values.get(self.name), DatasetCollectionElement):
-            dce = other_values[self.name]
-            append_dce(dce)
-
-        # append LDDA
-        if isinstance(other_values.get(self.name), LibraryDatasetDatasetAssociation):
-            ldda = other_values[self.name]
-            append_ldda(ldda)
-
         # add datasets
         hda_list = util.listify(other_values.get(self.name))
         # Prefetch all at once, big list of visible, non-deleted datasets.

From 5c65ea2829c4053bdfb184003968524d483c2d80 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 8 Sep 2023 07:18:06 +0300
Subject: [PATCH 79/86] Temporarily restore tool form reactivity

---
 client/src/components/Form/FormDisplay.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/Form/FormDisplay.vue b/client/src/components/Form/FormDisplay.vue
index 200a5d32f669..4ab57c878eb0 100644
--- a/client/src/components/Form/FormDisplay.vue
+++ b/client/src/components/Form/FormDisplay.vue
@@ -165,6 +165,7 @@ export default {
             });
         },
         onChangeForm() {
+            this.formInputs = JSON.parse(JSON.stringify(this.formInputs));
             this.onChange(true);
         },
         onCloneInputs() {

From da1b9191c289a19231008bf87acb8d6cddb5a041 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 8 Sep 2023 07:54:21 +0300
Subject: [PATCH 80/86] Populate available select field options with matching
 dce/ldda entries

---
 .../Form/Elements/FormData/FormData.vue       | 90 ++++++-------------
 1 file changed, 29 insertions(+), 61 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 27f2e8b744de..81da64643250 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -65,7 +65,7 @@ const dragData: Ref<EventData | null> = ref(null);
 const dragTarget: Ref<EventTarget | null> = ref(null);
 
 /** Store options which need to be preserved **/
-const keepOptions: Ref<Record<string, SelectOption>> = ref({});
+const keepOptions: Record<string, SelectOption> = {};
 
 /** Displays a wait indicator between setting a value and receiving an update */
 const waiting = ref(false);
@@ -120,7 +120,7 @@ const formattedOptions = computed(() => {
             };
             if (option.keep) {
                 const keepKey = `${option.id}_${option.src}`;
-                keepOptions.value[keepKey] = newOption;
+                keepOptions[keepKey] = newOption;
             } else {
                 const accepted = !props.tag || option.tags.includes(props.tag);
                 if (accepted) {
@@ -128,9 +128,24 @@ const formattedOptions = computed(() => {
                 }
             }
         });
+        // Add keep-options from other sources
+        const otherSources = [SOURCE.COLLECTION_ELEMENT, SOURCE.LIBRARY_DATASET];
+        for (const otherSource of otherSources) {
+            const otherOptions = props.options[otherSource];
+            if (Array.isArray(otherOptions)) {
+                otherOptions.forEach((option) => {
+                    const keepKey = `${option.id}_${option.src}`;
+                    const newOption = {
+                        label: `${option.name} (${option.src})`,
+                        value: option || null,
+                    };
+                    keepOptions[keepKey] = newOption;
+                });
+            }
+        }
         // Populate keep-options from cache
-        Object.entries(keepOptions.value).forEach(([key, option]) => {
-            if (option.value?.src === currentSource.value) {
+        Object.entries(keepOptions).forEach(([key, option]) => {
+            if (option.value && getSourceType(option.value) === currentSource.value) {
                 result.unshift(option);
             }
         });
@@ -157,43 +172,6 @@ const formattedOptions = computed(() => {
     }
 });
 
-/**
- * Dataset collection elements should be treated as plain values.
- */
-const isDCE = computed(() => {
-    if (props.value && props.value.values.length > 0) {
-        return props.value.values.findIndex((v) => v.src !== SOURCE.COLLECTION_ELEMENT) === -1;
-    } else {
-        return false;
-    }
-});
-const isLDDA = computed(() => {
-    if (props.value && props.value.values.length > 0) {
-        return props.value.values.findIndex((v) => v.src !== SOURCE.LIBRARY_DATASET) === -1;
-    } else {
-        return false;
-    }
-});
-
-/**
- * Matches an array of values to available options
- */
-const matchedValues = computed(() => {
-    const values: Array<DataOption> = [];
-    if (props.value && props.value.values.length > 0) {
-        props.value.values.forEach((entry) => {
-            if ("src" in entry && entry.src) {
-                const options = props.options[entry.src] || [];
-                const option = options.find((v) => v.id === entry.id && v.src === entry.src);
-                if (option) {
-                    values.push({ ...option, name: option.name || entry.id });
-                }
-            }
-        });
-    }
-    return values;
-});
-
 /**
  * Provides placeholder label for select field
  */
@@ -241,15 +219,11 @@ function createValue(val: Array<DataOption> | DataOption | null) {
             if (variantIndex >= 0) {
                 const variantDetails = variant.value[variantIndex];
                 if (variantDetails) {
-                    if ((isLDDA.value || isDCE.value) && variantDetails.batch) {
-                        batch = variantDetails.batch;
-                    } else {
-                        // Switch to another field type if source differs from current field
-                        if (currentVariant.value && currentVariant.value.src !== sourceType) {
-                            currentField.value = variantIndex;
-                        }
-                        batch = (currentVariant.value && currentVariant.value.batch) || BATCH.DISABLED;
+                    // Switch to another field type if source differs from current field
+                    if (currentVariant.value && currentVariant.value.src !== sourceType) {
+                        currentField.value = variantIndex;
                     }
+                    batch = (currentVariant.value && currentVariant.value.batch) || BATCH.DISABLED;
                 }
             }
 
@@ -280,9 +254,9 @@ function getSourceLabel(src: string | null) {
  * Determine source type of a given value
  */
 function getSourceType(val: DataOption) {
-    if (isDCE.value) {
+    if (val.src === SOURCE.COLLECTION_ELEMENT) {
         return val.is_dataset ? SOURCE.DATASET : SOURCE.COLLECTION;
-    } else if (isLDDA.value) {
+    } else if (val.src === SOURCE.LIBRARY_DATASET) {
         return SOURCE.DATASET;
     } else {
         return val.src;
@@ -345,8 +319,8 @@ function handleIncoming(incoming: Record<string, unknown>, partial = true) {
                 const keepKey = `${newId}_${newSrc}`;
                 const existingOptions = props.options && props.options[newSrc];
                 const foundOption = existingOptions && existingOptions.find((option) => option.id === newId);
-                if (!foundOption && !(keepKey in keepOptions.value)) {
-                    keepOptions.value[keepKey] = { label: `${newHid || "Selected"}: ${newName}`, value: newValue };
+                if (!foundOption && !(keepKey in keepOptions)) {
+                    keepOptions[keepKey] = { label: `${newHid || "Selected"}: ${newName}`, value: newValue };
                 }
                 // Add new value to list
                 incomingValues.push(newValue);
@@ -430,11 +404,7 @@ onMounted(() => {
     eventBus.$on("waiting", (value: boolean) => {
         waiting.value = value;
     });
-    if (props.value && props.value.values) {
-        $emit("input", createValue(matchedValues.value));
-    } else {
-        $emit("input", createValue(currentValue.value));
-    }
+    $emit("input", createValue(currentValue.value));
 });
 
 /**
@@ -443,9 +413,7 @@ onMounted(() => {
 watch(
     () => [props.options, currentLinked.value, currentVariant.value],
     () => {
-        if (!isLDDA.value && !isDCE.value) {
-            $emit("input", createValue(currentValue.value));
-        }
+        $emit("input", createValue(currentValue.value));
     }
 );
 </script>

From 9020d82ef11b920378eb8b18114951f049e89bec Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 8 Sep 2023 23:33:48 +0300
Subject: [PATCH 81/86] Rework tests, adjust handling

---
 .../Form/Elements/FormData/FormData.test.js   | 81 +++++++++++--------
 .../Form/Elements/FormData/FormData.vue       | 32 +++++++-
 lib/galaxy_test/selenium/test_tool_form.py    |  4 +-
 3 files changed, 77 insertions(+), 40 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.test.js b/client/src/components/Form/Elements/FormData/FormData.test.js
index a9b378067253..d77b3c34eb87 100644
--- a/client/src/components/Form/Elements/FormData/FormData.test.js
+++ b/client/src/components/Form/Elements/FormData/FormData.test.js
@@ -55,31 +55,31 @@ describe("FormData", () => {
         const value_0 = {
             batch: false,
             product: false,
-            values: [{ id: "hda3", src: "hda", map_over_type: null }],
+            values: [{ id: "dce4", src: "dce", map_over_type: null }],
         };
         const value_1 = {
             batch: false,
             product: false,
-            values: [{ id: "hda1", src: "hda", map_over_type: null }],
+            values: [{ id: "hda3", src: "hda", map_over_type: null }],
         };
         const options = wrapper.find(".btn-group").findAll("button");
         expect(options.length).toBe(4);
         expect(options.at(0).classes()).toContain("active");
         expect(options.at(0).attributes("title")).toBe("Single dataset");
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
-        expect(wrapper.find(SELECTED_VALUE).text()).toEqual("3: hdaName3");
+        expect(wrapper.find(SELECTED_VALUE).text()).toEqual("dceName4 (dce)");
         await wrapper.setProps({ value: value_0 });
         expect(wrapper.emitted().input.length).toEqual(1);
         await wrapper.setProps({ value: { values: [{ id: "hda2", src: "hda" }] } });
         expect(wrapper.find(SELECTED_VALUE).text()).toEqual("2: hdaName2");
         expect(wrapper.emitted().input.length).toEqual(1);
         const elements_0 = wrapper.findAll(SELECT_OPTIONS);
-        expect(elements_0.length).toEqual(3);
+        expect(elements_0.length).toEqual(5);
         await elements_0.at(2).find("span").trigger("click");
         expect(wrapper.emitted().input.length).toEqual(2);
         expect(wrapper.emitted().input[1][0]).toEqual(value_1);
         await wrapper.setProps({ value: value_1 });
-        expect(wrapper.find(SELECTED_VALUE).text()).toEqual("1: hdaName1");
+        expect(wrapper.find(SELECTED_VALUE).text()).toEqual("3: hdaName3");
     });
 
     it("optional dataset", async () => {
@@ -91,7 +91,7 @@ describe("FormData", () => {
         expect(wrapper.emitted().input[0][0]).toEqual(null);
         expect(wrapper.emitted().input.length).toEqual(1);
         expect(wrapper.find(SELECTED_VALUE).text()).toEqual("Nothing selected");
-        expect(wrapper.findAll(SELECT_OPTIONS).length).toBe(4);
+        expect(wrapper.findAll(SELECT_OPTIONS).length).toBe(6);
     });
 
     it("multiple datasets", async () => {
@@ -164,20 +164,9 @@ describe("FormData", () => {
         };
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
         expect(wrapper.emitted().input.length).toEqual(1);
-        const message = wrapper.findAll("[data-description='form data label']");
-        expect(message.length).toBe(1);
-        expect(message.at(0).text()).toBe("1. dceName1 (as dataset)");
-        const messageBatch = wrapper.find("[data-description='form data batch label']");
-        expect(messageBatch.exists()).toBeFalsy();
-        expect(wrapper.find(".btn-group").exists()).toBeFalsy();
-        const closeButton = wrapper.find(".alert .close");
-        await closeButton.trigger("click");
-        expect(wrapper.emitted().input[1][0]).toEqual(null);
-        expect(wrapper.find(".alert").exists()).toBeFalsy();
-        await wrapper.setProps({ value: null });
-        const options = wrapper.find(".btn-group").findAll("button");
-        expect(options.length).toBe(4);
-        expect(wrapper.emitted().input.length).toEqual(2);
+        const selectedValues = wrapper.findAll(SELECTED_VALUE);
+        expect(selectedValues.length).toBe(1);
+        expect(selectedValues.at(0).text()).toBe("dceName1 (dce)");
     });
 
     it("dataset collection element as hdca without map_over_type", async () => {
@@ -187,8 +176,10 @@ describe("FormData", () => {
         });
         const value_0 = { batch: true, product: false, values: [{ id: "dce2", map_over_type: null, src: "dce" }] };
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
-        const messageBatch = wrapper.find("[data-description='form data batch label']");
-        expect(messageBatch.text()).toBe("This data input will be submitted in batch mode.");
+        await wrapper.vm.$nextTick();
+        const selectedValues = wrapper.findAll(SELECTED_VALUE);
+        expect(selectedValues.length).toBe(1);
+        expect(selectedValues.at(0).text()).toBe("dceName2 (dce)");
     });
 
     it("dataset collection element as hdca mapped to batch field", async () => {
@@ -202,12 +193,10 @@ describe("FormData", () => {
             values: [{ id: "dce3", map_over_type: "mapOverType", src: "dce" }],
         };
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
-        const message = wrapper.findAll("[data-description='form data label']");
-        expect(message.length).toBe(1);
-        expect(message.at(0).text()).toBe("1. dceName3 (as dataset collection)");
-        const messageSubcollection = wrapper.findAll("[data-description='form data collection type']");
-        expect(messageSubcollection.length).toBe(1);
-        expect(messageSubcollection.at(0).text()).toBe("Batch mode input with collection type: mapOverType.");
+        await wrapper.vm.$nextTick();
+        const selectedValues = wrapper.findAll(SELECTED_VALUE);
+        expect(selectedValues.length).toBe(1);
+        expect(selectedValues.at(0).text()).toBe("dceName3 (dce)");
     });
 
     it("dataset collection element as hdca mapped to non-batch field", async () => {
@@ -222,6 +211,10 @@ describe("FormData", () => {
             values: [{ id: "dce3", map_over_type: "mapOverType", src: "dce" }],
         };
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
+        await wrapper.vm.$nextTick();
+        const selectedValues = wrapper.findAll(SELECTED_VALUE);
+        expect(selectedValues.length).toBe(1);
+        expect(selectedValues.at(0).text()).toBe("dceName3 (dce)");
     });
 
     it("dataset collection mapped to non-batch field", async () => {
@@ -236,6 +229,10 @@ describe("FormData", () => {
             values: [{ id: "hdca4", map_over_type: null, src: "hdca" }],
         };
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
+        await wrapper.vm.$nextTick();
+        const selectedValues = wrapper.findAll(SELECTED_VALUE);
+        expect(selectedValues.length).toBe(1);
+        expect(selectedValues.at(0).text()).toBe("4: hdcaName4");
     });
 
     it("multiple dataset collection elements (as hdas)", async () => {
@@ -291,7 +288,7 @@ describe("FormData", () => {
         expect(wrapper.emitted().input[0][0]).toEqual({
             batch: false,
             product: false,
-            values: [{ id: "hda3", map_over_type: null, src: "hda" }],
+            values: [{ id: "dce4", map_over_type: null, src: "dce" }],
         });
         const noCheckLinked = wrapper.find("input[type='checkbox']");
         expect(noCheckLinked.exists()).toBeFalsy();
@@ -299,8 +296,21 @@ describe("FormData", () => {
         expect(wrapper.emitted().input[1][0]).toEqual({
             batch: true,
             product: false,
-            values: [{ id: "hda3", map_over_type: null, src: "hda" }],
+            values: [{ id: "dce4", map_over_type: null, src: "dce" }],
         });
+        const elements_0 = wrapper.findAll(SELECT_OPTIONS);
+        expect(elements_0.length).toEqual(5);
+        await elements_0.at(3).find("span").trigger("click");
+        const value_0 = {
+            batch: true,
+            product: false,
+            values: [
+                { id: "dce4", map_over_type: null, src: "dce" },
+                { id: "hda2", map_over_type: null, src: "hda" },
+            ],
+        };
+        expect(wrapper.emitted().input[2][0]).toEqual(value_0);
+        await wrapper.setProps({ value: value_0 });
         const checkLinked = wrapper.find("input[type='checkbox']");
         expect(wrapper.find(".custom-switch span").text()).toBe(
             "Linked: Datasets will be run in matched order with other datasets."
@@ -310,10 +320,13 @@ describe("FormData", () => {
         expect(wrapper.find(".custom-switch span").text()).toBe(
             "Unlinked: Dataset will be run against *all* other datasets."
         );
-        expect(wrapper.emitted().input[2][0]).toEqual({
+        expect(wrapper.emitted().input[3][0]).toEqual({
             batch: true,
             product: true,
-            values: [{ id: "hda3", map_over_type: null, src: "hda" }],
+            values: [
+                { id: "dce4", map_over_type: null, src: "dce" },
+                { id: "hda2", map_over_type: null, src: "hda" },
+            ],
         });
     });
 
@@ -346,9 +359,9 @@ describe("FormData", () => {
         expect(wrapper.emitted().input[2][0]).toEqual({
             batch: false,
             product: false,
-            values: [{ id: "hda3", map_over_type: null, src: "hda" }],
+            values: [{ id: "dce4", map_over_type: null, src: "dce" }],
         });
         const newSelectedValues = wrapper.findAll(SELECTED_VALUE);
-        expect(newSelectedValues.at(0).text()).toBe("3: hdaName3");
+        expect(newSelectedValues.at(0).text()).toBe("dceName4 (dce)");
     });
 });
diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 81da64643250..f1c503825b9b 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -220,13 +220,14 @@ function createValue(val: Array<DataOption> | DataOption | null) {
                 const variantDetails = variant.value[variantIndex];
                 if (variantDetails) {
                     // Switch to another field type if source differs from current field
-                    if (currentVariant.value && currentVariant.value.src !== sourceType) {
+                    if (isMultiple || (currentVariant.value && currentVariant.value.src !== sourceType)) {
                         currentField.value = variantIndex;
+                        batch = variantDetails.batch;
+                    } else {
+                        batch = (currentVariant.value && currentVariant.value.batch) || BATCH.DISABLED;
                     }
-                    batch = (currentVariant.value && currentVariant.value.batch) || BATCH.DISABLED;
                 }
             }
-
             // Emit new value
             return {
                 batch: batch !== BATCH.DISABLED || !!hasMapOverType,
@@ -400,11 +401,34 @@ function onDrop() {
     }
 }
 
+/**
+ * Matches an array of values to available options
+ */
+const matchedValues = computed(() => {
+    const values: Array<DataOption> = [];
+    if (props.value && props.value.values.length > 0) {
+        props.value.values.forEach((entry) => {
+            if ("src" in entry && entry.src) {
+                const options = props.options[entry.src] || [];
+                const option = options.find((v) => v.id === entry.id && v.src === entry.src);
+                if (option) {
+                    values.push({ ...option, name: option.name || entry.id });
+                }
+            }
+        });
+    }
+    return values;
+});
+
 onMounted(() => {
     eventBus.$on("waiting", (value: boolean) => {
         waiting.value = value;
     });
-    $emit("input", createValue(currentValue.value));
+    if (props.value) {
+        $emit("input", createValue(matchedValues.value));
+    } else {
+        $emit("input", createValue(currentValue.value));
+    }
 });
 
 /**
diff --git a/lib/galaxy_test/selenium/test_tool_form.py b/lib/galaxy_test/selenium/test_tool_form.py
index 4c80f83a50cf..3c738cf87f53 100644
--- a/lib/galaxy_test/selenium/test_tool_form.py
+++ b/lib/galaxy_test/selenium/test_tool_form.py
@@ -242,8 +242,8 @@ def test_rerun_dataset_collection_element(self):
         self.sleep_for(self.wait_types.UX_RENDER)
         self.hda_click_primary_action_button(1, "rerun")
         self.sleep_for(self.wait_types.UX_RENDER)
-        data_label = self.components.tool_form.parameter_data_label(parameter="input1").wait_for_visible()
-        assert data_label.text == "1. test0 (as dataset collection)"
+        select_field = self.components.tool_form.parameter_data_select(parameter="input1")
+        self.select_set_value(select_field, "test0 (dce)")
         self.tool_form_execute()
         self.components.history_panel.collection_view.back_to_history.wait_for_and_click()
         self.history_panel_wait_for_hid_ok(9)

From 20eaf9c78cd8b1ffcbbc84b02fe57d16dd65ce06 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 9 Sep 2023 01:15:32 +0300
Subject: [PATCH 82/86] Disable form reactivity, restore current dev

---
 client/src/components/Form/FormDisplay.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/components/Form/FormDisplay.vue b/client/src/components/Form/FormDisplay.vue
index 4ab57c878eb0..200a5d32f669 100644
--- a/client/src/components/Form/FormDisplay.vue
+++ b/client/src/components/Form/FormDisplay.vue
@@ -165,7 +165,6 @@ export default {
             });
         },
         onChangeForm() {
-            this.formInputs = JSON.parse(JSON.stringify(this.formInputs));
             this.onChange(true);
         },
         onCloneInputs() {

From 84412e2919628ed08befa6f90a005278c03af095 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 9 Sep 2023 12:32:23 +0300
Subject: [PATCH 83/86] Add dataset tag filter test

---
 .../Form/Elements/FormData/FormData.test.js   | 61 +++++++++++++------
 .../Form/Elements/FormData/FormData.vue       |  2 +-
 2 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.test.js b/client/src/components/Form/Elements/FormData/FormData.test.js
index d77b3c34eb87..664a1e200641 100644
--- a/client/src/components/Form/Elements/FormData/FormData.test.js
+++ b/client/src/components/Form/Elements/FormData/FormData.test.js
@@ -33,13 +33,14 @@ const defaultOptions = {
         { id: "dce4", name: "dceName4", src: "dce", is_dataset: true },
     ],
     hda: [
-        { id: "hda1", hid: 1, name: "hdaName1", src: "hda" },
-        { id: "hda2", hid: 2, name: "hdaName2", src: "hda" },
-        { id: "hda3", hid: 3, name: "hdaName3", src: "hda" },
+        { id: "hda1", hid: 1, name: "hdaName1", src: "hda", tags: ["tag1"] },
+        { id: "hda2", hid: 2, name: "hdaName2", src: "hda", tags: ["tag1", "tag2"] },
+        { id: "hda3", hid: 3, name: "hdaName3", src: "hda", tags: ["tag2", "tag3"] },
+        { id: "hda3", hid: 4, name: "hdaName4", src: "hda" },
     ],
     hdca: [
-        { id: "hdca4", hid: 4, name: "hdcaName4", src: "hdca" },
         { id: "hdca5", hid: 5, name: "hdcaName5", src: "hdca" },
+        { id: "hdca6", hid: 6, name: "hdcaName6", src: "hdca" },
     ],
 };
 
@@ -74,12 +75,12 @@ describe("FormData", () => {
         expect(wrapper.find(SELECTED_VALUE).text()).toEqual("2: hdaName2");
         expect(wrapper.emitted().input.length).toEqual(1);
         const elements_0 = wrapper.findAll(SELECT_OPTIONS);
-        expect(elements_0.length).toEqual(5);
+        expect(elements_0.length).toEqual(6);
         await elements_0.at(2).find("span").trigger("click");
         expect(wrapper.emitted().input.length).toEqual(2);
         expect(wrapper.emitted().input[1][0]).toEqual(value_1);
         await wrapper.setProps({ value: value_1 });
-        expect(wrapper.find(SELECTED_VALUE).text()).toEqual("3: hdaName3");
+        expect(wrapper.find(SELECTED_VALUE).text()).toEqual("4: hdaName4");
     });
 
     it("optional dataset", async () => {
@@ -91,7 +92,7 @@ describe("FormData", () => {
         expect(wrapper.emitted().input[0][0]).toEqual(null);
         expect(wrapper.emitted().input.length).toEqual(1);
         expect(wrapper.find(SELECTED_VALUE).text()).toEqual("Nothing selected");
-        expect(wrapper.findAll(SELECT_OPTIONS).length).toBe(6);
+        expect(wrapper.findAll(SELECT_OPTIONS).length).toBe(7);
     });
 
     it("multiple datasets", async () => {
@@ -121,7 +122,7 @@ describe("FormData", () => {
         expect(wrapper.emitted().input.length).toEqual(1);
         const selectedValues = wrapper.findAll(SELECTED_VALUE);
         expect(selectedValues.length).toBe(2);
-        expect(selectedValues.at(0).text()).toBe("3: hdaName3");
+        expect(selectedValues.at(0).text()).toBe("4: hdaName4");
         expect(selectedValues.at(1).text()).toBe("2: hdaName2");
         const value_0 = {
             batch: false,
@@ -220,19 +221,19 @@ describe("FormData", () => {
     it("dataset collection mapped to non-batch field", async () => {
         const wrapper = createTarget({
             type: "data_collection",
-            value: { values: [{ id: "hdca4", src: "hdca" }] },
+            value: { values: [{ id: "hdca5", src: "hdca" }] },
             options: defaultOptions,
         });
         const value_0 = {
             batch: false,
             product: false,
-            values: [{ id: "hdca4", map_over_type: null, src: "hdca" }],
+            values: [{ id: "hdca5", map_over_type: null, src: "hdca" }],
         };
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
         await wrapper.vm.$nextTick();
         const selectedValues = wrapper.findAll(SELECTED_VALUE);
         expect(selectedValues.length).toBe(1);
-        expect(selectedValues.at(0).text()).toBe("4: hdcaName4");
+        expect(selectedValues.at(0).text()).toBe("5: hdcaName5");
     });
 
     it("multiple dataset collection elements (as hdas)", async () => {
@@ -299,14 +300,14 @@ describe("FormData", () => {
             values: [{ id: "dce4", map_over_type: null, src: "dce" }],
         });
         const elements_0 = wrapper.findAll(SELECT_OPTIONS);
-        expect(elements_0.length).toEqual(5);
+        expect(elements_0.length).toEqual(6);
         await elements_0.at(3).find("span").trigger("click");
         const value_0 = {
             batch: true,
             product: false,
             values: [
                 { id: "dce4", map_over_type: null, src: "dce" },
-                { id: "hda2", map_over_type: null, src: "hda" },
+                { id: "hda3", map_over_type: null, src: "hda" },
             ],
         };
         expect(wrapper.emitted().input[2][0]).toEqual(value_0);
@@ -325,7 +326,7 @@ describe("FormData", () => {
             product: true,
             values: [
                 { id: "dce4", map_over_type: null, src: "dce" },
-                { id: "hda2", map_over_type: null, src: "hda" },
+                { id: "hda3", map_over_type: null, src: "hda" },
             ],
         });
     });
@@ -333,7 +334,7 @@ describe("FormData", () => {
     it("match dataset collection on initial value", async () => {
         const wrapper = createTarget({
             value: {
-                values: [{ id: "hdca4", src: "hdca" }],
+                values: [{ id: "hdca5", src: "hdca" }],
             },
             multiple: true,
             options: defaultOptions,
@@ -347,13 +348,13 @@ describe("FormData", () => {
             expect(wrapper.emitted().input[i][0]).toEqual({
                 batch: false,
                 product: false,
-                values: [{ id: "hdca4", map_over_type: null, src: "hdca" }],
+                values: [{ id: "hdca5", map_over_type: null, src: "hdca" }],
             });
         }
         expect(wrapper.emitted().input.length).toEqual(2);
         const selectedValues = wrapper.findAll(SELECTED_VALUE);
         expect(selectedValues.length).toBe(1);
-        expect(selectedValues.at(0).text()).toBe("4: hdcaName4");
+        expect(selectedValues.at(0).text()).toBe("5: hdcaName5");
         await wrapper.find("[title='Multiple datasets'").trigger("click");
         expect(options.at(0).classes()).toContain("active");
         expect(wrapper.emitted().input[2][0]).toEqual({
@@ -364,4 +365,30 @@ describe("FormData", () => {
         const newSelectedValues = wrapper.findAll(SELECTED_VALUE);
         expect(newSelectedValues.at(0).text()).toBe("dceName4 (dce)");
     });
+
+    it("tagging filter", async () => {
+        const wrapper_0 = createTarget({
+            tag: "tag1",
+            options: defaultOptions,
+        });
+        const select_0 = wrapper_0.findAll(SELECT_OPTIONS);
+        expect(select_0.length).toBe(4);
+        expect(select_0.at(2).text()).toBe("2: hdaName2");
+        expect(select_0.at(3).text()).toBe("1: hdaName1");
+        const wrapper_1 = createTarget({
+            tag: "tag2",
+            options: defaultOptions,
+        });
+        const select_1 = wrapper_1.findAll(SELECT_OPTIONS);
+        expect(select_1.length).toBe(4);
+        expect(select_1.at(2).text()).toBe("3: hdaName3");
+        expect(select_1.at(3).text()).toBe("2: hdaName2");
+        const wrapper_2 = createTarget({
+            tag: "tag3",
+            options: defaultOptions,
+        });
+        const select_2 = wrapper_2.findAll(SELECT_OPTIONS);
+        expect(select_2.length).toBe(3);
+        expect(select_2.at(2).text()).toBe("3: hdaName3");
+    });
 });
diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index f1c503825b9b..7889234af93e 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -122,7 +122,7 @@ const formattedOptions = computed(() => {
                 const keepKey = `${option.id}_${option.src}`;
                 keepOptions[keepKey] = newOption;
             } else {
-                const accepted = !props.tag || option.tags.includes(props.tag);
+                const accepted = !props.tag || option.tags?.includes(props.tag);
                 if (accepted) {
                     result.push(newOption);
                 }

From 6799ce0f0e97ddae5de4e4f4a8cac391e3a349b0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 9 Sep 2023 13:37:58 +0300
Subject: [PATCH 84/86] Remove unused backbone field dialog wrapper

---
 .../components/Form/Elements/parameters.js    | 11 -----
 client/src/mvc/ui/ui-data-picker.js           | 49 -------------------
 2 files changed, 60 deletions(-)
 delete mode 100644 client/src/mvc/ui/ui-data-picker.js

diff --git a/client/src/components/Form/Elements/parameters.js b/client/src/components/Form/Elements/parameters.js
index ce1e5c77306c..01729e887c0a 100644
--- a/client/src/components/Form/Elements/parameters.js
+++ b/client/src/components/Form/Elements/parameters.js
@@ -2,7 +2,6 @@
     This class creates input elements. New input parameter types should be added to the types dictionary.
 */
 import Backbone from "backbone";
-import DataPicker from "mvc/ui/ui-data-picker";
 import SelectFtp from "mvc/ui/ui-select-ftp";
 import SelectLibrary from "mvc/ui/ui-select-library";
 
@@ -12,7 +11,6 @@ export default Backbone.View.extend({
     types: {
         library_data: "_fieldLibrary",
         ftpfile: "_fieldFtp",
-        data_dialog: "_fieldDialog",
     },
 
     remove: function () {
@@ -32,15 +30,6 @@ export default Backbone.View.extend({
         this.$el.append(this.field.$el);
     },
 
-    /** Data dialog picker field */
-    _fieldDialog: function (input_def) {
-        return new DataPicker({
-            id: input_def.id,
-            multiple: input_def.multiple,
-            onchange: input_def.onchange,
-        });
-    },
-
     /** Library dataset field */
     _fieldLibrary: function (input_def) {
         return new SelectLibrary.View({
diff --git a/client/src/mvc/ui/ui-data-picker.js b/client/src/mvc/ui/ui-data-picker.js
deleted file mode 100644
index 5a5672fa363d..000000000000
--- a/client/src/mvc/ui/ui-data-picker.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/** Creates a data dialog input field */
-import { getGalaxyInstance } from "app/index";
-import Backbone from "backbone";
-import $ from "jquery";
-import Buttons from "mvc/ui/ui-buttons";
-
-export default Backbone.View.extend({
-    constructor(options) {
-        const Galaxy = getGalaxyInstance();
-        this.model = (options && options.model) || new Backbone.Model(options);
-        this.button_dialog = new Buttons.Button({
-            icon: "fa-folder-open-o",
-            tooltip: "Browse Datasets",
-            cls: "btn btn-secondary float-left mr-2",
-            onclick: () => {
-                Galaxy.data.dialog(
-                    (response) => {
-                        this.model.set("value", response);
-                        if (this.model.get("onchange")) {
-                            this.model.get("onchange")(response);
-                        }
-                    },
-                    {
-                        multiple: Boolean(this.model.get("multiple")),
-                    }
-                );
-            },
-        });
-        this.$info = $("<input disabled/>").addClass("ui-input float-left");
-        this.setElement($("<div/>").addClass("d-flex").append(this.button_dialog.$el).append(this.$info));
-        this.listenTo(this.model, "change", this.render, this);
-        this.render();
-    },
-    value: function (new_val) {
-        if (new_val !== undefined) {
-            this.model.set("value", new_val);
-        }
-        return this.model.get("value");
-    },
-    render: function () {
-        this.$el.attr("id", this.model.id);
-        let label = this.model.get("value");
-        if (label && this.model.get("multiple")) {
-            label = label.join(", ");
-        }
-        this.$info.val(label || "Empty");
-        return this;
-    },
-});

From 7a9786fe69b2c6732d9896f0bc57abbf0abe9a7f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 9 Sep 2023 22:39:49 +0300
Subject: [PATCH 85/86] Label dces as either dataset collection or dataset

---
 .../Form/Elements/FormData/FormData.test.js          | 12 ++++++------
 .../components/Form/Elements/FormData/FormData.vue   |  3 ++-
 lib/galaxy_test/selenium/test_tool_form.py           |  2 +-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.test.js b/client/src/components/Form/Elements/FormData/FormData.test.js
index 664a1e200641..42910c30a0ec 100644
--- a/client/src/components/Form/Elements/FormData/FormData.test.js
+++ b/client/src/components/Form/Elements/FormData/FormData.test.js
@@ -68,7 +68,7 @@ describe("FormData", () => {
         expect(options.at(0).classes()).toContain("active");
         expect(options.at(0).attributes("title")).toBe("Single dataset");
         expect(wrapper.emitted().input[0][0]).toEqual(value_0);
-        expect(wrapper.find(SELECTED_VALUE).text()).toEqual("dceName4 (dce)");
+        expect(wrapper.find(SELECTED_VALUE).text()).toEqual("dceName4 (as dataset)");
         await wrapper.setProps({ value: value_0 });
         expect(wrapper.emitted().input.length).toEqual(1);
         await wrapper.setProps({ value: { values: [{ id: "hda2", src: "hda" }] } });
@@ -167,7 +167,7 @@ describe("FormData", () => {
         expect(wrapper.emitted().input.length).toEqual(1);
         const selectedValues = wrapper.findAll(SELECTED_VALUE);
         expect(selectedValues.length).toBe(1);
-        expect(selectedValues.at(0).text()).toBe("dceName1 (dce)");
+        expect(selectedValues.at(0).text()).toBe("dceName1 (as dataset)");
     });
 
     it("dataset collection element as hdca without map_over_type", async () => {
@@ -180,7 +180,7 @@ describe("FormData", () => {
         await wrapper.vm.$nextTick();
         const selectedValues = wrapper.findAll(SELECTED_VALUE);
         expect(selectedValues.length).toBe(1);
-        expect(selectedValues.at(0).text()).toBe("dceName2 (dce)");
+        expect(selectedValues.at(0).text()).toBe("dceName2 (as dataset collection)");
     });
 
     it("dataset collection element as hdca mapped to batch field", async () => {
@@ -197,7 +197,7 @@ describe("FormData", () => {
         await wrapper.vm.$nextTick();
         const selectedValues = wrapper.findAll(SELECTED_VALUE);
         expect(selectedValues.length).toBe(1);
-        expect(selectedValues.at(0).text()).toBe("dceName3 (dce)");
+        expect(selectedValues.at(0).text()).toBe("dceName3 (as dataset collection)");
     });
 
     it("dataset collection element as hdca mapped to non-batch field", async () => {
@@ -215,7 +215,7 @@ describe("FormData", () => {
         await wrapper.vm.$nextTick();
         const selectedValues = wrapper.findAll(SELECTED_VALUE);
         expect(selectedValues.length).toBe(1);
-        expect(selectedValues.at(0).text()).toBe("dceName3 (dce)");
+        expect(selectedValues.at(0).text()).toBe("dceName3 (as dataset collection)");
     });
 
     it("dataset collection mapped to non-batch field", async () => {
@@ -363,7 +363,7 @@ describe("FormData", () => {
             values: [{ id: "dce4", map_over_type: null, src: "dce" }],
         });
         const newSelectedValues = wrapper.findAll(SELECTED_VALUE);
-        expect(newSelectedValues.at(0).text()).toBe("dceName4 (dce)");
+        expect(newSelectedValues.at(0).text()).toBe("dceName4 (as dataset)");
     });
 
     it("tagging filter", async () => {
diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 7889234af93e..1346f000bb5e 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -135,8 +135,9 @@ const formattedOptions = computed(() => {
             if (Array.isArray(otherOptions)) {
                 otherOptions.forEach((option) => {
                     const keepKey = `${option.id}_${option.src}`;
+                    const sourceLabel = getSourceLabel(getSourceType(option));
                     const newOption = {
-                        label: `${option.name} (${option.src})`,
+                        label: `${option.name} (as ${sourceLabel})`,
                         value: option || null,
                     };
                     keepOptions[keepKey] = newOption;
diff --git a/lib/galaxy_test/selenium/test_tool_form.py b/lib/galaxy_test/selenium/test_tool_form.py
index 3c738cf87f53..9dba37e40697 100644
--- a/lib/galaxy_test/selenium/test_tool_form.py
+++ b/lib/galaxy_test/selenium/test_tool_form.py
@@ -243,7 +243,7 @@ def test_rerun_dataset_collection_element(self):
         self.hda_click_primary_action_button(1, "rerun")
         self.sleep_for(self.wait_types.UX_RENDER)
         select_field = self.components.tool_form.parameter_data_select(parameter="input1")
-        self.select_set_value(select_field, "test0 (dce)")
+        self.select_set_value(select_field, "test0 (as dataset collection)")
         self.tool_form_execute()
         self.components.history_panel.collection_view.back_to_history.wait_for_and_click()
         self.history_panel_wait_for_hid_ok(9)

From 491dcd57943cebd1fa771abe1a2455e3aeef40f9 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 16 Sep 2023 07:31:15 +0300
Subject: [PATCH 86/86] Avoid using component internal eventbus, use regular
 parent props instead to show/hide spinner

---
 .../Form/Elements/FormData/FormData.vue       | 73 ++++++++-----------
 client/src/components/Form/FormDisplay.vue    |  5 ++
 client/src/components/Form/FormElement.vue    |  2 +
 client/src/components/Form/FormInputs.vue     |  5 ++
 client/src/components/Tool/ToolForm.vue       |  4 +
 5 files changed, 45 insertions(+), 44 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 1346f000bb5e..fcf318eed156 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -4,7 +4,7 @@ import { faCopy, faFile, faFolder } from "@fortawesome/free-regular-svg-icons";
 import { faExclamation, faLink, faUnlink } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BButtonGroup, BFormCheckbox } from "bootstrap-vue";
-import Vue, { computed, onMounted, type Ref, ref, watch } from "vue";
+import { computed, onMounted, type Ref, ref, watch } from "vue";
 
 import { getGalaxyInstance } from "@/app";
 import { type EventData, useEventStore } from "@/stores/eventStore";
@@ -23,6 +23,7 @@ interface SelectOption {
 
 const props = withDefaults(
     defineProps<{
+        loading?: boolean;
         multiple?: boolean;
         optional?: boolean;
         options: Record<string, Array<DataOption>>;
@@ -35,6 +36,7 @@ const props = withDefaults(
         tag?: string;
     }>(),
     {
+        loading: false,
         multiple: false,
         optional: false,
         value: null,
@@ -45,8 +47,6 @@ const props = withDefaults(
     }
 );
 
-const eventBus = new Vue();
-
 const eventStore = useEventStore();
 
 const $emit = defineEmits(["input"]);
@@ -67,9 +67,6 @@ const dragTarget: Ref<EventTarget | null> = ref(null);
 /** Store options which need to be preserved **/
 const keepOptions: Record<string, SelectOption> = {};
 
-/** Displays a wait indicator between setting a value and receiving an update */
-const waiting = ref(false);
-
 /**
  * Determine whether the file dialog can be used or not
  */
@@ -85,11 +82,33 @@ const currentSource = computed(() => (currentVariant.value ? currentVariant.valu
  */
 const currentValue = computed({
     get: () => {
-        eventBus.$emit("waiting", false);
-        return getValue();
+        const value: Array<DataOption> = [];
+        if (props.value) {
+            for (const v of props.value.values) {
+                const foundEntry = formattedOptions.value.find(
+                    (entry) => entry.value && entry.value.id === v.id && entry.value.src === v.src
+                );
+                if (foundEntry && foundEntry.value) {
+                    value.push(foundEntry.value);
+                    if (!currentVariant.value?.multiple) {
+                        break;
+                    }
+                }
+            }
+            if (value.length > 0) {
+                return value;
+            }
+        }
+        if (!props.optional && formattedOptions.value.length > 0) {
+            const firstEntry = formattedOptions.value && formattedOptions.value[0];
+            if (firstEntry && firstEntry.value) {
+                value.push(firstEntry.value);
+                return value;
+            }
+        }
+        return null;
     },
     set: (val) => {
-        eventBus.$emit("waiting", true);
         $emit("input", createValue(val));
     },
 });
@@ -265,37 +284,6 @@ function getSourceType(val: DataOption) {
     }
 }
 
-/**
- * Parse incoming value for select field
- */
-function getValue() {
-    const value: Array<DataOption> = [];
-    if (props.value) {
-        for (const v of props.value.values) {
-            const foundEntry = formattedOptions.value.find(
-                (entry) => entry.value && entry.value.id === v.id && entry.value.src === v.src
-            );
-            if (foundEntry && foundEntry.value) {
-                value.push(foundEntry.value);
-                if (!currentVariant.value?.multiple) {
-                    break;
-                }
-            }
-        }
-        if (value.length > 0) {
-            return value;
-        }
-    }
-    if (!props.optional && formattedOptions.value.length > 0) {
-        const firstEntry = formattedOptions.value && formattedOptions.value[0];
-        if (firstEntry && firstEntry.value) {
-            value.push(firstEntry.value);
-            return value;
-        }
-    }
-    return null;
-}
-
 /** Add values from drag/drop or data dialog sources */
 function handleIncoming(incoming: Record<string, unknown>, partial = true) {
     if (incoming) {
@@ -422,9 +410,6 @@ const matchedValues = computed(() => {
 });
 
 onMounted(() => {
-    eventBus.$on("waiting", (value: boolean) => {
-        waiting.value = value;
-    });
     if (props.value) {
         $emit("input", createValue(matchedValues.value));
     } else {
@@ -467,7 +452,7 @@ watch(
                         v-b-tooltip.hover.bottom
                         title="Browse or Upload Datasets"
                         @click="onBrowse">
-                        <FontAwesomeIcon v-if="waiting" icon="fa-spinner" spin />
+                        <FontAwesomeIcon v-if="loading" icon="fa-spinner" spin />
                         <span v-else class="font-weight-bold">...</span>
                     </BButton>
                 </BButtonGroup>
diff --git a/client/src/components/Form/FormDisplay.vue b/client/src/components/Form/FormDisplay.vue
index 200a5d32f669..6fe1e7128ac5 100644
--- a/client/src/components/Form/FormDisplay.vue
+++ b/client/src/components/Form/FormDisplay.vue
@@ -2,6 +2,7 @@
     <FormInputs
         :key="id"
         :inputs="formInputs"
+        :loading="loading"
         :prefix="prefix"
         :sustain-repeats="sustainRepeats"
         :sustain-conditionals="sustainConditionals"
@@ -37,6 +38,10 @@ export default {
             type: Object,
             default: null,
         },
+        loading: {
+            type: Boolean,
+            default: false,
+        },
         prefix: {
             type: String,
             default: "",
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index 2d32b53bf682..f5f972c0d350 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -35,6 +35,7 @@ interface FormElementProps {
     error?: string;
     warning?: string;
     disabled?: boolean;
+    loading?: boolean;
     attributes?: FormParameterAttributes;
     collapsedEnableText?: string;
     collapsedDisableText?: string;
@@ -276,6 +277,7 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
                 v-else-if="['data', 'data_collection'].includes(props.type)"
                 :id="id"
                 v-model="currentValue"
+                :loading="loading"
                 :extension="attrs.extension"
                 :flavor="attrs.flavor"
                 :multiple="attrs.multiple"
diff --git a/client/src/components/Form/FormInputs.vue b/client/src/components/Form/FormInputs.vue
index 5fabe26f0517..0a29d2ba9f4e 100644
--- a/client/src/components/Form/FormInputs.vue
+++ b/client/src/components/Form/FormInputs.vue
@@ -57,6 +57,7 @@
                 :collapsed-enable-icon="collapsedEnableIcon"
                 :collapsed-disable-text="collapsedDisableText"
                 :collapsed-disable-icon="collapsedDisableIcon"
+                :loading="loading"
                 :workflow-building-mode="workflowBuildingMode"
                 @change="onChange" />
         </div>
@@ -84,6 +85,10 @@ export default {
             type: Array,
             default: null,
         },
+        loading: {
+            type: Boolean,
+            default: false,
+        },
         prefix: {
             type: String,
             default: "",
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 3140f8771a4e..bcca2a7c2302 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -43,6 +43,7 @@
                         :id="toolId"
                         :inputs="formConfig.inputs"
                         :errors="formConfig.errors"
+                        :loading="loading"
                         :validation-scroll-to="validationScrollTo"
                         :warnings="formConfig.warnings"
                         @onChange="onChange"
@@ -155,6 +156,7 @@ export default {
     data() {
         return {
             disabled: false,
+            loading: false,
             showLoading: true,
             showForm: false,
             showEntryPoints: false,
@@ -271,6 +273,7 @@ export default {
         requestTool(newVersion) {
             this.currentVersion = newVersion || this.currentVersion;
             this.disabled = true;
+            this.loading = true;
             console.debug("ToolForm - Requesting tool.", this.id);
             return getToolFormData(this.id, this.currentVersion, this.job_id, this.history_id)
                 .then((data) => {
@@ -290,6 +293,7 @@ export default {
                 })
                 .finally(() => {
                     this.disabled = false;
+                    this.loading = false;
                     this.showLoading = false;
                 });
         },