fix: improve row update of aggrid table actions II

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

@@ -126,20 +126,21 @@
 			['ContextPanel', contextPanel]
 		])
 
-		new AppAggridTableActions({
+		const ta = new AppAggridTableActions({
 			target: c.eGui,
 			props: {
+				p,
 				id: id,
 				actions,
 				rowIndex,
 				row,
 				render: true,
 				wrapActions: resolvedConfig.wrapActions,
-				selectRow: () => {
+				selectRow: (p) => {
 					toggleRow(p)
 					p.node.setSelected(true)
 				},
-				onSet: (id, value) => {
+				onSet: (id, value, rowIndex) => {
 					if (!inputs[id]) {
 						inputs[id] = { [rowIndex]: value }
 					} else {
@@ -148,7 +149,7 @@
 
 					outputs?.inputs.set(inputs, true)
 				},
-				onRemove: (id) => {
+				onRemove: (id, rowIndex) => {
 					if (inputs?.[id] == undefined) {
 						return
 					}
@@ -163,6 +164,14 @@
 			},
 			context: componentContext
 		})
+		return {
+			destroy: () => {
+				ta.$destroy()
+			},
+			refresh(params) {
+				ta.$set({ rowIndex: params.node.rowIndex ?? 0, row: params.data, p: params })
+			}
+		}
 	})
 
 	function transformColumnDefs(columnDefs: any[] | undefined) {
@@ -184,7 +193,7 @@
 				field: 'delete',
 				headerName: 'Delete',
 				cellRenderer: cellRendererFactory((c, p) => {
-					new Button({
+					let ta = new Button({
 						target: c.eGui,
 						props: {
 							btnClasses: 'w-12',
@@ -197,6 +206,14 @@
 							nonCaptureEvent: true
 						}
 					})
+					return {
+						destroy: () => {
+							ta.$destroy()
+						},
+						refresh(params) {
+							//
+						}
+					}
 				}),
 				cellRendererParams: {
 					onClick: (e) => {

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

@@ -123,7 +123,7 @@
 			}
 
 			if (!deepEqual(outputs?.selectedRow?.peak(), data)) {
-				outputs?.selectedRow.set(data)
+				outputs?.selectedRow?.set(data)
 			}
 
 			if (iterContext && listInputs) {
@@ -205,17 +205,18 @@
 		let ta = new AppAggridTableActions({
 			target: c.eGui,
 			props: {
+				p,
 				id: id,
 				actions,
 				rowIndex,
 				row,
 				render,
 				wrapActions: resolvedConfig.wrapActions,
-				selectRow: () => {
+				selectRow: (p) => {
 					toggleRow(p)
 					p.node.setSelected(true)
 				},
-				onSet: (id, value) => {
+				onSet: (id, value, rowIndex) => {
 					if (!inputs[id]) {
 						inputs[id] = { [rowIndex]: value }
 					} else {
@@ -224,7 +225,7 @@
 
 					outputs?.inputs.set(inputs, true)
 				},
-				onRemove: (id) => {
+				onRemove: (id, rowIndex) => {
 					if (inputs?.[id] == undefined) {
 						return
 					}
@@ -245,7 +246,7 @@
 				ta.$destroy()
 			},
 			refresh(params) {
-				ta.$set({ rowIndex: params.node.rowIndex ?? 0, row: params.data })
+				ta.$set({ rowIndex: params.node.rowIndex ?? 0, row: params.data, p: params })
 			}
 		}
 	})

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

@@ -16,16 +16,18 @@
 	import ComponentOutputViewer from '$lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte'
 	import { connectOutput } from '$lib/components/apps/editor/appUtils'
 	import RowWrapper from '../../layout/RowWrapper.svelte'
+	import type { ICellRendererParams } from 'ag-grid-community'
 
+	export let p: ICellRendererParams<any>
 	export let id: string
 	export let render: boolean
 	export let actions: TableAction[] = []
 	export let rowIndex: number
 	export let row: { original: Record<string, any> }
-	export let onSet: (id: string, value: any) => void
-	export let onRemove: (id: string) => void
+	export let onSet: (id: string, value: any, rowIndex: number) => void
+	export let onRemove: (id: string, rowIndex: number) => void
 	export let wrapActions: boolean | undefined = undefined
-	export let selectRow: () => void
+	export let selectRow: (params: ICellRendererParams<any>) => void
 
 	const dispatch = createEventDispatcher()
 	const { selectedComponent, hoverStore, mode, connectingInput } =
@@ -52,7 +54,12 @@
 	})
 </script>
 
-<RowWrapper value={row} index={rowIndex} {onSet} {onRemove}>
+<RowWrapper
+	value={row}
+	index={rowIndex}
+	onSet={(id, value) => onSet(id, value, rowIndex)}
+	onRemove={(id) => onRemove(id, rowIndex)}
+>
 	<div
 		class={twMerge(
 			'flex flex-row justify-center items-center gap-4 h-full px-4 py-1 w-full',
@@ -76,7 +83,7 @@
 					}
 				}}
 				on:pointerdown|stopPropagation={(e) => {
-					selectRow()
+					selectRow(p)
 
 					if (!$connectingInput.opened) {
 						$selectedComponent = [action.id]
@@ -178,7 +185,7 @@
 							noWFull
 							preclickAction={async () => {
 								dispatch('toggleRow')
-								selectRow()
+								selectRow(p)
 							}}
 							id={action.id}
 							customCss={action.customCss}
@@ -204,7 +211,7 @@
 							onToggle={action.onToggle}
 							preclickAction={async () => {
 								dispatch('toggleRow')
-								selectRow()
+								selectRow(p)
 							}}
 							verticalAlignment="center"
 							{controls}
@@ -223,7 +230,7 @@
 							onSelect={action.onSelect}
 							preclickAction={async () => {
 								dispatch('toggleRow')
-								selectRow()
+								selectRow(p)
 							}}
 							{controls}
 						/>
@@ -235,7 +242,7 @@
 						{render}
 						preclickAction={async () => {
 							dispatch('toggleRow')
-							selectRow()
+							selectRow(p)
 						}}
 						noWFull
 						id={action.id}
@@ -260,7 +267,7 @@
 						onToggle={action.onToggle}
 						preclickAction={async () => {
 							dispatch('toggleRow')
-							selectRow()
+							selectRow(p)
 						}}
 					/>
 				{:else if action.type == 'selectcomponent'}
@@ -277,7 +284,7 @@
 						onSelect={action.onSelect}
 						preclickAction={async () => {
 							dispatch('toggleRow')
-							selectRow()
+							selectRow(p)
 						}}
 					/>
 				{/if}