Merge pull request #227 from pathsim/fix/performance-and-memory-issues

Fix/performance and memory issues

Author: milanofthe

src/lib/components/ResizablePanel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onDestroy } from 'svelte';
 	import { fly } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 	import { untrack } from 'svelte';
@@ -115,6 +116,9 @@
 		}
 	});
 
+	// Track active resize cleanup for component destroy
+	let activeCleanup: (() => void) | null = null;
+
 	function startResize(edge: 'left' | 'right' | 'top' | 'bottom') {
 		return (event: MouseEvent) => {
 			event.preventDefault();
@@ -146,19 +150,29 @@
 				}
 			}
 
-			function onMouseUp() {
-				isResizing = false;
-				resizeEdge = null;
+			function cleanup() {
 				document.removeEventListener('mousemove', onMouseMove);
 				document.removeEventListener('mouseup', onMouseUp);
 				document.body.classList.remove('resizing-ew', 'resizing-ns');
+				activeCleanup = null;
 			}
 
+			function onMouseUp() {
+				isResizing = false;
+				resizeEdge = null;
+				cleanup();
+			}
+
+			activeCleanup = cleanup;
 			document.addEventListener('mousemove', onMouseMove);
 			document.addEventListener('mouseup', onMouseUp);
 			document.body.classList.add((edge === 'left' || edge === 'right') ? 'resizing-ew' : 'resizing-ns');
 		};
 	}
+
+	onDestroy(() => {
+		activeCleanup?.();
+	});
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions, a11y_no_noninteractive_element_interactions -->

src/lib/components/dialogs/BlockPropertiesDialog.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onDestroy } from 'svelte';
 	import { fade, scale } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 	import { graphStore } from '$lib/stores/graph';
@@ -24,7 +25,7 @@
 	let nodeId = $state<string | null>(null);
 	let node = $state<NodeInstance | null>(null);
 
-	nodeDialogStore.subscribe((id) => {
+	const unsubscribeDialog = nodeDialogStore.subscribe((id) => {
 		nodeId = id;
 		if (id) {
 			node = graphStore.getNode(id) || null;
@@ -34,12 +35,17 @@
 	});
 
 	// Keep node updated when params change
-	graphStore.nodesArray.subscribe((nodes) => {
+	const unsubscribeNodes = graphStore.nodesArray.subscribe((nodes) => {
 		if (nodeId) {
 			node = nodes.find(n => n.id === nodeId) || null;
 		}
 	});
 
+	onDestroy(() => {
+		unsubscribeDialog();
+		unsubscribeNodes();
+	});
+
 	// Get type definition
 	const typeDef = $derived(node ? nodeRegistry.get(node.type) : null);
 

src/lib/components/dialogs/CodePreviewDialog.svelte

@@ -24,7 +24,7 @@
 	let copied = $state(false);
 
 	// Subscribe to theme changes
-	themeStore.subscribe((theme) => {
+	const unsubscribeTheme = themeStore.subscribe((theme) => {
 		currentTheme = theme;
 		if (editorView && cmModules && editorContainer) {
 			recreateEditor();
@@ -115,6 +115,7 @@
 	}
 
 	onDestroy(() => {
+		unsubscribeTheme();
 		destroyEditor();
 	});
 </script>

src/lib/components/dialogs/EventPropertiesDialog.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onDestroy } from 'svelte';
 	import { fade, scale } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 	import { get } from 'svelte/store';
@@ -22,7 +23,7 @@
 	let eventId = $state<string | null>(null);
 	let event = $state<EventInstance | null>(null);
 
-	eventDialogStore.subscribe((id) => {
+	const unsubscribeDialog = eventDialogStore.subscribe((id) => {
 		eventId = id;
 		if (id) {
 			event = eventStore.getEvent(id) || null;
@@ -32,12 +33,17 @@
 	});
 
 	// Keep event updated when params change
-	eventStore.eventsArray.subscribe((events) => {
+	const unsubscribeEvents = eventStore.eventsArray.subscribe((events) => {
 		if (eventId) {
 			event = events.find(e => e.id === eventId) || null;
 		}
 	});
 
+	onDestroy(() => {
+		unsubscribeDialog();
+		unsubscribeEvents();
+	});
+
 	// Get type definition
 	const typeDef = $derived(event ? eventRegistry.get(event.type) : null);
 

src/lib/components/dialogs/ExportDialog.svelte

@@ -27,7 +27,7 @@
 	let currentTheme = $state<Theme>('dark');
 
 	// Subscribe to theme changes
-	themeStore.subscribe((theme) => {
+	const unsubscribeTheme = themeStore.subscribe((theme) => {
 		currentTheme = theme;
 		if (editorView && cmModules && editorContainer) {
 			recreateEditor();
@@ -125,6 +125,7 @@
 	}
 
 	onDestroy(() => {
+		unsubscribeTheme();
 		destroyEditor();
 	});
 </script>

src/lib/components/dialogs/PlotOptionsDialog.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onDestroy } from 'svelte';
 	import { fade, scale } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 	import Icon from '$lib/components/icons/Icon.svelte';
@@ -37,6 +38,10 @@
 		settings = s;
 	});
 
+	onDestroy(() => {
+		unsubscribe();
+	});
+
 	function handleKeydown(event: KeyboardEvent) {
 		if (event.key === 'Escape') {
 			onClose();

src/lib/components/dialogs/SearchDialog.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onDestroy } from 'svelte';
 	import { fade, scale } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 	import { graphStore, type SearchableNode } from '$lib/stores/graph';
@@ -21,10 +22,14 @@
 	let currentPath = $state<string[]>([]);
 
 	// Subscribe to current path for prioritizing current view
-	graphStore.currentPath.subscribe((path) => {
+	const unsubscribePath = graphStore.currentPath.subscribe((path) => {
 		currentPath = path;
 	});
 
+	onDestroy(() => {
+		unsubscribePath();
+	});
+
 	// Refresh node list when dialog opens
 	$effect(() => {
 		if (open) {

src/routes/+page.svelte

@@ -705,19 +705,20 @@
 		// Prevent concurrent simulation runs (synchronous check for rapid key presses)
 		if (simRunning || isRunStarting || pyodideLoading) return;
 
+		// Set flag before any async operations to prevent race conditions
+		isRunStarting = true;
+
 		// Auto-initialize if not ready
 		if (!pyodideReady) {
 			try {
 				await initPyodide();
 			} catch (error) {
 				console.error('Failed to initialize Pyodide:', error);
+				isRunStarting = false;
 				return;
 			}
 		}
 
-		// Set flag synchronously to prevent race conditions during validation
-		isRunStarting = true;
-
 		try {
 			// Run simulation
 			const { nodes, connections } = graphStore.toJSON();