From 35ff19da970a9e2fb7a33116e121c708ae01a3f4 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 1 Oct 2024 11:49:13 -0500
Subject: [PATCH] modernize/refactor `PairedListCollectionCreator` for input
 forms

- Converted the file(s) to composition API and typescript
- Improved styling of the modal and its components

Still need to add `extensions` handling for cases where a certain extension is required for the collection.
---
 .../Collections/PairedElementView.vue         |   49 +-
 .../PairedListCollectionCreator.vue           | 1786 +++++++++--------
 .../PairedListCollectionCreatorModal.js       |   16 +-
 .../UnpairedDatasetElementView.vue            |   63 +-
 client/src/utils/natural-sort.js              |   38 -
 client/src/utils/naturalSort.ts               |   45 +
 6 files changed, 1127 insertions(+), 870 deletions(-)
 delete mode 100644 client/src/utils/natural-sort.js
 create mode 100644 client/src/utils/naturalSort.ts

diff --git a/client/src/components/Collections/PairedElementView.vue b/client/src/components/Collections/PairedElementView.vue
index 364832a22db..42cd1d9e8af 100644
--- a/client/src/components/Collections/PairedElementView.vue
+++ b/client/src/components/Collections/PairedElementView.vue
@@ -1,69 +1,58 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faUnlink } from "@fortawesome/free-solid-svg-icons";
+import { faArrowLeft, faArrowRight, faUnlink } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { onMounted, ref, watch } from "vue";
+import { BButton } from "bootstrap-vue";
+import { ref, watch } from "vue";
 
+import type { HDASummary } from "@/api";
 import localize from "@/utils/localization";
 
 import ClickToEdit from "@/components/Collections/common/ClickToEdit.vue";
 
-library.add(faUnlink);
-
 interface Props {
-    // TODO: Define the type of the pair prop
     pair: {
         name: string;
-        forward: { name: string };
-        reverse: { name: string };
+        forward: HDASummary;
+        reverse: HDASummary;
     };
-    unlinkFn: () => void;
 }
 
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
     (event: "onPairRename", name: string): void;
+    (event: "onUnpair"): void;
 }>();
 
-const name = ref("");
+const elementName = ref(props.pair.name);
 
