Fix memory leaks from Tippy.js instances and unremoved event listeners

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/AccountMenu/AcctMenu.vue

@@ -59,7 +59,7 @@
  *   with links to account management, my account, and logout.
  */
 
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, onBeforeUnmount, ref } from "vue";
 import { storeToRefs } from "pinia";
 import i18next from "@/i18n/i18n";
 import { useRouter, useRoute } from "vue-router";
@@ -106,12 +106,14 @@ const onBtnMyAccountClick = async () => {
   await router.push("/my-account");
 };
 
-/** Registers a click listener to close the menu when clicking outside. */
+/**
-const clickOtherPlacesThenCloseMenu = () => {
+ * Closes the menu when clicking outside. Stored as a named
+ * function so it can be removed in onBeforeUnmount.
+ * @param {MouseEvent} event - The click event.
+ */
+const handleDocumentClick = (event) => {
   const acctMgmtButton = document.getElementById("acct_mgmt_button");
   const acctMgmtMenu = document.getElementById("account_menu");
-
-  document.addEventListener("click", (event) => {
   if (
     acctMgmtMenu &&
     acctMgmtButton &&
@@ -120,7 +122,11 @@ const clickOtherPlacesThenCloseMenu = () => {
   ) {
     acctMgmtStore.closeAcctMenu();
   }
-  });
+};
+
+/** Registers a click listener to close the menu when clicking outside. */
+const clickOtherPlacesThenCloseMenu = () => {
+  document.addEventListener("click", handleDocumentClick);
 };
 
 /** Navigates to the Account Admin page. */
@@ -161,6 +167,10 @@ onMounted(async () => {
   await getIsAdminValue();
   clickOtherPlacesThenCloseMenu();
 });
+
+onBeforeUnmount(() => {
+  document.removeEventListener("click", handleDocumentClick);
+});
 </script>
 
 <style>

src/module/cytoscapeMap.js

@@ -306,6 +306,7 @@ export default function cytoscapeMap(
   // creat tippy.js
   let tip;
   cy.on("mouseover", "node", function (event) {
+    tip?.destroy();
     const node = event.target;
     let ref = node.popperRef();
     let dummyDomEle = document.createElement("div");
@@ -319,7 +320,8 @@ export default function cytoscapeMap(
     if (node.data("label").length > 10) tip.show();
   });
   cy.on("mouseout", "node", function (event) {
-    tip?.hide();
+    tip?.destroy();
+    tip = null;
   });
 
   // here we remember and recall positions

src/module/cytoscapeMapTrace.js

@@ -96,6 +96,7 @@ export default function cytoscapeMapTrace(nodes, edges, graphId) {
   // creat tippy.js
   let tip;
   cy.on("mouseover", "node", function (event) {
+    tip?.destroy();
     const node = event.target;
     let ref = node.popperRef();
     let dummyDomEle = document.createElement("div");
@@ -109,6 +110,7 @@ export default function cytoscapeMapTrace(nodes, edges, graphId) {
     tip.show();
   });
   cy.on("mouseout", "node", function (event) {
-    tip.hide();
+    tip?.destroy();
+    tip = null;
   });
 }

src/views/Discover/Conformance/ConformancePage.vue

@@ -75,6 +75,8 @@ const {
   conformanceFileName,
 } = storeToRefs(conformanceStore);
 
+let loadingTimerId = null;
+
 // Created logic
 (async () => {
   isLoading.value = true;
@@ -109,7 +111,7 @@ const {
   } catch (error) {
     console.error("Failed to initialize conformance:", error);
   } finally {
-    setTimeout(() => (isLoading.value = false), 500);
+    loadingTimerId = setTimeout(() => (isLoading.value = false), 500);
   }
 })();
 
@@ -124,6 +126,7 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
+  clearTimeout(loadingTimerId);
   conformanceLogId.value = null;
   conformanceFilterId.value = null;
   conformanceLogCreateCheckId.value = null;

src/views/Files/FilesPage.vue

@@ -465,7 +465,7 @@
  *   and file operations (rename, delete).
  */
 
-import { ref, computed, watch, onMounted } from "vue";
+import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
 import { useRouter } from "vue-router";
 import { storeToRefs } from "pinia";
 import { useMapCompareStore } from "@/stores/mapCompareStore";
@@ -917,19 +917,29 @@ function getGridSortData(event) {
   }
 }
 
+/**
+ * Clears the active file selection when clicking outside a list item.
+ * @param {MouseEvent} e - The click event.
+ */
+const handleWindowClick = (e) => {
+  const clickedLi = e.target.closest("li");
+  if (!clickedLi || !clickedLi.id.startsWith("li")) isActive.value = null;
+};
+
 // Mounted
 onMounted(() => {
   isLoading.value = true;
   store.fetchAllFiles();
-  window.addEventListener("click", (e) => {
+  window.addEventListener("click", handleWindowClick);
-    const clickedLi = e.target.closest("li");
-    if (!clickedLi || !clickedLi.id.startsWith("li")) isActive.value = null;
-  });
   // Add the .scrollbar class to the DataTable tbody
   const tbodyElement = document.querySelector(".p-datatable-tbody");
   tbodyElement?.classList.add("scrollbar");
   isLoading.value = false;
 });
+
+onBeforeUnmount(() => {
+  window.removeEventListener("click", handleWindowClick);
+});
 </script>
 <style scoped>
 @reference "../../assets/tailwind.css";