From 6db028e0e5a7e696ea85cb92e958f53014ee5076 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Tue, 18 Feb 2025 12:20:35 -0500
Subject: [PATCH] Remove now unused PairedListCollectionCreator.

---
 .../PairedListCollectionCreator.vue           | 1243 -----------------
 1 file changed, 1243 deletions(-)
 delete mode 100644 client/src/components/Collections/PairedListCollectionCreator.vue

diff --git a/client/src/components/Collections/PairedListCollectionCreator.vue b/client/src/components/Collections/PairedListCollectionCreator.vue
deleted file mode 100644
index 65338e66c982..000000000000
--- a/client/src/components/Collections/PairedListCollectionCreator.vue
+++ /dev/null
@@ -1,1243 +0,0 @@
-<script setup lang="ts">
-import {
-    faAngleDown,
-    faAngleUp,
-    faExclamationCircle,
-    faLink,
-    faTimes,
-    faUnlink,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BButtonGroup, BCard, BCardBody, BCardHeader } from "bootstrap-vue";
-import { computed, ref, watch } from "vue";
-import draggable from "vuedraggable";
-
-import type { HDASummary, HistoryItemSummary } from "@/api";
-import { useConfirmDialog } from "@/composables/confirmDialog";
-import { Toast } from "@/composables/toast";
-import STATES from "@/mvc/dataset/states";
-import localize from "@/utils/localization";
-import { naturalSort } from "@/utils/naturalSort";
-
-import type { DatasetPair } from "../History/adapters/buildCollectionModal";
-import { useExtensionFiltering } from "./common/useExtensionFilter";
-import {
-    COMMON_FILTERS,
-    type CommonFiltersType,
-    createPair,
-    DEFAULT_FILTER,
-    guessInitialFilterType,
-    guessNameForPair,
-    type MatchingFunction,
-    matchOnlyIfExact,
-    matchOnPercentOfStartingAndEndingLCS,
-    splitElementsByFilter,
-    statelessAutoPairFnBuilder,
-} from "./pairing";
-
-import Heading from "../Common/Heading.vue";
-import PairedElementView from "./PairedElementView.vue";
-import UnpairedDatasetElementView from "./UnpairedDatasetElementView.vue";
-import CollectionCreator from "@/components/Collections/common/CollectionCreator.vue";
-
-const NOT_VALID_ELEMENT_MSG: string = localize("is not a valid element for this collection");
-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");
-
-interface Props {
-    historyId: string;
-    initialElements: HistoryItemSummary[];
-    defaultHideSourceItems?: boolean;
-    fromSelection?: boolean;
-    extensions?: string[];
-}
-
-const props = defineProps<Props>();
-
-const emit = defineEmits<{
-    (e: "on-create", workingElements: DatasetPair[], collectionName: string, hideSourceItems: boolean): void;
-    (e: "on-cancel"): void;
-}>();
-
-// 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 upload 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);
-const showPairingSection = ref(true);
-
-// 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);
-const atLeastOnePair = ref(true);
-
-// Filters
-const forwardFilter = ref(COMMON_FILTERS[DEFAULT_FILTER][0] || "");
-const reverseFilter = ref(COMMON_FILTERS[DEFAULT_FILTER][1] || "");
-const hasFilter = computed(() => forwardFilter.value || reverseFilter.value);
-
-// Autopairing
-const strategy = ref(autoPairLCS);
-const duplicatePairNames = ref<string[]>([]);
-
-const canClearFilters = computed(() => {
-    return forwardFilter.value || reverseFilter.value;
-});
-
-const canAutoPair = computed(() => {
-    return forwardFilter.value && reverseFilter.value && pairableElements.value.length > 0;
-});
-
-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 (!canAutoPair.value) {
-        variant = "secondary";
-        icon = faLink;
-        text = localize("Specify simple filters to divide datasets into forward and reverse reads for pairing.");
-    } else 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 = "secondary";
-        icon = faLink;
-        text = localize("Auto-pair possible based on current filters");
-    } else {
-        variant = "secondary";
-        icon = faLink;
-        text = localize("Click to attempt auto-pairing datasets");
-    }
-    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;
-});
-
-const { hasInvalidExtension } = useExtensionFiltering(props);
-
-function removeExtensionsToggle() {
-    removeExtensions.value = !removeExtensions.value;
-    generatedPairs.value.forEach((pair, index) => {
-        pair.name = _guessNameForPair(pair.forward, pair.reverse, removeExtensions.value);
-    });
-}
-
-watch(
-    () => props.initialElements,
-    () => {
-        // initialize; and then for any new/removed elements, sync working elements
-        _elementsSetUp();
-    },
-    { immediate: true }
-);
-
-/** 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)));
-
-    // TODO: Here, we do what we do in other 2 creators; we check the already built pairs
-    //       and sync them with the workingElements, ensuring that there aren't any elements
-    //       in built pairs that no longer exist in workingElements
-
-    // _ensureElementIds();
-    _validateElements();
-    _sortInitialList();
-    // attempt to autopair
-    if (props.fromSelection) {
-        autoPair();
-    }
-}
-
-function initialFiltersSet() {
-    const filterType = guessInitialFilterType(props.initialElements);
-    if (filterType == null) {
-        forwardFilter.value = "";
-        reverseFilter.value = "";
-    } else {
-        changeFilters(filterType);
-    }
-}
-
-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 === STATES.OK || STATES.NOT_READY_STATES.includes(element.state as string);
-    if (!validState) {
-        return localize("has errored, is paused, or is not accessible");
-    }
-    if (element.deleted || element.purged) {
-        return localize("has been deleted or purged");
-    }
-
-    // is the element's extension not a subtype of any of the required extensions?
-    if (hasInvalidExtension(element)) {
-        return localize(`has an invalid format: ${element.extension}`);
-    }
-    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) {
-    name = name || _guessNameForPair(fwd, rev);
-    return createPair(fwd, rev, name);
-}
-
-function _guessNameForPair(fwd: HDASummary, rev: HDASummary, willRemoveExtensions?: boolean) {
-    willRemoveExtensions = willRemoveExtensions ? willRemoveExtensions : removeExtensions.value;
-    return guessNameForPair(fwd, rev, forwardFilter.value, reverseFilter.value, willRemoveExtensions);
-}
-
-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() {
-    return splitElementsByFilter(workingElements.value, forwardFilter.value, reverseFilter.value);
-}
-// ===========================================================================
-
-// -------------------------------------------------------------- auto pairing
-/** Autopair by exact match */
-function autoPairSimple(params: { listA: HDASummary[]; listB: HDASummary[] }) {
-    return autoPairFnBuilder({
-        match: matchOnlyIfExact, // will only issue 1.0 scores if exact
-        scoreThreshold: 0.6,
-    })(params);
-}
-
-/** Autopair by longest common substrings scoring */
-function autoPairLCS(params: { listA: HDASummary[]; listB: HDASummary[] }) {
-    return autoPairFnBuilder({
-        match: matchOnPercentOfStartingAndEndingLCS,
-        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);
-}
-
-/**
- * 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: MatchingFunction; scoreThreshold?: number }) {
-    return function _strategy(params: { listA: HDASummary[]; listB: HDASummary[] }) {
-        const scoreThreshold = options.scoreThreshold ? options.scoreThreshold : MATCH_PERCENTAGE;
-        const pairs = statelessAutoPairFnBuilder<HDASummary>(
-            options.match,
-            scoreThreshold,
-            forwardFilter.value,
-            reverseFilter.value,
-            removeExtensions.value
-        )(params);
-        const paired: DatasetPair[] = [];
-        pairs.forEach((pair: { forward: HDASummary; reverse: HDASummary; name: string }) => {
-            paired.push(_pair(pair.forward, pair.reverse, { name: pair.name }));
-        });
-        return paired;
-    };
-}
-
-function changeFilters(filter: CommonFiltersType) {
-    forwardFilter.value = COMMON_FILTERS[filter][0] as string;
-    reverseFilter.value = COMMON_FILTERS[filter][1] as string;
-}
-
-function addUploadedFiles(files: HDASummary[]) {
-    // Any uploaded files are added to workingElements in _elementsSetUp
-    // The user will have to manually select the files to add them to the pair
-
-    // Check for validity of uploads
-    files.forEach((file) => {
-        const problem = _isElementInvalid(file);
-        if (problem) {
-            const invalidMsg = `${file.hid}: ${file.name} ${problem} and ${NOT_VALID_ELEMENT_MSG}`;
-            invalidElements.value.push(invalidMsg);
-            Toast.error(invalidMsg, localize("Uploaded item invalid for pair"));
-        }
-    });
-}
-
-const { confirm } = useConfirmDialog();
-
-async function clickedCreate(collectionName: string) {
-    checkForDuplicates();
-    atLeastOnePair.value = generatedPairs.value.length > 0;
-
-    let confirmed = false;
-    if (!atLeastOnePair.value) {
-        confirmed = await confirm("Are you sure you want to create a list with no pairs?", {
-            title: "Create an empty list of pairs",
-            okTitle: "Create",
-            okVariant: "primary",
-        });
-    }
-
-    if (state.value == "build" && (atLeastOnePair.value || confirmed)) {
-        emit("on-create", generatedPairs.value, collectionName, hideSourceItems.value);
-    }
-}
-
-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";
-}
-</script>
-
-<template>
-    <div class="paired-list-collection-creator">
-        <div v-if="state == 'error'">
-            <BAlert show variant="danger">
-                {{ ERROR_TEXT }}
-            </BAlert>
-        </div>
-        <div v-else>
-            <div v-if="fromSelection && returnInvalidElementsLength">
-                <BAlert show variant="warning" dismissible>
-                    {{ INVALID_HEADER }}
-                    <ul>
-                        <li v-for="problem in returnInvalidElements" :key="problem">
-                            {{ problem }}
-                        </li>
-                    </ul>
-                </BAlert>
-            </div>
-
-            <div v-if="!atLeastOnePair">
-                <BAlert show variant="warning" dismissible @dismissed="atLeastOnePair = true">
-                    {{ localize("At least one pair is needed for the list of pairs.") }}
-                    <span v-if="fromSelection">
-                        <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
-                            {{ localize("Cancel") }}
-                        </a>
-                        {{ localize("and reselect new elements.") }}
-                    </span>
-                </BAlert>
-            </div>
-
-            <div v-if="!autoPairsPossible">
-                <BAlert show variant="danger" dismissible @dismissed="autoPairsPossible = true">
-                    {{
-                        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."
-                        )
-                    }}
-                    <span v-if="fromSelection">
-                        <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
-                            {{ CANCEL_TEXT }}
-                        </a>
-                        {{ allInvalidElementsPartTwo }}
-                    </span>
-                </BAlert>
-            </div>
-
-            <div v-if="state == 'duplicates'">
-                <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>
-                    {{ localize("Please fix these duplicates and try again.") }}
-                </BAlert>
-            </div>
-
-            <CollectionCreator
-                :oncancel="() => emit('on-cancel')"
-                :history-id="props.historyId"
-                :hide-source-items="hideSourceItems"
-                render-extensions-toggle
-                :extensions-toggle="removeExtensions"
-                :extensions="extensions"
-                collection-type="list:paired"
-                :no-items="props.initialElements.length == 0 && !props.fromSelection"
-                :show-upload="!fromSelection"
-                @add-uploaded-files="addUploadedFiles"
-                @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>
-                        {{
-                            localize(
-                                [
-                                    "This interface allows you to build a new Galaxy list of pairs. List of pairs are an ordered list of ",
-                                    "individual dataset paired together in their own paired collection (often forward and reverse reads). ",
-                                    "These lists can be passed to tools and workflows in order to have analyses done on each member of ",
-                                    "the entire group. This interface allows you to create such a list of paired datasets, choose which datasets are paired, ",
-                                    "and re-order the final collection.",
-                                ].join("")
-                            )
-                        }}
-                    </p>
-                    <p>
-                        {{ localize("Unpaired datasets are shown in the") }}
-                        <i data-target=".unpaired-columns">
-                            {{ localize("unpaired section") }}
-                        </i>
-                        {{ "." }}
-                        {{ localize("Paired datasets are shown in the") }}
-                        <i data-target=".paired-columns">
-                            {{ localize("paired section") }}
-                        </i>
-                        {{ "." }}
-                    </p>
-                    <ul>
-                        {{
-                            localize("To pair datasets, you can:")
-                        }}
-                        <li>
-                            {{ localize("Click a dataset in the") }}
-                            <i data-target=".forward-column">
-                                {{ localize("forward column") }}
-                            </i>
-                            {{ localize("to select it then click a dataset in the") }}
-                            <i data-target=".reverse-column">
-                                {{ localize("reverse column") }}
-                            </i>
-                        </li>
-                        <li>
-                            {{
-                                localize(
-                                    "Click one of the Pair these datasets buttons in the middle column to pair the datasets in a particular row."
-                                )
-                            }}
-                        </li>
-                        <li>
-                            {{ localize("Click") }}
-                            <i data-target=".autopair-link">
-                                {{ localize("Auto-pair") }}
-                            </i>
-                            {{ localize("to have your datasets automatically paired based on name.") }}
-                        </li>
-                    </ul>
-                    <ul>
-                        {{
-                            localize("You can filter what is shown in the unpaired sections by:")
-                        }}
-                        <li>
-                            {{ localize("Entering partial dataset names in either the ") }}
-                            <i data-target=".forward-unpaired-filter input">
-                                {{ localize("forward filter") }}
-                            </i>
-                            {{ localize("or ") }}
-                            <i data-target=".reverse-unpaired-filter input">
-                                {{ localize("reverse filter") }}
-                            </i>
-                            {{ "." }}
-                        </li>
-                        <li>
-                            {{
-                                localize(
-                                    "Choosing from a list of preset filters by clicking the arrow beside the filter input."
-                                )
-                            }}
-                        </li>
-                        <li>
-                            {{ 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">
-                                {{ localize("MDN's JavaScript Regular Expression Tutorial") }}</a
-                            >
-                            {{ localize("Note: forward slashes (\\) are not needed.") }}
-                        </li>
-                        <li>
-                            {{ localize("Clearing the filters by clicking the ") }}
-                            <i data-target=".clear-filters-link">
-                                {{ localize("Clear filters link") }}
-                            </i>
-                            {{ "." }}
-                        </li>
-                    </ul>
-                    <p>
-                        {{ localize("To unpair individual dataset pairs, click the ") }}
-                        <i data-target=".unpair-btn">
-                            {{ localize("unpair buttons (") }}
-                            <span class="fa fa-unlink"></span>
-                            {{ ")" }}
-                        </i>
-                        {{ localize("Click the") }}
-                        <i data-target=".unpair-all-link">
-                            {{ localize("Unpair all") }}
-                        </i>
-                        {{ localize("link to unpair all pairs.") }}
-                    </p>
-                    <p>
-                        {{
-                            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">
-                            {{ localize("Remove file extensions from pair names?") }}
-                        </i>
-                        {{ localize("control.") }}
-                    </p>
-                    <p>
-                        {{ localize("Once your collection is complete, enter a") }}
-                        <i data-target=".collection-name">
-                            {{ localize("name") }}
-                        </i>
-                        {{ localize("and click ") }}
-                        <i data-target=".create-collection">
-                            {{ localize("Create list or pairs") }}
-                        </i>
-                        {{ localize(". (Note: you do not have to pair all unpaired datasets to finish.)") }}
-                    </p>
-                </template>
-                <template v-slot:middle-content>
-                    <div v-if="noElementsSelected">
-                        <BAlert show variant="warning" dismissible>
-                            {{ noElementsHeader }}
-                            {{ ALL_INVALID_ELEMENTS_PART_ONE }}
-                            <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
-                                {{ CANCEL_TEXT }}
-                            </a>
-                            {{ allInvalidElementsPartTwo }}
-                        </BAlert>
-                    </div>
-                    <div v-else-if="allElementsAreInvalid">
-                        <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 format(s) 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>
-                            {{ ALL_INVALID_ELEMENTS_PART_ONE }}
-                            <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
-                                {{ CANCEL_TEXT }}
-                            </a>
-                            {{ allInvalidElementsPartTwo }}
-                        </BAlert>
-                    </div>
-                    <div v-else-if="tooFewElementsSelected">
-                        <div v-if="returnInvalidElementsLength">
-                            <BAlert show variant="warning" dismissible>
-                                {{ INVALID_HEADER }}
-                                <ul>
-                                    <li v-for="problem in returnInvalidElements" :key="problem">
-                                        {{ problem }}
-                                    </li>
-                                </ul>
-                            </BAlert>
-                        </div>
-                        <BAlert show variant="warning" dismissible>
-                            {{ ALL_INVALID_ELEMENTS_PART_ONE }}
-                            <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
-                                {{ CANCEL_TEXT }}
-                            </a>
-                            {{ allInvalidElementsPartTwo }}
-                        </BAlert>
-                    </div>
-                    <div v-else>
-                        <BCard no-body class="mb-2">
-                            <BCardHeader
-                                class="d-flex justify-content-between align-items-center unselectable"
-                                role="button"
-                                @click="showPairingSection = !showPairingSection">
-                                <Heading size="sm">Pairing</Heading>
-                                <i class="text-muted">
-                                    {{ localize("Click to hide/show datasets to pair") }}
-                                    <FontAwesomeIcon
-                                        :icon="showPairingSection ? faAngleUp : faAngleDown"
-                                        size="lg"
-                                        fixed-width />
-                                </i>
-                            </BCardHeader>
-                            <BCardBody v-show="showPairingSection" class="pairing-split-parent">
-                                <div class="column-headers vertically-spaced flex-column-container">
-                                    <div class="forward-column flex-column column">
-                                        <div class="column-header">
-                                            <div class="column-title">
-                                                <span class="title">
-                                                    {{ numOfUnpairedForwardElements }}
-                                                    {{ localize("unpaired forward") }}
-                                                </span>
-                                                <span class="title-info unpaired-info">
-                                                    {{ numOfFilteredOutForwardElements }} {{ localize("filtered out") }}
-                                                </span>
-                                            </div>
-                                            <div
-                                                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="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"
-                                                        data-toggle="dropdown"
-                                                        aria-haspopup="true"
-                                                        aria-expanded="false"></button>
-                                                    <div class="dropdown-menu">
-                                                        <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">
-                                        <BButtonGroup vertical>
-                                            <BButton
-                                                class="clear-filters-link"
-                                                :disabled="!canClearFilters"
-                                                size="sm"
-                                                :variant="hasFilter ? 'danger' : 'secondary'"
-                                                @click="clickClearFilters">
-                                                <FontAwesomeIcon :icon="faTimes" fixed-width />
-                                                {{ localize("Clear Filters") }}
-                                            </BButton>
-                                            <BButton
-                                                class="autopair-link"
-                                                :disabled="!canAutoPair"
-                                                size="sm"
-                                                :title="autoPairButton.text"
-                                                :variant="autoPairButton.variant"
-                                                @click="clickAutopair">
-                                                <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 }}
-                                                    {{ localize("unpaired reverse") }}
-                                                </span>
-                                                <span class="title-info unpaired-info">
-                                                    {{ numOfFilteredOutReverseElements }}
-                                                    {{ localize("filtered out") }}</span
-                                                >
-                                            </div>
-                                            <div
-                                                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="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"
-                                                        data-toggle="dropdown"
-                                                        aria-haspopup="true"
-                                                        aria-expanded="false"></button>
-                                                    <div class="dropdown-menu">
-                                                        <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>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="pairing-split-child">
-                                    <div v-if="noUnpairedElementsDisplayed">
-                                        <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">
-                                            <ol class="column-datasets">
-                                                <UnpairedDatasetElementView
-                                                    v-for="element in forwardElements"
-                                                    :key="element.id"
-                                                    :class="{
-                                                        selected:
-                                                            selectedForwardElement &&
-                                                            element.id === selectedForwardElement.id,
-                                                    }"
-                                                    :disabled="element.id === selectedReverseElement?.id"
-                                                    :element="element"
-                                                    @element-is-selected="forwardElementSelected" />
-                                            </ol>
-                                        </div>
-                                        <div class="paired-column flex-column no-flex column truncate">
-                                            <ol
-                                                v-if="forwardFilter !== '' && reverseFilter !== ''"
-                                                class="column-datasets">
-                                                <li
-                                                    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)">
-                                                    {{ localize("Pair these datasets") }}
-                                                </li>
-                                            </ol>
-                                        </div>
-                                        <div class="reverse-column flex-column column truncate">
-                                            <ol class="column-datasets">
-                                                <UnpairedDatasetElementView
-                                                    v-for="element in reverseElements"
-                                                    :key="element.id"
-                                                    :class="{
-                                                        selected:
-                                                            selectedReverseElement &&
-                                                            element.id == selectedReverseElement.id,
-                                                    }"
-                                                    :disabled="element.id === selectedForwardElement?.id"
-                                                    :element="element"
-                                                    @element-is-selected="reverseElementSelected" />
-                                            </ol>
-                                        </div>
-                                    </div>
-                                </div>
-                            </BCardBody>
-                        </BCard>
-                        <div>
-                            <div class="pairing-split-child">
-                                <div class="column-header">
-                                    <div class="column-title paired-column-title" data-description="number of pairs">
-                                        <span class="title"> {{ numOfPairs }} {{ localize("pairs") }}</span>
-                                    </div>
-                                    <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="generatedPairs"
-                                            handle=".dataset"
-                                            chosen-class="dragged-pair">
-                                            <PairedElementView
-                                                v-for="pair in generatedPairs"
-                                                :key="`${pair.forward.id}-${pair.reverse.id}`"
-                                                :pair="pair"
-                                                @onPairRename="(name) => (pair.name = name)"
-                                                @onUnpair="clickUnpair(pair)" />
-                                        </draggable>
-                                    </ol>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-            </CollectionCreator>
-        </div>
-    </div>
-</template>
-
-<style lang="scss">
-$fa-font-path: "../../../node_modules/@fortawesome/fontawesome-free/webfonts/";
-@import "~@fortawesome/fontawesome-free/scss/_variables";
-@import "~@fortawesome/fontawesome-free/scss/solid";
-@import "~@fortawesome/fontawesome-free/scss/fontawesome";
-@import "~@fortawesome/fontawesome-free/scss/brands";
-@import "~bootstrap/scss/_functions.scss";
-@import "theme/blue.scss";
-.paired-column {
-    text-align: center;
-    // mess with these two to make center more/scss priority
-    width: 22%;
-}
-.column-headers {
-    margin-bottom: 8px;
-}
-.input-group {
-    width: auto;
-    border: none;
-}
-ol.column-datasets {
-    width: auto;
-}
-li.dataset.paired {
-    text-align: center;
-}
-.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;
-        &:last-of-type {
-            margin-bottom: 2px;
-        }
-        border: 1px solid lightgrey;
-        border-radius: 3px;
-        padding: 0 8px 0 8px;
-        line-height: 28px;
-        cursor: pointer;
-        &.unpaired {
-            border-color: grey;
-        }
-        &.paired {
-            white-space: nowrap;
-            overflow: hidden;
-            border: 2px solid grey;
-            background: $state-success-bg;
-            text-align: center;
-            span {
-                display: inline-block;
-            }
-            .forward-dataset-name {
-                text-align: right;
-                border-right: 1px solid grey;
-                padding-right: 8px;
-            }
-            .pair-name-column {
-                padding: 0 8px;
-                text-align: center;
-            }
-            .reverse-dataset-name {
-                border-left: 1px solid grey;
-                padding-left: 8px;
-            }
-        }
-        &:hover {
-            border-color: black;
-        }
-        &.selected {
-            border-color: black;
-            background: black;
-            color: white;
-            a {
-                color: white;
-            }
-        }
-    }
-}
-// ---- unpaired
-.unpaired-columns {
-    // @extend .flex-bordered-vertically;
-    .forward-column {
-        .dataset.unpaired {
-            margin-right: 32px;
-        }
-    }
-    .paired-column {
-        .dataset.unpaired {
-            border-color: lightgrey;
-            color: lightgrey;
-            &:hover {
-                border-color: black;
-                color: black;
-            }
-        }
-    }
-    .reverse-column {
-        .dataset.unpaired {
-            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;
-    }
-    & > *:not(:last-child) {
-        margin-right: 8px;
-    }
-    .remove-extensions-link {
-        display: none;
-    }
-}
-// ---- paired datasets
-.paired-columns {
-    // @extend .flex-bordered-vertically;
-    margin-bottom: 8px;
-    .column-datasets {
-        width: 100%;
-    }
-    .empty-message {
-        text-align: center;
-    }
-}
-.pairing-split-parent {
-    display: flex;
-    flex-direction: column;
-    min-height: 400px;
-}
-
-.pairing-split-child {
-    flex: 1;
-    overflow-y: auto;
-}
-</style>