From 2f034a51f87fc379f0b31708e9ce3a0a2c373184 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 13 Jan 2025 18:19:14 -0600
Subject: [PATCH] add filtering to `PairCollectionCreator`

---
 .../Collections/PairCollectionCreator.vue         | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Collections/PairCollectionCreator.vue b/client/src/components/Collections/PairCollectionCreator.vue
index 29f974997c23..c19c60eaec3a 100644
--- a/client/src/components/Collections/PairCollectionCreator.vue
+++ b/client/src/components/Collections/PairCollectionCreator.vue
@@ -14,6 +14,7 @@ import localize from "@/utils/localization";
 
 import type { DatasetPair } from "../History/adapters/buildCollectionModal";
 
+import DelayedInput from "../Common/DelayedInput.vue";
 import DatasetCollectionElementView from "./ListDatasetCollectionElementView.vue";
 import CollectionCreator from "@/components/Collections/common/CollectionCreator.vue";
 
@@ -44,6 +45,13 @@ const removeExtensions = ref(true);
 const initialSuggestedName = ref("");
 const invalidElements = ref<string[]>([]);
 const workingElements = ref<HDASummary[]>([]);
+const filterText = ref("");
+
+const filteredElements = computed(() => {
+    return workingElements.value.filter((element) => {
+        return `${element.hid}: ${element.name}`.toLowerCase().includes(filterText.value.toLowerCase());
+    });
+});
 
 /** If not `fromSelection`, the manually added elements that will become the pair */
 const inListElements = ref<SelectedDatasetPair>({ forward: undefined, reverse: undefined });
@@ -539,17 +547,19 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
                         </div>
 
                         <div v-if="!fromSelection">
+                            <DelayedInput v-model="filterText" placeholder="search datasets" :delay="800" />
                             <strong>
                                 {{
                                     localize("Manually select a forward and reverse dataset to create a dataset pair:")
                                 }}
                             </strong>
                             <div
+                                v-if="filteredElements.length"
                                 class="scroll-list-container"
                                 :class="{ 'scrolled-top': scrolledTop, 'scrolled-bottom': scrolledBottom }">
                                 <div ref="scrollableDiv" class="collection-elements">
                                     <DatasetCollectionElementView
-                                        v-for="element in workingElements"
+                                        v-for="element in filteredElements"
                                         :key="element.id"
                                         :class="{
                                             selected: [pairElements.forward, pairElements.reverse].includes(element),
@@ -561,6 +571,9 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
                                         @onRename="(name) => (element.name = name)" />
                                 </div>
                             </div>
+                            <BAlert v-else show variant="info">
+                                {{ localize(`No datasets found${filterText ? " matching '" + filterText + "'" : ""}`) }}
+                            </BAlert>
                         </div>
                     </div>
                 </template>