Merge pull request #1031 from mermaid-js/sidv/optimizeDebounce

Simplify debounce handling

.github/workflows/tests.yml

@@ -48,4 +48,3 @@ jobs:
           parallel: true
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-          MERMAID_DISABLE_DEBOUNCE: 'true'

package.json

@@ -5,7 +5,7 @@
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
-		"dev:test": "MERMAID_DISABLE_DEBOUNCE=true yarn dev",
+		"dev:test": "yarn dev",
 		"build": "vite build",
 		"preview": "vite preview",
 		"lint": "prettier --check --cache --plugin-search-dir=. .;eslint --ignore-path .gitignore .",

src/lib/components/actions.svelte

@@ -115,19 +115,19 @@
 
 	const onCopyClipboard = (event: Event) => {
 		exportImage(event, clipboardCopy);
-		void logEvent('copyClipboard');
+		logEvent('copyClipboard');
 	};
 
 	const onDownloadPNG = (event: Event) => {
 		exportImage(event, downloadImage);
-		void logEvent('download', {
+		logEvent('download', {
 			type: 'png'
 		});
 	};
 
 	const onDownloadSVG = () => {
 		simulateDownload(getFileName('svg'), `data:image/svg+xml;base64,${getBase64SVG()}`);
-		void logEvent('download', {
+		logEvent('download', {
 			type: 'svg'
 		});
 	};
@@ -135,7 +135,7 @@
 	const onCopyMarkdown = () => {
 		(document.getElementById('markdown') as HTMLInputElement).select();
 		document.execCommand('Copy');
-		void logEvent('copyMarkdown');
+		logEvent('copyMarkdown');
 	};
 
 	let gistURL = '';
@@ -151,7 +151,7 @@
 			alert('Please enter a Gist URL first');
 		}
 		window.location.href = `${window.location.pathname}?gist=${gistURL}`;
-		void logEvent('loadGist');
+		logEvent('loadGist');
 	};
 
 	let iUrl: string;

src/lib/components/editor.svelte

@@ -7,7 +7,6 @@
 	import { onMount } from 'svelte';
 	import initEditor from 'monaco-mermaid';
 	import { logEvent } from '$lib/util/stats';
-	import { debounceEnabled } from '$lib/util/env';
 
 	let divEl: HTMLDivElement = null;
 	let editor: monaco.editor.IStandaloneCodeEditor;
@@ -37,8 +36,8 @@
 			Monaco?.editor.setModelLanguage(editor.getModel(), language);
 		}
 
-		// Display/clear error
-		Monaco?.editor.setModelMarkers(editor.getModel(), 'test', errorMarkers);
+		// Display/clear errors
+		Monaco?.editor.setModelMarkers(editor.getModel(), 'mermaid', errorMarkers);
 	});
 
 	themeStore.subscribe(({ isDark }) => {
@@ -53,21 +52,6 @@
 		}
 	};
 
