improve findings

anatomy/static/js/anatomy.js

@@ -12,6 +12,10 @@ window.control_pressed = false;
 
 
 $(document).ready(function () {
+    // Select all text input fields and textareas with the clear button
+    clearableTextAreaSetup();
+
+
   document.body.addEventListener("htmx:responseError", function(e) {
       let el = document.getElementById("htmx-error");
       var error;
@@ -193,6 +197,40 @@ window.addEventListener('loadDicomViewerUrls', function (e) {
   loadDicomViewer(e.detail.images, e.detail.annotations);
 }, false);
 
+function clearableTextAreaSetup() {
+  const textFields = document.querySelectorAll(".position-relative input[type='text'], .position-relative textarea");
+
+  textFields.forEach((field) => {
+    const wrapper = field.closest(".position-relative");
+    const clearButton = wrapper.querySelector(".clear-input-button");
+
+    // Function to toggle the visibility of the clear button
+    const toggleClearButton = () => {
+      if (field.value.trim() !== "" && wrapper.matches(":hover")) {
+        clearButton.style.display = "inline-block"; // Show the button
+      } else {
+        clearButton.style.display = "none"; // Hide the button
+      }
+    };
+
+    // Initial check
+    toggleClearButton();
+
+    // Add event listeners to monitor changes in the input field or textarea
+    field.addEventListener("input", toggleClearButton);
+
+    // Add hover event listeners to the wrapper
+    wrapper.addEventListener("mouseenter", toggleClearButton);
+    wrapper.addEventListener("mouseleave", toggleClearButton);
+
+    // Add click event to clear the field or textarea
+    clearButton.addEventListener("click", function () {
+      field.value = ""; // Clear the field
+      toggleClearButton();
+    });
+  });
+}
+
 function loadDicomViewer(images_to_load, annotations_to_load) {
   console.log("loadDicomViewer", images_to_load);
   let single_dicom = document.getElementById("single-dicom-viewer");