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

@@ -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";

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>

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>

src/module/cytoscapeMapTrace.js

@@ -112,4 +112,5 @@ export default function cytoscapeMapTrace(nodes, edges, graphId) {
     tip?.destroy();
     tip = null;
   });
+  return cy;
 }