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/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.test.js b/client/src/components/Form/Elements/FormData/FormData.test.js
new file mode 100644
index 000000000000..42910c30a0ec
--- /dev/null
+++ b/client/src/components/Form/Elements/FormData/FormData.test.js
@@ -0,0 +1,394 @@
+import { createTestingPinia } from "@pinia/testing";
+import { mount } from "@vue/test-utils";
+import { PiniaVuePlugin } from "pinia";
+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,
+        pinia,
+        stubs: {
+            FontAwesomeIcon: true,
+        },
+    });
+}
+
+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: "dce4", name: "dceName4", src: "dce", is_dataset: true },
+    ],
+    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: "hdca5", hid: 5, name: "hdcaName5", src: "hdca" },
+        { id: "hdca6", hid: 6, name: "hdcaName6", src: "hdca" },
+    ],
+};
+
+const SELECT_OPTIONS = ".multiselect__element";
+const SELECTED_VALUE = ".multiselect__option--selected span";
+
+describe("FormData", () => {
+    it("regular data", async () => {
+        const wrapper = createTarget({
+            value: null,
+            options: defaultOptions,
+        });
+        const value_0 = {
+            batch: false,
+            product: false,
+            values: [{ id: "dce4", src: "dce", map_over_type: null }],
+        };
+        const value_1 = {
+            batch: false,
+            product: false,
+            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("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" }] } });
+        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(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("4: hdaName4");
+    });
+
+    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(7);
+    });
+
+    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("4: hdaName4");
+        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);
+    });
+
+    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 selectedValues = wrapper.findAll(SELECTED_VALUE);
+        expect(selectedValues.length).toBe(1);
+        expect(selectedValues.at(0).text()).toBe("dceName1 (as dataset)");
+    });
+
+    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", map_over_type: null, 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("dceName2 (as dataset collection)");
+    });
+
+    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", 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 (as dataset collection)");
+    });
+
+    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" }],
+        };
+        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 (as dataset collection)");
+    });
+
+    it("dataset collection mapped to non-batch field", async () => {
+        const wrapper = createTarget({
+            type: "data_collection",
+            value: { values: [{ id: "hdca5", src: "hdca" }] },
+            options: defaultOptions,
+        });
+        const value_0 = {
+            batch: false,
+            product: false,
+            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("5: hdcaName5");
+    });
+
+    it("multiple dataset collection elements (as hdas)", async () => {
+        const wrapper = createTarget({
+            value: {
+                values: [
+                    { id: "dce1", src: "dce" },
+                    { id: "dce4", src: "dce" },
+                ],
+            },
+            options: defaultOptions,
+        });
+        const value_0 = {
+            batch: true,
+            product: false,
+            values: [
+                { 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);
+    });
+
+    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" }],
+        });
+    });
+
+    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: "dce4", map_over_type: null, src: "dce" }],
+        });
+        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: "dce4", map_over_type: null, src: "dce" }],
+        });
+        const elements_0 = wrapper.findAll(SELECT_OPTIONS);
+        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: "hda3", 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."
+        );
+        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[3][0]).toEqual({
+            batch: true,
+            product: true,
+            values: [
+                { id: "dce4", map_over_type: null, src: "dce" },
+                { id: "hda3", map_over_type: null, src: "hda" },
+            ],
+        });
+    });
+
+    it("match dataset collection on initial value", async () => {
+        const wrapper = createTarget({
+            value: {
+                values: [{ id: "hdca5", 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");
+        for (const i of [0, 1]) {
+            expect(wrapper.emitted().input[i][0]).toEqual({
+                batch: false,
+                product: false,
+                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("5: hdcaName5");
+        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: "dce4", map_over_type: null, src: "dce" }],
+        });
+        const newSelectedValues = wrapper.findAll(SELECTED_VALUE);
+        expect(newSelectedValues.at(0).text()).toBe("dceName4 (as dataset)");
+    });
+
+    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
new file mode 100644
index 000000000000..fcf318eed156
--- /dev/null
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -0,0 +1,493 @@
+<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 { BButton, BButtonGroup, BFormCheckbox } from "bootstrap-vue";
+import { computed, onMounted, type Ref, ref, watch } from "vue";
+
+import { getGalaxyInstance } from "@/app";
+import { type EventData, useEventStore } from "@/stores/eventStore";
+
+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 SelectOption {
+    label: string;
+    value: DataOption | null;
+}
+
+const props = withDefaults(
+    defineProps<{
+        loading?: boolean;
+        multiple?: boolean;
+        optional?: boolean;
+        options: Record<string, Array<DataOption>>;
+        value?: {
+            values: Array<DataOption>;
+        };
+        extensions?: Array<string>;
+        type?: string;
+        flavor?: string;
+        tag?: string;
+    }>(),
+    {
+        loading: false,
+        multiple: false,
+        optional: false,
+        value: null,
+        extensions: () => [],
+        type: "data",
+        flavor: null,
+        tag: null,
+    }
+);
+
+const eventStore = useEventStore();
+
+const $emit = defineEmits(["input"]);
+
+// Determines wether values should be processed as linked or unlinked
+const currentLinked = 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<string | null> = ref(null);
+
+// 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> = {};
+
+/**
+ * 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 : null));
+
+/**
+ * Interface between incoming input value and select field value
+ */
+const currentValue = computed({
+    get: () => {
+        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) => {
+        $emit("input", createValue(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];
+    } else {
+        return null;
+    }
+});
+
+/**
+ * Converts and populates options for the shown select field
+ */
+const formattedOptions = computed(() => {
+    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.forEach((option) => {
+            const newOption = {
+                label: `${option.hid}: ${option.name}`,
+                value: option || null,
+            };
+            if (option.keep) {
+                const keepKey = `${option.id}_${option.src}`;
+                keepOptions[keepKey] = newOption;
+            } else {
+                const accepted = !props.tag || option.tags?.includes(props.tag);
+                if (accepted) {
+                    result.push(newOption);
+                }
+            }
+        });
+        // 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 sourceLabel = getSourceLabel(getSourceType(option));
+                    const newOption = {
+                        label: `${option.name} (as ${sourceLabel})`,
+                        value: option || null,
+                    };
+                    keepOptions[keepKey] = newOption;
+                });
+            }
+        }
+        // Populate keep-options from cache
+        Object.entries(keepOptions).forEach(([key, option]) => {
+            if (option.value && getSourceType(option.value) === currentSource.value) {
+                result.unshift(option);
+            }
+        });
+        // Sort entries by hid
+        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;
+            }
+        });
+        // Add optional entry
+        if (!currentVariant.value?.multiple && props.optional) {
+            result.unshift({
+                label: "Nothing selected",
+                value: null,
+            });
+        }
+        return result;
+    } else {
+        return [];
+    }
+});
+
+/**
+ * Provides placeholder label for select field
+ */
+const placeholder = computed(() => getSourceLabel(currentSource.value));
+
+/**
+ * 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 ? `_multiple` : "";
+    const variantKey = `${flavorKey}${props.type}${multipleKey}`;
+    return VARIANTS[variantKey];
+});
+
+/**
+ * Clears highlighting with delay
+ */
+function clearHighlighting(timeout = 1000) {
+    setTimeout(() => {
+        currentHighlighting.value = null;
+    }, 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 hasMapOverType = values.find((v) => !!v.map_over_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) {
+                    // Switch to another field type if source differs from current field
+                    if (isMultiple || (currentVariant.value && currentVariant.value.src !== sourceType)) {
+                        currentField.value = variantIndex;
+                        batch = variantDetails.batch;
+                    } else {
+                        batch = (currentVariant.value && currentVariant.value.batch) || BATCH.DISABLED;
+                    }
+                }
+            }
+            // Emit new value
+            return {
+                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 || 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 (val.src === SOURCE.COLLECTION_ELEMENT) {
+        return val.is_dataset ? SOURCE.DATASET : SOURCE.COLLECTION;
+    } else if (val.src === SOURCE.LIBRARY_DATASET) {
+        return SOURCE.DATASET;
+    } else {
+        return val.src;
+    }
+}
+
+/** 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
+                const newHid = v.hid;
+                const newId = v.id;
+                const newName = v.name ? v.name : newId;
+                const newSrc =
+                    v.src || (v.history_content_type === "dataset_collection" ? SOURCE.COLLECTION : SOURCE.DATASET);
+                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)) {
+                    keepOptions[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];
+                if (config && config.src == firstValue.src && 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;
+                }
+            }
+        }
+    }
+}
+
+/**
+ * Open file dialog
+ */
+function onBrowse() {
+    if (currentVariant.value) {
+        const library = !!currentVariant.value.library;
+        const multiple = !!currentVariant.value.multiple;
+        getGalaxyInstance().data.dialog(
+            (response: Record<string, unknown>) => {
+                handleIncoming(response, false);
+            },
+            {
+                allowUpload: true,
+                format: null,
+                library,
+                multiple,
+            }
+        );
+    }
+}
+
+/**
+ * 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 = null;
+    }
+}
+
+function onDragOver() {
+    if (dragData.value !== null) {
+        currentHighlighting.value = "warning";
+    }
+}
+
+function onDrop() {
+    if (dragData.value) {
+        handleIncoming(dragData.value);
+        currentHighlighting.value = "success";
+        dragData.value = null;
+        clearHighlighting();
+    }
+}
+
+/**
+ * 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(() => {
+    if (props.value) {
+        $emit("input", createValue(matchedValues.value));
+    } else {
+        $emit("input", createValue(currentValue.value));
+    }
+});
+
+/**
+ * Watch and set current value if user switches to a different select field
+ */
+watch(
+    () => [props.options, currentLinked.value, currentVariant.value],
+    () => {
+        $emit("input", createValue(currentValue.value));
+    }
+);
+</script>
+
+<template>
+    <div
+        :class="currentHighlighting && `ui-dragover-${currentHighlighting}`"
+        @dragenter.prevent="onDragEnter"
+        @dragleave.prevent="onDragLeave"
+        @dragover.prevent="onDragOver"
+        @drop.prevent="onDrop">
+        <div>
+            <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="loading" icon="fa-spinner" spin />
+                        <span v-else class="font-weight-bold">...</span>
+                    </BButton>
+                </BButtonGroup>
+                <FormSelect
+                    v-if="currentVariant"
+                    v-model="currentValue"
+                    :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>
+                    <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>
+                    </span>
+                    <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>
+    </div>
+</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..46929c8b876d
--- /dev/null
+++ b/client/src/components/Form/Elements/FormData/types.ts
@@ -0,0 +1,10 @@
+export interface DataOption {
+    id: string;
+    hid: number;
+    is_dataset?: boolean;
+    keep: boolean;
+    map_over_type?: string;
+    name: string;
+    src: string;
+    tags: Array<string>;
+}
diff --git a/client/src/components/Form/Elements/FormData/variants.ts b/client/src/components/Form/Elements/FormData/variants.ts
new file mode 100644
index 000000000000..1b73712514fe
--- /dev/null
+++ b/client/src/components/Form/Elements/FormData/variants.ts
@@ -0,0 +1,127 @@
+/** Data input variations interface */
+interface VariantInterface {
+    batch: string;
+    icon: string;
+    library?: boolean;
+    multiple: boolean;
+    src: string;
+    tooltip: string;
+}
+
+/** Batch mode variations */
+export const BATCH = { DISABLED: "disabled", ENABLED: "enabled", LINKED: "linked" };
+
+/** Data source variations */
+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>> = {
+    data: [
+        {
+            src: "hda",
+            icon: "fa-file",
+            tooltip: "Single dataset",
+            library: true,
+            multiple: false,
+            batch: BATCH.DISABLED,
+        },
+        {
+            src: "hda",
+            icon: "fa-copy",
+            tooltip: "Multiple datasets",
+            multiple: true,
+            batch: BATCH.LINKED,
+        },
+        {
+            src: "hdca",
+            icon: "fa-folder",
+            tooltip: "Dataset collection",
+            multiple: false,
+            batch: BATCH.LINKED,
+        },
+    ],
+    data_multiple: [
+        {
+            src: "hda",
+            icon: "fa-copy",
+            tooltip: "Multiple datasets",
+            multiple: true,
+            batch: BATCH.DISABLED,
+        },
+        {
+            src: "hdca",
+            icon: "fa-folder",
+            tooltip: "Dataset collection",
+            multiple: true,
+            batch: BATCH.DISABLED,
+        },
+    ],
+    data_collection: [
+        {
+            src: "hdca",
+            icon: "fa-folder",
+            tooltip: "Dataset collection",
+            multiple: false,
+            batch: BATCH.DISABLED,
+        },
+    ],
+    workflow_data: [
+        {
+            src: "hda",
+            icon: "fa-file",
+            tooltip: "Single dataset",
+            multiple: false,
+            batch: BATCH.DISABLED,
+        },
+    ],
+    workflow_data_multiple: [
+        {
+            src: "hda",
+            icon: "fa-copy",
+            tooltip: "Multiple datasets",
+            multiple: true,
+            batch: BATCH.DISABLED,
+        },
+    ],
+    workflow_data_collection: [
+        {
+            src: "hdca",
+            icon: "fa-folder",
+            tooltip: "Dataset collection",
+            multiple: false,
+            batch: BATCH.DISABLED,
+        },
+    ],
+    module_data: [
+        {
+            src: "hda",
+            icon: "fa-file",
+            tooltip: "Single dataset",
+            multiple: false,
+            batch: BATCH.DISABLED,
+        },
+        {
+            src: "hda",
+            icon: "fa-copy",
+            tooltip: "Multiple datasets",
+            multiple: true,
+            batch: BATCH.ENABLED,
+        },
+    ],
+    module_data_collection: [
+        {
+            src: "hdca",
+            icon: "fa-folder",
+            tooltip: "Dataset collection",
+            multiple: false,
+            batch: BATCH.DISABLED,
+        },
+        {
+            src: "hdca",
+            icon: "fa-folder",
+            tooltip: "Multiple collections",
+            multiple: true,
+            batch: BATCH.ENABLED,
+        },
+    ],
+};
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>
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.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],
         });
diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index 73782749de61..566b67a75e63 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -2,12 +2,14 @@
 import { computed, type ComputedRef, onMounted, watch } from "vue";
 import Multiselect from "vue-multiselect";
 
+import { type DataOption } from "@/components/Form/Elements/FormData/types";
 import { useMultiselect } from "@/composables/useMultiselect";
 import { uid } from "@/utils/utils";
 
-type SelectValue = string | number | null;
 const { ariaExpanded, onOpen, onClose } = useMultiselect();
 
+type SelectValue = DataOption | string | number | null;
+
 interface SelectOption {
     label: string;
     value: SelectValue;
@@ -16,15 +18,19 @@ interface SelectOption {
 const props = withDefaults(
     defineProps<{
         id?: string;
+        disabled?: boolean;
         multiple?: boolean;
         optional?: boolean;
-        options: Array<[string, SelectValue]>;
+        options: Array<SelectOption>;
+        placeholder?: string;
         value?: Array<SelectValue> | string | number;
     }>(),
     {
         id: `form-select-${uid()}`,
+        disabled: false,
         multiple: false,
         optional: false,
+        placeholder: "Select value",
         value: null,
     }
 );
@@ -33,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
  */
@@ -47,29 +46,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 result: Array<SelectOption> = props.options.map((option) => ({
-        label: option[0],
-        value: option[1],
-    }));
-    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;
 });
 
 /**
@@ -77,7 +58,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;
         }
@@ -95,15 +76,13 @@ 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
  */
 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) {
@@ -148,19 +127,19 @@ onMounted(() => {
         v-if="hasOptions"
         :id="id"
         v-model="currentValue"
-        :allow-empty="true"
-        :class="['form-select', cls]"
+        :allow-empty="multiple && optional"
+        :aria-expanded="ariaExpanded"
         :close-on-select="!multiple"
+        :disabled="disabled"
         :deselect-label="deselectLabel"
-        :options="formattedOptions"
+        label="label"
         :multiple="multiple"
+        :options="props.options"
+        :placeholder="placeholder"
         :selected-label="selectedLabel"
-        :aria-expanded="ariaExpanded"
-        placeholder="Select value"
         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>
+    <b-alert v-else v-localize class="w-100" variant="warning" show> No options available. </b-alert>
 </template>
diff --git a/client/src/components/Form/Elements/FormSelection.vue b/client/src/components/Form/Elements/FormSelection.vue
index 306a3a15686c..42d5a762e0d6 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({
@@ -43,16 +43,21 @@ 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;
+    }
+    if (!props.display && !props.multiple && props.optional) {
+        result.unshift({
+            label: "Nothing selected",
+            value: null,
         });
     }
-    return [];
+    return result;
 });
 </script>
 
diff --git a/client/src/components/Form/Elements/parameters.js b/client/src/components/Form/Elements/parameters.js
index 39761634e9d3..01729e887c0a 100644
--- a/client/src/components/Form/Elements/parameters.js
+++ b/client/src/components/Form/Elements/parameters.js
@@ -1,29 +1,16 @@
 /**
     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";
-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";
 
 // create form view
 export default Backbone.View.extend({
     /** Available parameter types */
     types: {
-        select: "_fieldSelect",
-        data_column: "_fieldSelect",
-        genomebuild: "_fieldSelect",
-        data: "_fieldData",
-        data_collection: "_fieldData",
-        group_tag: "_fieldSelect",
         library_data: "_fieldLibrary",
         ftpfile: "_fieldFtp",
-        rules: "_fieldRulesEdit",
-        data_dialog: "_fieldDialog",
     },
 
     remove: function () {
@@ -35,10 +22,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 = input_def.options ? this._fieldSelect(input_def) : 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;
         }
@@ -47,118 +30,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
-        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
-        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({
-            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/components/Form/Elements/parameters.test.js b/client/src/components/Form/Elements/parameters.test.js
deleted file mode 100644
index dc700bad1363..000000000000
--- a/client/src/components/Form/Elements/parameters.test.js
+++ /dev/null
@@ -1,44 +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();
-    });
-
-    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();
-    });
-});
diff --git a/client/src/components/Form/FormDisplay.vue b/client/src/components/Form/FormDisplay.vue
index f6e22c76fb7c..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: "",
@@ -200,7 +205,7 @@ export default {
                 }
             }
         },
