From 873ca9256b6cc27c8d3184449c80ba1e64102d58 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Thu, 16 Jan 2025 09:31:34 -0500
Subject: [PATCH 01/35] HARMONY-1978: Add ability to create/add new label to
 selected jobs

---
 .../app/views/workflow-ui/jobs/index.mustache.html    |  4 +++-
 services/harmony/public/js/workflow-ui/labels.js      | 11 +++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/services/harmony/app/views/workflow-ui/jobs/index.mustache.html b/services/harmony/app/views/workflow-ui/jobs/index.mustache.html
index c0dae40bb..8bf44abd6 100644
--- a/services/harmony/app/views/workflow-ui/jobs/index.mustache.html
+++ b/services/harmony/app/views/workflow-ui/jobs/index.mustache.html
@@ -48,7 +48,9 @@
                             <li class="mx-2 mb-2">
                                 <input type="text" class="form-control" id="label-search" placeholder="label name">
                             </li>
-                            <li id="no-match-li" class="fw-light text-center fs-6" style="display: none;"><i>no matches</i></li>
+                            <li id="no-match-li" class="fw-light text-center fs-6" style="display: none;">
+                                <a href="#" id="create-label-link">Create Label</a>
+                            </li>
                             <li>
                                 <ul id="labels-list">
                                 {{#labels}}
diff --git a/services/harmony/public/js/workflow-ui/labels.js b/services/harmony/public/js/workflow-ui/labels.js
index 04fed5957..1c997efd7 100644
--- a/services/harmony/public/js/workflow-ui/labels.js
+++ b/services/harmony/public/js/workflow-ui/labels.js
@@ -36,6 +36,9 @@ async function handleSubmitClick(event, method) {
     PubSub.publish(
       'row-state-change',
     );
+  } else if (res.status === 400) {
+    const responseText = await res.text();
+    toasts.showUpper(responseText);
   } else {
     toasts.showUpper('The update failed.');
   }
@@ -98,6 +101,11 @@ function filterLabelsList() {
     if (isMatch) visibleCount += 1;
   }
   document.getElementById('no-match-li').style.display = visibleCount === 0 ? '' : 'none';
+  if (visibleCount === 0) {
+    const createLabelLink = document.querySelector('#create-label-link');
+    createLabelLink.textContent = `Create/apply "${searchValue}"?`;
+    createLabelLink.setAttribute('data-value', searchValue);
+  }
 }
 
 /**
@@ -197,6 +205,9 @@ function bindEventListeners() {
     const selectedJobsCount = jobsTable.getJobIds().length;
     setLabelLinksDisabled(selectedJobsCount, labelLinks);
   });
+  document.querySelector('#create-label-link').addEventListener('click', (event) => {
+    handleSubmitClick(event, 'PUT');
+  });
 }
 
 /**

From 9d870ee6b00794ec0ba13d13f69e133e35edd7d5 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Thu, 16 Jan 2025 12:38:52 -0500
Subject: [PATCH 02/35] HARMONY-1978: Close dropdown and add some whitespace to
 create link

---
 services/harmony/app/views/workflow-ui/jobs/index.mustache.html | 2 +-
 services/harmony/public/js/workflow-ui/labels.js                | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/services/harmony/app/views/workflow-ui/jobs/index.mustache.html b/services/harmony/app/views/workflow-ui/jobs/index.mustache.html
index 8bf44abd6..34a46125e 100644
--- a/services/harmony/app/views/workflow-ui/jobs/index.mustache.html
+++ b/services/harmony/app/views/workflow-ui/jobs/index.mustache.html
@@ -49,7 +49,7 @@
                                 <input type="text" class="form-control" id="label-search" placeholder="label name">
                             </li>
                             <li id="no-match-li" class="fw-light text-center fs-6" style="display: none;">
-                                <a href="#" id="create-label-link">Create Label</a>
+                                &nbsp;<a href="#" id="create-label-link">Create Label</a>&nbsp;
                             </li>
                             <li>
                                 <ul id="labels-list">
diff --git a/services/harmony/public/js/workflow-ui/labels.js b/services/harmony/public/js/workflow-ui/labels.js
index 1c997efd7..8ef63df28 100644
--- a/services/harmony/public/js/workflow-ui/labels.js
+++ b/services/harmony/public/js/workflow-ui/labels.js
@@ -207,6 +207,7 @@ function bindEventListeners() {
   });
   document.querySelector('#create-label-link').addEventListener('click', (event) => {
     handleSubmitClick(event, 'PUT');
+    bsDropdown.hide();
   });
 }
 

From adb5942586ee900ce96441fb2383cb60a4333dc3 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Thu, 16 Jan 2025 12:56:02 -0500
Subject: [PATCH 03/35] HARMONY-1978: Update fixture

---
 services/harmony/test/workflow-ui/jobs.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/services/harmony/test/workflow-ui/jobs.html b/services/harmony/test/workflow-ui/jobs.html
index 2a87eac0a..0f9acdbe5 100644
--- a/services/harmony/test/workflow-ui/jobs.html
+++ b/services/harmony/test/workflow-ui/jobs.html
@@ -69,7 +69,9 @@
                             <li class="mx-2 mb-2">
                                 <input type="text" class="form-control" id="label-search" placeholder="label name">
                             </li>
-                            <li id="no-match-li" class="fw-light text-center fs-6" style="display: none;"><i>no matches</i></li>
+                            <li id="no-match-li" class="fw-light text-center fs-6" style="display: none;">
+                                &nbsp;<a href="#" id="create-label-link">Create Label</a>&nbsp;
+                            </li>
                             <li>
                                 <ul id="labels-list">
                                 <li class="label-li"><a class="dropdown-item label-item" name="blue" data-value="blue" href="#">blue</a></li>

From 723cb79788950d9ae18f7cb1a5235e29ca59b9c0 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Tue, 21 Jan 2025 13:14:27 -0500
Subject: [PATCH 04/35] HARMONY-1978: Add insertNewLabelAlphabetically

---
 .../workflow-ui/jobs/index.mustache.html      | 14 ++--
 .../public/css/workflow-ui/default.css        |  8 +++
 .../harmony/public/js/workflow-ui/labels.js   | 64 ++++++++++++++++++-
 3 files changed, 76 insertions(+), 10 deletions(-)

diff --git a/services/harmony/app/views/workflow-ui/jobs/index.mustache.html b/services/harmony/app/views/workflow-ui/jobs/index.mustache.html
index 34a46125e..6e0341781 100644
--- a/services/harmony/app/views/workflow-ui/jobs/index.mustache.html
+++ b/services/harmony/app/views/workflow-ui/jobs/index.mustache.html
@@ -41,17 +41,16 @@
                     <!-- job state change links will go here -->
                      {{^isAdminRoute}}
                      {{#jobs.length}}
-                     {{#labels.length}}
                     <li id="label-nav-item" class="nav-item dropstart d-none">
                         <a id="label-dropdown-a" class="nav-link dropdown-toggle py-0 px-2" data-bs-toggle="dropdown" data-bs-auto-close="outside" href="#" role="button" aria-expanded="false">label</a>
-                        <ul class="dropdown-menu mt-2">
-                            <li class="mx-2 mb-2">
-                                <input type="text" class="form-control" id="label-search" placeholder="label name">
+                        <ul id="label-dropdown-menu" class="dropdown-menu mt-2">
+                            <li class="mx-2">
+                                <input type="text" class="form-control" id="label-search" placeholder="label name" maxlength="255">
                             </li>
-                            <li id="no-match-li" class="fw-light text-center fs-6" style="display: none;">
-                                &nbsp;<a href="#" id="create-label-link">Create Label</a>&nbsp;
+                            <li id="no-match-li" class="fw-light text-center fs-6 mx-2 mt-2" style="display: none;">
+                                <a href="#" id="create-label-link">Create Label</a>
                             </li>
-                            <li>
+                            <li id="labels-li" style="display: none;">
                                 <ul id="labels-list">
                                 {{#labels}}
                                 <li class="label-li"><a class="dropdown-item label-item text-truncate" name="{{.}}" data-value="{{.}}" href="#">{{.}}</a></li>
@@ -60,7 +59,6 @@
                             </li>
                         </ul>
                     </li>
-                    {{/labels.length}}
                     {{/jobs.length}}
                     {{/isAdminRoute}}
                 </ul>
diff --git a/services/harmony/public/css/workflow-ui/default.css b/services/harmony/public/css/workflow-ui/default.css
index 62fc1508b..3cd994c31 100644
--- a/services/harmony/public/css/workflow-ui/default.css
+++ b/services/harmony/public/css/workflow-ui/default.css
@@ -74,4 +74,12 @@
 
 .label-li {
     max-width: 200px;
+}
+
+#label-dropdown-menu {
+    max-width: 40vw;
+}
+
+#create-label-link {
+    word-wrap: break-word;
 }
\ No newline at end of file
diff --git a/services/harmony/public/js/workflow-ui/labels.js b/services/harmony/public/js/workflow-ui/labels.js
index 8ef63df28..97bd2f384 100644
--- a/services/harmony/public/js/workflow-ui/labels.js
+++ b/services/harmony/public/js/workflow-ui/labels.js
@@ -3,6 +3,8 @@ import jobsTable from './jobs/jobs-table.js';
 import toasts from './toasts.js';
 import PubSub from '../pub-sub.js';
 
+// eslint-disable-next-line import/no-mutable-exports
+let labelsModule;
 let bsDropdown;
 let labelLinks;
 let labelDropdown;
@@ -42,6 +44,44 @@ async function handleSubmitClick(event, method) {
   } else {
     toasts.showUpper('The update failed.');
   }
+  if (res.status === 201) {
+    labelsModule.insertNewLabelAlphabetically(labelName);
+  }
+}
+
+/**
+ * Inserts a new label item into the labels list in alphabetical order.
+ * @param {string} labelName - The name/value of the label to insert
+ */
+function insertNewLabelAlphabetically(labelName) {
+  const labelsListElement = document.getElementById('labels-list');
+
+  // Create the new label element
+  const newLabelElement = document.createElement('li');
+  newLabelElement.className = 'label-li';
+  newLabelElement.innerHTML = `<a class="dropdown-item label-item text-truncate" name="${labelName}" data-value="${labelName}" href="#">${labelName}</a>`;
+
+  // Get all existing label items
+  const labelItems = Array.from(labelsListElement.getElementsByClassName('label-li'))
+    .filter((item) => !item.classList.contains('label-clone')); // Exclude promoted clones
+
+  // Find the correct position to insert the new label
+  const insertIndex = labelItems.findIndex((item) => {
+    const itemText = item.querySelector('a').getAttribute('data-value')
+      .toLowerCase();
+    return itemText > labelName.toLowerCase();
+  });
+
+  // If no position found (should be at end) or no existing labels
+  if (insertIndex === -1) {
+    labelsListElement.appendChild(newLabelElement);
+  } else {
+    labelsListElement.insertBefore(newLabelElement, labelItems[insertIndex]);
+  }
+  newLabelElement.addEventListener('click', (event) => {
+    bsDropdown.hide();
+    handleSubmitClick(event, 'PUT');
+  }, false);
 }
 
 /**
@@ -84,6 +124,17 @@ function demoteLabels() {
     .forEach((el) => el.classList.remove('label-promoted'));
 }
 
+/**
+ * Show or hide the list of labels.
+ * @param {boolean} show - true/false
+ */
+function showHideLabelsList(show) {
+  const labelsLi = document.getElementById('labels-li');
+  if (labelsLi) {
+    labelsLi.style.display = show ? '' : 'none';
+  }
+}
+
 /**
  * Filters the list of label items based on user input.
  */
@@ -100,22 +151,26 @@ function filterLabelsList() {
     labelItem.style.display = isMatch ? '' : 'none';
     if (isMatch) visibleCount += 1;
   }
-  document.getElementById('no-match-li').style.display = visibleCount === 0 ? '' : 'none';
+  document.getElementById('no-match-li').style.display = (visibleCount === 0 && searchValue !== '') ? '' : 'none';
   if (visibleCount === 0) {
     const createLabelLink = document.querySelector('#create-label-link');
     createLabelLink.textContent = `Create/apply "${searchValue}"?`;
     createLabelLink.setAttribute('data-value', searchValue);
   }
+  showHideLabelsList(visibleCount > 0);
 }
 
 /**
  * Unhides all label items.
  */
 function showAllLabels() {
+  let hasItems = false;
   const labelItems = document.querySelectorAll('#labels-list .label-li');
   for (const labelItem of labelItems) {
     labelItem.style.display = '';
+    hasItems = true;
   }
+  showHideLabelsList(hasItems);
 }
 
 /**
@@ -215,7 +270,7 @@ function bindEventListeners() {
  * The labeling dropdown object allows users to
  * add and remove labels from selected jobs.
  */
