From f04da6e2788ad76a3db1dc14daa524af1c5a6b02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BE=9D=E7=91=AA=E8=B2=93?= <imacat@mail.imacat.idv.tw>
Date: Mon, 9 Mar 2026 20:53:25 +0800
Subject: [PATCH] Fix memory leaks from Cytoscape instances not
 returned/destroyed

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/Discover/Conformance/MoreModal.vue  | 10 ++++++++--
 src/components/Discover/Map/Filter/TraceFilter.vue | 10 ++++++++--
 src/components/Discover/Map/SidebarTraces.vue      | 10 ++++++++--
 src/module/cytoscapeMapTrace.js                    |  1 +
 4 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/components/Discover/Conformance/MoreModal.vue b/src/components/Discover/Conformance/MoreModal.vue
index 7617523..4dcfe4e 100644
--- a/src/components/Discover/Conformance/MoreModal.vue
+++ b/src/components/Discover/Conformance/MoreModal.vue
@@ -121,7 +121,7 @@
  *   results with expandable activity sequences.
  */
 
-import { ref, computed, watch, nextTick, useTemplateRef } from "vue";
+import { ref, computed, watch, nextTick, useTemplateRef, onBeforeUnmount } from "vue";
 import { storeToRefs } from "pinia";
 import { useConformanceStore } from "@/stores/conformance";
 import cytoscapeMapTrace from "@/module/cytoscapeMapTrace.js";
@@ -151,6 +151,7 @@ const infiniteData = ref(null);
 const maxItems = ref(false);
 const infiniteFinish = ref(true); // Whether infinite scroll loading is complete
 const startNum = ref(0);
+const cyTraceInstance = ref(null);
 const processMap = ref({
   nodes: [],
   edges: [],
@@ -364,8 +365,9 @@ function createCy() {
 
     setNodesData();
     setEdgesData();
+    cyTraceInstance.value?.destroy();
     if (graphId !== null)
-      cytoscapeMapTrace(
+      cyTraceInstance.value = cytoscapeMapTrace(
         processMap.value.nodes,
         processMap.value.edges,
         graphId,
@@ -409,6 +411,10 @@ function handleScroll(event) {
 
   if (overScrollHeight) fetchData();
 }
+
+onBeforeUnmount(() => {
+  cyTraceInstance.value?.destroy();
+});
 </script>
 <style scoped>
 @reference "../../../assets/tailwind.css";
diff --git a/src/components/Discover/Map/Filter/TraceFilter.vue b/src/components/Discover/Map/Filter/TraceFilter.vue
index 5ea48ce..193bc3e 100644
--- a/src/components/Discover/Map/Filter/TraceFilter.vue
+++ b/src/components/Discover/Map/Filter/TraceFilter.vue
@@ -131,7 +131,7 @@
  *   trace detail display.
  */
 
-import { ref, computed, watch, onMounted } from "vue";
+import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
 import { storeToRefs } from "pinia";
 import { useAllMapDataStore } from "@/stores/allMapData";
 import { useLoadingStore } from "@/stores/loading";
@@ -161,6 +161,7 @@ const infiniteFinish = ref(true); // Whether infinite scroll loading is complete
 const chartOptions = ref(null);
 const selectArea = ref([0, 1]);
 const cyTraceRef = ref(null);
+const cyTraceInstance = ref(null);
 
 const traceTotal = computed(() => {
   return baseTraces.value.length;
@@ -413,7 +414,8 @@ function createCy() {
 
   setNodesData();
   setEdgesData();
-  cytoscapeMapTrace(processMap.value.nodes, processMap.value.edges, graphId);
+  cyTraceInstance.value?.destroy();
+  cyTraceInstance.value = cytoscapeMapTrace(processMap.value.nodes, processMap.value.edges, graphId);
 }
 
 /**
@@ -461,6 +463,10 @@ onMounted(() => {
   selectArea.value = [0, traceTotal.value];
   isLoading.value = false;
 });
+
+onBeforeUnmount(() => {
+  cyTraceInstance.value?.destroy();
+});
 </script>
 
 <style scoped>
diff --git a/src/components/Discover/Map/SidebarTraces.vue b/src/components/Discover/Map/SidebarTraces.vue
index 4d0a959..c61cfcf 100644
--- a/src/components/Discover/Map/SidebarTraces.vue
+++ b/src/components/Discover/Map/SidebarTraces.vue
@@ -110,7 +110,7 @@
  *   clickable trace lists for highlighting on the map.
  */
 
-import { ref, computed, watch } from "vue";
+import { ref, computed, watch, onBeforeUnmount } from "vue";
 import { storeToRefs } from "pinia";
 import { useLoadingStore } from "@/stores/loading";
 import { useAllMapDataStore } from "@/stores/allMapData";
@@ -140,6 +140,7 @@ const infinitMaxItems = ref(false);
 const infiniteData = ref([]);
 const infiniteFinish = ref(true); // Whether infinite scroll loading is complete
 const cyTraceRef = ref(null);
+const cyTraceInstance = ref(null);
 
 const traceTotal = computed(() => {
   return traces.value.length;
@@ -301,7 +302,8 @@ function createCy() {
 
   setNodesData();
   setEdgesData();
-  cytoscapeMapTrace(processMap.value.nodes, processMap.value.edges, graphId);
+  cyTraceInstance.value?.destroy();
+  cyTraceInstance.value = cytoscapeMapTrace(processMap.value.nodes, processMap.value.edges, graphId);
 }
 
 /**
@@ -353,6 +355,10 @@ async function fetchData() {
     console.error("Failed to load data:", error);
   }
 }
+
+onBeforeUnmount(() => {
+  cyTraceInstance.value?.destroy();
+});
 </script>
 
 <style scoped>
diff --git a/src/module/cytoscapeMapTrace.js b/src/module/cytoscapeMapTrace.js
index 0660b43..0e053cb 100644
--- a/src/module/cytoscapeMapTrace.js
+++ b/src/module/cytoscapeMapTrace.js
@@ -112,4 +112,5 @@ export default function cytoscapeMapTrace(nodes, edges, graphId) {
     tip?.destroy();
     tip = null;
   });
+  return cy;
 }