From f615aab04299826ff39ad0d06d64912c1ecb5ca8 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Wed, 4 Dec 2024 10:27:09 -0500
Subject: [PATCH 1/5] ListPairs Usability - don't auto-pair on empty filters.

Disable the button and make it clear in the message it has to do with empty filters.
---
 .../Collections/PairedListCollectionCreator.vue       | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Collections/PairedListCollectionCreator.vue b/client/src/components/Collections/PairedListCollectionCreator.vue
index 86e4914cb193..21996672ce24 100644
--- a/client/src/components/Collections/PairedListCollectionCreator.vue
+++ b/client/src/components/Collections/PairedListCollectionCreator.vue
@@ -91,6 +91,10 @@ const hasFilter = computed(() => forwardFilter.value || reverseFilter.value);
 const strategy = ref(autoPairLCS);
 const duplicatePairNames = ref<string[]>([]);
 
+const canAutoPair = computed(() => {
+    return forwardFilter.value && reverseFilter.value;
+});
+
 const forwardElements = computed<HDASummary[]>(() => {
     return filterElements(workingElements.value, forwardFilter.value);
 });
@@ -115,7 +119,11 @@ const autoPairButton = computed(() => {
     let variant;
     let icon;
     let text;
-    if (!firstAutoPairDone.value && pairableElements.value.length > 0) {
+    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");
@@ -1137,6 +1145,7 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
                                             </BButton>
                                             <BButton
                                                 class="autopair-link"
+                                                :disabled="!canAutoPair"
                                                 size="sm"
                                                 :title="autoPairButton.text"
                                                 :variant="autoPairButton.variant"

From c66997318fe0f1e11ab2f5d87f327dd6904b172d Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Wed, 4 Dec 2024 10:42:39 -0500
Subject: [PATCH 2/5] ListPairs Usability - use new Galaxy green for component.

How is a shade of green so evocative of a time.
---
 .../components/Collections/PairedListCollectionCreator.vue    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Collections/PairedListCollectionCreator.vue b/client/src/components/Collections/PairedListCollectionCreator.vue
index 21996672ce24..029b311cc111 100644
--- a/client/src/components/Collections/PairedListCollectionCreator.vue
+++ b/client/src/components/Collections/PairedListCollectionCreator.vue
@@ -1314,6 +1314,8 @@ $fa-font-path: "../../../node_modules/@fortawesome/fontawesome-free/webfonts/";
 @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
@@ -1360,7 +1362,7 @@ li.dataset.paired {
             white-space: nowrap;
             overflow: hidden;
             border: 2px solid grey;
-            background: #aff1af;
+            background: $state-success-bg;
             text-align: center;
             span {
                 display: inline-block;

From fcdd334f05c2057175a3537f4931621939dd4b98 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Wed, 4 Dec 2024 10:53:58 -0500
Subject: [PATCH 3/5] ListPairs Usability - don't attempt failed auto-pair
 initially.

It results in hiding all the data and a scary red messages when the user did literally nothing wrong. I think this is single biggest issue - it makes it seem like you cannot just manually pair these quickly.
---
 .../components/Collections/PairedListCollectionCreator.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Collections/PairedListCollectionCreator.vue b/client/src/components/Collections/PairedListCollectionCreator.vue
index 029b311cc111..c34f11a6a670 100644
--- a/client/src/components/Collections/PairedListCollectionCreator.vue
+++ b/client/src/components/Collections/PairedListCollectionCreator.vue
@@ -241,8 +241,11 @@ function initialFiltersSet() {
             illumina++;
         }
     });
-
-    if (illumina > dot12s && illumina > Rs) {
+    // if we cannot filter don't set an initial filter and hide all the data
+    if (illumina == 0 && dot12s == 0 && Rs == 0) {
+        forwardFilter.value = "";
+        reverseFilter.value = "";
+    } else if (illumina > dot12s && illumina > Rs) {
         changeFilters("illumina");
     } else if (dot12s > illumina && dot12s > Rs) {
         changeFilters("dot12s");

From c3a9bfe2a1708500f970bf6af4fb60de261a38b2 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Wed, 4 Dec 2024 11:05:55 -0500
Subject: [PATCH 4/5] ListPairs Usability - disable the clear filter button if
 nothing to clear.

---
 .../components/Collections/PairedListCollectionCreator.vue   | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/client/src/components/Collections/PairedListCollectionCreator.vue b/client/src/components/Collections/PairedListCollectionCreator.vue
index c34f11a6a670..8fe179718645 100644
--- a/client/src/components/Collections/PairedListCollectionCreator.vue
+++ b/client/src/components/Collections/PairedListCollectionCreator.vue
@@ -91,6 +91,10 @@ const hasFilter = computed(() => forwardFilter.value || reverseFilter.value);
 const strategy = ref(autoPairLCS);
 const duplicatePairNames = ref<string[]>([]);
 
+const canClearFilters = computed(() => {
+    return forwardFilter.value || reverseFilter.value;
+});
+
 const canAutoPair = computed(() => {
     return forwardFilter.value && reverseFilter.value;
 });
@@ -1140,6 +1144,7 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
                                         <BButtonGroup vertical>
                                             <BButton
                                                 class="clear-filters-link"
+                                                :disabled="!canClearFilters"
                                                 size="sm"
                                                 :variant="hasFilter ? 'danger' : 'secondary'"
                                                 @click="clickClearFilters">

From 64060f2b9040a9dbb09a91845fa06dc0a0eb7ffa Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Wed, 4 Dec 2024 16:08:52 -0500
Subject: [PATCH 5/5] ListPairsUsability - if auto-pairing seems to work just
 show a clean summary.

---
 .../PairedListCollectionCreator.vue           | 438 +++++++++---------
 .../Collections/PairedListSummary.vue         | 140 ++++++
 .../Collections/common/CollectionCreator.vue  |   5 +-
 3 files changed, 358 insertions(+), 225 deletions(-)
 create mode 100644 client/src/components/Collections/PairedListSummary.vue

diff --git a/client/src/components/Collections/PairedListCollectionCreator.vue b/client/src/components/Collections/PairedListCollectionCreator.vue
index 8fe179718645..1a3efe483d8e 100644
--- a/client/src/components/Collections/PairedListCollectionCreator.vue
+++ b/client/src/components/Collections/PairedListCollectionCreator.vue
@@ -24,6 +24,7 @@ import type { DatasetPair } from "../History/adapters/buildCollectionModal";
 
 import Heading from "../Common/Heading.vue";
 import PairedElementView from "./PairedElementView.vue";
+import PairedListSummary from "./PairedListSummary.vue";
 import UnpairedDatasetElementView from "./UnpairedDatasetElementView.vue";
 import CollectionCreator from "@/components/Collections/common/CollectionCreator.vue";
 
@@ -74,6 +75,7 @@ const twoPassAutoPairing = ref(true);
 const removeExtensions = ref(true);
 const firstAutoPairDone = ref(false);
 const showPairingSection = ref(true);
+const showSummary = ref(false);
 
 // Elements
 const workingElements = ref<HDASummary[]>([]);
@@ -226,8 +228,11 @@ function _elementsSetUp() {
     _validateElements();
     _sortInitialList();
     // attempt to autopair
-    if (props.fromSelection) {
-        autoPair();
+    autoPair();
+    if (generatedPairs.value.length > 0) {
+        showSummary.value = true;
+    } else {
+        showSummary.value = false;
     }
 }
 
@@ -822,6 +827,16 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
     }
     return fwdLCS + revLCS;
 }
+
+function correctPairing() {
+    showSummary.value = false;
+    showPairingSection.value = true;
+}
+
+function correctIdentifiers() {
+    showSummary.value = false;
+    showPairingSection.value = false;
+}
 </script>
 
 <template>
@@ -876,6 +891,7 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
                 :extensions-toggle="removeExtensions"
                 :extensions="extensions"
                 :no-items="props.initialElements.length == 0 && !props.fromSelection"
+                :show-help="!showSummary"
                 @add-uploaded-files="addUploadedFiles"
                 @onUpdateHideSourceItems="hideSourceItems = $event"
                 @clicked-create="clickedCreate"
@@ -1071,244 +1087,218 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
                         </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>
+                        <span v-if="!showSummary">
+                            <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>
-                                            <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 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="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 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="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 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>
-                                </div>
+                                </BCardBody>
+                            </BCard>
+                            <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 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>
-                            </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 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>
-                                    <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>
+                        </span>
+                        <BCard v-else no-body class="mb-2">
+                            <PairedListSummary
+                                :working-elements="workingElements"
+                                :generated-pairs="generatedPairs"
+                                @correctPairing="correctPairing"
+                                @correctIdentifiers="correctIdentifiers" />
+                        </BCard>
                     </div>
                 </template>
             </CollectionCreator>
diff --git a/client/src/components/Collections/PairedListSummary.vue b/client/src/components/Collections/PairedListSummary.vue
new file mode 100644
index 000000000000..eb883a082feb
--- /dev/null
+++ b/client/src/components/Collections/PairedListSummary.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { BCard, BCol, BContainer, BLink, BRow, BTable } from "bootstrap-vue";
+import { computed, ref } from "vue";
+
+import type { HDASummary } from "@/api";
+
+import type { DatasetPair } from "../History/adapters/buildCollectionModal";
+
+const hideUnmatched = ref(false);
+
+interface Props {
+    generatedPairs: DatasetPair[];
+    workingElements: HDASummary[];
+}
+
+const FIELDS = [
+    {
+        key: "identifier",
+        label: "List Identifier",
+    },
+    {
+        key: "forward",
+        label: "First Dataset",
+    },
+    {
+        key: "reverse",
+        label: "Second Dataset",
+    },
+];
+
+const UNMATCH_FIELDS = [
+    {
+        key: "name",
+        label: "Unpaired Dataset",
+    },
+];
+
+const pairedItems = computed(() => {
+    return props.generatedPairs.map((e) => {
+        return { identifier: e.name, forward: e.forward.name, reverse: e.reverse.name };
+    });
+});
+
+const unpairedItems = computed(() => {
+    return props.workingElements.map((e) => {
+        return { name: e.name };
+    });
+});
+
+const showUnpairedItems = computed(() => {
+    return !hideUnmatched.value && unpairedItems.value.length > 0;
+});
+
+const summaryText = computed(() => {
+    const numMatchedText = `Auto-matched ${props.generatedPairs.length} pair(s) of datasets from target datasets.`;
+    const numUnmatched = props.workingElements.length;
+    let numUnmatchedText = "";
+    if (numUnmatched > 0) {
+        numUnmatchedText = `${numUnmatched} dataset(s) were not paired and will not be included in the resulting list of pairs.`;
+    }
+    return `${numMatchedText} ${numUnmatchedText}`;
+});
+
+function clickHideUnmatched() {
+    hideUnmatched.value = true;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "correctPairing"): void;
+    (e: "correctIdentifiers"): void;
+}>();
+</script>
+
+<template>
+    <BCard no-body>
+        <BContainer style="max-width: 100%">
+            <BRow>
+                <BCol>
+                    <p>{{ summaryText }}</p>
+                </BCol>
+            </BRow>
+            <BRow cols="12">
+                <BCol :cols="showUnpairedItems ? 8 : 12">
+                    <BTable
+                        sticky-header
+                        striped
+                        hover
+                        :items="pairedItems"
+                        :fields="FIELDS"
+                        :outlined="true"
+                        class="summary-table"
+                        :caption-top="true"
+                        :bordered="true">
+                        <template v-slot:table-caption
+                            ><i class="text-muted"
+                                >These pairs will make up the list of pairs being created.</i
+                            ></template
+                        >
+                    </BTable>
+                </BCol>
+                <BCol v-if="showUnpairedItems" cols="4">
+                    <BTable
+                        sticky-header
+                        striped
+                        hover
+                        :items="unpairedItems"
+                        :fields="UNMATCH_FIELDS"
+                        thead-class="d-none"
+                        :outlined="true"
+                        class="summary-table"
+                        :caption-top="true"
+                        :bordered="true">
+                        <template v-slot:table-caption
+                            ><i class="text-muted"
+                                >These datasets could not be auto-paired and will not appear in the created collection.
+                                <BLink @click="clickHideUnmatched">Hide this.</BLink></i
+                            ></template
+                        >
+                    </BTable>
+                </BCol>
+            </BRow>
+            <BRow>
+                <BCol>
+                    If this doesn't look correct, it can be manually fixed. Just let us know how it is incorrect.
+                    <b><BLink @click="emit('correctPairing')">The pairing is wrong</BLink></b> (datasets were not
+                    matched properly or datasets were not included in the matches that should be) or
+                    <b
+                        ><BLink @click="emit('correctIdentifiers')"
+                            >the list identifiers were derived incorrectly</BLink
+                        ></b
+                    >.
+                </BCol>
+            </BRow>
+        </BContainer>
+    </BCard>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/client/src/components/Collections/common/CollectionCreator.vue b/client/src/components/Collections/common/CollectionCreator.vue
index 7e2401d0bd7b..3170a6b78d10 100644
--- a/client/src/components/Collections/common/CollectionCreator.vue
+++ b/client/src/components/Collections/common/CollectionCreator.vue
@@ -39,12 +39,15 @@ interface Props {
     extensions?: string[];
     extensionsToggle?: boolean;
     noItems?: boolean;
+    collectionType?: string;
+    showHelp?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     suggestedName: "",
     extensions: undefined,
     extensionsToggle: false,
+    showHelp: true,
 });
 
 const emit = defineEmits<{
@@ -146,7 +149,7 @@ watch(
             </div>
             <div v-else>
                 <div class="header flex-row no-flex">
-                    <div class="main-help well clear" :class="{ expanded: isExpanded }">
+                    <div v-if="showHelp" class="main-help well clear" :class="{ expanded: isExpanded }">
                         <a
                             class="more-help"
                             href="javascript:void(0);"