From 7dd7e49168cafd7c9f9644994de6f62fb7f74125 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 26 Sep 2024 18:13:53 -0500
Subject: [PATCH] fully implement `list` collection creator in `FormData`

This allows a collection type `list` to be created via the collection creater from the workflow/tool form directly.
It tracks the current history changes via the new `useHistoryItemsForType` composable.
It utilises the `FormSelectMany` component to easily move items between selected and unselected for list columns.
The items in the list creator can be filtered for extension, parent datatype or all items in the history, based on whether the form field required a certain extension(s) as input for the list.
---
 client/src/api/histories.ts                   |   3 +
 .../Collections/ListCollectionCreator.vue     | 338 ++++++++++++++----
 .../Collections/ListCollectionCreatorModal.js |  16 +-
 .../ListDatasetCollectionElementView.vue      |  43 ++-
 .../Collections/PairCollectionCreator.vue     |   1 +
 .../PairedListCollectionCreator.vue           |   1 +
 .../Collections/common/ClickToEdit.vue        |  52 +--
 .../Collections/common/CollectionCreator.vue  | 163 +++++----
 .../src/components/Common/ButtonSpinner.vue   |  14 +-
 client/src/components/Datatypes/model.ts      |  10 +
 .../Form/Elements/FormData/FormData.vue       |  93 +++--
 .../components/Form/Elements/FormSelect.vue   |   3 +-
 .../FormSelectMany/FormSelectMany.vue         |   8 +-
 client/src/components/Help/terms.yml          |  11 +
 .../HistoryOperations/SelectionOperations.vue |   4 +-
 .../History/adapters/HistoryPanelProxy.js     |   2 +-
 ...ectionModal.js => buildCollectionModal.ts} |  43 ++-
 .../src/composables/useHistoryItemsForType.ts |  90 +++++
 18 files changed, 665 insertions(+), 230 deletions(-)
 create mode 100644 client/src/api/histories.ts
 rename client/src/components/History/adapters/{buildCollectionModal.js => buildCollectionModal.ts} (55%)
 create mode 100644 client/src/composables/useHistoryItemsForType.ts

diff --git a/client/src/api/histories.ts b/client/src/api/histories.ts
new file mode 100644
index 000000000000..ed10bb8efb1f
--- /dev/null
+++ b/client/src/api/histories.ts
@@ -0,0 +1,3 @@
+import { type components } from "@/api";
+
+export type HistoryContentsResult = components["schemas"]["HistoryContentsResult"];
diff --git a/client/src/components/Collections/ListCollectionCreator.vue b/client/src/components/Collections/ListCollectionCreator.vue
index 5798187943f2..e5590be15fd1 100644
--- a/client/src/components/Collections/ListCollectionCreator.vue
+++ b/client/src/components/Collections/ListCollectionCreator.vue
@@ -1,21 +1,29 @@
 <script setup lang="ts">
 import "ui/hoverhighlight";
 
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faSortAlphaDown, faUndo } from "@fortawesome/free-solid-svg-icons";
+import { faSquare } from "@fortawesome/free-regular-svg-icons";
+import { faMinus, faSortAlphaDown, faTimes, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton } from "bootstrap-vue";
-import { computed, onMounted, ref } from "vue";
+import { BAlert, BButton, BButtonGroup } from "bootstrap-vue";
+import { computed, onMounted, ref, watch } from "vue";
 import draggable from "vuedraggable";
 
-import type { HDCADetailed, HistoryItemSummary } from "@/api";
+import type { HDASummary, HistoryItemSummary } from "@/api";
 import STATES from "@/mvc/dataset/states";
+import { useDatatypesMapperStore } from "@/stores/datatypesMapperStore";
 import localize from "@/utils/localization";
 
+import FormSelectMany from "../Form/Elements/FormSelectMany/FormSelectMany.vue";
 import CollectionCreator from "@/components/Collections/common/CollectionCreator.vue";
 import DatasetCollectionElementView from "@/components/Collections/ListDatasetCollectionElementView.vue";
 
