improve agGrid behavior with extraConfig

frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte

@@ -33,7 +33,7 @@
 		SkipForward
 	} from 'lucide-svelte'
 	import { twMerge } from 'tailwind-merge'
-	import { initCss } from '$lib/components/apps/utils'
+	import { deepCloneWithFunctions, initCss } from '$lib/components/apps/utils'
 	import ResolveStyle from '../../helpers/ResolveStyle.svelte'
 
 	import AppAggridTableActions from './AppAggridTableActions.svelte'
@@ -193,7 +193,7 @@
 		}
 	}
 
-	let extraConfig = resolvedConfig.extraConfig
+	let extraConfig = deepCloneWithFunctions(resolvedConfig.extraConfig)
 	let api: GridApi<any> | undefined = undefined
 	let eGui: HTMLDivElement
 	let state: any = undefined
@@ -302,7 +302,9 @@
 			? (data?.[resolvedConfig?.rowIdCol] ?? data['__index'])
 			: data['__index']
 	}
+
 	function mountGrid() {
+		// console.log(resolvedConfig?.extraConfig)
 		if (eGui) {
 			try {
 				let columnDefs =
@@ -358,7 +360,7 @@
 						suppressRowDeselection: true,
 						suppressDragLeaveHidesColumns: true,
 						enableCellTextSelection: true,
-						...(resolvedConfig?.extraConfig ?? {}),
+						...deepCloneWithFunctions(resolvedConfig?.extraConfig ?? {}),
 						onStateUpdated: (e) => {
 							state = e?.api?.getState()
 							resolvedConfig?.extraConfig?.['onStateUpdated']?.(e)
@@ -422,7 +424,7 @@
 	$: value && updateValue()
 
 	$: if (!deepEqual(extraConfig, resolvedConfig.extraConfig)) {
-		extraConfig = resolvedConfig.extraConfig
+		extraConfig = deepCloneWithFunctions(resolvedConfig.extraConfig)
 		if (extraConfig) {
 			api?.updateGridOptions(extraConfig)
 		}
@@ -501,7 +503,7 @@
 				rowHeight: resolvedConfig.compactness
 					? rowHeights[resolvedConfig.compactness]
 					: rowHeights['normal'],
-				...(resolvedConfig?.extraConfig ?? {})
+				...deepCloneWithFunctions(resolvedConfig?.extraConfig ?? {})
 			})
 		} catch (e) {
 			console.error(e)

frontend/src/lib/components/apps/utils.ts

@@ -164,12 +164,54 @@ export function toStatic(
 	return { app: newApp, summary }
 }
 
+// function hasCycle(path, obj, seen = new Set()) {
+// 	if (obj && typeof obj === 'object') {
+// 		if (seen.has(obj)) {
+// 			console.log('cycle detected', path)
+// 			return true // cycle detected
+// 		}
+// 		seen.add(obj)
+// 		for (const key in obj) {
+// 			if (hasCycle(path + '.' + key, obj[key], seen)) {
+// 				return true
+// 			}
+// 		}
+// 		seen.delete(obj) // backtrack for other branches
+// 	}
+// 	return false
+// }
+
+export function deepCloneWithFunctions(obj) {
+	if (obj === null || typeof obj !== 'object') return obj
+	if (typeof obj === 'function') return obj
+
+	if (Array.isArray(obj)) {
+		return obj.map(deepCloneWithFunctions)
+	}
+
+	const cloned = {}
+	for (const key in obj) {
+		cloned[key] = deepCloneWithFunctions(obj[key])
+	}
+	return cloned
+}
+
 export function buildExtraLib(
 	components: Record<string, Record<string, Output<any>>>,
 	idToExclude: string,
 	state: Record<string, any>,
 	goto: boolean
 ): string {
+	// console.log(
+	// 	Object.entries(components).map(([k, v]) => [
+	// 		k,
+	// 		Object.values(v).map((x) => x.peak()),
+	// 		hasCycle(
+	// 			k,
+	// 			Object.values(v).map((x) => x.peak())
+	// 		)
+	// 	])
+	// )
 	const cs = Object.entries(components)
 		.filter(([k, v]) => k != idToExclude && k != 'state')
 		.map(([k, v]) => [k, Object.fromEntries(Object.entries(v).map(([k, v]) => [k, v.peak()]))])