-watch(
-    () => props.pair,
-    () => {
-        name.value = props.pair.name;
-    }
-);
-
-watch(name, () => {
-    emit("onPairRename", name.value);
-});
-
-onMounted(() => {
-    name.value = props.pair.name;
+watch(elementName, () => {
+    emit("onPairRename", elementName.value);
 });
 </script>
 
 <template>
-    <div>
-        <li class="dataset paired">
+    <li class="d-flex align-items-center justify-content-between">
+        <div class="dataset paired w-100">
             <span class="forward-dataset-name flex-column">
                 {{ pair.forward.name }}
+                <FontAwesomeIcon :icon="faArrowRight" fixed-width />
             </span>
 
             <span class="pair-name-column flex-column">
                 <span class="pair-name">
-                    <ClickToEdit v-model="name" :title="localize('Click to rename')" />
+                    <ClickToEdit v-model="elementName" :title="localize('Click to rename')" />
                 </span>
             </span>
 
             <span class="reverse-dataset-name flex-column">
+                <FontAwesomeIcon :icon="faArrowLeft" fixed-width />
                 {{ pair.reverse.name }}
             </span>
-        </li>
+        </div>
 
-        <button class="unpair-btn" @click="unlinkFn">
+        <BButton class="unpair-btn" variant="link" @click="emit('onUnpair')">
             <FontAwesomeIcon :icon="faUnlink" :title="localize('Unpair')" />
-        </button>
-    </div>
+        </BButton>
+    </li>
 </template>
diff --git a/client/src/components/Collections/PairedListCollectionCreator.vue b/client/src/components/Collections/PairedListCollectionCreator.vue
index d18767c3257..6e9ada15396 100644
--- a/client/src/components/Collections/PairedListCollectionCreator.vue
+++ b/client/src/components/Collections/PairedListCollectionCreator.vue
@@ -1,115 +1,898 @@
+<script setup lang="ts">
+import { faCheckCircle, faExclamationCircle, faLink, faTimes, faUnlink } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton, BButtonGroup } from "bootstrap-vue";
+import { computed, ref } from "vue";
+import draggable from "vuedraggable";
+
+import type { HDASummary, HistoryItemSummary } from "@/api";
+// import levenshteinDistance from '@/utils/levenshtein';
+import localize from "@/utils/localization";
+import { naturalSort } from "@/utils/naturalSort";
+
+import PairedElementView from "./PairedElementView.vue";
+import UnpairedDatasetElementView from "./UnpairedDatasetElementView.vue";
+import CollectionCreator from "@/components/Collections/common/CollectionCreator.vue";
+
+const COMMON_FILTERS = {
+    illumina: ["_1", "_2"],
+    Rs: ["_R1", "_R2"],
+    dot12s: [".1.fastq", ".2.fastq"],
+};
+const DEFAULT_FILTER: keyof typeof COMMON_FILTERS = "illumina";
+const MATCH_PERCENTAGE = 0.99;
+
+// Titles and help text
+const CHOOSE_FILTER_TITLE = localize("Choose from common filters");
+const FILTER_TEXT_PLACEHOLDER = localize("Filter text");
+const FILTER_TEXT_TITLE = localize("Use this box to filter elements, using simple matching or regular expressions.");
+const ERROR_TEXT = localize("There was a problem creating the collection.");
+const INVALID_HEADER = localize("The following selections could not be included due to problems:");
+const ALL_INVALID_ELEMENTS_PART_ONE = localize("At least two elements are needed for the collection. You may need to");
+const CANCEL_TEXT = localize("Cancel");
+
+type DatasetPair = {
+    forward: HDASummary;
+    reverse: HDASummary;
+    name: string;
+};
+
+interface Props {
+    initialElements: HistoryItemSummary[];
+    oncancel: () => void;
+    oncreate: () => void;
+    creationFn: (elements: DatasetPair[], collectionName: string, hideSourceItems: boolean) => any;
+    defaultHideSourceItems?: boolean;
+    fromSelection?: boolean;
+    extensions?: string[];
+}
+
+const props = defineProps<Props>();
+
+// Titles and help text computed
+const noElementsHeader = props.fromSelection ? localize("No elements selected") : localize("No elements available");
+const allInvalidElementsPartTwo = props.fromSelection
+    ? localize("and reselect new elements.")
+    : localize("and change your current history or add valid datasets for this collection.");
+
+// Flags
+const state = ref<"build" | "error" | "duplicates">("build");
+const hideSourceItems = ref(props.defaultHideSourceItems || false);
+const autoPairsPossible = ref(true);
+const twoPassAutoPairing = ref(true);
+const removeExtensions = ref(true);
+const firstAutoPairDone = ref(false);
+
+// Elements
+const workingElements = ref<HDASummary[]>([]);
+const invalidElements = ref<string[]>([]);
+const generatedPairs = ref<DatasetPair[]>([]);
+const selectedForwardElement = ref<HDASummary | null>(null);
+const selectedReverseElement = ref<HDASummary | null>(null);
+
+// Filters
+const forwardFilter = ref(COMMON_FILTERS[DEFAULT_FILTER][0] || "");
+const reverseFilter = ref(COMMON_FILTERS[DEFAULT_FILTER][1] || "");
+
+// Autopairing
+const strategy = ref(autoPairLCS);
+const duplicatePairNames = ref<string[]>([]);
+
+const forwardElements = computed<HDASummary[]>(() => {
+    return filterElements(workingElements.value, forwardFilter.value);
+});
+const reverseElements = computed<HDASummary[]>(() => {
+    return filterElements(workingElements.value, reverseFilter.value);
+});
+const pairableElements = computed(() => {
+    const pairable: DatasetPair[] = [];
+    forwardElements.value.forEach((forwardElement, index) => {
+        const reverseElement = reverseElements.value[index];
+        if (!!reverseElement && !!forwardElement && forwardElement.id != reverseElement.id) {
+            pairable.push({
+                forward: forwardElement,
+                reverse: reverseElement,
+                name: _guessNameForPair(forwardElement, reverseElement),
+            });
+        }
+    });
+    return pairable;
+});
+const autoPairButton = computed(() => {
+    let variant;
+    let icon;
+    let text;
+    if (!firstAutoPairDone.value && pairableElements.value.length > 0) {
+        variant = "primary";
+        icon = faExclamationCircle;
+        text = localize("Click to auto-pair datasets based on the current filters.");
+    } else if (pairableElements.value.length > 0) {
+        variant = "success";
+        icon = faCheckCircle;
+        text = localize("Auto-pair possible!");
+    } else {
+        variant = "secondary";
+        icon = faLink;
+        text = localize("Auto-pair not possible");
+    }
+    return { variant, icon, text };
+});
+const numOfUnpairedForwardElements = computed(() => {
+    return forwardElements.value.length;
+});
+const numOfFilteredOutForwardElements = computed(() => {
+    return workingElements.value.length - numOfUnpairedForwardElements.value;
+});
+const numOfUnpairedReverseElements = computed(() => {
+    return reverseElements.value.length;
+});
+const numOfFilteredOutReverseElements = computed(() => {
+    return workingElements.value.length - numOfUnpairedReverseElements.value;
+});
+const numOfPairs = computed(() => {
+    return generatedPairs.value.length;
+});
+const returnInvalidElementsLength = computed(() => {
+    return invalidElements.value.length > 0;
+});
+const returnInvalidElements = computed(() => {
+    return invalidElements.value;
+});
+const allElementsAreInvalid = computed(() => {
+    return props.initialElements.length === invalidElements.value.length;
+});
+const noElementsSelected = computed(() => {
+    return props.initialElements.length === 0;
+});
+const tooFewElementsSelected = computed(() => {
+    return workingElements.value.length < 2 && generatedPairs.value.length === 0;
+});
+// TODO: Include in the template
+// const showDuplicateError = computed(() => {
+//     return duplicatePairNames.value.length > 0;
+// });
+
+const noUnpairedElementsDisplayed = computed(() => {
+    return numOfUnpairedForwardElements.value + numOfUnpairedReverseElements.value === 0;
+});
+
+_elementsSetUp();
+
+function removeExtensionsToggle() {
+    removeExtensions.value = !removeExtensions.value;
+    generatedPairs.value.forEach((pair, index) => {
+        pair.name = _guessNameForPair(pair.forward, pair.reverse, removeExtensions.value);
+    });
+}
+
+/** Set up main data */
+function _elementsSetUp() {
+    // a list of invalid elements and the reasons they aren't valid
+    invalidElements.value = [];
+    //TODO: handle fundamental problem of syncing DOM, views, and list here
+    // data for list in progress
+    workingElements.value = [];
+    //TODO: this should maybe be in it's own method as it will get called everytime selected array has two elements and dumps again.
+    // selectedDatasetElems = [];
+    initialFiltersSet();
+    // copy initial list, sort, // TODO: add ids if needed
+    // copy initial list, sort, add ids if needed
+    workingElements.value = JSON.parse(JSON.stringify(props.initialElements.slice(0)));
+    // _ensureElementIds();
+    _validateElements();
+    _sortInitialList();
+    // attempt to autopair
+    if (props.fromSelection) {
+        autoPair();
+    }
+}
+
+function initialFiltersSet() {
+    let illumina = 0;
+    let dot12s = 0;
+    let Rs = 0;
+    //should we limit the forEach? What if there are 1000s of elements?
+    props.initialElements.forEach((element) => {
+        if (element.name?.includes(".1.fastq") || element.name?.includes(".2.fastq")) {
+            dot12s++;
+        } else if (element.name?.includes("_R1") || element.name?.includes("_R2")) {
+            Rs++;
+        } else if (element.name?.includes("_1") || element.name?.includes("_2")) {
+            illumina++;
+        }
+    });
+
+    if (illumina > dot12s && illumina > Rs) {
+        changeFilters("illumina");
+    } else if (dot12s > illumina && dot12s > Rs) {
+        changeFilters("dot12s");
+    } else if (Rs > illumina && Rs > dot12s) {
+        changeFilters("Rs");
+    } else {
+        changeFilters("illumina");
+    }
+}
+
+// TODO: Don't know if this is really necessary
+// function _ensureElementIds() {
+//     workingElements.value.forEach((element) => {
+//         if (!Object.prototype.hasOwnProperty.call(element, "id")) {
+//             console.warn("Element missing id", element);
+//         }
+//     });
+
+//     return workingElements.value;
+// }
+
+function _validateElements() {
+    workingElements.value = workingElements.value.filter((element) => {
+        var problem = _isElementInvalid(element);
+
+        if (problem) {
+            invalidElements.value.push(element.name + "  " + problem);
+        }
+
+        return !problem;
+    });
+    return workingElements.value;
+}
+
+function _isElementInvalid(element: HistoryItemSummary) {
+    if (element.history_content_type === "dataset_collection") {
+        return localize("is a collection, this is not allowed");
+    }
+    var validState = element.state === "ok" || ["error", "paused"].includes(element.state);
+    if (!validState) {
+        return localize("has errored, is paused, or is not accessible");
+    }
+    if (element.deleted || element.purged) {
+        return localize("has been deleted or purged");
+    }
+    return null;
+}
+
+function _sortInitialList() {
+    workingElements.value.sort((a, b) => naturalSort(a.name || "", b.name || ""));
+}
+
+function filterElements(elements: HDASummary[], filterText: string) {
+    return elements.filter((e) => filterElement(e, filterText));
+}
+
+function filterElement(element: HDASummary, filterText: string) {
+    return filterText == "" || new RegExp(filterText).test(element.name || "");
+}
+
+function forwardElementSelected(e: HDASummary) {
+    if (selectedForwardElement.value == null || selectedForwardElement.value.id != e.id) {
+        selectedForwardElement.value = e;
+    } else {
+        selectedForwardElement.value = null;
+    }
+    if (
+        selectedForwardElement.value &&
+        selectedReverseElement.value &&
+        selectedReverseElement.value != selectedForwardElement.value
+    ) {
+        _pair(selectedForwardElement.value, selectedReverseElement.value);
+    }
+}
+
+function reverseElementSelected(e: HDASummary) {
+    if (selectedReverseElement.value == null || selectedReverseElement.value.id != e.id) {
+        selectedReverseElement.value = e;
+    } else {
+        selectedReverseElement.value = null;
+    }
+    if (
+        selectedForwardElement.value &&
+        selectedReverseElement.value &&
+        selectedReverseElement.value != selectedForwardElement.value
+    ) {
+        _pair(selectedForwardElement.value, selectedReverseElement.value);
+    }
+}
+
+// ------------------------------------------------------- pairing / unpairing
+/**
+ * Create a pair from fwd and rev, removing them from unpaired,
+ * and placing the new pair in paired
+ */
+function _pair(fwd: HDASummary, rev: HDASummary, options: { name?: string } = {}) {
+    const pair = _createPair(fwd, rev, options.name);
+    generatedPairs.value.push(pair);
+    removePairFromUnpaired(fwd, rev);
+    // if (!options.silent) {
+    //     emit("pair:new", pair);
+    // }
+    return pair;
+}
+
+function removePairFromUnpaired(fwd: HDASummary, rev: HDASummary) {
+    workingElements.value.splice(workingElements.value.indexOf(rev), 1);
+    workingElements.value.splice(workingElements.value.indexOf(fwd), 1);
+    selectedForwardElement.value = null;
+    selectedReverseElement.value = null;
+}
+
+/**
+ * Create a pair Object from fwd and rev, adding the name attribute
+ * (will guess if not given)
+ */
+function _createPair(fwd: HDASummary, rev: HDASummary, name?: string) {
+    // ensure existance and don't pair something with itself
+    if (!(fwd && rev) || fwd === rev) {
+        throw new Error(`Bad pairing: ${[JSON.stringify(fwd), JSON.stringify(rev)]}`);
+    }
+    name = name || _guessNameForPair(fwd, rev);
+    return { forward: fwd, name: name, reverse: rev };
+}
+
+/** Try to find a good pair name for the given fwd and rev datasets */
+function _guessNameForPair(fwd: HDASummary, rev: HDASummary, willRemoveExtensions?: boolean) {
+    willRemoveExtensions = willRemoveExtensions ? willRemoveExtensions : removeExtensions.value;
+    let fwdName = fwd.name;
+    let revName = rev.name;
+    const fwdNameFilter = fwdName?.replace(new RegExp(forwardFilter.value || ""), "");
+    const revNameFilter = revName?.replace(new RegExp(reverseFilter.value || ""), "");
+    if (!fwdNameFilter || !revNameFilter || !fwdName || !revName) {
+        return `${fwdName} & ${revName}`;
+    }
+    let lcs = _naiveStartingAndEndingLCS(fwdNameFilter, revNameFilter);
+    // remove url prefix if files were uploaded by url
+    const lastSlashIndex = lcs.lastIndexOf("/");
+    if (lastSlashIndex > 0) {
+        const urlprefix = lcs.slice(0, lastSlashIndex + 1);
+        lcs = lcs.replace(urlprefix, "");
+    }
+
+    if (willRemoveExtensions) {
+        const lastDotIndex = lcs.lastIndexOf(".");
+        if (lastDotIndex > 0) {
+            const extension = lcs.slice(lastDotIndex, lcs.length);
+            lcs = lcs.replace(extension, "");
+            fwdName = fwdName.replace(extension, "");
+            revName = revName.replace(extension, "");
+        }
+    }
+    if (lcs.endsWith(".") || lcs.endsWith("_")) {
+        lcs = lcs.substring(0, lcs.length - 1);
+    }
+    return lcs || `${fwdName} & ${revName}`;
+}
+
+function clickAutopair() {
+    // Unselect any selected elements
+    selectedForwardElement.value = null;
+    selectedReverseElement.value = null;
+    autoPair();
+
+    workingElements.value = workingElements.value.filter((e) => {
+        return !generatedPairs.value.some((pair) => pair.forward.id === e.id || pair.reverse.id === e.id);
+    });
+}
+
+function clickUnpair(pair: DatasetPair) {
+    return _unpair(pair);
+}
+
+function clickClearFilters() {
+    forwardFilter.value = "";
+    reverseFilter.value = "";
+}
+
+function splitByFilter() {
+    const filters = [new RegExp(forwardFilter.value), new RegExp(reverseFilter.value)];
+    const split: [HDASummary[], HDASummary[]] = [[], []];
+    workingElements.value.forEach((e) => {
+        filters.forEach((filter, i) => {
+            if (e.name && filter.test(e.name)) {
+                split[i]?.push(e);
+            }
+        });
+    });
+    return split;
+}
+// ===========================================================================
+
+// -------------------------------------------------------------- auto pairing
+/** Autopair by exact match */
+function autoPairSimple(params: { listA: HDASummary[]; listB: HDASummary[] }) {
+    return autoPairFnBuilder({
+        match: (params) => {
+            params = params || {};
+            if (params.matchTo === params.possible) {
+                return {
+                    index: params.index,
+                    score: 1.0,
+                };
+            }
+            return params.bestMatch;
+        },
+        scoreThreshold: 0.6,
+    })(params);
+}
+
+// TODO: Currently unused?
+/** Autopair by levenstein distance */
+// function autoPairLevenshtein(params: { listA: HDASummary[]; listB: HDASummary[] }) {
+//     return autoPairFnBuilder({
+//         match: (params) => {
+//             params = params || {};
+//             const distance = levenshteinDistance(params.matchTo, params.possible);
+//             const score = 1.0 - distance / Math.max(params.matchTo.length, params.possible.length);
+//             if (score > params.bestMatch.score) {
+//                 return {
+//                     index: params.index,
+//                     score: score,
+//                 };
+//             }
+//             return params.bestMatch;
+//         },
+//         scoreThreshold: MATCH_PERCENTAGE,
+//     })(params);
+// }
+
+/** Autopair by longest common substrings scoring */
+function autoPairLCS(params: { listA: HDASummary[]; listB: HDASummary[] }) {
+    return autoPairFnBuilder({
+        match: (params) => {
+            params = params || {};
+            const match = _naiveStartingAndEndingLCS(params.matchTo, params.possible).length;
+            const score = match / Math.max(params.matchTo.length, params.possible.length);
+            if (score > params.bestMatch.score) {
+                return {
+                    index: params.index,
+                    score: score,
+                };
+            }
+            return params.bestMatch;
+        },
+        scoreThreshold: MATCH_PERCENTAGE,
+    })(params);
+}
+
+/**
+ * Two passes to automatically create pairs:
+ * use both simpleAutoPair, then the fn mentioned in strategy
+ */
+function autoPair(localStrategy?: (params: { listA: HDASummary[]; listB: HDASummary[] }) => DatasetPair[]) {
+    let split = splitByFilter();
+    let paired: DatasetPair[] = [];
+    if (twoPassAutoPairing.value) {
+        const simplePaired = autoPairSimple({
+            listA: split[0],
+            listB: split[1],
+        });
+        paired = simplePaired ? simplePaired : paired;
+        split = splitByFilter();
+    }
+
+    // then try the remainder with something less strict
+    localStrategy = localStrategy || strategy.value;
+    split = splitByFilter();
+    const pairedStrategy = localStrategy({
+        listA: split[0],
+        listB: split[1],
+    });
+    paired = pairedStrategy ? paired.concat(pairedStrategy) : paired;
+    autoPairsPossible.value = paired.length > 0;
+    firstAutoPairDone.value = true;
+    return paired;
+}
+
+/** Add a dataset to the unpaired list in it's proper order */
+function _addToUnpaired(dataset: HDASummary) {
+    /** Currently, unpaired is natural sorted by name, use binary search to find insertion point */
+    function binSearchSortedIndex(low: number, hi: number) {
+        if (low === hi) {
+            return low;
+        }
+
+        let mid = Math.floor((hi - low) / 2) + low;
+
+        const elementAtPoint = workingElements.value[mid];
+
+        const compared = naturalSort(dataset.name || "", elementAtPoint?.name || "");
+
+        if (compared < 0) {
+            return binSearchSortedIndex(low, mid);
+        } else if (compared > 0) {
+            return binSearchSortedIndex(mid + 1, hi);
+        } else if (!elementAtPoint) {
+            return mid;
+        }
+        // walk the equal to find the last // TODO: Investigate this, is this correct?
+        if (elementAtPoint?.name === dataset.name) {
+            mid++;
+        }
+        return mid;
+    }
+
+    workingElements.value.splice(binSearchSortedIndex(0, workingElements.value.length), 0, dataset);
+}
+// /** add a dataset to the unpaired list in it's proper order */
+// _addToUnpaired: function (dataset) {
+//     // currently, unpaired is natural sorted by name, use binary search to find insertion point
+//     var binSearchSortedIndex = (low, hi) => {
+//         if (low === hi) {
+//             return low;
+//         }
+
+//         var mid = Math.floor((hi - low) / 2) + low;
+
+//         var compared = naturalSort(dataset.name, this.workingElements[mid].name);
+
+//         if (compared < 0) {
+//             return binSearchSortedIndex(low, mid);
+//         } else if (compared > 0) {
+//             return binSearchSortedIndex(mid + 1, hi);
+//         }
+//         // walk the equal to find the last
+//         while (this.workingElements[mid] && this.workingElements[mid].name === dataset.name) {
+//             mid++;
+//         }
+//         return mid;
+//     };
+
+//     this.workingElements.splice(binSearchSortedIndex(0, this.workingElements.length), 0, dataset);
+// },
+
+/**
+ * Unpair a pair, removing it from paired, and adding the fwd,rev
+ * datasets back into unpaired
+ */
+function _unpair(pair: DatasetPair) {
+    if (!pair) {
+        throw new Error(`Bad pair: ${JSON.stringify(pair)}`);
+    }
+    generatedPairs.value.splice(generatedPairs.value.indexOf(pair), 1);
+    _addToUnpaired(pair.forward);
+    _addToUnpaired(pair.reverse);
+
+    return pair;
+}
+
+/** Unpair all paired datasets */
+function unpairAll() {
+    const pairs = [];
+    while (generatedPairs.value.length) {
+        if (generatedPairs.value[0]) {
+            pairs.push(_unpair(generatedPairs.value[0]));
+        }
+
+        // pairs.push(_unpair(this.generatedPairs[0], { silent: true }));
+    }
+}
+// ===========================================================================
+
+/** Returns an autopair function that uses the provided options.match function */
+function autoPairFnBuilder(options: {
+    match: (params: {
+        matchTo: string;
+        possible: string;
+        index: number;
+        bestMatch: { score: number; index: number };
+    }) => { score: number; index: number };
+    createPair?: (params: {
+        listA: HDASummary[];
+        indexA: number;
+        listB: HDASummary[];
+        indexB: number;
+    }) => DatasetPair | undefined;
+    preprocessMatch?: (params: {
+        matchTo: HDASummary;
+        possible: HDASummary;
+        index: number;
+        bestMatch: { score: number; index: number };
+    }) => { matchTo: string; possible: string; index: number; bestMatch: { score: number; index: number } };
+    scoreThreshold?: number;
+}) {
+    options = options || {};
+    options.createPair =
+        options.createPair ||
+        function _defaultCreatePair(params) {
+            params = params || {};
+            const a = params.listA.splice(params.indexA, 1)[0];
+            const b = params.listB.splice(params.indexB, 1)[0];
+            if (!a || !b) {
+                return undefined;
+            }
+            const aInBIndex = params.listB.indexOf(a);
+            const bInAIndex = params.listA.indexOf(b);
+            if (aInBIndex !== -1) {
+                params.listB.splice(aInBIndex, 1);
+            }
+            if (bInAIndex !== -1) {
+                params.listA.splice(bInAIndex, 1);
+            }
+            // return _pair(a, b, { silent: true });
+            return _pair(a, b);
+        };
+    // compile these here outside of the loop
+    let _regexps: RegExp[] = [];
+    function getRegExps() {
+        if (!_regexps.length) {
+            _regexps = [new RegExp(forwardFilter.value), new RegExp(reverseFilter.value)];
+        }
+        return _regexps;
+    }
+    // mangle params as needed
+    options.preprocessMatch =
+        options.preprocessMatch ||
+        function _defaultPreprocessMatch(params) {
+            const regexps = getRegExps();
+            return Object.assign(params, {
+                matchTo: params.matchTo.name?.replace(regexps[0] || "", ""),
+                possible: params.possible.name?.replace(regexps[1] || "", ""),
+                index: params.index,
+                bestMatch: params.bestMatch,
+            });
+        };
+
+    return function _strategy(params: { listA: HDASummary[]; listB: HDASummary[] }) {
+        params = params || {};
+        const listA = params.listA;
+        const listB = params.listB;
+        let indexA = 0;
+        let indexB;
+
+        let bestMatch = {
+            score: 0.0,
+            index: -1,
+        };
+
+        const paired = [];
+        while (indexA < listA.length) {
+            const matchTo = listA[indexA];
+            bestMatch.score = 0.0;
+
+            if (!matchTo) {
+                continue;
+            }
+            for (indexB = 0; indexB < listB.length; indexB++) {
+                const possible = listB[indexB] as HDASummary;
+                if (listA[indexA] !== listB[indexB]) {
+                    bestMatch = options.match(
+                        options.preprocessMatch!({
+                            matchTo: matchTo,
+                            possible: possible,
+                            index: indexB,
+                            bestMatch: bestMatch,
+                        })
+                    );
+                    if (bestMatch.score === 1.0) {
+                        break;
+                    }
+                }
+            }
+            const scoreThreshold = options.scoreThreshold ? options.scoreThreshold : MATCH_PERCENTAGE;
+            if (bestMatch.score >= scoreThreshold) {
+                const createdPair = options.createPair!({
+                    listA: listA,
+                    indexA: indexA,
+                    listB: listB,
+                    indexB: bestMatch.index,
+                });
+                if (createdPair) {
+                    paired.push(createdPair);
+                }
+            } else {
+                indexA += 1;
+            }
+            if (!listA.length || !listB.length) {
+                return paired;
+            }
+        }
+        return paired;
+    };
+}
+
+function changeFilters(filter: keyof typeof COMMON_FILTERS) {
+    forwardFilter.value = COMMON_FILTERS[filter][0] as string;
+    reverseFilter.value = COMMON_FILTERS[filter][1] as string;
+}
+
+async function clickedCreate(collectionName: string) {
+    checkForDuplicates();
+    if (state.value == "build") {
+        await props
+            .creationFn(generatedPairs.value, collectionName, hideSourceItems.value)
+            .then(props.oncreate)
+            .catch((e: any) => {
+                state.value = "error";
+            });
+    }
+}
+
+function checkForDuplicates() {
+    const existingPairNames: Record<string, boolean> = {};
+    duplicatePairNames.value = [];
+    let valid = true;
+    generatedPairs.value.forEach((pair) => {
+        if (Object.prototype.hasOwnProperty.call(existingPairNames, pair.name)) {
+            valid = false;
+            duplicatePairNames.value.push(pair.name);
+        }
+        existingPairNames[pair.name] = true;
+    });
+    state.value = valid ? "build" : "duplicates";
+}
+
+// TODO: Where is this being used?
+// function stripExtension(name: string) {
+//     return name.includes(".") ? name.substring(0, name.lastIndexOf(".")) : name;
+// }
+
+/** Return the concat'd longest common prefix and suffix from two strings */
+function _naiveStartingAndEndingLCS(s1: string, s2: string) {
+    var fwdLCS = "";
+    var revLCS = "";
+    var i = 0;
+    var j = 0;
+    while (i < s1.length && i < s2.length) {
+        if (s1[i] !== s2[i]) {
+            break;
+        }
+        fwdLCS += s1[i];
+        i += 1;
+    }
+    if (i === s1.length) {
+        return s1;
+    }
+    if (i === s2.length) {
+        return s2;
+    }
+
+    i = s1.length - 1;
+    j = s2.length - 1;
+    while (i >= 0 && j >= 0) {
+        if (s1[i] !== s2[j]) {
+            break;
+        }
+        revLCS = [s1[i], revLCS].join("");
+        i -= 1;
+        j -= 1;
+    }
+    return fwdLCS + revLCS;
+}
+</script>
+
 <template>
     <div class="paired-list-collection-creator">
         <div v-if="state == 'error'">
-            <b-alert show variant="danger">
-                {{ errorText }}
-            </b-alert>
+            <BAlert show variant="danger">
+                {{ ERROR_TEXT }}
+            </BAlert>
         </div>
         <div v-else>
             <div v-if="noElementsSelected">
-                <b-alert show variant="warning" dismissible>
+                <BAlert show variant="warning" dismissible>
                     {{ noElementsHeader }}
-                    {{ allInvalidElementsPartOne }}
+                    {{ ALL_INVALID_ELEMENTS_PART_ONE }}
                     <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
-                        {{ cancelText }}
+                        {{ CANCEL_TEXT }}
                     </a>
                     {{ allInvalidElementsPartTwo }}
-                </b-alert>
+                </BAlert>
                 <div class="float-left">
                     <button class="cancel-create btn" tabindex="-1" @click="oncancel">
-                        {{ l("Cancel") }}
+                        {{ CANCEL_TEXT }}
                     </button>
                 </div>
             </div>
             <div v-else-if="allElementsAreInvalid">
-                <b-alert show variant="warning" dismissible>
-                    {{ invalidHeader }}
+                <BAlert v-if="!fromSelection" show variant="warning">
+                    {{
+                        localize(
+                            "No elements in your history are valid for this collection. You may need to switch to a different history."
+                        )
+                    }}
+                    <span v-if="extensions?.length">
+                        {{ localize("The following extensions are required for this collection: ") }}
+                        <ul>
+                            <li v-for="extension in extensions" :key="extension">
+                                {{ extension }}
+                            </li>
+                        </ul>
+                    </span>
+                </BAlert>
+                <BAlert v-else show variant="warning" dismissible>
+                    {{ INVALID_HEADER }}
                     <ul>
                         <li v-for="problem in returnInvalidElements" :key="problem">
                             {{ problem }}
                         </li>
                     </ul>
-                    {{ allInvalidElementsPartOne }}
+                    {{ ALL_INVALID_ELEMENTS_PART_ONE }}
                     <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
-                        {{ cancelText }}
+                        {{ CANCEL_TEXT }}
                     </a>
                     {{ allInvalidElementsPartTwo }}
-                </b-alert>
+                </BAlert>
                 <div class="float-left">
                     <button class="cancel-create btn" tabindex="-1" @click="oncancel">
-                        {{ l("Cancel") }}
+                        {{ CANCEL_TEXT }}
                     </button>
                 </div>
             </div>
             <div v-else-if="tooFewElementsSelected">
                 <div v-if="returnInvalidElementsLength">
-                    <b-alert show variant="warning" dismissible>
-                        {{ invalidHeader }}
+                    <BAlert show variant="warning" dismissible>
+                        {{ INVALID_HEADER }}
                         <ul>
                             <li v-for="problem in returnInvalidElements" :key="problem">
                                 {{ problem }}
                             </li>
                         </ul>
-                    </b-alert>
+                    </BAlert>
                 </div>
-                <b-alert show variant="warning" dismissible>
-                    {{ allInvalidElementsPartOne }}
+                <BAlert show variant="warning" dismissible>
+                    {{ ALL_INVALID_ELEMENTS_PART_ONE }}
                     <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
-                        {{ cancelText }}
+                        {{ CANCEL_TEXT }}
                     </a>
                     {{ allInvalidElementsPartTwo }}
-                </b-alert>
+                </BAlert>
                 <div class="float-left">
                     <button class="cancel-create btn" tabindex="-1" @click="oncancel">
-                        {{ l("Cancel") }}
+                        {{ CANCEL_TEXT }}
                     </button>
                 </div>
             </div>
             <div v-else>
-                <div v-if="returnInvalidElementsLength">
-                    <b-alert show variant="warning" dismissible>
-                        {{ invalidHeader }}
+                <div v-if="fromSelection && returnInvalidElementsLength">
+                    <BAlert show variant="warning" dismissible>
+                        {{ INVALID_HEADER }}
                         <ul>
                             <li v-for="problem in returnInvalidElements" :key="problem">
                                 {{ problem }}
                             </li>
                         </ul>
-                    </b-alert>
+                    </BAlert>
                 </div>
-                <div v-if="!initialPairsPossible">
-                    <b-alert show variant="danger" dismissible>
+                <div v-if="!autoPairsPossible">
+                    <BAlert show variant="danger" dismissible @dismissed="autoPairsPossible = true">
                         {{
-                            l(
+                            localize(
                                 "Could not automatically create any pairs from the given dataset names. You may want to choose or enter different filters and try auto-pairing again."
                             )
                         }}
-                        <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
-                            {{ cancelText }}
-                        </a>
-                        {{ allInvalidElementsPartTwo }}
-                    </b-alert>
+                        <span v-if="fromSelection">
+                            <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
+                                {{ CANCEL_TEXT }}
+                            </a>
+                            {{ allInvalidElementsPartTwo }}
+                        </span>
+                    </BAlert>
                 </div>
                 <div v-if="state == 'duplicates'">
-                    <b-alert show variant="danger">
-                        {{ l("Collections cannot have duplicated names. The following list names are duplicated: ") }}
+                    <BAlert show variant="danger">
+                        {{
+                            localize(
+                                "Collections cannot have duplicated names. The following list names are duplicated: "
+                            )
+                        }}
                         <ul>
                             <li v-for="name in duplicatePairNames" :key="name">{{ name }}</li>
                         </ul>
-                        {{ l("Please fix these duplicates and try again.") }}
-                    </b-alert>
+                        {{ localize("Please fix these duplicates and try again.") }}
+                    </BAlert>
                 </div>
-                <collection-creator
+                <CollectionCreator
                     :oncancel="oncancel"
                     :hide-source-items="hideSourceItems"
-                    :render-extensions-toggle="true"
+                    render-extensions-toggle
                     :extensions-toggle="removeExtensions"
-                    @onUpdateHideSourceItems="onUpdateHideSourceItems"
+                    :extensions="extensions"
+                    @onUpdateHideSourceItems="hideSourceItems = $event"
                     @clicked-create="clickedCreate"
                     @remove-extensions-toggle="removeExtensionsToggle">
                     <template v-slot:help-content>
+                        <!-- TODO: Update help content for case where `fromSelection` is false -->
                         <p>
                             {{
-                                l(
+                                localize(
                                     [
                                         "Collections of paired datasets are ordered lists of dataset pairs (often forward and reverse reads). ",
                                         "These collections can be passed to tools and workflows in order to have analyses done on each member of ",
@@ -120,119 +903,119 @@
                             }}
                         </p>
                         <p>
-                            {{ l("Unpaired datasets are shown in the") }}
+                            {{ localize("Unpaired datasets are shown in the") }}
                             <i data-target=".unpaired-columns">
-                                {{ l("unpaired section") }}
+                                {{ localize("unpaired section") }}
                             </i>
                             {{ "." }}
-                            {{ l("Paired datasets are shown in the") }}
+                            {{ localize("Paired datasets are shown in the") }}
                             <i data-target=".paired-columns">
-                                {{ l("paired section") }}
+                                {{ localize("paired section") }}
                             </i>
                             {{ "." }}
                         </p>
                         <ul>
                             {{
-                                l("To pair datasets, you can:")
+                                localize("To pair datasets, you can:")
                             }}
                             <li>
-                                {{ l("Click a dataset in the") }}
+                                {{ localize("Click a dataset in the") }}
                                 <i data-target=".forward-column">
-                                    {{ l("forward column") }}
+                                    {{ localize("forward column") }}
                                 </i>
-                                {{ l("to select it then click a dataset in the") }}
+                                {{ localize("to select it then click a dataset in the") }}
                                 <i data-target=".reverse-column">
-                                    {{ l("reverse column") }}
+                                    {{ localize("reverse column") }}
                                 </i>
                             </li>
                             <li>
                                 {{
-                                    l(
+                                    localize(
                                         "Click one of the Pair these datasets buttons in the middle column to pair the datasets in a particular row."
                                     )
                                 }}
                             </li>
                             <li>
-                                {{ l("Click") }}
+                                {{ localize("Click") }}
                                 <i data-target=".autopair-link">
-                                    {{ l("Auto-pair") }}
+                                    {{ localize("Auto-pair") }}
                                 </i>
-                                {{ l("to have your datasets automatically paired based on name.") }}
+                                {{ localize("to have your datasets automatically paired based on name.") }}
                             </li>
                         </ul>
                         <ul>
                             {{
-                                l("You can filter what is shown in the unpaired sections by:")
+                                localize("You can filter what is shown in the unpaired sections by:")
                             }}
                             <li>
-                                {{ l("Entering partial dataset names in either the ") }}
+                                {{ localize("Entering partial dataset names in either the ") }}
                                 <i data-target=".forward-unpaired-filter input">
-                                    {{ l("forward filter") }}
+                                    {{ localize("forward filter") }}
                                 </i>
-                                {{ l("or ") }}
+                                {{ localize("or ") }}
                                 <i data-target=".reverse-unpaired-filter input">
-                                    {{ l("reverse filter") }}
+                                    {{ localize("reverse filter") }}
                                 </i>
                                 {{ "." }}
                             </li>
                             <li>
                                 {{
-                                    l(
+                                    localize(
                                         "Choosing from a list of preset filters by clicking the arrow beside the filter input."
                                     )
                                 }}
                             </li>
                             <li>
-                                {{ l("Entering regular expressions to match dataset names. See:") }}
+                                {{ localize("Entering regular expressions to match dataset names. See:") }}
                                 <a
                                     href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions"
                                     target="_blank">
-                                    {{ l("MDN's JavaScript Regular Expression Tutorial") }}</a
+                                    {{ localize("MDN's JavaScript Regular Expression Tutorial") }}</a
                                 >
-                                {{ l("Note: forward slashes (\\) are not needed.") }}
+                                {{ localize("Note: forward slashes (\\) are not needed.") }}
                             </li>
                             <li>
-                                {{ l("Clearing the filters by clicking the ") }}
+                                {{ localize("Clearing the filters by clicking the ") }}
                                 <i data-target=".clear-filters-link">
-                                    {{ l("Clear filters link") }}
+                                    {{ localize("Clear filters link") }}
                                 </i>
                                 {{ "." }}
                             </li>
                         </ul>
                         <p>
-                            {{ l("To unpair individual dataset pairs, click the ") }}
+                            {{ localize("To unpair individual dataset pairs, click the ") }}
                             <i data-target=".unpair-btn">
-                                {{ l("unpair buttons (") }}
+                                {{ localize("unpair buttons (") }}
                                 <span class="fa fa-unlink"></span>
                                 {{ ")" }}
                             </i>
-                            {{ l("Click the") }}
+                            {{ localize("Click the") }}
                             <i data-target=".unpair-all-link">
-                                {{ l("Unpair all") }}
+                                {{ localize("Unpair all") }}
                             </i>
-                            {{ l("link to unpair all pairs.") }}
+                            {{ localize("link to unpair all pairs.") }}
                         </p>
                         <p>
                             {{
-                                l(
+                                localize(
                                     'You can include or remove the file extensions (e.g. ".fastq") from your pair names by toggling the'
                                 )
                             }}
                             <i data-target=".remove-extensions-prompt">
-                                {{ l("Remove file extensions from pair names?") }}
+                                {{ localize("Remove file extensions from pair names?") }}
                             </i>
-                            {{ l("control.") }}
+                            {{ localize("control.") }}
                         </p>
                         <p>
-                            {{ l("Once your collection is complete, enter a") }}
+                            {{ localize("Once your collection is complete, enter a") }}
                             <i data-target=".collection-name">
-                                {{ l("name") }}
+                                {{ localize("name") }}
                             </i>
-                            {{ l("and click ") }}
+                            {{ localize("and click ") }}
                             <i data-target=".create-collection">
-                                {{ l("Create list") }}
+                                {{ localize("Create list") }}
                             </i>
-                            {{ l(". (Note: you do not have to pair all unpaired datasets to finish.)") }}
+                            {{ localize(". (Note: you do not have to pair all unpaired datasets to finish.)") }}
                         </p>
                     </template>
                     <template v-slot:middle-content>
@@ -242,20 +1025,22 @@
                                     <div class="column-title">
                                         <span class="title">
                                             {{ numOfUnpairedForwardElements }}
-                                            {{ l("unpaired forward") }}
+                                            {{ localize("unpaired forward") }}
                                         </span>
                                         <span class="title-info unpaired-info">
-                                            {{ numOfFilteredOutForwardElements }} {{ l("filtered out") }}
+                                            {{ numOfFilteredOutForwardElements }} {{ localize("filtered out") }}
                                         </span>
                                     </div>
                                     <div
-                                        class="unpaired-filter forward-unpaired-filter float-left search-input search-query input-group">
+                                        class="unpaired-filter forward-unpaired-filter search-input search-query input-group">
+                                        <label for="forward-filter" class="sr-only">{{ FILTER_TEXT_TITLE }}</label>
                                         <input
+                                            id="foward-filter"
                                             v-model="forwardFilter"
                                             type="text"
-                                            :placeholder="filterTextPlaceholder"
-                                            title="filterTextTitle" />
-                                        <div class="input-group-append" :title="chooseFilterTitle">
+                                            :placeholder="FILTER_TEXT_PLACEHOLDER"
+                                            :title="FILTER_TEXT_TITLE" />
+                                        <div class="input-group-append" :title="CHOOSE_FILTER_TITLE">
                                             <button
                                                 class="btn btn-outline-secondary dropdown-toggle"
                                                 type="button"
@@ -263,52 +1048,69 @@
                                                 aria-haspopup="true"
                                                 aria-expanded="false"></button>
                                             <div class="dropdown-menu">
-                                                <a class="dropdown-item" @click="changeFilters('illumina')">_1</a>
-                                                <a class="dropdown-item" @click="changeFilters('Rs')">_R1</a>
-                                                <a class="dropdown-item" @click="changeFilters('dot12s')">.1.fastq</a>
+                                                <a
+                                                    class="dropdown-item"
+                                                    href="javascript:void(0);"
+                                                    @click="changeFilters('illumina')"
+                                                    >_1</a
+                                                >
+                                                <a
+                                                    class="dropdown-item"
+                                                    href="javascript:void(0);"
+                                                    @click="changeFilters('Rs')"
+                                                    >_R1</a
+                                                >
+                                                <a
+                                                    class="dropdown-item"
+                                                    href="javascript:void(0);"
+                                                    @click="changeFilters('dot12s')"
+                                                    >.1.fastq</a
+                                                >
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                             <div class="paired-column flex-column no-flex column">
-                                <div class="column-header">
-                                    <a
-                                        class="clear-filters-link"
-                                        href="javascript:void(0);"
-                                        role="button"
-                                        @click="clickClearFilters">
-                                        {{ l("Clear Filters") }}
-                                    </a>
-                                    <br />
-                                    <a
+                                <BButtonGroup vertical>
+                                    <BButton class="clear-filters-link" size="sm" @click="clickClearFilters">
+                                        <FontAwesomeIcon :icon="faTimes" fixed-width />
+                                        {{ localize("Clear Filters") }}
+                                    </BButton>
+                                    <BButton
+                                        v-b-tooltip.hover.noninteractive
                                         class="autopair-link"
-                                        href="javascript:void(0);"
-                                        role="button"
+                                        size="sm"
+                                        :title="autoPairButton.text"
+                                        :disabled="pairableElements.length === 0"
+                                        :variant="autoPairButton.variant"
                                         @click="clickAutopair">
-                                        {{ l("Auto-pair") }}
-                                    </a>
-                                </div>
+                                        <FontAwesomeIcon :icon="autoPairButton.icon" fixed-width />
+                                        {{ localize("Auto-pair") }}
+                                    </BButton>
+                                </BButtonGroup>
                             </div>
                             <div class="reverse-column flex-column column">
                                 <div class="column-header">
                                     <div class="column-title">
                                         <span class="title">
                                             {{ numOfUnpairedReverseElements }}
-                                            {{ l("unpaired reverse") }}
+                                            {{ localize("unpaired reverse") }}
                                         </span>
                                         <span class="title-info unpaired-info">
-                                            {{ numOfFilteredOutReverseElements }} {{ l("filtered out") }}</span
+                                            {{ numOfFilteredOutReverseElements }} {{ localize("filtered out") }}</span
                                         >
                                     </div>
                                     <div
-                                        class="unpaired-filter reverse-unpaired-filter float-left search-input search-query input-group">
+                                        class="unpaired-filter reverse-unpaired-filter justify-content-end search-input search-query input-group">
+                                        <label for="reverse-filter" class="sr-only">{{ FILTER_TEXT_TITLE }}</label>
                                         <input
+                                            id="reverse-filter"
                                             v-model="reverseFilter"
                                             type="text"
-                                            :placeholder="filterTextPlaceholder"
-                                            title="filterTextTitle" />
-                                        <div class="input-group-append" :title="chooseFilterTitle">
+                                            :placeholder="FILTER_TEXT_PLACEHOLDER"
+                                            :title="FILTER_TEXT_TITLE" />
+                                        <div class="input-group-append" :title="CHOOSE_FILTER_TITLE">
                                             <button
                                                 class="btn btn-outline-secondary dropdown-toggle"
                                                 type="button"
@@ -316,9 +1118,24 @@
                                                 aria-haspopup="true"
                                                 aria-expanded="false"></button>
                                             <div class="dropdown-menu">
-                                                <a class="dropdown-item" @click="changeFilters('illumina')">_2</a>
-                                                <a class="dropdown-item" @click="changeFilters('Rs')">_R2</a>
-                                                <a class="dropdown-item" @click="changeFilters('dot12s')">.2.fastq</a>
+                                                <a
+                                                    class="dropdown-item"
+                                                    href="javascript:void(0);"
+                                                    @click="changeFilters('illumina')"
+                                                    >_2</a
+                                                >
+                                                <a
+                                                    class="dropdown-item"
+                                                    href="javascript:void(0);"
+                                                    @click="changeFilters('Rs')"
+                                                    >_R2</a
+                                                >
+                                                <a
+                                                    class="dropdown-item"
+                                                    href="javascript:void(0);"
+                                                    @click="changeFilters('dot12s')"
+                                                    >.2.fastq</a
+                                                >
                                             </div>
                                         </div>
                                     </div>
@@ -328,9 +1145,9 @@
                         <div class="pairing-split-parent">
                             <div class="pairing-split-child">
                                 <div v-if="noUnpairedElementsDisplayed">
-                                    <b-alert show variant="warning">
-                                        {{ l("No datasets were found matching the current filters.") }}
-                                    </b-alert>
+                                    <BAlert show variant="warning">
+                                        {{ localize("No datasets were found matching the current filters.") }}
+                                    </BAlert>
                                 </div>
                                 <div class="unpaired-columns flex-column-container scroll-container flex-row">
                                     <div class="forward-column flex-column column truncate">
@@ -341,8 +1158,9 @@
                                                 :class="{
                                                     selected:
                                                         selectedForwardElement &&
-                                                        element.id == selectedForwardElement.id,
+                                                        element.id === selectedForwardElement.id,
                                                 }"
+                                                :disabled="element.id === selectedReverseElement?.id"
                                                 :element="element"
                                                 @element-is-selected="forwardElementSelected" />
                                         </ol>
@@ -353,8 +1171,11 @@
                                                 v-for="(pairableElement, index) in pairableElements"
                                                 :key="index"
                                                 class="dataset"
+                                                role="button"
+                                                tabindex="0"
+                                                @keyup.enter="_pair(pairableElement.forward, pairableElement.reverse)"
                                                 @click="_pair(pairableElement.forward, pairableElement.reverse)">
-                                                {{ l("Pair these datasets") }}
+                                                {{ localize("Pair these datasets") }}
                                             </li>
                                         </ol>
                                     </div>
@@ -368,6 +1189,7 @@
                                                         selectedReverseElement &&
                                                         element.id == selectedReverseElement.id,
                                                 }"
+                                                :disabled="element.id === selectedForwardElement?.id"
                                                 :element="element"
                                                 @element-is-selected="reverseElementSelected" />
                                         </ol>
@@ -377,663 +1199,41 @@
                             <div class="pairing-split-child">
                                 <div class="column-header">
                                     <div class="column-title paired-column-title">
-                                        <span class="title"> {{ numOfPairs }} {{ l(" pairs") }}</span>
+                                        <span class="title"> {{ numOfPairs }} {{ localize(" pairs") }}</span>
                                     </div>
-                                    <a
-                                        class="unpair-all-link"
-                                        href="javascript:void(0);"
-                                        role="button"
-                                        @click="unpairAll">
-                                        {{ l("Unpair all") }}
-                                    </a>
+                                    <BButton
+                                        v-if="generatedPairs.length > 0"
+                                        variant="link"
+                                        size="sm"
+                                        @click.stop="unpairAll">
+                                        <FontAwesomeIcon :icon="faUnlink" fixed-width />
+                                        {{ localize("Unpair all") }}
+                                    </BButton>
                                 </div>
                                 <div class="paired-columns flex-column-container scroll-container flex-row">
                                     <ol class="column-datasets">
-                                        <draggable v-model="pairedElements" @start="drag = true" @end="drag = false">
+                                        <draggable
+                                            v-model="generatedPairs"
+                                            handle=".dataset"
+                                            chosen-class="dragged-pair">
                                             <PairedElementView
-                                                v-for="pair in pairedElements"
-                                                :key="pair.id"
+                                                v-for="pair in generatedPairs"
+                                                :key="`${pair.forward.id}-${pair.reverse.id}`"
                                                 :pair="pair"
-                                                :unlink-fn="clickUnpair(pair)"
-                                                @onPairRename="(name) => (pair.name = name)" />
+                                                @onPairRename="(name) => (pair.name = name)"
+                                                @onUnpair="clickUnpair(pair)" />
                                         </draggable>
                                     </ol>
                                 </div>
                             </div>
                         </div>
                     </template>
-                </collection-creator>
+                </CollectionCreator>
             </div>
         </div>
     </div>
 </template>
-<script>
-import BootstrapVue from "bootstrap-vue";
-import STATES from "mvc/dataset/states";
-import levenshteinDistance from "utils/levenshtein";
-import _l from "utils/localization";
-import naturalSort from "utils/natural-sort";
-import Vue from "vue";
-import draggable from "vuedraggable";
 
-import mixin from "./common/mixin";
-import PairedElementView from "./PairedElementView";
-import UnpairedDatasetElementView from "./UnpairedDatasetElementView";
-
-Vue.use(BootstrapVue);
-export default {
-    components: {
-        UnpairedDatasetElementView,
-        PairedElementView,
-        draggable,
-    },
-    mixins: [mixin],
-    data: function () {
-        return {
-            state: "build", //error, duplicates
-            dragToChangeTitle: _l("Drag to change"),
-            chooseFilterTitle: _l("Choose from common filters"),
-            filterTextPlaceholder: _l("Filter text"),
-            filterTextTitle: _l("Use this box to filter elements, using simple matching or regular expressions."),
-            pairedElements: [],
-            unpairedElements: [],
-            commonFilters: {
-                illumina: ["_1", "_2"],
-                Rs: ["_R1", "_R2"],
-                dot12s: [".1.fastq", ".2.fastq"],
-            },
-            DEFAULT_FILTERS: "illumina",
-            forwardFilter: "",
-            reverseFilter: "",
-            automaticallyPair: true,
-            initialPairsPossible: true,
-            matchPercentage: 0.99,
-            twoPassAutoPairing: true,
-            removeExtensions: true,
-            workingElements: [],
-
-            selectedForwardElement: null,
-            selectedReverseElement: null,
-            /** autopair by exact match */
-
-            autopairSimple: this.autoPairFnBuilder({
-                scoreThreshold: function () {
-                    return 0.6;
-                },
-                match: function _match(params) {
-                    params = params || {};
-                    if (params.matchTo === params.possible) {
-                        return {
-                            index: params.index,
-                            score: 1.0,
-                        };
-                    }
-                    return params.bestMatch;
-                },
-            }),
-            /** autopair by levenshtein edit distance scoring */
-            autopairLevenshtein: this.autoPairFnBuilder({
-                scoreThreshold: function () {
-                    return this.matchPercentage;
-                },
-                match: function _matches(params) {
-                    params = params || {};
-
-                    var distance = levenshteinDistance(params.matchTo, params.possible);
-
-                    var score = 1.0 - distance / Math.max(params.matchTo.length, params.possible.length);
-
-                    if (score > params.bestMatch.score) {
-                        return {
-                            index: params.index,
-                            score: score,
-                        };
-                    }
-                    return params.bestMatch;
-                },
-            }),
-            /** autopair by longest common substrings scoring */
-            autopairLCS: this.autoPairFnBuilder({
-                scoreThreshold: function () {
-                    return this.matchPercentage;
-                },
-                match: function _matches(params) {
-                    params = params || {};
-
-                    var match = this._naiveStartingAndEndingLCS(params.matchTo, params.possible).length;
-
-                    var score = match / Math.max(params.matchTo.length, params.possible.length);
-
-                    if (score > params.bestMatch.score) {
-                        return {
-                            index: params.index,
-                            score: score,
-                        };
-                    }
-                    return params.bestMatch;
-                },
-            }),
-            strategy: null,
-            errorText: _l("Galaxy could not be reached and may be updating.  Try again in a few minutes."),
-            invalidHeader: _l("The following selections could not be included due to problems:"),
-            allInvalidElementsPartOne: _l("At least two elements are needed for the collection. You may need to"),
-            noElementsHeader: _l("No datasets were selected"),
-            cancelText: _l("cancel"),
-            allInvalidElementsPartTwo: _l("and reselect new elements."),
-            duplicatePairNames: [],
-        };
-    },
-    computed: {
-        forwardElements: {
-            get() {
-                return this.filterElements(this.workingElements, this.forwardFilter);
-            },
-        },
-        reverseElements: {
-            get() {
-                return this.filterElements(this.workingElements, this.reverseFilter);
-            },
-        },
-        pairableElements: {
-            get() {
-                var pairable = [];
-                this.forwardElements.forEach((elem, index) => {
-                    if (this.reverseElements[index] && elem.id != this.reverseElements[index].id) {
-                        pairable.push({
-                            forward: this.forwardElements[index],
-                            reverse: this.reverseElements[index],
-                        });
-                    }
-                });
-                return pairable;
-            },
-        },
-        numOfUnpairedForwardElements: function () {
-            return this.forwardElements.length;
-        },
-        numOfFilteredOutForwardElements: function () {
-            return this.workingElements.length - this.numOfUnpairedForwardElements;
-        },
-        numOfUnpairedReverseElements: function () {
-            return this.reverseElements.length;
-        },
-        numOfFilteredOutReverseElements: function () {
-            return this.workingElements.length - this.numOfUnpairedReverseElements;
-        },
-        numOfPairs: function () {
-            return this.pairedElements.length;
-        },
-        returnInvalidElementsLength: function () {
-            return this.invalidElements.length > 0;
-        },
-        returnInvalidElements: function () {
-            return this.invalidElements;
-        },
-        allElementsAreInvalid: function () {
-            return this.initialElements.length == this.invalidElements.length;
-        },
-        noElementsSelected: function () {
-            return this.initialElements.length == 0;
-        },
-        tooFewElementsSelected: function () {
-            return this.workingElements.length < 2 && this.pairedElements.length == 0;
-        },
-        showDuplicateError() {
-            return this.duplicatePairNames.length > 0;
-        },
-        noUnpairedElementsDisplayed() {
-            return this.numOfUnpairedForwardElements + this.numOfUnpairedReverseElements == 0;
-        },
-        renderPairButton() {
-            return this;
-        },
-    },
-    created() {
-        this.strategy = this.autopairLCS;
-        //TODO convert to Fwd/Rev
-        // Setup inital filters and shallow copy the items
-        this.forwardFilter = this.commonFilters[this.DEFAULT_FILTERS][0];
-        this.reverseFilter = this.commonFilters[this.DEFAULT_FILTERS][1];
-        this._elementsSetUp();
-    },
-    methods: {
-        l(str) {
-            // _l conflicts private methods of Vue internals, expose as l instead
-            return _l(str);
-        },
-        removeExtensionsToggle: function () {
-            this.removeExtensions = !this.removeExtensions;
-            this.pairedElements.forEach((pair, index) => {
-                pair.name = this._guessNameForPair(pair.forward, pair.reverse, this.removeExtensions);
-            });
-        },
-        /** set up main data */
-        _elementsSetUp: function () {
-            /** a list of invalid elements and the reasons they aren't valid */
-            this.invalidElements = [];
-            //TODO: handle fundamental problem of syncing DOM, views, and list here
-            /** data for list in progress */
-            this.workingElements = [];
-            //TODO: this should maybe be in it's own method as it will get called everytime selected array has two elements and dumps again.
-            this.selectedDatasetElems = [];
-            this.initialFiltersSet();
-            // copy initial list, sort, add ids if needed
-            this.workingElements = JSON.parse(JSON.stringify(this.initialElements.slice(0)));
-            this._ensureElementIds();
-            this._validateElements();
-            this._sortInitialList();
-            //attempt to autopair
-            if (this.automaticallyPair == true) {
-                this.autoPair();
-                this.initialPairsPossible = this.pairedElements.length > 0;
-            }
-        },
-        initialFiltersSet: function () {
-            let illumina = 0;
-            let dot12s = 0;
-            let Rs = 0;
-            //should we limit the forEach? What if there are 1000s of elements?
-            this.initialElements.forEach((element) => {
-                if (element.name.includes(".1.fastq") || element.name.includes(".2.fastq")) {
-                    dot12s++;
-                } else if (element.name.includes("_R1") || element.name.includes("_R2")) {
-                    Rs++;
-                } else if (element.name.includes("_1") || element.name.includes("_2")) {
-                    illumina++;
-                }
-            });
-
-            if (illumina > dot12s && illumina > Rs) {
-                this.changeFilters("illumina");
-            } else if (dot12s > illumina && dot12s > Rs) {
-                this.changeFilters("dot12s");
-            } else if (Rs > illumina && Rs > dot12s) {
-                this.changeFilters("Rs");
-            } else {
-                this.changeFilters("illumina");
-            }
-        },
-        /** add ids to dataset objs in initial list if none */
-        _ensureElementIds: function () {
-            this.workingElements.forEach((element) => {
-                if (!Object.prototype.hasOwnProperty.call(element, "id")) {
-                    element.id = element._uid;
-                }
-            });
-            return this.workingElements;
-        },
-        // /** separate working list into valid and invalid elements for this collection */
-        _validateElements: function () {
-            this.workingElements = this.workingElements.filter((element) => {
-                var problem = this._isElementInvalid(element);
-                if (problem) {
-                    this.invalidElements.push(element.name + "  " + problem);
-                }
-                return !problem;
-            });
-            return this.workingElements;
-        },
-        /** describe what is wrong with a particular element if anything */
-        _isElementInvalid: function (element) {
-            if (element.history_content_type === "dataset_collection") {
-                return _l("is a collection, this is not allowed");
-            }
-            var validState = element.state === STATES.OK || STATES.NOT_READY_STATES.includes(element.state);
-            if (!validState) {
-                return _l("has errored, is paused, or is not accessible");
-            }
-            if (element.deleted || element.purged) {
-                return _l("has been deleted or purged");
-            }
-            return null;
-        },
-        /** sort initial list */
-        _sortInitialList: function () {
-            //console.debug( '-- _sortInitialList' );
-            this._sortDatasetList(this.workingElements);
-        },
-
-        /** sort a list of datasets */
-        _sortDatasetList: function (list) {
-            // currently only natural sort by name
-            list.sort((a, b) => naturalSort(a.name, b.name));
-            return list;
-        },
-        filterElements: function (elements, filterText) {
-            return elements.filter((e) => this.filterElement(e, filterText));
-        },
-        filterElement: function (element, filterText) {
-            return filterText == "" || new RegExp(filterText).test(element.name);
-        },
-        forwardElementSelected: function (e) {
-            if (this.selectedForwardElement == null || !this.selectedForwardElement.id == e.id) {
-                this.selectedForwardElement = e;
-            } else {
-                this.selectedForwardElement = null;
-            }
-            if (
-                this.selectedForwardElement &&
-                this.selectedReverseElement &&
-                this.selectedReverseElement != this.selectedForwardElement
-            ) {
-                this._pair(this.selectedForwardElement, this.selectedReverseElement);
-            }
-        },
-        reverseElementSelected: function (e) {
-            if (this.selectedReverseElement == null || !this.selectedReverseElement.id == e.id) {
-                this.selectedReverseElement = e;
-            } else {
-                this.selectedReverseElement = null;
-            }
-            if (
-                this.selectedForwardElement &&
-                this.selectedReverseElement &&
-                this.selectedReverseElement != this.selectedForwardElement
-            ) {
-                this._pair(this.selectedForwardElement, this.selectedReverseElement);
-            }
-        },
-
-        // ------------------------------------------------------------------------ pairing / unpairing
-        /** create a pair from fwd and rev, removing them from unpaired, and placing the new pair in paired */
-        _pair: function (fwd, rev, options) {
-            options = options || {};
-            var pair = this._createPair(fwd, rev, options.name);
-            this.pairedElements.push(pair);
-            this.removePairFromUnpaired(fwd, rev);
-            if (!options.silent) {
-                this.$emit("pair:new", pair);
-            }
-            return pair;
-        },
-        removePairFromUnpaired: function (fwd, rev) {
-            this.workingElements.splice(this.workingElements.indexOf(rev), 1);
-            this.workingElements.splice(this.workingElements.indexOf(fwd), 1);
-            this.selectedForwardElement = null;
-            this.selectedReverseElement = null;
-        },
-        /** create a pair Object from fwd and rev, adding the name attribute (will guess if not given) */
-        _createPair: function (fwd, rev, name) {
-            // ensure existance and don't pair something with itself
-            if (!(fwd && rev) || fwd === rev) {
-                throw new Error(`Bad pairing: ${[JSON.stringify(fwd), JSON.stringify(rev)]}`);
-            }
-            name = name || this._guessNameForPair(fwd, rev);
-            return { forward: fwd, name: name, reverse: rev };
-        },
-        /** try to find a good pair name for the given fwd and rev datasets */
-        _guessNameForPair: function (fwd, rev, removeExtensions) {
-            removeExtensions = removeExtensions ? removeExtensions : this.removeExtensions;
-            let fwdName = fwd.name;
-            let revName = rev.name;
-            const fwdNameFilter = fwdName.replace(new RegExp(this.forwardFilter), "");
-            const revNameFilter = revName.replace(new RegExp(this.reverseFilter), "");
-            let lcs = this._naiveStartingAndEndingLCS(fwdNameFilter, revNameFilter);
-            /** remove url prefix if files were uploaded by url */
-            const lastSlashIndex = lcs.lastIndexOf("/");
-            if (lastSlashIndex > 0) {
-                const urlprefix = lcs.slice(0, lastSlashIndex + 1);
-                lcs = lcs.replace(urlprefix, "");
-            }
-
-            if (removeExtensions) {
-                const lastDotIndex = lcs.lastIndexOf(".");
-                if (lastDotIndex > 0) {
-                    const extension = lcs.slice(lastDotIndex, lcs.length);
-                    lcs = lcs.replace(extension, "");
-                    fwdName = fwdName.replace(extension, "");
-                    revName = revName.replace(extension, "");
-                }
-            }
-            if (lcs.endsWith(".") || lcs.endsWith("_")) {
-                lcs = lcs.substring(0, lcs.length - 1);
-            }
-            return lcs || `${fwdName} & ${revName}`;
-        },
-        clickAutopair: function () {
-            // Unselect any selected elements
-            this.selectedForwardElement = null;
-            this.selectedReverseElement = null;
-            this.autoPair();
-            this.workingElements = this.workingElements.filter((e) => !this.pairedElements.includes(e));
-        },
-        clickUnpair: function (pair) {
-            return () => this._unpair(pair);
-        },
-        clickClearFilters: function () {
-            this.forwardFilter = "";
-            this.reverseFilter = "";
-        },
-        splitByFilter: function () {
-            var filters = [new RegExp(this.forwardFilter), new RegExp(this.reverseFilter)];
-            var split = [[], []];
-            this.workingElements.forEach((e) => {
-                filters.forEach((filter, i) => {
-                    if (filter.test(e.name)) {
-                        split[i].push(e);
-                    }
-                });
-            });
-            return split;
-        },
-        // ------------------------------------------------------------------------ auto pairing
-        /** two passes to automatically create pairs:
-         *  use both simpleAutoPair, then the fn mentioned in strategy
-         */
-        autoPair: function (strategy) {
-            var split = this.splitByFilter();
-            var paired = [];
-            if (this.twoPassAutopairing) {
-                var simplePaired = this.autopairSimple({
-                    listA: split[0],
-                    listB: split[1],
-                });
-                paired = simplePaired ? simplePaired : paired;
-                split = this.splitByFilter();
-            }
-
-            // uncomment to see printlns while running tests
-            //console.debug = function(){ console.log.apply( console, arguments ); };
-
-            // then try the remainder with something less strict
-            strategy = strategy || this.strategy;
-            split = this.splitByFilter();
-            var pairedStrategy = strategy.call(this, {
-                listA: split[0],
-                listB: split[1],
-            });
-            paired = pairedStrategy ? paired.concat(pairedStrategy) : paired;
-            return paired;
-        },
-        /** add a dataset to the unpaired list in it's proper order */
-        _addToUnpaired: function (dataset) {
-            // currently, unpaired is natural sorted by name, use binary search to find insertion point
-            var binSearchSortedIndex = (low, hi) => {
-                if (low === hi) {
-                    return low;
-                }
-
-                var mid = Math.floor((hi - low) / 2) + low;
-
-                var compared = naturalSort(dataset.name, this.workingElements[mid].name);
-
-                if (compared < 0) {
-                    return binSearchSortedIndex(low, mid);
-                } else if (compared > 0) {
-                    return binSearchSortedIndex(mid + 1, hi);
-                }
-                // walk the equal to find the last
-                while (this.workingElements[mid] && this.workingElements[mid].name === dataset.name) {
-                    mid++;
-                }
-                return mid;
-            };
-
-            this.workingElements.splice(binSearchSortedIndex(0, this.workingElements.length), 0, dataset);
-        },
-        /** unpair a pair, removing it from paired, and adding the fwd,rev datasets back into unpaired */
-        _unpair: function (pair) {
-            if (!pair) {
-                throw new Error(`Bad pair: ${JSON.stringify(pair)}`);
-            }
-            this.pairedElements.splice(this.pairedElements.indexOf(pair), 1);
-            this._addToUnpaired(pair.forward);
-            this._addToUnpaired(pair.reverse);
-
-            return pair;
-        },
-        /** unpair all paired datasets */
-        unpairAll: function () {
-            var pairs = [];
-            while (this.pairedElements.length) {
-                pairs.push(this._unpair(this.pairedElements[0], { silent: true }));
-            }
-        },
-        // ============================================================================
-        /** returns an autopair function that uses the provided options.match function */
-        autoPairFnBuilder: function (options) {
-            options = options || {};
-            options.createPair =
-                options.createPair ||
-                function _defaultCreatePair(params) {
-                    params = params || {};
-                    var a = params.listA.splice(params.indexA, 1)[0];
-                    var b = params.listB.splice(params.indexB, 1)[0];
-                    var aInBIndex = params.listB.indexOf(a);
-                    var bInAIndex = params.listA.indexOf(b);
-                    if (aInBIndex !== -1) {
-                        params.listB.splice(aInBIndex, 1);
-                    }
-                    if (bInAIndex !== -1) {
-                        params.listA.splice(bInAIndex, 1);
-                    }
-                    return this._pair(a, b, { silent: true });
-                };
-            // compile these here outside of the loop
-            var _regexps = [];
-            function getRegExps() {
-                if (!_regexps.length) {
-                    _regexps = [new RegExp(this.forwardFilter), new RegExp(this.reverseFilter)];
-                }
-                return _regexps;
-            }
-            // mangle params as needed
-            options.preprocessMatch =
-                options.preprocessMatch ||
-                function _defaultPreprocessMatch(params) {
-                    var regexps = getRegExps.call(this);
-                    return Object.assign(params, {
-                        matchTo: params.matchTo.name.replace(regexps[0], ""),
-                        possible: params.possible.name.replace(regexps[1], ""),
-                    });
-                };
-
-            return function _strategy(params) {
-                // console.debug("autopair _strategy ---------------------------");
-                params = params || {};
-                var listA = params.listA;
-                var listB = params.listB;
-                var indexA = 0;
-                var indexB;
-
-                var bestMatch = {
-                    score: 0.0,
-                    index: null,
-                };
-
-                var paired = [];
-                //console.debug( 'params:', JSON.stringify( params, null, '  ' ) );
-                // console.debug("starting list lens:", listA.length, listB.length);
-                // console.debug("bestMatch (starting):", JSON.stringify(bestMatch, null, "  "));
-
-                while (indexA < listA.length) {
-                    var matchTo = listA[indexA];
-                    bestMatch.score = 0.0;
-
-                    for (indexB = 0; indexB < listB.length; indexB++) {
-                        var possible = listB[indexB];
-                        // console.debug(`${indexA}:${matchTo.name}`);
-                        // console.debug(`${indexB}:${possible.name}`);
-
-                        // no matching with self
-                        if (listA[indexA] !== listB[indexB]) {
-                            bestMatch = options.match.call(
-                                this,
-                                options.preprocessMatch.call(this, {
-                                    matchTo: matchTo,
-                                    possible: possible,
-                                    index: indexB,
-                                    bestMatch: bestMatch,
-                                })
-                            );
-                            // console.debug("bestMatch:", JSON.stringify(bestMatch, null, "  "));
-                            if (bestMatch.score === 1.0) {
-                                // console.debug("breaking early due to perfect match");
-                                break;
-                            }
-                        }
-                    }
-                    var scoreThreshold = options.scoreThreshold.call(this);
-                    // console.debug("scoreThreshold:", scoreThreshold);
-                    // console.debug("bestMatch.score:", bestMatch.score);
-
-                    if (bestMatch.score >= scoreThreshold) {
-                        //console.debug( 'autoPairFnBuilder.strategy', listA[ indexA ].name, listB[ bestMatch.index ].name );
-                        paired.push(
-                            options.createPair.call(this, {
-                                listA: listA,
-                                indexA: indexA,
-                                listB: listB,
-                                indexB: bestMatch.index,
-                            })
-                        );
-                        //console.debug( 'list lens now:', listA.length, listB.length );
-                    } else {
-                        indexA += 1;
-                    }
-                    if (!listA.length || !listB.length) {
-                        return paired;
-                    }
-                }
-                // console.debug("paired:", JSON.stringify(paired, null, "  "));
-                // console.debug("autopair _strategy ---------------------------");
-                return paired;
-            };
-        },
-        changeFilters: function (filter) {
-            this.forwardFilter = this.commonFilters[filter][0];
-            this.reverseFilter = this.commonFilters[filter][1];
-        },
-        clickedCreate: function (collectionName) {
-            this.checkForDuplicates();
-            if (this.state == "build") {
-                this.$emit("clicked-create", this.workingElements, this.collectionName, this.hideSourceItems);
-                return this.creationFn(this.pairedElements, collectionName, this.hideSourceItems)
-                    .done(this.oncreate)
-                    .fail(() => {
-                        this.state = "error";
-                    });
-            }
-        },
-        checkForDuplicates: function () {
-            var existingPairNames = {};
-            this.duplicatePairNames = [];
-            var valid = true;
-            this.pairedElements.forEach((pair) => {
-                if (Object.prototype.hasOwnProperty.call(existingPairNames, pair.name)) {
-                    valid = false;
-                    this.duplicatePairNames.push(pair.name);
-                }
-                existingPairNames[pair.name] = true;
-            });
-            this.state = valid ? "build" : "duplicates";
-        },
-        stripExtension(name) {
-            return name.includes(".") ? name.substring(0, name.lastIndexOf(".")) : name;
-        },
-    },
-};
-</script>
 <style lang="scss">
 $fa-font-path: "../../../node_modules/@fortawesome/fontawesome-free/webfonts/";
 @import "~@fortawesome/fontawesome-free/scss/_variables";
@@ -1061,6 +1261,13 @@ li.dataset.paired {
 .column-datasets {
     list-style: none;
     overflow: hidden;
+    .dragged-pair {
+        border-top: 2px solid black;
+    }
+    .unpair-btn {
+        border: none;
+        flex-shrink: 0;
+    }
     .dataset {
         height: 32px;
         margin-top: 2px;
@@ -1076,39 +1283,26 @@ li.dataset.paired {
             border-color: grey;
         }
         &.paired {
-            margin-left: 34px;
-            margin-right: 34px;
+            white-space: nowrap;
+            overflow: hidden;
             border: 2px solid grey;
             background: #aff1af;
-            height: auto;
+            text-align: center;
             span {
                 display: inline-block;
-                overflow: visible !important;
             }
             .forward-dataset-name {
                 text-align: right;
                 border-right: 1px solid grey;
                 padding-right: 8px;
-                &:after {
-                    @extend .fas;
-                    margin-left: 8px;
-                    content: fa-content($fa-var-arrow-right);
-                }
             }
             .pair-name-column {
+                padding: 0 8px;
                 text-align: center;
-                .pair-name:hover {
-                    text-decoration: underline;
-                }
             }
             .reverse-dataset-name {
                 border-left: 1px solid grey;
                 padding-left: 8px;
-                &:before {
-                    @extend .fas;
-                    margin-right: 8px;
-                    content: fa-content($fa-var-arrow-left);
-                }
             }
         }
         &:hover {
@@ -1144,14 +1338,41 @@ li.dataset.paired {
     }
     .reverse-column {
         .dataset.unpaired {
-            text-align: right;
             margin-left: 32px;
         }
     }
+    .dataset.unpaired {
+        white-space: nowrap;
+        overflow: hidden;
+        box-sizing: border-box;
+        position: relative;
+        .element-name {
+            display: inline-block;
+            position: relative;
+            min-width: 100%;
+        }
+        &:hover {
+            .element-name.moves {
+                animation: move-right 1s linear forwards;
+            }
+        }
+    }
+    @keyframes move-right {
+        10% {
+            transform: translate(0, 0);
+            left: 0%;
+        }
+        100% {
+            transform: translate(-100%, 0);
+            left: 100%;
+        }
+    }
 }
+
 .column-header {
     width: 100%;
     text-align: center;
+    justify-content: end;
     .column-title {
         display: inline;
     }
@@ -1169,21 +1390,6 @@ li.dataset.paired {
     .column-datasets {
         width: 100%;
     }
-    .unpair-btn {
-        float: right;
-        margin-top: -32px;
-        width: 31px;
-        height: 32px;
-        //z-index: 1;
-        border-color: transparent;
-        //border-color: #BFBFBF;
-        background: transparent;
-        font-size: 120%;
-        &:hover {
-            border-color: #bfbfbf;
-            background: #dedede;
-        }
-    }
     .empty-message {
         text-align: center;
     }
diff --git a/client/src/components/Collections/PairedListCollectionCreatorModal.js b/client/src/components/Collections/PairedListCollectionCreatorModal.js
index cab346fc7c6..eaf9c4a9819 100644
--- a/client/src/components/Collections/PairedListCollectionCreatorModal.js
+++ b/client/src/components/Collections/PairedListCollectionCreatorModal.js
@@ -1,13 +1,19 @@
 import _l from "utils/localization";
 import Vue from "vue";
 
+import { orList } from "@/utils/strings";
+
 import { collectionCreatorModalSetup } from "./common/modal";
 
 import PairedListCollectionCreator from "./PairedListCollectionCreator.vue";
 
 function pairedListCollectionCreatorModal(elements, options) {
     options = options || {};
-    options.title = _l("Create a collection of paired datasets");
+    options.title = _l(
+        `Create a collection of ${options.fromSelection ? "selected" : ""} ${
+            options.extensions?.length ? orList(options.extensions) : ""
+        } dataset pairs`
+    );
     const { promise, showEl } = collectionCreatorModalSetup(options);
     var pairedListCollectionCreatorInstance = Vue.extend(PairedListCollectionCreator);
     var vm = document.createElement("div");
@@ -19,6 +25,8 @@ function pairedListCollectionCreatorModal(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 pairedListCollectionCreatorModal(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 createPairedListCollection(contents, defaultHideSourceItems) {
+function createPairedListCollection(contents) {
     const elements = contents.toJSON();
     const promise = pairedListCollectionCreatorModal(elements, {
-        defaultHideSourceItems: defaultHideSourceItems,
+        defaultHideSourceItems: contents.defaultHideSourceItems,
+        fromSelection: contents.fromSelection,
+        extensions: contents.extensions,
         creationFn: function (elements, name, hideSourceItems) {
             elements = elements.map((pair) => ({
                 collection_type: "paired",
diff --git a/client/src/components/Collections/UnpairedDatasetElementView.vue b/client/src/components/Collections/UnpairedDatasetElementView.vue
index 91494a082fe..553765c66b5 100644
--- a/client/src/components/Collections/UnpairedDatasetElementView.vue
+++ b/client/src/components/Collections/UnpairedDatasetElementView.vue
@@ -1,21 +1,66 @@
 <script setup lang="ts">
+import { computed, ref } from "vue";
+
+import type { HDASummary } from "@/api";
+import { useAnimationFrameSize } from "@/composables/sensors/animationFrameSize";
+
 interface Props {
-    // TODO: Define the type of the element
-    element: any;
+    element: HDASummary;
+    disabled?: boolean;
+    showExtension?: boolean;
+    showHid?: boolean;
 }
 
-defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+    disabled: false,
+    showExtension: true,
+    showHid: true,
+});
 
 const emit = defineEmits<{
-    // TODO: Define the type of the element
-    (event: "element-is-selected", element: any): void;
+    (event: "element-is-selected", element: HDASummary): void;
 }>();
+
+const unpairedElement = ref<HTMLElement | null>(null);
+const elementName = ref<HTMLElement | null>(null);
+
+const { width: parentWidth } = useAnimationFrameSize(unpairedElement);
+
+const childWidth = computed(() => elementName.value?.clientWidth);
+const shouldMoveElement = computed(() => {
+    if (childWidth.value && parentWidth.value && childWidth.value <= parentWidth.value) {
+        return false;
+    } else {
+        return true;
+    }
+});
+
+function getExtension(): string {
+    return "extension" in props.element && props.element.extension ? props.element.extension : "";
+}
 </script>
 
 <template>
-    <li class="dataset unpaired" @click="emit('element-is-selected', element)">
-        <label>
-            {{ element.name }}
-        </label>
+    <li
+        ref="unpairedElement"
+        class="dataset unpaired"
+        :class="{ disabled: props.disabled }"
+        :aria-disabled="props.disabled"
+        role="button"
+        tabindex="0"
+        @keydown.enter="emit('element-is-selected', props.element)"
+        @click="emit('element-is-selected', props.element)">
+        <span ref="elementName" class="element-name" :class="{ moves: shouldMoveElement }">
+            <span v-if="props.showHid">{{ props.element.hid }}:</span>
+            <strong>{{ props.element.name }}</strong>
+            <i v-if="props.showExtension"> ({{ getExtension() }}) </i>
+        </span>
     </li>
 </template>
+
+<style scoped>
+.disabled {
+    pointer-events: none;
+    opacity: 0.5;
+}
+</style>
diff --git a/client/src/utils/natural-sort.js b/client/src/utils/natural-sort.js
deleted file mode 100644
index c620f169163..00000000000
--- a/client/src/utils/natural-sort.js
+++ /dev/null
@@ -1,38 +0,0 @@
-// Alphanumeric/natural sort fn
-function naturalSort(a, b) {
-    // setup temp-scope variables for comparison evauluation
-    var re = /(-?[0-9.]+)/g;
-
-    var x = a.toString().toLowerCase() || "";
-    var y = b.toString().toLowerCase() || "";
-    var nC = String.fromCharCode(0);
-    var xN = x.replace(re, `${nC}$1${nC}`).split(nC);
-    var yN = y.replace(re, `${nC}$1${nC}`).split(nC);
-    var xD = new Date(x).getTime();
-    var yD = xD ? new Date(y).getTime() : null;
-    // natural sorting of dates
-    if (yD) {
-        if (xD < yD) {
-            return -1;
-        } else if (xD > yD) {
-            return 1;
-        }
-    }
-
-    // natural sorting through split numeric strings and default strings
-    var oFxNcL;
-
-    var oFyNcL;
-    for (var cLoc = 0, numS = Math.max(xN.length, yN.length); cLoc < numS; cLoc++) {
-        oFxNcL = parseFloat(xN[cLoc]) || xN[cLoc];
-        oFyNcL = parseFloat(yN[cLoc]) || yN[cLoc];
-        if (oFxNcL < oFyNcL) {
-            return -1;
-        } else if (oFxNcL > oFyNcL) {
-            return 1;
-        }
-    }
-    return 0;
-}
-
-export default naturalSort;
diff --git a/client/src/utils/naturalSort.ts b/client/src/utils/naturalSort.ts
new file mode 100644
index 00000000000..91a047b90dd
--- /dev/null
+++ b/client/src/utils/naturalSort.ts
@@ -0,0 +1,45 @@
+// Alphanumeric/natural sort fn
+export function naturalSort(a = "", b = ""): number {
+    // setup temp-scope variables for comparison evauluation
+    const re = /(-?[0-9.]+)/g;
+
+    const x = a.toString().toLowerCase() || "";
+    const y = b.toString().toLowerCase() || "";
+    const nC = String.fromCharCode(0);
+    const xN = x.replace(re, `${nC}$1${nC}`).split(nC);
+    const yN = y.replace(re, `${nC}$1${nC}`).split(nC);
+    const xD = new Date(x).getTime();
+    const yD = xD ? new Date(y).getTime() : null;
+    // natural sorting of dates
+    if (yD) {
+        if (xD < yD) {
+            return -1;
+        } else if (xD > yD) {
+            return 1;
+        }
+    }
+
+    // natural sorting through split numeric strings and default strings
+    let oFxNcL;
+
+    let oFyNcL;
+    for (let cLoc = 0, numS = Math.max(xN.length, yN.length); cLoc < numS; cLoc++) {
+        oFxNcL = parseFloat(xN[cLoc] || "") || xN[cLoc];
+        oFyNcL = parseFloat(yN[cLoc] || "") || yN[cLoc];
+
+        // Check if either part is undefined
+        if (oFxNcL === undefined) {
+            return -1;
+        }
+        if (oFyNcL === undefined) {
+            return 1;
+        }
+
+        if (oFxNcL < oFyNcL) {
+            return -1;
+        } else if (oFxNcL > oFyNcL) {
+            return 1;
+        }
+    }
+    return 0;
+}