-        getOffsetTop(element, padding = 150) {
+        getOffsetTop(element, padding = 200) {
             let offsetTop = 0;
             while (element) {
                 offsetTop += element.offsetTop;
@@ -218,7 +223,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));
                         }
                     }
                 }
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index bebef6ffb639..f5f972c0d350 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";
@@ -33,8 +34,8 @@ interface FormElementProps {
     help?: string;
     error?: string;
     warning?: string;
-    backbonejs?: boolean;
     disabled?: boolean;
+    loading?: boolean;
     attributes?: FormParameterAttributes;
     collapsedEnableText?: string;
     collapsedDisableText?: string;
@@ -50,7 +51,6 @@ interface FormElementProps {
 const props = withDefaults(defineProps<FormElementProps>(), {
     id: "identifier",
     refreshOnChange: false,
-    backbonejs: false,
     disabled: false,
     collapsedEnableText: "Enable",
     collapsedDisableText: "Disable",
@@ -205,9 +205,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 +273,18 @@ 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)"
+                :id="id"
+                v-model="currentValue"
+                :loading="loading"
+                :extension="attrs.extension"
+                :flavor="attrs.flavor"
+                :multiple="attrs.multiple"
+                :optional="attrs.optional"
+                :options="attrs.options"
+                :tag="attrs.tag"
+                :type="props.type" />
             <FormDrilldown
                 v-else-if="props.type === 'drill_down'"
                 :id="id"
@@ -289,11 +301,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..0a29d2ba9f4e 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,11 +53,11 @@
                 :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"
                 :collapsed-disable-icon="collapsedDisableIcon"
+                :loading="loading"
                 :workflow-building-mode="workflowBuildingMode"
                 @change="onChange" />
         </div>
@@ -86,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;
                 });
         },
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/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>
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;
         },
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;
-    },
-});
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,
 };
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,
-};
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;
         }
     }
 }
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 */
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 874ee317fbaf..52cbbe2886bc 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -555,13 +555,10 @@ 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
-    data_option_value: option[value="${item_id}"]
+    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'
 
     repeat_insert: '[data-description="repeat insert"]'
     repeat_move_up: '#${parameter}_up'