-	// Debounce state updates to avoid performance issues
-	let debounce: { [key: string]: number } = {};
-	const updateHandler = (newText: string) => {
-		text = newText;
-		const mode = $stateStore.editorMode;
-		if (debounceEnabled) {
-			clearTimeout(debounce[mode]);
-			debounce[mode] = window.setTimeout(() => {
-				handleUpdate(text, mode);
-			}, 300);
-		} else {
-			handleUpdate(text, mode);
-		}
-	};
-
 	const loadMonaco = async () => {
 		let i = 0;
 		while (i++ < 500) {
@@ -87,7 +71,8 @@
 		initEditor(Monaco);
 		editor = Monaco.editor.create(divEl, editorOptions);
 		editor.onDidChangeModelContent(() => {
-			updateHandler(editor.getValue());
+			text = editor.getValue();
+			handleUpdate(text, $stateStore.editorMode);
 		});
 		editor.addAction({
 			id: 'mermaid-render-diagram',
@@ -95,7 +80,7 @@
 			keybindings: [Monaco.KeyMod.CtrlCmd | Monaco.KeyCode.Enter],
 			run: function () {
 				syncDiagram();
-				void logEvent('renderDiagram', {
+				logEvent('renderDiagram', {
 					method: 'keyboadShortcut'
 				});
 			}

src/lib/components/preset.svelte

@@ -100,7 +100,7 @@
 			updateDiagram: true,
 			resetPanZoom: true
 		});
-		void logEvent('loadSampleDiagram', { diagramType });
+		logEvent('loadSampleDiagram', { diagramType });
 	};
 </script>
 

src/lib/components/view.svelte

@@ -3,7 +3,7 @@
 	import { onMount } from 'svelte';
 	import mermaid from 'mermaid';
 	import panzoom from 'svg-pan-zoom';
-	import type { State } from '$lib/types';
+	import type { State, ValidatedState } from '$lib/types';
 	import { logEvent } from '$lib/util/stats';
 
 	let code = '';
@@ -16,16 +16,12 @@
 	let manualUpdate = true;
 	let panZoomEnabled = $stateStore.panZoom;
 	let pzoom: SvgPanZoom.Instance;
-	let debounce: number;
 
 	const handlePanZoomChange = () => {
 		const pan = pzoom.getPan();
 		const zoom = pzoom.getZoom();
-		clearTimeout(debounce);
-		debounce = window.setTimeout(() => {
-			updateCodeStore({ pan, zoom });
-			void logEvent('panZoom');
-		}, 200);
+		updateCodeStore({ pan, zoom });
+		logEvent('panZoom');
 	};
 
 	const handlePanZoom = (state: State) => {
@@ -53,50 +49,53 @@
 		});
 	};
 
+	const handleStateChange = (state: ValidatedState) => {
+		if (state.error !== undefined) {
+			error = true;
+			return;
+		}
+		error = false;
+		try {
+			if (container && state && (state.updateDiagram || state.autoSync)) {
+				if (!state.autoSync) {
+					$inputStateStore.updateDiagram = false;
+				}
+				outOfSync = false;
+				manualUpdate = true;
+				if (code === state.code && config === state.mermaid && panZoomEnabled === state.panZoom) {
+					// Do not render if there is no change in Code/Config/PanZoom
+					return;
+				}
+				code = state.code;
+				config = state.mermaid;
+				panZoomEnabled = state.panZoom;
+				const scroll = view.parentElement.scrollTop;
+				delete container.dataset.processed;
+				mermaid.initialize(Object.assign({}, JSON.parse(state.mermaid)));
+				mermaid.render('graph-div', code, (svgCode) => {
+					if (svgCode.length > 0) {
+						handlePanZoom(state);
+						container.innerHTML = svgCode;
+						const graphDiv = document.getElementById('graph-div');
+						graphDiv.setAttribute('height', '100%');
+						graphDiv.style.maxWidth = '100%';
+					}
+				});
+				view.parentElement.scrollTop = scroll;
+				error = false;
+			} else if (manualUpdate) {
+				manualUpdate = false;
+			} else if (code !== state.code || config !== state.mermaid) {
+				outOfSync = true;
+			}
+		} catch (e) {
+			console.error('view fail', e);
+			error = true;
+		}
+	};
 	onMount(() => {
 		stateStore.subscribe((state) => {
-			if (state.error !== undefined) {
-				error = true;
-				return;
-			}
-			error = false;
-			try {
-				if (container && state && (state.updateDiagram || state.autoSync)) {
-					if (!state.autoSync) {
-						$inputStateStore.updateDiagram = false;
-					}
-					outOfSync = false;
-					manualUpdate = true;
-					if (code === state.code && config === state.mermaid && panZoomEnabled === state.panZoom) {
-						// Do not render if there is no change in Code/Config/PanZoom
-						return;
-					}
-					code = state.code;
-					config = state.mermaid;
-					panZoomEnabled = state.panZoom;
-					const scroll = view.parentElement.scrollTop;
-					delete container.dataset.processed;
-					mermaid.initialize(Object.assign({}, JSON.parse(state.mermaid)));
-					mermaid.render('graph-div', code, (svgCode) => {
-						if (svgCode.length > 0) {
-							handlePanZoom(state);
-							container.innerHTML = svgCode;
-							const graphDiv = document.getElementById('graph-div');
-							graphDiv.setAttribute('height', '100%');
-							graphDiv.style.maxWidth = '100%';
-						}
-					});
-					view.parentElement.scrollTop = scroll;
-					error = false;
-				} else if (manualUpdate) {
-					manualUpdate = false;
-				} else if (code !== state.code || config !== state.mermaid) {
-					outOfSync = true;
-				}
-			} catch (e) {
-				console.error('view fail', e);
-				error = true;
-			}
+			handleStateChange(state);
 		});
 		window.addEventListener('resize', () => {
 			if ($stateStore.panZoom && pzoom) {

src/lib/util/env.ts

@@ -2,4 +2,3 @@ export const rendererUrl: string =
 	(import.meta.env.MERMAID_RENDERER_URL as string) ?? 'https://mermaid.ink';
 export const krokiRendererUrl: string =
 	(import.meta.env.MERMAID_KROKI_RENDERER_URL as string) ?? 'https://kroki.io';
-export const debounceEnabled: boolean = import.meta.env.MERMAID_DISABLE_DEBOUNCE !== 'true';

src/lib/util/state.ts

@@ -162,9 +162,13 @@ export const toggleDarkTheme = (dark: boolean): void => {
 	});
 };
 
+let urlDebounce: number;
 export const initURLSubscription = (): void => {
 	stateStore.subscribe(({ serialized }) => {
-		history.replaceState(undefined, undefined, `#${serialized}`);
+		clearTimeout(urlDebounce);
+		urlDebounce = window.setTimeout(() => {
+			history.replaceState(undefined, undefined, `#${serialized}`);
+		}, 250);
 	});
 };
 

src/lib/util/stats.ts

@@ -42,21 +42,20 @@ const detectType = (text: string): string => {
 		.split(' ')[0];
 };
 
-// manual debounce
-let timeout: number;
 export const saveStatistics = (graph: string): void => {
+	const graphType = detectType(graph);
+	console.debug(`ga: send event: render ${graphType}`);
+	logEvent('render', { graphType });
+};
+
+// manual debounce to only send analytics event every 5 seconds if same event is repeated frequently.
+const timeouts: Record<string, number> = {};
+export const logEvent = (name: string, data?: unknown): void => {
 	if (analytics) {
-		clearTimeout(timeout);
-		// Only save statistics after a 5 sec delay
-		timeout = window.setTimeout(() => {
-			const graphType = detectType(graph);
-			console.debug(`ga: send event: render ${graphType}`);
-			void logEvent('render', { graphType });
+		const key = data ? JSON.stringify({ name, data }) : name;
+		clearTimeout(timeouts[key]);
+		timeouts[key] = window.setTimeout(() => {
+			void analytics.track(name, data);
 		}, 5000);
 	}
 };
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const logEvent = async (name: string, data?: any): Promise<void> => {
-	await analytics?.track(name, data);
-};

src/lib/util/theme.ts

@@ -34,5 +34,5 @@ export const setTheme = (theme: string): void => {
 	const isDark = darkThemes.includes(theme);
 	console.log('Setting theme', theme);
 	themeStore.set({ theme, isDark });
-	void logEvent('themeChange', { theme, isDark });
+	logEvent('themeChange', { theme, isDark });
 };