-library.add(faSortAlphaDown, faUndo);
+const DEFAULT_DATATYPE_FILTER_OPTIONS = [
+    { text: "All", value: "all" },
+    { text: "Datatype", value: "datatype" },
+    { text: "Extension", value: "ext" },
+];
+
+type DatatypeToggle = "all" | "datatype" | "ext" | undefined;
 
 interface Props {
     initialElements: Array<any>;
@@ -23,6 +31,8 @@ interface Props {
     oncreate: () => void;
     creationFn: (workingElements: any, collectionName: string, hideSourceItems: boolean) => any;
     defaultHideSourceItems?: boolean;
+    fromSelection?: boolean;
+    extensions?: string[];
 }
 
 const props = defineProps<Props>();
@@ -35,7 +45,7 @@ const state = ref("build");
 const originalNamedElements = ref([]);
 const duplicateNames = ref<string[]>([]);
 const invalidElements = ref<string[]>([]);
-const workingElements = ref<HDCADetailed[]>([]);
+const workingElements = ref<HDASummary[]>([]);
 const selectedDatasetElements = ref<string[]>([]);
 const hideSourceItems = ref(props.defaultHideSourceItems || false);
 
@@ -54,7 +64,7 @@ const returnInvalidElementsLength = computed(() => {
 const returnInvalidElements = computed(() => {
     return invalidElements.value;
 });
-const noElementsSelected = computed(() => {
+const noInitialElements = computed(() => {
     return props.initialElements.length == 0;
 });
 const showDuplicateError = computed(() => {
@@ -64,6 +74,30 @@ const allElementsAreInvalid = computed(() => {
     return props.initialElements.length == invalidElements.value.length;
 });
 
+/** If not `fromSelection`, the list of elements that will become the collection */
+const inListElements = ref<any>([]);
+
+// variables for datatype mapping and then filtering
+const datatypesMapperStore = useDatatypesMapperStore();
+const datatypesMapper = computed(() => datatypesMapperStore.datatypesMapper);
+
+const datatypeToggleOptions = ref<{ text: string; value: string }[] | undefined>(
+    props.extensions?.length ? DEFAULT_DATATYPE_FILTER_OPTIONS : undefined
+);
+const baseDatatypeToggle = computed(() => {
+    const options = datatypeToggleOptions.value || [];
+    return options.find((option) => option.value === "ext")
+        ? "ext"
+        : options.find((option) => option.value === "datatype")
+        ? "datatype"
+        : "all";
+});
+
+const datatypeToggle = ref<DatatypeToggle>(props.extensions?.length ? "ext" : undefined);
+
+/** Are we filtering by extension or datatype? */
+const filterExtensions = computed(() => !!datatypesMapper.value && !!props.extensions?.length);
+
 /** set up instance vars function */
 function _instanceSetUp() {
     /** Ids of elements that have been selected by the user - to preserve over renders */
@@ -84,6 +118,9 @@ function _elementsSetUp() {
     // copy initial list, sort, add ids if needed
     workingElements.value = JSON.parse(JSON.stringify(props.initialElements.slice(0)));
 
+    // reverse the order of the elements to emulate what we have in the history panel
+    workingElements.value.reverse();
+
     _ensureElementIds();
     _validateElements();
     _mangleDuplicateNames();
@@ -112,6 +149,23 @@ function _validateElements() {
         return !problem;
     });
 
+    // if all elements are invalid, try again by switching to the next datatypeToggle value
+    // until we've tried both `ext` and `datatype` and then we revert to showing everything
+    if (props.initialElements.length && allElementsAreInvalid.value && !props.fromSelection && filterExtensions.value) {
+        if (datatypeToggle.value === "ext") {
+            datatypeToggleOptions.value = datatypeToggleOptions.value?.filter((option) => option.value !== "ext");
+            datatypeToggle.value = "datatype";
+        } else if (datatypeToggle.value === "datatype") {
+            // we've tried both `ext` and `datatype`, so we remove the toggle options
+            datatypeToggleOptions.value = undefined;
+            datatypeToggle.value = "all";
+        } else {
+            return;
+        }
+        // re-run `_elementsSetUp` to filter out invalid elements for the new datatypeToggle value
+        _elementsSetUp();
+    }
+
     return workingElements.value;
 }
 
@@ -131,6 +185,18 @@ function _isElementInvalid(element: HistoryItemSummary) {
         return localize("has been deleted or purged");
     }
 
+    if (filterExtensions.value && datatypeToggle.value !== "all" && element.extension) {
+        if (
+            // is the element's extension not a subtype of any of the required extensions?
+            (datatypeToggle.value === "ext" &&
+                !datatypesMapper.value?.isSubTypeOfAny(element.extension, props.extensions!)) ||
+            // else, does the element's extension have the same parent class as any of the required extensions?
+            (datatypeToggle.value === "datatype" &&
+                !datatypesMapper.value?.isSubClassOfAny(element.extension, props.extensions!))
+        ) {
+            return localize("has an invalid extension");
+        }
+    }
     return null;
 }
 
@@ -152,6 +218,11 @@ function _mangleDuplicateNames() {
     });
 }
 
+function changeDatatypeFilter(newFilter: "all" | "datatype" | "ext") {
+    datatypeToggle.value = newFilter;
+    _elementsSetUp();
+}
+
 function saveOriginalNames() {
     // Deep copy elements
     originalNamedElements.value = JSON.parse(JSON.stringify(workingElements.value));
@@ -162,7 +233,7 @@ function getOriginalNames() {
     workingElements.value = JSON.parse(JSON.stringify(originalNamedElements.value));
 }
 
-function elementSelected(e: HDCADetailed) {
+function elementSelected(e: HDASummary) {
     if (!selectedDatasetElements.value.includes(e.id)) {
         selectedDatasetElements.value.push(e.id);
     } else {
@@ -170,8 +241,11 @@ function elementSelected(e: HDCADetailed) {
     }
 }
 
-function elementDiscarded(e: HDCADetailed) {
+function elementDiscarded(e: HDASummary) {
     workingElements.value.splice(workingElements.value.indexOf(e), 1);
+    selectedDatasetElements.value = selectedDatasetElements.value.filter((element) => {
+        return element !== e.id;
+    });
 
     return workingElements.value;
 }
@@ -180,14 +254,30 @@ function clickClearAll() {
     selectedDatasetElements.value = [];
 }
 
+function clickRemoveSelected() {
+    workingElements.value = workingElements.value.filter((element) => {
+        return !selectedDatasetElements.value.includes(element.id);
+    });
+
+    selectedDatasetElements.value = [];
+}
+
+function clickSelectAll() {
+    selectedDatasetElements.value = workingElements.value.map((element) => {
+        return element.id;
+    });
+}
+
 function clickedCreate(collectionName: string) {
     checkForDuplicates();
 
+    const returnedElements = props.fromSelection ? workingElements.value : inListElements.value;
+
     if (state.value !== "error") {
-        emit("clicked-create", workingElements.value, collectionName, hideSourceItems.value);
+        emit("clicked-create", returnedElements, collectionName, hideSourceItems.value);
 
         return props
-            .creationFn(workingElements.value, collectionName, hideSourceItems.value)
+            .creationFn(returnedElements, collectionName, hideSourceItems.value)
             .done(props.oncreate)
             .fail(() => {
                 state.value = "error";
@@ -215,6 +305,7 @@ function checkForDuplicates() {
 
 /** reset all data to the initial state */
 function reset() {
+    datatypeToggle.value = baseDatatypeToggle.value;
     _instanceSetUp();
     getOriginalNames();
 }
@@ -223,7 +314,7 @@ function sortByName() {
     workingElements.value.sort(compareNames);
 }
 
-function compareNames(a: HDCADetailed, b: HDCADetailed) {
+function compareNames(a: HDASummary, b: HDASummary) {
     if (a.name && b.name && a.name < b.name) {
         return -1;
     }
@@ -244,6 +335,24 @@ onMounted(() => {
     saveOriginalNames();
 });
 
+watch(
+    () => datatypesMapper.value,
+    async (mapper) => {
+        if (props.extensions?.length && !mapper) {
+            await datatypesMapperStore.createMapper();
+        }
+    },
+    { immediate: true }
+);
+
+/** find the element in the workingElements array and update its name */
+function renameElement(element: any, name: string) {
+    element = workingElements.value.find((e) => e.id === element.id);
+    if (element) {
+        element.name = name;
+    }
+}
+
 //TODO: issue #9497
 // const removeExtensions = ref(true);
 // removeExtensionsToggle: function () {
@@ -265,13 +374,13 @@ onMounted(() => {
 
 <template>
     <div class="list-collection-creator">
-        <div v-if="state == 'error'">
+        <div v-if="!showDuplicateError && state == 'error'">
             <BAlert show variant="danger">
-                {{ localize("Galaxy could not be reached and may be updating.  Try again in a few minutes.") }}
+                {{ localize("There was a problem creating the collection.") }}
             </BAlert>
         </div>
         <div v-else>
-            <div v-if="noElementsSelected">
+            <div v-if="noInitialElements">
                 <BAlert show variant="warning" dismissible>
                     {{ localize("No datasets were selected") }}
                     {{ localize("At least one element is needed for the collection. You may need to") }}
@@ -288,7 +397,22 @@ onMounted(() => {
                 </div>
             </div>
             <div v-else-if="allElementsAreInvalid">
-                <BAlert show variant="warning" dismissible>
+                <BAlert v-if="!fromSelection" show variant="warning">
+                    {{
+                        localize(
+                            "No elements in your history are valid for this list. You may need to switch to a different history."
+                        )
+                    }}
+                    <span v-if="extensions?.length">
+                        {{ localize("The following extensions are required for this list: ") }}
+                        <ul>
+                            <li v-for="extension in extensions" :key="extension">
+                                {{ extension }}
+                            </li>
+                        </ul>
+                    </span>
+                </BAlert>
+                <BAlert v-else show variant="warning" dismissible>
                     {{ localize("The following selections could not be included due to problems:") }}
                     <ul>
                         <li v-for="problem in returnInvalidElements" :key="problem">
@@ -309,7 +433,7 @@ onMounted(() => {
                 </div>
             </div>
             <div v-else>
-                <div v-if="returnInvalidElementsLength">
+                <div v-if="fromSelection && returnInvalidElementsLength">
                     <BAlert show variant="warning" dismissible>
                         {{ localize("The following selections could not be included due to problems:") }}
                         <ul>
@@ -337,9 +461,14 @@ onMounted(() => {
                 <CollectionCreator
                     :oncancel="oncancel"
                     :hide-source-items="hideSourceItems"
+                    :extensions="extensions"
+                    :datatype-toggle="filterExtensions && datatypeToggleOptions ? datatypeToggle : undefined"
+                    :datatype-toggle-options="datatypeToggleOptions"
+                    @on-update-datatype-toggle="changeDatatypeFilter"
                     @onUpdateHideSourceItems="onUpdateHideSourceItems"
                     @clicked-create="clickedCreate">
                     <template v-slot:help-content>
+                        <!-- TODO: Update help content for case where `fromSelection` is false -->
                         <p>
                             {{
                                 localize(
@@ -430,33 +559,67 @@ onMounted(() => {
                     </template>
 
                     <template v-slot:middle-content>
-                        <div class="collection-elements-controls">
-                            <BButton class="reset" :title="localize('Undo all reordering and discards')" @click="reset">
-                                <FontAwesomeIcon :icon="faUndo" />
-                            </BButton>
-
-                            <BButton class="sort-items" :title="localize('Sort datasets by name')" @click="sortByName">
-                                <FontAwesomeIcon :icon="faSortAlphaDown" />
-                            </BButton>
-
-                            <a
-                                v-if="atLeastOneDatasetIsSelected"
-                                class="clear-selected"
-                                href="javascript:void(0);"
-                                role="button"
-                                :title="localize('De-select all selected datasets')"
-                                @click="clickClearAll">
-                                {{ localize("Clear selected") }}
-                            </a>
-                        </div>
+                        <div v-if="fromSelection">
+                            <div class="collection-elements-controls">
+                                <div>
+                                    <BButton
+                                        class="reset"
+                                        :title="localize('Reset to original state')"
+                                        size="sm"
+                                        @click="reset">
+                                        <FontAwesomeIcon :icon="faUndo" fixed-width />
+                                        {{ localize("Reset") }}
+                                    </BButton>
+                                    <BButton
+                                        class="sort-items"
+                                        :title="localize('Sort datasets by name')"
+                                        size="sm"
+                                        @click="sortByName">
+                                        <FontAwesomeIcon :icon="faSortAlphaDown" />
+                                    </BButton>
+                                </div>
+
+                                <div class="center-text">
+                                    <u>{{ workingElements.length }}</u> {{ localize("elements in list") }}
+                                </div>
+
+                                <div>
+                                    <span v-if="atLeastOneDatasetIsSelected"
+                                        >{{ localize("For selection") }} ({{ selectedDatasetElements.length }}):</span
+                                    >
+                                    <BButtonGroup class="" size="sm">
+                                        <BButton
+                                            v-if="atLeastOneDatasetIsSelected"
+                                            :title="localize('Remove selected datasets from the list')"
+                                            @click="clickRemoveSelected">
+                                            <FontAwesomeIcon :icon="faMinus" fixed-width />
+                                            {{ localize("Remove") }}
+                                        </BButton>
+                                        <BButton
+                                            v-if="
+                                                !atLeastOneDatasetIsSelected ||
+                                                selectedDatasetElements.length < workingElements.length
+                                            "
+                                            :title="localize('Select all datasets')"
+                                            size="sm"
+                                            @click="clickSelectAll">
+                                            <FontAwesomeIcon :icon="faSquare" fixed-width />
+                                            {{ localize("Select all") }}
+                                        </BButton>
+                                        <BButton
+                                            v-if="atLeastOneDatasetIsSelected"
+                                            class="clear-selected"
+                                            :title="localize('De-select all selected datasets')"
+                                            @click="clickClearAll">
+                                            <FontAwesomeIcon :icon="faTimes" fixed-width />
+                                            {{ localize("Clear") }}
+                                        </BButton>
+                                    </BButtonGroup>
+                                </div>
+                            </div>
 
-                        <draggable
-                            v-model="workingElements"
-                            class="collection-elements scroll-container flex-row drop-zone"
-                            @start="drag = true"
-                            @end="drag = false">
                             <div v-if="noMoreValidDatasets">
-                                <BAlert show variant="warning" dismissible>
+                                <BAlert show variant="warning">
                                     {{ localize("No elements left. Would you like to") }}
                                     <a class="reset-text" href="javascript:void(0)" role="button" @click="reset">
                                         {{ localize("start over") }}
@@ -465,16 +628,35 @@ onMounted(() => {
                                 </BAlert>
                             </div>
 
-                            <DatasetCollectionElementView
-                                v-for="element in workingElements"
-                                v-else
-                                :key="element.id"
-                                :class="{ selected: getSelectedDatasetElements.includes(element.id) }"
-                                :element="element"
-                                @element-is-selected="elementSelected"
-                                @element-is-discarded="elementDiscarded"
-                                @onRename="(name) => (element.name = name)" />
-                        </draggable>
+                            <draggable
+                                v-model="workingElements"
+                                class="collection-elements scroll-container flex-row drop-zone"
+                                chosen-class="bg-secondary">
+                                <DatasetCollectionElementView
+                                    v-for="element in workingElements"
+                                    :key="element.id"
+                                    :class="{ selected: getSelectedDatasetElements.includes(element.id) }"
+                                    :element="element"
+                                    has-actions
+                                    :selected="getSelectedDatasetElements.includes(element.id)"
+                                    @element-is-selected="elementSelected"
+                                    @element-is-discarded="elementDiscarded"
+                                    @onRename="(name) => (element.name = name)" />
+                            </draggable>
+                        </div>
+
+                        <FormSelectMany
+                            v-else
+                            v-model="inListElements"
+                            :placeholder="localize('Filter datasets by name')"
+                            :options="workingElements.map((e) => ({ label: e.name || '', value: e }))">
+                            <template v-slot:label-area="{ value }">
+                                <DatasetCollectionElementView
+                                    class="w-100"
+                                    :element="value"
+                                    @onRename="(name) => renameElement(value, name)" />
+                            </template>
+                        </FormSelectMany>
                     </template>
                 </CollectionCreator>
             </div>
@@ -483,6 +665,9 @@ onMounted(() => {
 </template>
 
 <style scoped lang="scss">
+@import "base.scss";
+@import "theme/blue.scss";
+
 .list-collection-creator {
     .footer {
         margin-top: 8px;
@@ -494,9 +679,15 @@ onMounted(() => {
 
     .collection-elements-controls {
         margin-bottom: 8px;
-
-        .clear-selected {
-            float: right !important;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        position: relative;
+
+        .center-text {
+            position: absolute;
+            transform: translateX(-50%);
+            left: 50%;
         }
     }
 
@@ -510,21 +701,28 @@ onMounted(() => {
     // TODO: taken from .dataset above - swap these out
     .collection-element {
         height: 32px;
-        margin: 2px 4px 0px 4px;
         opacity: 1;
-        border: 1px solid lightgrey;
-        border-radius: 3px;
         padding: 0 8px 0 8px;
         line-height: 28px;
         cursor: pointer;
         overflow: hidden;
+        border: 1px solid lightgrey;
+        border-radius: 3px;
 
-        &:last-of-type {
-            margin-bottom: 2px;
+        &.with-actions {
+            margin: 2px 4px 0px 4px;
+            &:hover {
+                border-color: black;
+            }
+        }
+        &:not(.with-actions) {
+            &:hover {
+                border: none;
+            }
         }
 
-        &:hover {
-            border-color: black;
+        &:last-of-type {
+            margin-bottom: 2px;
         }
 
         &.selected {
@@ -535,20 +733,6 @@ onMounted(() => {
                 color: white;
             }
         }
-
-        .name {
-            &:hover {
-                text-decoration: underline;
-            }
-        }
-
-        button {
-            margin-top: 3px;
-        }
-
-        .discard {
-            @extend .float-right !optional;
-        }
     }
 
     .empty-message {
diff --git a/client/src/components/Collections/ListCollectionCreatorModal.js b/client/src/components/Collections/ListCollectionCreatorModal.js
index 9993f240aa0a..b5cc80b06630 100644
--- a/client/src/components/Collections/ListCollectionCreatorModal.js
+++ b/client/src/components/Collections/ListCollectionCreatorModal.js
@@ -1,11 +1,17 @@
 import _l from "utils/localization";
 import Vue from "vue";
 
+import { orList } from "@/utils/strings";
+
 import { collectionCreatorModalSetup } from "./common/modal";
 
 function listCollectionCreatorModal(elements, options) {
     options = options || {};
-    options.title = _l("Create a collection from a list of datasets");
+    options.title = _l(
+        `Create a collection from a list of ${options.fromSelection ? "selected" : ""} ${
+            options.extensions?.length ? orList(options.extensions) : ""
+        } datasets`
+    );
     const { promise, showEl } = collectionCreatorModalSetup(options);
     return import(/* webpackChunkName: "ListCollectionCreator" */ "./ListCollectionCreator.vue").then((module) => {
         const listCollectionCreatorInstance = Vue.extend(module.default);
@@ -18,6 +24,8 @@ function listCollectionCreatorModal(elements, options) {
                 oncancel: options.oncancel,
                 oncreate: options.oncreate,
                 defaultHideSourceItems: options.defaultHideSourceItems,
+                fromSelection: options.fromSelection,
+                extensions: options.extensions,
             },
         }).$mount(vm);
         return promise;
@@ -27,10 +35,12 @@ function listCollectionCreatorModal(elements, options) {
 /** Use a modal to create a list collection, then add it to the given history contents.
  *  @returns {Promise} resolved when the collection is added to the history.
  */
-function createListCollection(contents, defaultHideSourceItems = true) {
+function createListCollection(contents) {
     const elements = contents.toJSON();
     const promise = listCollectionCreatorModal(elements, {
-        defaultHideSourceItems: defaultHideSourceItems,
+        defaultHideSourceItems: contents.defaultHideSourceItems,
+        fromSelection: contents.fromSelection,
+        extensions: contents.extensions,
         creationFn: function (elements, name, hideSourceItems) {
             elements = elements.map((element) => ({
                 id: element.id,
diff --git a/client/src/components/Collections/ListDatasetCollectionElementView.vue b/client/src/components/Collections/ListDatasetCollectionElementView.vue
index e7b41e4158de..c6160c7ba879 100644
--- a/client/src/components/Collections/ListDatasetCollectionElementView.vue
+++ b/client/src/components/Collections/ListDatasetCollectionElementView.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { faCheck, faMinus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { ref, watch } from "vue";
 
 import localize from "@/utils/localization";
 
@@ -7,6 +9,8 @@ import ClickToEdit from "@/components/Collections/common/ClickToEdit.vue";
 
 interface Props {
     element: any;
+    selected?: boolean;
+    hasActions?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -17,7 +21,7 @@ const emit = defineEmits<{
     (event: "element-is-discarded", element: any): void;
 }>();
 
-const elementName = ref("");
+const elementName = ref(props.element.name);
 
 watch(elementName, () => {
     emit("onRename", elementName.value);
@@ -26,28 +30,37 @@ watch(elementName, () => {
 function clickDiscard() {
     emit("element-is-discarded", props.element);
 }
-
-onMounted(() => {
-    elementName.value = props.element.name;
-});
 </script>
 
 <template>
-    <div class="collection-element" @click="emit('element-is-selected', element)">
-        <ClickToEdit v-model="elementName" :title="localize('Click to rename')" />
+    <div
+        class="collection-element d-flex justify-content-between"
+        :class="{ 'with-actions': hasActions }"
+        role="button"
+        tabindex="0"
+        @keyup.enter="emit('element-is-selected', element)"
+        @click="emit('element-is-selected', element)">
+        <span class="d-flex flex-gapx-1">
+            {{ element.hid }}:
+            <strong>
+                <ClickToEdit v-model="elementName" style="cursor: text" :title="localize('Click to rename')" />
+            </strong>
+            <i> ({{ element.extension }}) </i>
+        </span>
 
-        <button class="discard-btn btn-sm" :title="localize('Remove this dataset from the list')" @click="clickDiscard">
-            {{ localize("Discard") }}
-        </button>
+        <div v-if="hasActions" class="float-right">
+            <i v-if="!selected" class="mr-2"><FontAwesomeIcon :icon="faCheck" class="text-success" /> Added to list</i>
+            <i v-else class="text-secondary">Selected</i>
+            <button class="btn-sm" :title="localize('Remove this dataset from the list')" @click="clickDiscard">
+                <FontAwesomeIcon :icon="faMinus" fixed-width />
+                {{ localize("Remove") }}
+            </button>
+        </div>
     </div>
 </template>
 
 <style scoped lang="scss">
 .collection-element {
     height: auto;
-
-    .discard-btn {
-        float: right;
-    }
 }
 </style>
diff --git a/client/src/components/Collections/PairCollectionCreator.vue b/client/src/components/Collections/PairCollectionCreator.vue
index 2520a3a022f8..e0641fe50f34 100644
--- a/client/src/components/Collections/PairCollectionCreator.vue
+++ b/client/src/components/Collections/PairCollectionCreator.vue
@@ -298,6 +298,7 @@ onMounted(() => {
                     :oncancel="oncancel"
                     :hide-source-items="hideSourceItems"
                     :suggested-name="initialSuggestedName"
+                    :extensions-toggle="removeExtensions"
                     @onUpdateHideSourceItems="onUpdateHideSourceItems"
                     @clicked-create="clickedCreate"
                     @remove-extensions-toggle="removeExtensionsToggle">
diff --git a/client/src/components/Collections/PairedListCollectionCreator.vue b/client/src/components/Collections/PairedListCollectionCreator.vue
index c699c0de7077..d18767c32572 100644
--- a/client/src/components/Collections/PairedListCollectionCreator.vue
+++ b/client/src/components/Collections/PairedListCollectionCreator.vue
@@ -102,6 +102,7 @@
                     :oncancel="oncancel"
                     :hide-source-items="hideSourceItems"
                     :render-extensions-toggle="true"
+                    :extensions-toggle="removeExtensions"
                     @onUpdateHideSourceItems="onUpdateHideSourceItems"
                     @clicked-create="clickedCreate"
                     @remove-extensions-toggle="removeExtensionsToggle">
diff --git a/client/src/components/Collections/common/ClickToEdit.vue b/client/src/components/Collections/common/ClickToEdit.vue
index da60f01880d9..84c413d7f1f1 100644
--- a/client/src/components/Collections/common/ClickToEdit.vue
+++ b/client/src/components/Collections/common/ClickToEdit.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { faSave } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton } from "bootstrap-vue";
 import { ref, watch } from "vue";
 
 interface Props {
@@ -16,37 +19,46 @@ const editable = ref(false);
 const localValue = ref(props.value);
 
 watch(
-    () => localValue.value,
-    (newLocalValue) => {
-        emit("input", newLocalValue);
-    }
-);
-
-watch(
-    () => props.value,
-    (newValue) => {
-        localValue.value = newValue;
+    () => editable.value,
+    (value) => {
+        if (!value) {
+            emit("input", localValue.value);
+            localValue.value = props.value;
+        }
     }
 );
 </script>
 
 <template>
-    <input
-        v-if="editable"
-        v-model="localValue"
-        class="click-to-edit-input"
-        contenteditable
-        @blur="editable = false"
-        @keyup.enter="editable = false" />
-
-    <label v-else @click="editable = true">
+    <div v-if="editable">
+        <input
+            id="click-to-edit-input"
+            v-model="localValue"
+            class="click-to-edit-input"
+            tabindex="0"
+            contenteditable
+            @blur="editable = false"
+            @keyup.prevent.stop.enter="editable = false"
+            @keyup.prevent.stop.escape="editable = false"
+            @click.prevent.stop />
+        <BButton class="p-0" style="border: none" variant="link" size="sm" @click.prevent.stop="editable = false">
+            <FontAwesomeIcon :icon="faSave" />
+        </BButton>
+    </div>
+
+    <label
+        v-else
+        role="button"
+        for="click-to-edit-input"
+        tabindex="0"
+        @keyup.enter="editable = true"
+        @click.stop="editable = true">
         {{ localValue }}
     </label>
 </template>
 
 <style scoped lang="scss">
 .click-to-edit-input {
-    width: 600px;
     line-height: 1 !important;
 }
 </style>
diff --git a/client/src/components/Collections/common/CollectionCreator.vue b/client/src/components/Collections/common/CollectionCreator.vue
index 8ef14660d999..e257df302654 100644
--- a/client/src/components/Collections/common/CollectionCreator.vue
+++ b/client/src/components/Collections/common/CollectionCreator.vue
@@ -1,28 +1,38 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton, BFormCheckbox, BFormGroup, BFormInput, BFormRadioGroup } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
 import localize from "@/utils/localization";
+import { orList } from "@/utils/strings";
 
-library.add(faChevronDown, faChevronUp);
+import HelpText from "@/components/Help/HelpText.vue";
 
 interface Props {
     oncancel: () => void;
     hideSourceItems: boolean;
     suggestedName?: string;
     renderExtensionsToggle?: boolean;
+    extensions?: string[];
+    extensionsToggle?: boolean;
+    datatypeToggle?: "all" | "datatype" | "ext";
+    datatypeToggleOptions?: { text: string; value: string }[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
     suggestedName: "",
+    extensions: undefined,
+    extensionsToggle: false,
+    datatypeToggle: undefined,
+    datatypeToggleOptions: undefined,
 });
 
 const emit = defineEmits<{
     (e: "remove-extensions-toggle"): void;
     (e: "clicked-create", value: string): void;
     (e: "onUpdateHideSourceItems", value: boolean): void;
+    (e: "on-update-datatype-toggle", value: "all" | "datatype" | "ext"): void;
 }>();
 
 const isExpanded = ref(false);
@@ -48,6 +58,15 @@ watch(
         emit("onUpdateHideSourceItems", localHideSourceItems.value);
     }
 );
+
+const localDatatypeToggle = computed({
+    get: () => {
+        return props.datatypeToggle;
+    },
+    set: (newVal) => {
+        emit("on-update-datatype-toggle", newVal);
+    },
+});
 </script>
 
 <template>
@@ -87,51 +106,80 @@ watch(
             <slot name="middle-content"></slot>
         </div>
 
-        <div class="footer flex-row no-flex">
-            <div class="attributes clear">
-                <div class="clear">
-                    <label v-if="renderExtensionsToggle" class="setting-prompt float-right">
-                        {{ localize("Remove file extensions?") }}
-                        <input
-                            class="remove-extensions float-right"
-                            type="checkbox"
-                            checked
-                            @click="emit('remove-extensions-toggle')" />
-                    </label>
+        <div class="footer flex-row">
+            <div class="vertically-spaced">
+                <div class="d-flex align-items-center justify-content-between">
+                    <BFormGroup
+                        v-if="datatypeToggle"
+                        class="flex-gapx-1 d-flex align-items-center"
+                        label-for="datatype-toggle">
+                        <template v-slot:label>
+                            <HelpText
+                                uri="galaxy.collections.collectionBuilder.filterForDatatypes"
+                                :text="localize('Filter for Datatypes?')" />
+                        </template>
+                        <BFormRadioGroup
+                            id="datatype-toggle"
+                            v-model="localDatatypeToggle"
+                            :options="datatypeToggleOptions"
+                            size="sm"
+                            buttons />
+                    </BFormGroup>
 
-                    <label class="setting-prompt float-right">
-                        {{ localize("Hide original elements?") }}
-                        <input v-model="localHideSourceItems" class="hide-originals float-right" type="checkbox" />
-                    </label>
+                    <BAlert
+                        v-if="extensions && localDatatypeToggle === 'ext'"
+                        class="w-50 py-0"
+                        variant="secondary"
+                        show>
+                        Filtered extensions: <strong>{{ orList(extensions) }}</strong>
+                    </BAlert>
                 </div>
 
-                <div class="clear">
-                    <input
-                        v-model="collectionName"
-                        class="collection-name form-control float-right"
-                        :placeholder="localize('Enter a name for your new collection')" />
+                <div class="d-flex align-items-center justify-content-between">
+                    <BFormGroup class="inputs-form-group">
+                        <BFormCheckbox
+                            v-if="renderExtensionsToggle"
+                            name="remove-extensions"
+                            switch
+                            :checked="extensionsToggle"
+                            @input="emit('remove-extensions-toggle')">
+                            {{ localize("Remove file extensions?") }}
+                        </BFormCheckbox>
 
-                    <div class="collection-name-prompt float-right">
-                        {{ localize("Name:") }}
-                    </div>
+                        <BFormCheckbox v-model="localHideSourceItems" name="hide-originals" switch>
+                            <HelpText
+                                uri="galaxy.collections.collectionBuilder.hideOriginalElements"
+                                :text="localize('Hide original elements')" />
+                        </BFormCheckbox>
+                    </BFormGroup>
+
+                    <BFormGroup
+                        class="flex-gapx-1 d-flex align-items-center w-50 inputs-form-group"
+                        :label="localize('Name:')"
+                        label-for="collection-name">
+                        <BFormInput
+                            id="collection-name"
+                            v-model="collectionName"
+                            :placeholder="localize('Enter a name for your new collection')"
+                            size="sm"
+                            required
+                            :state="!collectionName ? false : null" />
+                    </BFormGroup>
                 </div>
             </div>
 
-            <div class="actions clear vertically-spaced">
-                <div class="float-left">
-                    <button class="cancel-create btn" tabindex="-1" @click="cancelCreate">
-                        {{ localize("Cancel") }}
-                    </button>
-                </div>
+            <div class="actions vertically-spaced d-flex justify-content-between">
+                <BButton tabindex="-1" @click="cancelCreate">
+                    {{ localize("Cancel") }}
+                </BButton>
 
-                <div class="main-options float-right">
-                    <button
-                        class="create-collection btn btn-primary"
-                        :disabled="!validInput"
-                        @click="emit('clicked-create', collectionName)">
-                        {{ localize("Create collection") }}
-                    </button>
-                </div>
+                <BButton
+                    class="create-collection"
+                    variant="primary"
+                    :disabled="!validInput"
+                    @click="emit('clicked-create', collectionName)">
+                    {{ localize("Create collection") }}
+                </BButton>
             </div>
         </div>
     </div>
@@ -367,38 +415,11 @@ $fa-font-path: "../../../../node_modules/@fortawesome/fontawesome-free/webfonts/
     }
     // ------------------------------------------------------------------------ footer
     .footer {
-        .attributes {
-            .setting-prompt {
-                //margin-right: 32px;
-                line-height: 32px;
-                padding-left: 10px;
-                .remove-extensions {
-                    display: inline-block;
-                    width: 24px;
-                    height: 24px;
-                }
-                .hide-originals {
-                    display: inline-block;
-                    width: 24px;
-                    height: 24px;
-                }
-            }
-            // actually appears/floats to the left of the input
-            .collection-name-prompt {
-                margin: 5px 4px 0 0;
-            }
-            .collection-name-prompt.validation-warning:before {
-                //TODO: localize (somehow)
-                content: "(required)";
-                margin-right: 4px;
-                color: red;
-            }
-            .collection-name {
-                width: 50%;
-                &.validation-warning {
-                    border-color: red;
-                }
-            }
+        .inputs-form-group > div {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            column-gap: 0.25rem;
         }
         .actions {
             .other-options > * {
diff --git a/client/src/components/Common/ButtonSpinner.vue b/client/src/components/Common/ButtonSpinner.vue
index e2b8def400c1..7e7509a8b850 100644
--- a/client/src/components/Common/ButtonSpinner.vue
+++ b/client/src/components/Common/ButtonSpinner.vue
@@ -11,12 +11,16 @@ interface Props {
     wait?: boolean;
     tooltip?: string;
     disabled?: boolean;
+    variant?: string;
+    hasPlayIcon?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
     wait: false,
-    tooltip: undefined,
+    tooltip: "",
     disabled: false,
+    variant: "primary",
+    hasPlayIcon: true,
 });
 </script>
 
@@ -29,17 +33,17 @@ withDefaults(defineProps<Props>(), {
         title="Please Wait..."
         class="d-flex flex-nowrap align-items-center text-nowrap">
         <FontAwesomeIcon :icon="faSpinner" class="mr-2" spin />
-        {{ title }}
+        <slot>{{ title }}</slot>
     </BButton>
     <BButton
         v-else
         v-b-tooltip.hover.bottom
-        variant="primary"
+        :variant="variant"
         class="d-flex flex-nowrap align-items-center text-nowrap"
         :title="tooltip"
         :disabled="disabled"
         @click="$emit('onClick')">
-        <FontAwesomeIcon :icon="faPlay" class="mr-2" />
-        {{ title }}
+        <FontAwesomeIcon v-if="hasPlayIcon" :icon="faPlay" class="mr-2" />
+        <slot>{{ title }}</slot>
     </BButton>
 </template>
diff --git a/client/src/components/Datatypes/model.ts b/client/src/components/Datatypes/model.ts
index 77826b73fc13..591f8f2814b0 100644
--- a/client/src/components/Datatypes/model.ts
+++ b/client/src/components/Datatypes/model.ts
@@ -39,4 +39,14 @@ export class DatatypesMapperModel {
     isSubTypeOfAny(child: string, parents: DatatypesCombinedMap["datatypes"]): boolean {
         return parents.some((parent) => this.isSubType(child, parent));
     }
+
+    /** For classes like `galaxy.datatypes.{parent}.{extension}`, get the extension's parent */
+    getParentDatatype(extension: string) {
+        const fullClassName = this.datatypesMapping.ext_to_class_name[extension];
+        return fullClassName?.split(".")[2];
+    }
+
+    isSubClassOfAny(child: string, parents: DatatypesCombinedMap["datatypes"]): boolean {
+        return parents.every((parent) => this.getParentDatatype(parent) === this.getParentDatatype(child));
+    }
 }
diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 9cdb34812259..5002faa192b7 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCopy, faFile, faFolder } from "@fortawesome/free-regular-svg-icons";
-import { faCaretDown, faCaretUp, faExclamation, faLink, faUnlink } from "@fortawesome/free-solid-svg-icons";
+import { faCaretDown, faCaretUp, faExclamation, faLink, faPlus, faUnlink } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BButtonGroup, BCollapse, BFormCheckbox, BTooltip } from "bootstrap-vue";
 import { computed, onMounted, type Ref, ref, watch } from "vue";
@@ -9,10 +9,11 @@ import { computed, onMounted, type Ref, ref, watch } from "vue";
 import { isDatasetElement, isDCE } from "@/api";
 import { getGalaxyInstance } from "@/app";
 import { buildCollectionModal } from "@/components/History/adapters/buildCollectionModal";
+import { createDatasetCollection } from "@/components/History/model/queries";
 import { useDatatypesMapper } from "@/composables/datatypesMapper";
+import { useHistoryItemsForType } from "@/composables/useHistoryItemsForType";
 import { useUid } from "@/composables/utils/uid";
 import { type EventData, useEventStore } from "@/stores/eventStore";
-import { useHistoryItemsStore } from "@/stores/historyItemsStore";
 import { useHistoryStore } from "@/stores/historyStore";
 import { orList } from "@/utils/strings";
 
@@ -20,6 +21,7 @@ import type { DataOption } from "./types";
 import { BATCH, SOURCE, VARIANTS } from "./variants";
 
 import FormSelection from "../FormSelection.vue";
+import ButtonSpinner from "@/components/Common/ButtonSpinner.vue";
 import FormSelect from "@/components/Form/Elements/FormSelect.vue";
 import HelpText from "@/components/Help/HelpText.vue";
 
@@ -475,18 +477,51 @@ function canAcceptSrc(historyContentType: "dataset" | "dataset_collection", coll
 }
 
 const historyStore = useHistoryStore();
-const historyItemsStore = useHistoryItemsStore();
-// Build a new collection
+
+const idToFetchFor = computed(() => historyStore.currentHistoryId);
+const { historyItems, isFetchingItems, errorMessage: historyItemsError } = useHistoryItemsForType(idToFetchFor);
+
+/** Excludes the `paired` collection type for now */
+const effectiveCollectionTypes = props.collectionTypes?.filter((collectionType) => collectionType !== "paired");
+
+/** Build a new collection and set it as the current value if valid */
 async function buildNewCollection(collectionType: string) {
-    if (!historyStore.currentHistoryId) {
+    if (
+        !historyStore.currentHistoryId ||
+        !historyStore.currentHistory ||
+        isFetchingItems.value ||
+        historyItemsError.value
+    ) {
         return;
     }
-    const modalResult = await buildCollectionModal(
-        collectionType,
-        historyItemsStore.getHistoryItems(historyStore.currentHistoryId, ""),
-        historyStore.currentHistoryId
-    );
-    // TODO: Implement handling `modalResult` as input for the field
+
+    if (collectionType === "list" || collectionType === "list:paired") {
+        const modalResult = await buildCollectionModal(
+            collectionType,
+            historyItems.value,
+            historyStore.currentHistoryId,
+            {
+                extensions: props.extensions?.filter((ext) => ext !== "data"),
+                defaultHideSourceItems: false,
+            }
+        );
+        const collection = await createDatasetCollection(historyStore.currentHistory, modalResult);
+        if (collection) {
+            // remove the `elements` and `elements_datatypes` keys from the collection
+            // to prevent `handleIncoming` from flagging the collection as invalid
+            if ("elements" in collection) {
+                delete collection.elements;
+            }
+            if ("elements_datatypes" in collection) {
+                delete collection.elements_datatypes;
+            }
+            handleIncoming(collection as any);
+        }
+    }
+    // else if (collectionType === "list:paired") { // TODO: Implement paired collection
+    else {
+        throw Error(`Unknown collection type: ${collectionType}`);
+    }
 }
 
 // Drag/Drop event handlers
@@ -649,23 +684,29 @@ const noOptionsWarningMessage = computed(() => {
             :options="formattedOptions"
             :placeholder="`Select a ${placeholder}`">
             <template v-slot:no-options>
-                <BAlert variant="warning" show>
-                    <div>{{ noOptionsWarningMessage }}</div>
-                    <div v-if="props.collectionTypes?.length > 0">
-                        Click here to create/add:
-                        <BButtonGroup size="sm" buttons>
-                            <BButton
-                                v-for="collectionType in props.collectionTypes"
-                                :key="collectionType"
-                                variant="primary"
-                                @click="buildNewCollection(collectionType)">
-                                {{ collectionType }}
-                            </BButton>
-                        </BButtonGroup>
-                        {{ props.type === "data" ? "datasets" : "dataset collections" }}
-                    </div>
+                <BAlert class="w-100 align-items-center" variant="warning" show>
+                    {{ noOptionsWarningMessage }}
                 </BAlert>
             </template>
+            <!-- TODO: Improve styling, weirdly positioned to right of select -->
+            <template v-slot:right-actions>
+                <div>
+                    <BButtonGroup v-if="effectiveCollectionTypes?.length > 0" size="sm" buttons>
+                        <ButtonSpinner
+                            v-for="collectionType in effectiveCollectionTypes"
+                            :key="collectionType"
+                            :title="collectionType"
+                            variant="secondary"
+                            :disabled="isFetchingItems"
+                            :has-play-icon="false"
+                            :wait="isFetchingItems"
+                            @onClick="buildNewCollection(collectionType)">
+                            <FontAwesomeIcon v-if="!isFetchingItems" :icon="faPlus" fixed-width />
+                            {{ collectionType }}
+                        </ButtonSpinner>
+                    </BButtonGroup>
+                </div>
+            </template>
         </FormSelect>
         <FormSelection
             v-else-if="currentVariant?.multiple"
diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index 98ed4f551e81..8eb96645f1dd 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -152,7 +152,7 @@ onMounted(() => {
 </script>
 
 <template>
-    <div>
+    <div class="d-flex justify-content-between align-items-center">
         <Multiselect
             v-if="hasOptions"
             :id="id"
@@ -182,5 +182,6 @@ onMounted(() => {
         <slot v-else name="no-options">
             <b-alert v-localize class="w-100" variant="warning" show> No options available. </b-alert>
         </slot>
+        <slot name="right-actions" />
     </div>
 </template>
diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index 0c762ae90bd4..7adcea8a5f86 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -341,7 +341,9 @@ const selectedCount = computed(() => {
                     :class="{ highlighted: highlightUnselected.highlightedIndexes.includes(i) }"
                     @click="(e) => selectOption(e, i)"
                     @keydown="(e) => optionOnKey('unselected', e, i)">
-                    {{ option.label }}
+                    <slot name="label-area" v-bind="option">
+                        {{ option.label }}
+                    </slot>
                 </button>
 
                 <span v-if="moreUnselected" class="show-more-indicator">
@@ -373,7 +375,9 @@ const selectedCount = computed(() => {
                     :class="{ highlighted: highlightSelected.highlightedIndexes.includes(i) }"
                     @click="(e) => deselectOption(e, i)"
                     @keydown="(e) => optionOnKey('selected', e, i)">
-                    {{ option.label }}
+                    <slot name="label-area" v-bind="option">
+                        {{ option.label }}
+                    </slot>
                 </button>
 
                 <span v-if="moreSelected" class="show-more-indicator">
diff --git a/client/src/components/Help/terms.yml b/client/src/components/Help/terms.yml
index 8d1e9ca05d92..af463322dc6a 100644
--- a/client/src/components/Help/terms.yml
+++ b/client/src/components/Help/terms.yml
@@ -54,6 +54,17 @@ galaxy:
       These lists will be gathered together in a nested list structured (collection type ``list:list``) where
       the outer element count and structure matches that of the input and the inner list for each of those
       is just the outputs of the tool for the corresponding element of the input.
+    collectionBuilder:
+      hideOriginalElements: |
+        Toggling this on means that the original history items that will become a part of the collection
+        will be hidden from the history panel (they will still be searchable via the 'visible: false' filter).
+      filterForDatatypes: |
+        This option allows you to filter items shown here by datatype because this input requires specific
+        extension(s). By default, the toggle is at "Extension" and the list is filtered for the explicit extension(s)
+        required by the input; *if datasets with that extension(s) are available*. If you toggle to "Datatype",
+        the list will be filtered for the "parent" datatype of the required extension (for implicit conversion).
+        If you toggle to "All", the list will show all items regardless of datatype.
+
   jobs:
     states:
       # upload, waiting, failed, paused, deleting, deleted, stop, stopped, skipped.
diff --git a/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue b/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
index fca63e70dd68..71ccfa80e4c3 100644
--- a/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
+++ b/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
@@ -392,7 +392,9 @@ export default {
             if (contents === undefined) {
                 contents = this.contentSelection;
             }
-            const modalResult = await buildCollectionModal(collectionType, contents, this.history.id);
+            const modalResult = await buildCollectionModal(collectionType, contents, this.history.id, {
+                fromSelection: true,
+            });
             await createDatasetCollection(this.history, modalResult);
 
             // have to hide the source items if that was requested
diff --git a/client/src/components/History/adapters/HistoryPanelProxy.js b/client/src/components/History/adapters/HistoryPanelProxy.js
index 28b95b38627f..e79466d45052 100644
--- a/client/src/components/History/adapters/HistoryPanelProxy.js
+++ b/client/src/components/History/adapters/HistoryPanelProxy.js
@@ -56,7 +56,7 @@ export class HistoryPanelProxy {
                 selectionContent.set(obj.id, obj);
             });
         }
-        const modalResult = await buildCollectionModal(collectionType, selectionContent, historyId, fromRulesInput);
+        const modalResult = await buildCollectionModal(collectionType, selectionContent, historyId, { fromRulesInput });
         if (modalResult) {
             console.debug("Submitting collection build request.", modalResult);
             await createDatasetCollection({ id: historyId }, modalResult);
diff --git a/client/src/components/History/adapters/buildCollectionModal.js b/client/src/components/History/adapters/buildCollectionModal.ts
similarity index 55%
rename from client/src/components/History/adapters/buildCollectionModal.js
rename to client/src/components/History/adapters/buildCollectionModal.ts
index f5b5c030ea27..06be87275012 100644
--- a/client/src/components/History/adapters/buildCollectionModal.js
+++ b/client/src/components/History/adapters/buildCollectionModal.ts
@@ -8,15 +8,33 @@
  * deprecated jquery Deferred object.
  */
 
-import LIST_COLLECTION_CREATOR from "components/Collections/ListCollectionCreatorModal";
-import PAIR_COLLECTION_CREATOR from "components/Collections/PairCollectionCreatorModal";
-import LIST_OF_PAIRS_COLLECTION_CREATOR from "components/Collections/PairedListCollectionCreatorModal";
-import RULE_BASED_COLLECTION_CREATOR from "components/Collections/RuleBasedCollectionCreatorModal";
 import jQuery from "jquery";
 
+import type { HistoryItemSummary } from "@/api";
+import LIST_COLLECTION_CREATOR from "@/components/Collections/ListCollectionCreatorModal";
+import PAIR_COLLECTION_CREATOR from "@/components/Collections/PairCollectionCreatorModal";
+import LIST_OF_PAIRS_COLLECTION_CREATOR from "@/components/Collections/PairedListCollectionCreatorModal";
+import RULE_BASED_COLLECTION_CREATOR from "@/components/Collections/RuleBasedCollectionCreatorModal";
+
+export type CollectionType = "list" | "paired" | "list:paired" | "rules";
+export interface BuildCollectionOptions {
+    fromRulesInput?: boolean;
+    fromSelection?: boolean;
+    extensions?: string[];
+    title?: string;
+    defaultHideSourceItems?: boolean;
+    historyId?: string;
+}
+
 // stand-in for buildCollection from history-view-edit.js
-export async function buildCollectionModal(collectionType, selectedContent, historyId, fromRulesInput = false) {
+export async function buildCollectionModal(
+    collectionType: CollectionType,
+    selectedContent: HistoryItemSummary[],
+    historyId: string,
+    options: BuildCollectionOptions = {}
+) {
     // select legacy function
+    const { fromRulesInput = false } = options;
     let createFunc;
     if (collectionType == "list") {
         createFunc = LIST_COLLECTION_CREATOR.createListCollection;
@@ -33,19 +51,25 @@ export async function buildCollectionModal(collectionType, selectedContent, hist
     if (fromRulesInput) {
         return await createFunc(selectedContent);
     } else {
-        const fakeBackboneContent = createBackboneContent(historyId, selectedContent);
+        const fakeBackboneContent = createBackboneContent(historyId, selectedContent, options);
         return await createFunc(fakeBackboneContent);
     }
 }
 
-const createBackboneContent = (historyId, selection) => {
+const createBackboneContent = (historyId: string, selection: HistoryItemSummary[], options: BuildCollectionOptions) => {
     const selectionJson = Array.from(selection.values());
     return {
         historyId,
         toJSON: () => selectionJson,
         // result must be a $.Deferred object instead of a promise because
         // that's the kind of deprecated data format that backbone likes to use.
-        createHDCA(element_identifiers, collection_type, name, hide_source_items, options = {}) {
+        createHDCA(
+            element_identifiers: any,
+            collection_type: CollectionType,
+            name: string,
+            hide_source_items: boolean,
+            options = {}
+        ) {
             const def = jQuery.Deferred();
             return def.resolve(null, {
                 collection_type,
@@ -55,5 +79,8 @@ const createBackboneContent = (historyId, selection) => {
                 options,
             });
         },
+        fromSelection: options.fromSelection,
+        extensions: options.extensions,
+        defaultHideSourceItems: options.defaultHideSourceItems === undefined ? true : options.defaultHideSourceItems,
     };
 };
diff --git a/client/src/composables/useHistoryItemsForType.ts b/client/src/composables/useHistoryItemsForType.ts
new file mode 100644
index 000000000000..765e411637da
--- /dev/null
+++ b/client/src/composables/useHistoryItemsForType.ts
@@ -0,0 +1,90 @@
+import { computed, type Ref, ref, watch } from "vue";
+
+import { GalaxyApi, type HistoryItemSummary } from "@/api";
+import { filtersToQueryValues } from "@/components/History/model/queries";
+import { useHistoryStore } from "@/stores/historyStore";
+import { errorMessageAsString } from "@/utils/simple-error";
+
+const DEFAULT_FILTERS = { visible: true, deleted: false };
+
+let singletonInstance: {
+    isFetchingItems: Ref<boolean>;
+    errorMessage: Ref<string | null>;
+    historyItems: Ref<HistoryItemSummary[]>;
+} | null = null;
+
+/**
+ * Creates a composable that fetches the given type of items from a history reactively.
+ * @param historyId The history ID to fetch items for. (TODO: make this a required parameter; only `string` allowed)
+ * @param type The type of items to fetch. Default is "dataset".
+ * @param filters Filters to apply to the items.
+ * @returns An object containing reactive properties for the fetch status and the fetched items.
+ */
+export function useHistoryItemsForType(
+    historyId: Ref<string | null>,
+    type: "dataset" | "dataset_collection" = "dataset",
+    filters = DEFAULT_FILTERS
+) {
+    if (singletonInstance) {
+        return singletonInstance;
+    }
+    const isFetchingItems = ref(false);
+    const errorMessage = ref<string | null>(null);
+    const historyItems = ref<HistoryItemSummary[]>([]);
+    const counter = ref(0);
+
+    const historyStore = useHistoryStore();
+
+    const historyUpdateTime = computed(
+        () => historyId.value && historyStore.getHistoryById(historyId.value)?.update_time
+    );
+
+    // Fetch items when history ID or update time changes
+    watch(
+        () => ({
+            time: historyUpdateTime.value,
+            id: historyId.value,
+        }),
+        async (newValues, oldValues) => {
+            if (newValues.time !== oldValues?.time || newValues.id !== oldValues?.id) {
+                await fetchItems();
+                counter.value++;
+            }
+        },
+        { immediate: true }
+    );
+
+    async function fetchItems() {
+        if (!historyId.value) {
+            errorMessage.value = "No history ID provided";
+            return;
+        }
+        if (isFetchingItems.value) {
+            return;
+        }
+        const filterQuery = filtersToQueryValues(filters);
+        isFetchingItems.value = true;
+        const { data, error } = await GalaxyApi().GET("/api/histories/{history_id}/contents/{type}s", {
+            params: {
+                path: { history_id: historyId.value, type: type },
+                query: { ...filterQuery, v: "dev" },
+            },
+        });
+        isFetchingItems.value = false;
+        if (error) {
+            errorMessage.value = errorMessageAsString(error);
+            console.error("Error fetching history items", errorMessage.value);
+        } else {
+            historyItems.value = data as HistoryItemSummary[];
+            errorMessage.value = null;
+        }
+    }
+
+    singletonInstance = {
+        isFetchingItems,
+        errorMessage,
+        historyItems,
+    };
+
+    return singletonInstance;
+}