From 651d99824d1932a48fdb9ffd5dff944fa2c2c8aa Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 8 Dec 2023 23:42:08 +0100
Subject: [PATCH] fix: improve aggrid selectedRow output + make first
 selectedRow configurable

---
 .../display/table/AppAggridTable.svelte       | 37 ++++++++++++-------
 .../apps/editor/component/components.ts       |  6 +++
 .../propertyPicker/ObjectViewer.svelte        | 10 +++--
 3 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
index e5a566956a..843a04690f 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
@@ -47,7 +47,7 @@
 			: [{ error: 'input was not an array' }]
 		if (api && loaded) {
 			let selected = api.getSelectedNodes()
-			if (selected && selected.length > 0) {
+			if (selected && selected.length > 0 && resolvedConfig?.selectFirstRowByDefault != false) {
 				let data = { ...selected[0].data }
 				delete data['__index']
 				outputs?.selectedRow?.set(data)
@@ -83,9 +83,11 @@
 			delete data['__index']
 			if (selectedRowIndex !== rowIndex) {
 				selectedRowIndex = rowIndex
-				outputs?.selectedRow.set(data)
 				outputs?.selectedRowIndex.set(rowIndex)
 			}
+			if (!deepEqual(outputs?.selectedRow?.peak(), data)) {
+				outputs?.selectedRow.set(data)
+			}
 		}
 	}
 
@@ -159,7 +161,7 @@
 					onGridReady: (e) => {
 						outputs?.ready.set(true)
 						value = value
-						if (result && result.length > 0) {
+						if (result && result.length > 0 && resolvedConfig?.selectFirstRowByDefault != false) {
 							e.api.getRowNode('0')?.setSelected(true)
 						}
 						$componentControl[id] = {
@@ -171,17 +173,7 @@
 						api = e.api
 					},
 					onSelectionChanged: (e) => {
-						if (resolvedConfig?.multipleSelectable) {
-							const rows = e.api.getSelectedNodes()
-							if (rows != undefined) {
-								toggleRows(rows)
-							}
-						} else {
-							const row = e.api.getSelectedNodes()?.[0]
-							if (row != undefined) {
-								toggleRow(row)
-							}
-						}
+						onSelectionChanged(e.api)
 					},
 					getRowId: (data) => data.data['__index']
 				},
@@ -201,8 +193,25 @@
 		}
 	}
 
+	function onSelectionChanged(api: GridApi<any>) {
+		if (resolvedConfig?.multipleSelectable) {
+			const rows = api.getSelectedNodes()
+			if (rows != undefined) {
+				toggleRows(rows)
+			}
+		} else {
+			const row = api.getSelectedNodes()?.[0]
+			if (row != undefined) {
+				toggleRow(row)
+			}
+		}
+	}
+
 	function updateValue() {
 		api?.updateGridOptions({ rowData: value })
+		if (api) {
+			onSelectionChanged(api)
+		}
 	}
 	function updateOptions() {
 		api?.updateGridOptions({
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index eb7f35c8ad..2e540045ad 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -574,6 +574,12 @@ const aggridcomponentconst = {
 				fieldType: 'boolean',
 				value: false
 			},
+			selectFirstRowByDefault: {
+				type: 'static',
+				fieldType: 'boolean',
+				value: true as boolean,
+				tooltip: 'Select the first row by default on start'
+			},
 			extraConfig: {
 				type: 'static',
 				fieldType: 'object',
diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
index b65801f47f..ec12fb667f 100644
--- a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
+++ b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
@@ -56,6 +56,8 @@
 	}
 
 	$: keyLimit = isArray ? 1 : 100
+
+	$: fullyCollapsed = keys.length > 1 && collapsed
 </script>
 
 <Portal>
@@ -63,9 +65,9 @@
 </Portal>
 
 {#if keys.length > 0}
-	{#if !collapsed}
+	{#if !fullyCollapsed}
 		<span>
-			{#if level != 0}
+			{#if level != 0 && keys.length > 1}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<!-- svelte-ignore a11y-no-static-element-interactions -->
 				<span class="cursor-pointer border hover:bg-surface-hover px-1 rounded" on:click={collapse}>
@@ -149,12 +151,12 @@
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<span
 		class="border border-blue-600 rounded px-1 cursor-pointer hover:bg-gray-200"
-		class:hidden={!collapsed}
+		class:hidden={!fullyCollapsed}
 		on:click={collapse}
 	>
 		{openBracket}{collapsedSymbol}{closeBracket}
 	</span>
-	{#if collapsed}
+	{#if fullyCollapsed}
 		<span class="text-tertiary text-xs">
 			{pluralize(Object.keys(json).length, Array.isArray(json) ? 'item' : 'key')}
 		</span>