fix: improve agGrid persistence when result change + setSelectedIndex

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

@@ -20,7 +20,7 @@
 	export let initializing: boolean | undefined = undefined
 	export let render: boolean
 
-	let result: Record<number, any>[] | undefined = undefined
+	let result: any[] | undefined = undefined
 
 	const { worldStore, selectedComponent, componentControl } =
 		getContext<AppViewerContext>('AppViewerContext')
@@ -34,7 +34,7 @@
 		selectedRowIndex: 0,
 		selectedRow: {},
 		selectedRows: [] as any[],
-		result: [] as Record<number, any>[],
+		result: [] as any[],
 		loading: false,
 		page: 0,
 		newChange: { row: 0, column: '', value: undefined },
@@ -45,7 +45,8 @@
 
 	function toggleRow(row: any) {
 		let rowIndex = row.rowIndex
-		let data = row.data
+		let data = { ...row.data }
+		delete data['__index']
 		if (selectedRowIndex !== rowIndex) {
 			selectedRowIndex = rowIndex
 			outputs?.selectedRow.set(data)
@@ -54,21 +55,26 @@
 	}
 
 	function toggleRows(rows: any[]) {
-		console.log(rows)
 		if (rows.length === 0) {
 			outputs?.selectedRows.set([])
 		}
 		toggleRow(rows[0])
-		outputs?.selectedRows.set(rows.map((x) => x.data))
+		outputs?.selectedRows.set(
+			rows.map((x) => {
+				let data = { ...x.data }
+				delete data['__index']
+				return data
+			})
+		)
 	}
 
-	$: outputs?.result?.set(result ?? [])
+	$: outputs?.result?.set(value)
 
 	let clientHeight
 	let clientWidth
 
 	function onCellValueChanged(event) {
-		if (result) {
+		if (value) {
 			let dataCell = event.newValue
 			try {
 				dataCell = JSON.parse(dataCell)
@@ -78,9 +84,14 @@
 				column: event.colDef.field,
 				value: dataCell
 			})
-			result[event.node.rowIndex][event.colDef.field] = dataCell
+			value[event.node.rowIndex][event.colDef.field] = dataCell
+			let data = { ...value[event.node.rowIndex] }
+			delete data['__index']
+			outputs?.selectedRow?.set(data)
 		}
 	}
+
+	$: value = (result ?? []).map((x, i) => ({ ...x, __index: i.toString() }))
 </script>
 
 {#each Object.keys(components['aggridcomponent'].initialData.configuration) as key (key)}
@@ -111,7 +122,7 @@
 					{#key resolvedConfig?.pagination}
 						{#key resolvedConfig?.extraConfig}
 							<AgGridSvelte
-								bind:rowData={result}
+								bind:rowData={value}
 								columnDefs={resolvedConfig?.columnDefs}
 								pagination={resolvedConfig?.pagination}
 								paginationAutoPageSize={resolvedConfig?.pagination}
@@ -141,10 +152,19 @@
 										}
 									}
 								}}
+								getRowId={(data) => data.data['__index']}
 								{...resolvedConfig.extraConfig}
 								onGridReady={(e) => {
 									outputs?.ready.set(true)
-									$componentControl[id] = { agGrid: { api: e.api, columnApi: e.columnApi } }
+									if (value.length > 0) {
+										e.api.getRowNode('0')?.setSelected(true)
+									}
+									$componentControl[id] = {
+										agGrid: { api: e.api, columnApi: e.columnApi },
+										setSelectedIndex: (index) => {
+											e.api.getRowNode(index.toString())?.setSelected(true)
+										}
+									}
 								}}
 							/>
 						{/key}

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

@@ -193,6 +193,11 @@
 				return true
 			}
 			return false
+		},
+		setSelectedIndex: (index: number) => {
+			if (filteredResult) {
+				toggleRow({ original: filteredResult[index] }, index, true)
+			}
 		}
 	}
 </script>