-export default {
+labelsModule = {
 
   /**
    * Initializes the labeling interactivity associated with
@@ -230,6 +285,8 @@ export default {
     if (labelDropdown) {
       bsDropdown = new bootstrap.Dropdown(labelDropdown);
     }
+    const hasItems = document.querySelectorAll('#labels-list .label-li').length > 0;
+    showHideLabelsList(hasItems);
     bindEventListeners();
     PubSub.subscribe(
       'job-selected',
@@ -244,4 +301,7 @@ export default {
   filterLabelsList,
   showAllLabels,
   toggleLabelNavVisibility,
+  insertNewLabelAlphabetically,
 };
+
+export default labelsModule;

From da27cb0edf44c8ddc20071cc894f4273a9eb85c6 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Tue, 21 Jan 2025 13:20:28 -0500
Subject: [PATCH 05/35] HARMONY-1978: Add insertNew param to handleSubmitClick

---
 services/harmony/public/js/workflow-ui/labels.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/services/harmony/public/js/workflow-ui/labels.js b/services/harmony/public/js/workflow-ui/labels.js
index 97bd2f384..2b5dafa43 100644
--- a/services/harmony/public/js/workflow-ui/labels.js
+++ b/services/harmony/public/js/workflow-ui/labels.js
@@ -16,8 +16,9 @@ let labelNavItem;
  * (hits relevant Harmony url, shows user the response).
  * @param {Event} event - the click event
  * @param {string} method - the HTTP method
+ * @param {boolean} insertNew - insert a list element for the new label
  */
-async function handleSubmitClick(event, method) {
+async function handleSubmitClick(event, method, insertNew) {
   event.preventDefault();
   const labelName = event.target.getAttribute('data-value');
   const jobIds = jobsTable.getJobIds();
@@ -41,12 +42,12 @@ async function handleSubmitClick(event, method) {
   } else if (res.status === 400) {
     const responseText = await res.text();
     toasts.showUpper(responseText);
+    if (insertNew) {
+      labelsModule.insertNewLabelAlphabetically(labelName);
+    }
   } else {
     toasts.showUpper('The update failed.');
   }
-  if (res.status === 201) {
-    labelsModule.insertNewLabelAlphabetically(labelName);
-  }
 }
 
 /**
@@ -261,7 +262,7 @@ function bindEventListeners() {
     setLabelLinksDisabled(selectedJobsCount, labelLinks);
   });
   document.querySelector('#create-label-link').addEventListener('click', (event) => {
-    handleSubmitClick(event, 'PUT');
+    handleSubmitClick(event, 'PUT', true);
     bsDropdown.hide();
   });
 }

From 2ea5726d3ff1978ccecface604ba5b265194a565 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Tue, 21 Jan 2025 14:07:27 -0500
Subject: [PATCH 06/35] HARMONY-1978: Extract function for post-response
 handling

---
 .../harmony/public/js/workflow-ui/labels.js   | 40 ++++++++++++-------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/services/harmony/public/js/workflow-ui/labels.js b/services/harmony/public/js/workflow-ui/labels.js
index 2b5dafa43..76cc7d70e 100644
--- a/services/harmony/public/js/workflow-ui/labels.js
+++ b/services/harmony/public/js/workflow-ui/labels.js
@@ -10,6 +10,30 @@ let labelLinks;
 let labelDropdown;
 let labelNavItem;
 
+/**
+ * Handle actions that are taken after adding/removing labels for jobs.
+ * @param {Response} res - the response from the labels endpoint
+ * @param {string} labelName - the name of the label that was added or removed
+ * @param {boolean} insertNew - whether to insert a new label list element
+ * @param {string} successMessage - success message to show the user
+ */
+async function handleLabelsResponse(res, labelName, insertNew, successMessage) {
+  if (res.status === 201 || res.status === 204) {
+    if (insertNew) {
+      labelsModule.insertNewLabelAlphabetically(labelName);
+    }
+    toasts.showUpper(successMessage);
+    PubSub.publish(
+      'row-state-change',
+    );
+  } else if (res.status === 400) {
+    const responseText = await res.text();
+    toasts.showUpper(responseText);
+  } else {
+    toasts.showUpper('The update failed.');
+  }
+}
+
 /**
  * Responds to a submit link click event by adding or removing
  * a label.
@@ -34,20 +58,8 @@ async function handleSubmitClick(event, method, insertNew) {
     body: JSON.stringify({ jobId: jobIds, label: [labelName] }),
   });
   action = method === 'PUT' ? 'Added' : 'Removed';
-  if (res.status === 201 || res.status === 204) {
-    toasts.showUpper(`${action} "${labelName}" label for ${jobIds.length} job${postfix}.`);
-    PubSub.publish(
-      'row-state-change',
-    );
-  } else if (res.status === 400) {
-    const responseText = await res.text();
-    toasts.showUpper(responseText);
-    if (insertNew) {
-      labelsModule.insertNewLabelAlphabetically(labelName);
-    }
-  } else {
-    toasts.showUpper('The update failed.');
-  }
+  const successMessage = `${action} "${labelName}" label for ${jobIds.length} job${postfix}.`;
+  await handleLabelsResponse(res, labelName, insertNew, successMessage);
 }
 
 /**

From 015140b3f581fd6a3bd17df617eb8410da0df028 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Tue, 21 Jan 2025 14:51:17 -0500
Subject: [PATCH 07/35] HARMONY-1978: Add some tests for label creation logic

---
 .../harmony/public/js/workflow-ui/labels.js   |  1 +
 .../harmony/public/js/workflow-ui/toasts.js   | 12 +++++++----
 .../harmony/test/workflow-ui/labels-js.ts     | 20 +++++++++++++++++++
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/services/harmony/public/js/workflow-ui/labels.js b/services/harmony/public/js/workflow-ui/labels.js
index 76cc7d70e..6993c8782 100644
--- a/services/harmony/public/js/workflow-ui/labels.js
+++ b/services/harmony/public/js/workflow-ui/labels.js
@@ -315,6 +315,7 @@ labelsModule = {
   showAllLabels,
   toggleLabelNavVisibility,
   insertNewLabelAlphabetically,
+  handleLabelsResponse,
 };
 
 export default labelsModule;
diff --git a/services/harmony/public/js/workflow-ui/toasts.js b/services/harmony/public/js/workflow-ui/toasts.js
index bc2f6a54b..64ac0a531 100644
--- a/services/harmony/public/js/workflow-ui/toasts.js
+++ b/services/harmony/public/js/workflow-ui/toasts.js
@@ -45,8 +45,10 @@ export default {
    * @param {string} text - the text for the toast
    */
   showUpper(text) {
-    setToastText(upperToastId, text);
-    toastObj[upperToastId].show();
+    if (Object.keys(toastObj).length) {
+      setToastText(upperToastId, text);
+      toastObj[upperToastId].show();
+    }
   },
 
   /**
@@ -54,7 +56,9 @@ export default {
    * @param {string} text - the text for the toast
    */
   showLower(text) {
-    setToastText(lowerToastId, text);
-    toastObj[lowerToastId].show();
+    if (Object.keys(toastObj).length) {
+      setToastText(lowerToastId, text);
+      toastObj[lowerToastId].show();
+    }
   },
 };
diff --git a/services/harmony/test/workflow-ui/labels-js.ts b/services/harmony/test/workflow-ui/labels-js.ts
index 9b9132ce0..fbb156275 100644
--- a/services/harmony/test/workflow-ui/labels-js.ts
+++ b/services/harmony/test/workflow-ui/labels-js.ts
@@ -10,6 +10,26 @@ beforeEach(async () => {
 });
 
 describe('labels.js', () => { 
+  describe('handleLabelsResponse', () => {
+    it('inserts a new label when insertNew is true', async () => {
+      await Labels.handleLabelsResponse({ status: 201 }, 'a new one', true, 'it worked!');
+      const labelsListElement = document.getElementById('labels-list');
+      expect(labelsListElement.querySelector('a[name="a new one"]')).to.not.be.undefined;
+    });
+  });
+  describe('insertNewLabelAlphabetically', () => {
+    it('inserts a new label alphabetically, in the proper position', async () => {
+      await Labels.insertNewLabelAlphabetically('purple');
+      const labelsListElement = document.getElementById('labels-list');
+      const labelItems = Array.from(labelsListElement.getElementsByClassName('label-li'));
+      const insertIndex = labelItems.findIndex((item) => {
+        const itemText = item.querySelector('a').getAttribute('data-value')
+          .toLowerCase();
+        return itemText === 'purple';
+      });
+      expect(insertIndex).to.equal(2);
+    });
+  });
   describe('promoteLabels', () => {
     it('promotes the given list of labels', () => {
       const labelsListElement = document.getElementById('labels-list');

From 02425a5d0892ed83923c84e3a18786c898153ff2 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Tue, 21 Jan 2025 15:11:05 -0500
Subject: [PATCH 08/35] HARMONY-1978: Test textContent of create-label-link

---
 services/harmony/test/workflow-ui/labels-js.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/services/harmony/test/workflow-ui/labels-js.ts b/services/harmony/test/workflow-ui/labels-js.ts
index fbb156275..1f6c6ab84 100644
--- a/services/harmony/test/workflow-ui/labels-js.ts
+++ b/services/harmony/test/workflow-ui/labels-js.ts
@@ -103,6 +103,7 @@ describe('labels.js', () => {
       expect(greenLi.style.display).to.equal('none');
       expect(yellowLi.style.display).to.equal('none');
       expect(noMatchLi.style.display).to.not.equal('none');
+      expect(noMatchLi.querySelector('#create-label-link').textContent).to.equal('Create/apply "bluez"?');
     });
   });
   describe('showAllLabels', () => {

From 74bf3055fcf88688a61f160118123eec670e5c01 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Tue, 21 Jan 2025 15:16:16 -0500
Subject: [PATCH 09/35] HARMONY-1978: Test labels-li display

---
 services/harmony/test/workflow-ui/jobs.html    | 2 +-
 services/harmony/test/workflow-ui/labels-js.ts | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/services/harmony/test/workflow-ui/jobs.html b/services/harmony/test/workflow-ui/jobs.html
index 0f9acdbe5..0433970d2 100644
--- a/services/harmony/test/workflow-ui/jobs.html
+++ b/services/harmony/test/workflow-ui/jobs.html
@@ -72,7 +72,7 @@
                             <li id="no-match-li" class="fw-light text-center fs-6" style="display: none;">
                                 &nbsp;<a href="#" id="create-label-link">Create Label</a>&nbsp;
                             </li>
-                            <li>
+                            <li id="labels-li" style="display: none;">
                                 <ul id="labels-list">
                                 <li class="label-li"><a class="dropdown-item label-item" name="blue" data-value="blue" href="#">blue</a></li>
                                 <li class="label-li"><a class="dropdown-item label-item" name="green" data-value="green" href="#">green</a></li>
diff --git a/services/harmony/test/workflow-ui/labels-js.ts b/services/harmony/test/workflow-ui/labels-js.ts
index 1f6c6ab84..cd4666fd6 100644
--- a/services/harmony/test/workflow-ui/labels-js.ts
+++ b/services/harmony/test/workflow-ui/labels-js.ts
@@ -90,6 +90,7 @@ describe('labels.js', () => {
       expect(blueLi.style.display).to.not.equal('none');
       expect(greenLi.style.display).to.equal('none');
       expect(yellowLi.style.display).to.equal('none');
+      expect(document.getElementById('labels-li').style.display).to.equal('');
     });
     it('shows a no matches list item when the search input value does not match any labels', () => {
       (document.querySelector('#label-search') as HTMLInputElement).value = 'bluez';
@@ -104,6 +105,7 @@ describe('labels.js', () => {
       expect(yellowLi.style.display).to.equal('none');
       expect(noMatchLi.style.display).to.not.equal('none');
       expect(noMatchLi.querySelector('#create-label-link').textContent).to.equal('Create/apply "bluez"?');
+      expect(document.getElementById('labels-li').style.display).to.equal('none');
     });
   });
   describe('showAllLabels', () => {

From aa1335ff17bdfb35e7248d6c343d1f9932214735 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Tue, 21 Jan 2025 15:23:05 -0500
Subject: [PATCH 10/35] HARMONY-1978: Test adding then removing a search value

---
 .../harmony/test/workflow-ui/labels-js.ts     | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/services/harmony/test/workflow-ui/labels-js.ts b/services/harmony/test/workflow-ui/labels-js.ts
index cd4666fd6..e21415871 100644
--- a/services/harmony/test/workflow-ui/labels-js.ts
+++ b/services/harmony/test/workflow-ui/labels-js.ts
@@ -107,6 +107,25 @@ describe('labels.js', () => {
       expect(noMatchLi.querySelector('#create-label-link').textContent).to.equal('Create/apply "bluez"?');
       expect(document.getElementById('labels-li').style.display).to.equal('none');
     });
+    it('hides labels that do not match and subsequently unhides them when the search value is removed', () => {
+      (document.querySelector('#label-search') as HTMLInputElement).value = 'blu';
+      Labels.filterLabelsList();
+      const labelsListElement = document.getElementById('labels-list');
+      const blueLi = labelsListElement.querySelector('a[name="blue"]').closest('li');
+      const greenLi = labelsListElement.querySelector('a[name="green"]').closest('li');
+      const yellowLi = labelsListElement.querySelector('a[name="yellow"]').closest('li');
+      expect(blueLi.style.display).to.not.equal('none');
+      expect(greenLi.style.display).to.equal('none');
+      expect(yellowLi.style.display).to.equal('none');
+      expect(document.getElementById('labels-li').style.display).to.equal('');
+      
+      (document.querySelector('#label-search') as HTMLInputElement).value = '';
+      Labels.filterLabelsList();
+      expect(blueLi.style.display).to.not.equal('none');
+      expect(greenLi.style.display).to.not.equal('none');
+      expect(yellowLi.style.display).to.not.equal('none');
+      expect(document.getElementById('labels-li').style.display).to.equal('');
+    });
   });
   describe('showAllLabels', () => {
     it('unhides all labels', () => {

From dc97dd951ac22274bd4c81ee57634d1631d54792 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Wed, 22 Jan 2025 09:17:57 -0500
Subject: [PATCH 11/35] HARMONY-1978: Move showAllLabels to dropdown hidden
 action

---
 services/harmony/public/js/workflow-ui/labels.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/services/harmony/public/js/workflow-ui/labels.js b/services/harmony/public/js/workflow-ui/labels.js
index 6993c8782..ddcc1658c 100644
--- a/services/harmony/public/js/workflow-ui/labels.js
+++ b/services/harmony/public/js/workflow-ui/labels.js
@@ -265,10 +265,10 @@ function bindEventListeners() {
     demoteLabels();
     setLabelLinksEnabled(labelLinks);
     document.getElementById('label-search').value = '';
-    showAllLabels();
     document.getElementById('no-match-li').style.display = 'none';
   });
   labelDropdown.addEventListener('show.bs.dropdown', () => {
+    showAllLabels();
     promoteLabels(getLabelsIntersectionForSelectedJobs());
     const selectedJobsCount = jobsTable.getJobIds().length;
     setLabelLinksDisabled(selectedJobsCount, labelLinks);

From c9ba1ea1d535cf922df491d2fafcda54c6a0fd02 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Wed, 22 Jan 2025 09:45:30 -0500
Subject: [PATCH 12/35] HARMONY-1978: Remove comma validation

---
 services/harmony/app/middleware/label.ts | 7 -------
 services/harmony/app/models/label.ts     | 4 ++--
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/services/harmony/app/middleware/label.ts b/services/harmony/app/middleware/label.ts
index 77d516f4a..a786a18b4 100644
--- a/services/harmony/app/middleware/label.ts
+++ b/services/harmony/app/middleware/label.ts
@@ -23,13 +23,6 @@ export default async function handleLabelParameter(
   // If 'label' exists, convert it to an array (if not already) and assign it to 'label' in the body
   if (label) {
     const labels = parseMultiValueParameter(label);
-    for (const lbl of labels) {
-      if (lbl.indexOf(',') > -1) {
-        res.status(400);
-        res.send('Labels cannot contain commas');
-        return;
-      }
-    }
     const normalizedLabels = labels.map(normalizeLabel);
     for (const lbl of normalizedLabels) {
       if (lbl === '') {
diff --git a/services/harmony/app/models/label.ts b/services/harmony/app/models/label.ts
index 7b7337d99..71741a72e 100644
--- a/services/harmony/app/models/label.ts
+++ b/services/harmony/app/models/label.ts
@@ -31,10 +31,10 @@ export function checkLabel(label: string): string {
  * Trim the whitespace from the beginning/end of a label and convert it to lowercase
  *
  * @param label - the label to normalize
- * @returns - label converted to lowercase with leading/trailing whitespace trimmed and commas removed
+ * @returns - label converted to lowercase with leading/trailing whitespace trimmed
  */
 export function normalizeLabel(label: string): string {
-  return label.trim().toLowerCase().replaceAll(',', '');
+  return label.trim().toLowerCase();
 }
 
 /**

From 84df899be0a0b22be1ed1abe56dcbe9cfe2ad68c Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Wed, 22 Jan 2025 10:59:03 -0500
Subject: [PATCH 13/35] HARMONY-1978: Remove comma validation

---
 services/harmony/test/parameters/label.ts | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/services/harmony/test/parameters/label.ts b/services/harmony/test/parameters/label.ts
index 45dab2d36..534226410 100644
--- a/services/harmony/test/parameters/label.ts
+++ b/services/harmony/test/parameters/label.ts
@@ -175,18 +175,5 @@ describe('labels', function () {
         expect(job.job.labels).deep.equal(['first', 'second']);
       });
     });
-
-    describe('when attempting to include a comma within a label', async function () {
-      const label = ['good', 'bad,comma'];
-      hookPartials[apiType](label);
-
-      it('returns a 400 status code for the request', async function () {
-        expect(this.res.status).to.equal(400);
-      });
-
-      it('returns a meaningful error message', async function () {
-        expect(this.res.text).to.include('Labels cannot contain commas');
-      });
-    });
   }
 });
\ No newline at end of file

From 0cc8509990d25aafc3fdca2323839f9c873801c1 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Wed, 22 Jan 2025 10:59:39 -0500
Subject: [PATCH 14/35] HARMONY-1978: Remove comma validation

---
 services/harmony/test/parameters/label.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/services/harmony/test/parameters/label.ts b/services/harmony/test/parameters/label.ts
index 534226410..3d9a01877 100644
--- a/services/harmony/test/parameters/label.ts
+++ b/services/harmony/test/parameters/label.ts
@@ -175,5 +175,15 @@ describe('labels', function () {
         expect(job.job.labels).deep.equal(['first', 'second']);
       });
     });
+
+    describe('when attempting to include a comma within a label', async function () {
+      const label = ['good', 'ok,comma'];
+      hookPartials[apiType](label);
+      hookRedirect('joe');
+
+      it('returns a 200 status code for the request', async function () {
+        expect(this.res.status).to.equal(200);
+      });
+    });
   }
 });
\ No newline at end of file

From c2c5b1263d4eeaf5bb9647d265fd998da3db76a5 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Thu, 23 Jan 2025 11:03:21 -0500
Subject: [PATCH 15/35] HARMONY-1978: WIP - Dynamically insert tag in filter
 input after creation

---
 services/harmony/app/frontends/labels.ts      |  4 +--
 .../public/js/workflow-ui/jobs/index.js       |  4 +--
 .../public/js/workflow-ui/jobs/jobs-table.js  | 27 ++++++++++----
 .../harmony/public/js/workflow-ui/labels.js   | 36 +++++++++++++------
 4 files changed, 49 insertions(+), 22 deletions(-)

diff --git a/services/harmony/app/frontends/labels.ts b/services/harmony/app/frontends/labels.ts
index 21e81eaf2..aa23a8fc5 100644
--- a/services/harmony/app/frontends/labels.ts
+++ b/services/harmony/app/frontends/labels.ts
@@ -14,7 +14,7 @@ import { keysToLowerCase } from '../util/object';
  * @param req - The request sent by the client
  * @param res - The response to send to the client
  * @param next - The next function in the call chain
- * @returns Resolves when the request is complete
+ * @returns Resolves when the request is complete, returning labels on success
  */
 export async function addJobLabels(
   req: HarmonyRequest, res: Response, next: NextFunction,
@@ -28,7 +28,7 @@ export async function addJobLabels(
     });
 
     res.status(201);
-    res.send('OK');
+    res.send({ labels: req.body.label });
   } catch (e) {
     req.context.logger.error(e);
     next(e);
diff --git a/services/harmony/public/js/workflow-ui/jobs/index.js b/services/harmony/public/js/workflow-ui/jobs/index.js
index f33990500..e85708e97 100644
--- a/services/harmony/public/js/workflow-ui/jobs/index.js
+++ b/services/harmony/public/js/workflow-ui/jobs/index.js
@@ -26,7 +26,7 @@ if (isAdminRoute) {
 params.dateKind = document.getElementById('dateKindUpdated').checked ? 'updatedAt' : 'createdAt';
 params.sortGranules = document.getElementById('sort-granules').value;
 
-jobsTable.init(params);
+const tagInput = jobsTable.init(params);
 
 const jobStatusLinks = new JobsStatusChangeLinks();
 jobStatusLinks.init('job-state-links-container', 'job-selected');
@@ -35,5 +35,5 @@ toasts.init();
 
 const labelDropdown = document.getElementById('label-dropdown-a');
 if (labelDropdown) {
-  labels.init();
+  labels.init(tagInput);
 }
diff --git a/services/harmony/public/js/workflow-ui/jobs/jobs-table.js b/services/harmony/public/js/workflow-ui/jobs/jobs-table.js
index b04405cc3..22b590c71 100644
--- a/services/harmony/public/js/workflow-ui/jobs/jobs-table.js
+++ b/services/harmony/public/js/workflow-ui/jobs/jobs-table.js
@@ -9,12 +9,13 @@ let statuses = [];
 
 /**
  * Build the jobs filter with filter facets like 'status' and 'user'.
-  * @param {string} currentUser - the current Harmony user
-  * @param {string[]} services - service names from services.yml
-  * @param {string[]} providers - array of provider ids
-  * @param {string[]} labels - known job labels
-  * @param {boolean} isAdminRoute - whether the current page is /admin/...
-  * @param {object[]} tableFilter - initial tags that will populate the input
+ * @param {string} currentUser - the current Harmony user
+ * @param {string[]} services - service names from services.yml
+ * @param {string[]} providers - array of provider ids
+ * @param {string[]} labels - known job labels
+ * @param {boolean} isAdminRoute - whether the current page is /admin/...
+ * @param {object[]} tableFilter - initial tags that will populate the input
+ * @returns the tag input instance
  */
 function initFilter(currentUser, services, providers, labels, isAdminRoute, tableFilter) {
   const filterInput = document.querySelector('input[name="tableFilter"]');
@@ -63,6 +64,8 @@ function initFilter(currentUser, services, providers, labels, isAdminRoute, tabl
   });
   const initialTags = JSON.parse(tableFilter);
   tagInput.addTags(initialTags);
+
+  return tagInput;
 }
 
 /**
@@ -231,6 +234,7 @@ const jobsTable = {
    * tzOffsetMinutes - offset from UTC
    * dateKind - updatedAt or createdAt
    * sortGranules - sort the rows ascending ('asc') or descending ('desc')
+   * @returns the tag input instance
    */
   async init(params) {
     PubSub.subscribe(
@@ -238,10 +242,19 @@ const jobsTable = {
       async () => loadRows(params),
     );
     formatDates('.date-td');
-    initFilter(params.currentUser, params.services, params.providers, params.labels, params.isAdminRoute, params.tableFilter);
+    const tagInput = initFilter(
+      params.currentUser,
+      params.services,
+      params.providers,
+      params.labels,
+      params.isAdminRoute,
+      params.tableFilter,
+    );
     initCopyHandler('.copy-request');
     initSelectHandler('.select-job');
     initSelectAllHandler();
+
+    return tagInput;
   },
 
   /**
diff --git a/services/harmony/public/js/workflow-ui/labels.js b/services/harmony/public/js/workflow-ui/labels.js
index ddcc1658c..5268217ac 100644
--- a/services/harmony/public/js/workflow-ui/labels.js
+++ b/services/harmony/public/js/workflow-ui/labels.js
@@ -13,14 +13,16 @@ let labelNavItem;
 /**
  * Handle actions that are taken after adding/removing labels for jobs.
  * @param {Response} res - the response from the labels endpoint
- * @param {string} labelName - the name of the label that was added or removed
  * @param {boolean} insertNew - whether to insert a new label list element
  * @param {string} successMessage - success message to show the user
+ * @param {object} tagInput - the tag input instance
  */
-async function handleLabelsResponse(res, labelName, insertNew, successMessage) {
+async function handleLabelsResponse(res, insertNew, successMessage, tagInput) {
   if (res.status === 201 || res.status === 204) {
     if (insertNew) {
-      labelsModule.insertNewLabelAlphabetically(labelName);
+      const label = (await res.json()).labels[0];
+      labelsModule.insertNewLabelAlphabetically(label);
+      (await tagInput).createTagElem({ value: `label: ${label}`, dbValue: label, field: 'label' });
     }
     toasts.showUpper(successMessage);
     PubSub.publish(
@@ -41,8 +43,9 @@ async function handleLabelsResponse(res, labelName, insertNew, successMessage) {
  * @param {Event} event - the click event
  * @param {string} method - the HTTP method
  * @param {boolean} insertNew - insert a list element for the new label
+ * @param {object} tagInput - the tag input instance
  */
-async function handleSubmitClick(event, method, insertNew) {
+async function handleSubmitClick(event, method, insertNew, tagInput) {
   event.preventDefault();
   const labelName = event.target.getAttribute('data-value');
   const jobIds = jobsTable.getJobIds();
@@ -59,7 +62,7 @@ async function handleSubmitClick(event, method, insertNew) {
   });
   action = method === 'PUT' ? 'Added' : 'Removed';
   const successMessage = `${action} "${labelName}" label for ${jobIds.length} job${postfix}.`;
-  await handleLabelsResponse(res, labelName, insertNew, successMessage);
+  await handleLabelsResponse(res, insertNew, successMessage, tagInput);
 }
 
 /**
@@ -155,6 +158,10 @@ function filterLabelsList() {
   const searchValue = document.querySelector('#label-search').value.toLowerCase().trim();
   const labelItems = document.querySelectorAll('#labels-list .label-li');
   let visibleCount = 0;
+  let hasExactMatch = false;
+  if (searchValue.length === 255) {
+    toasts.showUpper('Label length is limited to 255.');
+  }
   for (const labelItem of labelItems) {
     if (labelItem.classList.contains('label-promoted')) { // skip, stays hidden
       continue;
@@ -163,12 +170,17 @@ function filterLabelsList() {
     const isMatch = labelName.startsWith(searchValue);
     labelItem.style.display = isMatch ? '' : 'none';
     if (isMatch) visibleCount += 1;
+    if (searchValue === labelName) {
+      hasExactMatch = true;
+    }
   }
-  document.getElementById('no-match-li').style.display = (visibleCount === 0 && searchValue !== '') ? '' : 'none';
-  if (visibleCount === 0) {
+  if (!hasExactMatch) {
     const createLabelLink = document.querySelector('#create-label-link');
     createLabelLink.textContent = `Create/apply "${searchValue}"?`;
     createLabelLink.setAttribute('data-value', searchValue);
+    document.getElementById('no-match-li').style.display = '';
+  } else {
+    document.getElementById('no-match-li').style.display = 'none';
   }
   showHideLabelsList(visibleCount > 0);
 }
@@ -249,8 +261,9 @@ function toggleLabelNavVisibility(selectedJobsCount) {
 
 /**
  * Bind event handlers to their respective elements.
+ * @param {object} tagInput - the tag input instance
  */
-function bindEventListeners() {
+function bindEventListeners(tagInput) {
   const labelSearchElement = document.getElementById('label-search');
   labelSearchElement.addEventListener('keyup', () => {
     filterLabelsList();
@@ -274,7 +287,7 @@ function bindEventListeners() {
     setLabelLinksDisabled(selectedJobsCount, labelLinks);
   });
   document.querySelector('#create-label-link').addEventListener('click', (event) => {
-    handleSubmitClick(event, 'PUT', true);
+    handleSubmitClick(event, 'PUT', true, tagInput);
     bsDropdown.hide();
   });
 }
@@ -288,8 +301,9 @@ labelsModule = {
   /**
    * Initializes the labeling interactivity associated with
    * the labels dropdown link.
+   * @param {object} tagInput - the tag input instance
    */
-  init() {
+  init(tagInput) {
     // the anchor elements that correspond to a label
     labelLinks = Array.from(document.querySelectorAll('#labels-list .label-li a'));
     // the dropdown that contains label list items
@@ -300,7 +314,7 @@ labelsModule = {
     }
     const hasItems = document.querySelectorAll('#labels-list .label-li').length > 0;
     showHideLabelsList(hasItems);
-    bindEventListeners();
+    bindEventListeners(tagInput);
     PubSub.subscribe(
       'job-selected',
       () => this.toggleLabelNavVisibility(jobsTable.getJobIds().length),

From a6aa202faebd4b3d39834d2383efa4fdcee08a3c Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Thu, 23 Jan 2025 13:10:52 -0500
Subject: [PATCH 16/35] HARMONY-1978: WIP - Dynamically insert the new label
 option

TODO - with long label + commas: (1) toast is cut off, (2) label with comma is being split in view, (3) can search for label filter but not use it when pressing enter
---
 services/harmony/public/js/workflow-ui/labels.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/services/harmony/public/js/workflow-ui/labels.js b/services/harmony/public/js/workflow-ui/labels.js
index 5268217ac..4dcf7dc9c 100644
--- a/services/harmony/public/js/workflow-ui/labels.js
+++ b/services/harmony/public/js/workflow-ui/labels.js
@@ -22,7 +22,9 @@ async function handleLabelsResponse(res, insertNew, successMessage, tagInput) {
     if (insertNew) {
       const label = (await res.json()).labels[0];
       labelsModule.insertNewLabelAlphabetically(label);
-      (await tagInput).createTagElem({ value: `label: ${label}`, dbValue: label, field: 'label' });
+      const t = await tagInput;
+      const newTag = { value: `label: ${label}`, dbValue: label, field: 'label' };
+      t.whitelist.push(newTag);
     }
     toasts.showUpper(successMessage);
     PubSub.publish(

From eafaa4a9cb39b382add819142fe235a914c581ef Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Thu, 23 Jan 2025 13:17:23 -0500
Subject: [PATCH 17/35] HARMONY-1978: WIP - Dynamically insert the new label
 option

TODO - large label should be truncated in filtering dropdown
---
 services/harmony/public/js/workflow-ui/jobs/index.js | 4 ++--
 services/harmony/public/js/workflow-ui/labels.js     | 9 ++++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/services/harmony/public/js/workflow-ui/jobs/index.js b/services/harmony/public/js/workflow-ui/jobs/index.js
index e85708e97..e9a6510c6 100644
--- a/services/harmony/public/js/workflow-ui/jobs/index.js
+++ b/services/harmony/public/js/workflow-ui/jobs/index.js
@@ -26,7 +26,7 @@ if (isAdminRoute) {
 params.dateKind = document.getElementById('dateKindUpdated').checked ? 'updatedAt' : 'createdAt';
 params.sortGranules = document.getElementById('sort-granules').value;
 
-const tagInput = jobsTable.init(params);
+const tagInputPromise = jobsTable.init(params);
 
 const jobStatusLinks = new JobsStatusChangeLinks();
 jobStatusLinks.init('job-state-links-container', 'job-selected');
@@ -35,5 +35,5 @@ toasts.init();
 
 const labelDropdown = document.getElementById('label-dropdown-a');
 if (labelDropdown) {
-  labels.init(tagInput);
+  labels.init(tagInputPromise);
 }
diff --git a/services/harmony/public/js/workflow-ui/labels.js b/services/harmony/public/js/workflow-ui/labels.js
index 4dcf7dc9c..8c0cee5c0 100644
--- a/services/harmony/public/js/workflow-ui/labels.js
+++ b/services/harmony/public/js/workflow-ui/labels.js
@@ -22,9 +22,8 @@ async function handleLabelsResponse(res, insertNew, successMessage, tagInput) {
     if (insertNew) {
       const label = (await res.json()).labels[0];
       labelsModule.insertNewLabelAlphabetically(label);
-      const t = await tagInput;
       const newTag = { value: `label: ${label}`, dbValue: label, field: 'label' };
-      t.whitelist.push(newTag);
+      tagInput.whitelist.push(newTag);
     }
     toasts.showUpper(successMessage);
     PubSub.publish(
@@ -303,9 +302,9 @@ labelsModule = {
   /**
    * Initializes the labeling interactivity associated with
    * the labels dropdown link.
-   * @param {object} tagInput - the tag input instance
+   * @param {Promise<object>} tagInputPromise - the tag input instance
    */
-  init(tagInput) {
+  async init(tagInputPromise) {
     // the anchor elements that correspond to a label
     labelLinks = Array.from(document.querySelectorAll('#labels-list .label-li a'));
     // the dropdown that contains label list items
@@ -316,7 +315,7 @@ labelsModule = {
     }
     const hasItems = document.querySelectorAll('#labels-list .label-li').length > 0;
     showHideLabelsList(hasItems);
-    bindEventListeners(tagInput);
+    bindEventListeners((await tagInputPromise));
     PubSub.subscribe(
       'job-selected',
       () => this.toggleLabelNavVisibility(jobsTable.getJobIds().length),

From cbb093af28fbef2ad91790cc669efb3c66eb616f Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Thu, 23 Jan 2025 15:55:53 -0500
Subject: [PATCH 18/35] HARMONY-1978:

TODO: typing "," should not cause tag to be entered in input
---
 services/harmony/public/js/workflow-ui/jobs/jobs-table.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/services/harmony/public/js/workflow-ui/jobs/jobs-table.js b/services/harmony/public/js/workflow-ui/jobs/jobs-table.js
index 22b590c71..0fa3d8448 100644
--- a/services/harmony/public/js/workflow-ui/jobs/jobs-table.js
+++ b/services/harmony/public/js/workflow-ui/jobs/jobs-table.js
@@ -34,7 +34,10 @@ function initFilter(currentUser, services, providers, labels, isAdminRoute, tabl
   allowedList.push(...serviceList);
   const providerList = providers.map((provider) => ({ value: `provider: ${provider}`, dbValue: provider, field: 'provider' }));
   allowedList.push(...providerList);
-  const labelList = labels.map((label) => ({ value: `label: ${label}`, dbValue: label, field: 'label' }));
+  const labelList = labels.map((l) => {
+    const lDisplay = l.length < 15 ? l : `${l.slice(0, 12)}...`;
+    return ({ value: `label: ${lDisplay}`, dbValue: l, field: 'label', searchBy: l });
+  });
   allowedList.push(...labelList);
   if (isAdminRoute) {
     allowedList.push({ value: `user: ${currentUser}`, dbValue: currentUser, field: 'user' });

From d73e10cffce0a7fe1b4e3da9dd96ea69d898c0d3 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Thu, 23 Jan 2025 16:09:07 -0500
Subject: [PATCH 19/35] HARMONY-1978 - WIP: TODO - truncated label values
 should pull value from different field?

---
 services/harmony/app/frontends/workflow-ui.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/services/harmony/app/frontends/workflow-ui.ts b/services/harmony/app/frontends/workflow-ui.ts
index 0204c7d0e..3611bbc64 100644
--- a/services/harmony/app/frontends/workflow-ui.ts
+++ b/services/harmony/app/frontends/workflow-ui.ts
@@ -77,6 +77,7 @@ function parseQuery( /* eslint-disable @typescript-eslint/no-explicit-any */
   isAdminAccess = false,
   maxFilters = 30,
 ): { tableQuery: TableQuery, originalValues: string } {
+  console.log(requestQuery);
   const tableQuery: TableQuery = {
     sortGranules: undefined,
     // tag input
@@ -113,6 +114,7 @@ function parseQuery( /* eslint-disable @typescript-eslint/no-explicit-any */
     const userValues = validUserSelections.map(option => option.value.split('user: ')[1]);
     const validLabelSelections = selectedOptions
       .filter(option => /^label: .{1,100}$/.test(option.value));
+    // TODO - truncated label values should pull value from diff. field?
     const labelValues = validLabelSelections.map(option => option.value.split('label: ')[1].toLowerCase());
     const validProviderSelections = selectedOptions
       .filter(option => /^provider: [A-Za-z0-9_]{1,100}$/.test(option.value));
@@ -145,6 +147,7 @@ function parseQuery( /* eslint-disable @typescript-eslint/no-explicit-any */
   if (requestQuery.fromdatetime || requestQuery.todatetime) {
     tableQuery.dateKind = requestQuery.datekind || 'createdAt';
   }
+  console.log(tableQuery);
   return { tableQuery, originalValues };
 }
 

From f81f6fd1122acafd581249bc0ac8e725a272396c Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Fri, 24 Jan 2025 12:48:22 -0500
Subject: [PATCH 20/35] HARMONY-1978: Use labels' db value attribute if present
 for db query

---
 services/harmony/app/frontends/workflow-ui.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/services/harmony/app/frontends/workflow-ui.ts b/services/harmony/app/frontends/workflow-ui.ts
index 3611bbc64..f468d6328 100644
--- a/services/harmony/app/frontends/workflow-ui.ts
+++ b/services/harmony/app/frontends/workflow-ui.ts
@@ -114,8 +114,7 @@ function parseQuery( /* eslint-disable @typescript-eslint/no-explicit-any */
     const userValues = validUserSelections.map(option => option.value.split('user: ')[1]);
     const validLabelSelections = selectedOptions
       .filter(option => /^label: .{1,100}$/.test(option.value));
-    // TODO - truncated label values should pull value from diff. field?
-    const labelValues = validLabelSelections.map(option => option.value.split('label: ')[1].toLowerCase());
+    const labelValues = validLabelSelections.map(option => option.dbValue || option.value.split('label: ')[1].toLowerCase());
     const validProviderSelections = selectedOptions
       .filter(option => /^provider: [A-Za-z0-9_]{1,100}$/.test(option.value));
     const providerValues = validProviderSelections.map(option => option.value.split('provider: ')[1].toLowerCase());

From 9d257b53806b959a9461f3aaa5c47699dbfab57e Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Fri, 24 Jan 2025 12:48:56 -0500
Subject: [PATCH 21/35] HARMONY-1978: Trim labels that are too long

---
 .../public/js/workflow-ui/jobs/jobs-table.js  | 22 ++++++++++++++-----
 .../harmony/public/js/workflow-ui/labels.js   |  3 ++-
 .../harmony/public/js/workflow-ui/table.js    | 14 ++++++++++++
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/services/harmony/public/js/workflow-ui/jobs/jobs-table.js b/services/harmony/public/js/workflow-ui/jobs/jobs-table.js
index 0fa3d8448..a658e72b2 100644
--- a/services/harmony/public/js/workflow-ui/jobs/jobs-table.js
+++ b/services/harmony/public/js/workflow-ui/jobs/jobs-table.js
@@ -1,5 +1,5 @@
 /* eslint-disable no-param-reassign */
-import { formatDates, initCopyHandler } from '../table.js';
+import { formatDates, initCopyHandler, trimForDisplay } from '../table.js';
 import PubSub from '../../pub-sub.js';
 
 // all of the currently selected job IDs
@@ -34,10 +34,7 @@ function initFilter(currentUser, services, providers, labels, isAdminRoute, tabl
   allowedList.push(...serviceList);
   const providerList = providers.map((provider) => ({ value: `provider: ${provider}`, dbValue: provider, field: 'provider' }));
   allowedList.push(...providerList);
-  const labelList = labels.map((l) => {
-    const lDisplay = l.length < 15 ? l : `${l.slice(0, 12)}...`;
-    return ({ value: `label: ${lDisplay}`, dbValue: l, field: 'label', searchBy: l });
-  });
+  const labelList = labels.map((label) => ({ value: `label: ${trimForDisplay(label, 30)}`, dbValue: label, field: 'label', searchBy: label }));
   allowedList.push(...labelList);
   if (isAdminRoute) {
     allowedList.push({ value: `user: ${currentUser}`, dbValue: currentUser, field: 'user' });
@@ -64,6 +61,21 @@ function initFilter(currentUser, services, providers, labels, isAdminRoute, tabl
       enabled: 0,
       closeOnSelect: true,
     },
+    templates: {
+      tag(tagData) {
+        return `<tag title="${tagData.dbValue}"
+            contenteditable='false'
+            spellcheck='false'
+            tabIndex="${this.settings.a11y.focusableTags ? 0 : -1}"
+            class="${this.settings.classNames.tag}"
+            ${this.getAttributes(tagData)}>
+          <x title='' class="${this.settings.classNames.tagX}" role='button' aria-label='remove tag'></x>
+          <div>
+              <span class="${this.settings.classNames.tagText}">${trimForDisplay(tagData.value.split(': ')[1], 20)}</span>
+          </div>
+        </tag>`;
+      },
+    },
   });
   const initialTags = JSON.parse(tableFilter);
   tagInput.addTags(initialTags);
diff --git a/services/harmony/public/js/workflow-ui/labels.js b/services/harmony/public/js/workflow-ui/labels.js
index 8c0cee5c0..81e5f5956 100644
--- a/services/harmony/public/js/workflow-ui/labels.js
+++ b/services/harmony/public/js/workflow-ui/labels.js
@@ -2,6 +2,7 @@
 import jobsTable from './jobs/jobs-table.js';
 import toasts from './toasts.js';
 import PubSub from '../pub-sub.js';
+import { trimForDisplay } from './table.js';
 
 // eslint-disable-next-line import/no-mutable-exports
 let labelsModule;
@@ -22,7 +23,7 @@ async function handleLabelsResponse(res, insertNew, successMessage, tagInput) {
     if (insertNew) {
       const label = (await res.json()).labels[0];
       labelsModule.insertNewLabelAlphabetically(label);
-      const newTag = { value: `label: ${label}`, dbValue: label, field: 'label' };
+      const newTag = { value: `label: ${trimForDisplay(label, 30)}`, dbValue: label, field: 'label', searchBy: label };
       tagInput.whitelist.push(newTag);
     }
     toasts.showUpper(successMessage);
diff --git a/services/harmony/public/js/workflow-ui/table.js b/services/harmony/public/js/workflow-ui/table.js
index 6dcb23adf..bbda82be4 100644
--- a/services/harmony/public/js/workflow-ui/table.js
+++ b/services/harmony/public/js/workflow-ui/table.js
@@ -76,6 +76,19 @@ async function initCopyHandler(selector) {
   });
 }
 
+/**
+ * If the string is longer than n, trim it to n-3 and add ellipsis
+ * @param {string} str - the string to trim if it exceeds n
+ * @param {*} n - trim to n chars and append ...
+ * @returns trimmed string
+ */
+function trimForDisplay(str, n) {
+  if (!str) {
+    return '';
+  }
+  return str.length < n ? str : `${str.slice(0, n - 3)}...`;
+}
+
 /**
  * Utility for commonly used table logic.
  */
@@ -83,4 +96,5 @@ export {
   formatDates,
   initTooltips,
   initCopyHandler,
+  trimForDisplay,
 };

From 9029b31f6ca6dba7ac2632c6741c16ca748ae3a6 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Fri, 24 Jan 2025 13:24:28 -0500
Subject: [PATCH 22/35] HARMONY-1978: Use a new delimiter for job.labels

---
 services/harmony/app/models/job.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/services/harmony/app/models/job.ts b/services/harmony/app/models/job.ts
index b864f32b8..fa2e2041a 100644
--- a/services/harmony/app/models/job.ts
+++ b/services/harmony/app/models/job.ts
@@ -499,11 +499,11 @@ export class Job extends DBRecord implements JobRecord {
     includeLabels = false,
   ): Promise<{ data: Job[]; pagination: ILengthAwarePagination }> {
     let query;
-
+    const labelDelimiter = '*&%$#';
     if (includeLabels) {
       if (constraints.labels) { // Requesting to limit the jobs based on the provided labels
         query = tx(Job.table)
-          .select(`${Job.table}.*`, tx.raw(`STRING_AGG(${LABELS_TABLE}.value, ',' order by value) AS label_values`))
+          .select(`${Job.table}.*`, tx.raw(`STRING_AGG(${LABELS_TABLE}.value, '${labelDelimiter}' order by value) AS label_values`))
           .leftOuterJoin(`${JOBS_LABELS_TABLE}`, `${Job.table}.jobID`, '=', `${JOBS_LABELS_TABLE}.job_id`)
           .leftOuterJoin(`${LABELS_TABLE}`, `${JOBS_LABELS_TABLE}.label_id`, '=', `${LABELS_TABLE}.id`)
           // Subquery that filters to get the list of jobIDs that match any of the provided labels
@@ -524,7 +524,7 @@ export class Job extends DBRecord implements JobRecord {
           .modify((queryBuilder) => modifyQuery(queryBuilder, constraints));
       } else {
         query = tx(Job.table)
-          .select(`${Job.table}.*`, tx.raw(`STRING_AGG(${LABELS_TABLE}.value, ',' order by value) AS label_values`))
+          .select(`${Job.table}.*`, tx.raw(`STRING_AGG(${LABELS_TABLE}.value, '${labelDelimiter}' order by value) AS label_values`))
           .leftOuterJoin(`${JOBS_LABELS_TABLE}`, `${Job.table}.jobID`, '=', `${JOBS_LABELS_TABLE}.job_id`)
           .leftOuterJoin(`${LABELS_TABLE}`, `${JOBS_LABELS_TABLE}.label_id`, '=', `${LABELS_TABLE}.id`)
           .where(setTableNameForWhereClauses(Job.table, constraints.where))
@@ -550,7 +550,7 @@ export class Job extends DBRecord implements JobRecord {
     const jobs: Job[] = items.data.map((j: JobWithLabels) => {
       const job = new Job(j);
       if (includeLabels && j.label_values) {
-        job.labels = j.label_values.split(',');
+        job.labels = j.label_values.split(labelDelimiter);
       } else {
         job.labels = [];
       }

From c6c6b49906c145335eaf42f37aa4d79f9f5985a4 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Fri, 24 Jan 2025 13:25:07 -0500
Subject: [PATCH 23/35] HARMONY-1978: Prevent toast getting cut off by higher
 z-index items

---
 services/harmony/public/css/workflow-ui/default.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/services/harmony/public/css/workflow-ui/default.css b/services/harmony/public/css/workflow-ui/default.css
index 3cd994c31..90df6b4d5 100644
--- a/services/harmony/public/css/workflow-ui/default.css
+++ b/services/harmony/public/css/workflow-ui/default.css
@@ -82,4 +82,8 @@
 
 #create-label-link {
     word-wrap: break-word;
+}
+
+.toast, .toast-container {
+    z-index: 1021;
 }
\ No newline at end of file

From e1c6193ded119947e5105ce23323e257742c5b90 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Fri, 24 Jan 2025 13:39:21 -0500
Subject: [PATCH 24/35] HARMONY-1978: Ensure that comma does not generate a new
 tag

---
 services/harmony/public/js/workflow-ui/jobs/jobs-table.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/services/harmony/public/js/workflow-ui/jobs/jobs-table.js b/services/harmony/public/js/workflow-ui/jobs/jobs-table.js
index a658e72b2..fed8a1147 100644
--- a/services/harmony/public/js/workflow-ui/jobs/jobs-table.js
+++ b/services/harmony/public/js/workflow-ui/jobs/jobs-table.js
@@ -42,6 +42,7 @@ function initFilter(currentUser, services, providers, labels, isAdminRoute, tabl
   const allowedValues = allowedList.map((t) => t.value);
   const tagInput = new Tagify(filterInput, {
     whitelist: allowedList,
+    delimiters: null,
     validate(tag) {
       if (allowedValues.includes(tag.value)
         || /^provider: [A-Za-z0-9_]{1,100}$/.test(tag.value)

From 4bb5261f22654af6f62026fa172d707ea93a595c Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Fri, 24 Jan 2025 13:40:05 -0500
Subject: [PATCH 25/35] HARMONY-1978: Remove console.log

---
 services/harmony/app/frontends/workflow-ui.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/services/harmony/app/frontends/workflow-ui.ts b/services/harmony/app/frontends/workflow-ui.ts
index f468d6328..839fbe543 100644
--- a/services/harmony/app/frontends/workflow-ui.ts
+++ b/services/harmony/app/frontends/workflow-ui.ts
@@ -77,7 +77,6 @@ function parseQuery( /* eslint-disable @typescript-eslint/no-explicit-any */
   isAdminAccess = false,
   maxFilters = 30,
 ): { tableQuery: TableQuery, originalValues: string } {
-  console.log(requestQuery);
   const tableQuery: TableQuery = {
     sortGranules: undefined,
     // tag input
@@ -146,7 +145,6 @@ function parseQuery( /* eslint-disable @typescript-eslint/no-explicit-any */
   if (requestQuery.fromdatetime || requestQuery.todatetime) {
     tableQuery.dateKind = requestQuery.datekind || 'createdAt';
   }
-  console.log(tableQuery);
   return { tableQuery, originalValues };
 }
 

From c17741909a97a3bb3f90df261c6d355f3909b4b0 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Fri, 24 Jan 2025 14:00:01 -0500
Subject: [PATCH 26/35] HARMONY-1978: Update test mock

---
 services/harmony/public/js/workflow-ui/jobs/jobs-table.js | 2 +-
 services/harmony/public/js/workflow-ui/labels.js          | 2 +-
 services/harmony/test/workflow-ui/labels-js.ts            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/services/harmony/public/js/workflow-ui/jobs/jobs-table.js b/services/harmony/public/js/workflow-ui/jobs/jobs-table.js
index fed8a1147..091882c53 100644
--- a/services/harmony/public/js/workflow-ui/jobs/jobs-table.js
+++ b/services/harmony/public/js/workflow-ui/jobs/jobs-table.js
@@ -72,7 +72,7 @@ function initFilter(currentUser, services, providers, labels, isAdminRoute, tabl
             ${this.getAttributes(tagData)}>
           <x title='' class="${this.settings.classNames.tagX}" role='button' aria-label='remove tag'></x>
           <div>
-              <span class="${this.settings.classNames.tagText}">${trimForDisplay(tagData.value.split(': ')[1], 20)}</span>
+              <span class="${this.settings.classNames.tagText} text-truncate">${trimForDisplay(tagData.value.split(': ')[1], 20)}</span>
           </div>
         </tag>`;
       },
diff --git a/services/harmony/public/js/workflow-ui/labels.js b/services/harmony/public/js/workflow-ui/labels.js
index 81e5f5956..47c2f9a69 100644
--- a/services/harmony/public/js/workflow-ui/labels.js
+++ b/services/harmony/public/js/workflow-ui/labels.js
@@ -24,7 +24,7 @@ async function handleLabelsResponse(res, insertNew, successMessage, tagInput) {
       const label = (await res.json()).labels[0];
       labelsModule.insertNewLabelAlphabetically(label);
       const newTag = { value: `label: ${trimForDisplay(label, 30)}`, dbValue: label, field: 'label', searchBy: label };
-      tagInput.whitelist.push(newTag);
+      tagInput?.whitelist?.push(newTag);
     }
     toasts.showUpper(successMessage);
     PubSub.publish(
diff --git a/services/harmony/test/workflow-ui/labels-js.ts b/services/harmony/test/workflow-ui/labels-js.ts
index e21415871..e6bbc64fe 100644
--- a/services/harmony/test/workflow-ui/labels-js.ts
+++ b/services/harmony/test/workflow-ui/labels-js.ts
@@ -12,7 +12,7 @@ beforeEach(async () => {
 describe('labels.js', () => { 
   describe('handleLabelsResponse', () => {
     it('inserts a new label when insertNew is true', async () => {
-      await Labels.handleLabelsResponse({ status: 201 }, 'a new one', true, 'it worked!');
+      await Labels.handleLabelsResponse({ status: 201, json: async () => ({ labels: ['a new one'] }) }, 'a new one', true, 'it worked!');
       const labelsListElement = document.getElementById('labels-list');
       expect(labelsListElement.querySelector('a[name="a new one"]')).to.not.be.undefined;
     });

From 2e3c5303963e653ca06ecb017b2b9aab7b3a0008 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Fri, 24 Jan 2025 14:03:26 -0500
Subject: [PATCH 27/35] HARMONY-1978: Unnecessary class

---
 services/harmony/public/js/workflow-ui/jobs/jobs-table.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/services/harmony/public/js/workflow-ui/jobs/jobs-table.js b/services/harmony/public/js/workflow-ui/jobs/jobs-table.js
index 091882c53..fed8a1147 100644
--- a/services/harmony/public/js/workflow-ui/jobs/jobs-table.js
+++ b/services/harmony/public/js/workflow-ui/jobs/jobs-table.js
@@ -72,7 +72,7 @@ function initFilter(currentUser, services, providers, labels, isAdminRoute, tabl
             ${this.getAttributes(tagData)}>
           <x title='' class="${this.settings.classNames.tagX}" role='button' aria-label='remove tag'></x>
           <div>
-              <span class="${this.settings.classNames.tagText} text-truncate">${trimForDisplay(tagData.value.split(': ')[1], 20)}</span>
+              <span class="${this.settings.classNames.tagText}">${trimForDisplay(tagData.value.split(': ')[1], 20)}</span>
           </div>
         </tag>`;
       },

From 9bf20b5564b3c302d8cb8d5092bd21b1f6932eb2 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Fri, 24 Jan 2025 17:13:59 -0500
Subject: [PATCH 28/35] HARMONY-1978: Fix commas bug

TODO: Clean up naming, duplication, ensure bug isn't found elsewhere too
---
 services/harmony/app/frontends/workflow-ui.ts                  | 3 +++
 .../app/views/workflow-ui/request-preview.mustache.html        | 2 +-
 services/harmony/public/js/workflow-ui/labels.js               | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/services/harmony/app/frontends/workflow-ui.ts b/services/harmony/app/frontends/workflow-ui.ts
index 839fbe543..0f1c4c8a4 100644
--- a/services/harmony/app/frontends/workflow-ui.ts
+++ b/services/harmony/app/frontends/workflow-ui.ts
@@ -209,6 +209,9 @@ function jobRenderingFunctions(logger: Logger, requestQuery: Record<string, any>
         return this.request;
       }
     },
+    jobLabels(): string {
+      return  JSON.stringify(this.labels || []);
+    },
     jobLabelsDisplay(): string {
       return this.labels.map((label) => {
         const labelText = truncateString(label, 30);
diff --git a/services/harmony/app/views/workflow-ui/request-preview.mustache.html b/services/harmony/app/views/workflow-ui/request-preview.mustache.html
index 0b4cbbbfc..3958d726d 100644
--- a/services/harmony/app/views/workflow-ui/request-preview.mustache.html
+++ b/services/harmony/app/views/workflow-ui/request-preview.mustache.html
@@ -4,7 +4,7 @@
             data-truncated="{{jobRequestIsTruncated}}"></i>
         <span title="{{jobRequest}}" class="text-muted job-url-text">{{jobRequestDisplay}}</span>
     </div>
-    <div class="ml-1" id="job-labels-display-{{jobID}}" data-labels="{{labels}}">
+    <div class="ml-1" id="job-labels-display-{{jobID}}" data-labels="{{jobLabels}}">
         {{{jobLabelsDisplay}}}
     </div>
 </div>
\ No newline at end of file
diff --git a/services/harmony/public/js/workflow-ui/labels.js b/services/harmony/public/js/workflow-ui/labels.js
index 47c2f9a69..0dea0f011 100644
--- a/services/harmony/public/js/workflow-ui/labels.js
+++ b/services/harmony/public/js/workflow-ui/labels.js
@@ -213,7 +213,7 @@ function getLabelsIntersectionForSelectedJobs() {
       const jobID = jobEl.getAttribute('data-id');
       const labelsString = document.querySelector(`#job-labels-display-${jobID}`).getAttribute('data-labels');
       const currentSet = new Set();
-      const labels = labelsString === '' ? [] : labelsString.split(',');
+      const labels = JSON.parse(labelsString);
       labels.forEach((item) => currentSet.add(item));
       if (firstChecked) { // init labelsSet
         labels.forEach((item) => labelsSet.add(item));

From 9b8ab2c9cab0d5059b8c3725310ec44b2a8f7358 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Mon, 27 Jan 2025 09:49:04 -0500
Subject: [PATCH 29/35] HARMONY-1978: Updated tets to reflect new data
 attribute format

---
 services/harmony/test/workflow-ui/jobs.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/services/harmony/test/workflow-ui/jobs.html b/services/harmony/test/workflow-ui/jobs.html
index 0433970d2..28205428e 100644
--- a/services/harmony/test/workflow-ui/jobs.html
+++ b/services/harmony/test/workflow-ui/jobs.html
@@ -187,7 +187,7 @@
                                     <i class="bi bi-copy text-primary copy-request" data-text="http://localhost:3000/C1233800302-EEDTEST/ogc-api-coverages/1.0.0/collections/all/coverage/rangeset?format=image%2Ftiff" data-truncated="false"></i>
                                     <span title="http://localhost:3000/C1233800302-EEDTEST/ogc-api-coverages/1.0.0/collections/all/coverage/rangeset?format=image/tiff" class="text-muted job-url-text">/C1233800302-EEDTEST/ogc-api-coverages/.../all/...?format=image/tiff</span>
                                 </div>
-                                <div class="ml-1" id="job-labels-display-580b48e6-845e-4e83-bcb8-60a1a3b0b6b9" data-labels="">
+                                <div class="ml-1" id="job-labels-display-580b48e6-845e-4e83-bcb8-60a1a3b0b6b9" data-labels="[]">
                                     
                                 </div>
                             </div>                        </th>                        </tr><tr id="job-058184f7-498c-4aa5-a3df-96a3a49b7d19" class="job-table-row">
@@ -207,7 +207,7 @@
                                     <i class="bi bi-copy text-primary copy-request" data-text="http://localhost:3000/C1233800302-EEDTEST/ogc-api-coverages/1.0.0/collections/all/coverage/rangeset?format=image%2Ftiff&amp;label=blue" data-truncated="false"></i>
                                     <span title="http://localhost:3000/C1233800302-EEDTEST/ogc-api-coverages/1.0.0/collections/all/coverage/rangeset?format=image/tiff&amp;label=blue" class="text-muted job-url-text">/C1233800302-EEDTEST/ogc-api-coverages/.../all/...?format=image/tiff&amp;label=blue</span>
                                 </div>
-                                <div class="ml-1" id="job-labels-display-058184f7-498c-4aa5-a3df-96a3a49b7d19" data-labels="blue">
+                                <div class="ml-1" id="job-labels-display-058184f7-498c-4aa5-a3df-96a3a49b7d19" data-labels='["blue"]'>
                                     <span class="badge bg-label" title="blue">blue</span>
                                 </div>
                             </div>                        </th>                        </tr><tr id="job-38d2b820-0b52-475d-8cb0-0b9f7775f767" class="job-table-row">
@@ -227,7 +227,7 @@
                                     <i class="bi bi-copy text-primary copy-request" data-text="http://localhost:3000/C1233800302-EEDTEST/ogc-api-coverages/1.0.0/collections/all/coverage/rangeset?format=image%2Ftiff&amp;label=blue&amp;label=yellow&amp;label=green" data-truncated="false"></i>
                                     <span title="http://localhost:3000/C1233800302-EEDTEST/ogc-api-coverages/1.0.0/collections/all/coverage/rangeset?format=image/tiff&amp;label=blue&amp;label=yellow&amp;label=green" class="text-muted job-url-text">/C1233800302-EEDTEST/ogc-api-coverages/.../all/...?format=image/tiff&amp;label=blue&amp;label=yellow&amp;label=green</span>
                                 </div>
-                                <div class="ml-1" id="job-labels-display-38d2b820-0b52-475d-8cb0-0b9f7775f767" data-labels="blue,green,yellow">
+                                <div class="ml-1" id="job-labels-display-38d2b820-0b52-475d-8cb0-0b9f7775f767" data-labels='["blue","green","yellow"]'>
                                     <span class="badge bg-label" title="blue">blue</span> <span class="badge bg-label" title="green">green</span> <span class="badge bg-label" title="yellow">yellow</span>
                                 </div>
                             </div>                        </th>                    </tr></tbody>

From 5cbbe6fb7ae8c953708baeba1907cf0463c19235 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Mon, 27 Jan 2025 09:54:06 -0500
Subject: [PATCH 30/35] HARMONY-1978: Add newlines for readability

---
 services/harmony/app/frontends/workflow-ui.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/services/harmony/app/frontends/workflow-ui.ts b/services/harmony/app/frontends/workflow-ui.ts
index 0f1c4c8a4..01880fa10 100644
--- a/services/harmony/app/frontends/workflow-ui.ts
+++ b/services/harmony/app/frontends/workflow-ui.ts
@@ -102,21 +102,27 @@ function parseQuery( /* eslint-disable @typescript-eslint/no-explicit-any */
     tableQuery.allowUsers = !(requestQuery.disallowuser === 'on');
     tableQuery.allowProviders = !(requestQuery.disallowprovider === 'on');
     const selectedOptions: { field: string, dbValue: string, value: string }[] = JSON.parse(requestQuery.tablefilter);
+    
     const validStatusSelections = selectedOptions
       .filter(option => option.field === 'status' && Object.values<string>(statusEnum).includes(option.dbValue));
     const statusValues = validStatusSelections.map(option => option.dbValue);
+    
     const validServiceSelections = selectedOptions
       .filter(option => option.field === 'service' && serviceNames.includes(option.dbValue));
     const serviceValues = validServiceSelections.map(option => option.dbValue);
+    
     const validUserSelections = selectedOptions
       .filter(option => isAdminAccess && /^user: [A-Za-z0-9\.\_]{4,30}$/.test(option.value));
     const userValues = validUserSelections.map(option => option.value.split('user: ')[1]);
+    
     const validLabelSelections = selectedOptions
       .filter(option => /^label: .{1,100}$/.test(option.value));
     const labelValues = validLabelSelections.map(option => option.dbValue || option.value.split('label: ')[1].toLowerCase());
+    
     const validProviderSelections = selectedOptions
       .filter(option => /^provider: [A-Za-z0-9_]{1,100}$/.test(option.value));
     const providerValues = validProviderSelections.map(option => option.value.split('provider: ')[1].toLowerCase());
+    
     if ((statusValues.length + serviceValues.length + userValues.length + providerValues.length) > maxFilters) {
       throw new RequestValidationError(`Maximum amount of filters (${maxFilters}) was exceeded.`);
     }

From 304350fc84c3b75a089d3e23472c764b3f6cea42 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Mon, 27 Jan 2025 09:56:23 -0500
Subject: [PATCH 31/35] HARMONY-1978: Comment

---
 services/harmony/public/js/workflow-ui/jobs/jobs-table.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/services/harmony/public/js/workflow-ui/jobs/jobs-table.js b/services/harmony/public/js/workflow-ui/jobs/jobs-table.js
index fed8a1147..31fe9fd98 100644
--- a/services/harmony/public/js/workflow-ui/jobs/jobs-table.js
+++ b/services/harmony/public/js/workflow-ui/jobs/jobs-table.js
@@ -42,7 +42,7 @@ function initFilter(currentUser, services, providers, labels, isAdminRoute, tabl
   const allowedValues = allowedList.map((t) => t.value);
   const tagInput = new Tagify(filterInput, {
     whitelist: allowedList,
-    delimiters: null,
+    delimiters: null, // prevent characters like "," from triggering input submission
     validate(tag) {
       if (allowedValues.includes(tag.value)
         || /^provider: [A-Za-z0-9_]{1,100}$/.test(tag.value)

From 371e32508cd9e396365292e947b21d1c3c79dd87 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Mon, 27 Jan 2025 10:09:28 -0500
Subject: [PATCH 32/35] HARMONY-1978: Refactor so that labelsModule can be a
 const

---
 .../harmony/public/js/workflow-ui/labels.js   | 77 +++++++++----------
 1 file changed, 38 insertions(+), 39 deletions(-)

diff --git a/services/harmony/public/js/workflow-ui/labels.js b/services/harmony/public/js/workflow-ui/labels.js
index 0dea0f011..875d0d5e6 100644
--- a/services/harmony/public/js/workflow-ui/labels.js
+++ b/services/harmony/public/js/workflow-ui/labels.js
@@ -1,11 +1,14 @@
-/* eslint-disable no-continue */
 import jobsTable from './jobs/jobs-table.js';
 import toasts from './toasts.js';
 import PubSub from '../pub-sub.js';
 import { trimForDisplay } from './table.js';
 
-// eslint-disable-next-line import/no-mutable-exports
-let labelsModule;
+/**
+ * The labeling dropdown object allows users to
+ * add and remove labels from selected jobs.
+ */
+// need this ref so that we can access some functions before they're defined
+const labelsModule = {};
 let bsDropdown;
 let labelLinks;
 let labelDropdown;
@@ -166,6 +169,7 @@ function filterLabelsList() {
   }
   for (const labelItem of labelItems) {
     if (labelItem.classList.contains('label-promoted')) { // skip, stays hidden
+      // eslint-disable-next-line no-continue
       continue;
     }
     const labelName = labelItem.firstChild.getAttribute('data-value').toLowerCase().trim();
@@ -294,44 +298,39 @@ function bindEventListeners(tagInput) {
   });
 }
 
+
 /**
- * The labeling dropdown object allows users to
- * add and remove labels from selected jobs.
+ * Initializes the labeling interactivity associated with
+ * the labels dropdown link.
+ * @param {Promise<object>} tagInputPromise - the tag input instance
  */
-labelsModule = {
-
-  /**
-   * Initializes the labeling interactivity associated with
-   * the labels dropdown link.
-   * @param {Promise<object>} tagInputPromise - the tag input instance
-   */
-  async init(tagInputPromise) {
-    // the anchor elements that correspond to a label
-    labelLinks = Array.from(document.querySelectorAll('#labels-list .label-li a'));
-    // the dropdown that contains label list items
-    labelDropdown = document.getElementById('label-dropdown-a');
-    labelNavItem = document.getElementById('label-nav-item');
-    if (labelDropdown) {
-      bsDropdown = new bootstrap.Dropdown(labelDropdown);
-    }
-    const hasItems = document.querySelectorAll('#labels-list .label-li').length > 0;
-    showHideLabelsList(hasItems);
-    bindEventListeners((await tagInputPromise));
-    PubSub.subscribe(
-      'job-selected',
-      () => this.toggleLabelNavVisibility(jobsTable.getJobIds().length),
-    );
-  },
-  promoteLabels,
-  demoteLabels,
-  getLabelsIntersectionForSelectedJobs,
-  setLabelLinksDisabled,
-  setLabelLinksEnabled,
-  filterLabelsList,
-  showAllLabels,
-  toggleLabelNavVisibility,
-  insertNewLabelAlphabetically,
-  handleLabelsResponse,
+labelsModule.init = async (tagInputPromise) => {
+  // the anchor elements that correspond to a label
+  labelLinks = Array.from(document.querySelectorAll('#labels-list .label-li a'));
+  // the dropdown that contains label list items
+  labelDropdown = document.getElementById('label-dropdown-a');
+  labelNavItem = document.getElementById('label-nav-item');
+  if (labelDropdown) {
+    bsDropdown = new bootstrap.Dropdown(labelDropdown);
+  }
+  const hasItems = document.querySelectorAll('#labels-list .label-li').length > 0;
+  showHideLabelsList(hasItems);
+  bindEventListeners((await tagInputPromise));
+  PubSub.subscribe(
+    'job-selected',
+    () => toggleLabelNavVisibility(jobsTable.getJobIds().length),
+  );
 };
 
+labelsModule.promoteLabels = promoteLabels;
+labelsModule.demoteLabels = demoteLabels;
+labelsModule.getLabelsIntersectionForSelectedJobs = getLabelsIntersectionForSelectedJobs;
+labelsModule.setLabelLinksDisabled = setLabelLinksDisabled;
+labelsModule.setLabelLinksEnabled = setLabelLinksEnabled;
+labelsModule.filterLabelsList = filterLabelsList;
+labelsModule.showAllLabels = showAllLabels
+labelsModule.toggleLabelNavVisibility = toggleLabelNavVisibility;
+labelsModule.insertNewLabelAlphabetically = insertNewLabelAlphabetically;
+labelsModule.handleLabelsResponse = handleLabelsResponse;
+
 export default labelsModule;

From ef7d561447ad55cd14ddc9ab9de56d99793fb23c Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Mon, 27 Jan 2025 10:51:54 -0500
Subject: [PATCH 33/35] HARMONY-1978: Remove extraneous line

---
 services/harmony/public/js/workflow-ui/labels.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/services/harmony/public/js/workflow-ui/labels.js b/services/harmony/public/js/workflow-ui/labels.js
index 875d0d5e6..ffef073fe 100644
--- a/services/harmony/public/js/workflow-ui/labels.js
+++ b/services/harmony/public/js/workflow-ui/labels.js
@@ -298,7 +298,6 @@ function bindEventListeners(tagInput) {
   });
 }
 
-
 /**
  * Initializes the labeling interactivity associated with
  * the labels dropdown link.

From 1ffc694affc0e48217b99b9e9f4f8bbfb12cd7fe Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Mon, 27 Jan 2025 11:39:24 -0500
Subject: [PATCH 34/35] HARMONY-1978: Satisfy TS compiler

---
 services/harmony/public/js/workflow-ui/labels.js | 2 +-
 services/harmony/test/workflow-ui/labels-js.ts   | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/services/harmony/public/js/workflow-ui/labels.js b/services/harmony/public/js/workflow-ui/labels.js
index ffef073fe..8ac6bb09c 100644
--- a/services/harmony/public/js/workflow-ui/labels.js
+++ b/services/harmony/public/js/workflow-ui/labels.js
@@ -327,7 +327,7 @@ labelsModule.getLabelsIntersectionForSelectedJobs = getLabelsIntersectionForSele
 labelsModule.setLabelLinksDisabled = setLabelLinksDisabled;
 labelsModule.setLabelLinksEnabled = setLabelLinksEnabled;
 labelsModule.filterLabelsList = filterLabelsList;
-labelsModule.showAllLabels = showAllLabels
+labelsModule.showAllLabels = showAllLabels;
 labelsModule.toggleLabelNavVisibility = toggleLabelNavVisibility;
 labelsModule.insertNewLabelAlphabetically = insertNewLabelAlphabetically;
 labelsModule.handleLabelsResponse = handleLabelsResponse;
diff --git a/services/harmony/test/workflow-ui/labels-js.ts b/services/harmony/test/workflow-ui/labels-js.ts
index e6bbc64fe..7f179140d 100644
--- a/services/harmony/test/workflow-ui/labels-js.ts
+++ b/services/harmony/test/workflow-ui/labels-js.ts
@@ -12,7 +12,8 @@ beforeEach(async () => {
 describe('labels.js', () => { 
   describe('handleLabelsResponse', () => {
     it('inserts a new label when insertNew is true', async () => {
-      await Labels.handleLabelsResponse({ status: 201, json: async () => ({ labels: ['a new one'] }) }, 'a new one', true, 'it worked!');
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      await Labels.handleLabelsResponse({ status: 201, json: async () => ({ labels: ['a new one'] }) } as any, true, 'it worked!', { });
       const labelsListElement = document.getElementById('labels-list');
       expect(labelsListElement.querySelector('a[name="a new one"]')).to.not.be.undefined;
     });

From f3402eb2e85022be1066362729838593f3333668 Mon Sep 17 00:00:00 2001
From: vinny <vinny.inverso@gmail.com>
Date: Tue, 28 Jan 2025 07:36:59 -0500
Subject: [PATCH 35/35] HARMONY-1978: Explain labelDelimiter

---
 services/harmony/app/models/job.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/services/harmony/app/models/job.ts b/services/harmony/app/models/job.ts
index fa2e2041a..ff892ea71 100644
--- a/services/harmony/app/models/job.ts
+++ b/services/harmony/app/models/job.ts
@@ -499,7 +499,7 @@ export class Job extends DBRecord implements JobRecord {
     includeLabels = false,
   ): Promise<{ data: Job[]; pagination: ILengthAwarePagination }> {
     let query;
-    const labelDelimiter = '*&%$#';
+    const labelDelimiter = '*&%$#'; // can't use comma because some labels contain commas
     if (includeLabels) {
       if (constraints.labels) { // Requesting to limit the jobs based on the provided labels
         query = tx(Job.table)