@@ -648,7 +645,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/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);
 }
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index 30d16f4f0525..71764955fa4d 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -1484,12 +1484,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()
@@ -1587,8 +1588,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
diff --git a/lib/galaxy/tools/parameters/basic.py b/lib/galaxy/tools/parameters/basic.py
index 6de845c6fd32..6e16f7fc597c 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"] = {"hda": [], "hdca": []}
+        d["options"] = {"dce": [], "ldda": [], "hda": [], "hdca": []}
         d["tag"] = self.tag
 
         # return dictionary without options if context is unavailable
@@ -2300,26 +2303,27 @@ 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,
+                    "is_dataset": dce.hda is not None,
                     "src": "dce",
                     "tags": [],
                     "keep": True,
                 }
             )
 
-        # append DCE
-        if isinstance(other_values.get(self.name), DatasetCollectionElement):
-            dce = other_values[self.name]
-            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,
+                }
+            )
 
         # add datasets
         hda_list = util.listify(other_values.get(self.name))
@@ -2342,6 +2346,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)
@@ -2503,7 +2509,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,
@@ -2538,10 +2544,10 @@ def to_dict(self, trans, other_values=None):
                 {
                     "id": trans.security.encode_id(hdca.id),
                     "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],
-                    "map_over_type": subcollection_type,
                 }
             )
 
diff --git a/lib/galaxy_test/selenium/test_tool_form.py b/lib/galaxy_test/selenium/test_tool_form.py
index 2bc8f59b2ac2..9dba37e40697 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,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"
+        select_field = self.components.tool_form.parameter_data_select(parameter="input1")
+        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)
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()