frontend/src/lib/components/apps/components/helpers/eval.ts

@@ -20,7 +20,7 @@ export function computeGlobalContext(world: World | undefined, extraContext: any
 
 function create_context_function_template(eval_string, context, noReturn: boolean) {
 	return `
-return async function (context, state, goto, setTab, recompute, getAgGrid, setValue) {
+return async function (context, state, goto, setTab, recompute, getAgGrid, setValue, setSelectedIndex) {
 "use strict";
 ${
 	Object.keys(context).length > 0
@@ -36,7 +36,16 @@ function make_context_evaluator(
 	eval_string,
 	context,
 	noReturn: boolean
-): (context, state, goto, setTab, recompute, getAgGrid, setValue) => Promise<any> {
+): (
+	context,
+	state,
+	goto,
+	setTab,
+	recompute,
+	getAgGrid,
+	setValue,
+	setSelectedIndex
+) => Promise<any> {
 	let template = create_context_function_template(eval_string, context, noReturn)
 	let functor = Function(template)
 	return functor()
@@ -86,6 +95,7 @@ export async function eval_like(
 			setTab?: (index: number) => void
 			agGrid?: { api: any; columnApi: any }
 			setValue?: (value: any) => void
+			setSelectedIndex?: (index: number) => void
 		}
 	>,
 	worldStore: World | undefined,
@@ -133,6 +143,9 @@ export async function eval_like(
 		},
 		(id, value) => {
 			controlComponents[id]?.setValue?.(value)
+		},
+		(id, index) => {
+			controlComponents[id]?.setSelectedIndex?.(index)
 		}
 	)
 }

frontend/src/lib/components/apps/editor/component/default-codes.ts

@@ -43,6 +43,44 @@ export const DEFAULT_CODES: Partial<
 	type Resource,
 } from "https://deno.land/x/windmill@v${__pkg__.version}/mod.ts";
 
+export async function main(db: Resource<"postgresql"> = "$res:f/examples/demodb") {
+	const query = await pgSql(db)\`SELECT * FROM demo;\`;
+	return query.rows;
+}`
+	},
+	aggridcomponent: {
+		deno: `export async function main() {
+	return [
+		{
+			"id": 1,
+			"name": "A cell with a long name",
+			"age": 42
+		},
+		{
+			"id": 2,
+			"name": "A briefer cell",
+			"age": 84
+		}
+	]
+}`,
+		python3: `def main():
+	return [
+		{
+			"id": 1,
+			"name": "A cell with a long name",
+			"age": 42
+		},
+		{
+			"id": 2,
+			"name": "A briefer cell",
+			"age": 84
+		}
+	]`,
+		pgsql: `import {
+	pgSql,
+	type Resource,
+} from "https://deno.land/x/windmill@v${__pkg__.version}/mod.ts";
+
 export async function main(db: Resource<"postgresql"> = "$res:f/examples/demodb") {
 	const query = await pgSql(db)\`SELECT * FROM demo;\`;
 	return query.rows;

frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte

@@ -238,6 +238,7 @@ state.foo += 1
 
 // you can also navigate (goto), recompute a script (recompute), or set a tab (setTab)
 // Inputs and display components support settings their value directly (setValue)
+// Tables support setting their selected index (setSelectedIndex)
 
 return state.foo`,
 							language: 'frontend',

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

@@ -196,6 +196,7 @@ export type AppViewerContext = {
 				setCode?: (value: string) => void
 				onDelete?: () => void
 				setValue?: (value: any) => void
+				setSelectedIndex?: (index: number) => void
 			}
 		>
 	>

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

@@ -217,6 +217,7 @@ declare function setTab(id: string, index: string): void;
 declare function recompute(id: string): void;
 declare function getAgGrid(id: string): {api: any, columnApi: any} | undefined;
 declare function setValue(id: string, value: any): void;
+declare function setSelectedIndex(id: string, index: number): void;
 `
 		: ''
 }